remove old unused files

app/src/content/assets/data/against_baselines copy.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a5e6173a1541b9798278da1729f1e357c0711d2e270f68aa4af8eae962f146dd
-size 53573

app/src/content/assets/data/against_baselines.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a5e6173a1541b9798278da1729f1e357c0711d2e270f68aa4af8eae962f146dd
-size 53573

app/src/content/assets/data/against_baselines_deduplicated.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:56d18f581eff719023eb87c695e0e11770738d7872c8b9dac9bc23d9b0ef560b
-size 32738

app/src/content/assets/data/all_ratings_luis.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:104433529e7d9c8a3bd297be1138e9e87677a666953d1362c517ec389c6c9172
-size 64966

app/src/content/assets/data/banner_visualisation_data_enriched.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:98eba5e5db19f482da8a3b26498c2fa633afa458f5b75e23d2dca24e24cc7596
-size 844651

app/src/content/assets/data/doc-masking_evals.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6052fa3042d49a5c2d5b370d3688380220bc612f22f73cff03f1e9354e09a330
-size 26360

app/src/content/assets/data/doc-masking_loss.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:cacd1a2f14b1c5b5c4342db37759149c5b60b83593bca9e38b7ca451e81cc086
-size 52272

app/src/content/assets/data/internal_deduplication.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d6b6bf0d84fe1bc67436c70f9a8d5919627e9c2bc9c3f931f4af80c01be22649
-size 47060

app/src/content/assets/data/mnist-variant-model.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7dca86e85be46c1fca6a4e2503786e88e3f8d4609fb7284c8a1479620a5827da
-size 4315

app/src/content/assets/data/no-wd_evals.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b003b8eb447244e804953b26cf991460895928d2b40d64b3db01da8c3971961a
-size 42062

app/src/content/assets/data/no_wd_comparison.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7d10e959763dda8b6c9e5a987b2d97af004bd8a51c8680f6a9a18cf84d85da6b
-size 83830

app/src/content/assets/data/nope_evals.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:aaceaec65082326c22a6a92757b90a37a0cfaa68bc4fa3f96d0e6b6c3d7c1cbb
-size 34900

app/src/content/assets/data/nope_loss.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ef7b55386054b9db1c1e2fbafc2f5b100af2ef8812523a546c40d9db08410a86
-size 69964

app/src/content/assets/data/remove_ch.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:869fc4724af7e9c868b6024f472f9ae0f6468b74ef61db101438f80610828abb
-size 28837

app/src/content/assets/data/root-seq-write-heatmaps.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3cd5eec18185386c9641343aa2da610a66fbd38611e4927bb016d369a8fe3972
-size 6651

app/src/content/assets/data/s25_ratings.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ca22654a0302da0ca335420b0a89cd770cea560b11f2a9f9f25927877d7ed231
-size 61626

app/src/content/assets/data/ss_vs_s1.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3f076631fcad76129ed8cab03c72a61965b465e1f3e7fa8dc68b7c7a9275616b
-size 28041

app/src/content/assets/data/tied-embeddings_evals.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c0b6354ce2d0dd8fbe275d6b5701025ec2435a58b30fce92f8600eb9e45e9f0b
-size 49810

app/src/content/assets/data/zloss_comparison.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c0ef8312bf43933601cb226df5b636261410b59f2599baca92be8ef0a612dd6a
-size 49739

app/src/content/assets/data/zloss_evals.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:78dac31df718d071f04e55fb5e2845894cf5b68d989d14a1a568b9aec5ded5c3
-size 22541

app/src/content/embeds/banner-neural-network-animejs.html

@@ -1,464 +0,0 @@
-<div class="neural-flow"
-    style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;position:relative;overflow:hidden;"></div>
-<script>
-    (() => {
-        const ensureAnime = (cb) => {
-            if (window.anime && typeof window.anime === 'function') return cb();
-            let s = document.getElementById('anime-cdn-script');
-            if (!s) {
-                s = document.createElement('script');
-                s.id = 'anime-cdn-script';
-                s.src = 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js';
-                document.head.appendChild(s);
-            }
-            const onReady = () => { if (window.anime && typeof window.anime === 'function') cb(); };
-            s.addEventListener('load', onReady, { once: true });
-            if (window.anime) onReady();
-        };
-
-        const bootstrap = () => {
-            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-            const container = (mount && mount.querySelector && mount.querySelector('.neural-flow')) || document.querySelector('.neural-flow');
-            if (!container) return;
-            if (container.dataset) {
-                if (container.dataset.mounted === 'true') return;
-                container.dataset.mounted = 'true';
-            }
-
-            // Create canvas
-            const canvas = document.createElement('canvas');
-            canvas.style.display = 'block';
-            canvas.style.width = '100%';
-            canvas.style.height = '100%';
-            container.appendChild(canvas);
-            const ctx = canvas.getContext('2d');
-
-            // Theme colors
-            const getColors = () => {
-                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-                return {
-                    node: isDark ? 'rgba(206, 192, 250, 0.85)' : 'rgba(138, 100, 220, 0.8)',
-                    nodeActive: isDark ? 'rgba(232, 137, 171, 1)' : 'rgba(220, 80, 130, 1)',
-                    nodeGlow: isDark ? 'rgba(206, 192, 250, 0.4)' : 'rgba(138, 100, 220, 0.3)',
-                    connection: isDark ? 'rgba(78, 165, 183, 0.08)' : 'rgba(78, 165, 183, 0.15)',
-                    connectionActive: isDark ? 'rgba(232, 137, 171, 0.6)' : 'rgba(220, 80, 130, 0.5)',
-                    accent: isDark ? 'rgba(78, 165, 183, 0.9)' : 'rgba(50, 130, 160, 0.85)',
-                    particle: isDark ? 'rgba(232, 137, 171, 1)' : 'rgba(220, 80, 130, 1)',
-                };
-            };
-
-            let colors = getColors();
-
-            // Watch for theme changes
-            const observer = new MutationObserver(() => {
-                colors = getColors();
-            });
-            observer.observe(document.documentElement, {
-                attributes: true,
-                attributeFilter: ['data-theme']
-            });
-
-            // Neural network structure
-            const layers = [
-                { nodes: 6, name: 'input' },
-                { nodes: 10, name: 'hidden1' },
-                { nodes: 8, name: 'hidden2' },
-                { nodes: 4, name: 'output' }
-            ];
-
-            let nodes = [];
-            let connections = [];
-            let particles = [];
-            let width, height;
-
-            const resize = () => {
-                width = container.clientWidth || 800;
-                height = Math.max(260, Math.round(width / 3));
-                canvas.width = width;
-                canvas.height = height;
-                initNetwork();
-            };
-
-            const initNetwork = () => {
-                nodes = [];
-                connections = [];
-                particles = [];
-
-                const layerSpacing = width / (layers.length + 1);
-                const margin = height * 0.15;
-
-                // Create ALL nodes first
-                let nodeIndex = 0;
-                const layerStartIndices = [];
-
-                layers.forEach((layer, layerIdx) => {
-                    layerStartIndices.push(nodeIndex);
-                    const x = layerSpacing * (layerIdx + 1);
-                    const availableHeight = height - 2 * margin;
-                    const nodeSpacing = availableHeight / (layer.nodes + 1);
-
-                    for (let i = 0; i < layer.nodes; i++) {
-                        const y = margin + nodeSpacing * (i + 1);
-                        const node = {
-                            x,
-                            y,
-                            layer: layerIdx,
-                            index: i,
-                            radius: 0,
-                            targetRadius: 3.5 + Math.random() * 1.5,
-                            pulse: Math.random() * Math.PI * 2,
-                            activation: 0,
-                            baseActivity: Math.random() * 0.1
-                        };
-                        nodes.push(node);
-                        nodeIndex++;
-                    }
-                });
-
-                // Create FULLY CONNECTED network
-                layers.forEach((layer, layerIdx) => {
-                    if (layerIdx < layers.length - 1) {
-                        const currentLayerStart = layerStartIndices[layerIdx];
-                        const nextLayerStart = layerStartIndices[layerIdx + 1];
-                        const nextLayerNodes = layers[layerIdx + 1].nodes;
-
-                        for (let i = 0; i < layer.nodes; i++) {
-                            for (let j = 0; j < nextLayerNodes; j++) {
-                                connections.push({
-                                    from: currentLayerStart + i,
-                                    to: nextLayerStart + j,
-                                    weight: Math.random(),
-                                    opacity: 0,
-                                    activation: 0
-                                });
-                            }
-                        }
-                    }
-                });
-
-                // Initial animation - nodes appear (plus rapide)
-                nodes.forEach((node, i) => {
-                    anime({
-                        targets: node,
-                        radius: node.targetRadius,
-                        duration: 800,
-                        delay: i * 8,
-                        easing: 'easeOutElastic(1, .6)'
-                    });
-                });
-
-                // Connections fade in (plus rapide)
-                connections.forEach((conn, i) => {
-                    anime({
-                        targets: conn,
-                        opacity: 1,
-                        duration: 400,
-                        delay: 300 + i * 1,
-                        easing: 'easeOutQuad'
-                    });
-                });
-
-                // Start forward propagation cycles (plus rapide)
-                setTimeout(() => {
-                    startForwardPass();
-                    setInterval(startForwardPass, 2500 + Math.random() * 1000);
-                }, 1000);
-            };
-
-            // Différents patterns d'activation
-            const activationPatterns = [
-                // Pattern 1: Tous les inputs
-                (inputNodes) => inputNodes,
-
-                // Pattern 2: Un seul input (signal focal)
-                (inputNodes) => [inputNodes[Math.floor(Math.random() * inputNodes.length)]],
-
-                // Pattern 3: Moitié haute
-                (inputNodes) => inputNodes.slice(0, Math.ceil(inputNodes.length / 2)),
-
-                // Pattern 4: Moitié basse
-                (inputNodes) => inputNodes.slice(Math.floor(inputNodes.length / 2)),
-
-                // Pattern 5: Pattern alterné
-                (inputNodes) => inputNodes.filter((_, i) => i % 2 === 0),
-
-                // Pattern 6: 2-3 inputs aléatoires
-                (inputNodes) => {
-                    const num = 2 + Math.floor(Math.random() * 2);
-                    return [...inputNodes].sort(() => Math.random() - 0.5).slice(0, num);
-                },
-
-                // Pattern 7: Cascade (un par un avec délai)
-                (inputNodes) => inputNodes.slice(0, 3 + Math.floor(Math.random() * 3))
-            ];
-
-            const startForwardPass = () => {
-                const inputNodes = nodes.filter(n => n.layer === 0);
-
-                // Choisir un pattern aléatoire
-                const pattern = activationPatterns[Math.floor(Math.random() * activationPatterns.length)];
-                const activeInputs = pattern(inputNodes);
-
-                // Activer les inputs (plus rapide)
-                activeInputs.forEach((node, idx) => {
-                    anime({
-                        targets: node,
-                        activation: 0.8 + Math.random() * 0.2,
-                        duration: 200,
-                        delay: idx * 60,
-                        easing: 'easeOutQuad',
-                        complete: () => {
-                            anime({
-                                targets: node,
-                                activation: node.baseActivity,
-                                duration: 250,
-                                delay: 400,
-                                easing: 'easeInQuad'
-                            });
-                        }
-                    });
-                });
-
-                // Propager à travers TOUTES les couches (plus rapide)
-                for (let layerIdx = 0; layerIdx < layers.length - 1; layerIdx++) {
-                    setTimeout(() => {
-                        propagateLayer(layerIdx);
-                    }, 250 + layerIdx * 350);
-                }
-            };
-
-            const propagateLayer = (fromLayerIdx) => {
-                const fromNodes = nodes.filter(n => n.layer === fromLayerIdx);
-                const toNodes = nodes.filter(n => n.layer === fromLayerIdx + 1);
-
-                const layerConnections = connections.filter(c => {
-                    const fromNode = nodes[c.from];
-                    const toNode = nodes[c.to];
-                    return fromNode.layer === fromLayerIdx && toNode.layer === fromLayerIdx + 1;
-                });
-
-                // Activer connections et créer particules
-                layerConnections.forEach((conn, idx) => {
-                    const fromNode = nodes[conn.from];
-                    const activationStrength = fromNode.activation * conn.weight;
-
-                    if (activationStrength > 0.2) {
-                        anime({
-                            targets: conn,
-                            activation: activationStrength,
-                            duration: 300,
-                            delay: idx * 1,
-                            easing: 'easeOutQuad',
-                            complete: () => {
-                                anime({
-                                    targets: conn,
-                                    activation: 0,
-                                    duration: 250,
-                                    easing: 'easeInQuad'
-                                });
-                            }
-                        });
-
-                        // Créer particule qui voyage le long de la connexion
-                        if (Math.random() < 0.3) { // Pas sur toutes les connexions
-                            createParticle(conn, activationStrength);
-                        }
-                    }
-                });
-
-                // Activer les nœuds cibles (plus rapide)
-                setTimeout(() => {
-                    toNodes.forEach(toNode => {
-                        const toNodeIdx = nodes.indexOf(toNode);
-                        const incomingConns = layerConnections.filter(c => c.to === toNodeIdx);
-
-                        let sum = 0;
-                        incomingConns.forEach(conn => {
-                            const fromNode = nodes[conn.from];
-                            sum += fromNode.activation * conn.weight;
-                        });
-
-                        const activation = Math.min(1, sum / incomingConns.length * 1.5);
-
-                        if (activation > 0.25) {
-                            anime({
-                                targets: toNode,
-                                activation: activation,
-                                duration: 200,
-                                easing: 'easeOutQuad',
-                                complete: () => {
-                                    anime({
-                                        targets: toNode,
-                                        activation: toNode.baseActivity,
-                                        duration: 400,
-                                        delay: 300,
-                                        easing: 'easeInQuad'
-                                    });
-                                }
-                            });
-                        }
-                    });
-                }, 150);
-            };
-
-            const createParticle = (connection, strength) => {
-                const fromNode = nodes[connection.from];
-                const toNode = nodes[connection.to];
-                if (!fromNode || !toNode) return;
-
-                const particle = {
-                    fromX: fromNode.x,
-                    fromY: fromNode.y,
-                    toX: toNode.x,
-                    toY: toNode.y,
-                    progress: 0,
-                    strength: strength,
-                    size: 1.5 + strength * 1.5,
-                    trail: []
-                };
-
-                particles.push(particle);
-
-                anime({
-                    targets: particle,
-                    progress: 1,
-                    duration: 350,
-                    easing: 'easeInOutQuad',
-                    complete: () => {
-                        // Retirer la particule
-                        const idx = particles.indexOf(particle);
-                        if (idx > -1) particles.splice(idx, 1);
-                    }
-                });
-            };
-
-            const draw = () => {
-                // Pas de background - transparent
-                ctx.clearRect(0, 0, width, height);
-
-                // Draw connections
-                connections.forEach(conn => {
-                    if (conn.opacity < 0.01) return;
-
-                    const fromNode = nodes[conn.from];
-                    const toNode = nodes[conn.to];
-                    if (!fromNode || !toNode) return;
-
-                    const baseOpacity = conn.opacity * conn.weight * 0.5;
-                    const activeOpacity = conn.activation;
-                    const totalOpacity = Math.max(baseOpacity, activeOpacity);
-
-                    if (totalOpacity < 0.01) return;
-
-                    const isActive = conn.activation > 0.1;
-                    const connectionColor = isActive ? colors.connectionActive : colors.connection;
-
-                    ctx.beginPath();
-                    ctx.moveTo(fromNode.x, fromNode.y);
-                    ctx.lineTo(toNode.x, toNode.y);
-
-                    const rgb = connectionColor.match(/[\d.]+/g);
-                    ctx.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${totalOpacity})`;
-                    ctx.lineWidth = isActive ? 1.5 : 0.8;
-                    ctx.stroke();
-                });
-
-                // Draw particles
-                particles.forEach(particle => {
-                    const x = particle.fromX + (particle.toX - particle.fromX) * particle.progress;
-                    const y = particle.fromY + (particle.toY - particle.fromY) * particle.progress;
-
-                    // Trail
-                    particle.trail.push({ x, y });
-                    if (particle.trail.length > 5) particle.trail.shift();
-
-                    particle.trail.forEach((point, i) => {
-                        const alpha = (i / particle.trail.length) * particle.strength;
-                        const size = particle.size * alpha * 0.6;
-
-                        ctx.beginPath();
-                        ctx.arc(point.x, point.y, size, 0, Math.PI * 2);
-                        const rgb = colors.particle.match(/[\d.]+/g);
-                        ctx.fillStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha * 0.5})`;
-                        ctx.fill();
-                    });
-
-                    // Particle principale
-                    ctx.beginPath();
-                    ctx.arc(x, y, particle.size, 0, Math.PI * 2);
-                    ctx.fillStyle = colors.particle;
-                    ctx.shadowBlur = 8;
-                    ctx.shadowColor = colors.particle;
-                    ctx.fill();
-                    ctx.shadowBlur = 0;
-                });
-
-                // Draw nodes
-                nodes.forEach((node, i) => {
-                    if (node.radius < 0.1) return;
-
-                    node.pulse += 0.015;
-                    const pulseSize = 1 + Math.sin(node.pulse) * 0.08;
-                    const activationBoost = node.activation * 1.8;
-                    const finalRadius = node.radius * pulseSize + activationBoost;
-
-                    // Glow for active nodes
-                    if (node.activation > 0.15) {
-                        const glowRadius = finalRadius * 4;
-                        const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, glowRadius);
-                        const glowAlpha = node.activation * 0.5;
-                        gradient.addColorStop(0, colors.nodeGlow.replace(/[\d.]+\)$/, `${glowAlpha})`));
-                        gradient.addColorStop(1, colors.nodeGlow.replace(/[\d.]+\)$/, '0)'));
-                        ctx.beginPath();
-                        ctx.arc(node.x, node.y, glowRadius, 0, Math.PI * 2);
-                        ctx.fillStyle = gradient;
-                        ctx.fill();
-                    }
-
-                    // Node color based on activation
-                    const t = Math.min(1, node.activation / 0.8);
-
-                    const baseRgb = colors.node.match(/[\d.]+/g);
-                    const activeRgb = colors.nodeActive.match(/[\d.]+/g);
-                    const r = parseFloat(baseRgb[0]) + (parseFloat(activeRgb[0]) - parseFloat(baseRgb[0])) * t;
-                    const g = parseFloat(baseRgb[1]) + (parseFloat(activeRgb[1]) - parseFloat(baseRgb[1])) * t;
-                    const b = parseFloat(baseRgb[2]) + (parseFloat(activeRgb[2]) - parseFloat(baseRgb[2])) * t;
-                    const a = parseFloat(baseRgb[3]) + (parseFloat(activeRgb[3]) - parseFloat(baseRgb[3])) * t;
-
-                    // Node
-                    ctx.beginPath();
-                    ctx.arc(node.x, node.y, finalRadius, 0, Math.PI * 2);
-                    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-                    ctx.fill();
-
-                    // Inner core for active nodes
-                    if (node.activation > 0.4) {
-                        ctx.beginPath();
-                        ctx.arc(node.x, node.y, finalRadius * 0.4, 0, Math.PI * 2);
-                        ctx.fillStyle = colors.accent.replace(/[\d.]+\)$/, `${node.activation})`);
-                        ctx.fill();
-                    }
-                });
-
-                requestAnimationFrame(draw);
-            };
-
-            // Start
-            if (window.ResizeObserver) {
-                const ro = new ResizeObserver(resize);
-                ro.observe(container);
-            } else {
-                window.addEventListener('resize', resize);
-            }
-
-            resize();
-            draw();
-        };
-
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => ensureAnime(bootstrap), { once: true });
-        } else {
-            ensureAnime(bootstrap);
-        }
-    })();
-</script>

app/src/content/embeds/banner-threejs-galaxy.html

@@ -1,504 +0,0 @@
-<div class="threejs-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
-<script type="importmap">
-{
-  "imports": {
-    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
-    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
-  }
-}
-</script>
-<style>
-    .threejs-galaxy {
-        overflow: visible;
-        background: transparent;
-    }
-
-    .threejs-galaxy canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
-
-    .threejs-galaxy .tp-dfwv {
-        position: absolute !important;
-        top: 16px !important;
-        right: 16px !important;
-        z-index: 100 !important;
-    }
-</style>
-<script type="module">
-    import * as THREE from 'three';
-    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-    import { Pane } from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.js';
-
-    const container = document.querySelector('.threejs-galaxy');
-    if (!container || container.dataset.mounted === 'true') {
-        if (container) console.log('Container already mounted');
-    } else {
-        container.dataset.mounted = 'true';
-
-        // === Scene Setup ===
-        const scene = new THREE.Scene();
-
-        const camera = new THREE.PerspectiveCamera(
-            35,
-            container.clientWidth / Math.max(260, Math.round(container.clientWidth / 3)),
-            0.1,
-            100
-        );
-        // Vue du dessus avec angle pour voir la profondeur - plus proche pour remplir l'espace
-        camera.position.set(-0.03, 1.75, 5.71);
-        camera.rotation.set(-0.43, -0.01, -0.01);
-
-        const renderer = new THREE.WebGLRenderer({
-            antialias: true,
-            alpha: true,
-            powerPreference: 'high-performance'
-        });
-        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-        renderer.setClearColor(0x000000, 0);
-        container.appendChild(renderer.domElement);
-
-        // === OrbitControls ===
-        const controls = new OrbitControls(camera, renderer.domElement);
-        controls.enableDamping = true;
-        controls.dampingFactor = 0.05;
-        controls.autoRotate = true;
-        controls.autoRotateSpeed = 0.5;
-        controls.enableZoom = true;
-        controls.enablePan = true;
-        controls.panSpeed = 0.5;
-        controls.minDistance = 3;
-        controls.maxDistance = 12;
-        controls.target.set(0.04, -0.75, 0.26);
-
-        // Track pane visibility for logging
-        let paneVisible = false;
-
-        // Log camera position and rotation on change (only when pane is visible)
-        controls.addEventListener('change', () => {
-            if (paneVisible) {
-                console.log('Camera Position:', `camera.position.set(${camera.position.x.toFixed(2)}, ${camera.position.y.toFixed(2)}, ${camera.position.z.toFixed(2)});`);
-                console.log('Camera Rotation:', `camera.rotation.set(${camera.rotation.x.toFixed(2)}, ${camera.rotation.y.toFixed(2)}, ${camera.rotation.z.toFixed(2)});`);
-                console.log('Target (Center):', `controls.target.set(${controls.target.x.toFixed(2)}, ${controls.target.y.toFixed(2)}, ${controls.target.z.toFixed(2)});`);
-                console.log('---');
-            }
-        });
-
-        // === Galaxy Parameters ===
-        // Detect current theme
-        const isDarkMode = () => document.documentElement.getAttribute('data-theme') === 'dark';
-
-        const params = {
-            count: 12000,
-            size: 150,
-            whiteSize: 25,
-            sizeVariation: 0.8,
-            radius: 4,
-            branches: 2,
-            spin: 3.0,
-            randomness: 0.3,
-            randomnessPower: 3,
-            centerSizeBoost: 1.5,
-            insideColor: isDarkMode() ? '#ff6030' : '#ff8050',
-            outsideColor: isDarkMode() ? '#1b3984' : '#3d5fa8',
-            fov: 35
-        };
-
-        // === Tweakpane ===
-        const pane = new Pane({
-            container: container,
-            title: 'Galaxy Controls'
-        });
-
-        // Hide pane by default
-        pane.element.style.display = 'none';
-
-        let geometry = null;
-        let material = null;
-        let points = null;
-        let whiteGeometry = null;
-        let whiteMaterial = null;
-        let whitePoints = null;
-
-        // === Animation Clock ===
-        const clock = new THREE.Clock();
-
-        // === Generate Galaxy Function ===
-        const generateGalaxy = () => {
-            // Destroy old galaxy
-            if (points !== null) {
-                geometry.dispose();
-                material.dispose();
-                scene.remove(points);
-            }
-
-            // Destroy old white points
-            if (whitePoints !== null) {
-                whiteGeometry.dispose();
-                whiteMaterial.dispose();
-                scene.remove(whitePoints);
-            }
-
-            // New geometry
-            geometry = new THREE.BufferGeometry();
-
-            const positions = new Float32Array(params.count * 3);
-            const colors = new Float32Array(params.count * 3);
-            const scales = new Float32Array(params.count);
-
-            const colorInside = new THREE.Color(params.insideColor);
-            const colorOutside = new THREE.Color(params.outsideColor);
-
-            for (let i = 0; i < params.count; i++) {
-                const i3 = i * 3;
-
-                // Position sur le rayon
-                const radius = Math.random() * params.radius;
-                const radiusRatio = radius / params.radius;
-
-                // Angle de la branche
-                const branchAngle = (i % params.branches) / params.branches * Math.PI * 2;
-
-                // Angle de spin (twist)
-                const spinAngle = radius * params.spin;
-
-                // Randomness
-                const randomX = Math.pow(Math.random(), params.randomnessPower) * (Math.random() < 0.5 ? 1 : -1) * params.randomness * radius;
-                const randomY = Math.pow(Math.random(), params.randomnessPower) * (Math.random() < 0.5 ? 1 : -1) * params.randomness * radius * 0.3;
-                const randomZ = Math.pow(Math.random(), params.randomnessPower) * (Math.random() < 0.5 ? 1 : -1) * params.randomness * radius;
-
-                // Position finale en 3D
-                positions[i3] = Math.cos(branchAngle + spinAngle) * radius + randomX;
-                positions[i3 + 1] = randomY;
-                positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius + randomZ;
-
-                // Couleur
-                const mixedColor = colorInside.clone();
-                mixedColor.lerp(colorOutside, radiusRatio);
-
-                colors[i3] = mixedColor.r;
-                colors[i3 + 1] = mixedColor.g;
-                colors[i3 + 2] = mixedColor.b;
-
-                // Échelle : plus gros au centre, linéairement décroissant vers l'extérieur
-                const centerScale = (1.0 + params.centerSizeBoost) - radiusRatio * params.centerSizeBoost;
-                // Variation aléatoire contrôlée par sizeVariation
-                const randomScale = Math.pow(Math.random(), 2.0) * params.sizeVariation;
-                scales[i] = randomScale + centerScale;
-            }
-
-            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-            geometry.setAttribute('aScale', new THREE.BufferAttribute(scales, 1));
-
-            // === Shader Material ===
-            material = new THREE.ShaderMaterial({
-                depthWrite: false,
-                blending: THREE.AdditiveBlending,
-                vertexColors: true,
-                uniforms: {
-                    uTime: { value: 0 },
-                    uSize: { value: params.size * renderer.getPixelRatio() }
-                },
-                vertexShader: `
-                    uniform float uTime;
-                    uniform float uSize;
-                    
-                    attribute float aScale;
-                    
-                    varying vec3 vColor;
-                    
-                    void main() {
-                        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-                        
-                        vec4 viewPosition = viewMatrix * modelPosition;
-                        vec4 projectedPosition = projectionMatrix * viewPosition;
-                        gl_Position = projectedPosition;
-                        
-                        // Taille des points
-                        gl_PointSize = uSize * aScale;
-                        gl_PointSize *= (1.0 / -viewPosition.z);
-                        
-                        vColor = color;
-                    }
-                `,
-                fragmentShader: `
-                    varying vec3 vColor;
-                    
-                    void main() {
-                        float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-                        
-                        // Noyau brillant
-                        float core = 1.0 - smoothstep(0.0, 0.25, distanceToCenter);
-                        core = pow(core, 2.0);
-                        
-                        // Halo externe
-                        float halo = 1.0 - smoothstep(0.15, 0.5, distanceToCenter);
-                        halo = pow(halo, 3.0);
-                        
-                        // Combinaison
-                        float strength = max(core, halo * 0.3);
-                        
-                        // Couleur finale (adaptée au thème)
-                        float coreIntensity = ${isDarkMode() ? '0.8' : '0.7'};
-                        float haloIntensity = ${isDarkMode() ? '0.4' : '0.35'};
-                        vec3 coreColor = vColor * coreIntensity;
-                        vec3 haloColor = vColor * haloIntensity;
-                        vec3 finalColor = mix(haloColor, coreColor, core);
-                        
-                        // Alpha adapté au thème
-                        float alpha = strength * ${isDarkMode() ? '0.6' : '0.5'};
-                        
-                        gl_FragColor = vec4(finalColor, alpha);
-                    }
-                `
-            });
-
-            // === Points ===
-            points = new THREE.Points(geometry, material);
-            scene.add(points);
-
-            // === White Points (50% random subset) ===
-            const whiteCount = Math.floor(params.count * 0.5);
-            const whitePositions = new Float32Array(whiteCount * 3);
-            const whiteScales = new Float32Array(whiteCount);
-
-            // Sélectionner aléatoirement 50% des indices
-            const indices = Array.from({ length: params.count }, (_, i) => i);
-            // Mélanger les indices (Fisher-Yates shuffle)
-            for (let i = indices.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [indices[i], indices[j]] = [indices[j], indices[i]];
-            }
-            const selectedIndices = indices.slice(0, whiteCount);
-
-            // Copier les positions sélectionnées et créer des échelles plus petites
-            for (let i = 0; i < whiteCount; i++) {
-                const sourceIdx = selectedIndices[i];
-                whitePositions[i * 3] = positions[sourceIdx * 3];
-                whitePositions[i * 3 + 1] = positions[sourceIdx * 3 + 1];
-                whitePositions[i * 3 + 2] = positions[sourceIdx * 3 + 2];
-
-                // Échelles beaucoup plus petites pour les points blancs
-                whiteScales[i] = (Math.random() * 0.2 + 0.2) / 6;
-            }
-
-            whiteGeometry = new THREE.BufferGeometry();
-            whiteGeometry.setAttribute('position', new THREE.BufferAttribute(whitePositions, 3));
-            whiteGeometry.setAttribute('aScale', new THREE.BufferAttribute(whiteScales, 1));
-
-            // Matériau pour les points blancs
-            whiteMaterial = new THREE.ShaderMaterial({
-                depthWrite: false,
-                blending: THREE.AdditiveBlending,
-                uniforms: {
-                    uTime: { value: 0 },
-                    uSize: { value: params.whiteSize * renderer.getPixelRatio() }
-                },
-                vertexShader: `
-                    uniform float uTime;
-                    uniform float uSize;
-                    
-                    attribute float aScale;
-                    
-                    void main() {
-                        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-                        
-                        vec4 viewPosition = viewMatrix * modelPosition;
-                        vec4 projectedPosition = projectionMatrix * viewPosition;
-                        gl_Position = projectedPosition;
-                        
-                        gl_PointSize = uSize * aScale;
-                        gl_PointSize *= (1.0 / -viewPosition.z);
-                    }
-                `,
-                fragmentShader: `
-                    void main() {
-                        float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-                        
-                        // Créer une boule bien définie
-                        float strength = 1.0 - smoothstep(0.3, 0.5, distanceToCenter);
-                        strength = pow(strength, 2.0);
-                        
-                        // Couleur blanche (adaptée au thème)
-                        vec3 whiteColor = vec3(${isDarkMode() ? '1.0, 1.0, 1.0' : '0.95, 0.95, 0.98'});
-                        
-                        gl_FragColor = vec4(whiteColor, strength * ${isDarkMode() ? '0.8' : '0.9'});
-                    }
-                `
-            });
-
-            whitePoints = new THREE.Points(whiteGeometry, whiteMaterial);
-            scene.add(whitePoints);
-
-        };
-
-        // Generate initial galaxy
-        generateGalaxy();
-
-        // === Tweakpane Controls ===
-        pane.addBinding(params, 'count', {
-            label: 'Particles',
-            min: 1000,
-            max: 50000,
-            step: 1000
-        }).on('change', () => {
-            generateGalaxy();
-        });
-
-        pane.addBinding(params, 'spin', {
-            label: 'Twist',
-            min: 0,
-            max: 5,
-            step: 0.1
-        }).on('change', () => {
-            generateGalaxy();
-        });
-
-        pane.addBinding(params, 'size', {
-            label: 'Point Size',
-            min: 10,
-            max: 200,
-            step: 1
-        }).on('change', () => {
-            if (material) {
-                material.uniforms.uSize.value = params.size * renderer.getPixelRatio();
-            }
-        });
-
-        pane.addBinding(params, 'sizeVariation', {
-            label: 'Size Variation',
-            min: 0,
-            max: 2,
-            step: 0.05
-        }).on('change', () => {
-            generateGalaxy();
-        });
-
-        pane.addBinding(params, 'whiteSize', {
-            label: 'White Size',
-            min: 5,
-            max: 100,
-            step: 1
-        }).on('change', () => {
-            if (whiteMaterial) {
-                whiteMaterial.uniforms.uSize.value = params.whiteSize * renderer.getPixelRatio();
-            }
-        });
-
-        pane.addBinding(params, 'centerSizeBoost', {
-            label: 'Center Boost',
-            min: 0,
-            max: 3,
-            step: 0.1
-        }).on('change', () => {
-            generateGalaxy();
-        });
-
-        pane.addBinding(params, 'branches', {
-            label: 'Branches',
-            min: 2,
-            max: 6,
-            step: 1
-        }).on('change', () => {
-            generateGalaxy();
-        });
-
-        pane.addBinding(params, 'fov', {
-            label: 'FOV (Zoom)',
-            min: 20,
-            max: 75,
-            step: 1
-        }).on('change', () => {
-            camera.fov = params.fov;
-            camera.updateProjectionMatrix();
-        });
-
-        // === Animation ===
-        const animate = () => {
-            requestAnimationFrame(animate);
-
-            const elapsedTime = clock.getElapsedTime();
-
-            if (material) {
-                material.uniforms.uTime.value = elapsedTime;
-            }
-
-            // Mise à jour des contrôles OrbitControls (gère la rotation automatique)
-            controls.update();
-
-            renderer.render(scene, camera);
-        };
-
-        // === Resize ===
-        const onResize = () => {
-            const width = container.clientWidth;
-            const height = Math.max(260, Math.round(width / 3));
-
-            camera.aspect = width / height;
-            camera.updateProjectionMatrix();
-
-            renderer.setSize(width, height);
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-
-            if (material) {
-                material.uniforms.uSize.value = params.size * renderer.getPixelRatio();
-            }
-            if (whiteMaterial) {
-                whiteMaterial.uniforms.uSize.value = params.whiteSize * renderer.getPixelRatio();
-            }
-        };
-
-        onResize();
-
-        if (window.ResizeObserver) {
-            new ResizeObserver(onResize).observe(container);
-        } else {
-            window.addEventListener('resize', onResize);
-        }
-
-        // === Theme Support ===
-        const updateTheme = () => {
-            renderer.setClearColor(0x000000, 0);
-            // Update colors based on theme
-            params.insideColor = isDarkMode() ? '#ff6030' : '#ff8050';
-            params.outsideColor = isDarkMode() ? '#1b3984' : '#3d5fa8';
-            // Regenerate galaxy with new colors
-            generateGalaxy();
-        };
-
-        const observer = new MutationObserver(updateTheme);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['data-theme']
-        });
-
-        // === Keyboard Controls ===
-        window.addEventListener('keydown', (event) => {
-            if (event.key === 'd' || event.key === 'D') {
-                paneVisible = !paneVisible;
-                if (paneVisible) {
-                    pane.element.style.display = '';
-                } else {
-                    pane.element.style.display = 'none';
-                }
-            }
-        });
-
-        // === Start ===
-        animate();
-
-        // === Cleanup ===
-        container._cleanup = () => {
-            observer.disconnect();
-            if (geometry) geometry.dispose();
-            if (material) material.dispose();
-            if (whiteGeometry) whiteGeometry.dispose();
-            if (whiteMaterial) whiteMaterial.dispose();
-            controls.dispose();
-            renderer.dispose();
-            pane.dispose();
-        };
-    }
-</script>

app/src/content/embeds/banner-umap-lucioles.html

@@ -1,489 +0,0 @@
-<div class="d3-latent-space"></div>
-<style>
-    .d3-latent-space {
-        width: 100%;
-        margin: 10px 0;
-        aspect-ratio: 3/1;
-        min-height: 260px;
-        overflow: hidden;
-        background: transparent;
-        border-radius: 12px;
-        border: 1px solid var(--border-color);
-    }
-
-    .d3-latent-space canvas {
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .d3-latent-space .tp-dfwv {
-        top: 16px;
-        right: 16px;
-        z-index: 10;
-    }
-
-    .d3-latent-space .d3-tooltip {
-        position: absolute;
-        background: color-mix(in srgb, var(--surface-bg) 95%, transparent);
-        backdrop-filter: blur(16px) saturate(1.2);
-        border: 1px solid var(--border-color);
-        border-radius: 12px;
-        padding: 14px 18px;
-        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);
-        pointer-events: none;
-        opacity: 0;
-        transform: translate(-50%, -120%);
-        transition: opacity 0.15s ease;
-        z-index: 10;
-        max-width: 400px;
-    }
-
-    .d3-latent-space .tooltip-category {
-        font-size: 10px;
-        font-weight: 800;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        margin-bottom: 8px;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .d3-latent-space .tooltip-badge {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        box-shadow: 0 0 8px currentColor;
-    }
-
-    .d3-latent-space .tooltip-question {
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--text-color);
-        margin-bottom: 6px;
-        line-height: 1.4;
-    }
-
-    .d3-latent-space .tooltip-answer {
-        font-size: 11px;
-        color: var(--muted-color);
-        line-height: 1.4;
-        border-top: 1px solid var(--border-color);
-        padding-top: 8px;
-        margin-top: 6px;
-    }
-</style>
-<script>
-    (() => {
-        const ensureD3 = (cb) => {
-            if (window.d3 && typeof window.d3.csvParse === 'function') return cb();
-            let s = document.getElementById('d3-cdn-script');
-            if (!s) {
-                s = document.createElement('script');
-                s.id = 'd3-cdn-script';
-                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
-                document.head.appendChild(s);
-            }
-            const onReady = () => { if (window.d3 && typeof window.d3.csvParse === 'function') cb(); };
-            s.addEventListener('load', onReady, { once: true });
-            if (window.d3) onReady();
-        };
-
-        const ensureAnime = (cb) => {
-            if (window.anime) return cb();
-            let s = document.getElementById('anime-cdn-script');
-            if (!s) {
-                s = document.createElement('script');
-                s.id = 'anime-cdn-script';
-                s.src = 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js';
-                document.head.appendChild(s);
-            }
-            const onReady = () => { if (window.anime) cb(); };
-            s.addEventListener('load', onReady, { once: true });
-            if (window.anime) onReady();
-        };
-
-        const ensureTweakpane = (cb) => {
-            if (window.Tweakpane) return cb();
-            let s = document.getElementById('tweakpane-cdn-script');
-            if (!s) {
-                s = document.createElement('script');
-                s.id = 'tweakpane-cdn-script';
-                s.src = 'https://cdn.jsdelivr.net/npm/tweakpane@3.1.10/dist/tweakpane.min.js';
-                document.head.appendChild(s);
-            }
-            const onReady = () => { if (window.Tweakpane) cb(); };
-            s.addEventListener('load', onReady, { once: true });
-            if (window.Tweakpane) onReady();
-        };
-
-        const bootstrap = () => {
-            const scriptEl = document.currentScript;
-            let container = scriptEl ? scriptEl.previousElementSibling : null;
-            if (!(container && container.classList && container.classList.contains('d3-latent-space'))) {
-                const candidates = Array.from(document.querySelectorAll('.d3-latent-space'))
-                    .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
-                container = candidates[candidates.length - 1] || null;
-            }
-            if (!container) return;
-            if (container.dataset) {
-                if (container.dataset.mounted === 'true') return;
-                container.dataset.mounted = 'true';
-            }
-
-            // Setup canvas
-            const canvas = document.createElement('canvas');
-            container.appendChild(canvas);
-            const ctx = canvas.getContext('2d');
-
-            // Tooltip
-            const tooltip = document.createElement('div');
-            tooltip.className = 'd3-tooltip';
-            container.appendChild(tooltip);
-
-            let width = container.clientWidth || 800;
-            let height = Math.max(260, Math.round(width / 3));
-            let points = [];
-            let categories = new Map();
-            let selectedCategory = null;
-            let animationFrame;
-            let time = 0;
-
-            // Tweakpane params
-            const params = {
-                baseSize: 2.5
-            };
-
-            const resizeCanvas = () => {
-                width = container.clientWidth || 800;
-                height = Math.max(260, Math.round(width / 3));
-                canvas.width = width * window.devicePixelRatio || 1;
-                canvas.height = height * window.devicePixelRatio || 1;
-                canvas.style.width = width + 'px';
-                canvas.style.height = height + 'px';
-                ctx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
-            };
-
-            const getColors = () => {
-                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-                const colors = window.ColorPalettes
-                    ? window.ColorPalettes.getColors('categorical', 10)
-                    : ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#B983FF', '#FF85A2', '#5DADE2', '#52BE80'];
-                return { isDark, colors };
-            };
-
-            class Point {
-                constructor(data, color, index) {
-                    this.originalX = parseFloat(data.x);
-                    this.originalY = parseFloat(data.y);
-                    this.category = data.primary_category;
-                    this.title = data.title;
-                    this.authors = data.authors;
-                    this.year = data.year;
-                    this.abstract = data.abstract;
-                    this.color = color;
-                    this.index = index;
-
-                    // Animation properties
-                    this.x = this.originalX;
-                    this.y = this.originalY;
-                    this.displayX = 0;
-                    this.displayY = 0;
-                    this.opacity = 0;
-                    this.sizeVariation = 0.5 + Math.random() * 1;
-                    this.size = params.baseSize * this.sizeVariation;
-                    this.baseSize = this.size;
-                    this.glowIntensity = 0;
-                    this.phase = Math.random() * Math.PI * 2;
-                    this.speed = 0.3 + Math.random() * 0.4;
-                }
-
-                updateSize() {
-                    this.baseSize = params.baseSize * this.sizeVariation;
-                    if (!this.isHighlighted) {
-                        this.size = this.baseSize;
-                    }
-                }
-
-                update(time, selectedCat) {
-                    // Position statique - pas de mouvement
-                    this.x = this.originalX;
-                    this.y = this.originalY;
-
-                    // Highlight if selected or dim if other selected
-                    if (selectedCat === null) {
-                        this.glowIntensity = 0.8;
-                        this.isHighlighted = false;
-                        this.size = this.baseSize;
-                    } else if (this.category === selectedCat) {
-                        this.glowIntensity = 1;
-                        this.isHighlighted = true;
-                        this.size = this.baseSize * 1.4;
-                    } else {
-                        this.glowIntensity = 0.1;
-                        this.isHighlighted = true;
-                        this.size = this.baseSize * 0.6;
-                    }
-                }
-
-                draw(ctx, scaleX, scaleY, offsetX, offsetY) {
-                    this.displayX = this.x * scaleX + offsetX;
-                    this.displayY = this.y * scaleY + offsetY;
-
-                    const alpha = this.opacity * this.glowIntensity;
-
-                    // Outer glow
-                    if (this.glowIntensity > 0.3) {
-                        const gradient = ctx.createRadialGradient(
-                            this.displayX, this.displayY, 0,
-                            this.displayX, this.displayY, this.size * 4
-                        );
-                        gradient.addColorStop(0, this.color + Math.floor(alpha * 60).toString(16).padStart(2, '0'));
-                        gradient.addColorStop(0.5, this.color + Math.floor(alpha * 30).toString(16).padStart(2, '0'));
-                        gradient.addColorStop(1, this.color + '00');
-
-                        ctx.fillStyle = gradient;
-                        ctx.beginPath();
-                        ctx.arc(this.displayX, this.displayY, this.size * 4, 0, Math.PI * 2);
-                        ctx.fill();
-                    }
-
-                    // Core point
-                    ctx.fillStyle = this.color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
-                    ctx.beginPath();
-                    ctx.arc(this.displayX, this.displayY, this.size, 0, Math.PI * 2);
-                    ctx.fill();
-                }
-
-                isNear(mx, my, threshold = 20) {
-                    const dx = this.displayX - mx;
-                    const dy = this.displayY - my;
-                    return Math.sqrt(dx * dx + dy * dy) < threshold;
-                }
-            }
-
-            const loadData = async () => {
-                try {
-                    console.log('Loading research papers data...');
-                    const response = await fetch('/data/data.json', { cache: 'no-cache' });
-                    if (!response.ok) {
-                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                    }
-
-                    console.log('Parsing JSON...');
-                    const rawData = await response.json();
-                    console.log(`Loaded ${rawData.length} papers`);
-
-                    // Sample data for performance (max 3000 points)
-                    const sampledData = rawData.length > 3000
-                        ? rawData.filter((_, i) => i % Math.ceil(rawData.length / 3000) === 0)
-                        : rawData;
-
-                    // Group by primary category
-                    sampledData.forEach(paper => {
-                        const cat = paper.primary_category || 'Unknown';
-                        if (!categories.has(cat)) {
-                            categories.set(cat, []);
-                        }
-                        categories.get(cat).push(paper);
-                    });
-
-                    // Create points with colors
-                    const { colors } = getColors();
-                    const categoryList = Array.from(categories.keys());
-
-                    categoryList.forEach((cat, i) => {
-                        const color = colors[i % colors.length];
-                        categories.get(cat).forEach((data, j) => {
-                            points.push(new Point(data, color, i * 100 + j));
-                        });
-                    });
-
-                    // Animate points in
-                    points.forEach((point, i) => {
-                        anime({
-                            targets: point,
-                            opacity: [0, 1],
-                            duration: 1500,
-                            delay: i * 2,
-                            easing: 'easeOutQuad'
-                        });
-                    });
-
-                    // Setup Tweakpane
-                    let pane;
-                    try {
-                        if (window.Tweakpane && window.Tweakpane.Pane) {
-                            pane = new window.Tweakpane.Pane({
-                                container: container,
-                                title: 'Controls'
-                            });
-                        } else if (window.Tweakpane) {
-                            pane = new window.Tweakpane({
-                                container: container,
-                                title: 'Controls'
-                            });
-                        }
-
-                        if (pane) {
-                            const input = pane.addInput ? pane.addInput(params, 'baseSize', {
-                                label: 'Point Size',
-                                min: 0.5,
-                                max: 8,
-                                step: 0.1
-                            }) : pane.addBinding ? pane.addBinding(params, 'baseSize', {
-                                label: 'Point Size',
-                                min: 0.5,
-                                max: 8,
-                                step: 0.1
-                            }) : null;
-
-                            if (input) {
-                                input.on('change', () => {
-                                    points.forEach(p => p.updateSize());
-                                });
-                            }
-                        }
-                    } catch (err) {
-                        console.warn('Tweakpane initialization failed:', err);
-                        // Fallback to HTML slider
-                        const controls = document.createElement('div');
-                        controls.style.cssText = 'position:absolute;top:16px;right:16px;background:var(--surface-bg);border:1px solid var(--border-color);border-radius:8px;padding:12px;z-index:10;';
-                        controls.innerHTML = `
-              <label style="font-size:11px;font-weight:700;color:var(--text-color);display:block;margin-bottom:6px;">Point Size</label>
-              <input type="range" min="0.5" max="8" step="0.1" value="2.5" style="width:120px;">
-              <span style="font-size:11px;color:var(--muted-color);margin-left:8px;">2.5</span>
-            `;
-                        const slider = controls.querySelector('input');
-                        const label = controls.querySelector('span');
-                        slider.addEventListener('input', (e) => {
-                            params.baseSize = parseFloat(e.target.value);
-                            label.textContent = params.baseSize.toFixed(1);
-                            points.forEach(p => p.updateSize());
-                        });
-                        container.appendChild(controls);
-                    }
-
-                    console.log(`Created ${points.length} points from ${categoryList.length} categories`);
-                    render();
-
-                } catch (error) {
-                    console.error('Error loading data:', error);
-                    const errorMsg = error.message || error.toString();
-                    container.innerHTML = `<pre style="color:red;padding:20px;margin:0;font-size:12px;">Error: ${errorMsg}<br><br>Trying to load: /data/data.json<br>Check console for details.</pre>`;
-                }
-            };
-
-            const render = () => {
-                time += 16;
-                ctx.clearRect(0, 0, width, height);
-
-                if (points.length === 0) {
-                    animationFrame = requestAnimationFrame(render);
-                    return;
-                }
-
-                // Calculate bounds
-                const xValues = points.map(p => p.x);
-                const yValues = points.map(p => p.y);
-                const minX = Math.min(...xValues);
-                const maxX = Math.max(...xValues);
-                const minY = Math.min(...yValues);
-                const maxY = Math.max(...yValues);
-
-                const padding = 40;
-                const scaleX = (width - padding * 2) / (maxX - minX);
-                const scaleY = (height - padding * 2) / (maxY - minY);
-
-                const offsetX = padding - minX * scaleX;
-                const offsetY = padding - minY * scaleY;
-
-                // Update and draw points
-                points.forEach(point => {
-                    point.update(time, selectedCategory);
-                    point.draw(ctx, scaleX, scaleY, offsetX, offsetY);
-                });
-
-                animationFrame = requestAnimationFrame(render);
-            };
-
-            // Mouse interaction
-            let hoveredPoint = null;
-            canvas.addEventListener('mousemove', (e) => {
-                const rect = canvas.getBoundingClientRect();
-                const mx = e.clientX - rect.left;
-                const my = e.clientY - rect.top;
-
-                const closest = points.find(p => p.isNear(mx, my));
-
-                if (closest && closest !== hoveredPoint) {
-                    hoveredPoint = closest;
-                    const authorsStr = Array.isArray(closest.authors)
-                        ? (closest.authors.length > 3
-                            ? `${closest.authors.slice(0, 3).join(', ')} et al.`
-                            : closest.authors.join(', '))
-                        : closest.authors || 'Unknown';
-
-                    tooltip.innerHTML = `
-            <div class="tooltip-category">
-              <span class="tooltip-badge" style="background: ${closest.color}; color: ${closest.color}"></span>
-              ${closest.category} · ${closest.year}
-            </div>
-            <div class="tooltip-question">${closest.title.substring(0, 120)}${closest.title.length > 120 ? '...' : ''}</div>
-            <div class="tooltip-answer">${authorsStr}<br>${closest.abstract.substring(0, 180)}${closest.abstract.length > 180 ? '...' : ''}</div>
-          `;
-                    tooltip.style.left = mx + 'px';
-                    tooltip.style.top = my + 'px';
-                    tooltip.style.opacity = '1';
-                    canvas.style.cursor = 'pointer';
-                } else if (!closest) {
-                    hoveredPoint = null;
-                    tooltip.style.opacity = '0';
-                    canvas.style.cursor = 'crosshair';
-                }
-            });
-
-            canvas.addEventListener('mouseleave', () => {
-                hoveredPoint = null;
-                tooltip.style.opacity = '0';
-                canvas.style.cursor = 'crosshair';
-            });
-
-            // Resize handling
-            resizeCanvas();
-            if (window.ResizeObserver) {
-                const ro = new ResizeObserver(() => resizeCanvas());
-                ro.observe(container);
-            } else {
-                window.addEventListener('resize', resizeCanvas);
-            }
-
-            // Theme observer
-            const observer = new MutationObserver(() => {
-                const { colors } = getColors();
-                const categoryList = Array.from(categories.keys());
-                points.forEach(point => {
-                    const catIndex = categoryList.indexOf(point.category);
-                    if (catIndex >= 0) {
-                        point.color = colors[catIndex % colors.length];
-                    }
-                });
-            });
-            observer.observe(document.documentElement, {
-                attributes: true,
-                attributeFilter: ['data-theme']
-            });
-
-            loadData();
-        };
-
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => ensureD3(() => ensureAnime(() => ensureTweakpane(bootstrap))), { once: true });
-        } else {
-            ensureD3(() => ensureAnime(() => ensureTweakpane(bootstrap)));
-        }
-    })();
-</script>

app/src/content/embeds/d3-bar.html

@@ -1,459 +0,0 @@
-<div class="d3-bar"></div>
-<style>
-  .d3-bar .controls {
-    margin-top: 0;
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-  }
-
-  .d3-bar .controls .control-group {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-  }
-
-  .d3-bar .controls label {
-    font-size: 12px;
-    color: var(--text-color);
-    font-weight: 700;
-  }
-
-  .d3-bar .controls select {
-    font-size: 12px;
-    padding: 8px 28px 8px 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    background-color: var(--surface-bg);
-    color: var(--text-color);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: 12px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    transition: border-color .15s ease, box-shadow .15s ease;
-  }
-
-  [data-theme="dark"] .d3-bar .controls select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-  }
-
-  .d3-bar .controls select:hover {
-    border-color: var(--primary-color);
-  }
-
-  .d3-bar .controls select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(232, 137, 171, .25);
-    outline: none;
-  }
-
-  /* Header (legend + controls) placed after chart */
-  .d3-bar .chart-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 12px;
-    margin: 8px 0 0 0;
-    flex-wrap: wrap;
-  }
-
-  .d3-bar .legend-bottom {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-    font-size: 12px;
-    color: var(--text-color);
-  }
-
-  .d3-bar .legend-bottom .legend-title {
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--text-color);
-  }
-
-  .d3-bar .legend-bottom .items {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px 14px;
-  }
-
-  .d3-bar .legend-bottom .item {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-  }
-
-  .d3-bar .legend-bottom .swatch {
-    width: 14px;
-    height: 14px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color);
-    display: inline-block;
-  }
-
-  .d3-bar.hovering .legend-bottom .item.ghost {
-    opacity: .35;
-  }
-
-  .d3-bar.hovering .bars path.ghost {
-    opacity: .35;
-  }
-
-  .d3-bar .axis-label {
-    fill: var(--text-color);
-    font-size: 12px;
-    font-weight: 700;
-  }
-
-  /* Apply axis/tick/grid purely via CSS */
-  .d3-bar .axes path,
-  .d3-bar .axes line {
-    stroke: var(--axis-color);
-  }
-
-  .d3-bar .axes text {
-    fill: var(--tick-color);
-  }
-
-  .d3-bar .grid line {
-    stroke: var(--grid-color);
-  }
-
-  /* Tooltip improvements */
-  .d3-bar .d3-tooltip {
-    z-index: var(--z-tooltip);
-    backdrop-filter: saturate(1.12) blur(8px);
-  }
-
-  /* Hover/transition styling for bars and legend */
-  .d3-bar .bars path.bar {
-    transition: opacity .12s ease, stroke .12s ease, stroke-width .12s ease;
-  }
-
-  .d3-bar .bars path.bar.highlight {
-    stroke: none;
-    stroke-width: 0;
-  }
-
-  .d3-bar.hovering .bars path.ghost {
-    opacity: .25;
-  }
-
-  .d3-bar .legend-bottom .item.hovered {
-    color: inherit;
-  }
-
-  .d3-bar .legend-bottom .item.hovered .swatch {
-    border-color: var(--border-color);
-  }
-
-  .d3-bar .d3-tooltip .swatch {
-    width: 12px;
-    height: 12px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color);
-    display: inline-block;
-    margin-right: 6px;
-    vertical-align: -2px;
-  }
-
-  /* Chart card wrapper */
-  .d3-bar .chart-card {
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 8px;
-  }
-
-  /* Layout adjustments to give controls more space */
-  .d3-bar .chart-header {
-    padding-left: 8px;
-    padding-right: 8px;
-    gap: 20px;
-  }
-
-  .d3-bar .controls {
-    justify-content: flex-start;
-    min-width: 320px;
-  }
-
-  .d3-bar .controls .control-group {
-    min-width: 150px;
-  }
-
-  .d3-bar .controls select {
-    font-size: 13px;
-    min-width: 160px;
-  }
-</style>
-<script>
-  (() => {
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let s = document.getElementById('d3-cdn-script');
-      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
-      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true });
-      if (window.d3) onReady();
-    };
-
-    const bootstrap = () => {
-      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-      const container = (mount && mount.querySelector && mount.querySelector('.d3-bar')) || document.querySelector('.d3-bar');
-      if (!container) return;
-      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
-
-      // Data, matching bar.py
-      const seqLabels = ["1024", "2048", "4096", "8192"];
-      const seqScale = [1, 2, 4, 8];
-      const componentKeys = ['parameters', 'gradients', 'optimizer', 'activations'];
-      const modelSizes = ["1B", "3B", "8B", "70B", "405B"];
-      const paramsMem = { "1B": 4.0, "3B": 13.3, "8B": 26.0, "70B": 244.0, "405B": 1520.0 };
-      const actCoeff = { "1B": 3.6, "3B": 9.3, "8B": 46.2, "70B": 145.7, "405B": 1519.9 };
-      const recomputeModes = ["none", "selective", "full"];
-
-      const activationsCurve = (sizeKey, mode) => {
-        const coeff = actCoeff[sizeKey];
-        let arr = seqScale.map((v) => coeff * (v * v));
-        if (mode === 'selective') arr = arr.map((v) => v * 0.25);
-        else if (mode === 'full') arr = arr.map((v) => v * (1 / 16));
-        return arr;
-      };
-      const stackFor = (sizeKey, mode) => {
-        const p = seqScale.map(() => paramsMem[sizeKey]);
-        const g = seqScale.map(() => paramsMem[sizeKey]);
-        const o = seqScale.map(() => 2 * paramsMem[sizeKey]);
-        const a = activationsCurve(sizeKey, mode);
-        return { parameters: p, gradients: g, optimizer: o, activations: a };
-      };
-
-      const Y = {}; // Y[mode][size][component] => array
-      recomputeModes.forEach((m) => {
-        Y[m] = {}; modelSizes.forEach((s) => { Y[m][s] = stackFor(s, m); });
-      });
-
-      // Controls
-      const controls = document.createElement('div');
-      controls.className = 'controls';
-      const groupSize = document.createElement('div'); groupSize.className = 'control-group';
-      const labelSize = document.createElement('label'); labelSize.textContent = 'Model Size';
-      const selSize = document.createElement('select'); modelSizes.forEach((s) => { const o = document.createElement('option'); o.value = s; o.textContent = s; selSize.appendChild(o); });
-      groupSize.appendChild(labelSize); groupSize.appendChild(selSize);
-      const groupRecomp = document.createElement('div'); groupRecomp.className = 'control-group';
-      const labelRecomp = document.createElement('label'); labelRecomp.textContent = 'Recomputation';
-      const selRecomp = document.createElement('select'); recomputeModes.forEach((m) => { const o = document.createElement('option'); o.value = m; o.textContent = m; selRecomp.appendChild(o); });
-      groupRecomp.appendChild(labelRecomp); groupRecomp.appendChild(selRecomp);
-
-      // Header (legend + controls) to be placed after chart
-      const header = document.createElement('div'); header.className = 'chart-header';
-      const legendBottom = document.createElement('div'); legendBottom.className = 'legend-bottom';
-      const legendTitle = document.createElement('div'); legendTitle.className = 'legend-title'; legendTitle.textContent = 'Legend';
-      const legendItems = document.createElement('div'); legendItems.className = 'items';
-      legendBottom.appendChild(legendTitle); legendBottom.appendChild(legendItems);
-      header.appendChild(legendBottom);
-      header.appendChild(controls);
-      // SVG scaffolding inside a card wrapper
-      const card = document.createElement('div'); card.className = 'chart-card'; container.appendChild(card);
-      // Place header after the chart card
-      container.appendChild(header);
-      const svg = d3.select(card).append('svg').attr('width', '100%').style('display', 'block');
-      const gRoot = svg.append('g');
-      const gGrid = gRoot.append('g').attr('class', 'grid');
-      const gAxes = gRoot.append('g').attr('class', 'axes');
-      const gBars = gRoot.append('g').attr('class', 'bars');
-
-      // Tooltip
-      container.style.position = container.style.position || 'relative';
-      let tip = container.querySelector('.d3-tooltip'); let tipInner;
-      if (!tip) { tip = document.createElement('div'); tip.className = 'd3-tooltip'; Object.assign(tip.style, { position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none', padding: '8px 10px', borderRadius: '8px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)', background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 4px 24px rgba(0,0,0,.18)', opacity: '0', transition: 'opacity .12s ease' }); tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign = 'left'; tip.appendChild(tipInner); container.appendChild(tip); } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
-
-      // State
-      let currentSize = modelSizes[0];
-      let currentMode = 'selective';
-      selRecomp.value = currentMode;
-
-      // Layout & scales
-      let width = 800, height = 360; const margin = { top: 16, right: 28, bottom: 56, left: 64 };
-      const x0 = d3.scaleBand().paddingInner(0.25).paddingOuter(0.1); // groups (seq)
-      const y = d3.scaleLinear();
-      function getCategoricalColors(count) {
-        try {
-          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-            return window.ColorPalettes.getColors('categorical', count);
-          }
-        } catch (_) { }
-        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
-        const tableau = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ab'];
-        const pool = [primary, ...tableau];
-        const arr = []; for (let i = 0; i < count; i++) { arr.push(pool[i % pool.length]); }
-        return arr;
-      }
-      const palette = getCategoricalColors(componentKeys.length);
-      const colorMap = new Map(componentKeys.map((k, i) => [k, palette[i]]));
-      const colorOf = (key) => colorMap.get(key) || 'var(--primary-color)';
-
-      function yMax(sizeKey, mode) {
-        const s = Y[mode][sizeKey];
-        let max = 0; for (let i = 0; i < seqLabels.length; i++) { const sum = s.parameters[i] + s.gradients[i] + s.optimizer[i] + s.activations[i]; if (sum > max) max = sum; }
-        return max * 1.05;
-      }
-
-      function renderLegend() {
-        legendItems.innerHTML = componentKeys.map((key, i) => {
-          const color = palette[i];
-          return `<span class="item" data-key="${key}"><span class=\"swatch\" style=\"background:${color}\"></span><span>${key}</span></span>`;
-        }).join('');
-        legendItems.querySelectorAll('.item').forEach((el) => {
-          el.addEventListener('mouseenter', () => {
-            const k = el.getAttribute('data-key'); if (!k) return;
-            container.classList.add('hovering');
-            gBars.selectAll('path.bar').classed('ghost', d => d && d.key !== k);
-            legendItems.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-key') !== k));
-          });
-          el.addEventListener('mouseleave', () => {
-            container.classList.remove('hovering');
-            gBars.selectAll('path.bar').classed('ghost', false);
-            legendItems.querySelectorAll('.item').forEach(it => it.classList.remove('ghost'));
-          });
-        });
-      }
-
-      function updateScales() {
-        width = container.clientWidth || 800; height = Math.max(260, Math.round(width / 3)); svg.attr('width', width).attr('height', height);
-        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
-
-        x0.domain(seqLabels).range([0, innerWidth]);
-        y.domain([0, yMax(currentSize, currentMode)]).range([innerHeight, 0]).nice();
-
-        // Grid
-        gGrid.selectAll('*').remove();
-        gGrid.selectAll('line').data(y.ticks(6)).join('line')
-          .attr('x1', 0).attr('x2', innerWidth).attr('y1', (d) => y(d)).attr('y2', (d) => y(d))
-          .attr('stroke', 'var(--grid-color)').attr('stroke-width', 1).attr('shape-rendering', 'crispEdges');
-
-        // Axes
-        gAxes.selectAll('*').remove();
-        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(x0)).call((g) => { g.selectAll('path, line').attr('stroke', 'var(--axis-color)'); g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '12px'); });
-        gAxes.append('g').call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('~f'))).call((g) => { g.selectAll('path, line').attr('stroke', 'var(--axis-color)'); g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '12px'); });
-
-        // Axis labels
-        gAxes.append('text').attr('class', 'axis-label axis-label--x').attr('x', innerWidth / 2).attr('y', innerHeight + 44).attr('text-anchor', 'middle').text('Sequence Length');
-        gAxes.append('text').attr('class', 'axis-label axis-label--y').attr('text-anchor', 'middle').attr('transform', `translate(${-52},${innerHeight / 2}) rotate(-90)`).text('Memory (GB)');
-
-        renderLegend();
-
-        return { innerWidth, innerHeight };
-      }
-
-      function drawBars() {
-        const stacks = Y[currentMode][currentSize];
-        const series = componentKeys.map((key, i) => ({ key, color: palette[i], values: stacks[key] }));
-        // Stack values
-        const stacked = seqLabels.map((label, i) => {
-          let acc = 0; const items = [];
-          series.forEach((s, idx) => {
-            const y0 = acc; const y1 = acc + s.values[i];
-            items.push({ key: s.key, color: s.color, i, y0, y1, xLabel: label, value: s.values[i], isBottom: idx === 0, isTop: idx === series.length - 1 });
-            acc = y1;
-          });
-          const total = acc;
-          items.forEach(it => { it.total = total; });
-          return { label, items };
-        });
-
-        const { innerWidth, innerHeight } = updateScales();
-
-        const bandWidth = x0.bandwidth();
-        const groups = gBars.selectAll('g.bar-group').data(stacked, d => d.label);
-        const groupsEnter = groups.enter().append('g').attr('class', 'bar-group');
-        groupsEnter.merge(groups).attr('transform', (d) => `translate(${x0(d.label)},0)`);
-        groups.exit().remove();
-
-        // Helper to draw per-corner rounded rectangle path
-        const rCorner = 4;
-        const roundedPath = (x, yTop, w, h, isTop, isBottom) => {
-          const r = Math.min(rCorner, Math.max(0, Math.min(w, h) / 2));
-          const rTL = isTop ? r : 0, rTR = isTop ? r : 0, rBR = isBottom ? r : 0, rBL = isBottom ? r : 0;
-          const x0 = x, y0 = yTop, x1 = x + w, y1 = yTop + h;
-          return `M${x0 + rTL},${y0}`
-            + `H${x1 - rTR}`
-            + (rTR ? `Q${x1},${y0} ${x1},${y0 + rTR}` : `V${y0}`)
-            + `V${y1 - rBR}`
-            + (rBR ? `Q${x1},${y1} ${x1 - rBR},${y1}` : `H${x1}`)
-            + `H${x0 + rBL}`
-            + (rBL ? `Q${x0},${y1} ${x0},${y1 - rBL}` : `V${y1}`)
-            + `V${y0 + rTL}`
-            + (rTL ? `Q${x0},${y0} ${x0 + rTL},${y0}` : `H${x0}`)
-            + 'Z';
-        };
-
-        const bars = groupsEnter.merge(groups).selectAll('path.bar').data(d => d.items, d => d.key);
-        bars.enter().append('path').attr('class', 'bar')
-          .attr('d', (d) => roundedPath(0, y(d.y1), bandWidth, Math.max(0.5, y(d.y0) - y(d.y1)), d.isTop, d.isBottom))
-          .attr('fill', (d) => d.color)
-          .on('mouseenter', function (ev, d) {
-            container.classList.add('hovering');
-            gBars.selectAll('path.bar').classed('ghost', (dd) => !(dd && dd.key === d.key));
-            const pct = d.total > 0 ? (d.value / d.total * 100) : 0;
-            tipInner.innerHTML = `
-              <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
-                <span class="swatch" style="background:${d.color}"></span>
-                <strong>${d.key}</strong>
-              </div>
-              <div><strong>Seq</strong> ${d.xLabel}</div>
-              <div><strong>Mem</strong> ${d.value.toFixed(1)} GB <span style="opacity:.7">(${pct.toFixed(0)}%)</span></div>
-              <div style="opacity:.7"><strong>Total</strong> ${d.total.toFixed(1)} GB</div>
-            `;
-            tip.style.opacity = '1';
-            const li = legendItems.querySelector(`.item[data-key="${d.key}"]`);
-            if (li) li.classList.add('hovered');
-            legendItems.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-key') !== d.key));
-          })
-          .on('mousemove', function (ev, d) {
-            const [mx, my] = d3.pointer(ev, container);
-            const offsetX = 12, offsetY = 12;
-            const maxX = (container.clientWidth || 0) - (tip.offsetWidth + 6);
-            const maxY = (container.clientHeight || 0) - (tip.offsetHeight + 6);
-            const tx = Math.max(0, Math.min(mx + offsetX, maxX));
-            const ty = Math.max(0, Math.min(my + offsetY, maxY));
-            tip.style.transform = `translate(${Math.round(tx)}px, ${Math.round(ty)}px)`;
-          })
-          .on('mouseleave', function () {
-            tip.style.opacity = '0';
-            tip.style.transform = 'translate(-9999px, -9999px)';
-            container.classList.remove('hovering');
-            gBars.selectAll('path.bar').classed('ghost', false).classed('highlight', false);
-            legendItems.querySelectorAll('.item').forEach(it => { it.classList.remove('hovered'); it.classList.remove('ghost'); });
-          })
-          .merge(bars)
-          .transition().duration(200)
-          .attr('d', (d) => roundedPath(0, y(d.y1), bandWidth, Math.max(0.5, y(d.y0) - y(d.y1)), d.isTop, d.isBottom))
-          .attr('fill', (d) => d.color);
-        bars.exit().remove();
-      }
-
-      function update() { drawBars(); }
-
-      // Boot
-      update();
-      // controls already appended to footer; populate control groups
-      controls.appendChild(groupSize); controls.appendChild(groupRecomp);
-      selSize.addEventListener('change', (e) => { currentSize = e.target.value; update(); });
-      selRecomp.addEventListener('change', (e) => { currentMode = e.target.value; update(); });
-
-      const rerender = () => { update(); };
-      if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(container); } else { window.addEventListener('resize', rerender); }
-    };
-
-    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
-  })();
-</script>

app/src/content/embeds/d3-confusion-matrix.html

@@ -1,516 +0,0 @@
-<div class="d3-confusion-matrix"  ></div>
-<style>
-  .d3-confusion-matrix {
-    position: relative;
-  }
-  .d3-confusion-matrix .panels {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-bottom: 4px;
-  }
-  .d3-confusion-matrix .panel {
-    flex: 1 1 320px;
-    min-width: 280px;
-  }
-  .d3-confusion-matrix .panel__title {
-    color: var(--text-color);
-    font-size: 12px;
-    line-height: 1.35;
-    margin: 0 0 6px 0;
-    font-weight: 600;
-  }
-  .d3-confusion-matrix .axis-label {
-    fill: var(--text-color);
-    font-size: 11px;
-    font-weight: 700;
-  }
-  .d3-confusion-matrix .cell-border {
-    stroke: var(--border-color);
-    stroke-width: 1px;
-    fill: none;
-  }
-  .d3-confusion-matrix .cell-text {
-    fill: var(--muted-color);
-    font-size: 11px;
-    pointer-events: none;
-  }
-  .d3-confusion-matrix .chart-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; }
-</style>
-<script>
-  (() => {
-    // Load D3 from CDN once
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let s = document.getElementById('d3-cdn-script');
-      if (!s) {
-        s = document.createElement('script');
-        s.id = 'd3-cdn-script';
-        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
-        document.head.appendChild(s);
-      }
-      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true });
-      if (window.d3) onReady();
-    };
-
-    const bootstrap = () => {
-      const scriptEl = document.currentScript;
-      let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-confusion-matrix'))){
-        const cs = Array.from(document.querySelectorAll('.d3-confusion-matrix')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
-        container = cs[cs.length - 1] || null;
-      }
-      if (!container) return;
-      if (container.dataset) {
-        if (container.dataset.mounted === 'true') return;
-        container.dataset.mounted = 'true';
-      }
-
-      // Tooltip (HTML, single instance inside container)
-      container.style.position = container.style.position || 'relative';
-      let tip = container.querySelector('.d3-tooltip');
-      let tipInner;
-      if (!tip) {
-        tip = document.createElement('div');
-        tip.className = 'd3-tooltip';
-        Object.assign(tip.style, {
-          position: 'absolute',
-          top: '0px',
-          left: '0px',
-          transform: 'translate(-9999px, -9999px)',
-          pointerEvents: 'none',
-          padding: '8px 10px',
-          borderRadius: '8px',
-          fontSize: '12px',
-          lineHeight: '1.35',
-          border: '1px solid var(--border-color)',
-          background: 'var(--surface-bg)',
-          color: 'var(--text-color)',
-          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
-          opacity: '0',
-          transition: 'opacity .12s ease'
-        });
-        tipInner = document.createElement('div');
-        tipInner.className = 'd3-tooltip__inner';
-        tipInner.style.textAlign = 'left';
-        tip.appendChild(tipInner);
-        container.appendChild(tip);
-      } else {
-        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
-      }
-
-      // Panels container (two side-by-side matrices)
-      const panels = document.createElement('div');
-      panels.className = 'panels';
-      const panelA = document.createElement('div');
-      panelA.className = 'panel';
-      const titleA = document.createElement('div'); titleA.className = 'panel__title'; titleA.textContent = 'Baseline (row-normalized %)';
-      panelA.appendChild(titleA);
-      const mountA = document.createElement('div'); panelA.appendChild(mountA);
-      const panelB = document.createElement('div');
-      panelB.className = 'panel';
-      const titleB = document.createElement('div'); titleB.className = 'panel__title'; titleB.textContent = 'Delta (Improved − Baseline, pp)';
-      panelB.appendChild(titleB);
-      const mountB = document.createElement('div'); panelB.appendChild(mountB);
-      panels.appendChild(panelA);
-      panels.appendChild(panelB);
-      container.appendChild(panels);
-
-      // SVG scaffolding
-      const cardA = document.createElement('div'); cardA.className = 'chart-card'; mountA.appendChild(cardA);
-      const svgA = d3.select(cardA).append('svg').attr('width', '100%').style('display', 'block');
-      const gRootA = svgA.append('g');
-      const gCellsA = gRootA.append('g');
-      const gAxesA = gRootA.append('g');
-      const cardB = document.createElement('div'); cardB.className = 'chart-card'; mountB.appendChild(cardB);
-      const svgB = d3.select(cardB).append('svg').attr('width', '100%').style('display', 'block');
-      const gRootB = svgB.append('g');
-      const gCellsB = gRootB.append('g');
-      const gAxesB = gRootB.append('g');
-
-      // Demo data (two distinct 10x10 confusion matrices: Baseline vs Improved)
-      // Rows: actual, Columns: predicted
-      const classes = ['0','1','2','3','4','5','6','7','8','9'];
-      const matrixA = [
-        [90,  2,  1,  0,  0,  0,  1,  0,  5,  1],
-        [ 3, 85,  5,  1,  0,  1,  2,  1,  1,  1],
-        [ 1,  6, 70, 10,  4,  4,  1,  1,  1,  2],
-        [ 0,  1,  8, 65, 10, 10,  2,  1,  1,  2],
-        [ 0,  0,  2,  6, 83,  3,  1,  1,  3,  1],
-        [ 0,  1,  2, 12,  4, 70,  5,  2,  2,  2],
-        [ 1,  2,  1,  0,  1,  2, 88,  1,  3,  1],
-        [ 0,  1,  1,  1,  1,  1,  2, 90,  1,  2],
-        [ 6,  2,  2,  4,  6,  3,  3,  2, 70,  2],
-        [ 1,  1,  1,  1,  2,  1,  1,  2,  1, 89]
-      ];
-      const matrixB = [
-        [94,  1,  0,  0,  0,  0,  1,  0,  3,  1],
-        [ 2, 90,  3,  1,  0,  0,  1,  1,  1,  1],
-        [ 1,  4, 78,  7,  3,  3,  1,  1,  1,  1],
-        [ 0,  1,  5, 74,  7,  8,  1,  1,  1,  2],
-        [ 0,  0,  1,  4, 88,  2,  1,  1,  2,  1],
-        [ 0,  1,  1,  9,  3, 78,  3,  1,  2,  2],
-        [ 1,  1,  1,  0,  1,  1, 91,  1,  2,  1],
-        [ 0,  1,  1,  1,  1,  1,  1, 92,  1,  1],
-        [ 4,  1,  1,  3,  4,  2,  2,  2, 79,  2],
-        [ 1,  1,  1,  1,  2,  1,  1,  1,  1, 90]
-      ];
-
-      // Colors: sequential palette via window.ColorPalettes with graceful fallback
-      const getSequentialColors = (count) => {
-        try {
-          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-            return window.ColorPalettes.getColors('sequential', count);
-          }
-        } catch (_) {}
-        // Fallback: generate a monochrome scale using the primary color with varying opacity
-        const arr = [];
-        for (let i = 0; i < count; i++) arr.push('var(--primary-color)');
-        return arr;
-      };
-
-      const palette = getSequentialColors(13);
-      const getDivergingColors = (count) => {
-        try {
-          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-            return window.ColorPalettes.getColors('diverging', count);
-          }
-        } catch (_) {}
-        const steps = Math.max(3, count|0);
-        const arr = [];
-        for (let i = 0; i < steps; i++) {
-          const t = i / (steps - 1);
-          const pct = Math.round(t * 100);
-          arr.push(`color-mix(in srgb, #D64545 ${100-pct}%, #3A7BD5 ${pct}%)`);
-        }
-        return arr;
-      };
-
-      let width = 800;
-      let height = 480;
-      const margin = { top: 36, right: 24, bottom: 26, left: 56 };
-
-      function updateSize() {
-        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-        width = container.clientWidth || 800;
-        const gap = 16; // matches CSS .panels gap
-        const minPanel = 320;
-        const nCols = (width >= (minPanel * 2 + gap)) ? 2 : 1;
-        const panelWidth = nCols === 2 ? Math.max(minPanel, Math.floor((width - gap) / 2)) : Math.max(minPanel, width);
-        const base = Math.max(minPanel, Math.round(panelWidth * 0.92));
-        height = base;
-        // Responsive SVG: width 100%, height auto, preserve aspect via viewBox
-        svgA
-          .attr('viewBox', `0 0 ${panelWidth} ${height}`)
-          .attr('preserveAspectRatio', 'xMidYMid meet')
-          .style('width', '100%')
-          .style('height', 'auto');
-        svgB
-          .attr('viewBox', `0 0 ${panelWidth} ${height}`)
-          .attr('preserveAspectRatio', 'xMidYMid meet')
-          .style('width', '100%')
-          .style('height', 'auto');
-        gRootA.attr('transform', `translate(${margin.left},${margin.top})`);
-        gRootB.attr('transform', `translate(${margin.left},${margin.top})`);
-        const innerWidth = panelWidth - margin.left - margin.right;
-        const innerHeight = height - margin.top - margin.bottom;
-        return { innerWidth, innerHeight, isDark };
-      }
-
-      function computeValues(normalization, matrix) {
-        const n = classes.length;
-        const totalsByRow = matrix.map(row => row.reduce((a, b) => a + b, 0));
-        const flat = [];
-        let minV = Infinity, maxV = -Infinity;
-        for (let r = 0; r < n; r++) {
-          for (let c = 0; c < n; c++) {
-            const count = matrix[r][c];
-            const value = normalization === 'row' ? (totalsByRow[r] ? count / totalsByRow[r] : 0) : count;
-            if (value < minV) minV = value;
-            if (value > maxV) maxV = value;
-            flat.push({ r, c, count, value });
-          }
-        }
-        return { data: flat, minV, maxV };
-      }
-
-      function getColorScale(values, minV, maxV) {
-        // If ColorPalettes is available, use quantiles to enhance visual variation across the distribution
-        const hasPalette = !(palette.length === 0);
-        if (hasPalette && (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function')) {
-          const scale = d3.scaleQuantile().domain(values).range(palette);
-          return (v) => scale(v);
-        }
-        // Fallback: primary color with opacity mapped to normalized value
-        const norm = d3.scaleLinear().domain([minV, maxV]).range([0.08, 0.9]).clamp(true);
-        return (v) => `color-mix(in oklab, var(--primary-color) ${Math.round(norm(v) * 100)}%, var(--surface-bg))`;
-      }
-
-      // (no local contrast function — use ColorPalettes.getTextStyleForBackground)
-
-      // Compute a fixed readable text color from a CSS rgb()/rgba() string
-      function chooseFixedReadableTextOnBg(bgCss){
-        try {
-          const m = String(bgCss||'').match(/rgba?\(([^)]+)\)/);
-          if (!m) return '#0e1116';
-          const parts = m[1].split(',').map(s => parseFloat(s.trim()));
-          const [r, g, b] = parts;
-          // sRGB → relative luminance
-          const srgb = [r, g, b].map(v => Math.max(0, Math.min(255, v)) / 255);
-          const linear = srgb.map(c => (c <= 0.03928 ? c/12.92 : Math.pow((c + 0.055)/1.055, 2.4)));
-          const L = 0.2126*linear[0] + 0.7152*linear[1] + 0.0722*linear[2];
-          // Threshold ~ 0.5 for readability; darker BG → white text, else near-black
-          return L < 0.5 ? '#ffffff' : '#0e1116';
-        } catch(_) { return '#0e1116'; }
-      }
-
-      function render() {
-        const { innerWidth, innerHeight } = updateSize();
-        const n = classes.length;
-        const gridSize = Math.min(innerWidth, innerHeight);
-        const cellSize = gridSize / n;
-
-        const x = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0.06);
-        const y = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0.06);
-
-        // Panel A: Baseline (row-normalized)
-        const dataA = computeValues('row', matrixA);
-        const colorA = getColorScale(dataA.data.map(d => d.value), dataA.minV, dataA.maxV);
-
-        gCellsA.selectAll('rect.cell-bg')
-          .data([0])
-          .join('rect')
-          .attr('class', 'cell-bg')
-          .attr('x', 0)
-          .attr('y', 0)
-          .attr('width', gridSize)
-          .attr('height', gridSize)
-          .attr('fill', 'none')
-          .attr('stroke', 'var(--border-color)')
-          .attr('stroke-width', 1);
-
-        const cellsA = gCellsA.selectAll('g.cell')
-          .data(dataA.data, d => `${d.r}-${d.c}-A`);
-
-        const cellsEnterA = cellsA.enter()
-          .append('g')
-          .attr('class', 'cell');
-
-        cellsEnterA.append('rect')
-          .attr('rx', 2)
-          .attr('ry', 2)
-          .on('mousemove', (event, d) => {
-            const [px, py] = d3.pointer(event, container);
-            tipInner.innerHTML = `<strong>${classes[d.r]}</strong> → <strong>${classes[d.c]}</strong><br/>${(d.value * 100).toFixed(1)}% (${d.count})`;
-            tip.style.transform = `translate(${px + 10}px, ${py + 10}px)`;
-            tip.style.opacity = '1';
-          })
-          .on('mouseleave', () => {
-            tip.style.opacity = '0';
-          });
-
-        cellsEnterA.append('text')
-          .attr('class', 'cell-text')
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'middle');
-
-        const cellsMergedA = cellsEnterA.merge(cellsA);
-
-        cellsMergedA.select('rect')
-          .attr('x', d => x(d.c))
-          .attr('y', d => y(d.r))
-          .attr('width', Math.max(1, x.bandwidth()))
-          .attr('height', Math.max(1, y.bandwidth()))
-          .attr('fill', d => colorA(d.value));
-
-        cellsMergedA.select('text')
-          .attr('x', d => x(d.c) + x.bandwidth() / 2)
-          .attr('y', d => y(d.r) + y.bandwidth() / 2)
-          .text(d => `${Math.round(d.value * 100)}`)
-          .style('fill', function(d){
-            try {
-              const rect = this && this.parentNode ? this.parentNode.querySelector('rect') : null;
-              const bg = rect ? getComputedStyle(rect).fill : colorA(d.value);
-              return chooseFixedReadableTextOnBg(bg);
-            } catch (_) {
-              return '#0e1116';
-            }
-          });
-
-        cellsA.exit().remove();
-
-        gAxesA.selectAll('*').remove();
-
-        gAxesA.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', (_, i) => x(i) + x.bandwidth() / 2)
-          .attr('y', -8)
-          .text(d => d);
-
-        gAxesA.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'end')
-          .attr('x', -8)
-          .attr('y', (_, i) => y(i) + y.bandwidth() / 2)
-          .attr('dominant-baseline', 'middle')
-          .text(d => d);
-
-        gAxesA.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', gridSize / 2)
-          .attr('y', innerHeight + 20)
-          .text('Predicted');
-
-        gAxesA.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('transform', `translate(${-40}, ${gridSize / 2}) rotate(-90)`)
-          .text('Actual');
-
-        // Panel B: Delta (Improved − Baseline), row-normalized differences in percentage points
-        const dataB = computeValues('row', matrixB);
-        const diverging = getDivergingColors(13);
-        // Build delta values aligned to A's ordering
-        const mapA = new Map(dataA.data.map(d => [d.r + '-' + d.c, d.value]));
-        const delta = dataB.data.map(d => ({ r: d.r, c: d.c, count: d.count, value: (d.value - (mapA.get(d.r + '-' + d.c) || 0)) }));
-        // Symmetric domain around 0 (in proportions), express later as pp in labels
-        const maxAbsDelta = Math.max(0.01, d3.max(delta, d => Math.abs(d.value)) || 0.01);
-        const colorB = d3.scaleQuantize().domain([-maxAbsDelta, maxAbsDelta]).range(diverging);
-
-        gCellsB.selectAll('rect.cell-bg')
-          .data([0])
-          .join('rect')
-          .attr('class', 'cell-bg')
-          .attr('x', 0)
-          .attr('y', 0)
-          .attr('width', gridSize)
-          .attr('height', gridSize)
-          .attr('fill', 'none')
-          .attr('stroke', 'var(--border-color)')
-          .attr('stroke-width', 1);
-
-        const cellsB = gCellsB.selectAll('g.cell')
-          .data(dataB.data, d => `${d.r}-${d.c}-B`);
-
-        const cellsEnterB = cellsB.enter()
-          .append('g')
-          .attr('class', 'cell');
-
-        cellsEnterB.append('rect')
-          .attr('rx', 2)
-          .attr('ry', 2)
-          .on('mousemove', (event, d) => {
-            const [px, py] = d3.pointer(event, container);
-            const a = dataA.data.find(x => x.r===d.r && x.c===d.c);
-            const b = dataB.data.find(x => x.r===d.r && x.c===d.c);
-            const dv = ((b ? b.value : 0) - (a ? a.value : 0)) * 100;
-            tipInner.innerHTML = `<strong>${classes[d.r]}</strong> → <strong>${classes[d.c]}</strong>` +
-              `<br/>baseline ${(a ? a.value*100 : 0).toFixed(1)}%` +
-              `<br/>improved ${(b ? b.value*100 : 0).toFixed(1)}%` +
-              `<br/>delta ${dv.toFixed(1)} pp`;
-            tip.style.transform = `translate(${px + 10}px, ${py + 10}px)`;
-            tip.style.opacity = '1';
-          })
-          .on('mouseleave', () => {
-            tip.style.opacity = '0';
-          });
-
-        cellsEnterB.append('text')
-          .attr('class', 'cell-text')
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'middle');
-
-        const cellsMergedB = cellsEnterB.merge(cellsB);
-
-        cellsMergedB.select('rect')
-          .attr('x', d => x(d.c))
-          .attr('y', d => y(d.r))
-          .attr('width', Math.max(1, x.bandwidth()))
-          .attr('height', Math.max(1, y.bandwidth()))
-          .attr('fill', d => colorB(delta.find(x => x.r===d.r && x.c===d.c).value));
-
-        cellsMergedB.select('text')
-          .attr('x', d => x(d.c) + x.bandwidth() / 2)
-          .attr('y', d => y(d.r) + y.bandwidth() / 2)
-          .text(d => {
-            const dv = delta.find(x => x.r===d.r && x.c===d.c).value; return `${Math.round(dv * 100)}`;
-          })
-          .style('fill', function(d){
-            try {
-              const rect = this && this.parentNode ? this.parentNode.querySelector('rect') : null;
-              const dv = delta.find(x => x.r===d.r && x.c===d.c).value;
-              const bg = rect ? getComputedStyle(rect).fill : colorB(dv);
-              return chooseFixedReadableTextOnBg(bg);
-            } catch (_) {
-              return '#0e1116';
-            }
-          });
-
-        cellsB.exit().remove();
-
-        gAxesB.selectAll('*').remove();
-
-        gAxesB.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', (_, i) => x(i) + x.bandwidth() / 2)
-          .attr('y', -8)
-          .text(d => d);
-
-        gAxesB.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'end')
-          .attr('x', -8)
-          .attr('y', (_, i) => y(i) + y.bandwidth() / 2)
-          .attr('dominant-baseline', 'middle')
-          .text(d => d);
-
-        gAxesB.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', gridSize / 2)
-          .attr('y', innerHeight + 20)
-          .text('Predicted');
-
-        gAxesB.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('transform', `translate(${-40}, ${gridSize / 2}) rotate(-90)`)
-          .text('Actual');
-      }
-
-      // Initial render + resize handling
-      render();
-      const rerender = () => render();
-      if (window.ResizeObserver) {
-        const ro = new ResizeObserver(() => rerender());
-        ro.observe(container);
-      } else {
-        window.addEventListener('resize', rerender);
-      }
-    };
-
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-    } else {
-      ensureD3(bootstrap);
-    }
-  })();
-</script>
-
-

app/src/content/embeds/d3-line-quad.html

@@ -1,783 +0,0 @@
-<div class="line-quad">
-
-  <div class="line-quad__grid">
-    <div class="quad-cell" data-title="Formatting Filter" data-csv="/data/formatting_filters.csv"></div>
-    <div class="quad-cell" data-title="Relevance Filter" data-csv="/data/relevance_filters.csv"></div>
-    <div class="quad-cell" data-title="Visual Dependency Filter" data-csv="/data/visual_dependency_filters.csv"></div>
-    <div class="quad-cell" data-title="Image Correspondence Filter" data-csv="/data/image_correspondence_filters.csv">
-    </div>
-  </div>
-  <noscript>JavaScript is required to render these charts.</noscript>
-
-</div>
-<style>
-  .line-quad {
-    position: relative;
-  }
-
-  /* Axis/tick/grid use global variables from _variables.css */
-  /* Apply axis/tick/grid purely via CSS */
-  .line-quad .axes path,
-  .line-quad .axes line {
-    stroke: var(--axis-color);
-  }
-
-  .line-quad .axes text {
-    fill: var(--tick-color);
-  }
-
-  .line-quad .grid line {
-    stroke: var(--grid-color);
-  }
-
-  .line-quad__grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-  }
-
-  @media (max-width: 980px) {
-    .line-quad__grid {
-      grid-template-columns: 1fr;
-    }
-  }
-
-
-
-  .quad-cell {
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    background: var(--surface-bg);
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  /* Stacking order to ensure hover/tooltip overlays are not hidden by neighbors */
-  .line-quad__grid .quad-cell:nth-child(1) {
-    z-index: 4;
-  }
-
-  /* top-left */
-  .line-quad__grid .quad-cell:nth-child(3) {
-    z-index: 3;
-  }
-
-  /* bottom-left */
-  .line-quad__grid .quad-cell:nth-child(2) {
-    z-index: 2;
-  }
-
-  /* top-right */
-  .line-quad__grid .quad-cell:nth-child(4) {
-    z-index: 1;
-  }
-
-  /* bottom-right */
-  .quad-cell .cell-header {
-    padding: 8px 10px;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
-
-  .quad-cell .cell-title {
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--text-color);
-  }
-
-  .quad-cell .cell-controls {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .quad-cell .cell-controls label {
-    font-size: 12px;
-    color: var(--muted-color);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-  }
-
-  .quad-cell select {
-    font-size: 12px;
-    padding: 6px 28px 6px 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    background-color: var(--surface-bg);
-    color: var(--text-color);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: 12px;
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    transition: border-color .15s ease, box-shadow .15s ease;
-  }
-
-  [data-theme="dark"] .quad-cell select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-  }
-
-  .quad-cell select:hover {
-    border-color: var(--primary-color);
-  }
-
-  .quad-cell select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(232, 137, 171, .25);
-    outline: none;
-  }
-
-  .quad-cell .cell-body {
-    position: relative;
-  }
-
-  .quad-cell .cell-body {
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .quad-cell .cell-body svg {
-    max-width: 100%;
-    height: auto;
-  }
-
-  .line-quad.hovering .lines path.ghost {
-    opacity: .25;
-  }
-
-  .line-quad.hovering .points circle.ghost {
-    opacity: .25;
-  }
-
-  .line-quad.hovering .areas path.ghost {
-    opacity: .08;
-  }
-
-  .line-quad.hovering .legend-bottom .item.ghost {
-    opacity: .35;
-  }
-
-  /* Tooltip refined styling */
-  .line-quad .d3-tooltip {
-    z-index: 20;
-    backdrop-filter: saturate(1.12) blur(8px);
-  }
-
-  .line-quad .d3-tooltip__inner {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 220px;
-  }
-
-  .line-quad .d3-tooltip__inner>div:first-child {
-    font-weight: 800;
-    letter-spacing: 0.1px;
-    margin-bottom: 0;
-  }
-
-  .line-quad .d3-tooltip__inner>div:nth-child(2) {
-    font-size: 11px;
-    color: var(--muted-color);
-    display: block;
-    margin-top: -4px;
-    margin-bottom: 2px;
-    letter-spacing: 0.1px;
-  }
-
-  .line-quad .d3-tooltip__inner>div:nth-child(n+3) {
-    padding-top: 6px;
-    border-top: 1px solid var(--border-color);
-  }
-
-  .line-quad .d3-tooltip__inner svg {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 2px;
-  }
-
-  .line-quad .d3-tooltip__inner strong {
-    margin-right: 6px;
-  }
-
-  .line-quad .d3-tooltip__color-dot {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color);
-  }
-
-  /* Header layout (like d3-line-simple) */
-  .line-quad__header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 12px;
-    margin: 8px 0 0 0;
-    flex-wrap: wrap;
-  }
-
-  .line-quad__header .legend-bottom {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-    font-size: 12px;
-    color: var(--text-color);
-  }
-
-  .line-quad__header .legend-bottom .legend-title {
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--text-color);
-  }
-
-  .line-quad__header .legend-bottom .items {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px 14px;
-  }
-
-  .line-quad__header .legend-bottom .item {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-  }
-
-  .line-quad__header .legend-bottom .swatch {
-    width: 14px;
-    height: 14px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color);
-    display: inline-block;
-  }
-
-  .line-quad .controls {
-    margin-top: 0;
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    justify-content: flex-end;
-    width: auto;
-    flex-wrap: wrap;
-  }
-
-  .line-quad .controls .control-group {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-  }
-
-  .line-quad .controls label {
-    font-size: 12px;
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-    font-weight: 700;
-  }
-
-  .line-quad .controls select {
-    font-size: 12px;
-    padding: 8px 28px 8px 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    background-color: var(--surface-bg);
-    color: var(--text-color);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: 12px;
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    transition: border-color .15s ease, box-shadow .15s ease;
-  }
-
-  [data-theme="dark"] .line-quad .controls select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-  }
-
-  .line-quad .controls select:hover {
-    border-color: var(--primary-color);
-  }
-
-  .line-quad .controls select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(232, 137, 171, .25);
-    outline: none;
-  }
-</style>
-<script>
-  (() => {
-    const THIS_SCRIPT = document.currentScript;
-    // Shared run->color mapping to keep legend and series perfectly in sync
-    let SHARED_RUN_COLOR = null;
-    // Pretty label mapping for metric keys
-    const prettyMetricLabel = (key) => {
-      if (!key) return '';
-      const table = {
-        'ai2d_exact_match': 'AI2D Exact Match',
-        'average_rank': 'Average Rank',
-      };
-      if (table[key]) return table[key];
-      const cleaned = String(key).replace(/[_-]+/g, ' ').trim();
-      return cleaned.split(/\s+/).map(w => {
-        if (/^(ai2d|umap|id|auc|f1)$/i.test(w)) return w.toUpperCase();
-        return w.charAt(0).toUpperCase() + w.slice(1);
-      }).join(' ');
-    };
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let s = document.getElementById('d3-cdn-script');
-      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
-      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
-    };
-
-    function initRunLine(cell) {
-      const d3 = window.d3;
-      const csvPath = cell.getAttribute('data-csv');
-      const titleText = cell.getAttribute('data-title') || '';
-
-      // Header
-      const header = document.createElement('div'); header.className = 'cell-header';
-      const title = document.createElement('div'); title.className = 'cell-title'; title.textContent = titleText; header.appendChild(title);
-      // Per-cell controls supprimés (contrôle global utilisé)
-      cell.appendChild(header);
-
-      // Body & SVG
-      const body = document.createElement('div'); body.className = 'cell-body'; cell.appendChild(body);
-      const svg = d3.select(body).append('svg').attr('width', '100%').style('display', 'block');
-      const gRoot = svg.append('g');
-      const gGrid = gRoot.append('g').attr('class', 'grid');
-      const gAxes = gRoot.append('g').attr('class', 'axes');
-      const gAreas = gRoot.append('g').attr('class', 'areas');
-      const gLines = gRoot.append('g').attr('class', 'lines');
-      const gPoints = gRoot.append('g').attr('class', 'points');
-      const gHover = gRoot.append('g').attr('class', 'hover');
-      // Removed per-cell legend; using global footer legend
-
-      // Tooltip
-      cell.style.position = cell.style.position || 'relative';
-      let tip = cell.querySelector('.d3-tooltip'); let tipInner; let hideTipTimer = null;
-      if (!tip) {
-        tip = document.createElement('div');
-        tip.className = 'd3-tooltip';
-        Object.assign(tip.style, {
-          position: 'absolute',
-          top: '0',
-          left: '0',
-          transform: 'translate(-9999px,-9999px)',
-          pointerEvents: 'none',
-          padding: '10px 12px',
-          borderRadius: '12px',
-          fontSize: '12px',
-          lineHeight: '1.35',
-          border: '1px solid var(--border-color)',
-          background: 'var(--surface-bg)',
-          color: 'var(--text-color)',
-          boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
-          opacity: '0',
-          transition: 'opacity .12s ease',
-          backdropFilter: 'saturate(1.12) blur(8px)'
-        });
-        tipInner = document.createElement('div');
-        tipInner.className = 'd3-tooltip__inner';
-        tipInner.style.textAlign = 'left';
-        tip.appendChild(tipInner);
-        cell.appendChild(tip);
-      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
-
-      // State
-      let metricList = []; let runList = []; let runOrder = []; const dataByMetric = new Map();
-      let width = 800, height = 340; const margin = { top: 16, right: 20, bottom: 46, left: 56 };
-      const xScale = d3.scaleLinear(); const yScale = d3.scaleLinear();
-      const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
-      let isRankStrictFlag = false; let isRankMetricFlag = false; let rankTickMax = 1;
-      let sharedYConfig = null; // { type: 'rank_strict', maxRank } | { type: 'value', min, max }
-      let axisLabelY = 'Value';
-
-      // Colors and markers (match original embeds)
-      const getRunColors = (n) => {
-        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch (_) { }
-        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
-        return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10 || [])].slice(0, n);
-      };
-      const pool = getRunColors(12);
-      // Shapes removed: we only use color
-      // Ready signal for async load completion
-      let readyResolve = null;
-      const ready = new Promise((res) => { readyResolve = res; });
-
-      // Shared formatter for thousands: 5000 -> 5k, 1500 -> 1.5k (trim .0)
-      const formatK = (v) => {
-        const abs = Math.abs(v);
-        if (abs >= 1000) {
-          const n = v / 1000;
-          const s = d3.format('.1f')(n);
-          return (s.endsWith('.0') ? s.slice(0, -2) : s) + 'k';
-        }
-        return d3.format('d')(v);
-      };
-
-      function updateScales() {
-        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-        const axisColor = 'var(--axis-color)';
-        const tickColor = 'var(--tick-color)';
-        const gridColor = 'var(--grid-color)';
-
-        const rect = cell.getBoundingClientRect();
-        width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
-        height = Math.max(280, Math.round(width / 2.3));
-        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio', 'xMidYMid meet');
-        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom;
-        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
-        xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
-
-        // Y ticks
-        let yTicks = [];
-        if (isRankStrictFlag) { const maxR = Math.max(1, Math.round(rankTickMax)); for (let v = 1; v <= maxR; v += 1) yTicks.push(v); }
-        else { yTicks = yScale.ticks(6); }
-
-        // Grid
-        gGrid.selectAll('*').remove();
-        gGrid.selectAll('line').data(yTicks).join('line')
-          .attr('x1', 0).attr('x2', innerWidth).attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
-          .attr('stroke', gridColor).attr('stroke-width', 1).attr('shape-rendering', 'crispEdges');
-
-        // Axes
-        gAxes.selectAll('*').remove();
-        let xAxis = d3.axisBottom(xScale).tickSizeOuter(0); xAxis = xAxis.ticks(8);
-        xAxis = xAxis.tickFormat(formatK);
-        const yAxis = d3.axisLeft(yScale).tickValues(yTicks).tickSizeOuter(0).tickFormat(isRankStrictFlag ? d3.format('d') : d3.format('.2f'));
-        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g => { g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size', '11px'); });
-        gAxes.append('g').call(yAxis).call(g => { g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size', '11px'); });
-
-        // Axis labels
-        gAxes.append('text')
-          .attr('class', 'x-axis-label')
-          .attr('x', innerWidth / 2)
-          .attr('y', innerHeight + Math.max(20, Math.min(36, margin.bottom - 10)))
-          .attr('fill', 'var(--text-color)')
-          .attr('text-anchor', 'middle')
-          .style('font-size', '12px')
-          .style('font-weight', '700')
-          .text('Steps');
-
-        gAxes.append('text')
-          .attr('class', 'y-axis-label')
-          .attr('transform', 'rotate(-90)')
-          .attr('x', -innerHeight / 2)
-          .attr('y', -Math.max(16, Math.min(28, margin.left - 8) + 10))
-          .attr('fill', 'var(--text-color)')
-          .attr('text-anchor', 'middle')
-          .style('font-size', '12px')
-          .style('font-weight', '700')
-          .text(axisLabelY);
-
-        return { innerWidth, innerHeight, tickColor };
-      }
-
-      function renderMetric(metricKey) {
-        const map = dataByMetric.get(metricKey) || {};
-        const runs = runOrder;
-        let minStep = Infinity, maxStep = -Infinity, maxVal = 0, minVal = Infinity;
-        const isRank = /rank/i.test(metricKey); const isAverage = /average/i.test(metricKey); const isRankStrict = isRank && !isAverage;
-        runs.forEach(r => { (map[r] || []).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); maxVal = Math.max(maxVal, v); minVal = Math.min(minVal, v); }); });
-        if (!isFinite(minStep) || !isFinite(maxStep)) return;
-        xScale.domain([minStep, maxStep]);
-        if (sharedYConfig && sharedYConfig.type === 'rank_strict') {
-          rankTickMax = Math.max(1, Math.round(sharedYConfig.maxRank || 1));
-          yScale.domain([rankTickMax, 1]);
-          isRankStrictFlag = true;
-          isRankMetricFlag = true;
-        } else if (sharedYConfig && sharedYConfig.type === 'value') {
-          yScale.domain([sharedYConfig.min, sharedYConfig.max]);
-          isRankStrictFlag = isRankStrict;
-          isRankMetricFlag = isRank;
-        } else {
-          if (isRank) { rankTickMax = Math.max(1, Math.round(maxVal)); yScale.domain([rankTickMax, 1]); }
-          else { yScale.domain([minVal, maxVal]).nice(); }
-          isRankStrictFlag = isRankStrict;
-          isRankMetricFlag = isRank;
-        }
-
-        axisLabelY = isRankStrict ? 'Rank' : prettyMetricLabel(metricKey);
-        const tChange = (window.d3 && d3.transition) ? d3.transition().duration(260).ease(d3.easeCubicOut) : null;
-        const { innerWidth, innerHeight } = updateScales();
-
-        const colorForRun = (run, idx) => {
-          if (SHARED_RUN_COLOR && Object.prototype.hasOwnProperty.call(SHARED_RUN_COLOR, run)) return SHARED_RUN_COLOR[run];
-          const j = (typeof idx === 'number' ? idx : runs.indexOf(run));
-          return pool[(j >= 0 ? j : 0) % pool.length];
-        };
-        const series = runs.map((r, i) => ({ run: r, color: colorForRun(r, i), values: (map[r] || []).slice().sort((a, b) => a.step - b.step).map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt) }));
-
-        // zones ± stderr (métriques non rank)
-        gAreas.selectAll('*').remove();
-        if (!isRank) {
-          series.forEach((s) => {
-            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
-            if (!withErr.length) return;
-            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
-            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
-            const coords = upper.concat(lower);
-            const pathData = d3.line().x(d => d[0]).y(d => d[1]).curve(d3.curveLinearClosed)(coords);
-            gAreas.append('path')
-              .attr('class', 'area')
-              .attr('data-run', s.run)
-              .attr('d', pathData)
-              .attr('fill', s.color)
-              .attr('opacity', 0)
-              .attr('stroke', 'none')
-              .transition().duration(450).ease(d3.easeCubicOut)
-              .attr('opacity', 0.15);
-          });
-        }
-
-        const paths = gLines.selectAll('path.run-line').data(series, d => d.run);
-        paths.enter()
-          .append('path')
-          .attr('class', 'run-line')
-          .attr('data-run', d => d.run)
-          .attr('fill', 'none')
-          .attr('stroke-width', 1)
-          .attr('opacity', 0)
-          .attr('stroke', d => d.color)
-          .attr('d', d => lineGen(d.values))
-          .transition(tChange || undefined)
-          .attr('opacity', 0.9);
-        paths
-          .transition(tChange || undefined)
-          .attr('stroke', d => d.color)
-          .attr('opacity', 0.9)
-          .attr('d', d => lineGen(d.values));
-        paths.exit().remove();
-
-        // Draw light point markers at each data sample (subtle)
-        const allPoints = series.flatMap(s => s.values.map(v => ({ run: s.run, color: s.color, step: v.step, value: v.value })));
-        const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d => `${d.run}-${d.step}`);
-        ptsSel.enter().append('circle').attr('class', 'pt')
-          .attr('data-run', d => d.run)
-          .attr('r', 1.5)
-          .attr('fill', d => d.color)
-          .attr('fill-opacity', 0.6)
-          .attr('stroke', 'none')
-          .attr('cx', d => xScale(d.step))
-          .attr('cy', d => yScale(d.value))
-          .merge(ptsSel)
-          .attr('fill', d => d.color)
-          .transition(tChange || undefined)
-          .attr('r', 2)
-          .attr('cx', d => xScale(d.step))
-          .attr('cy', d => yScale(d.value));
-        ptsSel.exit().remove();
-
-        // No per-cell legend content (handled globally)
-
-        // Hover
-        gHover.selectAll('*').remove();
-        const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair').attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
-        const hoverLine = gHover.append('line').style('stroke', 'var(--text-color)').attr('stroke-opacity', 0.25).attr('stroke-width', 1).attr('y1', 0).attr('y2', innerHeight).style('display', 'none');
-        const stepSet = new Set(); series.forEach(s => s.values.forEach(v => stepSet.add(v.step))); const steps = Array.from(stepSet).sort((a, b) => a - b);
-        function onMove(ev) {
-          if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx, my] = d3.pointer(ev, overlay.node()); const nearest = steps.reduce((best, s) => Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]); const xpx = xScale(nearest); hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
-          let html = `<div><strong>${titleText}</strong></div><div><strong>step</strong> ${formatK(nearest)}</div>`;
-          const entries = series.map(s => { const map = new Map(s.values.map(v => [v.step, v])); const pt = map.get(nearest); return { run: s.run, color: s.color, pt }; }).filter(e => e.pt && e.pt.value != null);
-          entries.sort((a, b) => (a.pt.value - b.pt.value));
-          const fmt = (vv) => (isRankStrictFlag ? d3.format('d')(vv) : (+vv).toFixed(4));
-          entries.forEach(e => {
-            const err = (e.pt.stderr != null && isFinite(e.pt.stderr) && e.pt.stderr > 0) ? ` ± ${fmt(e.pt.stderr)}` : '';
-            html += `<div style="display:flex;align-items:center;gap:8px;white-space:nowrap;"><span class=\"d3-tooltip__color-dot\" style=\"background:${e.color}\"></span><strong>${e.run}</strong><span style=\"margin-left:auto;text-align:right;\">${fmt(e.pt.value)}${err}</span></div>`;
-          });
-          tipInner.innerHTML = html; const offsetX = 12, offsetY = 12; tip.style.opacity = '1'; tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
-        }
-        function onLeave() { hideTipTimer = setTimeout(() => { tip.style.opacity = '0'; tip.style.transform = 'translate(-9999px, -9999px)'; hoverLine.style('display', 'none'); }, 100); }
-        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
-      }
-
-      async function load() {
-        try {
-          const file = (csvPath || '').split('/').pop();
-          const CANDIDATES = [
-            csvPath,
-            `/data/${file}`,
-            `./assets/data/${file}`,
-            `../assets/data/${file}`,
-            `../../assets/data/${file}`
-          ].filter(Boolean);
-          let text = null;
-          for (const p of CANDIDATES) {
-            try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) { text = await r.text(); break; } } catch (e) { }
-          }
-          if (text == null) throw new Error(`CSV not found: ${file}`);
-          const rows = d3.csvParse(text, d => ({ run: (d.run || '').trim(), step: +d.step, metric: (d.metric || '').trim(), value: +d.value, stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null }));
-          metricList = Array.from(new Set(rows.map(r => r.metric))).sort();
-          runList = Array.from(new Set(rows.map(r => r.run))).sort(); runOrder = runList;
-          metricList.forEach(m => { const map = {}; runList.forEach(r => map[r] = []); rows.filter(r => r.metric === m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step: r.step, value: r.value, stderr: r.stderr }); }); dataByMetric.set(m, map); });
-          const preferred = metricList.find(m => m === 'ai2d_exact_match') || metricList.find(m => /average_rank/i.test(m));
-          const def = preferred || metricList[0];
-          renderMetric(def);
-          const ro = window.ResizeObserver ? new ResizeObserver(() => renderMetric(def)) : null; if (ro) ro.observe(cell);
-          if (typeof readyResolve === 'function') readyResolve();
-        } catch (e) {
-          const pre = document.createElement('pre'); pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e);
-          pre.style.color = 'var(--danger, #b00020)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap'; cell.appendChild(pre);
-          if (typeof readyResolve === 'function') readyResolve();
-        }
-      }
-      load();
-
-      return {
-        ready,
-        getMetrics: () => metricList.slice(),
-        setMetric: (m) => { if (m) renderMetric(m); },
-        getYInfo: (m) => {
-          const key = m; const map = dataByMetric.get(key) || {}; const runs = runOrder;
-          let maxVal = 0, minVal = Infinity; let minStep = Infinity, maxStep = -Infinity;
-          const isRank = /rank/i.test(key); const isAverage = /average/i.test(key); const isRankStrict = isRank && !isAverage;
-          runs.forEach(r => { (map[r] || []).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); maxVal = Math.max(maxVal, v); minVal = Math.min(minVal, v); }); });
-          const rankMax = isRank ? Math.max(1, Math.round(maxVal)) : null;
-          return { isRank, isRankStrict, min: maxVal === 0 && minVal === Infinity ? null : minVal, max: maxVal, rankMax };
-        },
-        setSharedY: (cfg) => { sharedYConfig = cfg || null; if (metricList && metricList.length) { /* re-render last metric if possible */ const current = cfg && cfg.key ? cfg.key : null; const m = current || metricList[0]; renderMetric(m); } }
-      };
-    }
-
-    const bootstrap = () => {
-      const scriptEl = THIS_SCRIPT;
-      let host = null;
-      // Build header (legend + controls) and append after grid
-      const header = document.createElement('div'); header.className = 'line-quad__header';
-      const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>';
-      const controls = document.createElement('div'); controls.className = 'controls'; controls.innerHTML = '<div class="control-group"><label>Metric</label><select></select></div>';
-      header.appendChild(legend);
-      header.appendChild(controls);
-      // Try finding within parent (fragment mount is inside parent)
-      if (scriptEl && scriptEl.parentElement && scriptEl.parentElement.querySelector) {
-        host = scriptEl.parentElement.querySelector('.line-quad');
-      }
-      // Fallback: scan previous siblings
-      if (!host) {
-        let sib = scriptEl && scriptEl.previousElementSibling;
-        while (sib && !(sib.classList && sib.classList.contains('line-quad'))) {
-          sib = sib.previousElementSibling;
-        }
-        host = sib || null;
-      }
-      // Last resort: global query
-      if (!host) { host = document.querySelector('.line-quad'); }
-      if (!host) return;
-      if (host.dataset && host.dataset.mounted === 'true') return; if (host.dataset) host.dataset.mounted = 'true';
-      const cells = host.querySelectorAll('.quad-cell'); if (!cells.length) return;
-      host.appendChild(header);
-      const instances = Array.from(cells).map(cell => initRunLine(cell));
-
-      (async () => {
-        // Wait for all charts to finish loading their CSVs
-        await Promise.all(instances.map(i => i.ready));
-        const lists = instances.map(i => i.getMetrics()).filter(a => Array.isArray(a) && a.length);
-        const intersect = (arrs) => arrs.reduce((acc, cur) => acc.filter(x => cur.includes(x)));
-        let metrics = lists.length ? intersect(lists) : [];
-        if (!metrics.length) { metrics = lists[0] || []; }
-        const def = (metrics.includes('ai2d_exact_match') ? 'ai2d_exact_match' : (metrics.find(m => /average_rank/i.test(m)) || metrics[0] || ''));
-
-        // Wire header controls (select under "Metric" label)
-        const headerEl = host.querySelector('.line-quad__header');
-        if (headerEl && !headerEl.isConnected) host.appendChild(header);
-        const select = (headerEl || header).querySelector('.controls select');
-        if (select) {
-          select.innerHTML = '';
-          metrics.forEach(m => { const o = document.createElement('option'); o.value = m; o.textContent = prettyMetricLabel(m); select.appendChild(o); });
-          if (def) select.value = def;
-        }
-
-        const computeAndApplySharedY = (metric) => {
-          try {
-            const infos = instances.map(i => i && typeof i.getYInfo === 'function' ? i.getYInfo(metric) : null).filter(Boolean);
-            if (!infos.length) return;
-            const anyRank = infos.some(info => info.isRank);
-            if (anyRank) {
-              const maxRank = Math.max(1, ...infos.map(info => Math.round(info.rankMax || 1)));
-              instances.forEach(i => i && typeof i.setSharedY === 'function' && i.setSharedY({ type: 'rank_strict', maxRank, key: metric }));
-            } else {
-              const min = Math.min(...infos.map(info => info.min));
-              const max = Math.max(...infos.map(info => info.max));
-              instances.forEach(i => i && typeof i.setSharedY === 'function' && i.setSharedY({ type: 'value', min, max, key: metric }));
-            }
-          } catch (_) { }
-        };
-
-        const applyAll = (v) => { computeAndApplySharedY(v); instances.forEach(i => i && typeof i.setMetric === 'function' && i.setMetric(v)); };
-        if (def) applyAll(def);
-        if (select) select.addEventListener('change', () => applyAll(select.value));
-
-        // Global legend (in header, colors only)
-        const legendItemsHost = (headerEl || header).querySelector('.legend-bottom .items');
-        if (legendItemsHost) {
-          try {
-            const f = '/data/formatting_filters.csv';
-            const r = await fetch(f, { cache: 'no-cache' });
-            if (r.ok && window.d3 && window.d3.csvParse) {
-              const txt = await r.text();
-              const rows = window.d3.csvParse(txt);
-              const runList = Array.from(new Set(rows.map(row => String(row.run || '').trim()).filter(Boolean))).sort();
-              const poolLegend = (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function')
-                ? window.ColorPalettes.getColors('categorical', runList.length)
-                : (() => { const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...((window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ab'])]; })();
-              // Build shared run->color map once
-              SHARED_RUN_COLOR = {};
-              runList.forEach((name, i) => { SHARED_RUN_COLOR[name] = poolLegend[i % poolLegend.length]; });
-              legendItemsHost.innerHTML = runList.map((name) => {
-                const color = SHARED_RUN_COLOR[name];
-                return `<span class="item" data-run="${name}"><span class=\"swatch\" style=\"background:${color}\"></span><span>${name}</span></span>`;
-              }).join('');
-              // Re-render all cells with the shared mapping to ensure perfect sync
-              try {
-                const currentMetric = (select && select.value) || def;
-                if (currentMetric) applyAll(currentMetric);
-              } catch { }
-              // Legend hover ghosting across all cells
-              legendItemsHost.querySelectorAll('.item').forEach(el => {
-                el.addEventListener('mouseenter', () => {
-                  const run = el.getAttribute('data-run'); if (!run) return;
-                  host.classList.add('hovering');
-                  host.querySelectorAll('.quad-cell').forEach(cell => {
-                    cell.querySelectorAll('.lines path.run-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
-                    cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run));
-                    cell.querySelectorAll('.areas path.area').forEach(a => a.classList.toggle('ghost', a.getAttribute('data-run') !== run));
-                  });
-                  legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-run') !== run));
-                });
-                el.addEventListener('mouseleave', () => {
-                  host.classList.remove('hovering');
-                  host.querySelectorAll('.quad-cell').forEach(cell => {
-                    cell.querySelectorAll('.lines path.run-line').forEach(p => p.classList.remove('ghost'));
-                    cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.remove('ghost'));
-                    cell.querySelectorAll('.areas path.area').forEach(a => a.classList.remove('ghost'));
-                  });
-                  legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.remove('ghost'));
-                });
-              });
-            }
-          } catch { }
-        }
-      })();
-    };
-
-    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
-  })();
-</script>

app/src/content/embeds/d3-matrix.html

@@ -1,524 +0,0 @@
-<div class="d3-matrix"></div>
-<style>
-  .d3-matrix {
-    position: relative;
-  }
-
-  .d3-matrix .panels {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-bottom: 4px;
-  }
-
-  .d3-matrix .panel {
-    flex: 1 1 320px;
-    min-width: 280px;
-  }
-
-  .d3-matrix .panel__title {
-    color: var(--text-color);
-    font-size: 12px;
-    line-height: 1.35;
-    margin: 0 0 6px 0;
-    font-weight: 600;
-  }
-
-  .d3-matrix .axis-label {
-    fill: var(--text-color);
-    font-size: 11px;
-    font-weight: 700;
-  }
-
-  .d3-matrix .cell-border {
-    stroke: var(--border-color);
-    stroke-width: 1px;
-    fill: none;
-  }
-
-  .d3-matrix .cell-text {
-    fill: var(--muted-color);
-    font-size: 11px;
-    pointer-events: none;
-  }
-
-  .d3-matrix .chart-card {
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 8px;
-  }
-</style>
-<script>
-  (() => {
-    // Load D3 from CDN once
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let s = document.getElementById('d3-cdn-script');
-      if (!s) {
-        s = document.createElement('script');
-        s.id = 'd3-cdn-script';
-        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
-        document.head.appendChild(s);
-      }
-      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true });
-      if (window.d3) onReady();
-    };
-
-    const bootstrap = () => {
-      const scriptEl = document.currentScript;
-      let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-matrix'))) {
-        const cs = Array.from(document.querySelectorAll('.d3-matrix')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
-        container = cs[cs.length - 1] || null;
-      }
-      if (!container) return;
-      if (container.dataset) {
-        if (container.dataset.mounted === 'true') return;
-        container.dataset.mounted = 'true';
-      }
-
-      // Tooltip (HTML, single instance inside container)
-      container.style.position = container.style.position || 'relative';
-      let tip = container.querySelector('.d3-tooltip');
-      let tipInner;
-      if (!tip) {
-        tip = document.createElement('div');
-        tip.className = 'd3-tooltip';
-        Object.assign(tip.style, {
-          position: 'absolute',
-          top: '0px',
-          left: '0px',
-          transform: 'translate(-9999px, -9999px)',
-          pointerEvents: 'none',
-          padding: '8px 10px',
-          borderRadius: '8px',
-          fontSize: '12px',
-          lineHeight: '1.35',
-          border: '1px solid var(--border-color)',
-          background: 'var(--surface-bg)',
-          color: 'var(--text-color)',
-          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
-          opacity: '0',
-          transition: 'opacity .12s ease'
-        });
-        tipInner = document.createElement('div');
-        tipInner.className = 'd3-tooltip__inner';
-        tipInner.style.textAlign = 'left';
-        tip.appendChild(tipInner);
-        container.appendChild(tip);
-      } else {
-        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
-      }
-
-      // Panels container (two side-by-side matrices)
-      const panels = document.createElement('div');
-      panels.className = 'panels';
-      const panelA = document.createElement('div');
-      panelA.className = 'panel';
-      const titleA = document.createElement('div'); titleA.className = 'panel__title'; titleA.textContent = 'Baseline (row-normalized %)';
-      panelA.appendChild(titleA);
-      const mountA = document.createElement('div'); panelA.appendChild(mountA);
-      const panelB = document.createElement('div');
-      panelB.className = 'panel';
-      const titleB = document.createElement('div'); titleB.className = 'panel__title'; titleB.textContent = 'Delta (Improved − Baseline, pp)';
-      panelB.appendChild(titleB);
-      const mountB = document.createElement('div'); panelB.appendChild(mountB);
-      panels.appendChild(panelA);
-      panels.appendChild(panelB);
-      container.appendChild(panels);
-
-      // SVG scaffolding
-      const cardA = document.createElement('div'); cardA.className = 'chart-card'; mountA.appendChild(cardA);
-      const svgA = d3.select(cardA).append('svg').attr('width', '100%').style('display', 'block');
-      const gRootA = svgA.append('g');
-      const gCellsA = gRootA.append('g');
-      const gAxesA = gRootA.append('g');
-      const cardB = document.createElement('div'); cardB.className = 'chart-card'; mountB.appendChild(cardB);
-      const svgB = d3.select(cardB).append('svg').attr('width', '100%').style('display', 'block');
-      const gRootB = svgB.append('g');
-      const gCellsB = gRootB.append('g');
-      const gAxesB = gRootB.append('g');
-
-      // Demo data (two distinct 10x10 matrices: Baseline vs Improved)
-      // Rows / Columns are generic class labels
-      const classes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-      const matrixA = [
-        [90, 2, 1, 0, 0, 0, 1, 0, 5, 1],
-        [3, 85, 5, 1, 0, 1, 2, 1, 1, 1],
-        [1, 6, 70, 10, 4, 4, 1, 1, 1, 2],
-        [0, 1, 8, 65, 10, 10, 2, 1, 1, 2],
-        [0, 0, 2, 6, 83, 3, 1, 1, 3, 1],
-        [0, 1, 2, 12, 4, 70, 5, 2, 2, 2],
-        [1, 2, 1, 0, 1, 2, 88, 1, 3, 1],
-        [0, 1, 1, 1, 1, 1, 2, 90, 1, 2],
-        [6, 2, 2, 4, 6, 3, 3, 2, 70, 2],
-        [1, 1, 1, 1, 2, 1, 1, 2, 1, 89]
-      ];
-      const matrixB = [
-        [94, 1, 0, 0, 0, 0, 1, 0, 3, 1],
-        [2, 90, 3, 1, 0, 0, 1, 1, 1, 1],
-        [1, 4, 78, 7, 3, 3, 1, 1, 1, 1],
-        [0, 1, 5, 74, 7, 8, 1, 1, 1, 2],
-        [0, 0, 1, 4, 88, 2, 1, 1, 2, 1],
-        [0, 1, 1, 9, 3, 78, 3, 1, 2, 2],
-        [1, 1, 1, 0, 1, 1, 91, 1, 2, 1],
-        [0, 1, 1, 1, 1, 1, 1, 92, 1, 1],
-        [4, 1, 1, 3, 4, 2, 2, 2, 79, 2],
-        [1, 1, 1, 1, 2, 1, 1, 1, 1, 90]
-      ];
-
-      // Colors: sequential palette via window.ColorPalettes with graceful fallback
-      const getSequentialColors = (count) => {
-        try {
-          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-            return window.ColorPalettes.getColors('sequential', count);
-          }
-        } catch (_) { }
-        // Fallback: generate a monochrome scale using the primary color with varying opacity
-        const arr = [];
-        for (let i = 0; i < count; i++) arr.push('var(--primary-color)');
-        return arr;
-      };
-
-      const palette = getSequentialColors(13);
-      const getDivergingColors = (count) => {
-        try {
-          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-            return window.ColorPalettes.getColors('diverging', count);
-          }
-        } catch (_) { }
-        const steps = Math.max(3, count | 0);
-        const arr = [];
-        for (let i = 0; i < steps; i++) {
-          const t = i / (steps - 1);
-          const pct = Math.round(t * 100);
-          arr.push(`color-mix(in srgb, #D64545 ${100 - pct}%, #3A7BD5 ${pct}%)`);
-        }
-        return arr;
-      };
-
-      let width = 800;
-      let height = 480;
-      const margin = { top: 36, right: 24, bottom: 26, left: 56 };
-
-      function updateSize() {
-        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-        width = container.clientWidth || 800;
-        const gap = 16; // matches CSS .panels gap
-        const minPanel = 320;
-        const nCols = (width >= (minPanel * 2 + gap)) ? 2 : 1;
-        const panelWidth = nCols === 2 ? Math.max(minPanel, Math.floor((width - gap) / 2)) : Math.max(minPanel, width);
-        const base = Math.max(minPanel, Math.round(panelWidth * 0.92));
-        height = base;
-        // Responsive SVG: width 100%, height auto, preserve aspect via viewBox
-        svgA
-          .attr('viewBox', `0 0 ${panelWidth} ${height}`)
-          .attr('preserveAspectRatio', 'xMidYMid meet')
-          .style('width', '100%')
-          .style('height', 'auto');
-        svgB
-          .attr('viewBox', `0 0 ${panelWidth} ${height}`)
-          .attr('preserveAspectRatio', 'xMidYMid meet')
-          .style('width', '100%')
-          .style('height', 'auto');
-        gRootA.attr('transform', `translate(${margin.left},${margin.top})`);
-        gRootB.attr('transform', `translate(${margin.left},${margin.top})`);
-        const innerWidth = panelWidth - margin.left - margin.right;
-        const innerHeight = height - margin.top - margin.bottom;
-        return { innerWidth, innerHeight, isDark };
-      }
-
-      function computeValues(normalization, matrix) {
-        const n = classes.length;
-        const totalsByRow = matrix.map(row => row.reduce((a, b) => a + b, 0));
-        const flat = [];
-        let minV = Infinity, maxV = -Infinity;
-        for (let r = 0; r < n; r++) {
-          for (let c = 0; c < n; c++) {
-            const count = matrix[r][c];
-            const value = normalization === 'row' ? (totalsByRow[r] ? count / totalsByRow[r] : 0) : count;
-            if (value < minV) minV = value;
-            if (value > maxV) maxV = value;
-            flat.push({ r, c, count, value });
-          }
-        }
-        return { data: flat, minV, maxV };
-      }
-
-      function getColorScale(values, minV, maxV) {
-        // If ColorPalettes is available, use quantiles to enhance visual variation across the distribution
-        const hasPalette = !(palette.length === 0);
-        if (hasPalette && (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function')) {
-          const scale = d3.scaleQuantile().domain(values).range(palette);
-          return (v) => scale(v);
-        }
-        // Fallback: primary color with opacity mapped to normalized value
-        const norm = d3.scaleLinear().domain([minV, maxV]).range([0.08, 0.9]).clamp(true);
-        return (v) => `color-mix(in oklab, var(--primary-color) ${Math.round(norm(v) * 100)}%, var(--surface-bg))`;
-      }
-
-      // Compute a fixed readable text color from a CSS rgb()/rgba() string
-      function chooseFixedReadableTextOnBg(bgCss) {
-        try {
-          const m = String(bgCss || '').match(/rgba?\(([^)]+)\)/);
-          if (!m) return '#0e1116';
-          const parts = m[1].split(',').map(s => parseFloat(s.trim()));
-          const [r, g, b] = parts;
-          // sRGB → relative luminance
-          const srgb = [r, g, b].map(v => Math.max(0, Math.min(255, v)) / 255);
-          const linear = srgb.map(c => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
-          const L = 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
-          // Threshold ~ 0.5 for readability; darker BG → white text, else near-black
-          return L < 0.5 ? '#ffffff' : '#0e1116';
-        } catch (_) { return '#0e1116'; }
-      }
-
-      function render() {
-        const { innerWidth, innerHeight } = updateSize();
-        const n = classes.length;
-        const gridSize = Math.min(innerWidth, innerHeight);
-        const cellSize = gridSize / n;
-
-        const x = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0.06);
-        const y = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0.06);
-
-        // Panel A: Baseline (row-normalized)
-        const dataA = computeValues('row', matrixA);
-        const colorA = getColorScale(dataA.data.map(d => d.value), dataA.minV, dataA.maxV);
-
-        gCellsA.selectAll('rect.cell-bg')
-          .data([0])
-          .join('rect')
-          .attr('class', 'cell-bg')
-          .attr('x', 0)
-          .attr('y', 0)
-          .attr('width', gridSize)
-          .attr('height', gridSize)
-          .attr('fill', 'none')
-          .attr('stroke', 'var(--border-color)')
-          .attr('stroke-width', 1);
-
-        const cellsA = gCellsA.selectAll('g.cell')
-          .data(dataA.data, d => `${d.r}-${d.c}-A`);
-
-        const cellsEnterA = cellsA.enter()
-          .append('g')
-          .attr('class', 'cell');
-
-        cellsEnterA.append('rect')
-          .attr('rx', 2)
-          .attr('ry', 2)
-          .on('mousemove', (event, d) => {
-            const [px, py] = d3.pointer(event, container);
-            tipInner.innerHTML = `<strong>${classes[d.r]}</strong> → <strong>${classes[d.c]}</strong><br/>${(d.value * 100).toFixed(1)}% (${d.count})`;
-            tip.style.transform = `translate(${px + 10}px, ${py + 10}px)`;
-            tip.style.opacity = '1';
-          })
-          .on('mouseleave', () => {
-            tip.style.opacity = '0';
-          });
-
-        cellsEnterA.append('text')
-          .attr('class', 'cell-text')
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'middle');
-
-        const cellsMergedA = cellsEnterA.merge(cellsA);
-
-        cellsMergedA.select('text')
-          .attr('x', d => x(d.c) + x.bandwidth() / 2)
-          .attr('y', d => y(d.r) + y.bandwidth() / 2)
-          .text(d => `${Math.round(d.value * 100)}`)
-          .style('fill', function (d) {
-            try {
-              const rect = this && this.parentNode ? this.parentNode.querySelector('rect') : null;
-              const bg = rect ? getComputedStyle(rect).fill : colorA(d.value);
-              return chooseFixedReadableTextOnBg(bg);
-            } catch (_) {
-              return '#0e1116';
-            }
-          });
-
-        cellsMergedA.select('rect')
-          .attr('x', d => x(d.c))
-          .attr('y', d => y(d.r))
-          .attr('width', Math.max(1, x.bandwidth()))
-          .attr('height', Math.max(1, y.bandwidth()))
-          .attr('fill', d => colorA(d.value));
-
-        cellsA.exit().remove();
-
-        gAxesA.selectAll('*').remove();
-
-        gAxesA.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', (_, i) => x(i) + x.bandwidth() / 2)
-          .attr('y', -8)
-          .text(d => d);
-
-        gAxesA.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'end')
-          .attr('x', -8)
-          .attr('y', (_, i) => y(i) + y.bandwidth() / 2)
-          .attr('dominant-baseline', 'middle')
-          .text(d => d);
-
-        gAxesA.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', gridSize / 2)
-          .attr('y', innerHeight + 20)
-          .text('Columns');
-
-        gAxesA.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('transform', `translate(${-40}, ${gridSize / 2}) rotate(-90)`)
-          .text('Rows');
-
-        // Panel B: Delta (Improved − Baseline), row-normalized differences in percentage points
-        const dataB = computeValues('row', matrixB);
-        const diverging = getDivergingColors(13);
-        // Build delta values aligned to A's ordering
-        const mapA = new Map(dataA.data.map(d => [d.r + '-' + d.c, d.value]));
-        const delta = dataB.data.map(d => ({ r: d.r, c: d.c, count: d.count, value: (d.value - (mapA.get(d.r + '-' + d.c) || 0)) }));
-        // Symmetric domain around 0 (in proportions), express later as pp in labels
-        const maxAbsDelta = Math.max(0.01, d3.max(delta, d => Math.abs(d.value)) || 0.01);
-        const colorB = d3.scaleQuantize().domain([-maxAbsDelta / 2, maxAbsDelta]).range(diverging);
-
-        gCellsB.selectAll('rect.cell-bg')
-          .data([0])
-          .join('rect')
-          .attr('class', 'cell-bg')
-          .attr('x', 0)
-          .attr('y', 0)
-          .attr('width', gridSize)
-          .attr('height', gridSize)
-          .attr('fill', 'none')
-          .attr('stroke', 'var(--border-color)')
-          .attr('stroke-width', 1);
-
-        const cellsB = gCellsB.selectAll('g.cell')
-          .data(dataB.data, d => `${d.r}-${d.c}-B`);
-
-        const cellsEnterB = cellsB.enter()
-          .append('g')
-          .attr('class', 'cell');
-
-        cellsEnterB.append('rect')
-          .attr('rx', 2)
-          .attr('ry', 2)
-          .on('mousemove', (event, d) => {
-            const [px, py] = d3.pointer(event, container);
-            const a = dataA.data.find(x => x.r === d.r && x.c === d.c);
-            const b = dataB.data.find(x => x.r === d.r && x.c === d.c);
-            const dv = ((b ? b.value : 0) - (a ? a.value : 0)) * 100;
-            tipInner.innerHTML = `<strong>${classes[d.r]}</strong> → <strong>${classes[d.c]}</strong>` +
-              `<br/>baseline ${(a ? a.value * 100 : 0).toFixed(1)}%` +
-              `<br/>improved ${(b ? b.value * 100 : 0).toFixed(1)}%` +
-              `<br/>delta ${dv.toFixed(1)} pp`;
-            tip.style.transform = `translate(${px + 10}px, ${py + 10}px)`;
-            tip.style.opacity = '1';
-          })
-          .on('mouseleave', () => {
-            tip.style.opacity = '0';
-          });
-
-        cellsEnterB.append('text')
-          .attr('class', 'cell-text')
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'middle');
-
-        const cellsMergedB = cellsEnterB.merge(cellsB);
-
-        cellsMergedB.select('rect')
-          .attr('x', d => x(d.c))
-          .attr('y', d => y(d.r))
-          .attr('width', Math.max(1, x.bandwidth()))
-          .attr('height', Math.max(1, y.bandwidth()))
-          .attr('fill', d => colorB(delta.find(x => x.r === d.r && x.c === d.c).value));
-
-        cellsMergedB.select('text')
-          .attr('x', d => x(d.c) + x.bandwidth() / 2)
-          .attr('y', d => y(d.r) + y.bandwidth() / 2)
-          .text(d => {
-            const dv = delta.find(x => x.r === d.r && x.c === d.c).value; return `${Math.round(dv * 100)}`;
-          })
-          .style('fill', function (d) {
-            try {
-              const rect = this && this.parentNode ? this.parentNode.querySelector('rect') : null;
-              const dv = delta.find(x => x.r === d.r && x.c === d.c).value;
-              const bg = rect ? getComputedStyle(rect).fill : colorB(dv);
-              return chooseFixedReadableTextOnBg(bg);
-            } catch (_) {
-              return '#0e1116';
-            }
-          });
-
-        cellsB.exit().remove();
-
-        gAxesB.selectAll('*').remove();
-
-        gAxesB.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', (_, i) => x(i) + x.bandwidth() / 2)
-          .attr('y', -8)
-          .text(d => d);
-
-        gAxesB.append('g')
-          .selectAll('text')
-          .data(classes)
-          .join('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'end')
-          .attr('x', -8)
-          .attr('y', (_, i) => y(i) + y.bandwidth() / 2)
-          .attr('dominant-baseline', 'middle')
-          .text(d => d);
-
-        gAxesB.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('x', gridSize / 2)
-          .attr('y', innerHeight + 20)
-          .text('Columns');
-
-        gAxesB.append('text')
-          .attr('class', 'axis-label')
-          .attr('text-anchor', 'middle')
-          .attr('transform', `translate(${-40}, ${gridSize / 2}) rotate(-90)`)
-          .text('Rows');
-      }
-
-      // Initial render + resize handling
-      render();
-      const rerender = () => render();
-      if (window.ResizeObserver) {
-        const ro = new ResizeObserver(() => rerender());
-        ro.observe(container);
-      } else {
-        window.addEventListener('resize', rerender);
-      }
-    };
-
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-    } else {
-      ensureD3(bootstrap);
-    }
-  })();
-</script>

app/src/content/embeds/d3-scatter.html

@@ -1,300 +0,0 @@
-<div class="d3-scatter"  ></div>
-<style>
-  /* Frameless: no controls, no axes, only dots */
-  .d3-scatter svg { display: block; }
-  /* Tooltip refined styling (align with filters-quad) */
-  .d3-scatter .d3-tooltip {
-    z-index: 20;
-    backdrop-filter: saturate(1.12) blur(8px);
-  }
-  .d3-scatter .d3-tooltip__inner {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 200px;
-  }
-  .d3-scatter .d3-tooltip__inner > div:first-child {
-    font-weight: 800;
-    letter-spacing: 0.1px;
-    margin-bottom: 0;
-  }
-  .d3-scatter .d3-tooltip__inner > div:nth-child(2) {
-    font-size: 11px;
-    color: var(--muted-color);
-    display: block;
-    margin-top: -4px;
-    margin-bottom: 2px;
-    letter-spacing: 0.1px;
-  }
-  .d3-scatter .d3-tooltip__inner > div:nth-child(n+3) {
-    padding-top: 6px;
-    border-top: 1px solid var(--border-color);
-  }
-</style>
-<script>
-  (() => {
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let s = document.getElementById('d3-cdn-script');
-      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
-      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true });
-      if (window.d3) onReady();
-    };
-
-    const bootstrap = () => {
-      const scriptEl = document.currentScript;
-      let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-scatter'))){
-        const cs = Array.from(document.querySelectorAll('.d3-scatter')).filter(el => !(el.dataset && el.dataset.mounted==='true'));
-        container = cs[cs.length-1] || null;
-      }
-      if (!container) return;
-      if (container.dataset){ if (container.dataset.mounted==='true') return; container.dataset.mounted='true'; }
-
-      // Tooltip
-      container.style.position = container.style.position || 'relative';
-      let tip = container.querySelector('.d3-tooltip'); let tipInner;
-      if (!tip) {
-        tip = document.createElement('div'); tip.className = 'd3-tooltip';
-        Object.assign(tip.style, { position:'absolute', top:'0px', left:'0px', transform:'translate(-9999px, -9999px)', pointerEvents:'none', padding:'10px 12px', borderRadius:'12px', fontSize:'12px', lineHeight:'1.35', border:'1px solid var(--border-color)', background:'var(--surface-bg)', color:'var(--text-color)', boxShadow:'0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity:'0', transition:'opacity .12s ease', backdropFilter:'saturate(1.12) blur(8px)' });
-        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign='left'; tip.appendChild(tipInner); container.appendChild(tip);
-      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
-
-      // SVG
-      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block');
-      const gRoot = svg.append('g');
-      const gGrid = gRoot.append('g').attr('class','grid');
-      const gAxes = gRoot.append('g').attr('class','axes');
-      const gDots = gRoot.append('g').attr('class','dots');
-      const gCentroids = gRoot.append('g').attr('class','centroids');
-      const gLegend = gRoot.append('foreignObject').attr('class','legend');
-
-      // State & scales
-      let width=800, height=360; const margin = { top: 8, right: 12, bottom: 8, left: 12 };
-      const x = d3.scaleLinear();
-      const y = d3.scaleLinear();
-      const color = d3.scaleOrdinal();
-      const radius = () => 4;
-      let isDarkMode = false;
-      function getDotStrokeColor(fillColor = null){ 
-        if (!fillColor) return 'var(--muted-color)';
-        
-        // Resolve CSS variables to actual colors
-        let resolvedColor = fillColor;
-        if (fillColor.startsWith('var(')) {
-          const tempEl = document.createElement('div');
-          tempEl.style.color = fillColor;
-          document.body.appendChild(tempEl);
-          resolvedColor = getComputedStyle(tempEl).color;
-          document.body.removeChild(tempEl);
-        }
-        
-        try {
-          const colorObj = d3.color(resolvedColor);
-          if (!colorObj) return 'var(--muted-color)';
-          
-          // En mode light: bordure plus claire, en mode dark: bordure plus sombre
-          return isDarkMode ? 
-            colorObj.darker(0.3).toString() : 
-            colorObj.brighter(0.8).toString();
-        } catch {
-          return 'var(--muted-color)';
-        }
-      }
-
-      // Data loading (real): banner visualization positions by category
-      async function fetchFirstAvailable(paths){
-        for (const p of paths){
-          try {
-            const res = await fetch(p, { cache: 'no-cache' });
-            if (res.ok){ return await res.text(); }
-          } catch (e) {}
-        }
-        throw new Error('Failed to load data from provided paths');
-      }
-
-      let data = [];
-      let categories = [];
-      let colorMode = 'group';
-
-      function renderLegend(innerWidth){ gLegend.remove(); }
-
-      function updateScales(data){
-        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-        isDarkMode = !!isDark;
-        const axisColor = "var(--page-bg)";
-        const tickColor = "var(--page-bg)";
-        const gridColor = "var(--page-bg)";
-
-        width = container.clientWidth || 800; height = Math.max(260, Math.round(width/3)); svg.attr('width', width).attr('height', height);
-        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
-
-        const xExtent = d3.extent(data, d=>d.x);
-        const yExtent = d3.extent(data, d=>d.y);
-        x.domain([xExtent[0], xExtent[1]]).range([0, innerWidth]).nice();
-        y.domain([yExtent[0], yExtent[1]]).range([innerHeight, 0]).nice();
-
-        // Frameless: no grid, no axes
-        gGrid.selectAll('*').remove();
-        gAxes.selectAll('*').remove();
-
-        renderLegend(innerWidth);
-
-        return { innerWidth, innerHeight };
-      }
-
-      function refreshPalette(){
-        try {
-          const cats = categories && categories.length ? categories.length : 6;
-          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-            const arr = window.ColorPalettes.getColors('categorical', cats) || [];
-            if (arr && arr.length) { color.range(arr); return; }
-          }
-          // fallback
-          color.range((d3.schemeTableau10 ? d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab']).slice(0, cats));
-        } catch {
-          const cats = categories && categories.length ? categories.length : 6;
-          color.range((d3.schemeTableau10 ? d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab']).slice(0, cats));
-        }
-        // Recolor existing marks/labels after palette changes
-        try { if (data && data.length) draw(); } catch {}
-      }
-
-      function draw(){
-        if (!data || !data.length) return;
-        const { innerWidth, innerHeight } = updateScales(data);
-        const fillFor = d => colorMode === 'group' ? color(d.group) : 'var(--primary-color)';
-
-        const dots = gDots.selectAll('circle.dot').data(data, (d,i)=>d.id || i);
-        dots.enter().append('circle').attr('class','dot')
-          .attr('cx', d=>x(d.x)).attr('cy', d=>y(d.y)).attr('r', radius())
-          .attr('fill', fillFor).attr('fill-opacity', 0.85)
-          .attr('stroke', d => getDotStrokeColor(fillFor(d))).attr('stroke-width', '0.75px')
-          .on('mouseenter', function(ev, d){
-            d3.select(this).style('stroke','var(--text-color)').style('stroke-width','1.5px').attr('fill-opacity', 1);
-            const swatch = `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="5" fill="${fillFor(d)}" /></svg>`;
-            tipInner.innerHTML = `
-              <div><strong>${d.label || 'Item'}</strong></div>
-              <div style="display:flex;align-items:center;gap:6px;">${swatch}<span>${d.group}</span></div>
-              <div style="display:flex;align-items:center;gap:6px;white-space:nowrap;"><strong>x</strong><span style="margin-left:auto;text-align:right;">${d.x.toFixed(2)}</span></div>
-              <div style="display:flex;align-items:center;gap:6px;white-space:nowrap;"><strong>y</strong><span style="margin-left:auto;text-align:right;">${d.y.toFixed(2)}</span></div>`;
-            tip.style.opacity = '1';
-          })
-          .on('mousemove', function(ev){ const [mx, my] = d3.pointer(ev, container); const ox=12, oy=12; tip.style.transform = `translate(${Math.round(mx+ox)}px, ${Math.round(my+oy)}px)`; })
-          .on('mouseleave', function(ev, d){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; d3.select(this).style('stroke', getDotStrokeColor(fillFor(d))).style('stroke-width','0.75px').attr('fill-opacity', 0.85); })
-          .merge(dots)
-          .transition().duration(180)
-          .attr('cx', d=>x(d.x)).attr('cy', d=>y(d.y)).attr('r', radius())
-          .attr('fill', fillFor).attr('fill-opacity', 0.85)
-          .attr('stroke', d => getDotStrokeColor(fillFor(d))).attr('stroke-width','0.75px');
-        dots.exit().remove();
-
-        // Compute centroids per category
-        const centroids = Array.from(
-          d3.rollup(
-            data,
-            (v) => ({
-              category: v[0] ? v[0].group : 'Unknown',
-              x: d3.mean(v, (d) => d.x),
-              y: d3.mean(v, (d) => d.y),
-              count: v.length
-            }),
-            (d) => d.group
-          ).values()
-        );
-
-        // Map to pixel space nodes for collision-avoiding label placement
-        const nodes = centroids.map((c) => ({
-          category: c.category,
-          count: c.count,
-          targetX: x(c.x),
-          targetY: y(c.y),
-          x: x(c.x),
-          y: y(c.y),
-          width: Math.max(18, (String(c.category || '').length || 6) * 11),
-          height: 16
-        }));
-
-        if (nodes.length > 1) {
-          const sim = d3.forceSimulation(nodes)
-            .force('x', d3.forceX((d) => d.targetX).strength(0.9))
-            .force('y', d3.forceY((d) => d.targetY).strength(0.9))
-            .force('collide', d3.forceCollide((d) => Math.hypot(d.width/2, d.height/2) + 15))
-            .stop();
-          for (let i = 0; i < 650; i++) sim.tick();
-          const maxOffset = 45;
-          nodes.forEach((n) => {
-            const dx = n.x - n.targetX, dy = n.y - n.targetY; const dist = Math.hypot(dx, dy);
-            if (dist > maxOffset && dist > 0) { const s = maxOffset / dist; n.x = n.targetX + dx * s; n.y = n.targetY + dy * s; }
-          });
-        }
-
-        const labels = gCentroids.selectAll('g.centroid').data(nodes, d => d.category || 'Unknown');
-        const enter = labels.enter().append('g').attr('class','centroid').attr('pointer-events','none');
-        enter.append('text').attr('class','label-bg').attr('text-anchor','middle').attr('dominant-baseline','middle');
-        enter.append('text').attr('class','label-fg').attr('text-anchor','middle').attr('dominant-baseline','middle');
-        const merged = enter.merge(labels);
-        merged
-          .attr('transform', d => `translate(${Math.round(d.x)}, ${Math.round(d.y)})`)
-          .each(function(d){
-            const base = color(d.category || 'Unknown') || 'var(--text-color)';
-            const bg = getComputedStyle(document.documentElement).getPropertyValue('--page-bg').trim() || '#fff';
-            const bgNode = this.querySelector('text.label-bg');
-            const fgNode = this.querySelector('text.label-fg');
-            if (bgNode) {
-              bgNode.textContent = d.category;
-              bgNode.style.setProperty('fill', "var(--page-bg)", 'important');
-              bgNode.style.setProperty('stroke', "var(--page-bg)");
-              bgNode.style.setProperty('stroke-width', '8px');
-              bgNode.style.setProperty('paint-order', 'stroke fill');
-              bgNode.style.setProperty('font-weight','800');
-              bgNode.style.setProperty('font-size','16px');
-            }
-            if (fgNode) {
-              fgNode.textContent = d.category;
-              fgNode.style.setProperty('fill', base, 'important');
-              fgNode.style.setProperty('font-weight','800');
-              fgNode.style.setProperty('font-size','16px');
-            }
-          });
-        labels.exit().remove();
-      }
-
-      // Initial load
-      refreshPalette();
-      document.addEventListener('palettes:updated', refreshPalette);
-
-      (async () => {
-        try {
-          const csvText = await fetchFirstAvailable([
-            '/data/banner_visualisation_data.csv',
-            './assets/data/banner_visualisation_data.csv',
-            '../assets/data/banner_visualisation_data.csv',
-            '/data/banner_visualisation_data.csv'
-          ]);
-          const rows = d3.csvParse(csvText);
-          data = rows.map((r, i) => ({
-            id: +r.original_id ?? i,
-            x: +r.x_position,
-            y: +r.y_position,
-            group: r.category || 'Unknown',
-            label: r.subset || r.category || `Item ${i+1}`
-          })).filter(d => Number.isFinite(d.x) && Number.isFinite(d.y));
-          categories = Array.from(new Set(data.map(d=>d.group)));
-          color.domain(categories);
-          draw();
-        } catch (e) {
-          const pre = document.createElement('pre'); pre.style.color = 'crimson'; pre.textContent = 'Failed to load scatter data.'; container.appendChild(pre);
-        }
-      })();
-
-      const rerender = () => { draw(); };
-      if (window.ResizeObserver) { const ro = new ResizeObserver(()=>rerender()); ro.observe(container); } else { window.addEventListener('resize', rerender); }
-    };
-
-    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
-  })();
-</script>
-
-

app/src/content/embeds/rope-demo.html

@@ -1,532 +0,0 @@
-<div class="d3-rope-demo"></div>
-
-<style>
-  .d3-rope-demo {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.5;
-    color: var(--text-color);
-    padding: 20px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .d3-rope-demo .subtitle {
-    color: var(--text-color);
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 20px;
-    text-align: center;
-    max-width: 600px;
-    line-height: 1.5;
-  }
-  
-  .d3-rope-demo .sentence {
-    display: flex;
-    gap: 0;
-    margin: 25px 0;
-    flex-wrap: wrap;
-    justify-content: center;
-    font-size: 18px;
-  }
-  
-  .d3-rope-demo .slider-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 15px 0;
-  }
-  
-  .d3-rope-demo .slider-label {
-    font-size: 14px;
-    color: var(--muted-color);
-    font-weight: 500;
-    min-width: 80px;
-  }
-  
-  .d3-rope-demo .slider {
-    width: 200px;
-    height: 6px;
-    border-radius: 3px;
-    background: var(--border-color);
-    outline: none;
-    cursor: pointer;
-  }
-  
-  .d3-rope-demo .slider::-webkit-slider-thumb {
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: var(--primary-color);
-    cursor: pointer;
-    border: 2px solid var(--page-bg);
-    box-shadow: 0 2px 4px var(--border-color);
-  }
-  
-  .d3-rope-demo .slider::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: var(--primary-color);
-    cursor: pointer;
-    border: 2px solid var(--page-bg);
-    box-shadow: 0 2px 4px var(--border-color);
-  }
-  
-  .d3-rope-demo .slider-value {
-    font-size: 14px;
-    color: var(--text-color);
-    font-weight: 600;
-    min-width: 40px;
-    text-align: center;
-  }
-  
-  .d3-rope-demo .rotation-info {
-    text-align: center;
-    margin: 20px auto;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text-color);
-    padding: 20px;
-    background: var(--page-bg);
-    border-radius: 8px;
-    border: 1px solid var(--border-color) !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    max-width: 500px;
-  }
-  
-  .d3-rope-demo .equation-gap {
-    height: 15px;
-  }
-  
-  .d3-rope-demo .word-highlight {
-    color: var(--primary-color);
-    font-weight: 700;
-    background: var(--page-bg);
-    padding: 2px 6px;
-    border-radius: 4px;
-    border: 1px solid var(--border-color);
-    display: inline-block;
-    min-width: 60px;
-    text-align: center;
-  }
-  
-  .d3-rope-demo .position-highlight {
-    color: var(--primary-color);
-    font-weight: 700;
-    background: var(--page-bg);
-    padding: 2px 6px;
-    border-radius: 4px;
-    border: 1px solid var(--border-color);
-  }
-  
-  .d3-rope-demo .angle-highlight {
-    color: var(--primary-color);
-    font-weight: 600;
-    font-family: 'Courier New', monospace;
-    font-size: 20px;
-    padding: 12px 16px;
-    border-radius: 6px;
-    background: var(--page-bg);
-    border: 1px solid var(--border-color);
-    display: inline-block;
-    width: 100%;
-    text-align: center;
-  }
-  
-  .d3-rope-demo .word {
-    cursor: pointer;
-    font-weight: 700;
-    font-size: 18px;
-    user-select: none;
-    padding: 8px 12px;
-    border-radius: 0;
-    transition: all 0.2s ease;
-    border: 1px solid var(--border-color);
-    border-right: none;
-  }
-  
-  .d3-rope-demo .word:first-child {
-    border-radius: 6px 0 0 6px;
-  }
-  
-  .d3-rope-demo .word:last-child {
-    border-radius: 0 6px 6px 0;
-    border-right: 1px solid var(--border-color);
-  }
-  
-  .d3-rope-demo .word:only-child {
-    border-radius: 6px;
-    border-right: 1px solid var(--border-color);
-  }
-
-
-  .button {
-    background: var(--primary-color)!important;
-    color: var(--page-bg)!important;
-    border: 1px solid var(--primary-color)!important;
-  }
-  
-  .button--ghost {
-    background: var(--page-bg)!important;
-    color: var(--primary-color)!important;
-    border: 1px solid var(--primary-color)!important;
-  }
-
-  .d3-rope-demo .svg-container {
-    margin: 0;
-    display: inline-block;
-  }
-  
-  .d3-rope-demo svg {
-    display: block;
-  }
-  
-  .d3-rope-demo .explanation {
-    max-width: 700px;
-    text-align: center;
-    margin-top: 20px;
-    color: var(--text-color);
-    font-size: 15px;
-    line-height: 1.6;
-  }
-  
-  /* Responsive design */
-  @media (max-width: 768px) {
-    .d3-rope-demo {
-      padding: 16px 0;
-    }
-    
-    .d3-rope-demo .sentence {
-      gap: 10px;
-    }
-    
-    .d3-rope-demo .word {
-      font-size: 16px;
-      padding: 6px 10px;
-    }
-    
-    .d3-rope-demo .svg-container {
-      width: 100%;
-      max-width: 400px;
-    }
-    
-    .d3-rope-demo svg {
-      width: 100%;
-      height: auto;
-    }
-    
-    .d3-rope-demo .explanation {
-      font-size: 14px;
-    }
-  }
-</style>
-
-<script>
-  (() => {
-    const bootstrap = () => {
-      const scriptEl = document.currentScript;
-      let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-rope-demo'))) {
-        const candidates = Array.from(document.querySelectorAll('.d3-rope-demo'))
-          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
-        container = candidates[candidates.length - 1] || null;
-      }
-      if (!container) return;
-      if (container.dataset) {
-        if (container.dataset.mounted === 'true') return;
-        container.dataset.mounted = 'true';
-      }
-
-      const sentence = ["The", "quick", "brown", "fox", "jumps", "..."];
-
-      // Create the HTML structure
-      container.innerHTML = `
-        <div class="subtitle">RoPE rotation of the first (x₁, x₂) pair in Q/K vectors<br/> based on token position</div>
-        <div class="sentence" id="sentence"></div>
-        <div class="slider-container">
-          <input type="range" class="slider" id="positionSlider" min="0" max="5" step="1" value="0">
-        </div>
-        <div class="svg-container">
-          <svg id="ropeSvg" width="500" height="400" viewBox="0 0 500 400"></svg>
-        </div>
-        
-        <div class="rotation-info" id="rotationInfo">
-          <span class="word-highlight">The</span> at position <span class="position-highlight">0</span> gets rotated by
-          <div class="equation-gap"></div>
-          <span class="angle-highlight">θ = 0 rad (0°)</span>
-        </div>
-        <div class="explanation">
-          <strong>RoPE Formula:</strong> θ (theta) = position × 1 / base<sup>2 × pair_index/h_dim</sup> (pair_index=0 here)
-          <br><br>
-          <strong>Key insight:</strong> The first dimension pair gets the largest rotations, and the relative angle between words depends only on their distance apart.
-        </div>
-      `;
-
-      const svg = container.querySelector('#ropeSvg');
-      const sentenceEl = container.querySelector('#sentence');
-      const slider = container.querySelector('#positionSlider');
-      const rotationInfo = container.querySelector('#rotationInfo');
-
-      const R = 140;
-      const R_LABELS = 180; // Cercle plus grand pour les labels
-      const cx = 250;
-      const cy = 200;
-      const ANGLE_OFFSET = 5; // Offset en degrés pour mieux aligner les 6 mots
-
-      // RoPE parameters
-      const base = 10000;
-      const d = 2048;
-      const m = 0;
-      
-      function getRopeAngle(pos) {
-        return pos * (1 / Math.pow(base, (2 * m) / d));
-      }
-
-      let activeIndex = 0;
-      let animating = true;
-      let animationTimeout = null;
-
-      function renderSentence() {
-        sentenceEl.innerHTML = "";
-        sentence.forEach((word, i) => {
-          const span = document.createElement("span");
-          span.textContent = word;
-          span.className = "word button" + (i === activeIndex ? "" : " button--ghost");
-          span.addEventListener("click", () => {
-            stopAnimation();
-            activeIndex = i;
-            slider.value = i;
-            updateRotationInfo();
-            draw();
-            renderSentence();
-          });
-          sentenceEl.appendChild(span);
-        });
-      }
-
-      function draw() {
-        // Clear SVG
-        svg.innerHTML = '';
-
-        // Create arrays to store elements for proper layering
-        const backgroundElements = [];
-        const foregroundElements = [];
-        const textElements = [];
-
-        // Draw circle (background)
-        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        circle.setAttribute('cx', cx);
-        circle.setAttribute('cy', cy);
-        circle.setAttribute('r', R);
-        circle.setAttribute('fill', 'none');
-        circle.setAttribute('stroke', 'var(--border-color)');
-        circle.setAttribute('stroke-width', '1.5');
-        circle.setAttribute('opacity', '0.6');
-        backgroundElements.push(circle);
-
-        // Draw all word positions
-        sentence.forEach((word, i) => {
-          const theta = getRopeAngle(i) + (ANGLE_OFFSET * Math.PI / 180); // Ajouter l'offset en radians
-          const x = cx + R * Math.cos(theta);
-          const y = cy + R * Math.sin(theta);
-
-          const isActive = (i === activeIndex);
-          const isGhost = i > activeIndex; // Éléments après la position active sont en ghost
-          
-          // Draw point (background)
-          const point = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-          point.setAttribute('cx', x);
-          point.setAttribute('cy', y);
-          point.setAttribute('r', isActive ? 10 : 5);
-          point.setAttribute('fill', isActive ? 'var(--primary-color)' : (isGhost ? 'var(--muted-color)' : 'var(--primary-color)'));
-          point.setAttribute('stroke', isActive ? 'var(--page-bg)' : (isGhost ? 'var(--surface-bg)' : 'var(--page-bg)'));
-          point.setAttribute('stroke-width', isActive ? '3' : '2');
-          point.setAttribute('opacity', isActive ? '1' : (isGhost ? '0.3' : '0.7'));
-          backgroundElements.push(point);
-
-          // Draw arrow for active word (foreground)
-          if (isActive) {
-            const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            arrow.setAttribute('x1', cx);
-            arrow.setAttribute('y1', cy);
-            arrow.setAttribute('x2', x);
-            arrow.setAttribute('y2', y);
-            arrow.setAttribute('stroke', 'var(--primary-color)');
-            arrow.setAttribute('stroke-width', '3');
-            arrow.setAttribute('stroke-linecap', 'round');
-            arrow.setAttribute('opacity', '0.8');
-            foregroundElements.push(arrow);
-          }
-        });
-
-        // Draw center point (foreground)
-        const centerPoint = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        centerPoint.setAttribute('cx', cx);
-        centerPoint.setAttribute('cy', cy);
-        centerPoint.setAttribute('r', 5);
-        centerPoint.setAttribute('fill', 'var(--text-color)');
-        centerPoint.setAttribute('stroke', 'var(--page-bg)');
-        centerPoint.setAttribute('stroke-width', '2');
-        centerPoint.setAttribute('opacity', '0.8');
-        foregroundElements.push(centerPoint);
-
-        // Draw angle arc for active word (foreground)
-        if (activeIndex !== null && activeIndex > 0) {
-          const theta = getRopeAngle(activeIndex) + (ANGLE_OFFSET * Math.PI / 180);
-          const startAngle = ANGLE_OFFSET * Math.PI / 180;
-          const endAngle = theta;
-          
-          // Create arc path
-          const radius = R * 0.7;
-          const startX = cx + radius * Math.cos(startAngle);
-          const startY = cy + radius * Math.sin(startAngle);
-          const endX = cx + radius * Math.cos(endAngle);
-          const endY = cy + radius * Math.sin(endAngle);
-          
-          const largeArcFlag = theta > Math.PI ? 1 : 0;
-          const pathData = `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
-          
-          const arc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-          arc.setAttribute('d', pathData);
-          arc.setAttribute('fill', 'none');
-          arc.setAttribute('stroke', 'var(--primary-color)');
-          arc.setAttribute('stroke-width', '2.5');
-          arc.setAttribute('stroke-dasharray', '6,4');
-          arc.setAttribute('opacity', '0.8');
-          foregroundElements.push(arc);
-        }
-
-        // Draw all text elements (top layer)
-        sentence.forEach((word, i) => {
-          const theta = getRopeAngle(i);
-          const x = cx + R * Math.cos(theta);
-          const y = cy + R * Math.sin(theta);
-
-          const isActive = (i === activeIndex);
-          const isGhost = i > activeIndex; // Éléments après la position active sont en ghost
-          
-          // Draw word label on larger circle
-          const labelX = cx + R_LABELS * Math.cos(theta);
-          const labelY = cy + R_LABELS * Math.sin(theta);
-          const wordLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-          wordLabel.setAttribute('x', labelX);
-          wordLabel.setAttribute('y', labelY);
-          wordLabel.setAttribute('text-anchor', 'middle');
-          wordLabel.setAttribute('dominant-baseline', 'middle');
-          wordLabel.setAttribute('fill', isActive ? 'var(--text-color)' : (isGhost ? 'var(--muted-color)' : 'var(--text-color)'));
-          wordLabel.setAttribute('font-family', '-apple-system, BlinkMacSystemFont, sans-serif');
-          wordLabel.setAttribute('font-size', isActive ? '18' : '15');
-          wordLabel.setAttribute('font-weight', isActive ? '700' : '500');
-          wordLabel.setAttribute('opacity', isActive ? '1' : (isGhost ? '0.3' : '0.8'));
-          wordLabel.textContent = word;
-          textElements.push(wordLabel);
-        });
-
-        // Add angle label (top layer)
-        if (activeIndex !== null && activeIndex > 0) {
-          const theta = getRopeAngle(activeIndex) + (ANGLE_OFFSET * Math.PI / 180);
-          const radius = R * 0.7;
-          const angleLabelX = cx + radius * 0.5 * Math.cos(theta / 2);
-          const angleLabelY = cy + radius * 0.5 * Math.sin(theta / 2);
-          
-          // Create tspan elements for different styling
-          const angleLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-          angleLabel.setAttribute('x', angleLabelX);
-          angleLabel.setAttribute('y', angleLabelY);
-          angleLabel.setAttribute('text-anchor', 'middle');
-          angleLabel.setAttribute('font-family', '-apple-system, BlinkMacSystemFont, sans-serif');
-          angleLabel.setAttribute('font-size', '13');
-          angleLabel.setAttribute('font-weight', '600');
-          
-          // θ in primary color
-          const thetaSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-          thetaSpan.setAttribute('fill', 'var(--primary-color)');
-          thetaSpan.textContent = 'θ';
-          angleLabel.appendChild(thetaSpan);
-          
-          // = with reduced opacity
-          const equalsSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-          equalsSpan.setAttribute('fill', 'var(--primary-color)');
-          equalsSpan.setAttribute('opacity', '0.5');
-          equalsSpan.textContent = ' = ';
-          angleLabel.appendChild(equalsSpan);
-          
-          // Number in primary color
-          const numberSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-          numberSpan.setAttribute('fill', 'var(--primary-color)');
-          numberSpan.textContent = activeIndex.toString();
-          angleLabel.appendChild(numberSpan);
-          
-          textElements.push(angleLabel);
-        }
-
-        // Append elements in correct order: background -> foreground -> text
-        backgroundElements.forEach(el => svg.appendChild(el));
-        foregroundElements.forEach(el => svg.appendChild(el));
-        textElements.forEach(el => svg.appendChild(el));
-      }
-
-      function updateRotationInfo() {
-        const theta = getRopeAngle(activeIndex);
-        const degrees = Math.round(theta * 180 / Math.PI);
-        rotationInfo.innerHTML = `
-          <span class="word-highlight">${sentence[activeIndex]}</span> at position <span class="position-highlight">${activeIndex}</span> gets rotated by
-          <div class="equation-gap"></div>
-          <div class="angle-highlight">
-            <span style="color: var(--muted-color); opacity: 0.6;">θ</span>
-            <span style="color: var(--muted-color); opacity: 0.4; margin: 0 8px;">=</span>
-            <span style="opacity: 1;">${activeIndex}</span>
-            <span style="color: var(--muted-color); opacity: 0.6;">rad</span>
-            <span style="color: var(--muted-color); opacity: 0.4;">(</span>
-            <span style="opacity: 1;">${degrees}°</span>
-            <span style="color: var(--muted-color); opacity: 0.4;">)</span>
-          </div>
-        `;
-      }
-
-      function stopAnimation() {
-        animating = false;
-        if (animationTimeout) {
-          clearTimeout(animationTimeout);
-          animationTimeout = null;
-        }
-      }
-
-      function animate() {
-        if (!animating) return;
-        
-        animationTimeout = setTimeout(() => {
-          activeIndex = (activeIndex + 1) % sentence.length;
-          slider.value = activeIndex;
-          updateRotationInfo();
-          renderSentence();
-          draw();
-          animate();
-        }, 1500);
-      }
-
-      // Slider event listener
-      slider.addEventListener('input', (e) => {
-        stopAnimation();
-        activeIndex = parseInt(e.target.value);
-        updateRotationInfo();
-        renderSentence();
-        draw();
-      });
-
-      // Initialize and start
-      renderSentence();
-      updateRotationInfo();
-      draw();
-      animate();
-    };
-
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
-    } else {
-      bootstrap();
-    }
-  })();
-</script>

app/src/content/embeds/smol-playbook/model-architecture-decision-flowchart.html

@@ -1,490 +0,0 @@
-<!--
-  Model Architecture Decision Flowchart
-  
-  Usage:
-    <HtmlEmbed src="/embeds/model-architecture-decision-flowchart.html" />
--->
-<div class="model-architecture-decision-flowchart"></div>
-<style>
-    .model-architecture-decision-flowchart {
-        width: 100%;
-        min-height: 300px;
-        position: relative;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
-    }
-
-    .model-architecture-decision-flowchart svg {
-        display: block;
-        width: 100%;
-    }
-
-    .model-architecture-decision-flowchart .node-rect {
-        stroke-width: 2.5px;
-        rx: 14px;
-        ry: 14px;
-    }
-
-    .model-architecture-decision-flowchart .node-text {
-        font-size: 18px;
-        font-weight: 600;
-        text-anchor: middle;
-        pointer-events: none;
-        fill: var(--text-color, #333);
-    }
-
-    .model-architecture-decision-flowchart .node-question {
-        fill: oklch(from var(--primary-color) calc(l + 0.4) c h / 0.26);
-        stroke: oklch(from var(--primary-color) calc(l + 0.15) c h / 0.5) !important;
-    }
-
-    .model-architecture-decision-flowchart .node-success {
-        fill: oklch(from var(--success-color) calc(l + 0.4) c h / 0.26);
-        stroke: oklch(from var(--success-color) calc(l + 0.15) c h / 0.5) !important;
-    }
-
-    .model-architecture-decision-flowchart .node-category {
-        fill: oklch(from var(--danger-color) calc(l + 0.4) c h / 0.26);
-        stroke: oklch(from var(--danger-color) calc(l + 0.15) c h / 0.5) !important;
-    }
-
-    .model-architecture-decision-flowchart .node-decision {
-        stroke: var(--border-color, #ddd) !important;
-    }
-
-    /* Dark mode adjustments */
-    [data-theme="dark"] .model-architecture-decision-flowchart .node-question {
-        fill: oklch(from var(--primary-color) calc(l + 0.3) c h / 0.2);
-        stroke: oklch(from var(--primary-color) calc(l + 0.1) c h / 0.6) !important;
-    }
-
-    [data-theme="dark"] .model-architecture-decision-flowchart .node-success {
-        fill: oklch(from var(--success-color) calc(l + 0.3) c h / 0.2);
-        stroke: oklch(from var(--success-color) calc(l + 0.1) c h / 0.6) !important;
-    }
-
-    [data-theme="dark"] .model-architecture-decision-flowchart .node-category {
-        fill: oklch(from var(--danger-color) calc(l + 0.3) c h / 0.2);
-        stroke: oklch(from var(--danger-color) calc(l + 0.1) c h / 0.6) !important;
-    }
-
-    .model-architecture-decision-flowchart .link-path {
-        fill: none;
-        stroke: var(--muted-color, #666);
-        stroke-width: 2.5px;
-        marker-end: url(#arrowhead);
-    }
-
-    .model-architecture-decision-flowchart .link-label {
-        font-size: 14px;
-        font-weight: 700;
-        fill: var(--text-color, #333);
-        text-anchor: middle;
-        pointer-events: none;
-    }
-
-    .model-architecture-decision-flowchart .link-label-bg {
-        fill: var(--page-bg, #ffffff);
-        stroke: none;
-    }
-</style>
-<script>
-    (() => {
-        const ensureD3 = (cb) => {
-            if (window.d3 && typeof window.d3.select === 'function') return cb();
-            let s = document.getElementById('d3-cdn-script');
-            if (!s) {
-                s = document.createElement('script');
-                s.id = 'd3-cdn-script';
-                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
-                document.head.appendChild(s);
-            }
-            const onReady = () => {
-                if (window.d3 && typeof window.d3.select === 'function') cb();
-            };
-            s.addEventListener('load', onReady, { once: true });
-            if (window.d3) onReady();
-        };
-
-        const bootstrap = () => {
-            const scriptEl = document.currentScript;
-            let container = scriptEl ? scriptEl.previousElementSibling : null;
-            if (!(container && container.classList && container.classList.contains('model-architecture-decision-flowchart'))) {
-                const candidates = Array.from(document.querySelectorAll('.model-architecture-decision-flowchart'))
-                    .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
-                container = candidates[candidates.length - 1] || null;
-            }
-            if (!container) return;
-            if (container.dataset) {
-                if (container.dataset.mounted === 'true') return;
-                container.dataset.mounted = 'true';
-            }
-
-            // Define color scheme
-            const getColors = () => {
-                const getCSSVar = (varName, fallback) => {
-                    if (typeof getComputedStyle !== 'undefined') {
-                        const value = getComputedStyle(document.documentElement)
-                            .getPropertyValue(varName);
-                        if (value && value.trim()) {
-                            return value.trim();
-                        }
-                    }
-                    return fallback;
-                };
-
-                return {
-                    question: getCSSVar('--primary-color', '#0084ff'),
-                    decision: getCSSVar('--surface-bg', '#f9f9f9'),
-                    success: getCSSVar('--success-color', '#42d9b3'),
-                    category: getCSSVar('--danger-color', '#e85c42'),
-                    link: getCSSVar('--muted-color', '#666')
-                };
-            };
-
-            // Define the flowchart structure - Model Architecture Decision
-            const nodes = [
-                { id: 'B', label: 'Edge/Phones\nMemory-constrained environments', type: 'decision', x: 180, y: 100 },
-                { id: 'C', label: 'Other\nMore memory available', type: 'decision', x: 620, y: 100 },
-                { id: 'D', label: 'Dense (most cases)\nHybrid or other (for experienced teams)', type: 'success', x: 180, y: 320 },
-                { id: 'E', label: 'What\'s your team\'s expertise?', type: 'question', x: 620, y: 320 },
-                { id: 'F', label: 'First LLM training', type: 'decision', x: 380, y: 540 },
-                { id: 'G', label: 'Experienced\nComfortable with dense', type: 'decision', x: 620, y: 540 },
-                { id: 'H', label: 'Very experienced', type: 'decision', x: 860, y: 540 },
-                { id: 'I', label: 'Dense\n(Focus on basics)', type: 'success', x: 380, y: 760 },
-                { id: 'J', label: 'What\'s your timeline?', type: 'question', x: 620, y: 760 },
-                { id: 'K', label: 'Tight\nProven path required', type: 'decision', x: 480, y: 980 },
-                { id: 'L', label: 'Flexible\nOpen to exploration', type: 'decision', x: 760, y: 980 },
-                { id: 'M', label: 'Dense', type: 'success', x: 480, y: 1200 },
-                { id: 'N', label: 'MoE or MoE + Hybrid:\nbetter perf/compute', type: 'category', x: 760, y: 1200 },
-                { id: 'O', label: 'MoE or MoE + Hybrid:\nbetter perf/compute', type: 'category', x: 860, y: 760 }
-            ];
-
-            const links = [
-                { source: 'B', target: 'D', label: '' },
-                { source: 'C', target: 'E', label: '' },
-                { source: 'E', target: 'F', label: '' },
-                { source: 'E', target: 'G', label: '' },
-                { source: 'E', target: 'H', label: '' },
-                { source: 'F', target: 'I', label: '' },
-                { source: 'G', target: 'J', label: '' },
-                { source: 'J', target: 'K', label: '' },
-                { source: 'J', target: 'L', label: '' },
-                { source: 'K', target: 'M', label: '' },
-                { source: 'L', target: 'N', label: '' },
-                { source: 'H', target: 'O', label: '' }
-            ];
-
-            // Create SVG
-            const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
-            const gRoot = svg.append('g');
-
-            // Define arrowhead marker (solid triangle arrowhead)
-            const defs = svg.append('defs');
-            const marker = defs.append('marker')
-                .attr('id', 'arrowhead')
-                .attr('viewBox', '0 0 10 10')
-                .attr('refX', 2.5)
-                .attr('refY', 5)
-                .attr('markerWidth', 4)
-                .attr('markerHeight', 4)
-                .attr('orient', 'auto');
-
-            // Create solid arrowhead pointing right (smaller)
-            marker.append('path')
-                .attr('d', 'M 0 0 L 8 5 L 0 10 Z')
-                .attr('fill', () => getColors().link);
-
-            let width = 1000, height = 800;
-
-            function render() {
-                width = container.clientWidth || 1000;
-                height = Math.max(800, Math.round(width * 1.3));
-                svg.attr('width', width).attr('height', height);
-
-                const colors = getColors();
-
-                // Calculate scale to fit content (no padding, allow to touch edges)
-                const nodeExtent = {
-                    minX: d3.min(nodes, d => d.x) - 160,
-                    maxX: d3.max(nodes, d => d.x) + 160,
-                    minY: d3.min(nodes, d => d.y) - 40,
-                    maxY: d3.max(nodes, d => d.y) + 80
-                };
-
-                const contentWidth = nodeExtent.maxX - nodeExtent.minX;
-                const contentHeight = nodeExtent.maxY - nodeExtent.minY;
-
-                const scale = Math.min(width / contentWidth, height / contentHeight);
-                const offsetX = (width - contentWidth * scale) / 2 - nodeExtent.minX * scale;
-                const offsetY = (height - contentHeight * scale) / 2 - nodeExtent.minY * scale;
-
-                gRoot.attr('transform', `translate(${offsetX}, ${offsetY}) scale(${scale})`);
-
-                // Create a temporary text element for measuring text width
-                const tempText = gRoot.append('text')
-                    .style('visibility', 'hidden')
-                    .style('font-size', '18px')
-                    .style('font-weight', '500');
-
-                // Word wrap function - intelligently breaks text into lines
-                const wordWrap = (text, maxWidth, fontSize = '18px') => {
-                    const explicitLines = text.split('\n');
-                    const wrappedLines = [];
-
-                    explicitLines.forEach(line => {
-                        if (!line.trim()) {
-                            wrappedLines.push(line);
-                            return;
-                        }
-
-                        tempText.attr('font-size', fontSize).text(line);
-                        const textWidth = tempText.node().getComputedTextLength();
-
-                        // If line fits, keep it as is
-                        if (textWidth <= maxWidth) {
-                            wrappedLines.push(line);
-                            return;
-                        }
-
-                        // Otherwise, break into words and wrap
-                        const words = line.split(/\s+/);
-                        let currentLine = '';
-
-                        words.forEach(word => {
-                            const testLine = currentLine ? `${currentLine} ${word}` : word;
-                            tempText.text(testLine);
-                            const testWidth = tempText.node().getComputedTextLength();
-
-                            if (testWidth <= maxWidth && currentLine) {
-                                currentLine = testLine;
-                            } else {
-                                if (currentLine) {
-                                    wrappedLines.push(currentLine);
-                                }
-                                currentLine = word;
-                            }
-                        });
-
-                        if (currentLine) {
-                            wrappedLines.push(currentLine);
-                        }
-                    });
-
-                    return wrappedLines.filter(line => line.trim().length > 0);
-                };
-
-                // Calculate node dimensions with word wrapping
-                const getNodeDimensions = (node) => {
-                    const maxWidths = {
-                        question: 240,
-                        decision: 250,
-                        success: 240,
-                        category: 260
-                    };
-
-                    const maxWidth = maxWidths[node.type] || 180;
-                    const fontSize = node.type === 'category' ? '19px' : '18px';
-
-                    const wrappedLines = wordWrap(node.label, maxWidth, fontSize);
-                    node.wrappedLines = wrappedLines;
-
-                    tempText.attr('font-size', fontSize);
-                    const lineWidths = wrappedLines.map(line => {
-                        tempText.text(line);
-                        return tempText.node().getComputedTextLength();
-                    });
-                    const maxLineWidth = Math.max(...lineWidths, 0);
-
-                    const padding = 36;
-                    const lineHeight = node.type === 'category' ? 28 : 26;
-
-                    const width = Math.max(120, maxLineWidth + padding);
-                    const height = Math.max(30, wrappedLines.length * lineHeight + padding);
-
-                    return { width, height, wrappedLines };
-                };
-
-                // Pre-calculate all node dimensions with wrapping
-                nodes.forEach(node => {
-                    const dims = getNodeDimensions(node);
-                    node.width = dims.width;
-                    node.height = dims.height;
-                });
-
-                // Draw links first (so labels can be on top)
-                const linkGroup = gRoot.selectAll('.link-group').data(links);
-                const linkEnter = linkGroup.enter().append('g').attr('class', 'link-group');
-
-                linkEnter.append('path').attr('class', 'link-path');
-                linkEnter.append('rect').attr('class', 'link-label-bg').style('opacity', 0);
-                linkEnter.append('text').attr('class', 'link-label').attr('dy', -5);
-
-                const linkMerge = linkEnter.merge(linkGroup);
-
-                linkMerge.select('.link-path')
-                    .attr('d', d => {
-                        const sourceNode = nodes.find(n => n.id === d.source);
-                        const targetNode = nodes.find(n => n.id === d.target);
-
-                        const gap = 12;
-
-                        if (Math.abs(sourceNode.x - targetNode.x) < 50) {
-                            const sx = sourceNode.x;
-                            const sy = sourceNode.y + sourceNode.height / 2 + gap;
-                            const tx = targetNode.x;
-                            const ty = targetNode.y - targetNode.height / 2 - gap;
-                            return `M ${sx} ${sy} L ${tx} ${ty}`;
-                        }
-
-                        let sx, sy, tx, ty;
-
-                        if (Math.abs(sourceNode.y - targetNode.y) < 50) {
-                            const sourceIsLeft = sourceNode.x < targetNode.x;
-                            sx = sourceNode.x + (sourceIsLeft ? sourceNode.width / 2 + gap : -(sourceNode.width / 2 + gap));
-                            sy = sourceNode.y;
-                            tx = targetNode.x + (sourceIsLeft ? -(targetNode.width / 2 + gap) : targetNode.width / 2 + gap);
-                            ty = targetNode.y;
-                        } else {
-                            sx = sourceNode.x;
-                            sy = sourceNode.y + (sourceNode.y < targetNode.y ? sourceNode.height / 2 + gap : -(sourceNode.height / 2 + gap));
-                            tx = targetNode.x;
-                            ty = targetNode.y + (targetNode.y > sourceNode.y ? -(targetNode.height / 2 + gap) : targetNode.height / 2 + gap);
-                        }
-
-                        const midX = (sx + tx) / 2;
-                        const midY = (sy + ty) / 2;
-                        return `M ${sx} ${sy} C ${sx} ${midY}, ${tx} ${midY}, ${tx} ${ty}`;
-                    })
-                    .attr('stroke', colors.link);
-
-                // Draw label backgrounds and text (only for non-empty labels)
-                linkMerge.filter(d => d.label && d.label.trim())
-                    .each(function (d) {
-                        const sourceNode = nodes.find(n => n.id === d.source);
-                        const targetNode = nodes.find(n => n.id === d.target);
-                        const x = (sourceNode.x + targetNode.x) / 2;
-                        const y = (sourceNode.y + targetNode.y) / 2;
-
-                        const labelEl = d3.select(this);
-                        const textEl = labelEl.select('.link-label');
-
-                        tempText.style('font-size', '14px').style('font-weight', '700').text(d.label);
-                        const textWidth = tempText.node().getComputedTextLength();
-                        const textHeight = 20;
-                        const padding = 10;
-
-                        labelEl.select('.link-label-bg')
-                            .attr('x', x - textWidth / 2 - padding)
-                            .attr('y', y - textHeight / 2 - padding / 2)
-                            .attr('width', textWidth + padding * 2)
-                            .attr('height', textHeight + padding)
-                            .style('opacity', 1);
-
-                        textEl
-                            .attr('x', x)
-                            .attr('y', y)
-                            .text(d.label);
-                    });
-
-                linkMerge.filter(d => !d.label || !d.label.trim())
-                    .select('.link-label')
-                    .attr('x', d => {
-                        const sourceNode = nodes.find(n => n.id === d.source);
-                        const targetNode = nodes.find(n => n.id === d.target);
-                        return (sourceNode.x + targetNode.x) / 2;
-                    })
-                    .attr('y', d => {
-                        const sourceNode = nodes.find(n => n.id === d.source);
-                        const targetNode = nodes.find(n => n.id === d.target);
-                        return (sourceNode.y + targetNode.y) / 2;
-                    })
-                    .text('');
-
-                tempText.remove();
-
-                // Draw nodes
-                const nodeGroup = gRoot.selectAll('.node-group').data(nodes);
-                const nodeEnter = nodeGroup.enter().append('g').attr('class', 'node-group');
-
-                nodeEnter.append('rect').attr('class', d => `node-rect node-${d.type}`);
-                nodeEnter.append('text').attr('class', 'node-text');
-
-                const nodeMerge = nodeEnter.merge(nodeGroup);
-
-                nodeMerge.select('.node-rect')
-                    .attr('x', d => d.x - d.width / 2)
-                    .attr('y', d => d.y - d.height / 2)
-                    .attr('width', d => d.width)
-                    .attr('height', d => d.height)
-                    .attr('fill', d => {
-                        switch (d.type) {
-                            case 'question': return 'currentColor';
-                            case 'decision': return colors.decision;
-                            case 'success': return 'currentColor';
-                            case 'category': return 'currentColor';
-                            default: return colors.decision;
-                        }
-                    });
-
-                nodeMerge.select('.node-text')
-                    .attr('x', d => d.x)
-                    .each(function (d) {
-                        const lines = d.wrappedLines || d.label.split('\n');
-                        const textEl = d3.select(this);
-                        textEl.selectAll('tspan').remove();
-
-                        const fontSize = d.type === 'category' ? '19px' : '18px';
-                        const lineHeight = d.type === 'category' ? 28 : 26;
-
-                        textEl.attr('y', d.y);
-
-                        const numLines = lines.length;
-                        const totalTextHeight = (numLines - 1) * lineHeight;
-
-                        lines.forEach((line, i) => {
-                            const offsetFromCenter = (i - (numLines - 1) / 2) * lineHeight;
-
-                            textEl.append('tspan')
-                                .attr('x', d.x)
-                                .attr('dy', i === 0 ? `${offsetFromCenter}px` : `${lineHeight}px`)
-                                .attr('font-size', fontSize)
-                                .attr('text-anchor', 'middle')
-                                .attr('dominant-baseline', 'central')
-                                .text(line);
-                        });
-                    });
-
-                // Update arrowhead color
-                marker.select('path').attr('fill', colors.link);
-            }
-
-            // Initial render + resize handling
-            render();
-            const rerender = () => render();
-            if (window.ResizeObserver) {
-                const ro = new ResizeObserver(() => rerender());
-                ro.observe(container);
-            } else {
-                window.addEventListener('resize', rerender);
-            }
-
-            // Listen for theme changes
-            const observer = new MutationObserver(() => {
-                render();
-            });
-
-            if (document.documentElement) {
-                observer.observe(document.documentElement, {
-                    attributes: true,
-                    attributeFilter: ['data-theme', 'class']
-                });
-            }
-        };
-
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-        } else {
-            ensureD3(bootstrap);
-        }
-    })();
-</script>