update palette and add trackio example

app/.astro/astro/content.d.ts

@@ -0,0 +1,245 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdx': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+			components: import('astro').MDXInstance<{}>['components'];
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E,
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(entry: {
+		collection: C;
+		slug: E;
+	}): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(entry: {
+		collection: C;
+		id: E;
+	}): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: {
+			collection: C;
+			slug: ValidContentEntrySlug<C>;
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: {
+			collection: C;
+			id: keyof DataEntryMap[C];
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof AnyEntryMap>(
+		entry: AnyEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C,
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? {
+					collection: C;
+					slug: ValidContentEntrySlug<C>;
+				}
+			: {
+					collection: C;
+					id: keyof DataEntryMap[C];
+				}
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C,
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		"chapters": {
+"best-pratices.mdx": {
+	id: "best-pratices.mdx";
+  slug: "best-pratices";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"components.mdx": {
+	id: "components.mdx";
+  slug: "components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"debug-components.mdx": {
+	id: "debug-components.mdx";
+  slug: "debug-components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"getting-started.mdx": {
+	id: "getting-started.mdx";
+  slug: "getting-started";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"greetings.mdx": {
+	id: "greetings.mdx";
+  slug: "greetings";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"introduction.mdx": {
+	id: "introduction.mdx";
+  slug: "introduction";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"markdown.mdx": {
+	id: "markdown.mdx";
+  slug: "markdown";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"vibe-coding-charts.mdx": {
+	id: "vibe-coding-charts.mdx";
+  slug: "vibe-coding-charts";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"writing-your-content.mdx": {
+	id: "writing-your-content.mdx";
+  slug: "writing-your-content";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+};
+"embeds": {
+"vibe-code-d3-embeds-directives.md": {
+	id: "vibe-code-d3-embeds-directives.md";
+  slug: "vibe-code-d3-embeds-directives";
+  body: string;
+  collection: "embeds";
+  data: any
+} & { render(): Render[".md"] };
+};
+
+	};
+
+	type DataEntryMap = {
+		"assets": {
+"data/mnist-variant-model": {
+	id: "data/mnist-variant-model";
+  collection: "assets";
+  data: any
+};
+};
+
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

app/src/components/Palettes.astro

@@ -80,7 +80,7 @@ const rootId = `palettes-${Math.random().toString(36).slice(2)}`;
   </div>
 </div>
 <script type="module" is:inline>
-  import '/src/scripts/color-palettes.js';
+  import '/scripts/color-palettes.js';
   const ROOT_ID = "{rootId}";
   (() => {
     const cards = [

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

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

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

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

app/src/content/chapters/components.mdx

@@ -237,6 +237,7 @@ You can embed external content in your article using **iframes**. For example, *
 <small className="muted">Gradio embed example</small>
 <div className="card">
 <iframe src="https://gradio-hello-world.hf.space" width="100%" height="380" frameborder="0"></iframe>
+<iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="600" frameborder="0"></iframe>
 </div>
 
 <Accordion title="Code example">

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

@@ -71,5 +71,9 @@ They can be found in the `app/src/content/embeds` folder and you can also use th
 ---
 <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" />
 ---
-
+<HtmlEmbed
+  src="d3-trackio.html"
+  title="Résultats TrackIO"
+/>
+---
 

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

@@ -0,0 +1,495 @@
+<div class="d3-trackio">
+  <div class="d3-trackio__grid">
+    <div class="cell" data-metric="epoch" data-title="epoch"></div>
+    <div class="cell" data-metric="train_accuracy" data-title="train_accuracy"></div>
+    <div class="cell" data-metric="train_loss" data-title="train_loss"></div>
+    <div class="cell" data-metric="val_accuracy" data-title="val_accuracy"></div>
+    <div class="cell cell--wide" data-metric="val_loss" data-title="val_loss"></div>
+  </div>
+  <noscript>JavaScript is required to render this chart.</noscript>
+</div>
+<style>
+  .d3-trackio { position: relative; }
+  .d3-trackio__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+  @media (max-width: 980px) {
+    .d3-trackio__grid { grid-template-columns: 1fr; }
+  }
+  .d3-trackio__grid .cell--wide { grid-column: 1 / -1; }
+
+  .d3-trackio .cell {
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--surface-bg);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  .d3-trackio .cell-header {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  .d3-trackio .cell-title {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-color);
+    text-transform: none;
+  }
+  .d3-trackio .cell-body { position: relative; width: 100%; overflow: hidden; }
+  .d3-trackio .cell-body svg { max-width: 100%; height: auto; display: block; }
+
+  /* Axes/grid colors via project CSS variables */
+  .d3-trackio .axes path,
+  .d3-trackio .axes line { stroke: var(--axis-color); }
+  .d3-trackio .axes text { fill: var(--tick-color); }
+  .d3-trackio .grid line { stroke: var(--grid-color); }
+
+  /* Global header (legend) below the grid for consistency */
+  .d3-trackio__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 12px;
+    margin: 8px 0 0 0;
+    flex-wrap: wrap;
+  }
+  .d3-trackio__header .legend-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .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 .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; }
+
+  /* Hover ghosting */
+  .d3-trackio.hovering .lines path.ghost { opacity: .25; }
+  .d3-trackio.hovering .points circle.ghost { opacity: .25; }
+  .d3-trackio.hovering .areas path.ghost { opacity: .08; }
+  .d3-trackio.hovering .legend-bottom .item.ghost { opacity: .35; }
+
+  /* Tooltip styling aligned with other embeds */
+  .d3-trackio .d3-tooltip {
+    z-index: 20;
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+  .d3-trackio .d3-tooltip__inner { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
+  .d3-trackio .d3-tooltip__inner > div:first-child { font-weight: 800; letter-spacing: 0.1px; margin-bottom: 0; }
+  .d3-trackio .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-trackio .d3-tooltip__inner > div:nth-child(n+3) { padding-top: 6px; border-top: 1px solid var(--border-color); }
+  .d3-trackio .d3-tooltip__color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-color); }
+</style>
+<script>
+  (() => {
+    const THIS_SCRIPT = document.currentScript;
+
+    const TARGET_METRICS = [
+      'epoch',
+      'train_accuracy',
+      'train_loss',
+      'val_accuracy',
+      'val_loss'
+    ];
+
+    const prettyMetricLabel = (key) => {
+      if (!key) return '';
+      const table = {
+        'train_accuracy': 'Train Accuracy',
+        'val_accuracy': 'Val Accuracy',
+        'train_loss': 'Train Loss',
+        'val_loss': 'Val Loss',
+        'epoch': 'Epoch'
+      };
+      if (table[key]) return table[key];
+      const cleaned = String(key).replace(/[_-]+/g, ' ').trim();
+      return cleaned.split(/\s+/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+    };
+
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
+    };
+
+    // Build per-cell line chart
+    function initCell(cell) {
+      const d3 = window.d3;
+      const metricKey = cell.getAttribute('data-metric');
+      const titleText = cell.getAttribute('data-title') || metricKey;
+
+      // Header
+      const header = document.createElement('div'); header.className = 'cell-header';
+      const title = document.createElement('div'); title.className = 'cell-title'; title.textContent = prettyMetricLabel(titleText); header.appendChild(title);
+      cell.appendChild(header);
+
+      // Body & SVG
+      const body = document.createElement('div'); body.className = 'cell-body'; cell.appendChild(body);
+      const svg = d3.select(body).append('svg').attr('width','100%').style('display','block');
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class','grid');
+      const gAxes = gRoot.append('g').attr('class','axes');
+      const gAreas = gRoot.append('g').attr('class','areas');
+      const gLines = gRoot.append('g').attr('class','lines');
+      const gPoints = gRoot.append('g').attr('class','points');
+      const gHover = gRoot.append('g').attr('class','hover');
+
+      // Tooltip
+      cell.style.position = cell.style.position || 'relative';
+      let tip = cell.querySelector('.d3-tooltip'); let tipInner; let hideTipTimer = null;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position:'absolute', top:'0', left:'0', transform:'translate(-9999px,-9999px)', pointerEvents:'none',
+          padding:'10px 12px', borderRadius:'12px', fontSize:'12px', lineHeight:'1.35', border:'1px solid var(--border-color)',
+          background:'var(--surface-bg)', color:'var(--text-color)', boxShadow:'0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity:'0', transition:'opacity .12s ease'
+        });
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign='left'; tip.appendChild(tipInner); cell.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      // Layout & scales
+      let width = 800, height = 200; const margin = { top: 12, right: 20, bottom: 36, left: 56 };
+      const xScale = d3.scaleLinear();
+      const yScale = d3.scaleLinear();
+      const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
+
+      function updateLayout(axisLabelY){
+        const rect = cell.getBoundingClientRect();
+        width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
+        // Hauteur fixe (encore plus basse) pour uniformiser les 5 graphiques
+        height = 200;
+        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','xMidYMid meet');
+        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
+
+        // Grid
+        gGrid.selectAll('*').remove();
+        gGrid.selectAll('line').data(yScale.ticks(6)).join('line')
+          .attr('x1',0).attr('x2',innerWidth).attr('y1',d=>yScale(d)).attr('y2',d=>yScale(d))
+          .attr('stroke','var(--grid-color)').attr('stroke-width',1).attr('shape-rendering','crispEdges');
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        let xAxis = d3.axisBottom(xScale).tickSizeOuter(0).ticks(8).tickFormat(formatK);
+        let yAxis = d3.axisLeft(yScale).ticks(6);
+        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
+        gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
+
+        // Axis labels
+        gAxes.append('text')
+          .attr('class', 'x-axis-label')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + Math.max(20, Math.min(36, margin.bottom - 10)))
+          .attr('fill', 'var(--text-color)')
+          .attr('text-anchor', 'middle')
+          .style('font-size', '12px')
+          .style('font-weight', '700')
+          .text('Steps');
+        gAxes.append('text')
+          .attr('class', 'y-axis-label')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -innerHeight / 2)
+          .attr('y', -Math.max(16, Math.min(28, margin.left - 8) + 10))
+          .attr('fill', 'var(--text-color)')
+          .attr('text-anchor', 'middle')
+          .style('font-size', '12px')
+          .style('font-weight', '700')
+          .text(axisLabelY || 'Value');
+
+        return { innerWidth, innerHeight };
+      }
+
+      const formatK = (v) => {
+        const abs = Math.abs(v);
+        if (abs >= 1000) { const n = v / 1000; const s = d3.format('.1f')(n); return (s.endsWith('.0') ? s.slice(0, -2) : s) + 'k'; }
+        return d3.format('d')(v);
+      };
+
+      function render(metricData, colorForRun) {
+        const runs = Object.keys(metricData || {});
+        const hasAny = runs.some(r => (metricData[r]||[]).length > 0);
+        if (!hasAny) {
+          // Show a single empty message and hide the SVG group
+          gRoot.style('display', 'none');
+          let msg = body.querySelector('.empty-msg');
+          if (!msg) {
+            msg = document.createElement('div');
+            msg.className = 'empty-msg';
+            msg.textContent = 'Metric not found in data.';
+            Object.assign(msg.style, { padding:'10px', fontSize:'12px', color:'var(--muted-color)' });
+            body.appendChild(msg);
+          }
+          return;
+        }
+        // Ensure message is removed if previously shown
+        const msg = body.querySelector('.empty-msg'); if (msg) msg.remove();
+        gRoot.style('display', null);
+
+        let minStep = Infinity, maxStep = -Infinity, minVal = Infinity, maxVal = -Infinity;
+        runs.forEach(r => { (metricData[r]||[]).forEach(pt => { minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); minVal = Math.min(minVal, pt.value); maxVal = Math.max(maxVal, pt.value); }); });
+        const isAccuracy = /accuracy/i.test(metricKey);
+        const axisLabelY = prettyMetricLabel(metricKey);
+        xScale.domain([minStep, maxStep]);
+        if (isAccuracy) yScale.domain([0, 1]).nice(); else yScale.domain([minVal, maxVal]).nice();
+
+        const { innerWidth, innerHeight } = updateLayout(axisLabelY);
+
+        // Vertical grid lines at each available step (same visibility as horizontal)
+        const stepSetForGrid = new Set();
+        runs.forEach(r => { (metricData[r]||[]).forEach(pt => stepSetForGrid.add(pt.step)); });
+        const stepsForGrid = Array.from(stepSetForGrid).sort((a,b)=>a-b);
+        gGrid.selectAll('line.vstep')
+          .data(stepsForGrid)
+          .join(
+            enter => enter.append('line').attr('class','vstep')
+              .attr('y1', 0).attr('y2', innerHeight)
+              .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
+              .attr('stroke','var(--grid-color)').attr('stroke-width',1).attr('shape-rendering','crispEdges'),
+            update => update
+              .attr('y1', 0).attr('y2', innerHeight)
+              .attr('x1', d => xScale(d)).attr('x2', d => xScale(d)),
+            exit => exit.remove()
+          );
+
+        // Shaded areas from stderr if available
+        gAreas.selectAll('*').remove();
+        runs.forEach(r => {
+          const vals = (metricData[r]||[]).slice().sort((a,b)=>a.step-b.step);
+          const withErr = vals.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+          if (!withErr.length) return;
+          const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+          const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+          const coords = upper.concat(lower);
+          const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+          gAreas.append('path')
+            .attr('class','area')
+            .attr('data-run', r)
+            .attr('d', pathData)
+            .attr('fill', colorForRun(r))
+            .attr('opacity', 0.15)
+            .attr('stroke', 'none');
+        });
+
+        // Lines
+        const series = runs.map(r => ({ run: r, color: colorForRun(r), values: (metricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
+        const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
+        paths.enter().append('path').attr('class','run-line').attr('data-run', d=>d.run).attr('fill','none').attr('stroke-width', 1.5).attr('opacity', 0.9)
+          .attr('stroke', d=>d.color).attr('d', d=>lineGen(d.values));
+        paths.transition().duration(260).attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=>lineGen(d.values));
+        paths.exit().remove();
+
+        // Points
+        const allPoints = series.flatMap(s => s.values.map(v => ({ run:s.run, color:s.color, step:v.step, value:v.value })));
+        const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d=> `${d.run}-${d.step}`);
+        ptsSel.enter().append('circle').attr('class','pt').attr('data-run', d=>d.run).attr('r', 2).attr('fill', d=>d.color).attr('fill-opacity', 0.6)
+          .attr('stroke', 'none').attr('cx', d=>xScale(d.step)).attr('cy', d=>yScale(d.value))
+          .merge(ptsSel)
+          .transition().duration(150)
+          .attr('cx', d=>xScale(d.step)).attr('cy', d=>yScale(d.value));
+        ptsSel.exit().remove();
+
+        // Hover
+        gHover.selectAll('*').remove();
+        const overlay = gHover.append('rect').attr('fill','transparent').style('cursor','crosshair').attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight);
+        const hoverLine = gHover.append('line').style('stroke','var(--text-color)').attr('stroke-opacity', 0.25).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
+        const stepSet = new Set(); series.forEach(s=>s.values.forEach(v=>stepSet.add(v.step))); const steps = Array.from(stepSet).sort((a,b)=>a-b);
+        function onMove(ev){ if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx,my]=d3.pointer(ev, overlay.node()); const nearest = steps.reduce((best,s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]); const xpx = xScale(nearest); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
+          let html = `<div><strong>${prettyMetricLabel(metricKey)}</strong></div><div><strong>step</strong> ${formatK(nearest)}</div>`;
+          const entries = series.map(s=>{ const map = new Map(s.values.map(v=>[v.step, v])); const pt = map.get(nearest); return { run:s.run, color:s.color, pt }; }).filter(e => e.pt && e.pt.value!=null);
+          entries.sort((a,b)=> (a.pt.value - b.pt.value));
+          const fmt = (vv)=> (isAccuracy? (+vv).toFixed(4) : (+vv).toFixed(4));
+          entries.forEach(e => {
+            const err = (e.pt.stderr!=null && isFinite(e.pt.stderr) && e.pt.stderr>0) ? ` ± ${fmt(e.pt.stderr)}` : '';
+            html += `<div style="display:flex;align-items:center;gap:8px;white-space:nowrap;"><span class=\"d3-tooltip__color-dot\" style=\"background:${e.color}\"></span><strong>${e.run}</strong><span style=\"margin-left:auto;text-align:right;\">${fmt(e.pt.value)}${err}</span></div>`;
+          });
+          tipInner.innerHTML = html; const offsetX=12, offsetY=12; tip.style.opacity='1'; tip.style.transform=`translate(${Math.round(mx+offsetX+margin.left)}px, ${Math.round(my+offsetY+margin.top)}px)`; }
+        function onLeave(){ hideTipTimer = setTimeout(()=>{ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); }, 100); }
+        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
+      }
+
+      return { metricKey, render };
+    }
+
+    const bootstrap = () => {
+      const scriptEl = THIS_SCRIPT;
+      // Locate host
+      let host = null;
+      if (scriptEl && scriptEl.parentElement && scriptEl.parentElement.querySelector) {
+        host = scriptEl.parentElement.querySelector('.d3-trackio');
+      }
+      if (!host) {
+        let sib = scriptEl && scriptEl.previousElementSibling;
+        while (sib && !(sib.classList && sib.classList.contains('d3-trackio'))) { sib = sib.previousElementSibling; }
+        host = sib || null;
+      }
+      if (!host) { host = document.querySelector('.d3-trackio'); }
+      if (!host) return;
+      if (host.dataset && host.dataset.mounted === 'true') return; if (host.dataset) host.dataset.mounted = 'true';
+
+      // Build global header (legend)
+      const header = document.createElement('div'); header.className = 'd3-trackio__header';
+      const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>';
+      header.appendChild(legend);
+      host.appendChild(header);
+
+      const cells = Array.from(host.querySelectorAll('.cell'));
+      if (!cells.length) return;
+
+      const instances = cells.map(cell => initCell(cell));
+
+      // Read HtmlEmbed attributes from closest ancestor carrying them
+      let mountEl = host;
+      while (mountEl && !mountEl.getAttribute?.('data-datafiles') && !mountEl.getAttribute?.('data-config')) {
+        mountEl = mountEl.parentElement;
+      }
+      let providedData = null; let providedConfig = null;
+      try { const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null; if (attr && attr.trim()) { providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim(); } } catch(_) {}
+      try { const cfg = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null; if (cfg && cfg.trim()) { providedConfig = cfg.trim().startsWith('{') ? JSON.parse(cfg) : cfg; } } catch(_) {}
+
+      const DEFAULT_CSV = '/data/trackio_wandb_demo.csv';
+      const ensureDataPrefix = (p) => { if (typeof p !== 'string' || !p) return p; return p.includes('/') ? p : `/data/${p}`; };
+      const normalizeInput = (inp) => Array.isArray(inp) ? inp.map(ensureDataPrefix) : (typeof inp === 'string' ? [ ensureDataPrefix(inp) ] : null);
+      const CSV_PATHS = Array.isArray(providedData)
+        ? normalizeInput(providedData)
+        : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
+            DEFAULT_CSV,
+            './assets/data/formatting_filters.csv',
+            '../assets/data/formatting_filters.csv',
+            '../../assets/data/formatting_filters.csv'
+          ]);
+      const fetchFirstAvailable = async (paths) => { for (const p of paths) { try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) return await r.text(); } catch(_){} } throw new Error('CSV not found'); };
+
+      const d3 = window.d3;
+      (async () => {
+        try {
+          // Load one or many CSVs and merge rows
+          let textAll = '';
+          if (Array.isArray(CSV_PATHS) && CSV_PATHS.length > 1) {
+            const texts = await Promise.all(CSV_PATHS.map(p => fetch(p, { cache:'no-cache' }).then(r => r.ok ? r.text() : '').catch(()=>'')));
+            textAll = texts.filter(Boolean).join('\n');
+          } else {
+            textAll = await fetchFirstAvailable(CSV_PATHS);
+          }
+          const rows = d3.csvParse(textAll, d => ({
+            run:(d.run||'').trim(),
+            step:+d.step,
+            metric:(d.metric||'').trim(),
+            value:+d.value,
+            stderr: (d.stderr!=null && d.stderr!=='') ? +d.stderr : null
+          }));
+
+          // Filter to target metrics if present in data, with synonym resolution
+          const metricsInData = Array.from(new Set(rows.map(r => r.metric)));
+          const lcSet = new Set(metricsInData.map(m => m.toLowerCase()));
+          const preferIfExists = (cand) => cand.find(c => lcSet.has(String(c).toLowerCase())) || null;
+          const resolveMetric = (target) => {
+            // Config override
+            const override = providedConfig && providedConfig.metricMap && providedConfig.metricMap[target];
+            if (override && lcSet.has(String(override).toLowerCase())) return metricsInData.find(m => m.toLowerCase() === String(override).toLowerCase());
+            // Exact
+            const exact = metricsInData.find(m => m.toLowerCase() === target.toLowerCase()); if (exact) return exact;
+            // Heuristics by target
+            const cands = (name) => metricsInData.filter(m => m.toLowerCase().includes(name));
+            if (target === 'epoch') return preferIfExists(['epoch']);
+            if (target === 'train_accuracy') return preferIfExists([
+              'train_accuracy','training_accuracy','accuracy_train','train_acc','acc_train','train/accuracy','accuracy'
+            ]) || cands('acc').find(m => /train|trn/i.test(m));
+            if (target === 'val_accuracy') return preferIfExists([
+              'val_accuracy','valid_accuracy','validation_accuracy','val_acc','acc_val','val/accuracy'
+            ]) || cands('acc').find(m => /val|valid/i.test(m));
+            if (target === 'train_loss') return preferIfExists([
+              'train_loss','training_loss','loss_train','train/loss','loss'
+            ]) || cands('loss').find(m => /train|trn/i.test(m));
+            if (target === 'val_loss') return preferIfExists([
+              'val_loss','validation_loss','valid_loss','loss_val','val/loss'
+            ]) || cands('loss').find(m => /val|valid/i.test(m));
+            return null;
+          };
+          const TARGET_TO_DATA = Object.fromEntries(TARGET_METRICS.map(t => [t, resolveMetric(t)]));
+          const metricsToDraw = TARGET_METRICS.filter(t => !!TARGET_TO_DATA[t]);
+
+          // Build run list and shared color mapping
+          const runList = Array.from(new Set(rows.map(r => String(r.run||'').trim()).filter(Boolean))).sort();
+          let palette = null;
+          try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', runList.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];
+
+          // 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('');
+
+          // Build per-metric data map (using resolved names)
+          const dataByMetric = new Map();
+          metricsToDraw.forEach(tgt => {
+            const m = TARGET_TO_DATA[tgt];
+            const map = {}; runList.forEach(r => map[r] = []);
+            rows.filter(r=>r.metric===m).forEach(r => {
+              if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr });
+            });
+            dataByMetric.set(tgt, map);
+          });
+
+          // Render each cell
+          instances.forEach(inst => {
+            const metricMap = dataByMetric.get(inst.metricKey) || {};
+            inst.render(metricMap, colorForRun);
+          });
+
+          // Resize handling
+          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); }
+
+          // 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));
+              });
+              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'));
+            });
+          });
+        } 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);
+        }
+      })();
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
+  })();
+</script>
+
+

app/src/pages/index.astro

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

app/src/scripts/color-palettes.js

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