update charts

app/scripts/generate-trackio-data.mjs

@@ -0,0 +1,196 @@
+#!/usr/bin/env node
+
+// Generate synthetic Trackio-like CSV data with realistic ML curves.
+// - Steps are simple integers (e.g., 1..N)
+// - Metrics: epoch, train_accuracy, val_accuracy, train_loss, val_loss
+// - W&B-like run names (e.g., pleasant-flower-1)
+// - Deterministic with --seed
+//
+// Usage:
+//   node app/scripts/generate-trackio-data.mjs \
+//     --runs 3 \
+//     --steps 10 \
+//     --out app/src/content/assets/data/trackio_wandb_synth.csv \
+//     [--seed 42] [--epoch-max 3.0] [--amount 1.0] [--start 1]
+//
+// To overwrite the demo file used by the embed:
+//   node app/scripts/generate-trackio-data.mjs --runs 3 --steps 10 --out app/src/content/assets/data/trackio_wandb_demo.csv --seed 1337
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+function parseArgs(argv){
+  const args = { runs: 3, steps: 10, out: '', seed: undefined, epochMax: 3.0, amount: 1, start: 1 };
+  for (let i = 2; i < argv.length; i++){
+    const a = argv[i];
+    if (a === '--runs' && argv[i+1]) { args.runs = Math.max(1, parseInt(argv[++i], 10) || 3); continue; }
+    if (a === '--steps' && argv[i+1]) { args.steps = Math.max(2, parseInt(argv[++i], 10) || 10); continue; }
+    if (a === '--out' && argv[i+1]) { args.out = argv[++i]; continue; }
+    if (a === '--seed' && argv[i+1]) { args.seed = Number(argv[++i]); continue; }
+    if (a === '--epoch-max' && argv[i+1]) { args.epochMax = Number(argv[++i]) || 3.0; continue; }
+    if (a === '--amount' && argv[i+1]) { args.amount = Number(argv[++i]) || 1.0; continue; }
+    if (a === '--start' && argv[i+1]) { args.start = parseInt(argv[++i], 10) || 1; continue; }
+  }
+  if (!args.out) {
+    args.out = path.join('app', 'src', 'content', 'assets', 'data', 'trackio_wandb_synth.csv');
+  }
+  return args;
+}
+
+function mulberry32(seed){
+  let t = seed >>> 0;
+  return function(){
+    t += 0x6D2B79F5;
+    let r = Math.imul(t ^ (t >>> 15), 1 | t);
+    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r);
+    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function makeRng(seed){
+  if (Number.isFinite(seed)) return mulberry32(seed);
+  return Math.random;
+}
+
+function randn(rng){
+  // Box-Muller transform
+  let u = 0, v = 0;
+  while (u === 0) u = rng();
+  while (v === 0) v = rng();
+  return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+}
+
+function clamp(x, lo, hi){
+  return Math.max(lo, Math.min(hi, x));
+}
+
+function logistic(t, k=6, x0=0.5){
+  // 1 / (1 + e^{-k (t - x0)}) in [0,1]
+  return 1 / (1 + Math.exp(-k * (t - x0)));
+}
+
+function expDecay(t, k=3){
+  // (1 - e^{-k t}) in [0,1]
+  return 1 - Math.exp(-k * t);
+}
+
+function pick(array, rng){
+  return array[Math.floor(rng() * array.length) % array.length];
+}
+
+function buildRunNames(count, rng){
+  const adjectives = [
+    'pleasant','brisk','silent','ancient','bold','gentle','rapid','shy','curious','lively',
+    'fearless','soothing','glossy','hidden','misty','bright','calm','keen','noble','swift'
+  ];
+  const nouns = [
+    'flower','glade','sky','river','forest','ember','comet','meadow','harbor','dawn',
+    'mountain','prairie','breeze','valley','lagoon','desert','monsoon','reef','thunder','willow'
+  ];
+  const names = new Set();
+  let attempts = 0;
+  while (names.size < count && attempts < count * 20){
+    attempts++;
+    const left = pick(adjectives, rng);
+    const right = pick(nouns, rng);
+    const idx = 1 + Math.floor(rng() * 9);
+    names.add(`${left}-${right}-${idx}`);
+  }
+  return Array.from(names);
+}
+
+function formatLike(value, decimals){
+  return Number.isFinite(decimals) && decimals >= 0 ? value.toFixed(decimals) : String(value);
+}
+
+async function main(){
+  const args = parseArgs(process.argv);
+  const rng = makeRng(args.seed);
+
+  // Steps: integers from start .. start+steps-1
+  const steps = Array.from({ length: args.steps }, (_, i) => args.start + i);
+  const stepNorm = (i) => (i - steps[0]) / (steps[steps.length-1] - steps[0]);
+
+  const runs = buildRunNames(args.runs, rng);
+
+  // Per-run slight variations
+  const runParams = runs.map((_r, idx) => {
+    const r = rng();
+    // Final accuracies
+    const trainAccFinal = clamp(0.86 + (r - 0.5) * 0.12 * args.amount, 0.78, 0.97);
+    const valAccFinal = clamp(trainAccFinal - (0.02 + rng() * 0.05), 0.70, 0.95);
+    // Loss plateau
+    const lossStart = 7.0 + (rng() - 0.5) * 0.10 * args.amount; // ~7.0 ±0.05
+    const lossPlateau = 6.78 + (rng() - 0.5) * 0.04 * args.amount; // ~6.78 ±0.02
+    const lossK = 2.0 + rng() * 1.5; // decay speed
+    // Acc growth steepness and midpoint
+    const kAcc = 4.5 + rng() * 3.0;
+    const x0Acc = 0.35 + rng() * 0.25;
+    return { trainAccFinal, valAccFinal, lossStart, lossPlateau, lossK, kAcc, x0Acc };
+  });
+
+  const lines = [];
+  lines.push('run,step,metric,value,stderr');
+
+  // EPOCH: linear 0..epochMax across steps
+  for (let r = 0; r < runs.length; r++){
+    const run = runs[r];
+    for (let i = 0; i < steps.length; i++){
+      const t = stepNorm(steps[i]);
+      const epoch = args.epochMax * t;
+      lines.push(`${run},${steps[i]},epoch,${formatLike(epoch, 2)},`);
+    }
+  }
+
+  // TRAIN LOSS & VAL LOSS
+  for (let r = 0; r < runs.length; r++){
+    const run = runs[r];
+    const p = runParams[r];
+    let prevTrain = null;
+    let prevVal = null;
+    for (let i = 0; i < steps.length; i++){
+      const t = stepNorm(steps[i]);
+      const d = expDecay(t, p.lossK); // 0..1
+      let trainLoss = p.lossStart - (p.lossStart - p.lossPlateau) * d;
+      let valLoss = trainLoss + 0.02 + (rng() * 0.03);
+      // Add mild noise
+      trainLoss += randn(rng) * 0.01 * args.amount;
+      valLoss += randn(rng) * 0.012 * args.amount;
+      // Keep reasonable and mostly monotonic (small upward blips allowed)
+      if (prevTrain != null) trainLoss = Math.min(prevTrain + 0.01, trainLoss);
+      if (prevVal != null) valLoss = Math.min(prevVal + 0.012, valLoss);
+      prevTrain = trainLoss; prevVal = valLoss;
+      const stderrTrain = clamp(0.03 - 0.02 * t + Math.abs(randn(rng)) * 0.003, 0.006, 0.04);
+      const stderrVal = clamp(0.035 - 0.022 * t + Math.abs(randn(rng)) * 0.003, 0.008, 0.045);
+      lines.push(`${run},${steps[i]},train_loss,${formatLike(trainLoss, 3)},${formatLike(stderrTrain, 3)}`);
+      lines.push(`${run},${steps[i]},val_loss,${formatLike(valLoss, 3)},${formatLike(stderrVal, 3)}`);
+    }
+  }
+
+  // TRAIN ACCURACY & VAL ACCURACY (logistic)
+  for (let r = 0; r < runs.length; r++){
+    const run = runs[r];
+    const p = runParams[r];
+    for (let i = 0; i < steps.length; i++){
+      const t = stepNorm(steps[i]);
+      const accBase = logistic(t, p.kAcc, p.x0Acc);
+      let trainAcc = clamp(0.55 + accBase * (p.trainAccFinal - 0.55), 0, 1);
+      let valAcc = clamp(0.52 + accBase * (p.valAccFinal - 0.52), 0, 1);
+      // Gentle noise
+      trainAcc = clamp(trainAcc + randn(rng) * 0.005 * args.amount, 0, 1);
+      valAcc = clamp(valAcc + randn(rng) * 0.006 * args.amount, 0, 1);
+      const stderrTrain = clamp(0.02 - 0.011 * t + Math.abs(randn(rng)) * 0.002, 0.006, 0.03);
+      const stderrVal = clamp(0.022 - 0.012 * t + Math.abs(randn(rng)) * 0.002, 0.007, 0.032);
+      lines.push(`${run},${steps[i]},train_accuracy,${formatLike(trainAcc, 4)},${formatLike(stderrTrain, 3)}`);
+      lines.push(`${run},${steps[i]},val_accuracy,${formatLike(valAcc, 4)},${formatLike(stderrVal, 3)}`);
+    }
+  }
+
+  // Ensure directory exists
+  await fs.mkdir(path.dirname(args.out), { recursive: true });
+  await fs.writeFile(args.out, lines.join('\n') + '\n', 'utf8');
+  const relOut = path.relative(process.cwd(), args.out);
+  console.log(`Synthetic CSV generated: ${relOut}`);
+}
+
+main().catch(err => { console.error(err?.stack || String(err)); process.exit(1); });

app/scripts/jitter-trackio-data.mjs

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+
+// Jitter Trackio CSV data with small, controlled noise.
+// - Preserves comments (# ...) and blank lines
+// - Leaves 'epoch' values unchanged
+// - Adds mild noise to train/val accuracy (clamped to [0,1])
+// - Adds mild noise to train/val loss (kept >= 0)
+// - Keeps steps untouched
+// Usage:
+//   node app/scripts/jitter-trackio-data.mjs \
+//     --in app/src/content/assets/data/trackio_wandb_demo.csv \
+//     --out app/src/content/assets/data/trackio_wandb_demo.jitter.csv \
+//     [--seed 42] [--amount 1.0] [--in-place]
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+function parseArgs(argv){
+  const args = { in: '', out: '', seed: undefined, amount: 1, inPlace: false };
+  for (let i = 2; i < argv.length; i++){
+    const a = argv[i];
+    if (a === '--in' && argv[i+1]) { args.in = argv[++i]; continue; }
+    if (a === '--out' && argv[i+1]) { args.out = argv[++i]; continue; }
+    if (a === '--seed' && argv[i+1]) { args.seed = Number(argv[++i]); continue; }
+    if (a === '--amount' && argv[i+1]) { args.amount = Number(argv[++i]) || 3; continue; }
+    if (a === '--in-place') { args.inPlace = true; continue; }
+  }
+  if (!args.in) throw new Error('--in is required');
+  if (args.inPlace) args.out = args.in;
+  if (!args.out) {
+    const { dir, name, ext } = path.parse(args.in);
+    args.out = path.join(dir, `${name}.jitter${ext || '.csv'}`);
+  }
+  return args;
+}
+
+function mulberry32(seed){
+  let t = seed >>> 0;
+  return function(){
+    t += 0x6D2B79F5;
+    let r = Math.imul(t ^ (t >>> 15), 1 | t);
+    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r);
+    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function makeRng(seed){
+  if (Number.isFinite(seed)) return mulberry32(seed);
+  return Math.random;
+}
+
+function randn(rng){
+  // Box-Muller transform
+  let u = 0, v = 0;
+  while (u === 0) u = rng();
+  while (v === 0) v = rng();
+  return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+}
+
+function jitterValue(metric, value, amount, rng){
+  const m = metric.toLowerCase();
+  if (m === 'epoch') return value; // keep as-is
+  if (m.includes('accuracy')){
+    const n = Math.max(-0.02 * amount, Math.min(0.02 * amount, randn(rng) * 0.01 * amount));
+    return Math.max(0, Math.min(1, value + n));
+  }
+  if (m.includes('loss')){
+    const n = Math.max(-0.03 * amount, Math.min(0.03 * amount, randn(rng) * 0.01 * amount));
+    return Math.max(0, value + n);
+  }
+  // default: tiny noise
+  const n = Math.max(-0.01 * amount, Math.min(0.01 * amount, randn(rng) * 0.005 * amount));
+  return value + n;
+}
+
+function formatNumberLike(original, value){
+  const s = String(original);
+  const dot = s.indexOf('.')
+  const decimals = dot >= 0 ? (s.length - dot - 1) : 0;
+  if (!Number.isFinite(value)) return s;
+  if (decimals <= 0) return String(Math.round(value));
+  return value.toFixed(decimals);
+}
+
+async function main(){
+  const args = parseArgs(process.argv);
+  const rng = makeRng(args.seed);
+  const raw = await fs.readFile(args.in, 'utf8');
+  const lines = raw.split(/\r?\n/);
+  const out = new Array(lines.length);
+
+  for (let i = 0; i < lines.length; i++){
+    const line = lines[i];
+    if (!line || line.trim().length === 0) { out[i] = line; continue; }
+    if (/^\s*#/.test(line)) { out[i] = line; continue; }
+
+    // Preserve header line unmodified
+    if (i === 0 && /^\s*run\s*,\s*step\s*,\s*metric\s*,\s*value\s*,\s*stderr\s*$/i.test(line)) {
+      out[i] = line; continue;
+    }
+
+    const cols = line.split(',');
+    if (cols.length < 4) { out[i] = line; continue; }
+
+    const [run, stepStr, metric, valueStr, stderrStr = ''] = cols;
+    const trimmedMetric = (metric || '').trim();
+    const valueNum = Number((valueStr || '').trim());
+
+    if (!Number.isFinite(valueNum)) { out[i] = line; continue; }
+
+    const jittered = jitterValue(trimmedMetric, valueNum, args.amount, rng);
+    const valueOut = formatNumberLike(valueStr, jittered);
+
+    // Reassemble with original column count and positions
+    const result = [run, stepStr, metric, valueOut, stderrStr].join(',');
+    out[i] = result;
+  }
+
+  const finalText = out.join('\n');
+  await fs.writeFile(args.out, finalText, 'utf8');
+  const relIn = path.relative(process.cwd(), args.in);
+  const relOut = path.relative(process.cwd(), args.out);
+  console.log(`Jittered data written: ${relOut} (from ${relIn})`);
+}
+
+main().catch(err => {
+  console.error(err?.stack || String(err));
+  process.exit(1);
+});

app/src/components/Palettes.astro

@@ -0,0 +1,170 @@
+---
+const rootId = `palettes-${Math.random().toString(36).slice(2)}`;
+---
+<div class="palettes" id={rootId} style="width:100%; margin: 10px 0;">
+  <style is:global>
+    .palettes { box-sizing: border-box; }
+    .palettes .palettes__grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 100%; }
+    .palettes .palette-card { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 220px); align-items: stretch; gap: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; min-height: 60px; }
+    .palettes .palette-card__preview { width: 48px; height: 48px; border-radius: 999px; flex: 0 0 auto; background-size: cover; background-position: center; }
+    .palettes .palette-card__copy { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); z-index: 3;  border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
+    .palettes .palette-card__copy svg { width: 18px; height: 18px; fill: currentColor; display: block; color: inherit; }
+    .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 2px; margin: 0; min-height: 60px; }
+    .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; height: auto; border-radius: 0; border: 1px solid var(--border-color); }
+    .palettes .palette-card__swatches .sw:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
+    .palettes .palette-card__swatches .sw:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
+    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; padding-right: 12px; }
+    .palettes .palette-card__preview { width: 48px; height: 48px; border-radius: 999px; position: relative; flex: 0 0 auto; overflow: hidden; }
+    .palettes .palette-card__preview .dot { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 999px; box-shadow: 0 0 0 1px var(--border-color); }
+    .palettes .palette-card__preview .donut-hole { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 999px; background: var(--surface-bg); box-shadow: 0 0 0 1px var(--border-color) inset; }
+    
+    .palettes .palette-card__content__info { display: flex; flex-direction: column; }
+    .palettes .palette-card__title { text-align: left; font-weight: 800; font-size: 15px; }
+    .palettes .palette-card__desc { text-align: left; color: var(--muted-color); line-height: 1.5; font-size: 12px; }
+    
+    .palettes .palettes__select { width: 100%; max-width: 100%; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color); padding: 8px 10px; border-radius: 8px; }
+    .palettes .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
+    .palettes .palettes__controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 14px; }
+    .palettes .palettes__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; max-width: 100%; }
+    .palettes .palettes__label { font-size: 12px; color: var(--muted-color); font-weight: 800; }
+    .palettes .palettes__label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .palettes .ghost-badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--muted-color); background: transparent; font-variant-numeric: tabular-nums; }
+    .palettes .palettes__count { display: flex; align-items: center; gap: 8px; max-width: 100%; }
+    .palettes .palettes__count input[type="range"] { width: 100%; }
+    .palettes .palettes__count output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted-color); }
+    .palettes input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; accent-color: var(--primary-color); }
+    .palettes input[type="range"]:focus { outline: none; }
+    .palettes input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--border-color); border-radius: 999px; }
+    .palettes input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
+    .palettes input[type="range"]::-moz-range-track { height: 6px; background: var(--border-color); border: none; border-radius: 999px; }
+    .palettes input[type="range"]::-moz-range-progress { height: 6px; background: var(--primary-color); border-radius: 999px; }
+    .palettes input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
+    html.cb-grayscale, body.cb-grayscale { filter: grayscale(1) !important; }
+    html.cb-protanopia, body.cb-protanopia { filter: url(#cb-protanopia) !important; }
+    html.cb-deuteranopia, body.cb-deuteranopia { filter: url(#cb-deuteranopia) !important; }
+    html.cb-tritanopia, body.cb-tritanopia { filter: url(#cb-tritanopia) !important; }
+    html.cb-achromatopsia, body.cb-achromatopsia { filter: url(#cb-achromatopsia) !important; }
+    @media (max-width: 1100px) { .palettes .palette-card { grid-template-columns: 1fr; align-items: stretch; gap: 10px; } .palettes .palette-card__swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } .palettes .palette-card__content { border-right: none; padding-right: 0; } .palettes .palette-card__copy { display: none; } }
+  </style>
+  <div class="palettes__controls">
+    <div class="palettes__field">
+      <label class="palettes__label" for="cb-select">Color vision simulation</label>
+      <select id="cb-select" class="palettes__select">
+        <option value="none">Normal color vision — typical for most people</option>
+        <option value="achromatopsia">Achromatopsia — no color at all</option>
+        <option value="protanopia">Protanopia — reduced/absent reds</option>
+        <option value="deuteranopia">Deuteranopia — reduced/absent greens</option>
+        <option value="tritanopia">Tritanopia — reduced/absent blues</option>
+      </select>
+    </div>
+    <div class="palettes__field">
+      <div class="palettes__label-row">
+        <label class="palettes__label" for="color-count">Number of colors</label>
+        <output id="color-count-out" for="color-count" class="ghost-badge">8</output>
+      </div>
+      <div class="palettes__count">
+        <input id="color-count" type="range" min="6" max="10" step="1" value="8" aria-label="Number of colors" />
+      </div>
+    </div>
+  </div>
+  <div class="palettes__grid"></div>
+  <div class="palettes__simu" role="group" aria-labelledby="cb-sim-title">
+    <svg aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute; left:-9999px; overflow:hidden;">
+      <defs>
+        <filter id="cb-protanopia"><feColorMatrix type="matrix" values="0.567 0.433 0     0 0  0.558 0.442 0     0 0  0      0.242 0.758 0 0  0 0 0 1 0"/></filter>
+        <filter id="cb-deuteranopia"><feColorMatrix type="matrix" values="0.625 0.375 0     0 0  0.7   0.3   0     0 0  0      0.3   0.7   0 0  0 0 0 1 0"/></filter>
+        <filter id="cb-tritanopia"><feColorMatrix type="matrix" values="0.95  0.05  0     0 0  0     0.433 0.567 0 0  0     0.475 0.525 0 0  0 0 0 1 0"/></filter>
+        <filter id="cb-achromatopsia"><feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0 0 0 1 0"/></filter>
+      </defs>
+    </svg>
+  </div>
+</div>
+<script type="module" is:inline>
+  import '/src/scripts/color-palettes.js';
+  const ROOT_ID = "{rootId}";
+  (() => {
+    const cards = [
+      { key: 'categorical', title: 'Categorical', desc: 'For <strong>non‑numeric categories</strong>; <strong>visually distinct</strong> colors.' },
+      { key: 'sequential', title: 'Sequential', desc: 'For <strong>numeric scales</strong>; gradient from <strong>dark to light</strong>. Ideal for <strong>heatmaps</strong>.' },
+      { key: 'diverging', title: 'Diverging', desc: 'For numeric scales with negative and positive; Opposing extremes with smooth contrast around a neutral midpoint.' }
+    ];
+    const getPaletteColors = (key, count) => {
+      const total=Number(count)||6;
+      if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') {
+        return window.ColorPalettes.getColors(key,total) || [];
+      }
+      return [];
+    };
+    const render = () => {
+      const root = document.getElementById(ROOT_ID) || document.querySelector('.palettes');
+      if (!root) return;
+      const grid=root.querySelector('.palettes__grid'); if (!grid) return;
+      const input=document.getElementById('color-count'); const total=input ? Number(input.value)||6 : 6;
+      const html = cards.map(c => {
+        const colors=getPaletteColors(c.key,total);
+        const swatches=colors.map(col=>`<div class=\"sw\" style=\"background:${col}\"></div>`).join('');
+        const baseHex = (window.ColorPalettes && typeof window.ColorPalettes.getPrimary==='function') ? window.ColorPalettes.getPrimary() : (colors[0] || '#FF0000');
+        const hueDeg = (()=>{ try { const s=baseHex.replace('#',''); const v=s.length===3?s.split('').map(ch=>ch+ch).join(''):s; const r=parseInt(v.slice(0,2),16)/255, g=parseInt(v.slice(2,4),16)/255, b=parseInt(v.slice(4,6),16)/255; const M=Math.max(r,g,b), m=Math.min(r,g,b), d=M-m; if (d===0) return 0; let h=0; if (M===r) h=((g-b)/d)%6; else if (M===g) h=(b-r)/d+2; else h=(r-g)/d+4; h*=60; if (h<0) h+=360; return h; } catch { return 0; } })();
+        const gradient = c.key==='categorical'
+          ? (() => {
+              const steps = 60; // smooth hue wheel (fixed orientation)
+              const wheel = Array.from({ length: steps }, (_, i) => `hsl(${Math.round((i/steps)*360)}, 100%, 50%)`).join(', ');
+              return `conic-gradient(${wheel})`;
+            })()
+          : (colors.length ? `linear-gradient(90deg, ${colors.join(', ')})` : `linear-gradient(90deg, var(--border-color), var(--border-color))`);
+        const previewInner = (()=>{
+          if (c.key !== 'categorical' || !colors.length) return '';
+          const ring = 18; const cx = 24; const cy = 24; const offset = (hueDeg/360) * 2 * Math.PI;
+          return colors.map((col,i)=>{
+            const angle = offset + (i/colors.length) * 2 * Math.PI;
+            const x = cx + ring * Math.cos(angle);
+            const y = cy + ring * Math.sin(angle);
+            return `<span class=\"dot\" style=\"left:${x-2}px; top:${y-2}px\"></span>`;
+          }).join('');
+        })();
+        const donutHole = (c.key === 'categorical') ? '<span class=\"donut-hole\"></span>' : '';
+        return `
+          <div class="palette-card" data-colors="${colors.join(',')}">
+            <div class="palette-card__content">
+              <div class=\"palette-card__preview\" aria-hidden=\"true\" style=\"background:${gradient}\">${previewInner}${donutHole}</div>
+              <div class="palette-card__content__info">
+                <div class="palette-card__title">${c.title}</div>
+                <div class="palette-card__desc">${c.desc}</div>
+              </div>
+            </div>
+            <div class="palette-card__swatches" style="grid-template-columns: repeat(${colors.length}, minmax(0, 1fr));">${swatches}</div>
+            <button class="palette-card__copy button--ghost" type="button" aria-label="Copy palette">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+            </button>
+          </div>`;
+      }).join('');
+      grid.innerHTML=html;
+    };
+    const MODE_TO_CLASS = { protanopia:'cb-protanopia', deuteranopia:'cb-deuteranopia', tritanopia:'cb-tritanopia', achromatopsia:'cb-achromatopsia' };
+    const CLEAR_CLASSES = Object.values(MODE_TO_CLASS);
+    const clearCbClasses = () => { const rootEl=document.documentElement; CLEAR_CLASSES.forEach(cls=>rootEl.classList.remove(cls)); };
+    const applyCbClass = (mode) => { clearCbClasses(); const cls=MODE_TO_CLASS[mode]; if (cls) document.documentElement.classList.add(cls); };
+    const currentCbMode = () => { const rootEl=document.documentElement; for (const [mode, cls] of Object.entries(MODE_TO_CLASS)) { if (rootEl.classList.contains(cls)) return mode; } return 'none'; };
+    const setupCbSim = () => { const select=document.getElementById('cb-select'); if (!select) return; try { select.value=currentCbMode(); } catch{} select.addEventListener('change', () => applyCbClass(select.value)); };
+    const setupCountControl = () => { const input=document.getElementById('color-count'); const out=document.getElementById('color-count-out'); if (!input) return; const clamp=(n,min,max)=>Math.max(min,Math.min(max,n)); const read=()=>clamp(Number(input.value)||6,6,10); const syncOut=()=>{ if (out) out.textContent=String(read()); }; const onChange=()=>{ syncOut(); render(); }; syncOut(); input.addEventListener('input', onChange); document.addEventListener('palettes:updated', () => { syncOut(); render(); }); };
+    let copyDelegationSetup=false; const setupCopyDelegation = () => { if (copyDelegationSetup) return; const grid=document.querySelector('.palettes .palettes__grid'); if (!grid) return; grid.addEventListener('click', async (e) => { const btn = e.target.closest ? e.target.closest('.palette-card__copy') : null; if (!btn) return; const card = btn.closest('.palette-card'); if (!card) return; const colors=(card.dataset.colors||'').split(',').filter(Boolean); const json=JSON.stringify(colors,null,2); try { await navigator.clipboard.writeText(json); const old=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>'; setTimeout(()=> btn.innerHTML=old, 900); } catch { window.prompt('Copy palette', json); } }); copyDelegationSetup=true; };
+    const bootstrap = () => {
+      setupCbSim();
+      setupCountControl();
+      setupCopyDelegation();
+      // Render immediately
+      render();
+      // Re-render on palette updates
+      document.addEventListener('palettes:updated', render);
+      // Force an immediate notify after listeners are attached (ensures initial render)
+      try {
+        if (window.ColorPalettes && typeof window.ColorPalettes.notify === 'function') window.ColorPalettes.notify();
+        else if (window.ColorPalettes && typeof window.ColorPalettes.refresh === 'function') window.ColorPalettes.refresh();
+      } catch {}
+    };
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', bootstrap, { once: true }); } else { bootstrap(); }
+  })();
+</script>
+
+
+

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c8ae4d27d04319fb18b6b505ac13e4ae96e7bb65e9d42dea6a6b7a69a15c7e5
-size 4742
+oid sha256:582f65833ae2138f8f1b57d7a3a07726278550fb5eed589e2c02b3e7bf84a02d
+size 6244

app/src/content/chapters/vibe-coding-charts.mdx

@@ -73,13 +73,12 @@ They can be found in the `app/src/content/embeds` folder and you can also use th
 ---
 <HtmlEmbed
   src="d3-trackio.html"
-  title="Résultats TrackIO"
+  frameless
 />
 ---
-{/* <HtmlEmbed
+<HtmlEmbed
   src="d3-trackio-oblivion.html"
-  title="Résultats TrackIO"
   frameless
 />
---- */}
+---
 

app/src/content/embeds/d3-trackio-oblivion.html

@@ -13,27 +13,56 @@
   /* Futuristic "Oblivion"-inspired styling */
   .d3-trackio-oblivion { position: relative;
     --cell-gap: 0px;
-     --obl-cyan: #7FF1FF;
-     --obl-cyan-dim: rgba(127,241,255,.25);
-     --obl-accent: #8BF5FF;
-     --obl-bg: rgba(255,255,255,0.06);
-     --obl-border: rgba(127,241,255,.25);
-     --obl-glow: 0 0 0 1px rgba(127,241,255,.35), 0 8px 40px rgba(127,241,255,.12);
-     background: #0f1115;
-     --corner-inset: 6px;
-     --hud-gap: 10px;
-     --hud-corner-size: 8px;
-     /* Chart background gradient as a variable for easy theming */
-     --hud-bg-gradient: radial-gradient(1200px 200px at 20% -10%, rgba(127,241,255,.03), transparent 80%), radial-gradient(900px 200px at 80% 110%, rgba(127,241,255,.03), transparent 80%);
-     /* Tooltip offset (bottom-right of cursor) */
-    --tip-offset-x: 0px;
-    --tip-offset-y: 0px;
-     padding: var(--hud-gap);
-     font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+    /* Default: light/neutral theme */
+    --obl-cyan: #2f343b;
+    --obl-cyan-dim: rgba(47,52,59,.28);
+    --obl-accent: #1a1d21;
+    --obl-bg: rgba(0,0,0,0.04);
+    --obl-border: rgba(47,52,59,.22);
+    --ghost-obl-border: rgba(47,52,59,.06);
+    --obl-glow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 40px rgba(0,0,0,.06);
+    /* Engraved separator colors (light theme) */
+    --engrave-light: rgba(255,255,255,.15);
+    --engrave-dark: rgba(0,0,0,.10);
+    background: transparent;
+    --corner-inset: 6px;
+    --hud-gap: 10px;
+    --hud-corner-size: 8px;
+    /* Chart background gradient as a variable for easy theming */
+    --hud-bg-gradient: radial-gradient(1200px 200px at 20% -10%, rgba(0,0,0,.05), transparent 80%), radial-gradient(900px 200px at 80% 110%, rgba(0,0,0,.05), transparent 80%);
+    /* Tooltip offset (bottom-right of cursor) */
+    --tip-offset-x: 10px;
+    --tip-offset-y: 10px;
+    padding: var(--hud-gap);
+    --z-tooltip: 50;
+    --z-overlay: 99999999;
+    z-index: var(--z-tooltip);
+    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
   .d3-trackio-oblivion * { font-family: inherit;
    }
-  [data-theme="dark"] .d3-trackio-oblivion { --obl-bg: rgba(12,18,22,.45); }
+  /* Dark mode: cyan/Oblivion theme */
+  [data-theme="dark"] .d3-trackio-oblivion {
+    --obl-cyan: #7FF1FF;
+    --obl-cyan-dim: rgba(127,241,255,.25);
+    --obl-accent: #8BF5FF;
+    --obl-bg: rgba(255,255,255,0.06);
+    --obl-border: rgba(127,241,255,.25);
+    --ghost-obl-border: rgba(127,241,255,.02);
+    --obl-glow: 0 0 0 1px rgba(127,241,255,.35), 0 8px 40px rgba(127,241,255,.12);
+    /* Richer cyan gradients for the classic Oblivion blue feel */
+    --hud-bg-gradient:
+      radial-gradient(1400px 260px at 20% -10%, rgba(127,241,255,.065), transparent 80%),
+      radial-gradient(1100px 240px at 80% 110%, rgba(127,241,255,.06), transparent 80%),
+      linear-gradient(180deg, rgba(127,241,255,.035), rgba(127,241,255,0) 45%);
+    /* Engraved separator colors (dark theme) */
+    --engrave-light: rgba(127,241,255,.05);
+    --engrave-dark: rgba(0,0,0,.15);
+    background: #0f1115;
+  }
+  /* Tooltip shadows: neutral by default, bluish tint in dark */
+  .d3-trackio-oblivion .d3-tooltip { box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); }
+  [data-theme="dark"] .d3-trackio-oblivion .d3-tooltip { box-shadow: 0 8px 32px rgba(127,241,255,.05), 0 2px 8px rgba(0,0,0,.10); }
 
   .d3-trackio-oblivion__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: --cell-gap; }
   @media (max-width: 980px) { .d3-trackio-oblivion__grid { grid-template-columns: 1fr; } }
@@ -65,9 +94,14 @@
       linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom right / var(--hud-corner-size) 1px no-repeat,
       linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom right / 1px var(--hud-corner-size) no-repeat; opacity:.85; }
   .d3-trackio-oblivion .cell-inner { position: relative; z-index: 2; padding: var(--hud-corner-size) 12px 10px var(--hud-gap); display:flex; flex-direction:column; }
-  .d3-trackio-oblivion .cell-header { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .d3-trackio-oblivion .cell-header { padding: 10px 6px 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
   .d3-trackio-oblivion .cell-title { position: relative; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--obl-cyan); padding-left: 14px; }
   .d3-trackio-oblivion .cell-title:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width: 6px; height: 6px; background: var(--obl-cyan); border: 1px solid var(--obl-border); box-shadow: 0 0 10px rgba(127,241,255,.25) inset; opacity: .5; }
+  /* Fullscreen button (icon only, no behavior here) */
+  .d3-trackio-oblivion .cell-action { padding: 0 !important; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: transparent; color: var(--obl-cyan); opacity: .7; cursor: pointer; z-index: 4; }
+  .d3-trackio-oblivion .cell-action:hover { opacity: 1; }
+  .d3-trackio-oblivion .cell-action svg { width: 22px; height: 22px; opacity: .2; margin-left: 5px; }
+  .d3-trackio-oblivion .cell-action svg, .d3-trackio-oblivion .cell-action svg path { fill: currentColor; stroke: none; }
   .d3-trackio-oblivion .cell-body { position: relative; width: 100%; overflow: hidden; }
   .d3-trackio-oblivion .cell-body svg { max-width: 100%; height: auto; display: block; }
 
@@ -82,7 +116,7 @@
   .d3-trackio-oblivion__header .legend-bottom .legend-title { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--obl-cyan); text-transform: uppercase; }
   .d3-trackio-oblivion__header .legend-bottom .items { display: flex; flex-wrap: wrap; gap: 8px 14px; }
   .d3-trackio-oblivion__header .legend-bottom .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--obl-cyan); }
-  .d3-trackio-oblivion__header .legend-bottom .swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--obl-border); display: inline-block; box-shadow: 0 0 12px rgba(127,241,255,.18) inset; }
+  .d3-trackio-oblivion__header .legend-bottom .swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--ghost-obl-border); display: inline-block; box-shadow: 0 0 12px rgba(127,241,255,.18) inset; }
 
   /* Hover ghosting */
   .d3-trackio-oblivion.hovering .lines path.ghost { opacity: .22; }
@@ -98,12 +132,12 @@
     transform: translate(-9999px, -9999px);
     pointer-events: none;
     padding: 10px 12px;
-    border-radius: 0;
+    border-radius: 8px;
     font-size: 12px;
     line-height: 1.35;
     background: var(--obl-bg);
     color: var(--obl-cyan);
-    box-shadow: 0 8px 32px rgba(127,241,255,.12), 0 2px 8px rgba(0,0,0,.20);
+    box-shadow: 0 8px 32px rgba(127,241,255,.05), 0 2px 8px rgba(0,0,0,.10);
     opacity: .5;
     transition: opacity .12s ease;
     z-index: 1000;
@@ -112,8 +146,10 @@
   .d3-trackio-oblivion .d3-tooltip.is-visible { opacity: 1; }
   .d3-trackio-oblivion .d3-tooltip__inner { display: flex; flex-direction: column; gap: 6px; min-width: 220px; text-align: left; }
   .d3-trackio-oblivion .d3-tooltip__inner > div:first-child { font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--obl-cyan); }
-  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(2) { font-size: 11px; color: var(--obl-cyan); opacity: .8; display: block; margin-top: -4px; margin-bottom: 2px; letter-spacing: 0.06em; }
-  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(n+3) { padding-top: 6px; border-top: 1px solid var(--obl-border); }
+  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(2) { font-size: 11px; color: var(--obl-cyan); opacity: .4; display: block; margin-top: -4px; margin-bottom: 2px; letter-spacing: 0.06em; }
+  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(n+3) { position: relative; padding-top: 10px; margin-top: 6px; }
+  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(n+3)::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background: var(--engrave-dark); }
+  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(n+3)::after { content:""; position:absolute; left:0; right:0; top:1px; height:1px; background: var(--engrave-light); }
   .d3-trackio-oblivion .d3-tooltip__color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--obl-border); box-shadow: 0 0 10px rgba(127,241,255,.2) inset; }
 </style>
 <script>
@@ -146,7 +182,12 @@
       const corners = document.createElement('div'); corners.className = 'cell-corners'; cell.appendChild(corners);
       const inner = document.createElement('div'); inner.className = 'cell-inner'; cell.appendChild(inner);
       const header = document.createElement('div'); header.className = 'cell-header';
-      const title = document.createElement('div'); title.className = 'cell-title'; title.textContent = prettyMetricLabel(titleText); header.appendChild(title); inner.appendChild(header);
+      const title = document.createElement('div'); title.className = 'cell-title'; title.textContent = prettyMetricLabel(titleText); header.appendChild(title);
+      // Fullscreen icon button (no click handler here)
+      const fsBtn = document.createElement('button'); fsBtn.className = 'cell-action cell-action--fullscreen'; fsBtn.type = 'button'; fsBtn.title = 'Fullscreen'; fsBtn.setAttribute('aria-label', 'Open fullscreen');
+      fsBtn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"/></svg>';
+      header.appendChild(fsBtn);
+      inner.appendChild(header);
 
       const body = document.createElement('div'); body.className = 'cell-body'; inner.appendChild(body);
       const svg = d3.select(body).append('svg').attr('width','100%').style('display','block');
@@ -157,6 +198,7 @@
       const gLines = gRoot.append('g').attr('class','lines');
       const gPoints = gRoot.append('g').attr('class','points');
       const gHover = gRoot.append('g').attr('class','hover');
+      const host = cell.closest('.d3-trackio-oblivion');
 
       // Tooltip
       cell.style.position = cell.style.position || 'relative';
@@ -165,10 +207,22 @@
 
       // Layout & scales
       let width = 800, height = 180; const margin = { top: 12, right: 20, bottom: 36, left: 44 };
-      const xScale = d3.scaleLinear(); const yScale = d3.scaleLinear();
-      const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
-
-      function updateLayout(axisLabelY){
+      let xScale = d3.scaleLinear(); const yScale = d3.scaleLinear();
+      const lineGen = d3.line().x(d => xScale(0)).y(d => yScale(d.value));
+
+      // Generic number abbreviation for axis ticks (K/M/B) with up to 2 decimals
+      const formatAbbrev = (value) => {
+        const num = Number(value);
+        if (!Number.isFinite(num)) return String(value);
+        const abs = Math.abs(num);
+        const trim2 = (n) => Number(n).toFixed(2).replace(/\.?0+$/, '');
+        if (abs >= 1e9) return `${trim2(num / 1e9)}B`;
+        if (abs >= 1e6) return `${trim2(num / 1e6)}M`;
+        if (abs >= 1e3) return `${trim2(num / 1e3)}K`;
+        return trim2(num);
+      };
+
+      function updateLayout(axisLabelY, xTicksArg){
         const rect = cell.getBoundingClientRect();
         width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
         height = 180;
@@ -192,13 +246,24 @@
           // dedupe
           return Array.from(new Set(arr));
         };
-        const xTicksForced = makeTicks(xScale, 8);
-        const yTicksForced = makeTicks(yScale, 6);
+        const xTicksForced = (Array.isArray(xTicksArg) && xTicksArg.length)
+          ? Array.from({ length: xTicksArg.length }, (_, i) => i)
+          : makeTicks(xScale, 8);
+        const yCount = Math.max(2, Math.min(6, xTicksForced.length));
+        const yDom = yScale.domain();
+        const yTicksForced = (yCount <= 2)
+          ? [yDom[0], yDom[1]]
+          : Array.from({ length: yCount }, (_, i) => yDom[0] + ((yDom[1] - yDom[0]) * (i / (yCount - 1))));
         gAxes
           .append('g')
           .attr('transform', `translate(0,${innerHeight})`)
           .call(
-            d3.axisBottom(xScale).tickValues(xTicksForced)
+            d3.axisBottom(xScale)
+              .tickValues(xTicksForced)
+              .tickFormat((i) => {
+                const val = (Array.isArray(xTicksArg) && xTicksArg[i] != null ? xTicksArg[i] : i);
+                return formatAbbrev(val);
+              })
           )
           .call((g) => {
             g.selectAll('path, line')
@@ -210,7 +275,7 @@
 
         gAxes
           .append('g')
-          .call(d3.axisLeft(yScale).tickValues(yTicksForced))
+          .call(d3.axisLeft(yScale).tickValues(yTicksForced).tickFormat((v) => formatAbbrev(v)))
           .call((g) => {
             g.selectAll('path, line')
               .attr('stroke', 'var(--obl-cyan-dim)');
@@ -246,12 +311,31 @@
         if (!isFinite(minStep) || !isFinite(maxStep)) return;
         const isAccuracy = /accuracy/i.test(metricKey);
         const axisLabelY = prettyMetricLabel(metricKey);
-        xScale.domain([minStep, maxStep]); if (isAccuracy) yScale.domain([0,1]).nice(); else yScale.domain([minVal, maxVal]).nice();
-        const { innerWidth, innerHeight, xTicksForced, yTicksForced } = updateLayout(axisLabelY);
+        if (isAccuracy) yScale.domain([0,1]).nice(); else yScale.domain([minVal, maxVal]).nice();
+        // Compute unique x steps and build index mapping
+        const rawSteps = [];
+        runs.forEach(r => (metricData[r]||[]).forEach(pt => rawSteps.push(pt.step)));
+        const hoverSteps = Array.from(new Set(rawSteps)).sort((a,b)=>a-b);
+        const stepIndex = new Map(hoverSteps.map((s,i)=>[s,i]));
+        const indices = hoverSteps.map((_, i) => i);
+        // Linear index scale → ticks at edges, equal spacing
+        xScale = d3.scaleLinear().domain([0, Math.max(0, indices.length - 1)]);
+        // Update line generator X accessor to use index directly
+        lineGen.x(d => xScale(stepIndex.get(d.step)));
+        const { innerWidth, innerHeight, xTicksForced, yTicksForced } = updateLayout(axisLabelY, hoverSteps);
 
         // Grid as small dots at intersections of y ticks × step positions
+        // Exclude dots that fall on the origin axes lines (left Y-axis and bottom X-axis)
         const gridPoints = [];
-        xTicksForced.forEach(s => { yTicksForced.forEach(t => { gridPoints.push({ sx: s, ty: t }); }); });
+        const yDomAll = yScale.domain();
+        const yMin = Array.isArray(yDomAll) ? yDomAll[0] : null;
+        xTicksForced.forEach(i => {
+          yTicksForced.forEach(t => {
+            if (i !== 0 && (yMin == null || t !== yMin)) {
+              gridPoints.push({ sx: i, ty: t });
+            }
+          });
+        });
         gGrid.selectAll('circle.grid-dot')
           .data(gridPoints)
           .join('circle')
@@ -275,14 +359,40 @@
         // Points
         const allPts = 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(allPts, d=>`${d.run}-${d.step}`);
-        ptsSel.enter().append('circle').attr('class','pt').attr('r', 2).attr('fill', d=>d.color).attr('fill-opacity', 0.65).attr('stroke','none').attr('cx', d=>xScale(d.step)).attr('cy', d=>yScale(d.value)).merge(ptsSel).transition().duration(150).attr('cx', d=>xScale(d.step)).attr('cy', d=>yScale(d.value));
+        ptsSel.enter().append('circle')
+          .attr('class','pt')
+          .attr('r', 2)
+          .attr('fill', d=>d.color)
+          .attr('stroke','none')
+          .attr('cx', d=> xScale(stepIndex.get(d.step)))
+          .attr('cy', d=>yScale(d.value))
+          .merge(ptsSel)
+          .transition().duration(150)
+          .attr('cx', d=> xScale(stepIndex.get(d.step)))
+          .attr('cy', d=>yScale(d.value));
         ptsSel.exit().remove();
+        // Steps used for hover snapping (unique data steps)
+        // already computed above as hoverSteps
 
         // 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(--obl-cyan)').attr('stroke-opacity', 0.35).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
-        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>${prettyMetricLabel(metricKey)}</div><div>Step ${nearest}</div>`; const entries = series.map(s=>{ const m = new Map(s.values.map(v=>[v.step, v])); const pt = m.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)=> (isAccuracy? (+vv).toFixed(4) : (+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 cssVars = getComputedStyle(cell); const offx = Math.max(0, parseFloat(cssVars.getPropertyValue('--tip-offset-x')) || 0); const offy = Math.max(0, parseFloat(cssVars.getPropertyValue('--tip-offset-y')) || 0); const cellRect = cell.getBoundingClientRect(); const cx = (ev && ev.clientX != null) ? ev.clientX : (cellRect.left + mx); const cy = (ev && ev.clientY != null) ? ev.clientY : (cellRect.top + my); const x = cx - cellRect.left + offx; const y = cy - cellRect.top + offy; tip.classList.add('is-visible'); tip.style.transform=`translate(${x}px, ${y}px)`; 
+        // External hover handlers
+        cell.__showExternalStep = (stepVal) => {
+          if (stepVal == null) { hoverLine.style('display','none'); return; }
+          const idx = stepIndex.get(stepVal);
+          if (idx == null) { hoverLine.style('display','none'); return; }
+          const xpx = xScale(idx);
+          hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
+        };
+        cell.__clearExternalStep = () => { hoverLine.style('display','none'); };
+        if (!cell.__syncAttached && host) {
+          host.addEventListener('trackio-hover-step', (ev) => { const d = ev && ev.detail; if (!d) return; if (cell.__showExternalStep) cell.__showExternalStep(d.step); });
+          host.addEventListener('trackio-hover-clear', () => { if (cell.__clearExternalStep) cell.__clearExternalStep(); });
+          cell.__syncAttached = true;
+        }
+        function onMove(ev){ if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx,my]=d3.pointer(ev, overlay.node()); const idx = Math.round(Math.max(0, Math.min(hoverSteps.length-1, xScale.invert(mx)))); const nearest = hoverSteps[idx]; const xpx = xScale(idx); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-step', { detail: { step: nearest } })); } catch(_){} } let html = `<div>Step ${formatAbbrev(nearest)}</div><div>${prettyMetricLabel(metricKey)}</div>`; const entries = series.map(s=>{ const m = new Map(s.values.map(v=>[v.step, v])); const pt = m.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)=> (isAccuracy? (+vv).toFixed(4) : (+vv).toFixed(4)); entries.forEach(e => { 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)}</span></div>`; }); tipInner.innerHTML = html; const cssVars = getComputedStyle(cell); const offx = Math.max(0, parseFloat(cssVars.getPropertyValue('--tip-offset-x')) || 0); const offy = Math.max(0, parseFloat(cssVars.getPropertyValue('--tip-offset-y')) || 0); const cellRect = cell.getBoundingClientRect(); const cx = (ev && ev.clientX != null) ? ev.clientX : (cellRect.left + mx); const cy = (ev && ev.clientY != null) ? ev.clientY : (cellRect.top + my); const x = cx - cellRect.left + offx; const y = cy - cellRect.top + offy; tip.classList.add('is-visible'); tip.style.transform=`translate(${x}px, ${y}px)`; 
           // Animate points at the hovered step to grow slightly
           try {
             gPoints.selectAll('circle.pt')
@@ -290,7 +400,7 @@
               .attr('r', d => (d && d.step === nearest ? 4 : 2));
           } catch(_) {}
         }
-        function onLeave(){ hideTipTimer = setTimeout(()=>{ tip.classList.remove('is-visible'); tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); try { gPoints.selectAll('circle.pt').transition().duration(150).ease(d3.easeCubicOut).attr('r', 2); } catch(_) {} }, 100); }
+        function onLeave(){ hideTipTimer = setTimeout(()=>{ tip.classList.remove('is-visible'); tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-clear')); } catch(_){} } try { gPoints.selectAll('circle.pt').transition().duration(150).ease(d3.easeCubicOut).attr('r', 2); } catch(_) {} }, 100); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
       }
 
@@ -298,7 +408,7 @@
     }
 
     const bootstrap = () => {
-      const scriptEl = THIS_SCRIPT; let host = null; const header = document.createElement('div'); header.className = 'd3-trackio-oblivion__header'; const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>'; header.appendChild(legend);
+      const scriptEl = THIS_SCRIPT; let host = null; const header = document.createElement('div'); header.className = 'd3-trackio-oblivion__header'; const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Runs</div><div class="items"></div>'; header.appendChild(legend);
       if (scriptEl && scriptEl.parentElement && scriptEl.parentElement.querySelector) host = scriptEl.parentElement.querySelector('.d3-trackio-oblivion'); if (!host) { let sib = scriptEl && scriptEl.previousElementSibling; while (sib && !(sib.classList && sib.classList.contains('d3-trackio-oblivion'))) { sib = sib.previousElementSibling; } host = sib || null; }
       if (!host) { host = document.querySelector('.d3-trackio-oblivion'); }
       if (!host) return; if (host.dataset && host.dataset.mounted==='true') return; if (host.dataset) host.dataset.mounted='true';

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

@@ -9,7 +9,18 @@
   <noscript>JavaScript is required to render this chart.</noscript>
 </div>
 <style>
-  .d3-trackio { position: relative; }
+  .d3-trackio { position: relative; --z-tooltip: 50; --z-overlay: 99999999;
+    /* Softer chart theming (light) */
+    --axis-color: rgba(0,0,0,.28);
+    --tick-color: rgba(0,0,0,.62);
+    --grid-color: rgba(0,0,0,.10);
+  }
+  /* Softer chart theming (dark) */
+  [data-theme="dark"] .d3-trackio {
+    --axis-color: rgba(255,255,255,.28);
+    --tick-color: rgba(255,255,255,.68);
+    --grid-color: rgba(255,255,255,.10);
+  }
   .d3-trackio__grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -30,7 +41,6 @@
   }
   .d3-trackio .cell-header {
     padding: 8px 10px;
-    border-bottom: 1px solid var(--border-color);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -42,6 +52,67 @@
     color: var(--text-color);
     text-transform: none;
   }
+  .d3-trackio .cell-action {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 0;
+    background: transparent;
+    color: var(--text-color);
+    opacity: .8;
+    cursor: pointer;
+  }
+  .d3-trackio .cell-action:hover { opacity: 1; }
+  .d3-trackio .cell-action svg { width: 28px; height: 28px; }
+  .d3-trackio .cell-action svg, .d3-trackio .cell-action svg path { fill: var(--text-color); stroke: none; }
+
+  /* Fullscreen overlay */
+  .d3-trackio__overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,.48);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--z-overlay);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s ease;
+  }
+  .d3-trackio__overlay.is-open { opacity: 1; pointer-events: auto; }
+  .d3-trackio__modal {
+    position: relative;
+    width: min(92vw, 1200px);
+    height: min(92vh, 900px);
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    transform: scale(.96);
+    transition: transform .2s ease;
+  }
+  .d3-trackio__overlay.is-open .d3-trackio__modal { transform: scale(1); }
+  .d3-trackio__modal .cell { width: 100%; height: 100%; }
+  .d3-trackio__modal .cell .cell-body { height: calc(100% - 44px); }
+  /* Conserver le ratio pour éviter les décalages points/ticks lors du zoom */
+  .d3-trackio__modal .cell .cell-body svg { width: 100% !important; height: auto !important; }
+  .d3-trackio__modal .cell .cell-action { display: none; }
+  .d3-trackio__modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
   .d3-trackio .cell-body { position: relative; width: 100%; overflow: hidden; }
   .d3-trackio .cell-body svg { max-width: 100%; height: auto; display: block; }
 
@@ -51,22 +122,24 @@
   .d3-trackio .axes text { fill: var(--tick-color); }
   .d3-trackio .grid line { stroke: var(--grid-color); }
 
-  /* Global header (legend) below the grid for consistency */
+  /* Global header (legend) above the grid and centered */
   .d3-trackio__header {
     display: flex;
     align-items: flex-start;
-    justify-content: flex-start;
+    justify-content: center;
     gap: 12px;
-    margin: 8px 0 0 0;
+    margin: 0 0 10px 0;
     flex-wrap: wrap;
+    width: 100%;
   }
   .d3-trackio__header .legend-bottom {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     gap: 6px;
     font-size: 12px;
     color: var(--text-color);
+    text-align: center;
   }
   .d3-trackio__header .legend-bottom .legend-title { font-size: 12px; font-weight: 700; color: var(--text-color); }
   .d3-trackio__header .legend-bottom .items { display: flex; flex-wrap: wrap; gap: 8px 14px; }
@@ -81,7 +154,7 @@
 
   /* Tooltip styling aligned with other embeds */
   .d3-trackio .d3-tooltip {
-    z-index: 20;
+    z-index: var(--z-tooltip);
     backdrop-filter: saturate(1.12) blur(8px);
   }
   .d3-trackio .d3-tooltip__inner { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
@@ -129,6 +202,8 @@
       const d3 = window.d3;
       const metricKey = cell.getAttribute('data-metric');
       const titleText = cell.getAttribute('data-title') || metricKey;
+      const host = cell.closest('.d3-trackio');
+      const shouldSuppress = () => !!(host && host.dataset && host.dataset.suppressTransitions === '1');
 
       // Header
       const header = document.createElement('div'); header.className = 'cell-header';
@@ -146,6 +221,9 @@
       const gPoints = gRoot.append('g').attr('class','points');
       const gHover = gRoot.append('g').attr('class','hover');
 
+      // Legacy flag, kept for compatibility but computed via shouldSuppress()
+      let suppressTransitions = false;
+
       // Tooltip
       cell.style.position = cell.style.position || 'relative';
       let tip = cell.querySelector('.d3-tooltip'); let tipInner; let hideTipTimer = null;
@@ -160,16 +238,16 @@
       } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
 
       // Layout & scales
-      let width = 800, height = 200; const margin = { top: 12, right: 20, bottom: 36, left: 56 };
+      let width = 800, height = 200; const margin = { top: 10, right: 20, bottom: 46, left: 44 };
       const xScale = d3.scaleLinear();
       const yScale = d3.scaleLinear();
       const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
 
-      function updateLayout(axisLabelY){
+      function updateLayout(axisLabelY, xTicksArg){
         const rect = cell.getBoundingClientRect();
         width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
-        // Hauteur fixe (encore plus basse) pour uniformiser les 5 graphiques
-        height = 200;
+        // Hauteur fixe par défaut, overridable via data-height (pour fullscreen)
+        height = Number(cell.getAttribute('data-height')) || 200;
         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})`);
@@ -183,39 +261,67 @@
 
         // Axes
         gAxes.selectAll('*').remove();
-        let xAxis = d3.axisBottom(xScale).tickSizeOuter(0).ticks(8).tickFormat(formatK);
-        let yAxis = d3.axisLeft(yScale).ticks(6);
-        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
-        gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
-
-        // Axis labels
+        // Ticks: for x, force equal spacing on indices and include edges; for y, equally spaced within domain, count ~ x ticks bounded [2,6]
+        const makeTicks = (scale, approx) => {
+          const arr = scale.ticks(approx);
+          const dom = scale.domain();
+          if (arr.length === 0 || arr[0] !== dom[0]) arr.unshift(dom[0]);
+          if (arr[arr.length - 1] !== dom[dom.length - 1]) arr.push(dom[dom.length - 1]);
+          return Array.from(new Set(arr));
+        };
+        const xTicksForced = (Array.isArray(xTicksArg) && xTicksArg.length)
+          ? Array.from({ length: xTicksArg.length }, (_, i) => i)
+          : makeTicks(xScale, 8);
+        const yCount = Math.max(2, Math.min(6, xTicksForced.length));
+        const yDom = yScale.domain();
+        const yTicksForced = (yCount <= 2)
+          ? [yDom[0], yDom[1]]
+          : Array.from({ length: yCount }, (_, i) => yDom[0] + ((yDom[1] - yDom[0]) * (i / (yCount - 1))));
+        // X axis with forced ticks (indices) and formatted labels mapped to original steps in render()
+        gAxes.append('g')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(
+            d3.axisBottom(xScale)
+              .tickValues(xTicksForced)
+              .tickFormat((i) => {
+                // Label mapping will be provided by caller via closure over xTicksArg
+                const val = (Array.isArray(xTicksArg) && xTicksArg[i] != null ? xTicksArg[i] : i);
+                return formatAbbrev(val);
+              })
+          )
+          .call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
+        // Y axis with forced ticks
+        gAxes.append('g')
+          .call(d3.axisLeft(yScale).tickValues(yTicksForced).tickFormat((v)=>formatAbbrev(v)))
+          .call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
+
+        // Axis labels (only X; Y-label removed to gain space)
         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('y', innerHeight + Math.max(20, Math.min(36, margin.bottom - 12)))
           .attr('fill', 'var(--text-color)')
           .attr('text-anchor', 'middle')
-          .style('font-size', '12px')
-          .style('font-weight', '700')
+          .style('font-size', '8px')
+          .style('opacity', '.5')
+          .style('letter-spacing', '.5px')
+          .style('text-transform', 'uppercase')
+          .style('font-weight', '500')
           .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 || 'Value');
 
-        return { innerWidth, innerHeight };
+        return { innerWidth, innerHeight, xTicksForced, yTicksForced };
       }
 
-      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);
+      // Generic number abbreviation for ticks (K/M/B) with up to 2 decimals
+      const formatAbbrev = (value) => {
+        const num = Number(value);
+        if (!Number.isFinite(num)) return String(value);
+        const abs = Math.abs(num);
+        const trim2 = (n) => Number(n).toFixed(2).replace(/\.?0+$/, '');
+        if (abs >= 1e9) return `${trim2(num / 1e9)}B`;
+        if (abs >= 1e6) return `${trim2(num / 1e6)}M`;
+        if (abs >= 1e3) return `${trim2(num / 1e3)}K`;
+        return trim2(num);
       };
 
       function render(metricData, colorForRun) {
@@ -242,17 +348,21 @@
         runs.forEach(r => { (metricData[r]||[]).forEach(pt => { minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); minVal = Math.min(minVal, pt.value); maxVal = Math.max(maxVal, pt.value); }); });
         const isAccuracy = /accuracy/i.test(metricKey);
         const axisLabelY = prettyMetricLabel(metricKey);
-        xScale.domain([minStep, maxStep]);
         if (isAccuracy) yScale.domain([0, 1]).nice(); else yScale.domain([minVal, maxVal]).nice();
+        // Build unique steps and index mapping for equal spacing and snapping
+        const stepSet = new Set(); runs.forEach(r => (metricData[r]||[]).forEach(v => stepSet.add(v.step)));
+        const hoverSteps = Array.from(stepSet).sort((a,b)=>a-b);
+        const stepIndex = new Map(hoverSteps.map((s,i)=>[s,i]));
+        xScale.domain([0, Math.max(0, hoverSteps.length - 1)]);
+
+        // Update line generator X accessor to use index directly
+        lineGen.x(d => xScale(stepIndex.get(d.step)));
 
-        const { innerWidth, innerHeight } = updateLayout(axisLabelY);
+        const { innerWidth, innerHeight, xTicksForced } = updateLayout(axisLabelY, hoverSteps);
 
-        // Vertical grid lines at each available step (same visibility as horizontal)
-        const stepSetForGrid = new Set();
-        runs.forEach(r => { (metricData[r]||[]).forEach(pt => stepSetForGrid.add(pt.step)); });
-        const stepsForGrid = Array.from(stepSetForGrid).sort((a,b)=>a-b);
+        // Vertical grid lines at each step index (same visibility as horizontal)
         gGrid.selectAll('line.vstep')
-          .data(stepsForGrid)
+          .data(xTicksForced)
           .join(
             enter => enter.append('line').attr('class','vstep')
               .attr('y1', 0).attr('y2', innerHeight)
@@ -264,62 +374,159 @@
             exit => exit.remove()
           );
 
-        // Shaded areas from stderr if available
+        // Remove stderr correction shapes (no uncertainty area)
         gAreas.selectAll('*').remove();
-        runs.forEach(r => {
-          const vals = (metricData[r]||[]).slice().sort((a,b)=>a.step-b.step);
-          const withErr = vals.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', r)
-            .attr('d', pathData)
-            .attr('fill', colorForRun(r))
-            .attr('opacity', 0.15)
-            .attr('stroke', 'none');
-        });
 
         // Lines
         const series = runs.map(r => ({ run: r, color: colorForRun(r), values: (metricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
         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.5).attr('opacity', 0.9)
           .attr('stroke', d=>d.color).attr('d', d=>lineGen(d.values));
-        paths.transition().duration(260).attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=>lineGen(d.values));
+        if (shouldSuppress()) {
+          paths.attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=>lineGen(d.values));
+        } else {
+          paths.transition().duration(260).attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=>lineGen(d.values));
+        }
         paths.exit().remove();
 
         // Points
         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', 2).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))
+          .attr('stroke', 'none').attr('cx', d=>xScale(stepIndex.get(d.step))).attr('cy', d=>yScale(d.value))
           .merge(ptsSel)
-          .transition().duration(150)
-          .attr('cx', d=>xScale(d.step)).attr('cy', d=>yScale(d.value));
+          .each(function(d){ /* placeholder to keep merge chain intact */ })
+          .attr('cx', d=>xScale(stepIndex.get(d.step))).attr('cy', d=>yScale(d.value));
+        if (!shouldSuppress()) {
+          try { gPoints.selectAll('circle.pt').transition().duration(150).attr('cx', d=>xScale(stepIndex.get(d.step))).attr('cy', d=>yScale(d.value)); } catch(_){}
+        }
         ptsSel.exit().remove();
 
         // 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>${prettyMetricLabel(metricKey)}</strong></div><div><strong>step</strong> ${formatK(nearest)}</div>`;
+
+        // Expose external hover handlers for cross-chart sync
+        cell.__showExternalStep = (stepVal) => {
+          if (stepVal == null) { hoverLine.style('display','none'); return; }
+          const idx = stepIndex.get(stepVal);
+          if (idx == null) { hoverLine.style('display','none'); return; }
+          const xpx = xScale(idx);
+          hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
+        };
+        cell.__clearExternalStep = () => { hoverLine.style('display','none'); };
+        if (!cell.__syncAttached && host) {
+          host.addEventListener('trackio-hover-step', (ev) => { const d = ev && ev.detail; if (!d) return; if (cell.__showExternalStep) cell.__showExternalStep(d.step); });
+          host.addEventListener('trackio-hover-clear', () => { if (cell.__clearExternalStep) cell.__clearExternalStep(); });
+          cell.__syncAttached = true;
+        }
+        function onMove(ev){ if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx,my]=d3.pointer(ev, overlay.node()); const idx = Math.round(Math.max(0, Math.min(hoverSteps.length-1, xScale.invert(mx)))); const nearest = hoverSteps[idx]; const xpx = xScale(idx); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-step', { detail: { step: nearest } })); } catch(_){} }
+          let html = `<div><strong>step</strong> ${formatAbbrev(nearest)}</div><div><strong>${prettyMetricLabel(metricKey)}</strong></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)=> (isAccuracy? (+vv).toFixed(4) : (+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>`;
+            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)}</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); }
+          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)`;
+          // No animation on chart while scaling up/down
+          try {
+            const sel = gPoints.selectAll('circle.pt');
+            if (shouldSuppress()) { sel.interrupt().attr('r', d => (d && d.step === nearest ? 4 : 2)); }
+            else { sel.transition().duration(140).ease(d3.easeCubicOut).attr('r', d => (d && d.step === nearest ? 4 : 2)); }
+          } catch(_) {}
+        }
+        function onLeave(){ hideTipTimer = setTimeout(()=>{ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-clear')); } catch(_){} } try { const sel = gPoints.selectAll('circle.pt'); if (shouldSuppress()) { sel.interrupt().attr('r', 2); } else { sel.transition().duration(150).ease(d3.easeCubicOut).attr('r', 2); } } catch(_) {} }, 100); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
       }
 
+      // Fullscreen: button + modal behavior
+      const fsBtn = document.createElement('button'); fsBtn.className = 'cell-action cell-action--fullscreen'; fsBtn.type = 'button'; fsBtn.title='Fullscreen'; fsBtn.setAttribute('aria-label','Open fullscreen');
+      fsBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"/></svg>';
+      header.appendChild(fsBtn);
+
+      function ensureOverlay(host){
+        let overlay = host.querySelector('.d3-trackio__overlay');
+        if (!overlay) {
+          overlay = document.createElement('div'); overlay.className='d3-trackio__overlay';
+          const modal = document.createElement('div'); modal.className='d3-trackio__modal';
+          const close = document.createElement('button'); close.className='d3-trackio__modal-close'; close.type='button'; close.innerHTML='&#10005;';
+          overlay.appendChild(modal); overlay.appendChild(close);
+          host.appendChild(overlay);
+          overlay.addEventListener('click', (e)=>{ if (e.target === overlay) close.click(); });
+          close.addEventListener('click', ()=>{
+            const moving = modal.querySelector('.cell'); if (!moving) { overlay.classList.remove('is-open'); return; }
+            const placeholder = moving.__placeholder;
+            if (!placeholder) { overlay.classList.remove('is-open'); return; }
+            // Global suppression across charts inside this host
+            host.dataset.suppressTransitions = '1';
+            // Cancel any in-flight D3 transitions
+            try { d3.select(host).selectAll('path.run-line').interrupt(); d3.select(host).selectAll('circle.pt').interrupt(); } catch(_){ }
+            // FLIP: animate from current (modal) to placeholder position
+            const from = moving.getBoundingClientRect();
+            const to = placeholder.getBoundingClientRect();
+            const dx = to.left - from.left; const dy = to.top - from.top;
+            const sx = Math.max(0.0001, to.width / from.width);
+            const sy = Math.max(0.0001, to.height / from.height);
+            moving.style.transformOrigin = 'top left';
+            moving.style.transition = 'transform 220ms cubic-bezier(.2,.8,.2,1)';
+            moving.style.transform = `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
+            const onEnd = () => {
+              moving.removeEventListener('transitionend', onEnd);
+              overlay.classList.remove('is-open');
+              moving.style.transition = '';
+              moving.style.transform = '';
+              if (placeholder && placeholder.parentNode) { placeholder.parentNode.insertBefore(moving, placeholder); placeholder.remove(); }
+              moving.removeAttribute('data-height');
+              // Recompute layout without any line/point animation
+              try { const h = host; if (h && h.__rerender) h.__rerender(); } catch {}
+              requestAnimationFrame(()=>{ delete host.dataset.suppressTransitions; });
+            };
+            moving.addEventListener('transitionend', onEnd);
+          });
+          window.addEventListener('keydown', (e)=>{ if (e.key === 'Escape' && overlay.classList.contains('is-open')) { const btn = overlay.querySelector('.d3-trackio__modal-close'); btn && btn.click(); }});
+        }
+        return overlay;
+      }
+
+      fsBtn.addEventListener('click', ()=>{
+        const hostNode = cell.closest('.d3-trackio'); if (!hostNode) return;
+        const overlay = ensureOverlay(hostNode); const modal = overlay.querySelector('.d3-trackio__modal');
+        // If another chart is open, close it first then proceed
+        const existing = modal.querySelector('.cell');
+        if (overlay.classList.contains('is-open') && existing && existing !== cell) {
+          const btn = overlay.querySelector('.d3-trackio__modal-close');
+          if (btn) { btn.dispatchEvent(new Event('click')); }
+          const waitEnd = () => {
+            if (!overlay.classList.contains('is-open')) { fsBtn.click(); return; }
+            requestAnimationFrame(waitEnd);
+          };
+          waitEnd();
+          return;
+        }
+        // Global suppression across charts inside this host
+        hostNode.dataset.suppressTransitions = '1';
+        // Cancel any in-flight D3 transitions
+        try { d3.select(hostNode).selectAll('path.run-line').interrupt(); d3.select(hostNode).selectAll('circle.pt').interrupt(); } catch(_){ }
+        const before = cell.getBoundingClientRect();
+        const placeholder = document.createElement('div'); placeholder.style.width = cell.offsetWidth + 'px'; placeholder.style.height = cell.offsetHeight + 'px';
+        cell.__placeholder = placeholder; cell.parentNode.insertBefore(placeholder, cell);
+        modal.appendChild(cell);
+        // Do NOT re-render or change SVG internals; scale via CSS only
+        const after = cell.getBoundingClientRect();
+        const dx = before.left - after.left; const dy = before.top - after.top;
+        const sx = Math.max(0.0001, before.width / after.width);
+        const sy = Math.max(0.0001, before.height / after.height);
+        cell.style.transformOrigin = 'top left';
+        cell.style.transition = 'transform 220ms cubic-bezier(.2,.8,.2,1)';
+        cell.style.transform = `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
+        overlay.classList.add('is-open');
+        requestAnimationFrame(()=>{ requestAnimationFrame(()=>{ cell.style.transform = 'none'; }); });
+        const onEnd = () => { cell.removeEventListener('transitionend', onEnd); cell.style.transition = ''; cell.style.transform = ''; requestAnimationFrame(()=>{ /* keep suppress until settled or close */ }); };
+        cell.addEventListener('transitionend', onEnd);
+      });
+
       return { metricKey, render };
     }
 
@@ -339,11 +546,12 @@
       if (!host) return;
       if (host.dataset && host.dataset.mounted === 'true') return; if (host.dataset) host.dataset.mounted = 'true';
 
-      // Build global header (legend)
+      // Build global header (legend) and insert ABOVE the grid
       const header = document.createElement('div'); header.className = 'd3-trackio__header';
-      const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>';
+      const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Runs</div><div class="items"></div>';
       header.appendChild(legend);
-      host.appendChild(header);
+      const gridNode = host.querySelector('.d3-trackio__grid');
+      if (gridNode && gridNode.parentNode === host) { host.insertBefore(header, gridNode); } else { host.insertBefore(header, host.firstChild); }
 
       const cells = Array.from(host.querySelectorAll('.cell'));
       if (!cells.length) return;
@@ -457,6 +665,7 @@
 
           // Resize handling
           const rerender = () => { instances.forEach(inst => inst.render(dataByMetric.get(inst.metricKey)||{}, colorForRun)); };
+          host.__rerender = rerender;
           if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(host); } else { window.addEventListener('resize', rerender); }
 
           // Legend hover ghosting across all cells