update trackio design

app/astro.config.mjs

@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
+import svelte from '@astrojs/svelte';
 import mermaid from 'astro-mermaid';
 import compressor from 'astro-compressor';
 import remarkMath from 'remark-math';
@@ -25,6 +26,7 @@ export default defineConfig({
   integrations: [
     mermaid({ theme: 'forest', autoTheme: true }),
     mdx(),
+    svelte(),
     // Precompress output with Gzip only (Brotli disabled due to server module mismatch)
     compressor({ brotli: false, gzip: true })
   ],

app/src/components/TrackioWrapper.astro

@@ -0,0 +1,267 @@
+---
+// TrackioWrapper.astro
+import Trackio from './trackio/Trackio.svelte';
+---
+
+<!-- Ensure Roboto Mono is loaded for Oblivion theme -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap" rel="stylesheet">
+
+<div class="trackio-wrapper">
+  <div class="trackio-controls">
+    <div class="controls-left">
+      <div class="theme-selector">
+        <label for="theme-select">Theme</label>
+        <select id="theme-select" class="theme-select">
+          <option value="classic">Classic</option>
+          <option value="oblivion">Oblivion</option>
+        </select>
+      </div>
+      <div class="scale-controls">
+        <label>
+          <input type="checkbox" id="log-scale-x">
+          Log Scale X
+        </label>
+        <label>
+          <input type="checkbox" id="smooth-data">
+          Smooth
+        </label>
+      </div>
+    </div>
+    <button class="button button--ghost" type="button" id="randomize-btn">
+      Randomize Data
+    </button>
+  </div>
+  
+  <div class="trackio-container">
+    <Trackio client:load variant="classic" />
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', async () => {
+    const themeSelect = document.getElementById('theme-select');
+    const randomizeBtn = document.getElementById('randomize-btn');
+    const logScaleXCheckbox = document.getElementById('log-scale-x');
+    const smoothDataCheckbox = document.getElementById('smooth-data');
+    const trackioContainer = document.querySelector('.trackio-container');
+    
+    if (!themeSelect || !randomizeBtn || !logScaleXCheckbox || !smoothDataCheckbox || !trackioContainer) return;
+    
+    // Import the store function
+    const { triggerJitter } = await import('./trackio/store.js');
+    
+    // Theme change handler
+    themeSelect.addEventListener('change', (e) => {
+      const target = e.target;
+      if (!target || !('value' in target)) return;
+      
+      const newVariant = target.value;
+      console.log(`Theme changed to: ${newVariant}`); // Debug log
+      
+      // Find the trackio element and call setTheme on the Svelte instance
+      const trackioEl = trackioContainer.querySelector('.trackio');
+      if (trackioEl && trackioEl.__trackioInstance) {
+        console.log('Calling setTheme on Trackio instance'); // Debug log
+        trackioEl.__trackioInstance.setTheme(newVariant);
+      } else {
+        // Fallback: just update CSS classes
+        console.log('No Trackio instance found, updating CSS classes only'); // Debug log
+        if (trackioEl) {
+          trackioEl.classList.remove('theme--classic', 'theme--oblivion');
+          trackioEl.classList.add(`theme--${newVariant}`);
+        }
+      }
+    });
+
+    // Log scale X change handler
+    logScaleXCheckbox.addEventListener('change', (e) => {
+      const target = e.target;
+      if (!target || !('checked' in target)) return;
+      
+      const isLogScale = target.checked;
+      console.log(`Log scale X changed to: ${isLogScale}`); // Debug log
+      
+      // Find the trackio element and call setLogScaleX on the Svelte instance
+      const trackioEl = trackioContainer.querySelector('.trackio');
+      if (trackioEl && trackioEl.__trackioInstance) {
+        console.log('Calling setLogScaleX on Trackio instance'); // Debug log
+        trackioEl.__trackioInstance.setLogScaleX(isLogScale);
+      } else {
+        console.log('Trackio instance not found for log scale change');
+      }
+    });
+
+    // Smooth data change handler
+    smoothDataCheckbox.addEventListener('change', (e) => {
+      const target = e.target;
+      if (!target || !('checked' in target)) return;
+      
+      const isSmooth = target.checked;
+      console.log(`Smooth data changed to: ${isSmooth}`); // Debug log
+      
+      // Find the trackio element and call setSmoothing on the Svelte instance
+      const trackioEl = trackioContainer.querySelector('.trackio');
+      if (trackioEl && trackioEl.__trackioInstance) {
+        console.log('Calling setSmoothing on Trackio instance'); // Debug log
+        trackioEl.__trackioInstance.setSmoothing(isSmooth);
+      } else {
+        console.log('Trackio instance not found for smooth change');
+      }
+    });
+    
+    // Randomize data handler - now uses the store
+    randomizeBtn.addEventListener('click', () => {
+      console.log('Randomize button clicked - triggering jitter via store'); // Debug log
+      
+      // Add vibration animation
+      randomizeBtn.classList.add('vibrating');
+      setTimeout(() => {
+        randomizeBtn.classList.remove('vibrating');
+      }, 600);
+      
+      // Test direct window approach as well
+      if (window.trackioInstance && typeof window.trackioInstance.jitterData === 'function') {
+        console.log('Found window.trackioInstance, calling jitterData directly'); // Debug log
+        window.trackioInstance.jitterData();
+      } else {
+        console.log('No window.trackioInstance found, using store trigger'); // Debug log
+        triggerJitter();
+      }
+    });
+  });
+</script>
+
+<style>
+  .trackio-wrapper {
+    width: 100%;
+    margin: 0px 0 20px 0;
+  }
+  
+  .trackio-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 12px 0px;
+    border-bottom: 1px solid var(--border-color);
+    gap: 16px;
+    flex-wrap: nowrap;
+  }
+  
+  .controls-left {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    flex-wrap: wrap;
+  }
+  
+  .btn-randomize {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    background: var(--accent-color, #007acc);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  
+  .btn-randomize:hover {
+    background: var(--accent-hover, #005a9e);
+    transform: translateY(-1px);
+  }
+  
+  .btn-randomize:active {
+    transform: translateY(0);
+  }
+  
+  .theme-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+  
+  .theme-selector label {
+    font-weight: 500;
+    color: var(--text-color);
+  }
+  
+  .theme-select {
+    padding: 6px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--input-bg, var(--surface-bg));
+    color: var(--text-color);
+    font-size: 14px;
+    cursor: pointer;
+    transition: border-color 0.15s ease;
+  }
+  
+  .theme-select:focus {
+    outline: none;
+    border-color: var(--accent-color, #007acc);
+  }
+  
+  .scale-controls {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+  
+  /* Animation de vibration pour le bouton */
+  @keyframes vibrate {
+    0% { transform: translateX(0); }
+    10% { transform: translateX(-2px) rotate(-1deg); }
+    20% { transform: translateX(2px) rotate(1deg); }
+    30% { transform: translateX(-2px) rotate(-1deg); }
+    40% { transform: translateX(2px) rotate(1deg); }
+    50% { transform: translateX(-1px) rotate(-0.5deg); }
+    60% { transform: translateX(1px) rotate(0.5deg); }
+    70% { transform: translateX(-1px) rotate(-0.5deg); }
+    80% { transform: translateX(1px) rotate(0.5deg); }
+    90% { transform: translateX(-0.5px) rotate(-0.25deg); }
+    100% { transform: translateX(0) rotate(0); }
+  }
+  
+  .button.vibrating {
+    animation: vibrate 0.6s ease-in-out;
+  }
+  
+  .trackio-container {
+    width: 100%;
+    margin-top: 40px;
+  }
+  
+  @media (max-width: 768px) {
+    .trackio-controls {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 12px;
+    }
+    
+    .controls-left {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 12px;
+    }
+    
+    .theme-selector {
+      justify-content: space-between;
+    }
+    
+    .scale-controls {
+      justify-content: space-between;
+    }
+  }
+</style>

app/src/components/trackio/Cell.svelte

@@ -0,0 +1,902 @@
+<script>
+  import * as d3 from 'd3';
+  import { onMount, onDestroy } from 'svelte';
+  import Tooltip from './Tooltip.svelte';
+  import { formatAbbrev, formatLogTick, generateSmartTicks, generateLogTicks } from './chart-utils.js';
+  export let metricKey;
+  export let titleText;
+  export let wide = false;
+  export let variant = 'classic';
+  export let normalizeLoss = true;
+  export let logScaleX = false;
+  export let smoothing = false;
+  export let metricData = {}; // { run -> [{step,value}] } - smoothed data
+  export let rawMetricData = {}; // { run -> [{step,value}] } - original data for background when smoothing
+  export let colorForRun = (name)=> '#999';
+  export let hostEl = null;
+
+  let root; let body;
+  let svg, gRoot, gGrid, gGridDots, gAxes, gAreas, gLines, gPoints, gHover;
+  let xScale, yScale, lineGen;
+  let tooltip, tipTarget;
+  let cleanup;
+  const MARGIN = { top: 10, right: 20, bottom: 46, left: 44 };
+
+  // Reactive rendering when variant or metricData changes
+  $: {
+    if (variant || metricData) {
+      // Add a small delay to ensure CSS variables are updated
+      setTimeout(() => render(), 10);
+    }
+  }
+
+  // Utility function to get transition duration based on fullscreen state
+  function getTransitionDuration(normalDuration = 160) {
+    const fullscreenOverlay = root?.closest('.trackio-fullscreen-overlay');
+    return (fullscreenOverlay && fullscreenOverlay.classList.contains('transitioning')) ? 0 : normalDuration;
+  }
+
+  function ensureSvg(){
+    if (svg || !body) return;
+    const d3body = d3.select(body);
+    svg = d3body.append('svg').attr('width','100%').style('display','block');
+    gRoot = svg.append('g');
+    gGrid = gRoot.append('g').attr('class','grid');
+    gGridDots = gRoot.append('g').attr('class','grid-dots');
+    gAxes = gRoot.append('g').attr('class','axes');
+    gAreas = gRoot.append('g').attr('class','areas');
+    gLines = gRoot.append('g').attr('class','lines');
+    gPoints = gRoot.append('g').attr('class','points');
+    gHover = gRoot.append('g').attr('class','hover');
+    // Initialize scales - X scale will be updated based on logScaleX prop
+    xScale = logScaleX ? d3.scaleLog() : d3.scaleLinear(); 
+    yScale = d3.scaleLinear();
+    lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
+    // Create tooltip container in the trackio parent to inherit CSS variables
+    const trackioEl = root.closest('.trackio') || root;
+    tipTarget = document.createElement('div'); 
+    tipTarget.className = 'tip-host'; 
+    trackioEl.appendChild(tipTarget);
+    tooltip = new Tooltip({ target: tipTarget, props: { visible:false, x:-9999, y:-9999, title:'', subtitle:'', entries:[] } });
+  }
+
+
+  function updateLayout(hoverSteps, themeVars = {}){
+    const { axisStroke = 'var(--trackio-chart-axis-stroke)', axisText = 'var(--trackio-chart-axis-text)', gridStroke = 'var(--trackio-chart-grid-stroke)' } = themeVars;
+    
+    // Get font-family from computed style  
+    const computedStyle = getComputedStyle(root);
+    const fontFamily = computedStyle.getPropertyValue('--trackio-font-family').trim() || 'ui-monospace, SFMono-Regular, Menlo, monospace';
+    const rect = root.getBoundingClientRect(); 
+    let width = Math.max(1, Math.round(rect && rect.width ? rect.width : (root.clientWidth || 800)));
+    
+    // Check if we're in fullscreen mode
+    const isFullscreen = root.closest('.trackio-fullscreen-modal');
+    let height;
+    
+    if (isFullscreen) {
+      // Use available height minus header in fullscreen
+      // Use the body element's actual size
+      const bodyElement = body.parentElement; // cell-body
+      if (bodyElement) {
+        const bodyRect = bodyElement.getBoundingClientRect();
+        height = Math.max(400, Math.floor(bodyRect.height - 20)); // Small margin
+      } else {
+        height = 600; // Fallback
+      }
+    } else {
+      height = Number(root.getAttribute('data-height')) || 180;
+    }
+    if (isFullscreen) {
+      // In fullscreen, stretch to fill completely (no aspect ratio preservation)
+      svg.attr('width', '100%').attr('height', '100%').attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','none');
+    } else {
+      // Normal mode, preserve aspect ratio
+    svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','xMidYMid meet');
+    }
+    const innerWidth = width - MARGIN.left - MARGIN.right; const innerHeight = height - MARGIN.top - MARGIN.bottom;
+    gRoot.attr('transform', `translate(${MARGIN.left},${MARGIN.top})`);
+    xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
+
+    gAxes.selectAll('*').remove();
+    
+    const minXTicks = 5;
+    const maxXTicks = Math.max(minXTicks, Math.min(12, Math.floor(innerWidth / 70)));
+    let xTicksForced = [];
+    
+    let logTickData = null;
+    if (logScaleX) {
+      // Use improved logarithmic tick generation
+      logTickData = generateLogTicks(hoverSteps, minXTicks, maxXTicks, innerWidth, xScale);
+      xTicksForced = logTickData.major;
+    } else if (Array.isArray(hoverSteps) && hoverSteps.length) {
+      const tickIndices = generateSmartTicks(hoverSteps, minXTicks, maxXTicks, innerWidth);
+      xTicksForced = tickIndices;
+    } else {
+      // Fallback for continuous scales
+      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)); 
+      };
+      xTicksForced = makeTicks(xScale, maxXTicks);
+    }
+    const maxYTicks = Math.max(5, Math.min(6, Math.floor(innerHeight / 60)));
+    const yCount = maxYTicks; 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).tickFormat((val)=>{ 
+      // For log scale, val is the actual step value; for linear scale, val might be an index
+      const displayVal = logScaleX ? val : (Array.isArray(hoverSteps) && hoverSteps[val] != null ? hoverSteps[val] : val); 
+      return logScaleX ? formatLogTick(displayVal, true) : formatAbbrev(displayVal); 
+    }))
+      .call(g=>{ 
+        g.selectAll('path, line').style('stroke', 'var(--trackio-chart-axis-stroke)'); 
+        g.selectAll('text').style('fill', 'var(--trackio-chart-axis-text)').style('font-size','11px').style('font-family', fontFamily)
+          .style('font-weight', d => {
+            // Make powers of 10 bolder in log scale
+            if (!logScaleX) return 'normal';
+            const log10 = Math.log10(Math.abs(d));
+            const isPowerOf10 = Math.abs(log10 % 1) < 0.01;
+            return isPowerOf10 ? '600' : 'normal';
+          }); 
+      });
+    gAxes.append('g').call(d3.axisLeft(yScale).tickValues(yTicksForced).tickFormat((v)=>formatAbbrev(v)))
+      .call(g=>{ 
+        g.selectAll('path, line').style('stroke', 'var(--trackio-chart-axis-stroke)'); 
+        g.selectAll('text').style('fill', 'var(--trackio-chart-axis-text)').style('font-size','11px').style('font-family', fontFamily); 
+      });
+
+    // Add minor ticks for logarithmic scale
+    if (logScaleX && logTickData && logTickData.minor.length > 0) {
+      gAxes.append('g').attr('class', 'minor-ticks').attr('transform', `translate(0,${innerHeight})`)
+        .selectAll('line.minor-tick')
+        .data(logTickData.minor)
+        .join('line')
+        .attr('class', 'minor-tick')
+        .attr('x1', d => xScale(d))
+        .attr('x2', d => xScale(d))
+        .attr('y1', 0)
+        .attr('y2', 4) // Smaller than major ticks
+        .style('stroke', 'var(--trackio-chart-axis-stroke)')
+        .style('stroke-opacity', 0.4)
+        .style('stroke-width', 0.5);
+    }
+
+
+    // Grid rendering is now handled in render() function based on theme
+    const labelY = innerHeight + Math.max(20, Math.min(36, MARGIN.bottom - 12));
+    
+    // Main "Steps" label (normal text)
+    // Add (log) to Steps text when log scale is enabled
+    const stepsText = logScaleX ? 'Steps (log)' : 'Steps';
+    
+    gAxes.append('text')
+      .attr('class','x-axis-label')
+      .attr('x', innerWidth/2)
+      .attr('y', labelY)
+      .style('fill', 'var(--trackio-chart-axis-text)')
+      .attr('text-anchor','middle')
+      .style('font-size','9px')
+      .style('opacity','.9')
+      .style('letter-spacing','.5px')
+      .style('text-transform','uppercase')
+      .style('font-weight','500')
+      .style('font-family', fontFamily)
+      .text(stepsText);
+
+    return { innerWidth, innerHeight, xTicksForced, yTicksForced };
+  }
+
+  function render(){
+    ensureSvg();
+    if (!svg || !gRoot) return; // Wait for SVG to be ready
+    const runs = Object.keys(metricData||{});
+    const hasAny = runs.some(r => (metricData[r]||[]).length > 0);
+    if (!hasAny) { gRoot.style('display','none'); return; } gRoot.style('display', null);
+
+    // Get theme variables from CSS - try parent element if root doesn't have the variables
+    let computedStyle = getComputedStyle(root);
+    let gridType = computedStyle.getPropertyValue('--trackio-chart-grid-type').trim().replace(/['"]/g, '');
+    
+    // If not found on root, try parent trackio element
+    if (!gridType) {
+      const trackioEl = root?.closest('.trackio');
+      if (trackioEl) {
+        computedStyle = getComputedStyle(trackioEl);
+        gridType = computedStyle.getPropertyValue('--trackio-chart-grid-type').trim().replace(/['"]/g, '');
+      }
+    }
+    
+    const axisStroke = computedStyle.getPropertyValue('--trackio-chart-axis-stroke').trim();
+    const axisText = computedStyle.getPropertyValue('--trackio-chart-axis-text').trim();
+    const gridStroke = computedStyle.getPropertyValue('--trackio-chart-grid-stroke').trim();
+    const gridOpacity = computedStyle.getPropertyValue('--trackio-chart-grid-opacity').trim();
+
+    console.log('🎯 Cell render - variant:', variant, 'gridType:', gridType, 'trackio classes:', root?.closest('.trackio')?.className);
+
+    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); }); });
+    const isAccuracy = /accuracy/i.test(metricKey); const isLoss = /loss/i.test(metricKey);
+    if (isAccuracy) yScale.domain([0,1]).nice(); else if (isLoss && normalizeLoss) yScale.domain([0,1]).nice(); else yScale.domain([minVal, maxVal]).nice();
+    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); 
+    
+    // Update X scale based on logScaleX prop
+    xScale = logScaleX ? d3.scaleLog() : d3.scaleLinear();
+    
+    let stepIndex = null; // Declare stepIndex in the proper scope
+    
+    if (logScaleX) {
+      // For log scale, use actual step values (must be > 0)
+      const minStep = Math.max(1, Math.min(...hoverSteps));
+      const maxStep = Math.max(...hoverSteps);
+      xScale.domain([minStep, maxStep]);
+      lineGen.x(d => xScale(d.step));
+    } else {
+      // For linear scale, use indices as before
+      stepIndex = new Map(hoverSteps.map((s,i)=>[s,i]));
+      xScale.domain([0, Math.max(0, hoverSteps.length - 1)]);
+      lineGen.x(d => xScale(stepIndex.get(d.step)));
+    }
+    const normalizeY = (v) => (isLoss && normalizeLoss ? ((maxVal > minVal) ? (v - minVal) / (maxVal - minVal) : 0) : v); lineGen.y(d => yScale(normalizeY(d.value)));
+    const { innerWidth, innerHeight, xTicksForced, yTicksForced } = updateLayout(hoverSteps, { axisStroke, axisText, gridStroke });
+
+    // Conditional grid rendering based on theme
+    // Force detection based on variant prop if CSS variables fail
+    const shouldUseDots = (gridType === 'dots') || (variant === 'oblivion');
+    
+    if (shouldUseDots) {
+      // Oblivion-style: Grid as dots at intersections
+      gGrid.selectAll('*').remove(); // Clear line grid
+      gGridDots.selectAll('*').remove(); 
+      const gridPoints = []; 
+      const yMin = yScale.domain()[0]; 
+      const desiredCols = 24; 
+      const xGridStride = Math.max(1, Math.ceil(hoverSteps.length/desiredCols)); 
+      const xGridIdx = []; 
+      for (let idx = 0; idx < hoverSteps.length; idx += xGridStride) xGridIdx.push(idx); 
+      if (xGridIdx[xGridIdx.length-1] !== hoverSteps.length-1) xGridIdx.push(hoverSteps.length-1); 
+      xGridIdx.forEach(i => { 
+        yTicksForced.forEach(t => { 
+          if (i !== 0 && (yMin == null || t !== yMin)) gridPoints.push({ sx: i, ty: t }); 
+        }); 
+      }); 
+      gGridDots.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)
+        .style('fill', 'var(--trackio-chart-grid-stroke)')
+        .style('fill-opacity', 'var(--trackio-chart-grid-opacity)');
+    } else {
+      // Classic-style: Grid as lines
+      gGridDots.selectAll('*').remove(); // Clear dot grid
+      gGrid.selectAll('*').remove();
+      // Horizontal grid lines
+      gGrid.selectAll('line.horizontal')
+        .data(yTicksForced)
+        .join('line')
+        .attr('class', 'horizontal')
+        .attr('x1', 0).attr('x2', innerWidth)
+        .attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
+        .style('stroke', 'var(--trackio-chart-grid-stroke)')
+        .style('stroke-opacity', 'var(--trackio-chart-grid-opacity)')
+        .attr('stroke-width', 1);
+      // Vertical grid lines
+      gGrid.selectAll('line.vertical')
+        .data(xTicksForced)
+        .join('line')
+        .attr('class', 'vertical')
+        .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
+        .attr('y1', 0).attr('y2', innerHeight)
+        .style('stroke', 'var(--trackio-chart-grid-stroke)')
+        .style('stroke-opacity', 'var(--trackio-chart-grid-opacity)')
+        .attr('stroke-width', 1);
+    }
+
+    const series = runs.map(r => ({ run:r, color: colorForRun(r), values: (metricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
+    
+    // Draw background lines (original data) when smoothing is enabled
+    if (smoothing && rawMetricData && Object.keys(rawMetricData).length > 0) {
+      const rawSeries = runs.map(r => ({ run:r, color: colorForRun(r), values: (rawMetricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
+      const rawPaths = gLines.selectAll('path.raw-line').data(rawSeries, d=>d.run + '-raw'); 
+      rawPaths.enter().append('path').attr('class','raw-line').attr('data-run', d=>d.run).attr('fill','none').attr('stroke-width',1).attr('opacity',0.9).attr('stroke', d=>d.color).style('pointer-events','none').attr('d', d=> lineGen(d.values)); 
+      rawPaths.transition().duration(getTransitionDuration(160)).attr('stroke', d=>d.color).attr('opacity',0.4).attr('d', d=> lineGen(d.values));
+      rawPaths.exit().remove();
+    } else {
+      // Remove raw lines when smoothing is disabled
+      gLines.selectAll('path.raw-line').remove();
+    }
+    
+    // Draw main lines (smoothed or normal data)
+    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).style('pointer-events','none').attr('d', d=> lineGen(d.values)); 
+    paths.transition().duration(getTransitionDuration(160)).attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=> lineGen(d.values));
+    paths.exit().remove();
+    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',0).attr('fill', d=>d.color).attr('fill-opacity',0.6).attr('stroke','none').style('pointer-events','none')
+      .attr('cx', d=> logScaleX ? xScale(d.step) : xScale(stepIndex.get(d.step)))
+      .attr('cy', d=> yScale(normalizeY(d.value)))
+      .merge(ptsSel)
+      .attr('cx', d=> logScaleX ? xScale(d.step) : xScale(stepIndex.get(d.step)))
+      .attr('cy', d=> yScale(normalizeY(d.value))); 
+    ptsSel.exit().remove();
+
+    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).style('pointer-events','all'); 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').style('pointer-events','none'); let hideTipTimer=null;
+    function onMove(ev){ 
+      if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer=null; } 
+      const [mx,my]=d3.pointer(ev, overlay.node()); 
+      
+      let nearest, xpx;
+      if (logScaleX) {
+        // For log scale, find the closest actual step value
+        const mouseStepValue = xScale.invert(mx);
+        let minDist = Infinity;
+        let closestStep = hoverSteps[0];
+        hoverSteps.forEach(step => {
+          const dist = Math.abs(Math.log(step) - Math.log(mouseStepValue));
+          if (dist < minDist) {
+            minDist = dist;
+            closestStep = step;
+          }
+        });
+        nearest = closestStep;
+        xpx = xScale(nearest);
+      } else {
+        // For linear scale, use index-based approach as before
+        const idx = Math.round(Math.max(0, Math.min(hoverSteps.length-1, xScale.invert(mx)))); 
+        nearest = hoverSteps[idx]; 
+        xpx = xScale(idx);
+      }
+      
+      hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); 
+      try { hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-step', { detail: { step: nearest } })); } catch(_) {} 
+      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).sort((a,b)=> a.pt.value - b.pt.value); 
+      const fmt=(vv)=> (isAccuracy? (+vv).toFixed(4) : (+vv).toFixed(4)); 
+      
+      // Calculate position relative to trackio container
+      const trackioEl = root.closest('.trackio') || root;
+      const rootRect = root.getBoundingClientRect();
+      const trackioRect = trackioEl.getBoundingClientRect();
+      const relativeX = rootRect.left - trackioRect.left + mx + 12 + MARGIN.left;
+      const relativeY = rootRect.top - trackioRect.top + my + 12 + MARGIN.top;
+      tooltip.$set({ visible:true, x: Math.round(relativeX), y: Math.round(relativeY), title:`Step ${formatAbbrev(nearest)}`, subtitle: titleText, entries: entries.map(e=> ({ color:e.color, name:e.run, valueText: fmt(e.pt.value) })) }); 
+      try { gPoints.selectAll('circle.pt').transition().duration(getTransitionDuration(120)).ease(d3.easeCubicOut).attr('r', d => (d && d.step === nearest ? 4 : 0)); } catch(_) {} 
+    }
+    function onLeave(){ hideTipTimer = setTimeout(()=>{ tooltip.$set({ visible:false, x:-9999, y:-9999 }); hoverLine.style('display','none'); try { hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-clear')); } catch(_) {} try { gPoints.selectAll('circle.pt').transition().duration(getTransitionDuration(120)).ease(d3.easeCubicOut).attr('r', 0); } catch(_) {} }, 80); }
+    overlay.on('mousemove', onMove).on('mouseleave', onLeave);
+
+    // External hover
+    root.__showExternalStep = (stepVal) => { 
+      if (stepVal==null) { 
+        hoverLine.style('display','none'); 
+        try { gPoints.selectAll('circle.pt').attr('r',0); } catch(_) {} 
+        return; 
+      } 
+      let xpx;
+      if (logScaleX) {
+        xpx = xScale(stepVal);
+      } else {
+        const idx = stepIndex ? stepIndex.get(stepVal) : null;
+        if (idx == null) { hoverLine.style('display','none'); return; }
+        xpx = xScale(idx);
+      }
+      hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); 
+      try { gPoints.selectAll('circle.pt').attr('r', d => (d && d.step === stepVal ? 4 : 0)); } catch(_) {} 
+    };
+    root.__clearExternalStep = () => { hoverLine.style('display','none'); try { gPoints.selectAll('circle.pt').attr('r',0); } catch(_) {} };
+    if (!root.__syncAttached && hostEl) { hostEl.addEventListener('trackio-hover-step', (ev)=>{ const d=ev&&ev.detail; if (!d) return; root.__showExternalStep && root.__showExternalStep(d.step); }); hostEl.addEventListener('trackio-hover-clear', ()=>{ root.__clearExternalStep && root.__clearExternalStep(); }); root.__syncAttached = true; }
+  }
+
+  function schedule(){ try { render(); } catch(_) {} }
+  onMount(()=>{ schedule(); const ro = (window.ResizeObserver ? new ResizeObserver(()=> schedule()) : null); ro && ro.observe(root); cleanup = ()=>{ ro && ro.disconnect(); }; });
+  onDestroy(()=>{ cleanup && cleanup(); });
+
+  // Re-render when inputs change so tooltip/overlay are available once data arrives
+  $: { 
+    metricData; 
+    rawMetricData;
+    normalizeLoss; 
+    variant; 
+    logScaleX;
+    smoothing;
+    colorForRun; 
+    // Debug log
+    if (typeof window !== 'undefined') {
+      console.log(`Cell re-rendering for ${metricKey}, variant: ${variant}, logScaleX: ${logScaleX}, smoothing: ${smoothing}`);
+    }
+    schedule(); 
+  }
+
+  // Fullscreen functionality
+  function openFullscreen() {
+    if (!root) return;
+    
+    // Create overlay if it doesn't exist
+    let overlay = document.querySelector('.trackio-fullscreen-overlay');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.className = 'trackio-fullscreen-overlay';
+      
+      const modal = document.createElement('div');
+      modal.className = 'trackio-fullscreen-modal';
+      
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'trackio-fullscreen-close';
+      closeBtn.innerHTML = '×';
+      closeBtn.title = 'Fermer';
+      
+      overlay.appendChild(modal);
+      overlay.appendChild(closeBtn);
+      document.body.appendChild(overlay);
+      
+      // Close handlers
+      const closeModal = () => {
+        const cellInModal = modal.querySelector('.cell');
+        if (!cellInModal || !cellInModal.__originalParent) {
+          overlay.classList.remove('is-open');
+          return;
+        }
+        
+        // FLIP animation: animate back to original position
+        const currentRect = cellInModal.getBoundingClientRect();
+        const targetRect = cellInModal.__placeholder.getBoundingClientRect();
+        
+        const deltaX = targetRect.left - currentRect.left;
+        const deltaY = targetRect.top - currentRect.top;
+        const scaleX = targetRect.width / currentRect.width;
+        const scaleY = targetRect.height / currentRect.height;
+        
+        // Animate back
+        overlay.classList.add('transitioning'); // Disable D3 animations during close
+        cellInModal.style.transformOrigin = 'top left';
+        cellInModal.style.transition = 'transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)';
+        cellInModal.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+        
+        overlay.classList.remove('is-open');
+        
+        setTimeout(() => {
+          // Move cell back to original position
+          if (cellInModal.__placeholder && cellInModal.__originalParent) {
+            cellInModal.__originalParent.insertBefore(cellInModal, cellInModal.__placeholder);
+            cellInModal.__placeholder.remove();
+          }
+          
+          // Reset styles
+          cellInModal.style.transform = '';
+          cellInModal.style.transition = '';
+          cellInModal.style.transformOrigin = '';
+          
+          // Clean up references
+          delete cellInModal.__originalParent;
+          delete cellInModal.__placeholder;
+          
+          // Re-render to fix any layout issues
+          overlay.classList.remove('transitioning'); // Re-enable animations
+          schedule();
+        }, 300);
+      };
+      
+      closeBtn.addEventListener('click', closeModal);
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) closeModal();
+      });
+      
+      // ESC key handler
+      const handleEsc = (e) => {
+        if (e.key === 'Escape' && overlay.classList.contains('is-open')) {
+          closeModal();
+        }
+      };
+      document.addEventListener('keydown', handleEsc);
+      
+      overlay.__closeModal = closeModal;
+      overlay.__handleEsc = handleEsc;
+    }
+    
+    const modal = overlay.querySelector('.trackio-fullscreen-modal');
+    
+    // Close any existing modal
+    if (overlay.classList.contains('is-open')) {
+      overlay.__closeModal();
+      return;
+    }
+    
+    // FLIP animation: First - record initial position
+    const initialRect = root.getBoundingClientRect();
+    
+    // Create placeholder
+    const placeholder = document.createElement('div');
+    placeholder.style.width = root.offsetWidth + 'px';
+    placeholder.style.height = root.offsetHeight + 'px';
+    placeholder.style.visibility = 'hidden';
+    
+    // Store references
+    root.__originalParent = root.parentNode;
+    root.__placeholder = placeholder;
+    
+    // Move cell to modal
+    root.parentNode.insertBefore(placeholder, root);
+    modal.appendChild(root);
+    
+    // Last - record final position  
+    overlay.classList.add('is-open');
+    const finalRect = root.getBoundingClientRect();
+    
+    // Invert - calculate the difference
+    const deltaX = initialRect.left - finalRect.left;
+    const deltaY = initialRect.top - finalRect.top;
+    const scaleX = initialRect.width / finalRect.width;
+    const scaleY = initialRect.height / finalRect.height;
+    
+    // Set initial transform (inverted)
+    root.style.transformOrigin = 'top left';
+    root.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+    
+    // Play - animate to final position
+    overlay.classList.add('transitioning'); // Add class to suppress animations
+    requestAnimationFrame(() => {
+      root.style.transition = 'transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)';
+      root.style.transform = 'translate(0, 0) scale(1, 1)';
+      
+      setTimeout(() => {
+        root.style.transition = '';
+        root.style.transform = '';
+        root.style.transformOrigin = '';
+        
+        // Re-render chart at new size with a small delay to ensure layout is settled
+        setTimeout(() => {
+          overlay.classList.remove('transitioning'); // Re-enable animations
+          schedule();
+        }, 50);
+      }, 300);
+    });
+  }
+</script>
+
+<style>
+  /* =========================
+     CELL BASE STYLES
+     ========================= */
+     
+  :global(.trackio .cell) {
+    border: 1px solid var(--trackio-cell-border);
+    border-radius: 10px;
+    background: var(--trackio-cell-background);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  
+  /* Default cell background - hidden */
+  :global(.trackio .cell-bg) {
+    position: absolute;
+    inset: 10px;
+    pointer-events: none;
+    z-index: 1;
+    border-radius: 4px;
+    display: none;
+  }
+  
+  /* Default cell corners - hidden */
+  :global(.trackio .cell-corners) {
+    position: absolute;
+    inset: 6px;
+    pointer-events: none;
+    z-index: 3;
+    display: none;
+    opacity: 0.85;
+  }
+  
+  :global(.trackio .cell-inner) {
+    position: relative;
+    z-index: 2;
+    padding: 8px 12px 10px 10px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Oblivion theme: adjust inner padding to account for corners and gap */
+  :global(.trackio.theme--oblivion .cell-inner) {
+    padding: var(--trackio-oblivion-hud-corner-size, 8px) 12px 10px var(--trackio-oblivion-hud-gap, 10px);
+  }
+  
+  /* Oblivion theme: show background and corners with proper styling */
+  :global(.trackio.theme--oblivion .cell-bg) {
+    display: block !important;
+    background: 
+      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%);
+  }
+  
+  /* Dark mode: richer gradient for Oblivion */
+  :global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-bg) {
+    background:
+      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, #ffffff 6.5%, transparent), transparent 80%),
+      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, #ffffff 6%, transparent), transparent 80%),
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%);
+  }
+  
+  :global(.trackio.theme--oblivion .cell-corners) {
+    display: block !important;
+    inset: 6px;
+    background:
+      linear-gradient(#000000, #000000) top left / 8px 1px no-repeat,
+      linear-gradient(#000000, #000000) top left / 1px 8px no-repeat,
+      linear-gradient(#000000, #000000) top right / 8px 1px no-repeat,
+      linear-gradient(#000000, #000000) top right / 1px 8px no-repeat,
+      linear-gradient(#000000, #000000) bottom left / 8px 1px no-repeat,
+      linear-gradient(#000000, #000000) bottom left / 1px 8px no-repeat,
+      linear-gradient(#000000, #000000) bottom right / 8px 1px no-repeat,
+      linear-gradient(#000000, #000000) bottom right / 1px 8px no-repeat;
+    opacity: 1;
+    z-index: 3;
+  }
+  
+  /* Dark mode: bright corners for Oblivion */
+  :global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-corners) {
+    background:
+      linear-gradient(#ffffff, #ffffff) top left / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) top left / 1px 8px no-repeat,
+      linear-gradient(#ffffff, #ffffff) top right / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) top right / 1px 8px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom left / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom left / 1px 8px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom right / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom right / 1px 8px no-repeat;
+  }
+  
+  /* Dark mode corners are handled automatically by CSS variables */
+  
+  /* Oblivion theme: cell title with indicator dot */
+  :global(.trackio.theme--oblivion .cell-title) {
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--trackio-oblivion-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .cell-indicator {
+    width: 6px;
+    height: 6px;
+    background: var(--trackio-chart-axis-text);
+    border: 1px solid var(--trackio-chart-axis-stroke);
+    opacity: 0.6;
+    flex-shrink: 0;
+  }
+
+  /* Oblivion theme: adjust cell styling to remove default border only in Oblivion */
+  :global(.trackio.theme--oblivion .cell) {
+    border: none !important;
+    background: transparent !important;
+  }
+  
+  /* Classic theme: ensure borders are visible (redundant but explicit) */
+  :global(.trackio.theme--classic .cell) {
+    border: 1px solid var(--trackio-cell-border) !important;
+    background: var(--trackio-cell-background) !important;
+    border-radius: 10px !important;
+  }
+  
+  :global(.trackio .cell-header) {
+    padding: 8px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  
+  /* Oblivion theme: adjust header padding */
+  :global(.trackio.theme--oblivion .cell-header) {
+    padding: 5px 0px 18px 12px;
+  }
+  
+  :global(.trackio .cell-title) {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--trackio-text-primary);
+    font-family: var(--trackio-font-family);
+  }
+  
+  :global(.trackio .cell-body) {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+  
+  :global(.trackio .cell-body svg) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* Theme: Oblivion overrides for cell layers - styles defined above */
+  
+  /* Force Roboto Mono in Oblivion theme for cell elements */
+  :global(.trackio.theme--oblivion .cell-title) {
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    letter-spacing: 0.12em !important;
+    text-transform: uppercase !important;
+    font-weight: 800 !important;
+    font-size: 12px !important;
+    position: relative;
+    padding-left: 0;
+  }
+  
+  /* Oblivion theme: add indicator dot before title */
+  :global(.trackio.theme--oblivion .cell-title)::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6px;
+    height: 6px;
+    background: var(--trackio-oblivion-primary);
+    border: 1px solid var(--trackio-oblivion-dim);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent) inset;
+    opacity: 0.5;
+  }
+
+  /* Ghost hover effect */
+  :global(.trackio.hovering .ghost) {
+    opacity: 0.2;
+    transition: opacity 0.15s ease;
+  }
+
+  /* Wide cell spans full width */
+  :global(.trackio__grid .cell--wide) {
+    grid-column: 1 / -1;
+  }
+
+  /* Fullscreen button */
+  .cell-fullscreen-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: 0;
+    background: transparent;
+    color: var(--trackio-chart-axis-text);
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: opacity 0.15s ease;
+  }
+  .cell-fullscreen-btn:hover {
+    opacity: 1;
+    /* No background on hover - just opacity change */
+  }
+  .cell-fullscreen-btn svg {
+    width: 18px;
+    height: 18px;
+    fill: var(--trackio-chart-axis-text);
+  }
+
+  /* Fullscreen modal */
+  :global(.trackio-fullscreen-overlay) {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+  :global(.trackio-fullscreen-overlay.is-open) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  :global(.trackio-fullscreen-modal) {
+    position: relative;
+    width: min(95vw, 1400px);
+    height: min(95vh, 900px);
+    background: var(--surface-bg);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+  :global(.trackio-fullscreen-close) {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 40px;
+    height: 40px;
+    border: 0;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    font-size: 20px;
+    transition: background-color 0.15s ease;
+  }
+  :global(.trackio-fullscreen-close:hover) {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  
+  /* Hide fullscreen button when in modal */
+  :global(.trackio-fullscreen-modal .cell-fullscreen-btn) {
+    display: none;
+  }
+  
+  /* Minor ticks styling for logarithmic scales */
+  :global(.trackio .minor-ticks line.minor-tick) {
+    stroke: var(--trackio-chart-axis-stroke);
+    stroke-opacity: 0.4;
+    stroke-width: 0.5px;
+  }
+  
+  /* Oblivion theme: enhanced minor ticks */
+  :global(.trackio.theme--oblivion .minor-ticks line.minor-tick) {
+    stroke: var(--trackio-oblivion-dim);
+    stroke-opacity: 0.6;
+    stroke-width: 0.8px;
+  }
+  
+
+  /* Fullscreen cell takes full modal space */
+  :global(.trackio-fullscreen-modal .cell) {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+  
+  :global(.trackio-fullscreen-modal .cell-inner) {
+    height: 100%;
+  }
+  
+  :global(.trackio-fullscreen-modal .cell-body) {
+    flex: 1;
+    height: calc(100% - 50px); /* Minus header height */
+  }
+  
+  :global(.trackio-fullscreen-modal .cell-body svg) {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: none !important;
+    max-height: none !important;
+  }
+</style>
+
+<div class="cell {wide ? 'cell--wide' : ''}" bind:this={root} data-metric={metricKey} data-title={titleText} data-variant={variant}>
+  <div class="cell-bg"></div>
+  <div class="cell-corners"></div>
+  <div class="cell-inner">
+    <div class="cell-header">
+      <div class="cell-title">
+        {#if variant === 'oblivion'}
+          <span class="cell-indicator"></span>
+        {/if}
+        {titleText}
+      </div>
+      <button class="cell-fullscreen-btn" type="button" on:click={openFullscreen} title="Fullscreen">
+        <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>
+      </button>
+    </div>
+    <div class="cell-body"><div bind:this={body}></div></div>
+  </div>
+</div>
+
+

app/src/components/trackio/Legend.svelte

@@ -0,0 +1,91 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  export let items = [];
+  const dispatch = createEventDispatcher();
+  function enter(name){ dispatch('legend-hover', { name }); }
+  function leave(){ dispatch('legend-leave'); }
+</script>
+
+<div class="legend-bottom">
+  <div class="legend-title">Runs</div>
+  <div class="items">
+    {#each items as it}
+      <div class="item" role="presentation" data-run={it.name} on:mouseenter={() => enter(it.name)} on:mouseleave={leave}>
+        <span class="swatch" style={`background:${it.color}`}></span>
+        <span>{it.name}</span>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  /* =========================
+     LEGEND STYLES
+     ========================= */
+  
+  .legend-bottom { 
+    display: flex; 
+    flex-direction: column; 
+    align-items: center; 
+    gap: 6px; 
+    font-size: 12px; 
+    text-align: center; 
+    width: 80%; 
+    margin: 0 auto; 
+    color: var(--trackio-legend-text);
+    font-family: var(--trackio-font-family);
+  }
+  
+  /* Force Roboto Mono in Oblivion theme */
+  :global(.trackio.theme--oblivion) .legend-bottom,
+  :global(.trackio.theme--oblivion) .legend-title,
+  :global(.trackio.theme--oblivion) .item {
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    letter-spacing: 0.06em;
+  }
+  
+  :global(.trackio.theme--oblivion) .legend-title {
+    font-weight: 900 !important;
+    letter-spacing: 0.18em !important;
+    text-transform: uppercase !important;
+  }
+  
+  .legend-title { 
+    font-size: 12px; 
+    font-weight: 700;
+    color: var(--trackio-legend-text);
+  }
+  
+  .items { 
+    display: flex; 
+    flex-wrap: wrap; 
+    gap: 8px 14px; 
+    justify-content: center; 
+    align-items: center; 
+  }
+  
+  .item { 
+    display: inline-flex; 
+    align-items: center; 
+    gap: 6px; 
+    white-space: nowrap; 
+    cursor: pointer; 
+    padding: 2px 4px; 
+    transition: opacity 0.15s ease;
+    color: var(--trackio-legend-text);
+  }
+  
+  :global(.trackio.hovering) .item.ghost { 
+    opacity: 0.2; 
+  }
+  
+  .swatch { 
+    width: 14px; 
+    height: 14px; 
+    border-radius: 3px; 
+    border: 1px solid var(--trackio-legend-swatch-border); 
+    display: inline-block; 
+  }
+</style>
+
+

app/src/components/trackio/Tooltip.svelte

@@ -0,0 +1,150 @@
+<script>
+  export let visible = false;
+  export let x = -9999;
+  export let y = -9999;
+  export let title = '';
+  export let subtitle = '';
+  export let entries = []; // [{ color, name, valueText }]
+</script>
+
+<div class="d3-tooltip {visible ? 'is-visible' : ''}" style={`transform: translate(${x}px, ${y}px);`}>
+  <div class="d3-tooltip__inner">
+    <div>{@html title}</div>
+    <div>{subtitle}</div>
+    {#each entries as e}
+      <div class="row">
+        <span class="dot" style={`background:${e.color}`}></span>
+        <strong>{e.name}</strong>
+        <span class="val">{e.valueText}</span>
+      </div>
+    {/each}
+  </div>
+  
+</div>
+
+<style>
+  /* Tooltip variables for Oblivion theme */
+  :global(.trackio.theme--oblivion) .d3-tooltip {
+    /* Light mode variables */
+    --tooltip-oblivion-base: #2a2a2a;
+    --tooltip-oblivion-bg-primary: color-mix(in srgb, var(--tooltip-oblivion-base) 15%, transparent);
+    --tooltip-oblivion-bg-secondary: color-mix(in srgb, var(--tooltip-oblivion-base) 10%, transparent);
+    --tooltip-oblivion-bg-base: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+    --tooltip-oblivion-border: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+    --tooltip-oblivion-shadow: color-mix(in srgb, var(--tooltip-oblivion-base) 8%, transparent);
+    --tooltip-oblivion-text: color-mix(in srgb, var(--tooltip-oblivion-base) 90%, transparent);
+    --tooltip-oblivion-line-dark: rgba(0, 0, 0, 0.08);
+    --tooltip-oblivion-line-light: rgba(255, 255, 255, 0.15);
+  }
+  
+  /* Dark mode variables */
+  :global([data-theme="dark"]) :global(.trackio.theme--oblivion) .d3-tooltip {
+    --tooltip-oblivion-base: #ffffff;
+    --tooltip-oblivion-bg-primary: color-mix(in srgb, var(--tooltip-oblivion-base) 15%, transparent);
+    --tooltip-oblivion-bg-secondary: color-mix(in srgb, var(--tooltip-oblivion-base) 10%, transparent);
+    --tooltip-oblivion-bg-base: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+    --tooltip-oblivion-border: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+    --tooltip-oblivion-shadow: color-mix(in srgb, var(--tooltip-oblivion-base)8%, transparent);
+    --tooltip-oblivion-text: color-mix(in srgb, var(--tooltip-oblivion-base) 90%, transparent);
+    --tooltip-oblivion-line-dark: rgba(0, 0, 0, 0.15);
+    --tooltip-oblivion-line-light: rgba(255, 255, 255, 0.08);
+  }
+
+  /* Classic tooltip styling */
+  .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 10px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
+    opacity: 0;
+    transition: opacity .12s ease;
+    z-index: var(--z-tooltip, 50);
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+  .d3-tooltip.is-visible { opacity: 1; }
+  .d3-tooltip__inner { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
+  .d3-tooltip__inner > div:first-child { font-weight: 800; letter-spacing: 0.1px; margin-bottom: 0; }
+  .d3-tooltip__inner > div:nth-child(2) { font-size: 11px; color: var(--muted-color); display: block; margin-top: -4px; margin-bottom: 2px; letter-spacing: 0.1px; }
+  .d3-tooltip__inner > div.row { padding-top: 6px; border-top: 1px solid var(--border-color); display:flex; align-items:center; gap:8px; white-space:nowrap; }
+  .dot { display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid var(--border-color); }
+  .val { margin-left:auto; text-align:right; }
+
+
+  /* Oblivion tooltip styling */
+  :global(.trackio.theme--oblivion) .d3-tooltip {
+    border-radius: 8px;
+    border: none;
+    background: 
+      radial-gradient(400px 100px at 30% 0%, var(--tooltip-oblivion-bg-primary), transparent 70%),
+      radial-gradient(300px 80px at 70% 100%, var(--tooltip-oblivion-bg-secondary), transparent 70%),
+      var(--tooltip-oblivion-bg-base);
+    color: var(--tooltip-oblivion-text);
+    box-shadow: 
+      0 0 0 1px var(--tooltip-oblivion-border),
+      0 8px 40px var(--tooltip-oblivion-shadow),
+      0 2px 8px rgba(0, 0, 0, 0.05);
+    backdrop-filter: saturate(1.1) blur(10px);
+    opacity: 0.5;
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip.is-visible {
+    opacity: 1;
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__inner > div:first-child {
+    font-weight: 900;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--tooltip-oblivion-text);
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__inner > div:nth-child(2) {
+    color: var(--tooltip-oblivion-text);
+    opacity: 0.4;
+    letter-spacing: 0.06em;
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row {
+    position: relative;
+    padding-top: 10px;
+    margin-top: 6px;
+    border-top: none;
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 1px;
+    background: var(--tooltip-oblivion-line-dark);
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 1px;
+    height: 1px;
+    background: var(--tooltip-oblivion-line-light);
+  }
+  
+  :global(.trackio.theme--oblivion) .dot {
+    border-radius: 2px;
+    border: 1px solid var(--trackio-chart-axis-stroke);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--trackio-oblivion-base) 20%, transparent) inset;
+  }
+</style>
+
+

app/src/components/trackio/Trackio.svelte

@@ -0,0 +1,565 @@
+<script>
+  import * as d3 from 'd3';
+  import { formatAbbrev, smoothMetricData } from './chart-utils.js';
+  import { generateRunNames, genCurves } from './data-generator.js';
+  import Legend from './Legend.svelte';
+  import Cell from './Cell.svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import { jitterTrigger } from './store.js';
+
+  export let variant = 'classic'; // 'classic' | 'oblivion'
+  export let normalizeLoss = true;
+  export let logScaleX = false;
+  export let smoothing = false;
+
+  let hostEl;
+  let gridEl;
+  let legendItems = [];
+  const cellsDef = [
+    { metric:'epoch', title:'Epoch' },
+    { metric:'train_accuracy', title:'Train accuracy' },
+    { metric:'train_loss', title:'Train loss' },
+    { metric:'val_accuracy', title:'Val accuracy' },
+    { metric:'val_loss', title:'Val loss', wide:true }
+  ];
+  let preparedData = {};
+  let colorsByRun = {};
+  
+  // Variables for data management (will be initialized in onMount)
+  let dataByMetric = new Map();
+  let metricsToDraw = [];
+  let currentRunList = [];
+  let cycleIdx = 2;
+  
+  // Dynamic color palette using color-palettes.js helper
+  let dynamicPalette = ['#0ea5e9', '#8b5cf6', '#f59e0b', '#ef4444', '#10b981', '#f97316', '#3b82f6', '#8b5ad6']; // fallback
+  
+  const updateDynamicPalette = () => {
+    if (typeof window !== 'undefined' && window.ColorPalettes && currentRunList.length > 0) {
+      try {
+        dynamicPalette = window.ColorPalettes.getColors('categorical', currentRunList.length);
+      } catch (e) {
+        console.warn('Failed to generate dynamic palette:', e);
+        // Keep fallback palette
+      }
+    }
+  };
+  
+  const colorForRun = (name) => {
+    const idx = currentRunList.indexOf(name);
+    return idx >= 0 ? dynamicPalette[idx % dynamicPalette.length] : '#999';
+  };
+  
+
+  // Jitter function - generates completely new data with new runs
+  function jitterData(){
+    console.log('jitterData called - generating new data with random number of runs'); // Debug log
+    
+    // Generate new random data with weighted probability for fewer runs
+    // Higher probability for 2-3 runs, lower for 4-5-6 runs
+    const rand = Math.random();
+    let wantRuns;
+    if (rand < 0.4) wantRuns = 2;        // 40% chance
+    else if (rand < 0.7) wantRuns = 3;   // 30% chance  
+    else if (rand < 0.85) wantRuns = 4;  // 15% chance
+    else if (rand < 0.95) wantRuns = 5;  // 10% chance
+    else wantRuns = 6;                   // 5% chance
+    const runsSim = generateRunNames(wantRuns);
+    const rnd = (min,max)=> Math.floor(min + Math.random()*(max-min+1));
+    let stepsCount = rnd(80, 240); // Random number of steps
+    const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+    const nextByMetric = new Map();
+    const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
+    
+    // Initialize data structure
+    TARGET_METRICS.forEach((tgt) => {
+      const map = {};
+      runsSim.forEach((r) => { map[r] = []; });
+      nextByMetric.set(tgt, map);
+    });
+    
+    // Generate curves for each run
+    runsSim.forEach(run => {
+      const curves = genCurves(stepsCount);
+      steps.forEach((s,i)=>{
+        nextByMetric.get('epoch')[run].push({ step:s, value:s });
+        nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
+        nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
+        nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
+        nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
+      });
+    });
+    
+    // Update all reactive data
+    nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
+    metricsToDraw = TARGET_METRICS;
+    currentRunList = runsSim.slice();
+    updateDynamicPalette(); // Generate new colors based on run count
+    legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
+    updatePreparedData();
+    colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
+    
+    console.log(`jitterData completed - generated ${wantRuns} runs with ${stepsCount} steps`); // Debug log
+  }
+
+  // Public API: allow external theme switch
+  function setTheme(name){
+    variant = name === 'oblivion' ? 'oblivion' : 'classic';
+    updateThemeClass();
+    
+    // Debug log for font application
+    if (typeof window !== 'undefined') {
+      console.log(`Theme switched to: ${variant}`);
+      if (hostEl) {
+        const computedStyle = getComputedStyle(hostEl);
+        const appliedFont = computedStyle.fontFamily;
+        console.log(`Applied font-family: ${appliedFont}`);
+      }
+    }
+  }
+
+  // Public API: allow external log scale X toggle
+  function setLogScaleX(enabled) {
+    logScaleX = enabled;
+    console.log(`Log scale X set to: ${logScaleX}`);
+  }
+
+  // Public API: allow external smoothing toggle
+  function setSmoothing(enabled) {
+    smoothing = enabled;
+    console.log(`Smoothing set to: ${smoothing}`);
+    // Re-prepare data with smoothing applied
+    updatePreparedData();
+  }
+
+  // Update prepared data with optional smoothing
+  let preparedRawData = {}; // Store original data for background display
+  
+  function updatePreparedData() {
+    const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
+    let dataToUse = {};
+    let rawDataToStore = {};
+    
+    TARGET_METRICS.forEach(metric => {
+      const rawData = dataByMetric.get(metric);
+      if (rawData) {
+        // Store original data
+        rawDataToStore[metric] = rawData;
+        
+        // Apply smoothing if enabled (except for epoch which should stay exact)
+        dataToUse[metric] = (smoothing && metric !== 'epoch') 
+          ? smoothMetricData(rawData, 5) // Window size of 5
+          : rawData;
+      }
+    });
+    
+    preparedData = dataToUse;
+    preparedRawData = rawDataToStore;
+    console.log(`Prepared data updated, smoothing: ${smoothing}`);
+  }
+
+  function updateThemeClass(){
+    if (!hostEl) return;
+    hostEl.classList.toggle('theme--classic', variant === 'classic');
+    hostEl.classList.toggle('theme--oblivion', variant === 'oblivion');
+    hostEl.setAttribute('data-variant', variant);
+  }
+
+  $: updateThemeClass();
+
+
+  // Chart logic now handled by Cell.svelte
+
+  let cleanup = null;
+  onMount(() => {
+    if (!hostEl || !gridEl) return;
+    hostEl.__setTheme = setTheme;
+
+    // Jitter & Simulate functions
+    function rebuildLegend(){ 
+      updateDynamicPalette(); // Update colors when adding new data
+      legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) })); 
+    }
+    
+    function simulateData(){
+      // Generate new random data with weighted probability for fewer runs
+      // Higher probability for 2-3 runs, lower for 4-5-6 runs
+      const rand = Math.random();
+      let wantRuns;
+      if (rand < 0.4) wantRuns = 2;        // 40% chance
+      else if (rand < 0.7) wantRuns = 3;   // 30% chance  
+      else if (rand < 0.85) wantRuns = 4;  // 15% chance
+      else if (rand < 0.95) wantRuns = 5;  // 10% chance
+      else wantRuns = 6;                   // 5% chance
+      const runsSim = generateRunNames(wantRuns);
+      const rnd = (min,max)=> Math.floor(min + Math.random()*(max-min+1));
+      let stepsCount = 16;
+      if (cycleIdx === 0) stepsCount = rnd(4, 12); else if (cycleIdx === 1) stepsCount = rnd(16, 48); else stepsCount = rnd(80, 240);
+      cycleIdx = (cycleIdx + 1) % 3;
+      const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+      const nextByMetric = new Map();
+      const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
+      const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
+      mList.forEach((tgt) => {
+        const map = {};
+        runsSim.forEach((r) => { map[r] = []; });
+        nextByMetric.set(tgt, map);
+      });
+      runsSim.forEach(run => {
+        const curves = genCurves(stepsCount);
+        steps.forEach((s,i)=>{
+          if (mList.includes('epoch')) nextByMetric.get('epoch')[run].push({ step:s, value:s });
+          if (mList.includes('train_accuracy')) nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
+          if (mList.includes('val_accuracy')) nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
+          if (mList.includes('train_loss')) nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
+          if (mList.includes('val_loss')) nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
+        });
+      });
+      nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
+      currentRunList = runsSim.slice();
+      rebuildLegend();
+      updatePreparedData();
+      updateDynamicPalette(); // Update colors when rebuilding
+      colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
+    }
+    // No need for event listeners anymore - we'll use reactive statement
+
+    // Start with level 3 long synthetic data for consistency
+    simulateData();
+    // Svelte Cells will react to preparedData/colorsByRun updates
+
+    cleanup = () => { 
+      // No cleanup needed for reactive statements
+    };
+  });
+
+  onDestroy(() => { if (cleanup) cleanup(); });
+
+  // Expose instance for debugging and external theme control
+  onMount(() => {
+    window.trackioInstance = { jitterData };
+    if (hostEl) {
+      hostEl.__trackioInstance = { setTheme, setLogScaleX, setSmoothing, jitterData };
+    }
+    
+    // Initialize dynamic palette
+    updateDynamicPalette();
+    
+    // Listen for palette updates from color-palettes.js
+    const handlePaletteUpdate = () => {
+      updateDynamicPalette();
+      // Rebuild legend and colors if needed
+      if (currentRunList.length > 0) {
+        legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
+        colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
+      }
+    };
+    
+    document.addEventListener('palettes:updated', handlePaletteUpdate);
+    
+    // Cleanup listener on destroy
+    return () => {
+      document.removeEventListener('palettes:updated', handlePaletteUpdate);
+    };
+  });
+
+  // React to jitter trigger from store
+  $: {
+    console.log('Reactive statement triggered, jitterTrigger value:', $jitterTrigger);
+    if ($jitterTrigger > 0) {
+      console.log('Jitter trigger activated:', $jitterTrigger, 'calling jitterData()');
+      jitterData();
+    }
+  }
+
+  // Legend ghost helpers (hover effects)
+  function ghostRun(run){
+    try {
+      hostEl.classList.add('hovering');
+      
+      // Ghost the chart lines and points
+      hostEl.querySelectorAll('.cell').forEach(cell => {
+        cell.querySelectorAll('svg .lines path.run-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
+        cell.querySelectorAll('svg .points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run));
+      });
+      
+      // Ghost the legend items
+      hostEl.querySelectorAll('.legend-bottom .item').forEach(item => {
+        const itemRun = item.getAttribute('data-run');
+        item.classList.toggle('ghost', itemRun !== run);
+      });
+    } catch(_) {}
+  }
+  function clearGhost(){
+    try {
+      hostEl.classList.remove('hovering');
+      
+      // Clear ghost from chart lines and points
+      hostEl.querySelectorAll('.cell').forEach(cell => {
+        cell.querySelectorAll('svg .lines path.run-line').forEach(p => p.classList.remove('ghost'));
+        cell.querySelectorAll('svg .points circle.pt').forEach(c => c.classList.remove('ghost'));
+      });
+      
+      // Clear ghost from legend items
+      hostEl.querySelectorAll('.legend-bottom .item').forEach(item => {
+        item.classList.remove('ghost');
+      });
+    } catch(_) {}
+  }
+</script>
+
+<div class="trackio theme--classic" bind:this={hostEl} data-variant={variant}>
+  <div class="trackio__header">
+    <Legend items={legendItems} on:legend-hover={(e) => { const run = e?.detail?.name; if (!run) return; ghostRun(run); }} on:legend-leave={() => { clearGhost(); }} />
+  </div>
+  <div class="trackio__grid" bind:this={gridEl}>
+    {#each cellsDef as c}
+      <Cell metricKey={c.metric} titleText={c.title} wide={c.wide} variant={variant} normalizeLoss={normalizeLoss} logScaleX={logScaleX} smoothing={smoothing} metricData={(preparedData && preparedData[c.metric]) || {}} rawMetricData={(preparedRawData && preparedRawData[c.metric]) || {}} colorForRun={(name)=> colorsByRun[name] || '#999'} hostEl={hostEl} />
+    {/each}
+  </div>
+</div>
+
+<style>
+  /* =========================
+     TRACKIO THEME SYSTEM
+     ========================= */
+
+  /* Font imports for themes - ensure Roboto Mono is loaded for Oblivion theme */
+  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');
+  
+  /* Fallback font-face declaration */
+  @font-face {
+    font-family: 'Roboto Mono Fallback';
+    src: url('https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4AJi8SJQt.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  /* Base variables - all themes inherit these */
+  .trackio {
+    position: relative;
+    --z-tooltip: 50;
+    --z-overlay: 99999999;
+    
+    /* Typography */
+    --trackio-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    --trackio-font-weight-normal: 400;
+    --trackio-font-weight-medium: 600;
+    --trackio-font-weight-bold: 700;
+    
+    /* Apply font-family to root element */
+    font-family: var(--trackio-font-family);
+    
+    /* Base color system for Classic theme */
+    --trackio-base: #323232;
+    --trackio-primary: var(--trackio-base);
+    --trackio-dim: color-mix(in srgb, var(--trackio-base) 28%, transparent);
+    --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
+    --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
+    
+    /* Chart rendering */
+    --trackio-chart-grid-type: 'lines'; /* 'lines' | 'dots' */
+    --trackio-chart-axis-stroke: var(--trackio-dim);
+    --trackio-chart-axis-text: var(--trackio-text);
+    --trackio-chart-grid-stroke: var(--trackio-subtle);
+    --trackio-chart-grid-opacity: 1;
+  }
+  
+  /* Dark mode overrides for Classic theme */
+  :global([data-theme="dark"]) .trackio.theme--classic {
+    --trackio-base: #ffffff;
+    --trackio-primary: var(--trackio-base);
+    --trackio-dim: color-mix(in srgb, var(--trackio-base) 25%, transparent);
+    --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
+    --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
+    
+    /* Cell background for dark mode */
+    --trackio-cell-background: rgba(255, 255, 255, 0.03);
+  }
+  
+  .trackio.theme--classic {
+    /* Cell styling */
+    --trackio-cell-background: rgba(0, 0, 0, 0.02);
+    --trackio-cell-border: var(--border-color, rgba(0, 0, 0, 0.1));
+    --trackio-cell-corner-inset: 0px;
+    --trackio-cell-gap: 12px;
+    
+    /* Typography */
+    --trackio-text-primary: var(--text-color, rgba(0, 0, 0, 0.9));
+    --trackio-text-secondary: var(--muted-color, rgba(0, 0, 0, 0.6));
+    --trackio-text-accent: var(--primary-color, #E889AB);
+    
+    /* Tooltip */
+    --trackio-tooltip-background: var(--surface-bg, white);
+    --trackio-tooltip-border: var(--border-color, rgba(0, 0, 0, 0.1));
+    --trackio-tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    
+    /* Legend */
+    --trackio-legend-text: var(--text-color, rgba(0, 0, 0, 0.9));
+    --trackio-legend-swatch-border: var(--border-color, rgba(0, 0, 0, 0.1));
+  }
+
+  /* Dark mode adjustments */
+  :global([data-theme="dark"]) .trackio {
+    --trackio-chart-axis-stroke: rgba(255, 255, 255, 0.18);
+    --trackio-chart-axis-text: rgba(255, 255, 255, 0.60);
+    --trackio-chart-grid-stroke: rgba(255, 255, 255, 0.08);
+  }
+
+  /* =========================
+     THEME: CLASSIC (Default)
+     ========================= */
+  
+  .trackio.theme--classic {
+    /* Keep default values - no overrides needed */
+  }
+
+  /* =========================
+     THEME: OBLIVION
+     ========================= */
+  
+  .trackio.theme--oblivion {
+    /* Core oblivion color system - Light mode: darker colors for visibility */
+    --trackio-oblivion-base: #2a2a2a;
+    --trackio-oblivion-primary: var(--trackio-oblivion-base);
+    --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 30%, transparent);
+    --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
+    --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
+    
+    /* Chart rendering overrides */
+    --trackio-chart-grid-type: 'dots';
+    --trackio-chart-axis-stroke: var(--trackio-oblivion-dim);
+    --trackio-chart-axis-text: var(--trackio-oblivion-primary);
+    --trackio-chart-grid-stroke: var(--trackio-oblivion-dim);
+    --trackio-chart-grid-opacity: 0.6;
+  }
+  
+  /* Dark mode overrides for Oblivion theme */
+  :global([data-theme="dark"]) .trackio.theme--oblivion {
+    --trackio-oblivion-base: #ffffff;
+    --trackio-oblivion-primary: var(--trackio-oblivion-base);
+    --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent);
+    --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
+    --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
+  }
+  
+  .trackio.theme--oblivion {
+    /* Cell styling overrides */
+    --trackio-cell-background: var(--trackio-oblivion-subtle);
+    --trackio-cell-border: var(--trackio-oblivion-dim);
+    --trackio-cell-corner-inset: 6px;
+    --trackio-cell-gap: 0px;
+    
+    /* HUD-specific variables */
+    --trackio-oblivion-hud-gap: 10px;
+    --trackio-oblivion-hud-corner-size: 8px;
+    --trackio-oblivion-hud-bg-gradient: 
+      radial-gradient(1200px 200px at 20% -10%, var(--trackio-oblivion-ghost), transparent 80%),
+      radial-gradient(900px 200px at 80% 110%, var(--trackio-oblivion-ghost), transparent 80%);
+    
+    /* Typography overrides */
+    --trackio-text-primary: var(--trackio-oblivion-primary);
+    --trackio-text-secondary: var(--trackio-oblivion-dim);
+    --trackio-text-accent: var(--trackio-oblivion-primary);
+    
+    /* Tooltip overrides */
+    --trackio-tooltip-background: var(--trackio-oblivion-subtle);
+    --trackio-tooltip-border: var(--trackio-oblivion-dim);
+    --trackio-tooltip-shadow: 
+      0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent),
+      0 2px 8px color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent);
+    
+    /* Legend overrides */
+    --trackio-legend-text: var(--trackio-oblivion-primary);
+    --trackio-legend-swatch-border: var(--trackio-oblivion-dim);
+    
+    /* Font styling overrides */
+    --trackio-font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-family: var(--trackio-font-family) !important;
+    color: var(--trackio-text-primary);
+  }
+
+  /* Force Roboto Mono application in Oblivion theme */
+  .trackio.theme--oblivion,
+  .trackio.theme--oblivion * {
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  }
+  
+  /* Specific overrides for different elements in Oblivion */
+  .trackio.theme--oblivion .cell-title,
+  .trackio.theme--oblivion .legend-bottom,
+  .trackio.theme--oblivion .legend-title,
+  .trackio.theme--oblivion .item {
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  }
+
+  /* Dark mode adjustments for Oblivion */
+  :global([data-theme="dark"]) .trackio.theme--oblivion {
+    --trackio-oblivion-base: #ffffff;
+    --trackio-oblivion-hud-bg-gradient: 
+      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, var(--trackio-oblivion-base) 6.5%, transparent), transparent 80%),
+      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent), transparent 80%),
+      linear-gradient(180deg, color-mix(in srgb, var(--trackio-oblivion-base) 3.5%, transparent), transparent 45%);
+    
+    --trackio-tooltip-shadow: 
+      0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 5%, transparent),
+      0 2px 8px color-mix(in srgb, black 10%, transparent);
+    
+    background: #0f1115;
+  }
+
+  /* =========================
+     LAYOUT & COMPONENTS
+     ========================= */
+
+  .trackio__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--trackio-cell-gap);
+  }
+  
+  @media (max-width: 980px) {
+    .trackio__grid { grid-template-columns: 1fr; }
+  }
+
+  .trackio__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 12px;
+    margin: 0 0 10px 0;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  /* Legacy axis/grid selectors - for compatibility with Cell.svelte */
+  .trackio .axes path,
+  .trackio .axes line {
+    stroke: var(--trackio-chart-axis-stroke);
+  }
+  
+  .trackio .axes text {
+    fill: var(--trackio-chart-axis-text);
+    font-family: var(--trackio-font-family);
+  }
+  
+  /* Force font-family for SVG text in Oblivion */
+  .trackio.theme--oblivion .axes text {
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  }
+  
+  .trackio .grid line {
+    stroke: var(--trackio-chart-grid-stroke);
+    opacity: var(--trackio-chart-grid-opacity);
+  }
+
+  /* Grid type switching */
+  .trackio .grid-dots { display: none; }
+  .trackio.theme--oblivion .grid { display: none; }
+  .trackio.theme--oblivion .grid-dots { display: block; }
+  .trackio.theme--oblivion .cell-bg,
+  .trackio.theme--oblivion .cell-corners { display: block; }
+</style>
+
+

app/src/components/trackio/chart-utils.js

@@ -0,0 +1,423 @@
+// Chart utilities for axis formatting and tick generation
+
+export 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);
+};
+
+/**
+ * Enhanced formatting for logarithmic scale ticks
+ * @param {number} value - The tick value
+ * @param {boolean} isLogScale - Whether this is for a log scale
+ * @returns {string} Formatted tick label
+ */
+export const formatLogTick = (value, isLogScale = false) => {
+  if (!isLogScale) return formatAbbrev(value);
+  
+  const num = Number(value);
+  if (!Number.isFinite(num)) return String(value);
+  
+  // Check if it's a power of 10
+  const log10 = Math.log10(Math.abs(num));
+  const isPowerOf10 = Math.abs(log10 % 1) < 0.01;
+  
+  if (isPowerOf10) {
+    // Format powers of 10 more prominently
+    const power = Math.round(log10);
+    if (power >= 0 && power <= 6) {
+      // For small powers, show the actual number
+      return formatAbbrev(value);
+    } else {
+      // For very large/small powers, use scientific notation
+      return `10^${power}`;
+    }
+  }
+  
+  // For non-powers of 10, use regular formatting
+  return formatAbbrev(value);
+};
+
+/**
+ * Generates optimized tick positions for logarithmic scales
+ * @param {Array} stepValues - Array of actual step values (not indices)
+ * @param {number} minTicks - Minimum number of ticks desired
+ * @param {number} maxTicks - Maximum number of ticks allowed
+ * @param {number} width - Chart width in pixels
+ * @param {Function} scale - D3 log scale function
+ * @returns {Object} Object with major and minor tick positions
+ */
+export function generateLogTicks(stepValues, minTicks, maxTicks, width, scale) {
+  if (!stepValues || stepValues.length === 0 || !scale) return { major: [], minor: [] };
+  
+  const minPixelSpacing = 50; // Reduced for better density
+  const minorPixelSpacing = 25; // Spacing for minor ticks
+  const maxTicksFromWidth = Math.max(4, Math.floor(width / minPixelSpacing));
+  const targetMaxTicks = Math.min(maxTicks, maxTicksFromWidth);
+  
+  // Debug logging
+  console.log('🎯 generateLogTicks called:', {
+    stepCount: stepValues.length,
+    stepRange: [Math.min(...stepValues), Math.max(...stepValues)],
+    targetTicks: [minTicks, targetMaxTicks],
+    width
+  });
+  
+  const domain = scale.domain();
+  const [minVal, maxVal] = domain;
+  
+  // Calculate the range in log space
+  const logMin = Math.log10(minVal);
+  const logMax = Math.log10(maxVal);
+  const logRange = logMax - logMin;
+  
+  // Generate major ticks (powers of 10)
+  const majorCandidates = new Set();
+  const minorCandidates = new Set();
+  
+  // Always add domain boundaries
+  majorCandidates.add(minVal);
+  majorCandidates.add(maxVal);
+  
+  const startPower = Math.floor(logMin);
+  const endPower = Math.ceil(logMax);
+  
+  // Major ticks: powers of 10
+  for (let power = startPower; power <= endPower; power++) {
+    const value = Math.pow(10, power);
+    if (value >= minVal && value <= maxVal) {
+      majorCandidates.add(value);
+    }
+  }
+  
+  // If we have space, add more major ticks (2x, 5x)
+  if (logRange > 0.7) {
+    for (let power = startPower; power <= endPower; power++) {
+      const base = Math.pow(10, power);
+      [2, 5].forEach(multiplier => {
+        const value = base * multiplier;
+        if (value >= minVal && value <= maxVal) {
+          majorCandidates.add(value);
+        }
+      });
+    }
+  }
+  
+  // Minor ticks: intermediate values to show log progression
+  for (let power = startPower; power <= endPower; power++) {
+    const base = Math.pow(10, power);
+    // Add 3x, 4x, 6x, 7x, 8x, 9x for visual density
+    [3, 4, 6, 7, 8, 9].forEach(multiplier => {
+      const value = base * multiplier;
+      if (value >= minVal && value <= maxVal && !majorCandidates.has(value)) {
+        minorCandidates.add(value);
+      }
+    });
+  }
+  
+  // Match candidates to actual step values
+  const matchToStepValues = (candidates) => {
+    return Array.from(candidates).map(candidate => {
+      let closest = stepValues[0];
+      let minRelativeDistance = Math.abs(stepValues[0] - candidate) / Math.max(stepValues[0], candidate);
+      
+      stepValues.forEach(step => {
+        const relativeDistance = Math.abs(step - candidate) / Math.max(step, candidate);
+        if (relativeDistance < minRelativeDistance) {
+          minRelativeDistance = relativeDistance;
+          closest = step;
+        }
+      });
+      
+      // Only include if reasonable match (20% tolerance for minor, 15% for major)
+      const isPowerOf10 = Math.abs(Math.log10(candidate) % 1) < 0.01;
+      const tolerance = majorCandidates.has(candidate) ? 0.15 : 0.20;
+      
+      if (minRelativeDistance < tolerance || isPowerOf10) {
+        return closest;
+      }
+      return null;
+    }).filter(v => v !== null);
+  };
+  
+  let majorTicks = Array.from(new Set(matchToStepValues(majorCandidates))).sort((a, b) => a - b);
+  let minorTicks = Array.from(new Set(matchToStepValues(minorCandidates))).sort((a, b) => a - b);
+  
+  // Filter major ticks by pixel spacing
+  const filteredMajorTicks = [];
+  majorTicks.forEach(tick => {
+    if (filteredMajorTicks.length === 0) {
+      filteredMajorTicks.push(tick);
+    } else {
+      const prevTick = filteredMajorTicks[filteredMajorTicks.length - 1];
+      const pixelDistance = Math.abs(scale(tick) - scale(prevTick));
+      if (pixelDistance >= minPixelSpacing) {
+        filteredMajorTicks.push(tick);
+      }
+    }
+  });
+  
+  // Filter minor ticks by pixel spacing and ensure they don't conflict with major ticks
+  const filteredMinorTicks = [];
+  minorTicks.forEach(tick => {
+    // Skip if too close to any major tick
+    const tooCloseToMajor = filteredMajorTicks.some(majorTick => {
+      const distance = Math.abs(scale(tick) - scale(majorTick));
+      return distance < minorPixelSpacing;
+    });
+    
+    if (!tooCloseToMajor) {
+      // Check spacing with previous minor tick
+      if (filteredMinorTicks.length === 0) {
+        filteredMinorTicks.push(tick);
+      } else {
+        const prevTick = filteredMinorTicks[filteredMinorTicks.length - 1];
+        const pixelDistance = Math.abs(scale(tick) - scale(prevTick));
+        if (pixelDistance >= minorPixelSpacing) {
+          filteredMinorTicks.push(tick);
+        }
+      }
+    }
+  });
+  
+  const result = {
+    major: filteredMajorTicks.length >= 2 ? filteredMajorTicks : [minVal, maxVal],
+    minor: filteredMinorTicks
+  };
+  
+  // Debug logging
+  console.log('🎯 generateLogTicks result:', {
+    logRange: logRange.toFixed(2),
+    majorCount: result.major.length,
+    minorCount: result.minor.length,
+    majorTicks: result.major,
+    minorTicks: result.minor
+  });
+  
+  return result;
+}
+
+/**
+ * Generates intelligent tick positions for X-axis with nice intervals
+ * @param {Array} steps - Array of step values (e.g., [1, 2, 3, ..., 100])
+ * @param {number} minTicks - Minimum number of ticks desired
+ * @param {number} maxTicks - Maximum number of ticks allowed
+ * @param {number} width - Chart width in pixels
+ * @returns {Array} Array of step indices for tick positions
+ */
+export function generateSmartTicks(steps, minTicks, maxTicks, width) {
+  if (!steps || steps.length === 0) return [];
+  
+  const totalSteps = steps.length;
+  const minPixelSpacing = 75; // Slightly reduced minimum spacing to allow more ticks
+  const maxTicksFromWidth = Math.max(3, Math.floor(width / minPixelSpacing));
+  
+  // Function to check if ticks would be too close (minimum step difference)
+  const getMinStepDifference = (totalSteps, width) => {
+    const pixelsPerStep = width / (totalSteps - 1);
+    return Math.ceil(minPixelSpacing / pixelsPerStep);
+  };
+  
+  const minStepDiff = getMinStepDifference(totalSteps, width);
+  const maxPossibleTicks = Math.floor((totalSteps - 1) / minStepDiff) + 1;
+  
+  // Ensure we aim for at least 5 ticks if space permits
+  const targetMinTicks = Math.min(Math.max(minTicks, 5), maxPossibleTicks, totalSteps);
+  const targetMaxTicks = Math.min(maxTicks, maxTicksFromWidth, maxPossibleTicks);
+  
+  // Start with first and last
+  if (targetMinTicks <= 2 || totalSteps <= 2) {
+    return [0, totalSteps - 1];
+  }
+  
+  // Helper to validate spacing
+  const hasValidSpacing = (ticks) => {
+    for (let i = 1; i < ticks.length; i++) {
+      if (ticks[i] - ticks[i-1] < minStepDiff) return false;
+    }
+    return true;
+  };
+  
+  // Try nice intervals first
+  const candidateIntervals = [];
+  const niceIntervals = [1, 2, 5, 10, 20, 25, 50, 100, 200, 250, 500, 1000];
+  
+  for (const interval of niceIntervals) {
+    if (interval >= totalSteps) continue;
+    
+    const candidateTicks = [0];
+    const firstStepValue = steps[0];
+    const lastStepValue = steps[totalSteps - 1];
+    const firstNiceValue = Math.ceil(firstStepValue / interval) * interval;
+    
+    // Add ticks for nice step values
+    for (let niceValue = firstNiceValue; niceValue < lastStepValue; niceValue += interval) {
+      let closestIndex = 0;
+      let minDist = Infinity;
+      for (let i = 0; i < steps.length; i++) {
+        const dist = Math.abs(steps[i] - niceValue);
+        if (dist < minDist) {
+          minDist = dist;
+          closestIndex = i;
+        }
+      }
+      
+      // Be more permissive with matching (15% instead of 10%)
+      if (minDist <= interval * 0.15 && closestIndex > 0 && closestIndex < totalSteps - 1) {
+        candidateTicks.push(closestIndex);
+      }
+    }
+    
+    candidateTicks.push(totalSteps - 1);
+    const uniqueTicks = [...new Set(candidateTicks)].sort((a,b) => a-b);
+    
+    if (hasValidSpacing(uniqueTicks) && uniqueTicks.length >= 3) {
+      candidateIntervals.push({
+        interval: interval,
+        ticks: uniqueTicks,
+        count: uniqueTicks.length,
+        niceness: (interval <= 10 ? 100 : (interval <= 50 ? 50 : (interval <= 100 ? 25 : 10)))
+      });
+    }
+  }
+  
+  // Force generation of ticks if we don't have enough nice ones
+  if (candidateIntervals.length === 0 || candidateIntervals.every(c => c.count < targetMinTicks)) {
+    // Try multiple approaches to get targetMinTicks
+    for (let targetCount = Math.min(targetMinTicks, maxPossibleTicks); targetCount >= 3; targetCount--) {
+      // Approach 1: Even distribution
+      const evenSpacing = Math.floor((totalSteps - 1) / (targetCount - 1));
+      const evenTicks = [];
+      for (let i = 0; i < targetCount - 1; i++) {
+        evenTicks.push(i * evenSpacing);
+      }
+      evenTicks.push(totalSteps - 1);
+      
+      if (hasValidSpacing(evenTicks)) {
+        candidateIntervals.push({
+          interval: evenSpacing,
+          ticks: evenTicks,
+          count: evenTicks.length,
+          niceness: 5 // Medium priority
+        });
+        break; // Found a good solution
+      }
+      
+      // Approach 2: Try to fit exactly targetCount ticks with optimal spacing
+      if (targetCount <= maxPossibleTicks) {
+        const optimalSpacing = Math.max(minStepDiff, Math.floor((totalSteps - 1) / (targetCount - 1)));
+        const spacedTicks = [0];
+        let currentPos = 0;
+        
+        for (let i = 1; i < targetCount - 1; i++) {
+          currentPos += optimalSpacing;
+          if (currentPos < totalSteps - 1) {
+            spacedTicks.push(Math.min(currentPos, totalSteps - 1 - minStepDiff));
+          }
+        }
+        spacedTicks.push(totalSteps - 1);
+        
+        const uniqueSpacedTicks = [...new Set(spacedTicks)].sort((a,b) => a-b);
+        if (hasValidSpacing(uniqueSpacedTicks) && uniqueSpacedTicks.length >= targetCount - 1) {
+          candidateIntervals.push({
+            interval: optimalSpacing,
+            ticks: uniqueSpacedTicks,
+            count: uniqueSpacedTicks.length,
+            niceness: 3 // Lower priority than nice intervals
+          });
+          break;
+        }
+      }
+    }
+  }
+  
+  // Absolute fallback
+  if (candidateIntervals.length === 0) {
+    const middle = Math.floor(totalSteps / 2);
+    if (middle !== 0 && middle !== totalSteps - 1 && 
+        middle - 0 >= minStepDiff && totalSteps - 1 - middle >= minStepDiff) {
+      return [0, middle, totalSteps - 1];
+    }
+    return [0, totalSteps - 1];
+  }
+  
+  // Sort: prioritize having enough ticks, then niceness
+  candidateIntervals.sort((a, b) => {
+    const aHasEnoughTicks = a.count >= targetMinTicks;
+    const bHasEnoughTicks = b.count >= targetMinTicks;
+    
+    // First: prefer solutions with enough ticks
+    if (aHasEnoughTicks !== bHasEnoughTicks) {
+      return bHasEnoughTicks ? 1 : -1;
+    }
+    
+    // Second: prefer nicer intervals
+    if (a.niceness !== b.niceness) {
+      return b.niceness - a.niceness;
+    }
+    
+    // Third: prefer more ticks if both are nice
+    return b.count - a.count;
+  });
+  
+  return candidateIntervals[0].ticks;
+}
+
+/**
+ * Applies smoothing to data series using moving average
+ * @param {Array} data - Array of {step, value} objects
+ * @param {number} windowSize - Size of the smoothing window (default: 5)
+ * @returns {Array} Smoothed data series
+ */
+export function smoothData(data, windowSize = 5) {
+  if (!data || data.length === 0) return data;
+  if (data.length < windowSize) return data; // Not enough data to smooth
+  
+  const smoothed = [];
+  const halfWindow = Math.floor(windowSize / 2);
+  
+  for (let i = 0; i < data.length; i++) {
+    const start = Math.max(0, i - halfWindow);
+    const end = Math.min(data.length - 1, i + halfWindow);
+    
+    let sum = 0;
+    let count = 0;
+    
+    // Calculate weighted average with more weight to center point
+    for (let j = start; j <= end; j++) {
+      const distance = Math.abs(j - i);
+      const weight = distance === 0 ? 2 : (distance === 1 ? 1.5 : 1); // Center gets more weight
+      sum += data[j].value * weight;
+      count += weight;
+    }
+    
+    smoothed.push({
+      step: data[i].step,
+      value: sum / count
+    });
+  }
+  
+  return smoothed;
+}
+
+/**
+ * Applies smoothing to all runs in metric data
+ * @param {Object} metricData - Object with run names as keys and data arrays as values
+ * @param {number} windowSize - Size of the smoothing window
+ * @returns {Object} Smoothed metric data
+ */
+export function smoothMetricData(metricData, windowSize = 5) {
+  if (!metricData) return metricData;
+  
+  const smoothedData = {};
+  Object.keys(metricData).forEach(runName => {
+    smoothedData[runName] = smoothData(metricData[runName], windowSize);
+  });
+  
+  return smoothedData;
+}

app/src/components/trackio/data-generator.js

@@ -0,0 +1,101 @@
+// Data generation utilities for synthetic training data
+
+export function generateRunNames(count) {
+  const adjectives = [
+    'ancient', 'brave', 'calm', 'clever', 'crimson', 'daring', 'eager', 'fearless', 
+    'gentle', 'glossy', 'golden', 'hidden', 'icy', 'jolly', 'lively', 'mighty', 
+    'noble', 'proud', 'quick', 'silent', 'swift', 'tiny', 'vivid', 'wild'
+  ];
+  const nouns = [
+    'river', 'mountain', 'harbor', 'forest', 'valley', 'ocean', 'meadow', 'desert', 
+    'island', 'canyon', 'harbor', 'trail', 'summit', 'delta', 'lagoon', 'ridge', 
+    'tundra', 'reef', 'plateau', 'prairie', 'grove', 'bay', 'dune', 'cliff'
+  ];
+  const used = new Set();
+  const names = [];
+  const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
+  
+  while (names.length < count) {
+    const name = `${pick(adjectives)}-${pick(nouns)}-${Math.floor(1 + Math.random() * 7)}`;
+    if (!used.has(name)) {
+      used.add(name);
+      names.push(name);
+    }
+  }
+  return names;
+}
+
+export function genCurves(n) {
+  const quality = Math.random();
+  const good = quality > 0.66;
+  const poor = quality < 0.33;
+  const l0 = 2.0 + Math.random() * 4.5;
+  const targetLoss = good 
+    ? l0 * (0.12 + Math.random() * 0.12) 
+    : (poor ? l0 * (0.35 + Math.random() * 0.25) : l0 * (0.22 + Math.random() * 0.16));
+  
+  const phases = 1 + Math.floor(Math.random() * 3);
+  const marksSet = new Set();
+  while (marksSet.size < phases - 1) {
+    marksSet.add(Math.floor((0.25 + Math.random() * 0.5) * (n - 1)));
+  }
+  const marks = [0, ...Array.from(marksSet).sort((a, b) => a - b), n - 1];
+  
+  let kLoss = 0.02 + Math.random() * 0.08;
+  const loss = new Array(n);
+  
+  for (let seg = 0; seg < marks.length - 1; seg++) {
+    const a = marks[seg];
+    const b = marks[seg + 1] || a + 1;
+    
+    for (let i = a; i <= b; i++) {
+      const t = (i - a) / Math.max(1, (b - a));
+      const segTarget = targetLoss * Math.pow(0.85, seg);
+      let v = l0 * Math.exp(-kLoss * (i + 1));
+      v = 0.6 * v + 0.4 * (l0 + (segTarget - l0) * (seg + t) / Math.max(1, (marks.length - 1)));
+      const noiseAmp = (0.08 * l0) * (1 - 0.8 * (i / (n - 1)));
+      v += (Math.random() * 2 - 1) * noiseAmp;
+      if (Math.random() < 0.02) v += 0.15 * l0;
+      loss[i] = Math.max(0, v);
+    }
+    kLoss *= 1.6;
+  }
+  
+  const a0 = 0.1 + Math.random() * 0.35;
+  const aMax = good 
+    ? (0.92 + Math.random() * 0.07) 
+    : (poor ? (0.62 + Math.random() * 0.14) : (0.8 + Math.random() * 0.1));
+  
+  let kAcc = 0.02 + Math.random() * 0.08;
+  const acc = new Array(n);
+  
+  for (let i = 0; i < n; i++) {
+    let v = aMax - (aMax - a0) * Math.exp(-kAcc * (i + 1));
+    const noiseAmp = 0.04 * (1 - 0.8 * (i / (n - 1)));
+    v += (Math.random() * 2 - 1) * noiseAmp;
+    acc[i] = Math.max(0, Math.min(1, v));
+    if (marksSet.has(i)) kAcc *= 1.4;
+  }
+  
+  const accGap = 0.02 + Math.random() * 0.06;
+  const lossGap = 0.05 + Math.random() * 0.15;
+  const accVal = new Array(n);
+  const lossVal = new Array(n);
+  
+  let ofStart = Math.floor(((good ? 0.85 : 0.7) + (Math.random() * 0.15 - 0.05)) * (n - 1));
+  ofStart = Math.max(Math.floor(0.5 * (n - 1)), Math.min(Math.floor(0.95 * (n - 1)), ofStart));
+  
+  for (let i = 0; i < n; i++) {
+    let av = acc[i] - accGap + (Math.random() * 0.06 - 0.03);
+    let lv = loss[i] * (1 + lossGap) + (Math.random() * 0.1 - 0.05) * Math.max(1, l0 * 0.2);
+    if (i >= ofStart && !poor) {
+      const t = (i - ofStart) / Math.max(1, (n - 1 - ofStart));
+      av -= 0.03 * t;
+      lv += 0.12 * t * loss[i];
+    }
+    accVal[i] = Math.max(0, Math.min(1, av));
+    lossVal[i] = Math.max(0, lv);
+  }
+  
+  return { accTrain: acc, lossTrain: loss, accVal, lossVal };
+}

app/src/components/trackio/store.js

@@ -0,0 +1,8 @@
+// Simple store for triggering Trackio actions
+import { writable } from 'svelte/store';
+
+export const jitterTrigger = writable(0);
+
+export function triggerJitter() {
+  jitterTrigger.update(n => n + 1);
+}

app/src/components/trackio/themes/_components.css

@@ -0,0 +1,561 @@
+/* =========================
+   TRACKIO COMPONENT STYLES
+   Shared component styling across themes
+   ========================= */
+
+/* =========================
+   CELL COMPONENTS
+   ========================= */
+
+/* Base cell structure */
+:global(.trackio .cell) {
+  border: 1px solid var(--trackio-cell-border);
+  border-radius: var(--trackio-border-radius);
+  background: var(--trackio-cell-background);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* Cell background layer - hidden by default */
+:global(.trackio .cell-bg) {
+  position: absolute;
+  inset: 10px;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 4px;
+  display: none;
+}
+
+/* Cell corners layer - hidden by default */
+:global(.trackio .cell-corners) {
+  position: absolute;
+  inset: 6px;
+  pointer-events: none;
+  z-index: 3;
+  display: none;
+  opacity: 0.85;
+}
+
+:global(.trackio .cell-inner) {
+  position: relative;
+  z-index: 2;
+  padding: var(--trackio-inner-padding);
+  display: flex;
+  flex-direction: column;
+}
+
+:global(.trackio .cell-header) {
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+:global(.trackio .cell-title) {
+  font-size: 13px;
+  font-weight: var(--trackio-font-weight-bold);
+  color: var(--trackio-text-primary);
+  font-family: var(--trackio-font-family);
+}
+
+:global(.trackio .cell-body) {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+:global(.trackio .cell-body svg) {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Wide cell spans full width */
+:global(.trackio__grid .cell--wide) {
+  grid-column: 1 / -1;
+}
+
+/* =========================
+   LEGEND COMPONENTS
+   ========================= */
+
+.legend-bottom { 
+  display: flex; 
+  flex-direction: column; 
+  align-items: center; 
+  gap: 6px; 
+  font-size: 12px; 
+  text-align: center; 
+  width: 80%; 
+  margin: 0 auto; 
+  color: var(--trackio-legend-text);
+  font-family: var(--trackio-font-family);
+}
+
+.legend-title { 
+  font-size: 12px; 
+  font-weight: var(--trackio-font-weight-bold);
+  color: var(--trackio-legend-text);
+}
+
+.items { 
+  display: flex; 
+  flex-wrap: wrap; 
+  gap: 8px 14px; 
+  justify-content: center; 
+  align-items: center; 
+}
+
+.item { 
+  display: inline-flex; 
+  align-items: center; 
+  gap: 6px; 
+  white-space: nowrap; 
+  cursor: pointer; 
+  padding: 2px 4px; 
+  transition: opacity var(--trackio-transition-normal);
+  color: var(--trackio-legend-text);
+}
+
+.swatch { 
+  width: 14px; 
+  height: 14px; 
+  border-radius: 3px; 
+  border: 1px solid var(--trackio-legend-swatch-border); 
+  display: inline-block; 
+}
+
+/* Ghost hover effect */
+:global(.trackio.hovering .ghost) {
+  opacity: 0.2;
+  transition: opacity var(--trackio-transition-normal);
+}
+
+:global(.trackio.hovering) .item.ghost { 
+  opacity: 0.2; 
+}
+
+/* =========================
+   TOOLTIP COMPONENTS
+   ========================= */
+
+.d3-tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-9999px, -9999px);
+  pointer-events: none;
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  line-height: 1.35;
+  border: 1px solid var(--trackio-tooltip-border);
+  background: var(--trackio-tooltip-background);
+  color: var(--trackio-text-primary);
+  box-shadow: var(--trackio-tooltip-shadow);
+  opacity: 0;
+  transition: opacity var(--trackio-transition-fast);
+  z-index: var(--z-tooltip);
+  backdrop-filter: saturate(1.12) blur(8px);
+}
+
+.d3-tooltip.is-visible { 
+  opacity: 1; 
+}
+
+.d3-tooltip__inner { 
+  display: flex; 
+  flex-direction: column; 
+  gap: 6px; 
+  min-width: 220px; 
+}
+
+.d3-tooltip__inner > div:first-child { 
+  font-weight: var(--trackio-font-weight-extra-bold); 
+  letter-spacing: 0.1px; 
+  margin-bottom: 0; 
+}
+
+.d3-tooltip__inner > div:nth-child(2) { 
+  font-size: 11px; 
+  color: var(--trackio-text-secondary); 
+  display: block; 
+  margin-top: -4px; 
+  margin-bottom: 2px; 
+  letter-spacing: 0.1px; 
+}
+
+.d3-tooltip__inner > div.row { 
+  padding-top: 6px; 
+  border-top: 1px solid var(--trackio-tooltip-border); 
+  display: flex; 
+  align-items: center; 
+  gap: 8px; 
+  white-space: nowrap; 
+}
+
+.dot { 
+  display: inline-block; 
+  width: 12px; 
+  height: 12px; 
+  border-radius: 3px; 
+  border: 1px solid var(--trackio-tooltip-border); 
+}
+
+.val { 
+  margin-left: auto; 
+  text-align: right; 
+}
+
+/* =========================
+   FULLSCREEN COMPONENTS
+   ========================= */
+
+/* Fullscreen button */
+.cell-fullscreen-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  background: transparent;
+  color: var(--trackio-chart-axis-text);
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: opacity var(--trackio-transition-normal);
+}
+
+.cell-fullscreen-btn:hover {
+  opacity: 1;
+}
+
+.cell-fullscreen-btn svg {
+  width: 18px;
+  height: 18px;
+  fill: var(--trackio-chart-axis-text);
+}
+
+/* Fullscreen modal */
+:global(.trackio-fullscreen-overlay) {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-overlay);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--trackio-transition-slow);
+}
+
+:global(.trackio-fullscreen-overlay.is-open) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:global(.trackio-fullscreen-modal) {
+  position: relative;
+  width: min(95vw, 1400px);
+  height: min(95vh, 900px);
+  background: var(--surface-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+:global(.trackio-fullscreen-close) {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  font-size: 20px;
+  transition: background-color var(--trackio-transition-normal);
+}
+
+:global(.trackio-fullscreen-close:hover) {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* Hide fullscreen button when in modal */
+:global(.trackio-fullscreen-modal .cell-fullscreen-btn) {
+  display: none;
+}
+
+/* Fullscreen cell styling */
+:global(.trackio-fullscreen-modal .cell) {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+}
+
+:global(.trackio-fullscreen-modal .cell-inner) {
+  height: 100%;
+}
+
+:global(.trackio-fullscreen-modal .cell-body) {
+  flex: 1;
+  height: calc(100% - 50px);
+}
+
+:global(.trackio-fullscreen-modal .cell-body svg) {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+  max-height: none !important;
+}
+
+/* =========================
+   CHART STYLING
+   ========================= */
+
+/* Legacy axis/grid selectors - for compatibility */
+.trackio .axes path,
+.trackio .axes line {
+  stroke: var(--trackio-chart-axis-stroke);
+}
+
+.trackio .axes text {
+  fill: var(--trackio-chart-axis-text);
+  font-family: var(--trackio-font-family);
+}
+
+.trackio .grid line {
+  stroke: var(--trackio-chart-grid-stroke);
+  opacity: var(--trackio-chart-grid-opacity);
+}
+
+/* Minor ticks styling for logarithmic scales */
+:global(.trackio .minor-ticks line.minor-tick) {
+  stroke: var(--trackio-chart-axis-stroke);
+  stroke-opacity: 0.4;
+  stroke-width: 0.5px;
+}
+
+/* Grid type switching */
+.trackio .grid-dots { 
+  display: none; 
+}
+
+/* =========================
+   OBLIVION THEME COMPONENT OVERRIDES
+   ========================= */
+
+/* Oblivion cell specific styling */
+:global(.trackio.theme--oblivion .cell-inner) {
+  padding: var(--trackio-oblivion-hud-corner-size, 8px) 12px 10px var(--trackio-oblivion-hud-gap, 10px);
+}
+
+:global(.trackio.theme--oblivion .cell-bg) {
+  display: block !important;
+  background: 
+    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%);
+}
+
+:global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-bg) {
+  background:
+    radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, #ffffff 6.5%, transparent), transparent 80%),
+    radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, #ffffff 6%, transparent), transparent 80%),
+    linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%);
+}
+
+:global(.trackio.theme--oblivion .cell-corners) {
+  display: block !important;
+  inset: 6px;
+  background:
+    linear-gradient(#000000, #000000) top left / 8px 1px no-repeat,
+    linear-gradient(#000000, #000000) top left / 1px 8px no-repeat,
+    linear-gradient(#000000, #000000) top right / 8px 1px no-repeat,
+    linear-gradient(#000000, #000000) top right / 1px 8px no-repeat,
+    linear-gradient(#000000, #000000) bottom left / 8px 1px no-repeat,
+    linear-gradient(#000000, #000000) bottom left / 1px 8px no-repeat,
+    linear-gradient(#000000, #000000) bottom right / 8px 1px no-repeat,
+    linear-gradient(#000000, #000000) bottom right / 1px 8px no-repeat;
+  opacity: 1;
+  z-index: 3;
+}
+
+:global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-corners) {
+  background:
+    linear-gradient(#ffffff, #ffffff) top left / 8px 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) top left / 1px 8px no-repeat,
+    linear-gradient(#ffffff, #ffffff) top right / 8px 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) top right / 1px 8px no-repeat,
+    linear-gradient(#ffffff, #ffffff) bottom left / 8px 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) bottom left / 1px 8px no-repeat,
+    linear-gradient(#ffffff, #ffffff) bottom right / 8px 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) bottom right / 1px 8px no-repeat;
+}
+
+:global(.trackio.theme--oblivion .cell-header) {
+  padding: 5px 0px 18px 12px;
+}
+
+:global(.trackio.theme--oblivion .cell-title) {
+  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--trackio-oblivion-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  padding-left: 0;
+}
+
+:global(.trackio.theme--oblivion .cell-title)::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  background: var(--trackio-oblivion-primary);
+  border: 1px solid var(--trackio-oblivion-dim);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent) inset;
+  opacity: 0.5;
+}
+
+/* Force Roboto Mono in Oblivion theme for legend */
+:global(.trackio.theme--oblivion) .legend-bottom,
+:global(.trackio.theme--oblivion) .legend-title,
+:global(.trackio.theme--oblivion) .item {
+  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  letter-spacing: 0.06em;
+}
+
+:global(.trackio.theme--oblivion) .legend-title {
+  font-weight: 900 !important;
+  letter-spacing: 0.18em !important;
+  text-transform: uppercase !important;
+}
+
+/* Oblivion theme: enhanced minor ticks */
+:global(.trackio.theme--oblivion .minor-ticks line.minor-tick) {
+  stroke: var(--trackio-oblivion-dim);
+  stroke-opacity: 0.6;
+  stroke-width: 0.8px;
+}
+
+/* Force font-family for SVG text in Oblivion */
+.trackio.theme--oblivion .axes text {
+  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+}
+
+/* =========================
+   OBLIVION TOOLTIP STYLES
+   ========================= */
+
+/* Tooltip variables for Oblivion theme */
+:global(.trackio.theme--oblivion) .d3-tooltip {
+  /* Light mode variables */
+  --tooltip-oblivion-base: #2a2a2a;
+  --tooltip-oblivion-bg-primary: color-mix(in srgb, var(--tooltip-oblivion-base) 15%, transparent);
+  --tooltip-oblivion-bg-secondary: color-mix(in srgb, var(--tooltip-oblivion-base) 10%, transparent);
+  --tooltip-oblivion-bg-base: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+  --tooltip-oblivion-border: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+  --tooltip-oblivion-shadow: color-mix(in srgb, var(--tooltip-oblivion-base) 8%, transparent);
+  --tooltip-oblivion-text: color-mix(in srgb, var(--tooltip-oblivion-base) 90%, transparent);
+  --tooltip-oblivion-line-dark: rgba(0, 0, 0, 0.08);
+  --tooltip-oblivion-line-light: rgba(255, 255, 255, 0.15);
+}
+
+/* Dark mode variables */
+:global([data-theme="dark"]) :global(.trackio.theme--oblivion) .d3-tooltip {
+  --tooltip-oblivion-base: #ffffff;
+  --tooltip-oblivion-bg-primary: color-mix(in srgb, var(--tooltip-oblivion-base) 15%, transparent);
+  --tooltip-oblivion-bg-secondary: color-mix(in srgb, var(--tooltip-oblivion-base) 10%, transparent);
+  --tooltip-oblivion-bg-base: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+  --tooltip-oblivion-border: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
+  --tooltip-oblivion-shadow: color-mix(in srgb, var(--tooltip-oblivion-base) 8%, transparent);
+  --tooltip-oblivion-text: color-mix(in srgb, var(--tooltip-oblivion-base) 90%, transparent);
+  --tooltip-oblivion-line-dark: rgba(0, 0, 0, 0.15);
+  --tooltip-oblivion-line-light: rgba(255, 255, 255, 0.08);
+}
+
+/* Oblivion tooltip styling */
+:global(.trackio.theme--oblivion) .d3-tooltip {
+  border-radius: 8px;
+  border: none;
+  background: 
+    radial-gradient(400px 100px at 30% 0%, var(--tooltip-oblivion-bg-primary), transparent 70%),
+    radial-gradient(300px 80px at 70% 100%, var(--tooltip-oblivion-bg-secondary), transparent 70%),
+    var(--tooltip-oblivion-bg-base);
+  color: var(--tooltip-oblivion-text);
+  box-shadow: 
+    0 0 0 1px var(--tooltip-oblivion-border),
+    0 8px 40px var(--tooltip-oblivion-shadow),
+    0 2px 8px rgba(0, 0, 0, 0.05);
+  backdrop-filter: saturate(1.1) blur(10px);
+  opacity: 0.5;
+}
+
+:global(.trackio.theme--oblivion) .d3-tooltip.is-visible {
+  opacity: 1;
+}
+
+:global(.trackio.theme--oblivion) .d3-tooltip__inner > div:first-child {
+  font-weight: 900;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--tooltip-oblivion-text);
+}
+
+:global(.trackio.theme--oblivion) .d3-tooltip__inner > div:nth-child(2) {
+  color: var(--tooltip-oblivion-text);
+  opacity: 0.4;
+  letter-spacing: 0.06em;
+}
+
+:global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row {
+  position: relative;
+  padding-top: 10px;
+  margin-top: 6px;
+  border-top: none;
+}
+
+:global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 1px;
+  background: var(--tooltip-oblivion-line-dark);
+}
+
+:global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 1px;
+  height: 1px;
+  background: var(--tooltip-oblivion-line-light);
+}
+
+:global(.trackio.theme--oblivion) .dot {
+  border-radius: 2px;
+  border: 1px solid var(--trackio-chart-axis-stroke);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--trackio-oblivion-base) 20%, transparent) inset;
+}

app/src/components/trackio/themes/_theme-base.css

@@ -0,0 +1,49 @@
+/* =========================
+   TRACKIO THEME SYSTEM
+   Base theme variables and typography
+   ========================= */
+
+/* Font imports for themes */
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700;800;900&display=swap');
+
+/* Fallback font-face declaration */
+@font-face {
+  font-family: 'Roboto Mono Fallback';
+  src: url('https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4AJi8SJQt.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Base variables - all themes inherit these */
+.trackio {
+  position: relative;
+  --z-tooltip: 50;
+  --z-overlay: 99999999;
+  
+  /* Typography system */
+  --trackio-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  --trackio-font-weight-normal: 400;
+  --trackio-font-weight-medium: 600;
+  --trackio-font-weight-bold: 700;
+  --trackio-font-weight-extra-bold: 800;
+  --trackio-font-weight-black: 900;
+  
+  /* Apply font-family to root element */
+  font-family: var(--trackio-font-family);
+  
+  /* Layout system */
+  --trackio-cell-gap: 12px;
+  --trackio-border-radius: 10px;
+  --trackio-inner-padding: 8px 12px 10px 10px;
+  
+  /* Animation system */
+  --trackio-transition-fast: 0.12s ease;
+  --trackio-transition-normal: 0.15s ease;
+  --trackio-transition-slow: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* Dark mode base adjustments */
+:global([data-theme="dark"]) .trackio {
+  /* Dark mode base overrides will be defined in individual theme files */
+}

app/src/components/trackio/themes/_theme-classic.css

@@ -0,0 +1,69 @@
+/* =========================
+   TRACKIO THEME: CLASSIC
+   Clean, traditional interface theme
+   ========================= */
+
+.trackio.theme--classic {
+  /* Base color system */
+  --trackio-base: #323232;
+  --trackio-primary: var(--trackio-base);
+  --trackio-dim: color-mix(in srgb, var(--trackio-base) 28%, transparent);
+  --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
+  --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
+  
+  /* Chart rendering */
+  --trackio-chart-grid-type: 'lines';
+  --trackio-chart-axis-stroke: var(--trackio-dim);
+  --trackio-chart-axis-text: var(--trackio-text);
+  --trackio-chart-grid-stroke: var(--trackio-subtle);
+  --trackio-chart-grid-opacity: 1;
+  
+  /* Cell styling */
+  --trackio-cell-background: rgba(0, 0, 0, 0.02);
+  --trackio-cell-border: var(--border-color, rgba(0, 0, 0, 0.1));
+  --trackio-cell-corner-inset: 0px;
+  
+  /* Typography */
+  --trackio-text-primary: var(--text-color, rgba(0, 0, 0, 0.9));
+  --trackio-text-secondary: var(--muted-color, rgba(0, 0, 0, 0.6));
+  --trackio-text-accent: var(--primary-color, #E889AB);
+  
+  /* Tooltip */
+  --trackio-tooltip-background: var(--surface-bg, white);
+  --trackio-tooltip-border: var(--border-color, rgba(0, 0, 0, 0.1));
+  --trackio-tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  
+  /* Legend */
+  --trackio-legend-text: var(--text-color, rgba(0, 0, 0, 0.9));
+  --trackio-legend-swatch-border: var(--border-color, rgba(0, 0, 0, 0.1));
+}
+
+/* Dark mode overrides for Classic theme */
+:global([data-theme="dark"]) .trackio.theme--classic {
+  --trackio-base: #ffffff;
+  --trackio-primary: var(--trackio-base);
+  --trackio-dim: color-mix(in srgb, var(--trackio-base) 25%, transparent);
+  --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
+  --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
+  
+  /* Cell background for dark mode */
+  --trackio-cell-background: rgba(255, 255, 255, 0.03);
+  
+  /* Chart adjustments */
+  --trackio-chart-axis-stroke: rgba(255, 255, 255, 0.18);
+  --trackio-chart-axis-text: rgba(255, 255, 255, 0.60);
+  --trackio-chart-grid-stroke: rgba(255, 255, 255, 0.08);
+}
+
+/* Classic theme cell styling */
+.trackio.theme--classic .cell {
+  border: 1px solid var(--trackio-cell-border) !important;
+  background: var(--trackio-cell-background) !important;
+  border-radius: var(--trackio-border-radius) !important;
+}
+
+/* Classic theme ensures borders are visible */
+.trackio.theme--classic .cell-bg,
+.trackio.theme--classic .cell-corners {
+  display: none !important;
+}

app/src/components/trackio/themes/_theme-neon.css

@@ -0,0 +1,73 @@
+/* =========================
+   TRACKIO THEME: NEON
+   Cyberpunk-inspired neon theme (example)
+   ========================= */
+
+.trackio.theme--neon {
+  /* Neon color system */
+  --trackio-neon-base: #00ffff;
+  --trackio-neon-secondary: #ff00ff;
+  --trackio-neon-accent: #ffff00;
+  --trackio-neon-dim: color-mix(in srgb, var(--trackio-neon-base) 40%, transparent);
+  --trackio-neon-subtle: color-mix(in srgb, var(--trackio-neon-base) 15%, transparent);
+  --trackio-neon-glow: 0 0 20px var(--trackio-neon-base);
+  
+  /* Chart rendering overrides */
+  --trackio-chart-grid-type: 'lines';
+  --trackio-chart-axis-stroke: var(--trackio-neon-dim);
+  --trackio-chart-axis-text: var(--trackio-neon-base);
+  --trackio-chart-grid-stroke: var(--trackio-neon-subtle);
+  --trackio-chart-grid-opacity: 0.8;
+  
+  /* Cell styling */
+  --trackio-cell-background: rgba(0, 0, 0, 0.8);
+  --trackio-cell-border: 2px solid var(--trackio-neon-base);
+  --trackio-cell-gap: 16px;
+  
+  /* Typography */
+  --trackio-font-family: 'Courier New', monospace;
+  --trackio-text-primary: var(--trackio-neon-base);
+  --trackio-text-secondary: var(--trackio-neon-dim);
+  --trackio-text-accent: var(--trackio-neon-secondary);
+  
+  /* Neon glow effects */
+  background: #000;
+  color: var(--trackio-neon-base);
+  text-shadow: var(--trackio-neon-glow);
+}
+
+/* Dark mode (enhanced neon) */
+:global([data-theme="dark"]) .trackio.theme--neon {
+  --trackio-neon-glow: 0 0 30px var(--trackio-neon-base);
+  background: #000010;
+}
+
+/* Neon cell effects */
+.trackio.theme--neon .cell {
+  border: 2px solid var(--trackio-neon-base) !important;
+  box-shadow: 
+    0 0 20px color-mix(in srgb, var(--trackio-neon-base) 30%, transparent),
+    inset 0 0 20px color-mix(in srgb, var(--trackio-neon-base) 10%, transparent);
+  background: rgba(0, 0, 0, 0.9) !important;
+}
+
+/* Neon title styling */
+.trackio.theme--neon .cell-title {
+  color: var(--trackio-neon-base);
+  text-shadow: var(--trackio-neon-glow);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Neon grid styling */
+.trackio.theme--neon .grid line {
+  filter: drop-shadow(0 0 3px var(--trackio-neon-base));
+}
+
+/* Neon legend styling */
+.trackio.theme--neon .legend-title {
+  color: var(--trackio-neon-secondary);
+  text-shadow: 0 0 15px var(--trackio-neon-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+}

app/src/components/trackio/themes/_theme-oblivion.css

@@ -0,0 +1,106 @@
+/* =========================
+   TRACKIO THEME: OBLIVION
+   Futuristic HUD-style interface theme
+   ========================= */
+
+.trackio.theme--oblivion {
+  /* Core oblivion color system - Light mode: darker colors for visibility */
+  --trackio-oblivion-base: #2a2a2a;
+  --trackio-oblivion-primary: var(--trackio-oblivion-base);
+  --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 30%, transparent);
+  --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
+  --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
+  
+  /* Chart rendering overrides */
+  --trackio-chart-grid-type: 'dots';
+  --trackio-chart-axis-stroke: var(--trackio-oblivion-dim);
+  --trackio-chart-axis-text: var(--trackio-oblivion-primary);
+  --trackio-chart-grid-stroke: var(--trackio-oblivion-dim);
+  --trackio-chart-grid-opacity: 0.6;
+  
+  /* Cell styling overrides */
+  --trackio-cell-background: var(--trackio-oblivion-subtle);
+  --trackio-cell-border: var(--trackio-oblivion-dim);
+  --trackio-cell-corner-inset: 6px;
+  --trackio-cell-gap: 0px;
+  
+  /* HUD-specific variables */
+  --trackio-oblivion-hud-gap: 10px;
+  --trackio-oblivion-hud-corner-size: 8px;
+  --trackio-oblivion-hud-bg-gradient: 
+    radial-gradient(1200px 200px at 20% -10%, var(--trackio-oblivion-ghost), transparent 80%),
+    radial-gradient(900px 200px at 80% 110%, var(--trackio-oblivion-ghost), transparent 80%);
+  
+  /* Typography overrides */
+  --trackio-font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --trackio-text-primary: var(--trackio-oblivion-primary);
+  --trackio-text-secondary: var(--trackio-oblivion-dim);
+  --trackio-text-accent: var(--trackio-oblivion-primary);
+  
+  /* Tooltip overrides */
+  --trackio-tooltip-background: var(--trackio-oblivion-subtle);
+  --trackio-tooltip-border: var(--trackio-oblivion-dim);
+  --trackio-tooltip-shadow: 
+    0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent),
+    0 2px 8px color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent);
+  
+  /* Legend overrides */
+  --trackio-legend-text: var(--trackio-oblivion-primary);
+  --trackio-legend-swatch-border: var(--trackio-oblivion-dim);
+  
+  /* Force font application */
+  font-family: var(--trackio-font-family) !important;
+  color: var(--trackio-text-primary);
+}
+
+/* Dark mode overrides for Oblivion theme */
+:global([data-theme="dark"]) .trackio.theme--oblivion {
+  --trackio-oblivion-base: #ffffff;
+  --trackio-oblivion-primary: var(--trackio-oblivion-base);
+  --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent);
+  --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
+  --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
+  
+  --trackio-oblivion-hud-bg-gradient: 
+    radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, var(--trackio-oblivion-base) 6.5%, transparent), transparent 80%),
+    radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent), transparent 80%),
+    linear-gradient(180deg, color-mix(in srgb, var(--trackio-oblivion-base) 3.5%, transparent), transparent 45%);
+  
+  --trackio-tooltip-shadow: 
+    0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 5%, transparent),
+    0 2px 8px color-mix(in srgb, black 10%, transparent);
+  
+  background: #0f1115;
+}
+
+/* Force Roboto Mono application in Oblivion theme */
+.trackio.theme--oblivion,
+.trackio.theme--oblivion * {
+  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+}
+
+/* Specific overrides for different elements in Oblivion */
+.trackio.theme--oblivion .cell-title,
+.trackio.theme--oblivion .legend-bottom,
+.trackio.theme--oblivion .legend-title,
+.trackio.theme--oblivion .item {
+  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+}
+
+/* Oblivion theme: remove default cell border */
+.trackio.theme--oblivion .cell {
+  border: none !important;
+  background: transparent !important;
+}
+
+/* Grid type switching for Oblivion */
+.trackio.theme--oblivion .grid { 
+  display: none; 
+}
+.trackio.theme--oblivion .grid-dots { 
+  display: block; 
+}
+.trackio.theme--oblivion .cell-bg,
+.trackio.theme--oblivion .cell-corners { 
+  display: block; 
+}

app/src/components/trackio/themes/index.css

@@ -0,0 +1,41 @@
+/* =========================
+   TRACKIO THEME SYSTEM
+   Main theme entry point
+   ========================= */
+
+/* Import base theme system */
+@import './_theme-base.css';
+
+/* Import component styles */
+@import './_components.css';
+
+/* Import individual themes */
+@import './_theme-classic.css';
+@import './_theme-oblivion.css';
+@import './_theme-neon.css';
+
+/* =========================
+   LAYOUT SYSTEM
+   ========================= */
+
+.trackio__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--trackio-cell-gap);
+}
+
+@media (max-width: 980px) {
+  .trackio__grid { 
+    grid-template-columns: 1fr; 
+  }
+}
+
+.trackio__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 12px;
+  margin: 0 0 10px 0;
+  flex-wrap: wrap;
+  width: 100%;
+}

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

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

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

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

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

@@ -1,5 +1,6 @@
 import HtmlEmbed from '../../components/HtmlEmbed.astro';
 import Note from '../../components/Note.astro';
+import TrackioWrapper from '../../components/TrackioWrapper.astro';
 
 ## Vibe coding charts
 
@@ -70,15 +71,8 @@ They can be found in the `app/src/content/embeds` folder and you can also use th
   <HtmlEmbed src="d3-pie-quad.html" title="d3-pie-quad: Quad donuts by metric" align="center" frameless desc={'Quad view: Answer Tokens, Number of Samples, Number of Turns, Number of Images.'} />
 ---
 <HtmlEmbed src="d3-scatter.html" title="d3-scatter: 2D projection by category" desc={`Figure 8: Dataset visualization via UMAP <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>`} frameless align="center" />
+
+### Trackio
 ---
-<HtmlEmbed
-  src="d3-trackio.html"
-  frameless
-/>
----
-<HtmlEmbed
-  src="d3-trackio-oblivion.html"
-  frameless
-/>
----
+<TrackioWrapper />
 

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

@@ -80,10 +80,11 @@
     /* 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-bg { position: absolute; inset: var(--hud-gap); pointer-events: none; z-index: 1; background: var(--hud-bg-gradient);  border-radius: 4px!important;}
   .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,
@@ -100,7 +101,7 @@
   /* 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: .5; cursor: pointer; z-index: 4; }
   .d3-trackio-oblivion .cell-action:hover { opacity: .7; }
-  .d3-trackio-oblivion .cell-action svg { width: 22px; height: 22px; opacity: .6; margin-left: 5px; }
+  .d3-trackio-oblivion .cell-action svg { width: 22px; height: 22px; opacity: .6; margin-left: 5px; fill: var(--interaction-color); }
   .d3-trackio-oblivion .cell-action svg, .d3-trackio-oblivion .cell-action svg path { fill: currentColor; stroke: none; }
   [data-theme="dark"] .d3-trackio-oblivion .cell-action svg { opacity: .85; }
   .d3-trackio-oblivion .cell-body { position: relative; width: 100%; overflow: hidden; }
@@ -115,7 +116,7 @@
   .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 .items { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; }
   .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(--ghost-obl-border); display: inline-block; box-shadow: 0 0 12px color-mix(in srgb, var(--obl-base) 18%, transparent) inset; }
 
@@ -250,7 +251,35 @@
         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));
+        // Adapt tick density to available space (fewer ticks when range is large), prioritizing nice numeric values (1,2,5×10^k)
+        const maxXTicks = Math.max(3, Math.min(12, Math.floor(innerWidth / 90)));
+        let xTickVals = xTicksForced;
+        if (Array.isArray(xTicksArg) && xTicksArg.length) {
+          const realMin = xTicksArg[0];
+          const realMax = xTicksArg[xTicksArg.length - 1];
+          const niceVals = d3.ticks(realMin, realMax, maxXTicks);
+          const nearestIndex = (val) => {
+            let bestIdx = 0; let bestDist = Infinity;
+            for (let i = 0; i < xTicksArg.length; i++) {
+              const d = Math.abs(xTicksArg[i] - val);
+              if (d < bestDist) { bestDist = d; bestIdx = i; }
+            }
+            return bestIdx;
+          };
+          const indices = Array.from(new Set(niceVals.map(v => nearestIndex(v)))).sort((a,b)=>a-b);
+          // Ensure edges included
+          if (indices[0] !== 0) indices.unshift(0);
+          const lastIdx = xTicksArg.length - 1;
+          if (indices[indices.length - 1] !== lastIdx) indices.push(lastIdx);
+          xTickVals = indices;
+        } else if (xTicksForced.length > maxXTicks) {
+          const stride = Math.max(1, Math.ceil(xTicksForced.length / maxXTicks));
+          const last = xTicksForced[xTicksForced.length - 1];
+          xTickVals = xTicksForced.filter((i, idx) => (idx % stride) === 0);
+          if (xTickVals[xTickVals.length - 1] !== last) xTickVals.push(last);
+        }
+        const maxYTicks = Math.max(5, Math.min(6, Math.floor(innerHeight / 60)));
+        const yCount = maxYTicks;
         const yDom = yScale.domain();
         const yTicksForced = (yCount <= 2)
           ? [yDom[0], yDom[1]]
@@ -260,7 +289,7 @@
           .attr('transform', `translate(0,${innerHeight})`)
           .call(
             d3.axisBottom(xScale)
-              .tickValues(xTicksForced)
+              .tickValues(xTickVals)
               .tickFormat((i) => {
                 const val = (Array.isArray(xTicksArg) && xTicksArg[i] != null ? xTicksArg[i] : i);
                 return formatAbbrev(val);
@@ -304,7 +333,7 @@
           .style('text-transform','uppercase')
           .text('Steps');
         // Y-axis label removed to gain horizontal space
-        return { innerWidth, innerHeight, xTicksForced, yTicksForced };
+        return { innerWidth, innerHeight, xTicksForced: xTickVals, yTicksForced };
       }
 
       function render(metricData, colorForRun){
@@ -317,8 +346,9 @@
         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 isLoss = /loss/i.test(metricKey);
         const axisLabelY = prettyMetricLabel(metricKey);
-        if (isAccuracy) yScale.domain([0,1]).nice(); else yScale.domain([minVal, maxVal]).nice();
+        if (isAccuracy) yScale.domain([0,1]).nice(); else if (isLoss) 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)));
@@ -329,14 +359,21 @@
         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 normalizeY = (v) => (isLoss ? ((maxVal > minVal) ? (v - minVal) / (maxVal - minVal) : 0) : v);
+        lineGen.y(d => yScale(normalizeY(d.value)));
         const { innerWidth, innerHeight, xTicksForced, yTicksForced } = updateLayout(axisLabelY, hoverSteps);
 
-        // Grid as small dots at intersections of y ticks × step positions
+        // Grid as small dots at intersections of y ticks × step positions (X density relative to number of data steps)
         // Exclude dots that fall on the origin axes lines (left Y-axis and bottom X-axis)
         const gridPoints = [];
         const yDomAll = yScale.domain();
         const yMin = Array.isArray(yDomAll) ? yDomAll[0] : null;
-        xTicksForced.forEach(i => {
+        const desiredCols = 24; // target grid columns; density scales with data size via stride
+        const xGridStride = Math.max(1, Math.ceil(hoverSteps.length / desiredCols));
+        const xGridIdx = [];
+        for (let idx = 0; idx < hoverSteps.length; idx += xGridStride) xGridIdx.push(idx);
+        if (xGridIdx[xGridIdx.length - 1] !== hoverSteps.length - 1) xGridIdx.push(hoverSteps.length - 1);
+        xGridIdx.forEach(i => {
           yTicksForced.forEach(t => {
             if (i !== 0 && (yMin == null || t !== yMin)) {
               gridPoints.push({ sx: i, ty: t });
@@ -368,15 +405,16 @@
         const ptsSel = gPoints.selectAll('circle.pt').data(allPts, d=>`${d.run}-${d.step}`);
         ptsSel.enter().append('circle')
           .attr('class','pt')
-          .attr('r', 2)
+          .attr('r', 0) /* default invisible */
           .attr('fill', d=>d.color)
           .attr('stroke','none')
           .attr('cx', d=> xScale(stepIndex.get(d.step)))
-          .attr('cy', d=>yScale(d.value))
+          .attr('cy', d=>yScale(normalizeY(d.value)))
           .merge(ptsSel)
           .transition().duration(150)
           .attr('cx', d=> xScale(stepIndex.get(d.step)))
-          .attr('cy', d=>yScale(d.value));
+          .attr('cy', d=>yScale(normalizeY(d.value)))
+          .attr('r', 0); /* keep baseline at 0 when not hovering */
         ptsSel.exit().remove();
         // Steps used for hover snapping (unique data steps)
         // already computed above as hoverSteps
@@ -400,14 +438,14 @@
           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
+          // Animate points: from 0 to hover size only for the hovered step
           try {
             gPoints.selectAll('circle.pt')
               .transition().duration(140).ease(d3.easeCubicOut)
-              .attr('r', d => (d && d.step === nearest ? 4 : 2));
+              .attr('r', d => (d && d.step === nearest ? 4 : 0));
           } catch(_) {}
         }
-        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); }
+        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', 0); } catch(_) {} }, 100); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
       }
 
@@ -467,15 +505,23 @@
           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(_) {}
+          let currentRunList = runList.slice();
+          let palette = (() => {
+            try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') return window.ColorPalettes.getColors('categorical', currentRunList.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 colorForRun = (name) => palette[currentRunList.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('');
+          function rebuildLegend(){
+            legendItemsHost.innerHTML = currentRunList.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('');
+            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')); });
+            });
+          }
+          rebuildLegend();
 
           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); });
@@ -484,11 +530,133 @@
 
           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); }
+          // Cycle through step lengths: 0=short,1=medium,2=long
+          let cycleIdx = 2;
+
+          // Randomize data slightly on 'r' key press (in-place jitter)
+          function jitterData(){
+            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
+            mList.forEach((tgt) => {
+              if (tgt === 'epoch') return; // keep epoch intact
+              const map = dataByMetric.get(tgt);
+              if (!map) return;
+              const isAcc = /acc/i.test(tgt);
+              const isLoss = /loss/i.test(tgt);
+              const scale = isAcc ? 0.01 : (isLoss ? 0.03 : 0.02);
+              Object.keys(map).forEach((run) => {
+                map[run].forEach((pt) => {
+                  const base = Math.abs(pt.value) || 1;
+                  const delta = (Math.random() * 2 - 1) * scale * base;
+                  let nv = pt.value + delta;
+                  if (isAcc) nv = Math.max(0, Math.min(1, nv));
+                  pt.value = nv;
+                });
+              });
+            });
+          }
+          // Simulate a fresh dataset on 's' key press (realistic-ish patterns)
+          function generateRunNames(count){
+            const adjectives = ['ancient','brave','calm','clever','crimson','daring','eager','fearless','gentle','glossy','golden','hidden','icy','jolly','lively','mighty','noble','proud','quick','silent','swift','tiny','vivid','wild'];
+            const nouns = ['river','mountain','harbor','forest','valley','ocean','meadow','desert','island','canyon','harbor','trail','summit','delta','lagoon','ridge','tundra','reef','plateau','prairie','grove','bay','dune','cliff'];
+            const used = new Set(); const names = [];
+            const pick = (arr) => arr[Math.floor(Math.random()*arr.length)];
+            while (names.length < count) { const name = `${pick(adjectives)}-${pick(nouns)}-${Math.floor(1+Math.random()*9)}`; if (!used.has(name)) { used.add(name); names.push(name); } }
+            return names;
+          }
+          function simulateData(){
+            // Randomize number of runs between 2 and 7 with W&B-like names
+            const wantRuns = Math.max(2, Math.floor(2 + Math.random()*6));
+            const runsSim = generateRunNames(wantRuns);
+            const rnd = (min,max)=> Math.floor(min + Math.random()*(max-min+1));
+            // Cycle: short -> medium -> long -> repeat
+            let stepsCount = 16;
+            if (cycleIdx === 0) stepsCount = rnd(4, 12);
+            else if (cycleIdx === 1) stepsCount = rnd(16, 48);
+            else stepsCount = rnd(80, 240);
+            cycleIdx = (cycleIdx + 1) % 3;
+            const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+            function genCurves(n){
+              const quality = Math.random(); const good = quality > 0.66; const poor = quality < 0.33;
+              // Train loss with LR phases and decaying noise
+              const l0 = 2.0 + Math.random()*4.5;
+              const targetLoss = good ? l0*(0.12+Math.random()*0.12) : (poor ? l0*(0.35+Math.random()*0.25) : l0*(0.22+Math.random()*0.16));
+              const phases = 1 + Math.floor(Math.random()*3);
+              const marksSet = new Set();
+              while (marksSet.size < phases-1) { marksSet.add(Math.floor((0.25+Math.random()*0.5)*(n-1))); }
+              const marks = [0, ...Array.from(marksSet).sort((a,b)=>a-b), n-1];
+              let kLoss = 0.02 + Math.random()*0.08; const loss = new Array(n);
+              for (let seg=0; seg<marks.length-1; seg++){
+                const a=marks[seg], b=marks[seg+1]||a+1;
+                for (let i=a;i<=b;i++){
+                  const t = (i-a)/Math.max(1,(b-a));
+                  const segTarget = targetLoss * Math.pow(0.85, seg);
+                  let v = l0*Math.exp(-kLoss*(i+1));
+                  v = 0.6*v + 0.4*(l0 + (segTarget - l0)*(seg + t)/Math.max(1,(marks.length-1)));
+                  const noiseAmp = (0.08*l0) * (1 - 0.8*(i/(n-1)));
+                  v += (Math.random()*2-1)*noiseAmp; if (Math.random() < 0.02) v += 0.15*l0;
+                  loss[i] = Math.max(0, v);
+                }
+                kLoss *= 1.6;
+              }
+              // Train accuracy logistic rise with decaying noise and phase boosts
+              const a0 = 0.1 + Math.random()*0.35; const aMax = good ? (0.92+Math.random()*0.07) : (poor ? (0.62+Math.random()*0.14) : (0.8+Math.random()*0.1));
+              let kAcc = 0.02 + Math.random()*0.08; const acc = new Array(n);
+              for (let i=0;i<n;i++){
+                let v = aMax - (aMax - a0)*Math.exp(-kAcc*(i+1));
+                const noiseAmp = 0.04*(1 - 0.8*(i/(n-1)));
+                v += (Math.random()*2-1)*noiseAmp; acc[i] = Math.max(0, Math.min(1, v));
+                if (marksSet.has(i)) kAcc *= 1.4;
+              }
+              // Validation: gap + noise + optional overfitting
+              const accGap = 0.02 + Math.random()*0.06; const lossGap = 0.05 + Math.random()*0.15;
+              const accVal = new Array(n); const lossVal = new Array(n);
+              let ofStart = Math.floor(((good ? 0.85 : 0.7) + (Math.random()*0.15 - 0.05))*(n-1));
+              ofStart = Math.max(Math.floor(0.5*(n-1)), Math.min(Math.floor(0.95*(n-1)), ofStart));
+              for (let i=0;i<n;i++){
+                let av = acc[i] - accGap + (Math.random()*0.06 - 0.03);
+                let lv = loss[i]*(1+lossGap) + (Math.random()*0.1 - 0.05)*Math.max(1, l0*0.2);
+                if (i>=ofStart && !poor){ const t = (i-ofStart)/Math.max(1,(n-1-ofStart)); av -= 0.03*t; lv += 0.12*t*loss[i]; }
+                accVal[i] = Math.max(0, Math.min(1, av)); lossVal[i] = Math.max(0, lv);
+              }
+              return { accTrain: acc, lossTrain: loss, accVal, lossVal };
+            }
+            // Build fresh maps per metric
+            const nextByMetric = new Map();
+            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
+            mList.forEach(tgt => {
+              const map = {}; runsSim.forEach(r => map[r] = []); nextByMetric.set(tgt, map);
+            });
+            runsSim.forEach(run => {
+              const curves = genCurves(stepsCount);
+              steps.forEach((s,i)=>{
+                if (metricsToDraw.includes('epoch')) nextByMetric.get('epoch')[run].push({ step:s, value:s });
+                if (metricsToDraw.includes('train_accuracy')) nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
+                if (metricsToDraw.includes('val_accuracy')) nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
+                if (metricsToDraw.includes('train_loss')) nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
+                if (metricsToDraw.includes('val_loss')) nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
+              });
+            });
+            // Swap data
+            nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
+            // Update current run list, palette and legend
+            currentRunList = runsSim.slice();
+            try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', currentRunList.length); } catch(_) {}
+            if (!palette) { palette = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#7ff1ff','#5ae0e8','#3cc2da','#289ab8','#1a7e9a','#0f637b','#0a4b5e','#083948','#062a36','#041e27']; }
+            rebuildLegend();
+          }
+          const onKeyDownJitter = (ev) => {
+            try {
+              const key = ev && ev.key ? ev.key.toLowerCase() : '';
+              if (key === 'r') { jitterData(); rerender(); }
+              if (key === 's') { simulateData(); rerender(); }
+            } catch(_) {}
+          };
+          window.addEventListener('keydown', onKeyDownJitter);
+          // Start with level 3 (long) synthetic data by default
+          simulateData();
+          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')); });
-          });
+          // (Legend hover handlers bound inside rebuildLegend())
         } 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);
         }

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

@@ -125,7 +125,7 @@
   /* Global header (legend) above the grid and centered */
   .d3-trackio__header {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     gap: 12px;
     margin: 0 0 10px 0;
@@ -142,7 +142,7 @@
     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; }
+  .d3-trackio__header .legend-bottom .items { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; }
   .d3-trackio__header .legend-bottom .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
   .d3-trackio__header .legend-bottom .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color); display: inline-block; }
 
@@ -238,7 +238,7 @@
       } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
 
       // Layout & scales
-      let width = 800, height = 200; const margin = { top: 10, right: 20, bottom: 46, left: 44 };
+      let width = 800, height = 10; 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));
@@ -261,7 +261,9 @@
 
         // Axes
         gAxes.selectAll('*').remove();
-        // Ticks: for x, force equal spacing on indices and include edges; for y, equally spaced within domain, count ~ x ticks bounded [2,6]
+        // Ticks (Oblivion logic):
+        // - X: nice values mapped to nearest indices, include edges, density by width
+        // - Y: at least 5 ticks, density by height
         const makeTicks = (scale, approx) => {
           const arr = scale.ticks(approx);
           const dom = scale.domain();
@@ -269,10 +271,33 @@
           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 maxXTicks = Math.max(3, Math.min(12, Math.floor(innerWidth / 90)));
+        let xTicksForced = (Array.isArray(xTicksArg) && xTicksArg.length) ? [] : makeTicks(xScale, 8);
+        if (Array.isArray(xTicksArg) && xTicksArg.length) {
+          const realMin = xTicksArg[0];
+          const realMax = xTicksArg[xTicksArg.length - 1];
+          const niceVals = d3.ticks(realMin, realMax, maxXTicks);
+          const nearestIndex = (val) => {
+            let bestIdx = 0; let bestDist = Infinity;
+            for (let i = 0; i < xTicksArg.length; i++) {
+              const d = Math.abs(xTicksArg[i] - val);
+              if (d < bestDist) { bestDist = d; bestIdx = i; }
+            }
+            return bestIdx;
+          };
+          const indices = Array.from(new Set(niceVals.map(v => nearestIndex(v)))).sort((a,b)=>a-b);
+          if (indices[0] !== 0) indices.unshift(0);
+          const lastIdx = xTicksArg.length - 1;
+          if (indices[indices.length - 1] !== lastIdx) indices.push(lastIdx);
+          xTicksForced = indices;
+        } else if (xTicksForced.length > maxXTicks) {
+          const stride = Math.max(1, Math.ceil(xTicksForced.length / maxXTicks));
+          const last = xTicksForced[xTicksForced.length - 1];
+          xTicksForced = xTicksForced.filter((_, idx) => (idx % stride) === 0);
+          if (xTicksForced[xTicksForced.length - 1] !== last) xTicksForced.push(last);
+        }
+        const maxYTicks = Math.max(5, Math.min(6, Math.floor(innerHeight / 60)));
+        const yCount = maxYTicks;
         const yDom = yScale.domain();
         const yTicksForced = (yCount <= 2)
           ? [yDom[0], yDom[1]]
@@ -392,7 +417,7 @@
         // 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)
+        ptsSel.enter().append('circle').attr('class','pt').attr('data-run', d=>d.run).attr('r', 0).attr('fill', d=>d.color).attr('fill-opacity', 0.6)
           .attr('stroke', 'none').attr('cx', d=>xScale(stepIndex.get(d.step))).attr('cy', d=>yScale(d.value))
           .merge(ptsSel)
           .each(function(d){ /* placeholder to keep merge chain intact */ })
@@ -433,11 +458,11 @@
           // 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)); }
+            if (shouldSuppress()) { sel.interrupt().attr('r', d => (d && d.step === nearest ? 4 : 0)); }
+            else { sel.transition().duration(140).ease(d3.easeCubicOut).attr('r', d => (d && d.step === nearest ? 4 : 0)); }
           } 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); }
+        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', 0); } else { sel.transition().duration(150).ease(d3.easeCubicOut).attr('r', 0); } } catch(_) {} }, 100); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
       }
 
@@ -631,20 +656,46 @@
 
           // Build run list and shared color mapping
           const runList = Array.from(new Set(rows.map(r => String(r.run||'').trim()).filter(Boolean))).sort();
+          let currentRunList = runList.slice();
           let palette = null;
-          try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', runList.length); } catch(_) {}
+          try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', currentRunList.length); } catch(_) {}
           if (!palette) {
             const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
             palette = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])];
           }
-          const colorForRun = (name) => palette[runList.indexOf(name) % palette.length];
+          const colorForRun = (name) => palette[currentRunList.indexOf(name) % palette.length];
 
           // Populate legend
           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('');
+          function rebuildLegend(){
+            legendItemsHost.innerHTML = currentRunList.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('');
+            // Bind hover ghosting
+            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-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
+                  cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run));
+                  cell.querySelectorAll('.areas path.area').forEach(a => a.classList.toggle('ghost', a.getAttribute('data-run') !== run));
+                });
+                legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-run') !== run));
+              });
+              el.addEventListener('mouseleave', () => {
+                host.classList.remove('hovering');
+                host.querySelectorAll('.cell').forEach(cell => {
+                  cell.querySelectorAll('.lines path.run-line').forEach(p => p.classList.remove('ghost'));
+                  cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.remove('ghost'));
+                  cell.querySelectorAll('.areas path.area').forEach(a => a.classList.remove('ghost'));
+                });
+                legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.remove('ghost'));
+              });
+            });
+          }
+          rebuildLegend();
 
           // Build per-metric data map (using resolved names)
           const dataByMetric = new Map();
@@ -665,31 +716,119 @@
 
           // 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
-          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-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
-                cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run));
-                cell.querySelectorAll('.areas path.area').forEach(a => a.classList.toggle('ghost', a.getAttribute('data-run') !== run));
+          // Synthetic data support: jitter (r) and simulation (s)
+          let cycleIdx = 2;
+          function jitterData(){
+            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
+            mList.forEach((tgt) => {
+              if (tgt === 'epoch') return;
+              const map = dataByMetric.get(tgt); if (!map) return;
+              const isAcc = /acc/i.test(tgt); const isLoss = /loss/i.test(tgt);
+              const scale = isAcc ? 0.01 : (isLoss ? 0.03 : 0.02);
+              Object.keys(map).forEach((run) => {
+                map[run].forEach((pt) => {
+                  const base = Math.abs(pt.value) || 1;
+                  const delta = (Math.random()*2-1) * scale * base;
+                  let nv = pt.value + delta;
+                  if (isAcc) nv = Math.max(0, Math.min(1, nv));
+                  pt.value = nv;
+                });
               });
-              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-line').forEach(p => p.classList.remove('ghost'));
-                cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.remove('ghost'));
-                cell.querySelectorAll('.areas path.area').forEach(a => a.classList.remove('ghost'));
+          }
+          function genCurves(n){
+            const quality = Math.random(); const good = quality > 0.66; const poor = quality < 0.33;
+            const l0 = 2.0 + Math.random()*4.5;
+            const targetLoss = good ? l0*(0.12+Math.random()*0.12) : (poor ? l0*(0.35+Math.random()*0.25) : l0*(0.22+Math.random()*0.16));
+            const phases = 1 + Math.floor(Math.random()*3);
+            const marksSet = new Set();
+            while (marksSet.size < phases-1) { marksSet.add(Math.floor((0.25+Math.random()*0.5)*(n-1))); }
+            const marks = [0, ...Array.from(marksSet).sort((a,b)=>a-b), n-1];
+            let kLoss = 0.02 + Math.random()*0.08; const loss = new Array(n);
+            for (let seg=0; seg<marks.length-1; seg++){
+              const a=marks[seg], b=marks[seg+1]||a+1;
+              for (let i=a;i<=b;i++){
+                const t = (i-a)/Math.max(1,(b-a));
+                const segTarget = targetLoss * Math.pow(0.85, seg);
+                let v = l0*Math.exp(-kLoss*(i+1));
+                v = 0.6*v + 0.4*(l0 + (segTarget - l0)*(seg + t)/Math.max(1,(marks.length-1)));
+                const noiseAmp = (0.08*l0) * (1 - 0.8*(i/(n-1)));
+                v += (Math.random()*2-1)*noiseAmp; if (Math.random() < 0.02) v += 0.15*l0;
+                loss[i] = Math.max(0, v);
+              }
+              kLoss *= 1.6;
+            }
+            const a0 = 0.1 + Math.random()*0.35; const aMax = good ? (0.92+Math.random()*0.07) : (poor ? (0.62+Math.random()*0.14) : (0.8+Math.random()*0.1));
+            let kAcc = 0.02 + Math.random()*0.08; const acc = new Array(n);
+            for (let i=0;i<n;i++){
+              let v = aMax - (aMax - a0)*Math.exp(-kAcc*(i+1));
+              const noiseAmp = 0.04*(1 - 0.8*(i/(n-1)));
+              v += (Math.random()*2-1)*noiseAmp; acc[i] = Math.max(0, Math.min(1, v));
+              if (marksSet.has(i)) kAcc *= 1.4;
+            }
+            const accGap = 0.02 + Math.random()*0.06; const lossGap = 0.05 + Math.random()*0.15;
+            const accVal = new Array(n); const lossVal = new Array(n);
+            let ofStart = Math.floor(((good ? 0.85 : 0.7) + (Math.random()*0.15 - 0.05))*(n-1));
+            ofStart = Math.max(Math.floor(0.5*(n-1)), Math.min(Math.floor(0.95*(n-1)), ofStart));
+            for (let i=0;i<n;i++){
+              let av = acc[i] - accGap + (Math.random()*0.06 - 0.03);
+              let lv = loss[i]*(1+lossGap) + (Math.random()*0.1 - 0.05)*Math.max(1, l0*0.2);
+              if (i>=ofStart && !poor){ const t = (i-ofStart)/Math.max(1,(n-1-ofStart)); av -= 0.03*t; lv += 0.12*t*loss[i]; }
+              accVal[i] = Math.max(0, Math.min(1, av)); lossVal[i] = Math.max(0, lv);
+            }
+            return { accTrain: acc, lossTrain: loss, accVal, lossVal };
+          }
+          function generateRunNames(count){
+            const adjectives = ['ancient','brave','calm','clever','crimson','daring','eager','fearless','gentle','glossy','golden','hidden','icy','jolly','lively','mighty','noble','proud','quick','silent','swift','tiny','vivid','wild'];
+            const nouns = ['river','mountain','harbor','forest','valley','ocean','meadow','desert','island','canyon','harbor','trail','summit','delta','lagoon','ridge','tundra','reef','plateau','prairie','grove','bay','dune','cliff'];
+            const used = new Set(); const names = [];
+            const pick = (arr) => arr[Math.floor(Math.random()*arr.length)];
+            while (names.length < count) {
+              const name = `${pick(adjectives)}-${pick(nouns)}-${Math.floor(1+Math.random()*9)}`;
+              if (!used.has(name)) { used.add(name); names.push(name); }
+            }
+            return names;
+          }
+          function simulateData(){
+            // Randomize number of runs between 2 and 7 with W&B-like names
+            const wantRuns = Math.max(2, Math.floor(2 + Math.random()*6));
+            const runsSim = generateRunNames(wantRuns);
+            const rnd = (min,max)=> Math.floor(min + Math.random()*(max-min+1));
+            let stepsCount = 16;
+            if (cycleIdx === 0) stepsCount = rnd(4, 12);
+            else if (cycleIdx === 1) stepsCount = rnd(16, 48);
+            else stepsCount = rnd(80, 240);
+            cycleIdx = (cycleIdx + 1) % 3;
+            const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+            const nextByMetric = new Map();
+            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
+            mList.forEach(tgt => { const map = {}; runsSim.forEach(r => map[r] = []); nextByMetric.set(tgt, map); });
+            runsSim.forEach(run => {
+              const curves = genCurves(stepsCount);
+              steps.forEach((s,i)=>{
+                if (mList.includes('epoch')) nextByMetric.get('epoch')[run].push({ step:s, value:s });
+                if (mList.includes('train_accuracy')) nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
+                if (mList.includes('val_accuracy')) nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
+                if (mList.includes('train_loss')) nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
+                if (mList.includes('val_loss')) nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
               });
-              legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.remove('ghost'));
-            });
-          });
+            });s
+            nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
+            // Update currentRunList and palette, then legend
+            currentRunList = runsSim.slice();
+            try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', currentRunList.length); } catch(_) {}
+            if (!palette) { const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB'; palette = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])]; }
+            rebuildLegend();
+          }
+          const onKeyDownSim = (ev) => { try { const key = ev && ev.key ? ev.key.toLowerCase() : ''; if (key==='r') { jitterData(); rerender(); } if (key==='s') { simulateData(); rerender(); } } catch(_) {} };
+          window.addEventListener('keydown', onKeyDownSim);
+          // Start with level 3 (long) synthetic data by default
+          simulateData();
+          rerender();
+          host.__rerender = rerender;
+          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(host); } else { window.addEventListener('resize', rerender); }
+
+          // (Legend hover handlers bound inside rebuildLegend())
         } catch (e) {
           const pre = document.createElement('pre'); pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e);
           pre.style.color = 'var(--danger, #b00020)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap'; host.appendChild(pre);

app/src/styles/components/_form.css

@@ -0,0 +1,241 @@
+/* ============================================================================ */
+/* Form Elements - Modern Minimal Design */
+/* ============================================================================ */
+
+/* Select styling with modern chevron */
+select {
+  background-color: var(--page-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--button-radius);
+  padding: var(--button-padding-y) var(--button-padding-x) var(--button-padding-y) var(--button-padding-x);
+  font-family: var(--default-font-family);
+  font-size: var(--button-font-size);
+  color: var(--text-color);
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.825L1.175 4 2.35 2.825 6 6.475 9.65 2.825 10.825 4z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right calc(var(--button-padding-x) + 14px) center;
+  background-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+select:hover, select:focus, select:active {
+  border-color: var(--primary-color);
+}
+
+select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--surface-bg);
+}
+
+/* Dark theme select chevron */
+[data-theme="dark"] select {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bbb' d='M6 8.825L1.175 4 2.35 2.825 6 6.475 9.65 2.825 10.825 4z'/%3E%3C/svg%3E");
+}
+
+/* Checkbox styling */
+input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-color);
+  border-radius: 3px;
+  background-color: var(--page-bg);
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  margin-right: var(--spacing-2);
+}
+
+input[type="checkbox"]:hover {
+  border-color: var(--primary-color);
+}
+
+input[type="checkbox"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+input[type="checkbox"]:checked {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+input[type="checkbox"]:checked::before {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--on-primary);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+input[type="checkbox"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Radio button styling */
+input[type="radio"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  background-color: var(--page-bg);
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  margin-right: var(--spacing-2);
+}
+
+input[type="radio"]:hover {
+  border-color: var(--primary-color);
+}
+
+input[type="radio"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+input[type="radio"]:checked {
+  border-color: var(--primary-color);
+}
+
+input[type="radio"]:checked::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--primary-color);
+}
+
+input[type="radio"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Input text styling for consistency */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="url"],
+input[type="search"],
+textarea {
+  appearance: none;
+  background-color: var(--page-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--button-radius);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  font-family: var(--default-font-family);
+  font-size: var(--button-font-size);
+  color: var(--text-color);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  width: 100%;
+}
+
+input[type="text"]:hover,
+input[type="email"]:hover,
+input[type="password"]:hover,
+input[type="number"]:hover,
+input[type="url"]:hover,
+input[type="search"]:hover,
+textarea:hover {
+  border-color: var(--primary-color);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+input[type="text"]:disabled,
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="number"]:disabled,
+input[type="url"]:disabled,
+input[type="search"]:disabled,
+textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--surface-bg);
+}
+
+/* Label styling */
+label {
+  display: flex;
+  align-items: center;
+  font-size: var(--button-font-size);
+  color: var(--text-color);
+  cursor: pointer;
+  margin-bottom: 0;
+  line-height: 1.4;
+  user-select: none;
+}
+
+/* Form group spacing */
+.form-group {
+  margin-bottom: var(--spacing-4);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.form-group label {
+  margin-bottom: 0;
+}
+
+/* Alternative: for vertical form groups */
+.form-group.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.form-group.vertical label {
+  margin-bottom: var(--spacing-1);
+}
+
+/* For inline form elements */
+.form-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-3);
+}
+
+.form-inline label {
+  margin-bottom: 0;
+}
+
+/* Ensure labels in flex containers don't break alignment */
+div[style*="display: flex"] label,
+div[class*="flex"] label,
+.trackio-controls label,
+.scale-controls label,
+.theme-selector label {
+  margin-bottom: 0 !important;
+  align-self: center;
+}

app/src/styles/global.css

@@ -8,6 +8,7 @@
 @import './components/_table.css';
 @import './components/_tag.css';
 @import './components/_card.css';
+@import './components/_form.css'; 
 
 .demo-wide,
 .demo-full-width {