update charts

app/src/components/Palettes.astro

@@ -1,169 +0,0 @@
----
-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 '/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:b63be98ff7b53f4fb9c1db279348ce1d78f901cb2dce51b1c3b10bf5b3faae4d
-size 6033
+oid sha256:9c8ae4d27d04319fb18b6b505ac13e4ae96e7bb65e9d42dea6a6b7a69a15c7e5
+size 4742

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

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

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

@@ -0,0 +1,385 @@
+<div class="d3-trackio-oblivion">
+  <div class="d3-trackio-oblivion__grid">
+    <div class="cell" data-metric="epoch" data-title="epoch"></div>
+    <div class="cell" data-metric="train_accuracy" data-title="train_accuracy"></div>
+    <div class="cell" data-metric="train_loss" data-title="train_loss"></div>
+    <div class="cell" data-metric="val_accuracy" data-title="val_accuracy"></div>
+    <div class="cell cell--wide" data-metric="val_loss" data-title="val_loss"></div>
+  </div>
+  <noscript>JavaScript is required to render this chart.</noscript>
+</div>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');
+  /* 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;
+ }
+  .d3-trackio-oblivion * { font-family: inherit;
+   }
+  [data-theme="dark"] .d3-trackio-oblivion { --obl-bg: rgba(12,18,22,.45); }
+
+  .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; } }
+  .d3-trackio-oblivion__grid .cell--wide { grid-column: 1 / -1; }
+
+  .d3-trackio-oblivion .cell {
+    /* border: 1px solid var(--obl-border);
+    border-radius: 4px;
+    background: var(--obl-bg);
+    backdrop-filter: saturate(1.1) blur(10px);
+    box-shadow: var(--obl-glow); */
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    /* Important: allow tooltip to overflow outside cell bounds */
+    overflow: visible;
+    z-index: 0;
+  }
+  .d3-trackio-oblivion .cell:hover { z-index: 50; }
+  /* Background and corners are explicit elements for maintainability */
+  .d3-trackio-oblivion .cell-bg { position: absolute; inset: var(--hud-gap); pointer-events: none; z-index: 1; background: var(--hud-bg-gradient); }
+  .d3-trackio-oblivion .cell-corners { position: absolute; inset: var(--corner-inset); pointer-events: none; z-index: 3; background:
+      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top left / var(--hud-corner-size) 1px no-repeat,
+      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top left / 1px var(--hud-corner-size) no-repeat,
+      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top right / var(--hud-corner-size) 1px no-repeat,
+      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top right / 1px var(--hud-corner-size) no-repeat,
+      linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom left / var(--hud-corner-size) 1px no-repeat,
+      linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom left / 1px var(--hud-corner-size) no-repeat,
+      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-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; }
+  .d3-trackio-oblivion .cell-body { position: relative; width: 100%; overflow: hidden; }
+  .d3-trackio-oblivion .cell-body svg { max-width: 100%; height: auto; display: block; }
+
+  /* Axes & grid use cyan tint */
+  .d3-trackio-oblivion .axes path, .d3-trackio-oblivion .axes line { stroke: var(--obl-cyan-dim); stroke-opacity: 1; }
+  .d3-trackio-oblivion .axes text { fill: var(--obl-cyan); opacity: .6; font-weight: 400; letter-spacing: 0.02em; }
+  .d3-trackio-oblivion .grid line { stroke: var(--obl-cyan-dim); stroke-opacity: .5; }
+
+  /* Legend header */
+  .d3-trackio-oblivion__header { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin: 0 0 10px 0; flex-wrap: wrap; width: 100%; }
+  .d3-trackio-oblivion__header .legend-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--obl-cyan); text-align: center; }
+  .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; }
+
+  /* Hover ghosting */
+  .d3-trackio-oblivion.hovering .lines path.ghost { opacity: .22; }
+  .d3-trackio-oblivion.hovering .points circle.ghost { opacity: .22; }
+  .d3-trackio-oblivion.hovering .areas path.ghost { opacity: .06; }
+  .d3-trackio-oblivion.hovering .legend-bottom .item.ghost { opacity: .35; }
+
+  /* Tooltip */
+  .d3-trackio-oblivion .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 10px 12px;
+    border-radius: 0;
+    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);
+    opacity: .5;
+    transition: opacity .12s ease;
+    z-index: 1000;
+    backdrop-filter: saturate(1.1) blur(10px);
+  }
+  .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__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>
+  (() => {
+    const THIS_SCRIPT = document.currentScript;
+    const TARGET_METRICS = ['epoch','train_accuracy','train_loss','val_accuracy','val_loss'];
+
+    const prettyMetricLabel = (key) => {
+      if (!key) return '';
+      const table = { 'train_accuracy':'Train Accuracy', 'val_accuracy':'Val Accuracy', 'train_loss':'Train Loss', 'val_loss':'Val Loss', 'epoch':'Epoch' };
+      if (table[key]) return table[key];
+      const cleaned = String(key).replace(/[_-]+/g, ' ').trim();
+      return cleaned.split(/\s+/).map(w => 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 initCell(cell){
+      const d3 = window.d3;
+      const metricKey = cell.getAttribute('data-metric');
+      const titleText = cell.getAttribute('data-title') || metricKey;
+      // Structured layers: bg + corners + inner (header + svg)
+      const bg = document.createElement('div'); bg.className = 'cell-bg'; cell.appendChild(bg);
+      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 body = document.createElement('div'); body.className = 'cell-body'; inner.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');
+
+      // 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'; tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tip.appendChild(tipInner); cell.appendChild(tip); } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      // 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){
+        const rect = cell.getBoundingClientRect();
+        width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
+        height = 180;
+        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','xMidYMid meet');
+        // Respect HUD gap: keep content inside gradient inset
+        const css = getComputedStyle(cell);
+        const hudGap = Math.max(0, parseFloat(css.getPropertyValue('--hud-gap')) || 0);
+        const innerWidth = Math.max(0, width - margin.left - margin.right - hudGap * 2);
+        const innerHeight = Math.max(0, height - margin.top - margin.bottom - hudGap * 2);
+        gRoot.attr('transform', `translate(${margin.left + hudGap},${margin.top + hudGap})`);
+        xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
+        // grid cleared; drawn as dot intersections in render()
+        gGrid.selectAll('*').remove();
+        gAxes.selectAll('*').remove();
+        // Build ticks that always include domain edges
+        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]);
+          // dedupe
+          return Array.from(new Set(arr));
+        };
+        const xTicksForced = makeTicks(xScale, 8);
+        const yTicksForced = makeTicks(yScale, 6);
+        gAxes
+          .append('g')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(
+            d3.axisBottom(xScale).tickValues(xTicksForced)
+          )
+          .call((g) => {
+            g.selectAll('path, line')
+              .attr('stroke', 'var(--obl-cyan-dim)');
+            g.selectAll('text')
+              .attr('fill', 'var(--obl-cyan)')
+              .style('font-size', '11px');
+          });
+
+        gAxes
+          .append('g')
+          .call(d3.axisLeft(yScale).tickValues(yTicksForced))
+          .call((g) => {
+            g.selectAll('path, line')
+              .attr('stroke', 'var(--obl-cyan-dim)');
+            g.selectAll('text')
+              .attr('fill', 'var(--obl-cyan)')
+              .style('font-size', '11px');
+          });
+        gAxes
+          .append('text')
+          .attr('class','x-axis-label')
+          .attr('x', innerWidth/2)
+          .attr('y', innerHeight + Math.max(22, Math.min(36, margin.bottom - 2)))
+          .attr('fill', 'var(--obl-cyan)')
+          .attr('text-anchor', 'middle')
+          .style('font-size','9px')
+          .style('opacity', '0.3')
+          .style('font-weight','500')
+          .style('letter-spacing','.12em')
+          .style('text-transform','uppercase')
+          .text('Steps');
+        // Y-axis label removed to gain horizontal space
+        return { innerWidth, innerHeight, xTicksForced, yTicksForced };
+      }
+
+      function render(metricData, colorForRun){
+        const runs = Object.keys(metricData || {});
+        const hasAny = runs.some(r => (metricData[r]||[]).length > 0);
+        if (!hasAny) { gRoot.style('display','none'); let msg = body.querySelector('.empty-msg'); if (!msg) { msg = document.createElement('div'); msg.className='empty-msg'; msg.textContent='Metric not found in data.'; Object.assign(msg.style,{ padding:'10px', fontSize:'12px', color:'var(--obl-cyan)', opacity:.6 }); body.appendChild(msg); } return; }
+        const msg = body.querySelector('.empty-msg'); if (msg) msg.remove(); gRoot.style('display', null);
+
+        let minStep = Infinity, maxStep = -Infinity, minVal = Infinity, maxVal = -Infinity;
+        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); }); });
+        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);
+
+        // Grid as small dots at intersections of y ticks × step positions
+        const gridPoints = [];
+        xTicksForced.forEach(s => { yTicksForced.forEach(t => { gridPoints.push({ sx: s, ty: t }); }); });
+        gGrid.selectAll('circle.grid-dot')
+          .data(gridPoints)
+          .join('circle')
+          .attr('class', 'grid-dot')
+          .attr('cx', d => xScale(d.sx))
+          .attr('cy', d => yScale(d.ty))
+          .attr('r', 1.25)
+          .attr('fill', 'var(--obl-cyan-dim)')
+          .attr('fill-opacity', 0.5);
+
+        // No stderr correction shapes for now (kept intentionally minimal)
+        gAreas.selectAll('*').remove();
+
+        // 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').data(series, d=>d.run);
+        paths.enter().append('path').attr('class','run').attr('fill','none').attr('stroke-width',1.8).attr('opacity',0.95).attr('stroke', d=>d.color).attr('d', d=>lineGen(d.values));
+        paths.transition().duration(260).attr('stroke', d=>d.color).attr('opacity',0.95).attr('d', d=>lineGen(d.values));
+        paths.exit().remove();
+
+        // 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.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(--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)`; 
+          // Animate points at the hovered step to grow slightly
+          try {
+            gPoints.selectAll('circle.pt')
+              .transition().duration(140).ease(d3.easeCubicOut)
+              .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); }
+        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
+      }
+
+      return { metricKey, render };
+    }
+
+    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);
+      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';
+
+      // Insert legend header above the grid container
+      const gridNode = host.querySelector('.d3-trackio-oblivion__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;
+      const instances = cells.map(cell => initCell(cell));
+
+      // Read HtmlEmbed attributes
+      let mountEl = host; while (mountEl && !mountEl.getAttribute?.('data-datafiles') && !mountEl.getAttribute?.('data-config')) { mountEl = mountEl.parentElement; }
+      let providedData = null; let providedConfig = null;
+      try { const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null; if (attr && attr.trim()) providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim(); } catch(_){ }
+      try { const cfg = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null; if (cfg && cfg.trim()) providedConfig = cfg.trim().startsWith('{') ? JSON.parse(cfg) : cfg; } catch(_){ }
+
+      const DEFAULT_CSV = '/data/trackio_wandb_demo.csv';
+      const ensureDataPrefix = (p) => { if (typeof p !== 'string' || !p) return p; return p.includes('/') ? p : `/data/${p}`; };
+      const normalizeInput = (inp) => Array.isArray(inp) ? inp.map(ensureDataPrefix) : (typeof inp === 'string' ? [ ensureDataPrefix(inp) ] : null);
+      const CSV_PATHS = Array.isArray(providedData) ? normalizeInput(providedData) : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [ DEFAULT_CSV, './assets/data/trackio_wandb_demo.csv', '../assets/data/trackio_wandb_demo.csv', '../../assets/data/trackio_wandb_demo.csv' ]);
+
+      const d3 = window.d3;
+      (async () => {
+        try {
+          const texts = await Promise.all(CSV_PATHS.map(p => fetch(p, { cache:'no-cache' }).then(r => r.ok ? r.text() : '').catch(()=>'')));
+          const textAll = texts.filter(Boolean).join('\n');
+          const rows = d3.csvParse(textAll, d => ({ run:(d.run||'').trim(), step:+d.step, metric:(d.metric||'').trim(), value:+d.value, stderr: (d.stderr!=null && d.stderr!=='') ? +d.stderr : null }));
+          // Filter out comments and invalid rows before building lists/maps
+          const cleanRows = rows.filter(r => {
+            const run = String(r.run||'').trim();
+            const metric = String(r.metric||'').trim();
+            return run && run.charAt(0) !== '#' && metric && isFinite(+r.step) && !isNaN(+r.step) && isFinite(+r.value) && !isNaN(+r.value);
+          });
+          const metricsInData = Array.from(new Set(cleanRows.map(r => r.metric)));
+          const lcSet = new Set(metricsInData.map(m => m.toLowerCase()));
+          const preferIfExists = (cand) => cand.find(c => lcSet.has(String(c).toLowerCase())) || null;
+          const resolveMetric = (target) => {
+            const override = providedConfig && providedConfig.metricMap && providedConfig.metricMap[target]; if (override && lcSet.has(String(override).toLowerCase())) return metricsInData.find(m => m.toLowerCase() === String(override).toLowerCase());
+            const exact = metricsInData.find(m => m.toLowerCase() === target.toLowerCase()); if (exact) return exact;
+            const cands = (name) => metricsInData.filter(m => m.toLowerCase().includes(name));
+            if (target === 'epoch') return preferIfExists(['epoch']);
+            if (target === 'train_accuracy') return preferIfExists(['train_accuracy','training_accuracy','accuracy_train','train_acc','acc_train','train/accuracy','accuracy']) || cands('acc').find(m => /train|trn/i.test(m));
+            if (target === 'val_accuracy') return preferIfExists(['val_accuracy','valid_accuracy','validation_accuracy','val_acc','acc_val','val/accuracy']) || cands('acc').find(m => /val|valid/i.test(m));
+            if (target === 'train_loss') return preferIfExists(['train_loss','training_loss','loss_train','train/loss','loss']) || cands('loss').find(m => /train|trn/i.test(m));
+            if (target === 'val_loss') return preferIfExists(['val_loss','validation_loss','valid_loss','loss_val','val/loss']) || cands('loss').find(m => /val|valid/i.test(m));
+            return null;
+          };
+          const TARGET_TO_DATA = Object.fromEntries(TARGET_METRICS.map(t => [t, resolveMetric(t)]));
+          const metricsToDraw = TARGET_METRICS.filter(t => !!TARGET_TO_DATA[t]);
+
+          const runList = Array.from(new Set(cleanRows.map(r => String(r.run||'').trim()).filter(Boolean))).sort();
+          const palette = (() => {
+            try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') return window.ColorPalettes.getColors('categorical', runList.length); } catch(_) {}
+            const d = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#7ff1ff','#5ae0e8','#3cc2da','#289ab8','#1a7e9a','#0f637b','#0a4b5e','#083948','#062a36','#041e27'];
+            return d;
+          })();
+          const colorForRun = (name) => palette[runList.indexOf(name) % palette.length];
+
+          const legendItemsHost = legend.querySelector('.items');
+          legendItemsHost.innerHTML = runList.map((name) => { const color = colorForRun(name); return `<span class="item" data-run="${name}"><span class=\"swatch\" style=\"background:${color}\"></span><span>${name}</span></span>`; }).join('');
+
+          const dataByMetric = new Map();
+          metricsToDraw.forEach(tgt => { const m = TARGET_TO_DATA[tgt]; const map = {}; runList.forEach(r => map[r] = []); cleanRows.filter(r=>r.metric===m).forEach(r => { map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); }); dataByMetric.set(tgt, map); });
+
+          instances.forEach(inst => { const metricMap = dataByMetric.get(inst.metricKey) || {}; inst.render(metricMap, colorForRun); });
+
+          const rerender = () => { instances.forEach(inst => inst.render(dataByMetric.get(inst.metricKey)||{}, colorForRun)); };
+          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(host); } else { window.addEventListener('resize', rerender); }
+
+          legendItemsHost.querySelectorAll('.item').forEach(el => {
+            el.addEventListener('mouseenter', () => { const run = el.getAttribute('data-run'); if (!run) return; host.classList.add('hovering'); host.querySelectorAll('.cell').forEach(cell => { cell.querySelectorAll('.lines path.run').forEach(p => p.classList.toggle('ghost', (p.__data__ && p.__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('.cell').forEach(cell => { cell.querySelectorAll('.lines path.run').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 (e) {
+          const pre = document.createElement('pre'); pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e); pre.style.color = 'var(--obl-cyan)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap'; host.appendChild(pre);
+        }
+      })();
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
+  })();
+</script>
+
+

app/src/pages/index.astro

@@ -143,7 +143,7 @@ const licence = (articleFM as any)?.licence ?? (articleFM as any)?.license ?? (a
         } catch {}
       })();
     </script>
-    <script type="module" src="/scripts/color-palettes.js"></script>
+    <script type="module" src="/src/scripts/color-palettes.js"></script>
     
     <!-- TO MANAGE PROPERLY -->
     <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>

app/src/scripts/color-palettes.js

@@ -0,0 +1,236 @@
+// Global color palettes generator and watcher
+// - Observes CSS variable --primary-color and theme changes
+// - Generates categorical, sequential, and diverging palettes (OKLCH/OKLab)
+// - Exposes results as CSS variables on :root
+// - Supports variable color counts per palette via CSS vars
+// - Dispatches a 'palettes:updated' CustomEvent after each update
+
+(() => {
+  const MODE = { cssRoot: document.documentElement };
+
+  const getCssVar = (name) => {
+    try { return getComputedStyle(MODE.cssRoot).getPropertyValue(name).trim(); } catch { return ''; }
+  };
+  const getIntFromCssVar = (name, fallback) => {
+    const raw = getCssVar(name);
+    if (!raw) return fallback;
+    const v = parseInt(String(raw), 10);
+    if (Number.isNaN(v)) return fallback;
+    return v;
+  };
+  const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+
+  // Color math (OKLab/OKLCH)
+  const srgbToLinear = (u) => (u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4));
+  const linearToSrgb = (u) => (u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(Math.max(0, u), 1 / 2.4) - 0.055);
+  const rgbToOklab = (r, g, b) => {
+    const rl = srgbToLinear(r), gl = srgbToLinear(g), bl = srgbToLinear(b);
+    const l = Math.cbrt(0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl);
+    const m = Math.cbrt(0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl);
+    const s = Math.cbrt(0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl);
+    const L = 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s;
+    const b2 = 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s;
+    return { L, a, b: b2 };
+  };
+  const oklabToRgb = (L, a, b) => {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    const r = linearToSrgb(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+    const g = linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+    const b3 = linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s);
+    return { r, g, b: b3 };
+  };
+  const oklchToOklab = (L, C, hDeg) => { const h = (hDeg * Math.PI) / 180; return { L, a: C * Math.cos(h), b: C * Math.sin(h) }; };
+  const oklabToOklch = (L, a, b) => { const C = Math.sqrt(a*a + b*b); let h = Math.atan2(b, a) * 180 / Math.PI; if (h < 0) h += 360; return { L, C, h }; };
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const isInGamut = ({ r, g, b }) => r >= 0 && r <= 1 && g >= 0 && g <= 1 && b >= 0 && b <= 1;
+  const toHex = ({ r, g, b }) => { const R = Math.round(clamp01(r)*255), G = Math.round(clamp01(g)*255), B = Math.round(clamp01(b)*255); const h = (n) => n.toString(16).padStart(2,'0'); return `#${h(R)}${h(G)}${h(B)}`.toUpperCase(); };
+  const oklchToHexSafe = (L, C, h) => { let c = C; for (let i=0;i<12;i++){ const { a, b } = oklchToOklab(L,c,h); const rgb = oklabToRgb(L,a,b); if (isInGamut(rgb)) return toHex(rgb); c = Math.max(0, c-0.02);} return toHex(oklabToRgb(L,0,0)); };
+  const parseCssColorToRgb = (css) => { try { const el = document.createElement('span'); el.style.color = css; document.body.appendChild(el); const cs = getComputedStyle(el).color; document.body.removeChild(el); const m = cs.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i); if (!m) return null; return { r: Number(m[1])/255, g: Number(m[2])/255, b: Number(m[3])/255 }; } catch { return null; } };
+
+  const getPrimaryHex = () => {
+    const css = getCssVar('--primary-color');
+    if (!css) return '#E889AB';
+    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(css)) return css.toUpperCase();
+    const rgb = parseCssColorToRgb(css);
+    if (rgb) return toHex(rgb);
+    return '#E889AB';
+  };
+  // No count management via CSS anymore; counts are passed directly to the API
+
+  const generators = {
+    categorical: (baseHex, count) => {
+      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { 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 { r, g, b } = parseHex(baseHex);
+      const { L, a, b: bb } = rgbToOklab(r,g,b);
+      const { C, h } = oklabToOklch(L,a,bb);
+      const L0 = Math.min(0.85, Math.max(0.4, L));
+      const C0 = Math.min(0.35, Math.max(0.1, C || 0.2));
+      const total = Math.max(1, Math.min(12, count || 8));
+      const hueStep = 360 / total;
+      const results = [];
+      for (let i=0;i<total;i++) { const hDeg = (h + i*hueStep) % 360; const lVar = ((i % 3) - 1) * 0.04; results.push(oklchToHexSafe(Math.max(0.4, Math.min(0.85, L0 + lVar)), C0, hDeg)); }
+      return results;
+    },
+    sequential: (baseHex, count) => {
+      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { 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 { r, g, b } = parseHex(baseHex);
+      const { L, a, b: bb } = rgbToOklab(r,g,b);
+      const { C, h } = oklabToOklch(L,a,bb);
+      const total = Math.max(1, Math.min(12, count || 8));
+      const startL = Math.max(0.25, L - 0.18);
+      const endL = Math.min(0.92, L + 0.18);
+      const cBase = Math.min(0.33, Math.max(0.08, C * 0.9 + 0.06));
+      const out = [];
+      for (let i=0;i<total;i++) { const t = total===1 ? 0 : i/(total-1); const lNow = startL*(1-t)+endL*t; const cNow = cBase*(0.85 + 0.15*(1 - Math.abs(0.5 - t)*2)); out.push(oklchToHexSafe(lNow, cNow, h)); }
+      return out;
+    },
+    diverging: (baseHex, count) => {
+      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { 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 { r, g, b } = parseHex(baseHex);
+      const baseLab = rgbToOklab(r,g,b);
+      const baseLch = oklabToOklch(baseLab.L, baseLab.a, baseLab.b);
+      const total = Math.max(1, Math.min(12, count || 8));
+
+      // Left endpoint: EXACT primary color (no darkening)
+      const leftLab = baseLab;
+      // Right endpoint: complement with same L and similar C (clamped safe)
+      const compH = (baseLch.h + 180) % 360;
+      const cSafe = Math.min(0.35, Math.max(0.08, baseLch.C));
+      const rightLab = oklchToOklab(baseLab.L, cSafe, compH);
+      const whiteLab = { L: 0.98, a: 0, b: 0 }; // center near‑white
+
+      const hexFromOKLab = (L, a, b) => toHex(oklabToRgb(L, a, b));
+      const lerp = (a, b, t) => a + (b - a) * t;
+      const lerpOKLabHex = (A, B, t) => hexFromOKLab(lerp(A.L, B.L, t), lerp(A.a, B.a, t), lerp(A.b, B.b, t));
+
+      const out = [];
+      if (total % 2 === 1) {
+        const nSide = (total - 1) >> 1; // items on each side
+        // Left side: include left endpoint exactly at index 0
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 0 : (i / (nSide - 1)); // 0 .. 1
+          // Move from leftLab to a value close (but not equal) to white; ensure last before center is lighter
+          const tt = t * 0.9; // keep some distance from pure white before center
+          out.push(lerpOKLabHex(leftLab, whiteLab, tt));
+        }
+        // Center
+        out.push(hexFromOKLab(whiteLab.L, whiteLab.a, whiteLab.b));
+        // Right side: start near white and end EXACTLY at rightLab
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 1 : ((i + 1) / nSide); // (1/n)..1
+          const tt = Math.max(0.1, t); // avoid starting at pure white
+          out.push(lerpOKLabHex(whiteLab, rightLab, tt));
+        }
+        // Ensure first and last are exact endpoints
+        if (out.length) { out[0] = hexFromOKLab(leftLab.L, leftLab.a, leftLab.b); out[out.length - 1] = hexFromOKLab(rightLab.L, rightLab.a, rightLab.b); }
+      } else {
+        const nSide = total >> 1;
+        // Left half including left endpoint, approaching white but not reaching it
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 0 : (i / (nSide - 1)); // 0 .. 1
+          const tt = t * 0.9;
+          out.push(lerpOKLabHex(leftLab, whiteLab, tt));
+        }
+        // Right half: mirror from near white to exact right endpoint
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 1 : ((i + 1) / nSide); // (1/n)..1
+          const tt = Math.max(0.1, t);
+          out.push(lerpOKLabHex(whiteLab, rightLab, tt));
+        }
+        if (out.length) { out[0] = hexFromOKLab(leftLab.L, leftLab.a, leftLab.b); out[out.length - 1] = hexFromOKLab(rightLab.L, rightLab.a, rightLab.b); }
+      }
+      return out;
+    }
+  };
+
+  let lastSignature = '';
+
+  const updatePalettes = () => {
+    const primary = getPrimaryHex();
+    const signature = `${primary}`;
+    if (signature === lastSignature) return;
+    lastSignature = signature;
+    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {}
+  };
+
+  const bootstrap = () => {
+    updatePalettes();
+    const mo = new MutationObserver(() => updatePalettes());
+    mo.observe(MODE.cssRoot, { attributes: true, attributeFilter: ['style', 'data-theme'] });
+    setInterval(updatePalettes, 400);
+    // Utility: choose high-contrast (or softened) text style against an arbitrary background color
+    const pickTextStyleForBackground = (bgCss, opts = {}) => {
+      const cssRoot = document.documentElement;
+      const getCssVar = (name) => {
+        try { return getComputedStyle(cssRoot).getPropertyValue(name).trim(); } catch { return ''; }
+      };
+      const resolveCssToRgb01 = (css) => {
+        const rgb = parseCssColorToRgb(css);
+        if (!rgb) return null;
+        return rgb; // already 0..1
+      };
+      const mixRgb01 = (a, b, t) => ({ r: a.r*(1-t)+b.r*t, g: a.g*(1-t)+b.g*t, b: a.b*(1-t)+b.b*t });
+      const relLum = (rgb) => {
+        const f = (u) => srgbToLinear(u);
+        return 0.2126*f(rgb.r) + 0.7152*f(rgb.g) + 0.0722*f(rgb.b);
+      };
+      const contrast = (fg, bg) => {
+        const L1 = relLum(fg), L2 = relLum(bg); const a = Math.max(L1,L2), b = Math.min(L1,L2);
+        return (a + 0.05) / (b + 0.05);
+      };
+      try {
+        const bg = resolveCssToRgb01(bgCss);
+        if (!bg) return { fill: getCssVar('--text-color') || '#000', stroke: 'var(--transparent-page-contrast)', strokeWidth: 1 };
+        const candidatesCss = [getCssVar('--text-color') || '#111', getCssVar('--on-primary') || '#0f1115', '#000', '#fff'];
+        const candidates = candidatesCss
+          .map(css => ({ css, rgb: resolveCssToRgb01(css) }))
+          .filter(x => !!x.rgb);
+        // Pick the max contrast
+        let best = candidates[0]; let bestCR = contrast(best.rgb, bg);
+        for (let i=1;i<candidates.length;i++){
+          const cr = contrast(candidates[i].rgb, bg);
+          if (cr > bestCR) { best = candidates[i]; bestCR = cr; }
+        }
+        // Optional softening via blend factor (0..1), blending towards muted color
+        const blend = Math.min(1, Math.max(0, Number(opts.blend || 0)));
+        let finalRgb = best.rgb;
+        if (blend > 0) {
+          const mutedCss = getCssVar('--muted-color') || (getCssVar('--text-color') || '#111');
+          const mutedRgb = resolveCssToRgb01(mutedCss) || best.rgb;
+          finalRgb = mixRgb01(best.rgb, mutedRgb, blend);
+        }
+        const haloStrength = Math.min(1, Math.max(0, Number(opts.haloStrength == null ? 0.5 : opts.haloStrength)));
+        const stroke = (best.css === '#000' || best.css.toLowerCase() === 'black') ? `rgba(255,255,255,${0.30 + 0.40*haloStrength})` : `rgba(0,0,0,${0.30 + 0.30*haloStrength})`;
+        return { fill: toHex(finalRgb), stroke, strokeWidth: (opts.haloWidth == null ? 1 : Number(opts.haloWidth)) };
+      } catch {
+        return { fill: getCssVar('--text-color') || '#000', stroke: 'var(--transparent-page-contrast)', strokeWidth: 1 };
+      }
+    };
+    window.ColorPalettes = {
+      refresh: updatePalettes,
+      notify: () => { try { const primary = getPrimaryHex(); document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {} },
+      getPrimary: () => getPrimaryHex(),
+      getColors: (key, count = 6) => {
+        const primary = getPrimaryHex();
+        const total = Math.max(1, Math.min(12, Number(count) || 6));
+        if (key === 'categorical') return generators.categorical(primary, total);
+        if (key === 'sequential') return generators.sequential(primary, total);
+        if (key === 'diverging') return generators.diverging(primary, total);
+        return [];
+      },
+      getTextStyleForBackground: (bgCss, opts) => pickTextStyleForBackground(bgCss, opts || {}),
+      chooseReadableText: (bgCss, opts) => pickTextStyleForBackground(bgCss, opts || {})
+    };
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  else bootstrap();
+})();
+
+