cleanup

.gitignore

@@ -19,7 +19,8 @@ node_modules/
 *.env
 *.cache
 
-app/scripts/latex-converter/output/
+app/scripts/latex-to-mdx/output/
+app/src/content/embeds/typography/generated
 
 # PDF export
 app/public/*.pdf

.temp-template-sync

@@ -1 +0,0 @@
-Subproject commit ead50ba9028719475151d26696248ef6fe996b70

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

@@ -0,0 +1,284 @@
+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": {
+"demo/best-pratices.mdx": {
+	id: "demo/best-pratices.mdx";
+  slug: "demo/best-pratices";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/components.mdx": {
+	id: "demo/components.mdx";
+  slug: "demo/components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/debug-components.mdx": {
+	id: "demo/debug-components.mdx";
+  slug: "demo/debug-components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/getting-started.mdx": {
+	id: "demo/getting-started.mdx";
+  slug: "demo/getting-started";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/greetings.mdx": {
+	id: "demo/greetings.mdx";
+  slug: "demo/greetings";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/introduction.mdx": {
+	id: "demo/introduction.mdx";
+  slug: "demo/introduction";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/latex-convertion.mdx": {
+	id: "demo/latex-convertion.mdx";
+  slug: "demo/latex-convertion";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/markdown.mdx": {
+	id: "demo/markdown.mdx";
+  slug: "demo/markdown";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/vibe-coding-charts.mdx": {
+	id: "demo/vibe-coding-charts.mdx";
+  slug: "demo/vibe-coding-charts";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/writing-your-content.mdx": {
+	id: "demo/writing-your-content.mdx";
+  slug: "demo/writing-your-content";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"your-first-chapter.mdx": {
+	id: "your-first-chapter.mdx";
+  slug: "your-first-chapter";
+  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/data": {
+	id: "data/data";
+  collection: "assets";
+  data: any
+};
+"data/font-sprite-mapping": {
+	id: "data/font-sprite-mapping";
+  collection: "assets";
+  data: any
+};
+"data/font_manifest": {
+	id: "data/font_manifest";
+  collection: "assets";
+  data: any
+};
+"data/llm_benchmarks": {
+	id: "data/llm_benchmarks";
+  collection: "assets";
+  data: any
+};
+"data/mnist-variant-model": {
+	id: "data/mnist-variant-model";
+  collection: "assets";
+  data: any
+};
+"data/typography_data": {
+	id: "data/typography_data";
+  collection: "assets";
+  data: any
+};
+};
+
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

app/public/scripts/color-palettes.js

@@ -46,63 +46,95 @@
     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 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 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 = () => {
+  // Get primary color in OKLCH format to preserve precision
+  const getPrimaryOKLCH = () => {
     const css = getCssVar('--primary-color');
-    if (!css) return '#E889AB';
-    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(css)) return css.toUpperCase();
+    if (!css) return null;
+
+    // For OKLCH colors, return the exact values without conversion
+    if (css.includes('oklch')) {
+      const oklchMatch = css.match(/oklch\(([^)]+)\)/);
+      if (oklchMatch) {
+        const values = oklchMatch[1].split(/\s+/).map(v => parseFloat(v.trim()));
+        if (values.length >= 3) {
+          const [L, C, h] = values;
+          return { L, C, h };
+        }
+      }
+    }
+
+    // For non-OKLCH colors, convert to OKLCH for consistency
     const rgb = parseCssColorToRgb(css);
-    if (rgb) return toHex(rgb);
-    return '#E889AB';
+    if (rgb) {
+      const { L, a, b } = rgbToOklab(rgb.r, rgb.g, rgb.b);
+      const { C, h } = oklabToOklch(L, a, b);
+      return { L, C, h };
+    }
+    return null;
+  };
+
+  // Keep getPrimaryHex for backward compatibility, but now it converts from OKLCH
+  const getPrimaryHex = () => {
+    const oklch = getPrimaryOKLCH();
+    if (!oklch) return null;
+
+    const { a, b } = oklchToOklab(oklch.L, oklch.C, oklch.h);
+    const rgb = oklabToRgb(oklch.L, a, b);
+    return toHex(rgb);
   };
   // 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);
+    categorical: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
       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)); }
+      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);
+    sequential: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
       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)); }
+      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);
+    diverging: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
       const total = Math.max(1, Math.min(12, count || 8));
 
       // Left endpoint: EXACT primary color (no darkening)
-      const leftLab = baseLab;
+      const leftLab = oklchToOklab(L, C, h);
       // 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 compH = (h + 180) % 360;
+      const cSafe = Math.min(0.35, Math.max(0.08, C));
+      const rightLab = oklchToOklab(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));
@@ -152,18 +184,22 @@
   let lastSignature = '';
 
   const updatePalettes = () => {
-    const primary = getPrimaryHex();
-    const signature = `${primary}`;
+    const primaryOKLCH = getPrimaryOKLCH();
+    const primaryHex = getPrimaryHex();
+    const signature = `${primaryOKLCH?.L},${primaryOKLCH?.C},${primaryOKLCH?.h}`;
     if (signature === lastSignature) return;
     lastSignature = signature;
-    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {}
+    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary: primaryHex, primaryOKLCH } })); } catch { }
   };
 
   const bootstrap = () => {
+    // Initial setup - only run once on page load
     updatePalettes();
+
+    // Observer will handle all subsequent changes
     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;
@@ -175,13 +211,13 @@
         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 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);
+        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);
+        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 {
@@ -193,7 +229,7 @@
           .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++){
+        for (let i = 1; i < candidates.length; i++) {
           const cr = contrast(candidates[i].rgb, bg);
           if (cr > bestCR) { best = candidates[i]; bestCR = cr; }
         }
@@ -206,7 +242,7 @@
           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})`;
+        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 };
@@ -214,14 +250,16 @@
     };
     window.ColorPalettes = {
       refresh: updatePalettes,
-      notify: () => { try { const primary = getPrimaryHex(); document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {} },
+      notify: () => { try { const primaryOKLCH = getPrimaryOKLCH(); const primaryHex = getPrimaryHex(); document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary: primaryHex, primaryOKLCH } })); } catch { } },
       getPrimary: () => getPrimaryHex(),
+      getPrimaryOKLCH: () => getPrimaryOKLCH(),
       getColors: (key, count = 6) => {
-        const primary = getPrimaryHex();
+        const primaryOKLCH = getPrimaryOKLCH();
+        if (!primaryOKLCH) return [];
         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);
+        if (key === 'categorical') return generators.categorical(primaryOKLCH, total);
+        if (key === 'sequential') return generators.sequential(primaryOKLCH, total);
+        if (key === 'diverging') return generators.diverging(primaryOKLCH, total);
         return [];
       },
       getTextStyleForBackground: (bgCss, opts) => pickTextStyleForBackground(bgCss, opts || {}),

app/scripts/latex-to-mdx/README.md

@@ -49,7 +49,7 @@ latex-to-mdx/
 ### 🎨 **Automatic Styling**  
 - **Highlights**: `\highlight{text}` → `<span class="highlight">text</span>`
 - **Auto cleanup**: Removal of numbering `(1)`, `(2)`, etc.
-- **Astro components**: Images → `ResponsiveImage` with automatic imports
+- **Astro components**: Images → `Figure` with automatic imports
 
 ### 🔧 **Robust Pipeline**
 - **LaTeX preprocessor**: Reference cleanup before Pandoc
@@ -83,7 +83,7 @@ title: "Your Article Title"
 description: "Generated from LaTeX"
 ---
 
-import ResponsiveImage from '../components/ResponsiveImage.astro';
+import Figure from '../components/Figure.astro';
 import figure1 from '../assets/image/figure1.png';
 
 ## Section with invisible anchor
@@ -96,7 +96,7 @@ Reference to an interactive [equation](#equation-name).
 Equation with KaTeX ID:
 $$\htmlId{equation-name}{E = mc^2}$$
 
-<ResponsiveImage src={figure1} alt="Description" />
+<Figure src={figure1} alt="Description" />
 ```
 
 ## ⚙️ Required Astro Configuration
@@ -141,7 +141,7 @@ export default defineConfig({
    - Code snippet injection
 
 4. **MDX Conversion** (`mdx-converter.mjs`)
-   - Images transformation → `ResponsiveImage`
+   - Images transformation → `Figure`
    - HTML span escaping correction
    - Automatic imports generation
    - MDX frontmatter

app/scripts/latex-to-mdx/input/sections/05_foundation_models.tex.temp

@@ -1,224 +0,0 @@
-\section{Generalist Robot Policies}
-\label{sec:learning-foundation}
-
-\epigraph{\textit{Specialization is for insects}}{Robert A. Heinlein}
-
-> **TL;DR**
-> Openly available large scale datasets and the development of stable, expressive and efficient architecture fostered research on the development of generalist robot policies that can operate across embodiment and tasks.
-
-The advent of large models trained on internet-scale datasets has drastically influenced fields like Computer Vision (CV) and Natural Language Processing (NLP), shifting the paradigm towards combining (1) an initial, task-agnostic large-scale pre-training stage and a (2) task-specific, adjustment phase.
-The pre-training/adaptation paradigm has now largely replaced more classic approaches consisting of task-specific data collection, curation and model training in many subdomains within CV and NLP, motivated by the main drawback of limited scalability for \emph{task-specific approaches}, traditionally labor intensive.
-Factors including (1) the advancements in generalist models learned with self-supervision for perception [@oquabDINOv2LearningRobust2024] or semantic understanding [@devlinBERTPretrainingDeep2019] and (2) the popularization collective efforts to aggregate large-scale openly available datasets [@collaborationOpenXEmbodimentRobotic2025,khazatskyDROIDLargeScaleInTheWild2025] are increasingly pushing the field of robot learning towards the pre-train-and-adapt paradigm.
-This shift taps into the long-standing challenge of developing generalist robot policies, and holds the premise to surpass traditionally siloed approaches to robotics problems and develop a \emph{foundation robotics model}.
-While Section~\ref{sec:learning-bc-single} introduced methods for learning \emph{single-task policies} such as ACT or Diffusion Policy, in this section we present advancements in developing \emph{generalist, multi-task, policies}, capable of performing a wide range of tasks across different environments and embodiments, and guided by unstructured instructions given via natural language.
-
-![Fields within ML such as Computer Vision and NLP converged on the development of foundation models, trained on a variety of large scale models and capable to perform multiple downstream tasks (top). Conversely, robotics suffered from limited standardization in terms of the architectures used, and siloed, task specific datasets, incurring in a high degree of fragmentation which traditionally hindered the development of generalist models for robotics in favour of task-specific models (bottom).](assets/image/ch5/ch5-ml-vs-robotics-foundation.png) {#fig-fig:ch5-ml-vs-robotics-foundation}
-
-*Fields within ML such as Computer Vision and NLP converged on the development of foundation models, trained on a variety of large scale models and capable to perform multiple downstream tasks (top). Conversely, robotics suffered from limited standardization in terms of the architectures used, and siloed, task specific datasets, incurring in a high degree of fragmentation which traditionally hindered the development of generalist models for robotics in favour of task-specific models (bottom).*
-
-\subsection{Preliminaries: Models and Data}
-The remarkable success of foundation models in NLP and CV is predicated on two core principles: architectural innovation and joint data-compute scaling.
-The transformer architecture proved instrumental in capturing long-range dependencies in sequential data such as text, and its stability and expressivity made it the \emph{de facto} standard for modern large-scale models trained on internet-scale amounts of data.
-In stark contrast with popular NLP [@raffelExploringLimitsTransfer2023] and CV [@ImageNet_VSS09] general-purpose datasets, the field of robotics has historically developed around task-specific datasets which hinders scalability across problems, resulting in a concrete data deficit for general-purpose robot learning.
-Unlike the wealth of relatively readily available text and images on the internet, robotics data is intrinsically embodied---datasets collected for a manipulation robot typically differ entirely from locomotion datasets.
-Further, datasets consisting of expert demonstrations are (1) intrinsically expensive to collect (2) and notoriously heterogeneous---different human experts may perform the same task optimally yet in very different ways.
-In particular, since each expert trajectory is tied to a specific robot platform and the operating conditions of its environment and task, data heterogeneity has long posed a \emph{methodological} challenge for scaling robotics datasets via aggregation.
-Beyond this, heterogeneity also raises \emph{conceptual} issues: naively mixing data across embodiments can induce negative transfer, as control strategies developed in isolation for different robot systems in different environments may even conflict when combined.
-Thus, the high degree of fragmentation of robotics datasets and tasks has traditionally led to the development of \emph{specialist} policies, trained on small, task-specific datasets, and which excel at their designated task but fail to generalize to new situations (Figure~\ref{fig:ch5-ml-vs-robotics-foundation}).
-
-![Early efforts in the development of generalist models for robotics include BC-Zero [@jangBCZZeroShotTask2022], RT-1 [@brohanRT1RoboticsTransformer2023], and RT-2 [@brohanRT2VisionLanguageActionModels2023]: large scale models trained on thousands of demonstrations. The open release of the Open-X [@collaborationOpenXEmbodimentRobotic2025] and DROID datasets [@khazatskyDROIDLargeScaleInTheWild2025] fostered the development of open source models: OpenVLA [@kimOpenVLAOpenSourceVisionLanguageAction2024], \pi_0 [@black$p_0$VisionLanguageActionFlow2024] and SmolVLA [@shukorSmolVLAVisionLanguageActionModel2025].](assets/image/ch5/ch5-generalist-policies-timeline.png) {#fig-fig:ch5-generalist-policies-timeline}
-
-*Early efforts in the development of generalist models for robotics include BC-Zero [@jangBCZZeroShotTask2022], RT-1 [@brohanRT1RoboticsTransformer2023], and RT-2 [@brohanRT2VisionLanguageActionModels2023]: large scale models trained on thousands of demonstrations. The open release of the Open-X [@collaborationOpenXEmbodimentRobotic2025] and DROID datasets [@khazatskyDROIDLargeScaleInTheWild2025] fostered the development of open source models: OpenVLA [@kimOpenVLAOpenSourceVisionLanguageAction2024], \pi_0 [@black$p_0$VisionLanguageActionFlow2024] and SmolVLA [@shukorSmolVLAVisionLanguageActionModel2025].*
-
-Motivated by the pursuit of generalist robot policies, the research community started investigating what and how to integrate from other domains within ML.
-Figure~\ref{fig:ch5-generalist-policies-timeline} shows a timeline of some of the most popular contributions attempting at developing generalist policies.
-Starting from BC-Zero, a latent variable model trained on 25K+ demonstrations, the field has now evolved into \( \pi_0 \), a transformer-based model trained on 10M+ demonstrations and exhibiting strong few-shot capabilities across tasks and embodiments.
-For starters, Robotics Transformer 1 (RT-1) [@brohanRT1RoboticsTransformer2023] represented a significant step in the direction of developing a generalist robot policies over prior work including (1) BC-Zero [@jangBCZZeroShotTask2022] and (2) Gato [@reedGeneralistAgent2022], in that~@brohanRT1RoboticsTransformer2023 uses a much larger and diverse set of training tasks compared to both BC-Zero and Gato.
-In particular, RT-1 uses a transformer architecture, and is trained on as many as 130k human-recorded trajectories collected over 13 robots in the span on 17 months.
-RT-1 learns to process a history of camera images and a natural language instruction, and feeds the resulting sequence of high-dimensional tokens to a transformer, trained using a \emph{classification loss on a discretized actions space} consisting of 6 256 bins, each for each joint of a 6-dof robotic arm.
-
-Perhaps motivated by the contemporary successes of the transformer architecture in both CV and NLP, the same group of authors investigated using a discrete output space to model---inherently continuous---quantities such as actions, leveraging a (1) more powerful architecture and (2) scaling up the dataset used \citep[RT-2]{brohanRT2VisionLanguageActionModels2023}.
-In RT-2,~@brohanRT2VisionLanguageActionModels2023 propose inheriting internet-scale semantic knowledge from large-scale multi-modal datasets to learn a single, \emph{unified model} for robotics control.
-Such a model, termed \emph{Vision-Language-Action} (VLA) in the original RT-2 paper, effectively casts robot control as a language modeling problem, and in particular as a Visual Question-Answering (VQ\&A) task, whereby the output token space used to represent \emph{string} tokens  is shared with the \emph{8-bits tokens} used to represent the 256 actuation levels of a 6-dof robot joint.
-In their work,~@brohanRT2VisionLanguageActionModels2023 propose co-fine-tuning then-leading large-scale VLMs such as PaLIX [@chenPaLIXScalingMultilingual2023] or PaLM-E [@driessPaLMEEmbodiedMultimodal2023] on a mix of web and robotics data, thus complementing VQ\&A training with robotics-specific signal, learning to directly output robot actions in a shared token space for visual and language inputs.
-Using large models trained on internet-scale data as backbones for VLAs allows models to tap into the rich semantic knowledge embedded in the VLM's parameters, interpret new commands as well as recognize unseen objects by connecting them to concepts acquired while pre-training.
-For instance,~@brohanRT2VisionLanguageActionModels2023 show that while RT-2 has never been explicitly trained to repurpose tools for a hammering task, it can still combine its semantic understanding of images, so that when asked which object between (1) a piece of paper, (2) a pair of headphones or (3) a rock may be used instead of a hammer, it answers correctly, (3).
-
-Traditionally, research involved not only training the model but also collecting the underlying data, a costly and time-consuming process—for instance, @jangBCZZeroShotTask2022 gathered 25K+ trajectories before training, while RT-1 required 130K+.
-In turn, the data used in robot learning research efforts have traditionally proved rather fragmented, tailored to the specific task considered by the specific group of researchers who collected it, ultimately hindering integration.
-The Open X-Embodiment project [@collaborationOpenXEmbodimentRobotic2025] was a landmark effort to address the data fragmentation problem, curating the aggregation of 60 \emph{existing} robotics datasets from 22 different robot embodiments and 21 institutions, resulting in a total 1.4M of cross-embodiments, cross-tasks, openly-available trajectories.
-Besides the contribution of an aggregate, large scale dataset,~@collaborationOpenXEmbodimentRobotic2025 also demonstrated significant positive transfer \emph{across tasks and embodiments}, showing that a single model trained on multi-embodiment data can outperform specialist models trained on their respective single-embodiment datasets.
-The Distributed Robot Interaction Dataset (DROID) [@khazatskyDROIDLargeScaleInTheWild2025] represents another significant step towards addressing the problem of scarse and disaggregated data in robot learning, providing a unique dataset consisting of 75K+ human demonstrations collected in realistic (\emph{in-the-wild}) manipulation settings, providing another cornerstone for building general-purpose robot policies.
-Recently, foundational datasets curated through large, centralized efforts, are increasingly complemented by decentralized, community-driven collection of robotics data.
-Software libraries as **LeRobot**~have been instrumental in enabling decentralized collection of large amounts of data, providing the infrastructure for researchers and practitioners to easily contribute trajectories from range of embodiments, democratizing data access via distributed collection.
-
-The success of large, proprietary models like RT-1 and RT-2, highlighted a growing accessibility gap in robotics research, as training and deploying large-scale models requires computational resources simply unattainable for most research institutions.
-The OpenVLA project [@kimOpenVLAOpenSourceVisionLanguageAction2024] emerged in direct contrast of closed-source counterparts, as a community-driven effort to create powerful, openly available VLAs.
-In particular,~@kimOpenVLAOpenSourceVisionLanguageAction2024 trained OpenVLA by exclusively leveraging openly available data (970K+ from the Open-X dataset), and share training recipes alongside the model weights.
-Architecturally, OpenVLA integrates a pre-trained vision encoder to project visual tokens into the embedding space of Llama2-7B [@touvronLlama2Open2023] language model backbone.
-The language model backbone is then used to predict \emph{discrete action tokens} over 256 activation levels.
-
-![Robot learning is undergoing a paradigmatic shift: centralized data collections (A, left) are increasingly larger, often comprising Ms of demonstrations, and (A, right) decentralized approaches to data collection are also rising as an alternative for large scale data collection. (B) Generalist models are also becoming increasingly smaller and easier to run on limited hardware.](assets/image/ch5/ch5-trends.png) {#fig-fig:ch5-trends}
-
-*Robot learning is undergoing a paradigmatic shift: centralized data collections (A, left) are increasingly larger, often comprising Ms of demonstrations, and (A, right) decentralized approaches to data collection are also rising as an alternative for large scale data collection. (B) Generalist models are also becoming increasingly smaller and easier to run on limited hardware.*
-
-Figure~\ref{fig:ch5-trends} illustrates graphically the two most relevant trends in modern robot learning.
-As datasets collected via centralized, cross-institutions cooperation of increasing size are made available for the research community, decentralized datasets collected by individual researchers and practitioners have also gained traction recently, closing the gap with academic benchmarks thanks to community-contributed datasets.
-Further, models used across tasks and embodiments are also becoming much more compute-efficient, and as a result the models' size has been consistently reducing over time, with consequent gains for autonomous robots in real-world, resource-constrained environments.
-
-\subsection{Modern VLAs}
-Modern recipes to train large scale VLAs extend early efforts to learn foundation models from large amounts of data via BC, introducing significant advancements concerning both architectural and procedural aspects.
-From an architectural perspective, modern VLAs such as \pi_0 [@black$p_0$VisionLanguageActionFlow2024] leverage a \emph{unified transformer model} for efficiency of computation, while maintaining specialized sub-components within the model for visual perception and action prediction, enabling cross-task performance via language conditioning.
-Crucially, modern VLAs including~@black$p_0$VisionLanguageActionFlow2024[\pi_0] and~@shukorSmolVLAVisionLanguageActionModel2025[SmolVLA] adopt \emph{unified} transformer models employing disjoint set of weights (\emph{experts}) for compute-efficient visual-semantic understanding and robotic control.
-Procedurally, modern VLAs complement advanced Vision-Language Model (VLM) backbones with action-specific modules (1) adopting mid-sized \emph{action experts} to model continuous actions distributions \( p (a_{t:t+H_a} \vert o_t) \)---avoiding discrete action tokens entirely---and (2) relying on~\emph{action chunking} \citep[Section~\ref{sec:learning-bc-single}]{zhaoLearningFineGrainedBimanual2023} as a strategy to reduce error compounding when predicting multiple actions learning from inherently non-i.i.d. data, such as demonstration data.
-
-These architectural and procedural innovations present three benefits.
-First, developing architectures that exploit internet-scale pre-trained backbones allows to fully capitalizes on the vast world knowledge and skills state-of-the-art VLMs exhibit, preventig models from needing to learn visual, linguistic and semantic concepts from scratch.
-Second, using generative models for continuous action distributions allows to learn rich, multimodal data distributions, a much more likely scenario in the big-data regime typically tackled while developing generalist policies.
-Further, introducing two separate components for perception and action planning could enable using Mixture of Experts (MoE) architectures [@fedusReviewSparseExpert2022], more efficient to run and thus resulting in faster inference---a key features for models deployed in real-world scenarios.
-This new paradigm has been at the core of some of the most capable generalist policies developed to date, capable to few-shot adapt to novel tasks and to perform highly dexterous manipulation tasks, ranging from end-to-end folding laundry, to bussing tables.
-
-\subsubsection{VLMs for VLAs}
-VLMs are designed to process both visual and textual modalities---most commonly by taking both images and text as input and generating text conditioned on the visual context.
-Recent advances in VLMs have been driven by the success of LLMs, with many approaches building upon pretrained LLMs and adopting similar training paradigms to the ones used in language modeling.
-Typically, VLMs [@alayracFlamingoVisualLanguage2022,laurenconWhatMattersWhen2024,linVILAPretrainingVisual2024] are constructed by integrating a pretrained vision encoder [@radfordLearningTransferableVisual2021,zhaiSigmoidLossLanguage2023,finiMultimodalAutoregressivePretraining2024] with a pretrained LLM [@grattafioriLlama3Herd2024,jiangMistral7B2023].
-Training then proceeds in multiple multimodal stages, beginning with a large-scale pretraining on datasets containing image-text pairs [@LAION-COCO,kakaobrain2022coyo700m] and interleaved vision-language corpora [@OBELICS,MMC4], all followed by a supervised fine-tuning stage on instruction-tuning datasets [@LLaVA-1.5,tong2024cambrian,laurenconWhatMattersWhen2024].
-The inherent multimodal nature of VLMs enables them to jointly reason over vision and language.
-Pre-training on vast internet-scale datasets allows these models to associate visual patterns with textual descriptions, thereby acquiring a rich semantic understanding of the world---knowledge about objects, their properties, and relationships---without explicit supervision for each concept.
-In turn, integrating a VLM as a perception backbone for a VLA allows the complete model to inherit rich world knowledge, sidestepping the need to learn visual and semantic representations from scratch.
-In principle, this allows the robot to ground high-level natural language instructions in its visual context, and possibly recognize unseen objects by connecting them to pre-trained concepts absorbed during pre-training, improving on the possibility to generalize to novel scenarios.
-
-Recently, compute efficiency has also become a central focus in VLM research.
-Several works aim to reduce training costs by using smaller, more diverse datasets [@LLaVA-1.5,InstructBLIP,bai2025qwen25vl,zhu2024minigpt,tong2024cambrian], training smaller-scale models [@marafiotiSmolVLMRedefiningSmall2025, moondream,minicmpv2024], or by adapting pretrained unimodal models by tuning only a small subset of parameters [@shukor2023epalm,vallaeys2024improveddepalm,MAPL,FROMAGe,tsimpoukelli2021multimodalfrozen,BLIP-2].
-While the majority of VLM research focuses on image and text modalities, recent work has demonstrated that similar techniques can be extended to integrate additional modalities, such as video and audio [@wang2025internvideo2,liu2024kangaroo,zhang2025videollama,kong2024audioflam]---a particularly promising direction of research for robotics applications, where multiple sensor modalities can be integrated effectively.
-This trend towards efficiency is paramount for robotics applications, where policies must operate under the stringent constraints of real-world deployment.
-Indeed, robots often possess limited on-board computational resources and must react in real-time to dynamic environments.
-Smaller and faster VLMs have thus become quintessential for developing responsive autonomous systems, enabling high-frequency control loops by reducing the latency between perception and action.
-
-\subsection{\( \pi_0 \)}
-
-\pi_0 [@black$p_0$VisionLanguageActionFlow2024] introduce a VLA consisting of a MoE architecture consisting of (1) a pre-trained VLM backbone (Gemma 2.6B [@teamGemma2Improving2024]) and (2) a dedicated action expert used to generate continuous actions via flow matching.
-Images and language are embedded with a late-fusion VLM (PaliGemma), while proprioceptive state and actions chunks are routed to a smaller action expert, initialized from scratch.
-The two separate experts communicate via self-attention layers, but maintain disjoint weights to obtain query, key and values matrices at each layer, maintaining specialization while efficiently allocating computation.
-
-![The \pi_0 architecture, as in [@black$p_0$\beginalign]
-VisionLanguageActionFlow2024. Vision and language tokens are routed to a VLM backbone which is prevented from attending robot proprioperceptive states and action tokens, which are instead routed to a smaller subset of weights within the architecture. The architecture is trained with Flow Matching on 10M+ trajectories from a mixture of closed and openly available datasets.](assets/image/ch5/ch5-pi0.png) {#fig-fig:ch5-pi0}
-
-*The \pi_0 architecture, as in [@black$p_0$\beginalign]
-VisionLanguageActionFlow2024. Vision and language tokens are routed to a VLM backbone which is prevented from attending robot proprioperceptive states and action tokens, which are instead routed to a smaller subset of weights within the architecture. The architecture is trained with Flow Matching on 10M+ trajectories from a mixture of closed and openly available datasets.*
-
-Concretely, \( \pi_0 \) is a unified transformer with two disjoint sets of weights \( \phi, \theta\).
-A larger VLM backbone \( p_\phi \) initialized from Gemma 2.6B processes multiple image frames obtained from multiple cameras points \( [\{ I_t \}_{t=1}^n] \), as well as a language instruction \([\ell_t]\) used to describe the task considered.
-Concurrently, a 300M-parameter \emph{action expert} based on a similar transformer architecture is used processes the robot proprioperceptive state \(q_t\) and an action chunk \(a_{t:t+H_a}\) (Figure~\ref{fig:ch5-pi0}).
-The different expert networks operate separately in processing the respective inputs and turning them into query, key and value matrices, and only share information between each other via self-attention layers.
-The outputs from the VLM backbone are disregarded, while the vector field regressed by the action expert is used to iteratively refine the action process.
-In particular, \pi_0 uses a \emph{blockwise causal attention mask} over tokens belonging to three separate blocks: (1) image and language tokens \(\mathcal T_i \)  obtained from \([\{ I_t \}_{t=1}^n, \ell_t]\), (2) proprioperceptive tokens \(\mathcal T_q \) obtained from \(q_t\), and (3) the action tokens \( \mathcal T_a \) for items in the chunk \(a^{\tau}_{t:t+H_a}\) at time \( \tau \) in the flow-matching process.
-Notably, \emph{within} each block the attention operations are bidirectional, while across blocks, future blocks are masked out.
-Formally, this corresponds to using the attention mask
-\begin{equation*}
-    \mathbf{A} =
-    \bordermatrix{
-              & \mathcal{T}_i & \mathcal{T}_q & \mathcal{T}_a \cr
-    \mathcal{T}_i & \mathbf{1} & \mathbf{0} & \mathbf{0} \cr
-    \mathcal{T}_q & \mathbf{1} & \mathbf{1} & \mathbf{0} \cr
-    \mathcal{T}_a & \mathbf{1} & \mathbf{1} & \mathbf{1} \cr
-    },
-    \quad \mathbf{1}: \text{Bidirectional Attention}, \ \mathbf{0}: \text{Masked Attention}
-\end{equation*}
-Note how \emph{intra}-block directional attention allows tokens to communicate freely, while \emph{inter}-block communication is mediated by the attention mask \(\mathbf{A} \).
-\emph{Blockwise causal masking} effectively prevents the pre-trained perception-language tokens from attending to robotics-tokens, likely out of distribution for VLM backbones traditionally trained on large corpora of internet, non-robotics, data.
-Crucially, because communication is obstructed between image-language tokens, proprioperceptive and action tokens, one can cache keys and values across denoising steps at runtime time, incuring in a reduced computational footprint and faster inference.
-
-In \pi_0, both the VLM backbone and action expert are update using a \emph{flow matching} loss, and in particular are updated minimizing:
-
-$$
-
-    \mathcal{L}(\phi, \theta)  &=  \mathbb{E}_{\tau, \epsilon, o_t, a_{t:t+H_a}}\Big[
-        \big\Vert
-            v_\theta(\underbrace{\tau a_{t:t+H_a} + (1-\tau) \epsilon}_{\tilde a_{t:t+H_a}},\, o_t,\, \tau)
-            - (\epsilon - a_{t:t+H_a})
-        \big\Vert^2
-    \Big], \label{eq:pi0-loss}
-
-    &\tau \sim \mathrm{Beta}_{[0,s]}(1.5,1), \quad
-    \epsilon \sim \mathcal{N}(\mathbf{0}, \mathbf{I}), \quad
-    o_t, a_{t:t+H_a} \sim \mathcal D \notag
-
-$$
-
-Where the experts parametrized by the separate weights \( \phi, \theta \) interact with each other via self-attention layers only, so that the action expert \( v_\theta \) internal computations also depend on the VLM backbone's parameters \( \phi \).
-Importantly,~@black
-\end{align$p_0$VisionLanguageActionFlow2024} minimize~\ref{eq:pi0-loss} over both the multimodal backbone and action expert parameters, thus updating the internal representations of the VLM using BC-specific gradients.
-In contrast,~@driessKnowledgeInsulatingVisionLanguageAction2025 later show that failing to insulate the VLM knowledge from the flow matching gradients actually harms performance.
-Inference is performed iteratively refining action chunks while numerically forward-integrating the vector field predicted by the action expert,
-\begin{equation}
-    a_{t:t+H_a}^{\tau + \delta} = a_{t:t+H_a}^{\tau } + \delta v_\theta(a_{t:t+H_a}^{\tau }, o_t)
-\end{equation}
-
-Flow matching \citep[Section\ref{sec:ch4-flow-matching}]{lipmanFlowMatchingGenerative2023} can be seen as a continuous time, detetrministic generalization of Diffusion and has proven effective in modeling highly complex multi-modal distributions, including those over images and video.
-In turn, its application to large-scale data collections of multiple human behaviors across tasks and embodiments appears rather consequential, particularly considering how it can enable faster inference via a reduced number of denoising steps---as few as 10, in \pi_0.
-In particular, the action expert is model as a conditional flow matching model.
-Each action token embeds a noisy action \(a_i^{\tau} \in a^\tau_{t:t+H_a}\), alongside a sinusoidal encoding of the \emph{flow process} timestep \(\tau\).
-The action expert then leverages full bidirectional attention across the \(H_a\) action tokens provided, as well as attends to previous proprioperceptive and image-language tokens as well.
-Interestingly, differently from a standard flow matching pipeline~@lipmanFlowMatchingGenerative2023, \(\tau\) is \emph{not} sampled from a uniform distribution \(\tau \sim \mathcal U([0,1]) \), but rather obtained from \(\tau \sim \textrm{Beta}(1.5,1) \) defined on the \( [0,s], s<1 \) support (Figure~\ref{fig:ch5-pi0-sampling-timesteps}).
-
-![Unlike more traditional flow-matching algorithms, \pi_0 uses a modified distribution for the timestep \( \tau \) used during training and inference, favouring earlier timestamps corresponding to noisier chunks.](assets/image/ch5/ch5-pi0-sampling-timesteps.png) {#fig-fig:ch5-pi0-sampling-timesteps}
-
-Using such Beta distribution emphasizes higher noise levels during training, a choice~@black$p_0$VisionLanguageActionFlow2024 argue allows \pi_0 to focus on learning the mean of the data distribution \( \mathbb E[a_{t:t+H_a} \vert o_t] \) during training, in keeping with~@esserScalingRectifiedFlow2024.
-To further optimize performance and reduce inference time,~@black$p_0$VisionLanguageActionFlow2024 propose reducing the support of the timestep distribution to \([0,s], \ s < 1 \), as for any forward-integration step size \( \delta = 1-s \) timesteps above \(s \) are never sampled at inference time.
-
-Besides adopting a MoE architecture with a VLM backbone initialized from a pre-trained model and trained jointly with an action expert via flow matching, \pi_0 also relies on a unique pre-training corpus mixes open data of 10M+ trajectories, which~@black$p_0$VisionLanguageActionFlow2024 claim to be the largest dataset used in building a foundational model in robotics to date.
-The dataset used to train \pi_0---referred to as \( \pi \) dataset---comprises a private, undisclosed portion obtained via teleoperation aggregated to openly available datasets including Open-X and DROID, with \(\approx 9.1\
-Open datasets such as DROID and Open-X are complemeneted with expert trajectories with of dexterous demonstrations tasks spanning 7 robot configurations and 68 different tasks.
-~@black$p_0$VisionLanguageActionFlow2024 show that pre-training on the \( \pi \) dataset yields a broadly capable base model, which can be adapted via post-training on narrower high-quality task data, inducing fluent multi-stage behavior while retaining robustness.
-In particular,~@black$p_0$VisionLanguageActionFlow2024 report that, across a variety of benchmarks, \pi_0 pretrained on the \( \pi \) dataset and post-trained on extra high-quality data demonstrations \emph{consistently outperform} \pi_0 trained from scratch (i.e., without pretraining on the \( \pi \) dataset), further scoring the relevance of pretraining.
-~@black$p_0$VisionLanguageActionFlow2024 offer an intuition behind this finding: high-quality demonstrations of a given task typically do not contain mistakes, and how human demonstrator may recover from them.
-In turn, robot trained on high-quality data exclusively with BC may be incapable to recover from failure.
-Conversely, large scale collections of human demonstrations are typically much more diverse (if anything, for their sheer scale), and therefore typically contain rich and diverse information, which may prove suboptimal for any given task when considered in isolation but that proves invaluable in coupling with a small, narrower set of demonstrations.
-
-Lastly,~@black$p_0$VisionLanguageActionFlow2024 present cross-embodiment experiments where they demonstrate \pi_0's ability to control both mobile and static manipulator robots with varying arm embodiments.
-The emergence of cross-embodiment capabilities is largely to be attributed to the presence of large scale cross-embodiment data in the data mixture, handled by \pi_0 defaulting to the maximal configuration size across the \( \pi \) dataset, and zero-padding robots with fewer dof.
-In that \pi_0 constantly processes 18 DoFs robots (two 6-DoF arms, two grippers, base, vertical torso), regardless of the kind of robot, and robots with fewer dofs are zero-padded.
-\pi_0 also relies on three camera views, and uses masked image slots for training and deployment scenarios with fewer cameras.
-
-\subsubsection{Code Example: Using \pi_0}
-\todo{add code example}
-
-\subsection{SmolVLA}
-VLAs remain in an early stage of development and are not yet as mature or widely adopted as LLMs and VLMs.
-Further, much of the impactful VLA progress remains proprietary, with many models sharing only weights while withholding full training details and essential methodological components.
-SmolVLA [@shukorSmolVLAVisionLanguageActionModel2025] is an entirely open-source research effort, aiming to democratize the developments of robotics foundation models by open sourcing model, training recipes and data used.
-
-![The SmolVLA architecture, as in [@shukorSmolVLAVisionLanguageActionModel2025]. SmolVLA is a compact MoE model trained with flow matching to denoise action chunks. Vision and language tokens are fed to a VLM backbone, and share information with the proprioperceptive and action tokens via the attention mechanism. The attention expert interleaves SA and CA layers for further conditioning on the visual features from the VLM backbone. SmolVLA skips computations and reduces the visual tokens, resulting in 6x less memory usage than \pi_0.](assets/image/ch5/ch5-smolvla.png) {#fig-fig:ch5-smolvla}
-
-*The SmolVLA architecture, as in [@shukorSmolVLAVisionLanguageActionModel2025]. SmolVLA is a compact MoE model trained with flow matching to denoise action chunks. Vision and language tokens are fed to a VLM backbone, and share information with the proprioperceptive and action tokens via the attention mechanism. The attention expert interleaves SA and CA layers for further conditioning on the visual features from the VLM backbone. SmolVLA skips computations and reduces the visual tokens, resulting in 6x less memory usage than \pi_0.*
-
-While encouraging efforts like \pi_0 [@black$p_0$VisionLanguageActionFlow2024] demonstrate the feasibility of open VLA systems, they remain (1) large and compute-intensive and (2) dependent on closed datasets collected via centralized efforts on costly robotic platforms, ultimately hindering accessibility.
-SmolVLA mitigates both these accessibility issues by (1) prioritizing a compact, compute-efficient VLA design and (2) targeting community-contributed datasets on accessible robotic platforms such as the SO-100 and SO-101 arms.
-Similarly to \pi_0, SmolVLA (Figure~\ref{fig:ch5-smolvla}) employs a MoE architecture combining a pretrained VLM backbone with a dedicated action expert, and trains with flow matching.
-To ensure efficiency and accessibility, SmolVLA adopts SmolVLM-2 [@marafiotiSmolVLMRedefiningSmall2025] as its VLM backbone, considering SmolVLM-2's reduced size and capability to process multiple image inputs alongside text items.
-SmolVLM-2 uses SigLIP [@zhaiSigmoidLossLanguage2023] as vision encoder, producing visual features for a SmolLM2 language decoder [@allalSmolLM2WhenSmol2025].
-Further, SmolVLA adopts a smaller action expert consisting of \(\sim\)100M parameters and an interleaved stack of self and cross-attention layers.
-To improve efficiency, the action expert adopts a reduced embedding dimension compared to the VLM backbone, resulting in \( d_{v_\theta} = 0.75 d_{\text{VLM}} \).
-[@shukorSmolVLAVisionLanguageActionModel2025]'s design choices thus result in a much smaller size model compared to \pi_0, consisting of around 450M parameters versus \pi_0's 3.3B parameters.
-
-Effectively, SmolVLA consumes multi-view RGB images, a natural-language instruction, and a projected sensorimotor state token as inputs, together with the noised \emph{action chunk} \( \tilde{a_{t:t+H_a}} \) the action expert \( v_\theta \) is trained to denoise.
-In particular, robot proprioperceptive states are projected into a shared token space with the VLM to match \( d_{\text{VLM}} \), and successively projected into the expert's token space.
-Similarily to \pi_0, SmolVLA adopts separate experts communicating exclusively through self-attention layers, which do not employ the same blockwise causal masking in favour of a simple causal masking, resulting in a lower triangular attention mask.
-
-In contrast with \pi_0, the action expert interleaves \emph{cross-attention} (CA) and \emph{self-attention} (SA) layers, a choice shown to yield higher success and smoother action chunks in practice.
-While in the expert SA layers, tokens are used to obtain queries, keys and values, CA layers use action tokens only as queries, and instead project visual, language and proprioperceptive tokens in a shared action space to obtain keys and values.
-Notably, keys and values can be cached as well, resulting in performance gains at inference time.
-
-SmolVLA trims both token and layer compute.
-First, it \emph{reduces visual tokens} via pixel shuffle to a fixed budget of 64 tokens per frame, foregoing tiling used during VLM pretraining for runtime efficiency.
-Second, it \emph{skips upper VLM layers}: the action expert consumes features from the first \(N\) decoder layers, with \(N=L/2\) providing a good speed-performance trade-off and effectively halving downstream compute for the larger part of SmolVLA.
-Beyond model compactness, SmolVLA also contributes an inference stack that decouples action prediction from execution for responsiveness on modest hardware (Section~\ref{sec:ch4-async-inference}).
-
-Departing from reliance on proprietary datasets, SmolVLA pretrains exclusively on 450+ \emph{community datasets}, totaling 20K+ trajectories.
-Because instructions in community contributed dataset can be noisy or missing, the authors re-annotate tasks with a small off-the-shelf VLM using frames sampled from the dataset, and standardize camera viewpoints by mapping sources to a consistent top/wrist/side ordering.
-At inference, similarily to \pi_0, SmolVLA integrates flow over 10 steps, resulting in fast inference.
-SmolVLA proves effective across a range of both real-world and simulated environments, rivaling \pi_0 while being close to 40\
-
-\subsubsection{Code Example: Using SmolVLA}
-\todo{add code example}

app/scripts/latex-to-mdx/input/sections/test.md

@@ -1,488 +0,0 @@
-# Classical Robotics {#sec:classical}
-
-::: epigraph
-*Know your enemy* \[\...\]
-
-Sun Tzu
-:::
-
-::: tldr
-Learning-based approaches to robotics are motivated by the need to (1)
-generalize across tasks and embodiments (2) reduce dependency on human
-expertise (3) leverage historical trends on the production of data---all
-traditionally overlooked by dynamics-based techniques.
-:::
-
-## Explicit and Implicit Models
-
-![Overview of methods to generate motion (clearly non-exhausitve,
-see @bekrisStateRobotMotion2024). The different methods can be grouped
-based on whether they explicitly (*dynamics-based*) or implicitly
-(*learning-based*) model robot-environment
-interactions.](figures/ch2/ch2-approaches.png){#fig:generating-motion-atlas
-width="50%"}
-
-Robotics is concerned with producing artificial motion in the physical
-world in useful, reliable and safe fashion. Thus, robotics is an
-inherently multi-disciplinar domain: producing autonomous motion in the
-physical world requires, to the very least, interfacing different
-software (motion planners) and hardware (motion executioners)
-components. Further, knowledge of mechanical, electrical, and software
-engineering, as well as rigid-body mechanics and control theory have
-therefore proven quintessential in robotics since the field first
-developed in the 1950s. More recently, Machine Learning (ML) has also
-proved effective in robotics, complementing these more traditional
-disciplines [@connellRobotLearning1993]. As a direct consequence of its
-multi-disciplinar nature, robotics has developed as a rather wide array
-of methods, all concerned with the main purpose of .
-
-Methods to produce robotics motion range from traditional *explicit*
-models---[^1] methods, leveraging precise descriptions of the mechanics
-of robots' rigid bodies and their interactions with eventual obstacles
-in the environment---to *implicit* models--- methods, treating
-artificial motion as a statistical pattern to learn given multiple
-sensorimotor
-readings [@agrawalComputationalSensorimotorLearning; @bekrisStateRobotMotion2024].
-A variety of methods have been developed between these two extrema. For
-instance,  @hansenTemporalDifferenceLearning2022 show how learning-based
-systems can benefit from information on the physics of problems,
-complementing a traditional learning method such as Temporal Difference
-(TD)-learning @suttonReinforcementLearningIntroduction2018 with
-Model-Predictive Control (MPC). Conversely, as explicit models may be
-relying on assumptions proving overly simplistic---or even
-unrealistic---in practice, learning can prove effective to improve
-modeling of complex phenomena or complement
-perception [@mccormacSemanticFusionDense3D2016]. Such examples aim at
-demonstrating the richness of approaches to robotics, and
-Figure [1](#fig:generating-motion-atlas){reference-type="ref"
-reference="fig:generating-motion-atlas"} graphically illustrates some of
-the most relevant techniques. Such a list is clearly far from being
-exhaustive, and we refer to @bekrisStateRobotMotion2024 for a more
-comprehensive overview of both general and application-specific methods
-for motion generation. In this section, we wish to introduce the
-inherent benefits of ---the core focus on this tutorial.
-
-## Different Types of Motion
-
-![Different kinds of motions are achieved with potentially very
-different robotic platforms. From left to right, top to bottom: ViperX,
-SO-100, Boston Dynamics' Spot, Open-Duck, 1X's NEO, Boston Dynamics'
-Atlas. This is an example list of robotic platforms and is (very) far
-from being
-exhaustive.](figures/ch2/ch2-platforms.png){#fig:robotics-platforms-atlas
-width="70%"}
-
-In the vast majority of instances, robotics deals with producing motion
-via actuating joints connecting nearly entirely-rigid links. A key
-distinction between focus areas in robotics is based on whether the
-generated motion modifies (1) the absolute state of the environment (via
-dexterity), (2) the relative state of the robot with respect to its
-environment (exercising mobility skills), or (3) a combination of the
-two (Figure [2](#fig:robotics-platforms-atlas){reference-type="ref"
-reference="fig:robotics-platforms-atlas"}).
-
-Effects such as (1) are typically achieved *through* the robot, i.e.
-generating motion to perform an action inducing a desirable
-modification, effectively *manipulating* the environment (manipulation).
-Motions like (2) may result in changes in the robot's physical location
-within its environment. Generally, modifications to a robot's location
-within its environment may be considered instances of the general
-*locomotion* problem, further specified as *wheeled* or *legged*
-locomotion based on whenever a robot makes use of wheels or leg(s) to
-move in the environment. Lastly, an increased level of dynamism in the
-robot-environment interactions can be obtained combining (1) and (2),
-thus designing systems capable to interact with *and* move within their
-environment. This category is problems is typically termed *mobile
-manipulation*, and is characterized by a typically much larger set of
-control variables compared to either locomotion or manipulation alone.
-
-The traditional body of work developed since the very inception of
-robotics is increasingly complemented by learning-based approaches. ML
-has indeed proven particularly transformative across the entire robotics
-stack, first empowering planning-based techniques with improved state
-estimation used for traditional
-planning [@tangPerceptionNavigationAutonomous2023] and then end-to-end
-replacing controllers, effectively yielding perception-to-action
-methods [@koberReinforcementLearningRobotics]. Work in producing robots
-capable of navigating a diverse set of terrains demonstrated the premise
-of both dynamics and learning-based approaches for
-locomotion [@griffinWalkingStabilizationUsing2017; @jiDribbleBotDynamicLegged2023; @leeLearningQuadrupedalLocomotion2020; @margolisRapidLocomotionReinforcement2022],
-and recent works on whole-body control indicated the premise of
-learning-based approaches to generate rich motion on complex robots,
-including
-humanoids [@zhangWoCoCoLearningWholeBody2024; @bjorckGR00TN1Open2025].
-Manipulation has also been widely studied, particularly considering its
-relevance for many impactful use-cases ranging from high-risk
-applications for
-humans [@fujitaDevelopmentRobotsNuclear2020; @alizadehComprehensiveSurveySpace2024]
-to manufacturing [@sannemanStateIndustrialRobotics2020]. While explicit
-models have proven fundamental in achieving important milestones towards
-the development of modern robotics, recent works leveraging implicit
-models proved particularly promising in surpassing scalability and
-applicability challenges via
-learning [@koberReinforcementLearningRobotics].
-
-## Example: Planar Manipulation
-
-Robot manipulators typically consist of a series of links and joints,
-articulated in a chain finally connected to an *end-effector*. Actuated
-joints are considered responsible for generating motion of the links,
-while the end effector is instead used to perform specific actions at
-the target location (e.g., grasping/releasing objects via
-closing/opening a gripper end-effector, using a specialized tool like a
-screwdriver, etc.).
-
-Recently, the development of low-cost manipulators like the
-ALOHA [@zhaoLearningFineGrainedBimanual2023]
-ALOHA-2 [@aldacoALOHA2Enhanced] and
-SO-100/SO-101 [@knightStandardOpenSO100] platforms significantly lowered
-the barrier to entry to robotics, considering the increased
-accessibility of these robots compared to more traditional platforms
-like the Franka Emika Panda arm
-(Figure [3](#fig:robotic-platforms-costs){reference-type="ref"
-reference="fig:robotic-platforms-costs"}).
-
-![Cheaper, more accessible robots are starting to rival traditional
-platforms like the Panda arm platforms in adoption in
-resource-constrained scenarios. The SO-100, in particular, has a cost in
-the 100s of Euros, and can be entirely 3D-printed in hours, while the
-industrially-manufactured Panda arm costs tens of thousands of Euros and
-is not openly
-available.](figures/ch2/ch2-cost-accessibility.png){#fig:robotic-platforms-costs
-width="40%"}
-
-Deriving an intuition as per why learning-based approaches are gaining
-popularity in the robotics community requires briefly analyzing
-traditional approaches for manipulation, leveraging tools like forward
-and inverse kinematics (FK, IK) and control theory. Providing a detailed
-overview of these methods falls (well) out of the scope of this
-tutorial, and we refer the reader to works
-including @sicilianoSpringerHandbookRobotics2016
-[@lynchModernRoboticsMechanics2017; @tedrakeRoboticManipulationPerception; @tedrakeUnderactuatedRoboticsAlgorithms]
-for a much more comprehensive description of these techniques. Here, we
-mostly wish to highlight the benefits of ML over these traditional
-techniques
-
-![The SO-100 arm is a 6-dof manipulator arm. Preventing some of its
-joints (shoulder pane, wrist flex and wrist roll) from actuating, it can
-be represented as a traditional 2-dof planar manipulator (the gripper
-joint in the end-effector is not considered towards the count of the
-degrees of freedom used to produce
-motion).](figures/ch2/ch2-so100-to-planar-manipulator.png){#fig:make-so100-planar-manipulator
-width="70%"}
-
-Consider the (simple) case where a SO-100 is restrained from actuating
-(1) the shoulder pane and (2) the wrist flex and roll motors. This
-effectively reduces the degrees of freedom of the SO-100 from the
-original 5+1 (5 joints + 1 gripper) to 2+1 (shoulder lift, elbow flex +
-gripper). As the end-effector does not impact motion in this model, the
-SO-100 is effectively reduced to the planar manipulator robot presented
-in Figure [4](#fig:make-so100-planar-manipulator){reference-type="ref"
-reference="fig:make-so100-planar-manipulator"}, where spheres represent
-actuators, and solid lines indicate length-$l$ links from the base of
-the SO-100 to the end-effector (*ee*).
-
-Further, let us make the simplifying assumption that actuators can
-produce rotations up to $2 \pi$ radians. In practice, this is seldom the
-case due to movement obstructions caused by the robot body itself (for
-instance, the shoulder lift cannot produce counter-clockwise movement
-due to the presence of the robot's base used to secure the SO-100 to its
-support and host the robot bus), but we will introduce movement
-obstruction at a later stage.
-
-All these simplifying assumptions leave us with the planar manipulator
-of Figure [5](#fig:planar-manipulation-simple){reference-type="ref"
-reference="fig:planar-manipulation-simple"}, free of moving its
-end-effector by controlling the angles $\theta_1$ and $\theta_2$,
-jointly referred to as the robot's *configuration*, and indicated with
-$q = [\theta_1, \theta_2 ] \in [-\pi, +\pi]^2$. The axis attached to the
-joints indicate the associated reference frame, whereas circular arrows
-indicate the maximal feasible rotation allowed at each joint. In this
-tutorial, we do not cover topics related to spatial algebra, and we
-instead refer the reader to @lynchModernRoboticsMechanics2017
-[Chapter 2] and @tedrakeRoboticManipulationPerception [Chapter 3] for
-excellent explanations of the mechanics and theoretical foundations of
-producing motion on rigid bodies.
-
-<figure id="fig:planar-manipulator-floor-shelf">
-<figure id="fig:planar-manipulation-simple">
-<img src="figures/ch2/ch2-planar-manipulator-free.png"
-style="height:3.2cm" />
-<figcaption>Free to move</figcaption>
-</figure>
-<figure id="fig:planar-manipulator-floor">
-<img src="figures/ch2/ch2-planar-manipulator-floor.png"
-style="height:3.2cm" />
-<figcaption>Constrained by the surface</figcaption>
-</figure>
-<figure id="fig:planar-manipulator-floor-shelf">
-<img src="figures/ch2/ch2-planar-manipulator-floor-shelf.png"
-style="height:3.2cm" />
-<figcaption>Constrained by surface and (fixed) obstacle</figcaption>
-</figure>
-<figcaption>Planar, 2-dof schematic representation of the SO-100
-manipulator under diverse deployment settings. From left to right:
-completely free of moving; constrained by the presence of the surface;
-constrained by the surface and presence of obstacles. Circular arrows
-around each joint indicate the maximal rotation feasible at that
-joint.</figcaption>
-</figure>
-
-Considering the (toy) example presented in
-Figure [5](#fig:planar-manipulation-simple){reference-type="ref"
-reference="fig:planar-manipulation-simple"}, then we can analytically
-write the end-effector's position $p \in \mathbb R^2$ as a function of
-the robot's configuration,
-$p = p(q), p: \mathcal Q \mapsto \mathbb R^2$. In particular, we have:
-$$\begin{equation*}
-p(q) = 
-\begin{pmatrix}
-p_x(\theta_1, \theta_2) \\  
-p_y(\theta_1, \theta_2)
-\end{pmatrix}
-=
-\begin{pmatrix}
-l \cos(\theta_1) + l \cos(\theta_1 + \theta_2) \\
-l \sin(\theta_1) + l \sin(\theta_1 + \theta_2)
-\end{pmatrix}
-\in S^{n=2}_{l_1+l_2} = \{ p(q) \in \mathbb R^2: \Vert p(q) \Vert_2^2 \leq (2l)^2, \ \forall q \in \mathcal Q \}
-\end{equation*}$$
-
-Deriving the end-effector's *pose*---position *and* orientation---in
-some $m$-dimensional space
-$\vec{p} \in \mathcal{P} \subset \mathbb{R}^{m}$ starting from the
-configuration $\q \in \mathcal Q \subset \mathbb R^n$ of a $n$-joints
-robot is referred to as *forward kinematics* (FK), whereas identifying
-the configuration corresponding to any given target pose is termed
-*inverse kinematics* (IK). In that, FK is used to map a robot
-configuration into the corresponding end-effector pose, whereas IK is
-used to reconstruct the configuration(s) given an end-effector pose.
-
-In the simplified case here considered (for which $\vec{p} \equiv p$, as
-the orientation of the end-effector is disregarded for simplicity), one
-can solve the problem of controlling the end-effector's location to
-reach a goal position $p^*$ by solving analytically for
-$q: p(q) = f_{\FK}(q) = p^*$. However, in the general case, one might
-not be able to solve this problem analytically, and can typically resort
-to iterative optimization methods comparing candidate solutions using a
-loss function (in the simplest case, $\Vert p(q) - p^* \Vert_2^2$ is a
-natural candidate), yielding:
-
-$$\begin{align}
-\min_{q \in \mathcal Q} \Vert p(q) - p^* \Vert_2^2 \, .
-\label{eq:ik_problem}
-\end{align}$$
-
-Exact analytical solutions to IK are even less appealing when one
-considers the presence of obstacles in the robot's workspace, resulting
-in constraints on the possible values of
-$q \in \mathcal Q \subseteq [-\pi, +\pi]^n \subset \mathbb R^n$ in the
-general case of $n$-links robots.
-
-For instance, the robot in
-Figure [6](#fig:planar-manipulator-floor){reference-type="ref"
-reference="fig:planar-manipulator-floor"} is (very naturally) obstacled
-by the presence of the surface upon which it rests: $\theta_1$ can now
-exclusively vary within $[0,  \pi]$, while possible variations in
-$\theta_2$ depend on $\theta_1$ (when $\theta_1 \to 0$ or
-$\theta_1 \to \pi$, further downwards movements are restricted). Even
-for a simplified kinematic model, developing techniques to
-solve eq. [\[eq:ik_problem\]](#eq:ik_problem){reference-type="ref"
-reference="eq:ik_problem"} is in general non-trivial in the presence of
-constraints, particularly considering that the feasible set of solutions
-$\mathcal Q$ may change across problems.
-Figure [8](#fig:planar-manipulator-floor-shelf){reference-type="ref"
-reference="fig:planar-manipulator-floor-shelf"} provides an example of
-how the environment influences the feasible set considered, with a new
-set of constraints deriving from the position of a new obstacle.
-
-However, IK---solving
-eq. [\[eq:ik_problem\]](#eq:ik_problem){reference-type="ref"
-reference="eq:ik_problem"} for a feasible $q$---only proves useful in
-determining information regarding the robot's configuration in the goal
-pose, and crucially does not provide information on the *trajectory* to
-follow over time to reach a target pose. Expert-defined trajectories
-obviate to this problem providing a length-$K$ succession of goal poses
-$\tau_K = [p^*_0, p^*_1, \dots p^*_K]$ for tracking. In practice,
-trajectories can also be obtained automatically through *motion
-planning* algorithms, thus avoiding expensive trajectory definition from
-human experts. However, tracking $\tau_K$ via IK can prove prohibitively
-expensive, as tracking would require $K$ resolutions of
-eq. [\[eq:ik_problem\]](#eq:ik_problem){reference-type="ref"
-reference="eq:ik_problem"} (one for each target pose). *Differential*
-inverse kinematics (diff-IK) complements IK via closed-form solution of
-a variant of
-eq. [\[eq:ik_problem\]](#eq:ik_problem){reference-type="ref"
-reference="eq:ik_problem"}. Let $J(q)$ denote the Jacobian matrix of
-(partial) derivatives of the FK-function
-$f_\FK: \mathcal Q \mapsto \mathcal P$, such that
-$J(q) = \frac{\partial f_{FK}(q)}{\partial q }$. Then, one can apply the
-chain rule to any $p(q) = f_{\FK}(q)$, deriving $\dot p = J(q) \dot q$,
-and thus finally relating variations in the robot configurations to
-variations in pose, thereby providing a platform for control.
-
-Given a desired end-effector trajectory $\targetvel(t)$ (1) indicating
-anchor regions in space and (2) how much time to spend in each region,
-diff-IK finds $\dot q(t)$ solving for joints' *velocities* instead of
-*configurations*, $$\begin{align}
-\dot q(t) = \arg\min_\nu \; \lVert J(q(t)) \nu - \targetvel (t) \rVert_2^2
-\label{eq:reg_ik_velocity}
-\end{align}$$
-
-Unlike eq. [\[eq:ik_problem\]](#eq:ik_problem){reference-type="ref"
-reference="eq:ik_problem"}, solving for $\dot q$ is much less dependent
-on the environment (typically, variations in velocity are constrained by
-physical limits on the actuators). Conveniently,
-eq. [\[eq:reg_ik_velocity\]](#eq:reg_ik_velocity){reference-type="ref"
-reference="eq:reg_ik_velocity"} also often admits the closed-form
-solution $\dot q = J(q)^+ \targetvel$, where $J^+(q)$ denotes the
-Moore-Penrose pseudo-inverse of $J(q)$. Finally, discrete-time joint
-configurations $q$ can be reconstructed from joint velocities $\dot q$
-using forward-integration on the continuous-time joint velocity ,
-$q_{t+1} = q_t + \Delta t\,\dot q_t$ for a given $\Delta t$, resulting
-in tracking via diff-IK.
-
-Following trajectories with diff-IK is a valid option in well-controlled
-and static environments (e.g., industrial manipulators in controlled
-manufacturing settings), and relies on the ability to define a set of
-target velocities to track
-$[\targetvel_0, \targetvel_1, \dots, \targetvel_k ]$---an error-prone
-task largely requiring human expertise. Furthermore, diff-IK relies on
-the ability to (1) access $J(q) \, \forall q \in \mathcal Q$ and (2)
-compute its pseudo-inverse at every iteration of a given control
-cycle---a challenging assumption in highly dynamical settings, or for
-complex kinematic chains.
-
-### Adding Feedback Loops
-
-While very effective when a goal trajectory has been well specified, the
-performance of diff-IK can degrade significantly in the presence of
-modeling/tracking errors, or in the presence of non-modeled dynamics in
-the environment.
-
-::: wrapfigure
-r0.3
-![image](figures/ch2/ch2-planar-manipulator-floor-box.png){width="\\linewidth"}
-:::
-
-One such case is presented in
-Figure [\[fig:planar-manipulator-box-velocity\]](#fig:planar-manipulator-box-velocity){reference-type="ref"
-reference="fig:planar-manipulator-box-velocity"}, where another rigid
-body other than the manipulator is moving in the environment along the
-horizontal axis, with velocity $\dot x_B$. Accounting analytically for
-the presence of this disturbance---for instance, to prevent the midpoint
-of the link from ever colliding with the object---requires access to
-$\dot x_B$ at least, to derive the equation characterizing the motion of
-the environment.
-
-Less predictable disturbances however (e.g.,
-$\dot x_B \leftarrow \dot x_B + \eps, \eps \sim N(0,1)$) may prove
-challenging to model analytically, and one could attain the same result
-of preventing link-object collision by adding a condition on the
-distance between the midpoint of $l$ and $x_B$, enforced through a
-feedback loop on the position of the robot and object at each control
-cycle.
-
-To mitigate the effect of modeling errors, sensing noise and other
-disturbances, classical pipelines indeed do augment diff-IK with
-feedback control looping back quantities of interest. In practice,
-following a trajectory with a closed feedback loop might consist in
-backwarding the error between the target and measured pose,
-$\Delta p = \targetpos - p(q)$, hereby modifying the control applied to
-$\dot q = J(q)^+ (\targetvel + k_p \Delta p )$, with $k_p$ defined as
-the (proportional) gain.
-
-More advanced techniques for control consisting in feedback
-linearization, PID control, Linear Quatratic Regulator (LQR) or
-Model-Predictive Control (MPC) can be employed to stabilize tracking and
-reject moderate perturbations, and we refer to
-@sicilianoSpringerHandbookRobotics2016 [Chapter 8] for in-detail
-explanation of these concepts, or [@tedrakeRoboticManipulationPerception
-Chapter 8] for a simple, intuitive example in the case of a point-mass
-system. Nonetheless, feedback control presents its challenges as well:
-tuning gains remains laborious and system-specific. Further,
-manipulation tasks present intermittent contacts inducing hybrid
-dynamics (mode switches) and discontinuities in the Jacobian,
-challenging the stability guarantees of the controller and thus often
-necessitating rather conservative gains and substantial hand-tuning.
-
-We point the interested reader to @sicilianoSpringerHandbookRobotics2016
-[Chapter 2,7,8], @lynchModernRoboticsMechanics2017 [Chapter 6,11],
-and @tedrakeRoboticManipulationPerception [Chapter 3,8] for extended
-coverage of FK, IK, diff-IK and control for (diff-)IK.
-
-## Limitations of Dynamics-based Robotics
-
-Despite the last 60+ years of robotics research, autonomous robots are
-still largely incapable of performing tasks at human-level performance
-in the physical world generalizing across (1) robot embodiments
-(different manipulators, different locomotion platforms, etc.) and (2)
-tasks (tying shoe-laces, manipulating a diverse set of objects). While
-essential in the early development of robotics, the aforementioned
-methods require significant human expertise to be used in practice, and
-are typically specific to a particular applicative problem.
-
-![Dynamics-based approaches to robotics suffer from several limitations:
-(1) orchestrating multiple components poses integration challenges; (2)
-the need to develop custom processing pipelines for the sensing
-modalities and tasks considered hinders scalability; (3) simplified
-analytical models of physical phenomena (here friction at the gripper;
-credits to @antonovaReinforcementLearningPivoting2017) limit real-world
-performance. Lastly, (4) dynamics-based methods overlook trends in the
-availability and growth of robotics
-data.](figures/ch2/ch2-classical-limitations.png){#fig:classical-limitations
-width="90%"}
-
-Dynamics-based robotics pipelines have historically been now within most
-architectures for specific purposes. That is, sensing, state estimation,
-mapping, planning, (diff-)IK, and low-level control have been
-traditionally developed as distinct modules with fixed interfaces.
-Pipelining these specific modules proved error-prone, and brittleness
-emerges---alongside compounding errors---whenever changes incur (e.g.,
-changes in lighting for sensing, occlusion/failure of sensors, control
-failures). Adapting such a stack to new tasks or robotic platforms often
-entails re-specifying objectives, constraints, and heuristics at
-multiple stages, incurring significant engineering overhead.
-
-Moreover, classical planners operate on compact, assumed-sufficient
-state representations; extending them to reason directly over raw,
-heterogeneous and noisy data streams is non-trivial. This results in a ,
-as incorporating high-dimensional perceptual inputs (RGB, depth,
-tactile, audio) traditionally required extensive engineering efforts to
-extract meaningful features for control. Also, the large number of
-tasks, coupled with the adoption of *per-task* planners, goal
-parameterizations, and safety constraints, results in an explosion in
-design and validation options, with little opportunity to reuse
-solutions across tasks.
-
-Setting aside integration and scalability challenges: developing
-accurate modeling of contact, friction, and compliance for complicated
-systems remains difficult. Rigid-body approximations are often
-insufficient in the presence of deformable objects, and of the methods
-developed. In the case of complex, time-dependent and/or non-linear
-dynamics, even moderate mismatches in parameters, unmodeled evolutions,
-or grasp-induced couplings can qualitatively affect the observed
-dynamics.
-
-Lastly, dynamics-based methods (naturally) overlook the rather recent .
-The curation of academic datasets by large centralized groups of human
-experts in
-robotics [@collaborationOpenXEmbodimentRobotic2025; @khazatskyDROIDLargeScaleInTheWild2025]
-is now increasingly complemented by a by individuals with varied
-expertise. If not tangentially, dynamics-based approaches are not posed
-to maximally benefit from this trend, which holds the premise of
-allowing generalization in the space of tasks and embodiments, like data
-was the cornerstone for advancements in
-vision [@alayracFlamingoVisualLanguage2022] and natural-language
-understanding [@brownLanguageModelsAre2020].
-
-Taken together, these limitations
-(Figure [9](#fig:classical-limitations){reference-type="ref"
-reference="fig:classical-limitations"}) motivate the exploration of
-learning-based approaches that can (1) integrate perception and control
-more tightly, (2) adapt across tasks and embodiments with reduced expert
-modeling interventions and (3) scale gracefully in performance as more
-robotics data becomes available.
-
-[^1]: In here, we refer to both *kinematics* and *dynamics*-based
-    control.

app/scripts/latex-to-mdx/mdx-converter.mjs

@@ -124,12 +124,12 @@ function addComponentImports(content) {
 
 
 /**
- * Convert grouped figures (subfigures) to MultiImage components
+ * Convert grouped figures (subfigures) to MultiFigure components
  * @param {string} content - MDX content
- * @returns {string} - Content with MultiImage components for grouped figures
+ * @returns {string} - Content with MultiFigure components for grouped figures
  */
-function convertSubfiguresToMultiImage(content) {
-    console.log('  🖼️✨ Converting subfigures to MultiImage components...');
+function convertSubfiguresToMultiFigure(content) {
+    console.log('  🖼️✨ Converting subfigures to MultiFigure components...');
 
     let convertedCount = 0;
 
@@ -187,8 +187,8 @@ function convertSubfiguresToMultiImage(content) {
             .replace(/'/g, "\\'")
             .trim();
 
-        // Mark MultiImage component as used
-        usedComponents.add('MultiImage');
+        // Mark MultiFigure component as used
+        usedComponents.add('MultiFigure');
 
         // Determine layout based on number of images
         let layout = 'auto';
@@ -196,12 +196,12 @@ function convertSubfiguresToMultiImage(content) {
         else if (images.length === 3) layout = '3-column';
         else if (images.length === 4) layout = '4-column';
 
-        // Generate MultiImage component
+        // Generate MultiFigure component
         const imagesJson = images.map(img =>
             `    {\n      src: ${img.src},\n      alt: "${img.alt}",\n      caption: "${img.caption}",\n      id: "${img.id}"\n    }`
         ).join(',\n');
 
-        return `<MultiImage
+        return `<MultiFigure
   images={[
 ${imagesJson}
   ]}
@@ -213,7 +213,7 @@ ${imagesJson}
     });
 
     if (convertedCount > 0) {
-        console.log(`    ✅ Converted ${convertedCount} subfigure group(s) to MultiImage component(s)`);
+        console.log(`    ✅ Converted ${convertedCount} subfigure group(s) to MultiFigure component(s)`);
     } else {
         console.log('    ℹ️  No subfigure groups found');
     }
@@ -222,23 +222,23 @@ ${imagesJson}
 }
 
 /**
- * Transform images to ResponsiveImage components
+ * Transform images to Figure components
  * @param {string} content - MDX content
- * @returns {string} - Content with ResponsiveImage components
+ * @returns {string} - Content with Figure components
  */
 /**
- * Create ResponsiveImage component with import
+ * Create Figure component with import
  * @param {string} src - Clean image source
  * @param {string} alt - Alt text  
  * @param {string} id - Element ID
  * @param {string} caption - Figure caption
  * @param {string} width - Optional width
- * @returns {string} - ResponsiveImage component markup
+ * @returns {string} - Figure component markup
  */
-function createResponsiveImageComponent(src, alt = '', id = '', caption = '', width = '') {
+function createFigureComponent(src, alt = '', id = '', caption = '', width = '') {
     const varName = generateImageVarName(src);
     imageImports.set(src, varName);
-    usedComponents.add('ResponsiveImage');
+    usedComponents.add('Figure');
 
     const props = [];
     props.push(`src={${varName}}`);
@@ -249,11 +249,11 @@ function createResponsiveImageComponent(src, alt = '', id = '', caption = '', wi
     if (alt) props.push(`alt="${alt}"`);
     if (caption) props.push(`caption={'${caption}'}`);
 
-    return `<ResponsiveImage\n  ${props.join('\n  ')}\n/>`;
+    return `<Figure\n  ${props.join('\n  ')}\n/>`;
 }
 
 function transformImages(content) {
-    console.log('  🖼️  Transforming images to ResponsiveImage components with imports...');
+    console.log('  🖼️  Transforming images to Figure components with imports...');
 
     let hasImages = false;
 
@@ -297,7 +297,7 @@ function transformImages(content) {
             const altText = cleanAltText(cleanCap);
             hasImages = true;
 
-            return createResponsiveImageComponent(cleanSrc, altText, id, cleanCap);
+            return createFigureComponent(cleanSrc, altText, id, cleanCap);
         }
     );
 
@@ -309,7 +309,7 @@ function transformImages(content) {
             const cleanAlt = cleanAltText(alt || 'Figure');
             hasImages = true;
 
-            return createResponsiveImageComponent(cleanSrc, cleanAlt);
+            return createFigureComponent(cleanSrc, cleanAlt);
         }
     );
 
@@ -320,7 +320,7 @@ function transformImages(content) {
             const cleanSrc = cleanSrcPath(src);
             hasImages = true;
 
-            return createResponsiveImageComponent(cleanSrc, 'Figure');
+            return createFigureComponent(cleanSrc, 'Figure');
         }
     );
 
@@ -333,7 +333,7 @@ function transformImages(content) {
             const altText = cleanAltText(cleanCap);
             hasImages = true;
 
-            return createResponsiveImageComponent(cleanSrc, altText, id, cleanCap);
+            return createFigureComponent(cleanSrc, altText, id, cleanCap);
         }
     );
 
@@ -346,7 +346,7 @@ function transformImages(content) {
             const altText = cleanAltText(cleanCap);
             hasImages = true;
 
-            return createResponsiveImageComponent(cleanSrc, altText, id, cleanCap);
+            return createFigureComponent(cleanSrc, altText, id, cleanCap);
         }
     );
 
@@ -364,12 +364,12 @@ function transformImages(content) {
                 if (idMatch) id = idMatch[1];
             }
 
-            return createResponsiveImageComponent(cleanSrc, cleanAlt, id);
+            return createFigureComponent(cleanSrc, cleanAlt, id);
         }
     );
 
     if (hasImages) {
-        console.log('    ✅ ResponsiveImage components with imports will be created');
+        console.log('    ✅ Figure components with imports will be created');
     }
 
     return content;
@@ -822,7 +822,7 @@ function processMdxContent(content, latexContent = '') {
     processedContent = formatDisplayMathBlocks(processedContent);
     processedContent = removeHtmlComments(processedContent);
     processedContent = cleanMdxSyntax(processedContent);
-    processedContent = convertSubfiguresToMultiImage(processedContent);
+    processedContent = convertSubfiguresToMultiFigure(processedContent);
     processedContent = transformImages(processedContent);
     processedContent = transformStyledSpans(processedContent);
     processedContent = transformReferenceLinks(processedContent);

app/scripts/latex-to-mdx/post-processor.mjs

@@ -263,7 +263,7 @@ function fixAllAttributes(content) {
         return `data-reference="${before}-${after}"`;
     });
 
-    // Fix id attributes containing colons (like in ResponsiveImage components)
+    // Fix id attributes containing colons (like in Figure components)
     content = content.replace(/id="([^"]*):([^"]*)"/g, (match, before, after) => {
         fixedCount++;
         return `id="${before}-${after}"`;

app/scripts/sync-template.mjs

@@ -28,7 +28,7 @@ const PRESERVE_PATHS = [
     // Project-specific content
     'app/src/content',
 
-    // Public data (symlink to our data)
+    // Public data (symlink to our data) - CRITICAL: preserve this symlink
     'app/public/data',
 
     // Local configuration
@@ -75,7 +75,7 @@ console.log('');
 async function executeCommand(command, options = {}) {
     try {
         if (isDryRun && !options.allowInDryRun) {
-            console.log(`[DRY-RUN] Commande: ${command}`);
+            console.log(`[DRY-RUN] Command: ${command}`);
             return '';
         }
         console.log(`$ ${command}`);
@@ -141,7 +141,20 @@ async function syncFile(sourcePath, targetPath) {
         }
     }
 
-    // Créer un backup si le fichier existe déjà (et que ce n'est pas un lien symbolique)
+    // Check if target file is a symbolic link to preserve
+    if (await pathExists(targetPath)) {
+        try {
+            const targetStats = await fs.lstat(targetPath);
+            if (targetStats.isSymbolicLink()) {
+                console.log(`🔗 SYMLINK TARGET (preserved): ${relativeTarget}`);
+                return;
+            }
+        } catch (error) {
+            console.warn(`⚠️  Impossible de vérifier ${targetPath}: ${error.message}`);
+        }
+    }
+
+    // Create backup if file already exists (and is not a symbolic link)
     if (await pathExists(targetPath)) {
         try {
             const stats = await fs.lstat(targetPath);
@@ -161,11 +174,11 @@ async function syncFile(sourcePath, targetPath) {
     // Assurer que le répertoire parent existe
     await fs.mkdir(path.dirname(targetPath), { recursive: true });
 
-    // Vérifier si la source est un lien symbolique
+    // Check if source is a symbolic link
     try {
         const sourceStats = await fs.lstat(sourcePath);
         if (sourceStats.isSymbolicLink()) {
-            console.log(`🔗 SYMLINK (ignored): ${relativeTarget}`);
+            console.log(`🔗 SYMLINK SOURCE (ignored): ${relativeTarget}`);
             return;
         }
     } catch (error) {
@@ -173,7 +186,7 @@ async function syncFile(sourcePath, targetPath) {
         return;
     }
 
-    // Supprimer le fichier cible s'il existe (pour gérer les liens symboliques)
+    // Remove target file if it exists (to handle symbolic links)
     if (await pathExists(targetPath)) {
         await fs.rm(targetPath, { recursive: true, force: true });
     }
@@ -212,19 +225,55 @@ async function cloneOrUpdateTemplate() {
 
     // Nettoyer le dossier temporaire s'il existe
     if (await pathExists(TEMP_DIR)) {
-        if (!isDryRun) {
-            await fs.rm(TEMP_DIR, { recursive: true, force: true });
-        } else {
+        await fs.rm(TEMP_DIR, { recursive: true, force: true });
+        if (isDryRun) {
             console.log(`[DRY-RUN] Suppression: ${TEMP_DIR}`);
         }
     }
 
-    // Cloner le repo template (même en dry-run pour pouvoir comparer)
+    // Clone template repo (even in dry-run to be able to compare)
     await executeCommand(`git clone ${TEMPLATE_REPO} "${TEMP_DIR}"`, { allowInDryRun: true });
 
     return TEMP_DIR;
 }
 
+async function ensureDataSymlink() {
+    const dataSymlinkPath = path.join(APP_ROOT, 'public', 'data');
+    const dataSourcePath = path.join(APP_ROOT, 'src', 'content', 'assets', 'data');
+
+    // Check if symlink exists and is correct
+    if (await pathExists(dataSymlinkPath)) {
+        try {
+            const stats = await fs.lstat(dataSymlinkPath);
+            if (stats.isSymbolicLink()) {
+                const target = await fs.readlink(dataSymlinkPath);
+                const expectedTarget = path.relative(path.dirname(dataSymlinkPath), dataSourcePath);
+                if (target === expectedTarget) {
+                    console.log('🔗 Data symlink is correct');
+                    return;
+                } else {
+                    console.log(`⚠️  Data symlink points to wrong target: ${target} (expected: ${expectedTarget})`);
+                }
+            } else {
+                console.log('⚠️  app/public/data exists but is not a symlink');
+            }
+        } catch (error) {
+            console.log(`⚠️  Error checking symlink: ${error.message}`);
+        }
+    }
+
+    // Recreate symlink
+    if (!isDryRun) {
+        if (await pathExists(dataSymlinkPath)) {
+            await fs.rm(dataSymlinkPath, { recursive: true, force: true });
+        }
+        await fs.symlink(path.relative(path.dirname(dataSymlinkPath), dataSourcePath), dataSymlinkPath);
+        console.log('✅ Data symlink recreated');
+    } else {
+        console.log('[DRY-RUN] Would recreate data symlink');
+    }
+}
+
 async function showSummary(templateDir) {
     console.log('\n📊 SYNCHRONIZATION SUMMARY');
     console.log('================================');
@@ -265,19 +314,23 @@ async function cleanup() {
 
 async function main() {
     try {
-        // Vérifier qu'on est dans le bon répertoire
+        // Verify we're in the correct directory
         const packageJsonPath = path.join(APP_ROOT, 'package.json');
         if (!(await pathExists(packageJsonPath))) {
-            throw new Error(`Package.json non trouvé dans ${APP_ROOT}. Êtes-vous dans le bon répertoire ?`);
+            throw new Error(`Package.json not found in ${APP_ROOT}. Are you in the correct directory?`);
         }
 
-        // Cloner le template
+        // Clone the template
         const templateDir = await cloneOrUpdateTemplate();
 
         // Synchroniser
         console.log('\n🔄 Synchronisation en cours...');
         await syncDirectory(templateDir, PROJECT_ROOT);
 
+        // S'assurer que le lien symbolique des données est correct
+        console.log('\n🔗 Vérification du lien symbolique des données...');
+        await ensureDataSymlink();
+
         // Afficher le résumé
         await showSummary(templateDir);
 
@@ -292,7 +345,7 @@ async function main() {
     }
 }
 
-// Gestion des signaux pour nettoyer en cas d'interruption
+// Signal handling to clean up on interruption
 process.on('SIGINT', async () => {
     console.log('\n\n⚠️  Interruption detected, cleaning up...');
     await cleanup();

app/src/components/ColorPicker.astro

@@ -1,118 +0,0 @@
----
----
-<div class="color-picker" style="width:100%; margin: 10px 0;">
-  <style>
-    .color-picker .picker__stack { display:flex; flex-direction:column; gap:12px; }
-    .color-picker .current-card { display:grid; grid-template-columns: 30% 70%; align-items: center; gap:14px; padding:14px 32px 14px 16px; border:1px solid var(--border-color); background: var(--surface-bg); border-radius: 12px; }
-    .color-picker .current-left { display:flex; flex-direction: column; gap:8px; min-width: 0; }
-    .color-picker .current-right { display:flex; flex-direction: column; gap:8px; padding-left: 14px; border-left: 1px solid var(--border-color); }
-    .color-picker .current-main { display:flex; align-items:center; gap:12px; min-width: 0; }
-    .color-picker .current-swatch { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--border-color); }
-    .color-picker .current-text { display:flex; flex-direction: column; line-height: 1.2; min-width: 0; }
-    .color-picker .current-name { font-size: 14px; font-weight: 800; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(140px, 28vw, 260px); }
-    .color-picker .current-hex, .color-picker .current-extra { font-size: 11px; color: var(--muted-color); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(140px, 28vw, 260px); }
-    .color-picker .picker__label { font-weight:700; font-size: 12px; color: var(--muted-color); text-transform: uppercase; letter-spacing: .02em; }
-    .color-picker .hue-slider { position:relative; height:16px; border-radius:10px; border:1px solid var(--border-color); background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); cursor: ew-resize; touch-action: none; flex: 1 1 auto; min-width: 200px; }
-    .color-picker .hue-knob { position:absolute; top:50%; left:93.6%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; transform:translate(-50%, -50%); background: var(--surface-bg); z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
-    .color-picker .hue-slider:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
-    .color-picker .hue-value { font-variant-numeric: tabular-nums; color: var(--muted-color); font-size: 12px; }
-    @media (max-width: 720px) { .color-picker .current-card { grid-template-columns: 1fr; } .color-picker .current-right { padding-left: 0; border-left: none; } }
-  </style>
-  <div class="picker__stack">
-    <div class="current-card">
-      <div class="current-left">
-        <div class="current-main">
-          <div class="current-swatch" aria-label="Current color" title="Current color"></div>
-          <div class="current-text">
-            <div class="current-name">—</div>
-            <div class="current-hex">—</div>
-            <div class="current-extra current-lch">—</div>
-            <div class="current-extra current-rgb">—</div>
-          </div>
-        </div>
-      </div>
-      <div class="current-right">
-        <div class="picker__label">Hue</div>
-        <div class="hue-slider" role="slider" aria-label="Hue" aria-valuemin="0" aria-valuemax="360" aria-valuenow="337" tabindex="0">
-          <div class="hue-knob"></div>
-        </div>
-        <div class="hue-value">337°</div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  (() => {
-    const COLOR_NAMES = [{"name":"Candy Apple Red","hex":"#ff0800"},{"name":"Boiling Magma","hex":"#ff3300"},{"name":"Aerospace Orange","hex":"#ff4f00"},{"name":"Burtuqali Orange","hex":"#ff6700"},{"name":"American Orange","hex":"#ff8b00"},{"name":"Cheese","hex":"#ffa600"},{"name":"Amber","hex":"#ffbf00"},{"name":"Demonic Yellow","hex":"#ffe700"},{"name":"Bat-Signal","hex":"#feff00"},{"name":"Bitter Lime","hex":"#cfff00"},{"name":"Electric Lime","hex":"#ccff00"},{"name":"Bright Yellow Green","hex":"#9dff00"},{"name":"Lasting Lime","hex":"#88ff00"},{"name":"Bright Green","hex":"#66ff00"},{"name":"Chlorophyll Green","hex":"#4aff00"},{"name":"Green Screen","hex":"#22ff00"},{"name":"Electric Pickle","hex":"#00ff04"},{"name":"Acid","hex":"#00ff22"},{"name":"Lucent Lime","hex":"#00ff33"},{"name":"Cathode Green","hex":"#00ff55"},{"name":"Booger Buster","hex":"#00ff77"},{"name":"Green Gas","hex":"#00ff99"},{"name":"Enthusiasm","hex":"#00ffaa"},{"name":"Ice Ice Baby","hex":"#00ffdd"},{"name":"Master Sword Blue","hex":"#00ffee"},{"name":"Agressive Aqua","hex":"#00fbff"},{"name":"Vivid Sky Blue","hex":"#00ccff"},{"name":"Capri","hex":"#00bfff"},{"name":"Sky of Magritte","hex":"#0099ff"},{"name":"Azure","hex":"#007fff"},{"name":"Blue Ribbon","hex":"#0066ff"},{"name":"Blinking Blue","hex":"#0033ff"},{"name":"Icelandic Water","hex":"#0011ff"},{"name":"Blue","hex":"#0000ff"},{"name":"Blue Pencil","hex":"#2200ff"},{"name":"Electric Ultramarine","hex":"#3f00ff"},{"name":"Aladdin's Feather","hex":"#5500ff"},{"name":"Purple Climax","hex":"#8800ff"},{"name":"Amethyst Ganzstar","hex":"#8f00ff"},{"name":"Electric Purple","hex":"#bf00ff"},{"name":"Phlox","hex":"#df00ff"},{"name":"Brusque Pink","hex":"#ee00ff"},{"name":"Bright Magenta","hex":"#ff08e8"},{"name":"Big bang Pink","hex":"#ff00bb"},{"name":"Mean Girls Lipstick","hex":"#ff00ae"},{"name":"Pink","hex":"#ff0099"},{"name":"Hot Flamingoes","hex":"#ff005d"},{"name":"Blazing Dragonfruit","hex":"#ff0054"},{"name":"Carmine Red","hex":"#ff0038"},{"name":"Bright Red","hex":"#ff000d"}];
-    if (!window.__colorNames) window.__colorNames = COLOR_NAMES;
-
-    if (!window.__colorPickerBus) {
-      window.__colorPickerBus = (() => {
-        let hue = 337; let adjusting=false; const listeners = new Set();
-        return { get: () => ({ hue, adjusting }), publish: (sourceId, nextHue, isAdj) => { hue=((nextHue%360)+360)%360; adjusting=!!isAdj; listeners.forEach(fn => { try { fn({ sourceId, hue, adjusting }); } catch{} }); }, subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); } };
-      })();
-    }
-
-    const bootstrap = () => {
-      const root = document.querySelector('.color-picker'); if (!root || root.dataset.mounted) return; root.dataset.mounted='true';
-      const slider = root.querySelector('.hue-slider'); const knob = root.querySelector('.hue-knob'); const hueValue = root.querySelector('.hue-value'); const currentSwatch = root.querySelector('.current-swatch'); const currentName = root.querySelector('.current-name'); const currentHex = root.querySelector('.current-hex'); const currentLch = root.querySelector('.current-lch'); const currentRgb = root.querySelector('.current-rgb');
-      const bus = window.__colorPickerBus; const instanceId = Math.random().toString(36).slice(2);
-      const getKnobRadius = () => { try { const w = knob ? knob.getBoundingClientRect().width : 0; return w ? w/2 : 8; } catch { return 8; } };
-      const hexToHsl = (H) => {
-        const s = H.replace('#','');
-        const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s;
-        const bigint = parseInt(v, 16);
-        let r = (bigint >> 16) & 255, g = (bigint >> 8) & 255, b = bigint & 255;
-        r /= 255; g /= 255; b /= 255;
-        const max = Math.max(r, g, b), min = Math.min(r, g, b);
-        let h = 0, s2 = 0, l = (max + min) / 2;
-        if (max !== min) {
-          const d = max - min;
-          s2 = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-          switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; default: h = (r - g) / d + 4; }
-          h /= 6;
-        }
-        return { h: Math.round(h*360), s: Math.round(s2*100), l: Math.round(l*100) };
-      };
-      const hslToHex = (h, s, l) => {
-        s /= 100; l /= 100;
-        const k = n => (n + h/30) % 12;
-        const a = s * Math.min(l, 1 - l);
-        const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-        const toHex = x => Math.round(255 * x).toString(16).padStart(2, '0');
-        return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`.toUpperCase();
-      };
-      // Precompute hues for the provided color-name list
-      const NAME_HUES = COLOR_NAMES.map((c) => {
-        const hh = hexToHsl(c.hex).h || 0;
-        return { name: c.name, hue: hh };
-      });
-      // Pick closest name by circular hue distance; fallback to coarse labels
-      const getName = (hex) => {
-        const h = hexToHsl(hex).h || 0;
-        let bestName = '—';
-        let best = 361;
-        for (let i = 0; i < NAME_HUES.length; i++) {
-          const hh = NAME_HUES[i].hue;
-          const d = Math.abs(hh - h);
-          const dist = Math.min(d, 360 - d);
-          if (dist < best) { best = dist; bestName = NAME_HUES[i].name; }
-        }
-        if (bestName !== '—') return bestName;
-        const labels=['Red','Orange','Yellow','Lime','Green','Cyan','Blue','Indigo','Violet','Magenta'];
-        const idx=Math.round(((h%360)/360)*(labels.length-1));
-        return labels[idx];
-      };
-      const updateUI = (h, adjusting) => { const rect = slider.getBoundingClientRect(); const r=Math.min(getKnobRadius(), Math.max(0, rect.width/2 - 1)); const t=Math.max(0, Math.min(1, (h/360))); const leftPx = r + t * Math.max(0, (rect.width - 2*r)); if (knob) knob.style.left = (leftPx/rect.width*100) + '%'; if (hueValue) hueValue.textContent=`${Math.round(h)}°`; if (slider) slider.setAttribute('aria-valuenow', String(Math.round(h))); const L=62, S=72; const baseHex=hslToHex(h,S,L); if (currentSwatch) currentSwatch.style.background=baseHex; if (currentName) currentName.textContent=getName(baseHex); if (currentHex) currentHex.textContent=baseHex; if (currentLch) currentLch.textContent = `HSL ${L}, ${S}, ${Math.round(h)}°`; if (currentRgb){ const hex=baseHex.replace('#',''); const R=parseInt(hex.slice(0,2),16), G=parseInt(hex.slice(2,4),16), B=parseInt(hex.slice(4,6),16); currentRgb.textContent=`RGB ${R}, ${G}, ${B}`; } const hoverHex=hslToHex(h, Math.max(0,S-10), Math.max(0, L-8)); const rootEl=document.documentElement; rootEl.style.setProperty('--primary-color', baseHex); rootEl.style.setProperty('--primary-color-hover', hoverHex); };
-      const getHueFromEvent = (ev) => { const rect=slider.getBoundingClientRect(); const clientX=ev.touches ? ev.touches[0].clientX : ev.clientX; const x = clientX - rect.left; const r=Math.min(getKnobRadius(), Math.max(0, rect.width/2 - 1)); const effX=Math.max(r, Math.min(rect.width - r, x)); const denom=Math.max(1, rect.width - 2*r); const t=(effX - r) / denom; return t*360; };
-      const unsubscribe = bus.subscribe(({ sourceId, hue, adjusting }) => { if (sourceId === instanceId) return; updateUI(hue, adjusting); });
-      try { let initH=337; if (window.ColorPalettes && typeof window.ColorPalettes.getPrimary==='function'){ const hex=window.ColorPalettes.getPrimary(); initH = hexToHsl(hex).h || initH; } else { const cssPrimary=getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); if (cssPrimary) { initH = hexToHsl(cssPrimary).h || initH; } } const { hue: sharedHue } = bus.get(); updateUI(initH ?? sharedHue, false); bus.publish(instanceId, initH ?? sharedHue, false); } catch { const { hue: sharedHue } = bus.get(); updateUI(sharedHue, false); }
-      const onDown = (ev) => { ev.preventDefault(); const h=getHueFromEvent(ev); updateUI(h, true); bus.publish(instanceId, h, true); const move=(e)=>{ e.preventDefault && e.preventDefault(); const hh=getHueFromEvent(e); updateUI(hh, true); bus.publish(instanceId, hh, true); }; const up=()=>{ bus.publish(instanceId, getHueFromEvent(ev), false); window.removeEventListener('mousemove', move); window.removeEventListener('touchmove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); }; window.addEventListener('mousemove', move, { passive:false }); window.addEventListener('touchmove', move, { passive:false }); window.addEventListener('mouseup', up, { once:true }); window.addEventListener('touchend', up, { once:true }); };
-      if (slider){ slider.addEventListener('mousedown', onDown); slider.addEventListener('touchstart', onDown, { passive:false }); slider.addEventListener('keydown', (e)=>{ const step=e.shiftKey?10:2; if (e.key==='ArrowLeft'){ e.preventDefault(); const { hue } = bus.get(); const h=hue-step; updateUI(h, true); bus.publish(instanceId, h, true); bus.publish(instanceId, h, false); } if (e.key==='ArrowRight'){ e.preventDefault(); const { hue } = bus.get(); const h=hue+step; updateUI(h, true); bus.publish(instanceId, h, true); bus.publish(instanceId, h, false); } }); }
-      const ro=new MutationObserver(()=>{ if (!document.body.contains(root)){ unsubscribe && unsubscribe(); ro.disconnect(); } }); ro.observe(document.body, { childList:true, subtree:true });
-    };
-    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once:true }); else bootstrap();
-  })();
-</script>
-
-

app/src/components/{ResponsiveImage.astro → Figure.astro}

@@ -175,13 +175,10 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
 
 <script is:inline>
   (() => {
-    console.log("ResponsiveImage script: Starting execution");
     const scriptEl = document.currentScript;
-    console.log("ResponsiveImage script: scriptEl =", scriptEl);
     const root = scriptEl ? scriptEl.previousElementSibling : null;
-    console.log("ResponsiveImage script: root =", root);
     if (!root) {
-      console.log("ResponsiveImage script: No root element found, exiting");
+      console.log("Figure script: No root element found, exiting");
       return;
     }
     const img =
@@ -190,9 +187,8 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
         : root.querySelector
           ? root.querySelector("img")
           : null;
-    console.log("ResponsiveImage script: img =", img);
     if (!img) {
-      console.log("ResponsiveImage script: No img element found, exiting");
+      console.log("Figure script: No img element found, exiting");
       return;
     }
 
@@ -209,13 +205,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
     };
 
     const initZoomIfNeeded = () => {
-      console.log("ResponsiveImage: checking zoom for", img);
-      console.log(
-        "ResponsiveImage: data-zoomable =",
-        img.getAttribute("data-zoomable"),
-      );
       if (img.getAttribute("data-zoomable") !== "1") return;
-      console.log("ResponsiveImage: initializing zoom for", img);
       const isDark =
         document.documentElement.getAttribute("data-theme") === "dark";
       const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
@@ -224,7 +214,6 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
         const instance = window.mediumZoom
           ? window.mediumZoom(img, { background, margin: 24, scrollOffset: 0 })
           : null;
-        console.log("ResponsiveImage: zoom instance created:", instance);
         if (!instance) return;
         let onScrollLike;
         const attachCloseOnScroll = () => {
@@ -268,7 +257,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
       });
     };
 
-    // Gestion zoom global pour masquer autres ResponsiveImage
+    // Global zoom management to hide other Figures
     const setupGlobalZoomBehavior = () => {
       img.addEventListener("click", () => {
         if (img.getAttribute("data-zoomable") === "1") {
@@ -277,7 +266,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
             .querySelectorAll(".ri-root.zoom-active")
             .forEach((el) => el.classList.remove("zoom-active"));
 
-          // Ajouter zoom-active à cet ri-root
+          // Add zoom-active to this ri-root
           root.classList.add("zoom-active");
         }
       });
@@ -421,26 +410,26 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
     background: var(--primary-color);
   }
 
-  /* Quand une image est zoomée, cacher TOUS les ResponsiveImage de la page */
+  /* When an image is zoomed, hide ALL Figures on the page */
   :global(.medium-zoom--opened) .ri-root {
     opacity: 0;
     z-index: calc(var(--z-base) - 1);
     transition: opacity 0.3s ease;
   }
 
-  /* L'image actuellement zoomée reste visible */
+  /* The currently zoomed image remains visible */
   :global(.medium-zoom--opened) .ri-root:has(.medium-zoom--opened) {
     opacity: 1;
     z-index: var(--z-overlay);
   }
 
-  /* Fallback pour navigateurs sans support :has() */
+  /* Fallback for browsers without :has() support */
   :global(.medium-zoom--opened) .ri-root.zoom-active {
     opacity: 1 !important;
     z-index: var(--z-overlay) !important;
   }
 
-  /* Spécifiquement masquer bouton download et figcaption lors du zoom */
+  /* Specifically hide download button and figcaption during zoom */
   :global(.medium-zoom--opened) .img-dl-btn {
     opacity: 0;
     z-index: calc(var(--z-base) - 1);
@@ -453,7 +442,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
     transition: opacity 0.3s ease;
   }
 
-  /* Même pour l'image zoomée active, masquer bouton et caption pour une expérience propre */
+  /* Even for active zoomed image, hide button and caption for clean experience */
   :global(.medium-zoom--opened) .ri-root.zoom-active .img-dl-btn {
     opacity: 0;
     z-index: calc(var(--z-base) - 1);

app/src/components/{MultiImage.astro → MultiFigure.astro}

@@ -1,6 +1,6 @@
 ---
 // @ts-ignore - types provided by Astro at runtime
-import ResponsiveImage from "./ResponsiveImage.astro";
+import Figure from "./Figure.astro";
 
 interface ImageItem {
     /** Source image imported via astro:assets */
@@ -83,7 +83,7 @@ const gridColumns = getGridColumns();
                 >
                     {images.map((image, index) => (
                         <div class="multi-image-item">
-                            <ResponsiveImage
+                            <Figure
                                 src={image.src}
                                 alt={image.alt}
                                 zoomable={image.zoomable ?? zoomable}
@@ -121,7 +121,7 @@ const gridColumns = getGridColumns();
             >
                 {images.map((image, index) => (
                     <div class="multi-image-item">
-                        <ResponsiveImage
+                        <Figure
                             src={image.src}
                             alt={image.alt}
                             zoomable={image.zoomable ?? zoomable}
@@ -198,7 +198,7 @@ const gridColumns = getGridColumns();
         z-index: var(--z-overlay);
     }
 
-    /* Fallback pour navigateurs sans support :has() */
+    /* Fallback for browsers without :has() support */
     :global(.medium-zoom--opened) .multi-image-item.zoom-active {
         opacity: 1 !important;
         z-index: var(--z-overlay) !important;
@@ -261,9 +261,9 @@ const gridColumns = getGridColumns();
         }
     }
 
-    /* Equal height images when desired */
+    /* Images maintain natural aspect ratio */
     .multi-image[data-layout*="column"] .multi-image-item :global(img) {
-        height: 200px;
+        height: auto;
         object-fit: contain;
     }
 
@@ -281,9 +281,9 @@ const gridColumns = getGridColumns();
 </style>
 
 <script>
-    // Enhanced medium-zoom integration for MultiImage
+    // Enhanced medium-zoom integration for MultiFigure
     document.addEventListener("DOMContentLoaded", () => {
-        // Amélioration du comportement des MultiImage avec medium-zoom
+        // Improve MultiFigure behavior with medium-zoom
         const multiImages = document.querySelectorAll(".multi-image");
 
         multiImages.forEach((multiImage) => {
@@ -298,7 +298,7 @@ const gridColumns = getGridColumns();
                     const activeItem = img.closest(".multi-image-item");
                     const riRoot = img.closest(".ri-root");
 
-                    // Nettoyer TOUS les zoom-active (MultiImage items et ResponsiveImage)
+                    // Nettoyer TOUS les zoom-active (MultiFigure items et Figure)
                     document
                         .querySelectorAll(
                             ".multi-image-item.zoom-active, .ri-root.zoom-active",
@@ -328,7 +328,7 @@ const gridColumns = getGridColumns();
             }
         });
 
-        // Écouter les événements clavier pour fermer le zoom
+        // Listen for keyboard events to close zoom
         document.addEventListener("keydown", (e) => {
             if (e.key === "Escape") {
                 document

app/src/components/Palettes.astro

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

app/src/components/Sidenote.astro

@@ -13,27 +13,27 @@
     const containers = document.querySelectorAll(".sidenote-container");
 
     containers.forEach((container) => {
-      // Trouve l'élément précédent (frère juste avant)
+      // Find the previous element (sibling just before)
       const previousElement = container.previousElementSibling;
 
       if (previousElement) {
-        // Rend le conteneur de la sidenote relatif à l'élément précédent
+        // Make the sidenote container relative to the previous element
         previousElement.style.position = "relative";
 
-        // Déplace le conteneur de la sidenote comme enfant de l'élément précédent
+        // Move the sidenote container as child of the previous element
         previousElement.appendChild(container);
 
-        // Style le conteneur pour qu'il se positionne correctement
+        // Style the container so it positions correctly
         container.style.position = "absolute";
         container.style.top = "0";
         container.style.right = "-292px"; // 260px width + 32px gap
         container.style.width = "260px";
 
-        // Affiche le container avec un fade-in
+        // Display the container with a fade-in
         container.style.display = "block";
         container.style.opacity = "0";
 
-        // Fade-in avec transition
+        // Fade-in with transition
         setTimeout(() => {
           container.style.opacity = "1";
         }, 10);
@@ -46,8 +46,8 @@
   .sidenote-container {
     /* Caché par défaut, sera affiché par JS */
     display: none;
-    margin: 12px 0;
-    /* Transition pour le fade-in */
+    margin: 0 ;
+    /* Transition for fade-in */
     transition: opacity 0.3s ease-in-out;
   }
 

app/src/components/demo/ColorPicker.astro

@@ -0,0 +1,633 @@
+---
+
+---
+
+<div class="color-picker" style="width:100%; margin: 10px 0;">
+  <style>
+    .color-picker .picker__stack {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .color-picker .current-card {
+      display: grid;
+      grid-template-columns: 40% 60%;
+      align-items: center;
+      gap: 14px;
+      padding: 14px 32px 14px 16px;
+      border: 1px solid var(--border-color);
+      background: var(--surface-bg);
+      border-radius: 12px;
+    }
+    .color-picker .current-left {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+    }
+    .color-picker .current-right {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding-left: 14px;
+      border-left: 1px solid var(--border-color);
+    }
+    .color-picker .current-main {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+    }
+    .color-picker .current-swatch {
+      width: 64px;
+      height: 64px;
+      border-radius: 8px;
+      border: 1px solid var(--border-color);
+    }
+    .color-picker .current-text {
+      display: flex;
+      flex-direction: column;
+      line-height: 1.2;
+      min-width: 0;
+    }
+    .color-picker .current-name {
+      font-size: 14px;
+      font-weight: 800;
+      color: var(--text-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: clamp(140px, 28vw, 260px);
+    }
+    .color-picker .current-hex,
+    .color-picker .current-extra {
+      font-size: 11px;
+      color: var(--muted-color);
+      letter-spacing: 0.02em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: clamp(140px, 28vw, 260px);
+    }
+    :global(.color-label) {
+      color: var(--muted-color);
+      opacity: 0.6 !important;
+    }
+    :global(.color-value) {
+      color: var(--text-color);
+      font-weight: 500;
+    }
+    .color-picker .picker__label {
+      font-weight: 700;
+      font-size: 12px;
+      color: var(--muted-color);
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+    }
+    .color-picker .hue-slider {
+      position: relative;
+      height: 16px;
+      border-radius: 10px;
+      border: 1px solid var(--border-color);
+      background: linear-gradient(
+        to right,
+        #f00 0%,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        #f00 100%
+      );
+      cursor: ew-resize;
+      touch-action: none;
+      flex: 1 1 auto;
+      min-width: 200px;
+    }
+    .color-picker .hue-knob {
+      position: absolute;
+      top: 50%;
+      left: 93.6%;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      border: 2px solid #fff;
+      transform: translate(-50%, -50%);
+      background: var(--surface-bg);
+      z-index: 2;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    }
+    .color-picker .hue-slider:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+    .color-picker .hue-value {
+      font-variant-numeric: tabular-nums;
+      color: var(--muted-color);
+      font-size: 12px;
+    }
+    @media (max-width: 720px) {
+      .color-picker .current-card {
+        grid-template-columns: 1fr;
+      }
+      .color-picker .current-right {
+        padding-left: 0;
+        border-left: none;
+      }
+    }
+  </style>
+  <div class="picker__stack">
+    <div class="current-card">
+      <div class="current-left">
+        <div class="current-main">
+          <div
+            class="current-swatch"
+            aria-label="Current color"
+            title="Current color"
+          >
+          </div>
+          <div class="current-text">
+            <div class="current-name">—</div>
+            <div class="current-extra current-lch">—</div>
+            <div class="current-extra current-rgb">—</div>
+            <div class="current-hex">—</div>
+          </div>
+        </div>
+      </div>
+      <div class="current-right">
+        <div class="picker__label">Hue</div>
+        <div
+          class="hue-slider"
+          role="slider"
+          aria-label="Hue"
+          aria-valuemin="0"
+          aria-valuemax="360"
+          aria-valuenow="214"
+          tabindex="0"
+        >
+          <div class="hue-knob"></div>
+        </div>
+        <div class="hue-value">214°</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  (() => {
+    const COLOR_NAMES = [
+      { name: "Candy Apple Red", hex: "#ff0800" },
+      { name: "Boiling Magma", hex: "#ff3300" },
+      { name: "Aerospace Orange", hex: "#ff4f00" },
+      { name: "Burtuqali Orange", hex: "#ff6700" },
+      { name: "American Orange", hex: "#ff8b00" },
+      { name: "Cheese", hex: "#ffa600" },
+      { name: "Amber", hex: "#ffbf00" },
+      { name: "Demonic Yellow", hex: "#ffe700" },
+      { name: "Bat-Signal", hex: "#feff00" },
+      { name: "Bitter Lime", hex: "#cfff00" },
+      { name: "Electric Lime", hex: "#ccff00" },
+      { name: "Bright Yellow Green", hex: "#9dff00" },
+      { name: "Lasting Lime", hex: "#88ff00" },
+      { name: "Bright Green", hex: "#66ff00" },
+      { name: "Chlorophyll Green", hex: "#4aff00" },
+      { name: "Green Screen", hex: "#22ff00" },
+      { name: "Electric Pickle", hex: "#00ff04" },
+      { name: "Acid", hex: "#00ff22" },
+      { name: "Lucent Lime", hex: "#00ff33" },
+      { name: "Cathode Green", hex: "#00ff55" },
+      { name: "Booger Buster", hex: "#00ff77" },
+      { name: "Green Gas", hex: "#00ff99" },
+      { name: "Enthusiasm", hex: "#00ffaa" },
+      { name: "Ice Ice Baby", hex: "#00ffdd" },
+      { name: "Master Sword Blue", hex: "#00ffee" },
+      { name: "Agressive Aqua", hex: "#00fbff" },
+      { name: "Vivid Sky Blue", hex: "#00ccff" },
+      { name: "Capri", hex: "#00bfff" },
+      { name: "Sky of Magritte", hex: "#0099ff" },
+      { name: "Azure", hex: "#007fff" },
+      { name: "Blue Ribbon", hex: "#0066ff" },
+      { name: "Blinking Blue", hex: "#0033ff" },
+      { name: "Icelandic Water", hex: "#0011ff" },
+      { name: "Blue", hex: "#0000ff" },
+      { name: "Blue Pencil", hex: "#2200ff" },
+      { name: "Electric Ultramarine", hex: "#3f00ff" },
+      { name: "Aladdin's Feather", hex: "#5500ff" },
+      { name: "Purple Climax", hex: "#8800ff" },
+      { name: "Amethyst Ganzstar", hex: "#8f00ff" },
+      { name: "Electric Purple", hex: "#bf00ff" },
+      { name: "Phlox", hex: "#df00ff" },
+      { name: "Brusque Pink", hex: "#ee00ff" },
+      { name: "Bright Magenta", hex: "#ff08e8" },
+      { name: "Big bang Pink", hex: "#ff00bb" },
+      { name: "Mean Girls Lipstick", hex: "#ff00ae" },
+      { name: "Pink", hex: "#ff0099" },
+      { name: "Hot Flamingoes", hex: "#ff005d" },
+      { name: "Blazing Dragonfruit", hex: "#ff0054" },
+      { name: "Carmine Red", hex: "#ff0038" },
+      { name: "Bright Red", hex: "#ff000d" },
+    ];
+    if (!window.__colorNames) window.__colorNames = COLOR_NAMES;
+
+    if (!window.__colorPickerBus) {
+      window.__colorPickerBus = (() => {
+        let hue = 214;
+        let adjusting = false;
+        const listeners = new Set();
+        return {
+          get: () => ({ hue, adjusting }),
+          publish: (sourceId, nextHue, isAdj) => {
+            hue = ((nextHue % 360) + 360) % 360;
+            adjusting = !!isAdj;
+            listeners.forEach((fn) => {
+              try {
+                fn({ sourceId, hue, adjusting });
+              } catch {}
+            });
+          },
+          subscribe: (fn) => {
+            listeners.add(fn);
+            return () => listeners.delete(fn);
+          },
+        };
+      })();
+    }
+
+    const bootstrap = () => {
+      const root = document.querySelector(".color-picker");
+      if (!root || root.dataset.mounted) return;
+      root.dataset.mounted = "true";
+      const slider = root.querySelector(".hue-slider");
+      const knob = root.querySelector(".hue-knob");
+      const hueValue = root.querySelector(".hue-value");
+      const currentSwatch = root.querySelector(".current-swatch");
+      const currentName = root.querySelector(".current-name");
+      const currentHex = root.querySelector(".current-hex");
+      const currentLch = root.querySelector(".current-lch");
+      const currentRgb = root.querySelector(".current-rgb");
+      const bus = window.__colorPickerBus;
+      const instanceId = Math.random().toString(36).slice(2);
+      const getKnobRadius = () => {
+        try {
+          const w = knob ? knob.getBoundingClientRect().width : 0;
+          return w ? w / 2 : 8;
+        } catch {
+          return 8;
+        }
+      };
+      const hexToHsl = (H) => {
+        const s = H.replace("#", "");
+        const v =
+          s.length === 3
+            ? s
+                .split("")
+                .map((ch) => ch + ch)
+                .join("")
+            : s;
+        const bigint = parseInt(v, 16);
+        let r = (bigint >> 16) & 255,
+          g = (bigint >> 8) & 255,
+          b = bigint & 255;
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b),
+          min = Math.min(r, g, b);
+        let h = 0,
+          s2 = 0,
+          l = (max + min) / 2;
+        if (max !== min) {
+          const d = max - min;
+          s2 = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+          switch (max) {
+            case r:
+              h = (g - b) / d + (g < b ? 6 : 0);
+              break;
+            case g:
+              h = (b - r) / d + 2;
+              break;
+            default:
+              h = (r - g) / d + 4;
+          }
+          h /= 6;
+        }
+        return {
+          h: Math.round(h * 360),
+          s: Math.round(s2 * 100),
+          l: Math.round(l * 100),
+        };
+      };
+      const hslToHex = (h, s, l) => {
+        s /= 100;
+        l /= 100;
+        const k = (n) => (n + h / 30) % 12;
+        const a = s * Math.min(l, 1 - l);
+        const f = (n) =>
+          l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+        const toHex = (x) =>
+          Math.round(255 * x)
+            .toString(16)
+            .padStart(2, "0");
+        return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`.toUpperCase();
+      };
+
+      // OKLCH conversion functions
+      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.2817188366 * gl + 0.6299787005 * bl,
+        );
+        const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+        const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+        const b2 = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+        return { L, a, b: b2 };
+      };
+      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 hexToOklch = (hex) => {
+        const s = hex.replace("#", "");
+        const v =
+          s.length === 3
+            ? s
+                .split("")
+                .map((ch) => ch + ch)
+                .join("")
+            : s;
+        const r = parseInt(v.slice(0, 2), 16) / 255;
+        const g = parseInt(v.slice(2, 4), 16) / 255;
+        const b = parseInt(v.slice(4, 6), 16) / 255;
+        const { L, a, b: bb } = rgbToOklab(r, g, b);
+        return oklabToOklch(L, a, bb);
+      };
+      // Precompute hues for the provided color-name list
+      const NAME_HUES = COLOR_NAMES.map((c) => {
+        const hh = hexToHsl(c.hex).h || 0;
+        return { name: c.name, hue: hh };
+      });
+      // Pick closest name by circular hue distance; fallback to coarse labels
+      const getName = (hex) => {
+        const h = hexToHsl(hex).h || 0;
+        let bestName = "—";
+        let best = 361;
+        for (let i = 0; i < NAME_HUES.length; i++) {
+          const hh = NAME_HUES[i].hue;
+          const d = Math.abs(hh - h);
+          const dist = Math.min(d, 360 - d);
+          if (dist < best) {
+            best = dist;
+            bestName = NAME_HUES[i].name;
+          }
+        }
+        if (bestName !== "—") return bestName;
+        const labels = [
+          "Red",
+          "Orange",
+          "Yellow",
+          "Lime",
+          "Green",
+          "Cyan",
+          "Blue",
+          "Indigo",
+          "Violet",
+          "Magenta",
+        ];
+        const idx = Math.round(((h % 360) / 360) * (labels.length - 1));
+        return labels[idx];
+      };
+      // OKLCH to RGB conversion functions
+      const oklchToOklab = (L, C, hDeg) => {
+        const h = (hDeg * Math.PI) / 180;
+        return { L, a: C * Math.cos(h), b: C * Math.sin(h) };
+      };
+      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.291485548 * 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.707614701 * s,
+        );
+        return { r, g, b: b3 };
+      };
+      const oklchToHex = (L, C, h) => {
+        const { a, b } = oklchToOklab(L, C, h);
+        const rgb = oklabToRgb(L, a, b);
+        const toHex = (x) =>
+          Math.round(255 * x)
+            .toString(16)
+            .padStart(2, "0");
+        return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`.toUpperCase();
+      };
+
+      const updateUI = (h, adjusting) => {
+        const rect = slider.getBoundingClientRect();
+        const r = Math.min(getKnobRadius(), Math.max(0, rect.width / 2 - 1));
+        const t = Math.max(0, Math.min(1, h / 360));
+        const leftPx = r + t * Math.max(0, rect.width - 2 * r);
+        if (knob) knob.style.left = (leftPx / rect.width) * 100 + "%";
+        if (hueValue) hueValue.innerHTML = `<strong>${Math.round(h)}°</strong>`;
+        if (slider) slider.setAttribute("aria-valuenow", String(Math.round(h)));
+
+        // Generate OKLCH color directly (similar to CSS variables)
+        const L = 0.75; // 75% lightness
+        const C = 0.12; // 12% chroma
+        const oklchColor = `oklch(${L} ${C} ${h})`;
+        const baseHex = oklchToHex(L, C, h);
+
+        if (currentSwatch) currentSwatch.style.background = baseHex;
+        if (currentName) currentName.textContent = getName(baseHex);
+        if (currentHex)
+          currentHex.innerHTML = `<span class="color-label">#</span><span class="color-value">${baseHex.replace("#", "")}</span>`;
+
+        // Display OKLCH values
+        if (currentLch)
+          currentLch.innerHTML = `<span class="color-label">OKLCH</span> <span class="color-value">${(L * 100).toFixed(1)}</span><span class="color-label">%</span>, <span class="color-value">${(C * 100).toFixed(1)}</span><span class="color-label">%</span>, <span class="color-value"><strong>${Math.round(h)}</strong></span><span class="color-label">°</span>`;
+
+        if (currentRgb) {
+          const hex = baseHex.replace("#", "");
+          const R = parseInt(hex.slice(0, 2), 16),
+            G = parseInt(hex.slice(2, 4), 16),
+            B = parseInt(hex.slice(4, 6), 16);
+          currentRgb.innerHTML = `<span class="color-label">RGB</span> <span class="color-value">${R}</span><span class="color-label">,</span> <span class="color-value">${G}</span><span class="color-label">,</span> <span class="color-value">${B}</span>`;
+        }
+
+        // Apply OKLCH color to CSS variables
+        const hoverOklch = `oklch(${L} ${C} ${h})`;
+        const rootEl = document.documentElement;
+        rootEl.style.setProperty("--primary-color", oklchColor);
+        rootEl.style.setProperty("--primary-color-hover", hoverOklch);
+      };
+
+      // Update UI position only, without modifying CSS colors
+      const updateUIPositionOnly = (h) => {
+        const rect = slider.getBoundingClientRect();
+        const r = Math.min(getKnobRadius(), Math.max(0, rect.width / 2 - 1));
+        const t = Math.max(0, Math.min(1, h / 360));
+        const leftPx = r + t * Math.max(0, rect.width - 2 * r);
+        if (knob) knob.style.left = (leftPx / rect.width) * 100 + "%";
+        if (hueValue) hueValue.innerHTML = `<strong>${Math.round(h)}°</strong>`;
+        if (slider) slider.setAttribute("aria-valuenow", String(Math.round(h)));
+
+        // Generate OKLCH color for display only
+        const L = 0.75; // 75% lightness
+        const C = 0.12; // 12% chroma
+        const baseHex = oklchToHex(L, C, h);
+
+        if (currentSwatch) currentSwatch.style.background = baseHex;
+        if (currentName) currentName.textContent = getName(baseHex);
+        if (currentHex)
+          currentHex.innerHTML = `<span class="color-label">#</span><span class="color-value">${baseHex.replace("#", "")}</span>`;
+
+        // Display OKLCH values
+        if (currentLch)
+          currentLch.innerHTML = `<span class="color-label">OKLCH</span> <span class="color-value">${(L * 100).toFixed(1)}</span><span class="color-label">%</span>, <span class="color-value">${(C * 100).toFixed(1)}</span><span class="color-label">%</span>, <span class="color-value"><strong>${Math.round(h)}</strong></span><span class="color-label">°</span>`;
+
+        if (currentRgb) {
+          const hex = baseHex.replace("#", "");
+          const R = parseInt(hex.slice(0, 2), 16),
+            G = parseInt(hex.slice(2, 4), 16),
+            B = parseInt(hex.slice(4, 6), 16);
+          currentRgb.innerHTML = `<span class="color-label">RGB</span> <span class="color-value">${R}</span><span class="color-label">,</span> <span class="color-value">${G}</span><span class="color-label">,</span> <span class="color-value">${B}</span>`;
+        }
+
+        // DO NOT modify CSS variables - just show the position
+      };
+      const getHueFromEvent = (ev) => {
+        const rect = slider.getBoundingClientRect();
+        const clientX = ev.touches ? ev.touches[0].clientX : ev.clientX;
+        const x = clientX - rect.left;
+        const r = Math.min(getKnobRadius(), Math.max(0, rect.width / 2 - 1));
+        const effX = Math.max(r, Math.min(rect.width - r, x));
+        const denom = Math.max(1, rect.width - 2 * r);
+        const t = (effX - r) / denom;
+        return t * 360;
+      };
+      const unsubscribe = bus.subscribe(({ sourceId, hue, adjusting }) => {
+        if (sourceId === instanceId) return;
+        updateUI(hue, adjusting);
+      });
+      try {
+        let initH = 214;
+
+        // Try to get OKLCH directly from ColorPalettes first
+        if (
+          window.ColorPalettes &&
+          typeof window.ColorPalettes.getPrimaryOKLCH === "function"
+        ) {
+          const oklch = window.ColorPalettes.getPrimaryOKLCH();
+          if (oklch && oklch.h !== undefined) {
+            initH = oklch.h; // Use exact OKLCH hue, no conversion!
+          }
+        } else {
+          // Fallback: try to parse OKLCH directly from CSS
+          const cssPrimary = getComputedStyle(document.documentElement)
+            .getPropertyValue("--primary-color")
+            .trim();
+          if (cssPrimary && cssPrimary.includes("oklch")) {
+            const oklchMatch = cssPrimary.match(/oklch\(([^)]+)\)/);
+            if (oklchMatch) {
+              const values = oklchMatch[1]
+                .split(/\s+/)
+                .map((v) => parseFloat(v.trim()));
+              if (values.length >= 3) {
+                initH = values[2]; // Direct OKLCH hue, no conversion!
+              }
+            }
+          } else if (cssPrimary) {
+            // Only convert if it's not OKLCH
+            initH = hexToHsl(cssPrimary).h || initH;
+          }
+        }
+
+        const { hue: sharedHue } = bus.get();
+        // Only update UI position, don't modify CSS colors on initialization
+        updateUIPositionOnly(initH ?? sharedHue);
+        bus.publish(instanceId, initH ?? sharedHue, false);
+      } catch {
+        const { hue: sharedHue } = bus.get();
+        updateUIPositionOnly(sharedHue);
+      }
+      const onDown = (ev) => {
+        ev.preventDefault();
+        const h = getHueFromEvent(ev);
+        updateUI(h, true);
+        bus.publish(instanceId, h, true);
+        const move = (e) => {
+          e.preventDefault && e.preventDefault();
+          const hh = getHueFromEvent(e);
+          updateUI(hh, true);
+          bus.publish(instanceId, hh, true);
+        };
+        const up = () => {
+          bus.publish(instanceId, getHueFromEvent(ev), false);
+          window.removeEventListener("mousemove", move);
+          window.removeEventListener("touchmove", move);
+          window.removeEventListener("mouseup", up);
+          window.removeEventListener("touchend", up);
+        };
+        window.addEventListener("mousemove", move, { passive: false });
+        window.addEventListener("touchmove", move, { passive: false });
+        window.addEventListener("mouseup", up, { once: true });
+        window.addEventListener("touchend", up, { once: true });
+      };
+      if (slider) {
+        slider.addEventListener("mousedown", onDown);
+        slider.addEventListener("touchstart", onDown, { passive: false });
+        slider.addEventListener("keydown", (e) => {
+          const step = e.shiftKey ? 10 : 2;
+          if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            const { hue } = bus.get();
+            const h = hue - step;
+            updateUI(h, true);
+            bus.publish(instanceId, h, true);
+            bus.publish(instanceId, h, false);
+          }
+          if (e.key === "ArrowRight") {
+            e.preventDefault();
+            const { hue } = bus.get();
+            const h = hue + step;
+            updateUI(h, true);
+            bus.publish(instanceId, h, true);
+            bus.publish(instanceId, h, false);
+          }
+        });
+      }
+      const ro = new MutationObserver(() => {
+        if (!document.body.contains(root)) {
+          unsubscribe && unsubscribe();
+          ro.disconnect();
+        }
+      });
+      ro.observe(document.body, { childList: true, subtree: true });
+    };
+    if (document.readyState === "loading")
+      document.addEventListener("DOMContentLoaded", bootstrap, { once: true });
+    else bootstrap();
+  })();
+</script>

app/src/components/demo/Palettes.astro

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

app/src/components/trackio/Trackio.svelte

@@ -1,14 +1,20 @@
 <script>
-  import * as d3 from 'd3';
-  import { formatAbbrev, smoothMetricData } from './core/chart-utils.js';
-  import { generateRunNames, genCurves, Random, Performance, generateMassiveTestDataset } from './core/data-generator.js';
-  import Legend from './components/Legend.svelte';
-  import Cell from './components/Cell.svelte';
-  import FullscreenModal from './components/FullscreenModal.svelte';
-  import { onMount, onDestroy } from 'svelte';
-  import { jitterTrigger } from './core/store.js';
-
-  export let variant = 'classic'; // 'classic' | 'oblivion'
+  import * as d3 from "d3";
+  import { formatAbbrev, smoothMetricData } from "./core/chart-utils.js";
+  import {
+    generateRunNames,
+    genCurves,
+    Random,
+    Performance,
+    generateMassiveTestDataset,
+  } from "./core/data-generator.js";
+  import Legend from "./components/Legend.svelte";
+  import Cell from "./components/Cell.svelte";
+  import FullscreenModal from "./components/FullscreenModal.svelte";
+  import { onMount, onDestroy } from "svelte";
+  import { jitterTrigger } from "./core/store.js";
+
+  export let variant = "classic"; // 'classic' | 'oblivion'
   export let normalizeLoss = true;
   export let logScaleX = false;
   export let smoothing = false;
@@ -17,99 +23,143 @@
   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 }
+    { 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
-  
+  let dynamicPalette = [
+    "#0ea5e9",
+    "#8b5cf6",
+    "#f59e0b",
+    "#ef4444",
+    "#10b981",
+    "#f97316",
+    "#3b82f6",
+    "#8b5ad6",
+  ]; // fallback
+
   const updateDynamicPalette = () => {
-    if (typeof window !== 'undefined' && window.ColorPalettes && currentRunList.length > 0) {
+    if (
+      typeof window !== "undefined" &&
+      window.ColorPalettes &&
+      currentRunList.length > 0
+    ) {
       try {
-        dynamicPalette = window.ColorPalettes.getColors('categorical', currentRunList.length);
+        dynamicPalette = window.ColorPalettes.getColors(
+          "categorical",
+          currentRunList.length,
+        );
       } catch (e) {
-        console.warn('Failed to generate dynamic palette:', 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';
+    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
-    
+  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
+    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
     // Use realistic ML training step counts
     const stepsCount = Random.trainingSteps();
     const runsSim = generateRunNames(wantRuns, stepsCount);
-    const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+    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 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] = []; });
+      runsSim.forEach((r) => {
+        map[r] = [];
+      });
       nextByMetric.set(tgt, map);
     });
-    
+
     // Generate curves for each run
-    runsSim.forEach(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] });
+      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));
+    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) }));
+    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
+    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';
+  function setTheme(name) {
+    variant = name === "oblivion" ? "oblivion" : "classic";
     updateThemeClass();
-    
+
     // Debug log for font application
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       console.log(`Theme switched to: ${variant}`);
       if (hostEl) {
         const computedStyle = getComputedStyle(hostEl);
@@ -135,41 +185,67 @@
 
   // Public API: generate massive test dataset
   function generateMassiveDataset(steps = null, runs = 3) {
-    console.log('🧪 Generating massive test dataset for sampling validation...');
-    
+    console.log(
+      "🧪 Generating massive test dataset for sampling validation...",
+    );
+
     const result = generateMassiveTestDataset(steps, runs);
-    
+
     // Update reactive data with massive dataset
     result.dataByMetric.forEach((v, k) => dataByMetric.set(k, v));
-    metricsToDraw = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
+    metricsToDraw = [
+      "epoch",
+      "train_accuracy",
+      "train_loss",
+      "val_accuracy",
+      "val_loss",
+    ];
     currentRunList = result.runNames.slice();
     updateDynamicPalette();
-    legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
+    legendItems = currentRunList.map((name) => ({
+      name,
+      color: colorForRun(name),
+    }));
     updatePreparedData();
-    colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
-    
-    console.log(`✅ Massive dataset loaded: ${result.stepCount} steps × ${result.runNames.length} runs`);
+    colorsByRun = Object.fromEntries(
+      currentRunList.map((name) => [name, colorForRun(name)]),
+    );
+
+    console.log(
+      `✅ Massive dataset loaded: ${result.stepCount} steps × ${result.runNames.length} runs`,
+    );
     console.log(`📊 Total data points: ${result.totalPoints.toLocaleString()}`);
     console.log(`🎯 Description: ${result.description}`);
-    
+
     return result;
   }
 
   // Public API: add live data point for simulation
   function addLiveDataPoint(runName, dataPoint) {
     console.log(`Adding live data point for run "${runName}":`, dataPoint);
-    
+
     // Add run to currentRunList if it doesn't exist
     if (!currentRunList.includes(runName)) {
       currentRunList = [...currentRunList, runName];
       updateDynamicPalette();
-      colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
-      legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
+      colorsByRun = Object.fromEntries(
+        currentRunList.map((name) => [name, colorForRun(name)]),
+      );
+      legendItems = currentRunList.map((name) => ({
+        name,
+        color: colorForRun(name),
+      }));
     }
-    
+
     // Initialize data structures for the run if needed
-    const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
-    TARGET_METRICS.forEach(metric => {
+    const TARGET_METRICS = [
+      "epoch",
+      "train_accuracy",
+      "train_loss",
+      "val_accuracy",
+      "val_loss",
+    ];
+    TARGET_METRICS.forEach((metric) => {
       if (!dataByMetric.has(metric)) {
         dataByMetric.set(metric, {});
       }
@@ -178,114 +254,125 @@
         metricData[runName] = [];
       }
     });
-    
+
     // Add the new data points to each metric
     const step = dataPoint.step;
-    
+
     // Add epoch data
-    const epochData = dataByMetric.get('epoch');
+    const epochData = dataByMetric.get("epoch");
     epochData[runName].push({ step, value: step });
-    
+
     // Add accuracy data (train and val get the same value for simplicity)
     if (dataPoint.accuracy !== undefined) {
-      const trainAccData = dataByMetric.get('train_accuracy');
-      const valAccData = dataByMetric.get('val_accuracy');
-      
+      const trainAccData = dataByMetric.get("train_accuracy");
+      const valAccData = dataByMetric.get("val_accuracy");
+
       // Add some noise between train and val accuracy
       const trainAcc = dataPoint.accuracy;
-      const valAcc = Math.max(0, Math.min(1, dataPoint.accuracy - 0.01 - Math.random() * 0.03));
-      
+      const valAcc = Math.max(
+        0,
+        Math.min(1, dataPoint.accuracy - 0.01 - Math.random() * 0.03),
+      );
+
       trainAccData[runName].push({ step, value: trainAcc });
       valAccData[runName].push({ step, value: valAcc });
     }
-    
+
     // Add loss data (train and val get the same value for simplicity)
     if (dataPoint.loss !== undefined) {
-      const trainLossData = dataByMetric.get('train_loss');
-      const valLossData = dataByMetric.get('val_loss');
-      
+      const trainLossData = dataByMetric.get("train_loss");
+      const valLossData = dataByMetric.get("val_loss");
+
       // Add some noise between train and val loss
       const trainLoss = dataPoint.loss;
       const valLoss = dataPoint.loss + 0.05 + Math.random() * 0.1;
-      
+
       trainLossData[runName].push({ step, value: trainLoss });
       valLossData[runName].push({ step, value: valLoss });
     }
-    
+
     // Update all metrics to draw
     metricsToDraw = TARGET_METRICS;
-    
+
     // Update prepared data with new values
     updatePreparedData();
-    
-    console.log(`Live data point added successfully. Total runs: ${currentRunList.length}`);
+
+    console.log(
+      `Live data point added successfully. Total runs: ${currentRunList.length}`,
+    );
   }
 
   // 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'];
+    const TARGET_METRICS = [
+      "epoch",
+      "train_accuracy",
+      "train_loss",
+      "val_accuracy",
+      "val_loss",
+    ];
     let dataToUse = {};
     let rawDataToStore = {};
-    
-    TARGET_METRICS.forEach(metric => {
+
+    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;
+        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(){
+  function updateThemeClass() {
     if (!hostEl) return;
-    hostEl.classList.toggle('theme--classic', variant === 'classic');
-    hostEl.classList.toggle('theme--oblivion', variant === 'oblivion');
-    hostEl.setAttribute('data-variant', variant);
+    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
-  
+
   // Fullscreen navigation state
   let currentFullscreenIndex = 0;
   let isModalOpen = false;
-  
+
   function handleNavigate(newIndex) {
     currentFullscreenIndex = newIndex;
   }
-  
+
   function openModal(index) {
     currentFullscreenIndex = index;
     isModalOpen = true;
   }
-  
+
   function closeModal() {
     isModalOpen = false;
   }
-  
+
   // Prepare all charts data for navigation
-  $: allChartsData = cellsDef.map(c => ({
+  $: allChartsData = cellsDef.map((c) => ({
     metricKey: c.metric,
     titleText: c.title,
     metricData: (preparedData && preparedData[c.metric]) || {},
-    rawMetricData: (preparedRawData && preparedRawData[c.metric]) || {}
+    rawMetricData: (preparedRawData && preparedRawData[c.metric]) || {},
   }));
-  
+
   // Color function for the modal
-  $: modalColorForRun = (name) => colorsByRun[name] || '#999';
+  $: modalColorForRun = (name) => colorsByRun[name] || "#999";
 
   let cleanup = null;
   onMount(() => {
@@ -293,66 +380,97 @@
     hostEl.__setTheme = setTheme;
 
     // Jitter & Simulate functions
-    function rebuildLegend(){ 
+    function rebuildLegend() {
       updateDynamicPalette(); // Update colors when adding new data
-      legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) })); 
+      legendItems = currentRunList.map((name) => ({
+        name,
+        color: colorForRun(name),
+      }));
     }
-    
-    function simulateData(){
+
+    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
+      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
       // Use realistic ML training step counts with cycling scenarios
       let stepsCount;
       if (cycleIdx === 0) {
-        stepsCount = Random.trainingStepsForScenario('prototyping');
+        stepsCount = Random.trainingStepsForScenario("prototyping");
       } else if (cycleIdx === 1) {
-        stepsCount = Random.trainingStepsForScenario('development');
+        stepsCount = Random.trainingStepsForScenario("development");
       } else if (cycleIdx === 2) {
-        stepsCount = Random.trainingStepsForScenario('production');
+        stepsCount = Random.trainingStepsForScenario("production");
       } else if (cycleIdx === 3) {
-        stepsCount = Random.trainingStepsForScenario('research');
+        stepsCount = Random.trainingStepsForScenario("research");
       } else if (cycleIdx === 4) {
-        stepsCount = Random.trainingStepsForScenario('llm');
+        stepsCount = Random.trainingStepsForScenario("llm");
       } else if (cycleIdx === 5) {
-        stepsCount = Random.trainingStepsForScenario('massive');
+        stepsCount = Random.trainingStepsForScenario("massive");
       } else {
         stepsCount = Random.trainingSteps(); // Full range for variety
       }
       cycleIdx = (cycleIdx + 1) % 7; // Cycle through 7 scenarios now
-      
+
       const runsSim = generateRunNames(wantRuns, stepsCount);
-      const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+      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;
+      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] = []; });
+        runsSim.forEach((r) => {
+          map[r] = [];
+        });
         nextByMetric.set(tgt, map);
       });
-      runsSim.forEach(run => {
+      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] });
+        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));
+      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)]));
+      colorsByRun = Object.fromEntries(
+        currentRunList.map((name) => [name, colorForRun(name)]),
+      );
     }
     // No need for event listeners anymore - we'll use reactive statement
 
@@ -360,105 +478,158 @@
     simulateData();
     // Svelte Cells will react to preparedData/colorsByRun updates
 
-    cleanup = () => { 
+    cleanup = () => {
       // No cleanup needed for reactive statements
     };
   });
 
-  onDestroy(() => { if (cleanup) cleanup(); });
+  onDestroy(() => {
+    if (cleanup) cleanup();
+  });
 
   // Expose instance for debugging and external theme control
   onMount(() => {
-    window.trackioInstance = { jitterData, addLiveDataPoint, generateMassiveDataset };
+    window.trackioInstance = {
+      jitterData,
+      addLiveDataPoint,
+      generateMassiveDataset,
+    };
     if (hostEl) {
-      hostEl.__trackioInstance = { setTheme, setLogScaleX, setSmoothing, jitterData, addLiveDataPoint, generateMassiveDataset };
+      hostEl.__trackioInstance = {
+        setTheme,
+        setLogScaleX,
+        setSmoothing,
+        jitterData,
+        addLiveDataPoint,
+        generateMassiveDataset,
+      };
     }
-    
+
     // 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)]));
+        legendItems = currentRunList.map((name) => ({
+          name,
+          color: colorForRun(name),
+        }));
+        colorsByRun = Object.fromEntries(
+          currentRunList.map((name) => [name, colorForRun(name)]),
+        );
       }
     };
-    
-    document.addEventListener('palettes:updated', handlePaletteUpdate);
-    
+
+    document.addEventListener("palettes:updated", handlePaletteUpdate);
+
     // Cleanup listener on destroy
     return () => {
-      document.removeEventListener('palettes:updated', handlePaletteUpdate);
+      document.removeEventListener("palettes:updated", handlePaletteUpdate);
     };
   });
 
   // React to jitter trigger from store
   $: {
-    console.log('Reactive statement triggered, jitterTrigger value:', $jitterTrigger);
+    console.log(
+      "Reactive statement triggered, jitterTrigger value:",
+      $jitterTrigger,
+    );
     if ($jitterTrigger > 0) {
-      console.log('Jitter trigger activated:', $jitterTrigger, 'calling jitterData()');
+      console.log(
+        "Jitter trigger activated:",
+        $jitterTrigger,
+        "calling jitterData()",
+      );
       jitterData();
     }
   }
 
   // Legend ghost helpers (hover effects)
-  function ghostRun(run){
+  function ghostRun(run) {
     try {
-      hostEl.classList.add('hovering');
-      
+      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 .lines path.raw-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));
+      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 .lines path.raw-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);
+      hostEl.querySelectorAll(".legend-bottom .item").forEach((item) => {
+        const itemRun = item.getAttribute("data-run");
+        item.classList.toggle("ghost", itemRun !== run);
       });
-    } catch(_) {}
+    } catch (_) {}
   }
-  function clearGhost(){
+  function clearGhost() {
     try {
-      hostEl.classList.remove('hovering');
-      
+      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 .lines path.raw-line').forEach(p => p.classList.remove('ghost'));
-        cell.querySelectorAll('svg .points circle.pt').forEach(c => c.classList.remove('ghost'));
+      hostEl.querySelectorAll(".cell").forEach((cell) => {
+        cell
+          .querySelectorAll("svg .lines path.run-line")
+          .forEach((p) => p.classList.remove("ghost"));
+        cell
+          .querySelectorAll("svg .lines path.raw-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');
+      hostEl.querySelectorAll(".legend-bottom .item").forEach((item) => {
+        item.classList.remove("ghost");
       });
-    } catch(_) {}
+    } 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(); }} />
+    <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, i}
-      <Cell 
-        metricKey={c.metric} 
-        titleText={c.title} 
-        wide={c.wide} 
-        {variant} 
-        {normalizeLoss} 
-        {logScaleX} 
-        {smoothing} 
-        metricData={(preparedData && preparedData[c.metric]) || {}} 
-        rawMetricData={(preparedRawData && preparedRawData[c.metric]) || {}} 
-        colorForRun={(name)=> colorsByRun[name] || '#999'} 
+      <Cell
+        metricKey={c.metric}
+        titleText={c.title}
+        wide={c.wide}
+        {variant}
+        {normalizeLoss}
+        {logScaleX}
+        {smoothing}
+        metricData={(preparedData && preparedData[c.metric]) || {}}
+        rawMetricData={(preparedRawData && preparedRawData[c.metric]) || {}}
+        colorForRun={(name) => colorsByRun[name] || "#999"}
         {hostEl}
         currentIndex={i}
         onOpenModal={openModal}
@@ -467,9 +638,17 @@
   </div>
   <div class="trackio__footer">
     <small>
-      Built with <a href="https://github.com/huggingface/trackio" target="_blank" rel="noopener noreferrer">TrackIO</a>
+      Built with <a
+        href="https://github.com/huggingface/trackio"
+        target="_blank"
+        rel="noopener noreferrer">TrackIO</a
+      >
       <span class="separator">•</span>
-      <a href="https://huggingface.co/docs/hub/spaces-sdks-docker" target="_blank" rel="noopener noreferrer">Use via API</a>
+      <a
+        href="https://huggingface.co/docs/hub/spaces-sdks-docker"
+        target="_blank"
+        rel="noopener noreferrer">Use via API</a
+      >
     </small>
   </div>
 </div>
@@ -477,7 +656,7 @@
 <!-- Centralized Fullscreen Modal -->
 <FullscreenModal
   visible={isModalOpen}
-  title={allChartsData[currentFullscreenIndex]?.titleText || ''}
+  title={allChartsData[currentFullscreenIndex]?.titleText || ""}
   metricData={allChartsData[currentFullscreenIndex]?.metricData || {}}
   rawMetricData={allChartsData[currentFullscreenIndex]?.rawMetricData || {}}
   colorForRun={modalColorForRun}
@@ -485,8 +664,8 @@
   {logScaleX}
   {smoothing}
   {normalizeLoss}
-  metricKey={allChartsData[currentFullscreenIndex]?.metricKey || ''}
-  titleText={allChartsData[currentFullscreenIndex]?.titleText || ''}
+  metricKey={allChartsData[currentFullscreenIndex]?.metricKey || ""}
+  titleText={allChartsData[currentFullscreenIndex]?.titleText || ""}
   currentIndex={currentFullscreenIndex}
   totalCharts={cellsDef.length}
   onNavigate={handleNavigate}
@@ -499,12 +678,13 @@
      ========================= */
 
   /* 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');
-  
+  @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-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;
@@ -515,31 +695,37 @@
     position: relative;
     --z-tooltip: 50;
     --z-overlay: 99999999;
-    
+
     /* Typography */
-    --trackio-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    --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-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;
@@ -547,28 +733,28 @@
     --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);
-    
+    --trackio-text-accent: var(--primary-color);
+
     /* 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));
@@ -577,14 +763,14 @@
   /* 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-axis-text: rgba(255, 255, 255, 0.6);
     --trackio-chart-grid-stroke: rgba(255, 255, 255, 0.08);
   }
 
   /* =========================
      THEME: CLASSIC (Default)
      ========================= */
-  
+
   .trackio.theme--classic {
     /* Keep default values - no overrides needed */
   }
@@ -592,64 +778,96 @@
   /* =========================
      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);
-    
+    --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-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-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%);
-    
+    --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),
+    --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;
+    --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);
   }
@@ -657,29 +875,42 @@
   /* 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;
+    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;
+    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),
+    --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;
   }
 
@@ -692,9 +923,11 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--trackio-cell-gap);
   }
-  
+
   @media (max-width: 980px) {
-    .trackio__grid { grid-template-columns: 1fr; }
+    .trackio__grid {
+      grid-template-columns: 1fr;
+    }
   }
 
   .trackio__header {
@@ -712,28 +945,37 @@
   .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;
+    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 .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; }
+  .trackio.theme--oblivion .cell-corners {
+    display: block;
+  }
 
   /* =========================
      FOOTER
@@ -777,8 +1019,7 @@
   }
 
   .trackio.theme--oblivion .trackio__footer small {
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
   }
 </style>
-
-

app/src/components/{TrackioWrapper.astro → trackio/TrackioWrapper.astro}

@@ -1,12 +1,15 @@
 ---
 // TrackioWrapper.astro
-import Trackio from './trackio/Trackio.svelte';
+import Trackio from "./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">
+<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">
@@ -20,11 +23,11 @@ import Trackio from './trackio/Trackio.svelte';
       </div>
       <div class="scale-controls">
         <label>
-          <input type="checkbox" id="log-scale-x" checked>
+          <input type="checkbox" id="log-scale-x" checked />
           Log Scale X
         </label>
         <label>
-          <input type="checkbox" id="smooth-data" checked>
+          <input type="checkbox" id="smooth-data" checked />
           Smooth
         </label>
       </div>
@@ -33,15 +36,24 @@ import Trackio from './trackio/Trackio.svelte';
       <button class="button button--ghost" type="button" id="randomize-btn">
         Randomize Data
       </button>
-      <button class="button button--primary" type="button" id="start-simulation-btn">
+      <button
+        class="button button--primary"
+        type="button"
+        id="start-simulation-btn"
+      >
         Live Run
       </button>
-      <button class="button button--danger" type="button" id="stop-simulation-btn" style="display: none;">
+      <button
+        class="button button--danger"
+        type="button"
+        id="stop-simulation-btn"
+        style="display: none;"
+      >
         Stop
       </button>
     </div>
   </div>
-  
+
   <div class="trackio-container">
     <Trackio client:load variant="classic" logScaleX={true} smoothing={true} />
   </div>
@@ -49,245 +61,284 @@ import Trackio from './trackio/Trackio.svelte';
 
 <script>
   // @ts-nocheck
-  document.addEventListener('DOMContentLoaded', async () => {
-    const themeSelect = document.getElementById('theme-select');
-    const randomizeBtn = document.getElementById('randomize-btn');
-    const startSimulationBtn = document.getElementById('start-simulation-btn');
-    const stopSimulationBtn = document.getElementById('stop-simulation-btn');
-    const logScaleXCheckbox = document.getElementById('log-scale-x');
-    const smoothDataCheckbox = document.getElementById('smooth-data');
-    const trackioContainer = document.querySelector('.trackio-container');
-    
-    if (!themeSelect || !randomizeBtn || !startSimulationBtn || !stopSimulationBtn || 
-        !logScaleXCheckbox || !smoothDataCheckbox || !trackioContainer) return;
-        
-    // Variables pour la simulation
+  document.addEventListener("DOMContentLoaded", async () => {
+    const themeSelect = document.getElementById("theme-select");
+    const randomizeBtn = document.getElementById("randomize-btn");
+    const startSimulationBtn = document.getElementById("start-simulation-btn");
+    const stopSimulationBtn = document.getElementById("stop-simulation-btn");
+    const logScaleXCheckbox = document.getElementById("log-scale-x");
+    const smoothDataCheckbox = document.getElementById("smooth-data");
+    const trackioContainer = document.querySelector(".trackio-container");
+
+    if (
+      !themeSelect ||
+      !randomizeBtn ||
+      !startSimulationBtn ||
+      !stopSimulationBtn ||
+      !logScaleXCheckbox ||
+      !smoothDataCheckbox ||
+      !trackioContainer
+    )
+      return;
+
+    // Variables for simulation
     let simulationInterval = null;
     let currentSimulationRun = null;
     let currentStep = 0;
-    
+
     // Import the store function
-    const { triggerJitter } = await import('./trackio/core/store.js');
-    
+    const { triggerJitter } = await import("./core/store.js");
+
     // Theme change handler
-    themeSelect.addEventListener('change', (e) => {
+    themeSelect.addEventListener("change", (e) => {
       const target = e.target;
-      if (!target || !('value' in target)) return;
-      
+      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 = debugTrackioState();
       if (trackioEl && trackioEl.__trackioInstance) {
-        console.log('✅ Calling setTheme on Trackio instance');
+        console.log("✅ Calling setTheme on Trackio instance");
         trackioEl.__trackioInstance.setTheme(newVariant);
       } else {
-        console.warn('❌ No Trackio instance found for theme change');
+        console.warn("❌ No Trackio instance found for theme change");
       }
     });
 
     // Log scale X change handler
-    logScaleXCheckbox.addEventListener('change', (e) => {
+    logScaleXCheckbox.addEventListener("change", (e) => {
       const target = e.target;
-      if (!target || !('checked' in target)) return;
-      
+      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 = debugTrackioState();
       if (trackioEl && trackioEl.__trackioInstance) {
-        console.log('✅ Calling setLogScaleX on Trackio instance');
+        console.log("✅ Calling setLogScaleX on Trackio instance");
         trackioEl.__trackioInstance.setLogScaleX(isLogScale);
       } else {
-        console.warn('❌ Trackio instance not found for log scale change');
+        console.warn("❌ Trackio instance not found for log scale change");
       }
     });
 
     // Smooth data change handler
-    smoothDataCheckbox.addEventListener('change', (e) => {
+    smoothDataCheckbox.addEventListener("change", (e) => {
       const target = e.target;
-      if (!target || !('checked' in target)) return;
-      
+      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 = debugTrackioState();
       if (trackioEl && trackioEl.__trackioInstance) {
-        console.log('✅ Calling setSmoothing on Trackio instance');
+        console.log("✅ Calling setSmoothing on Trackio instance");
         trackioEl.__trackioInstance.setSmoothing(isSmooth);
       } else {
-        console.warn('❌ Trackio instance not found for smooth change');
+        console.warn("❌ Trackio instance not found for smooth change");
       }
     });
-    
+
     // Debug function to check trackio state
     function debugTrackioState() {
-      const trackioEl = trackioContainer.querySelector('.trackio');
-      console.log('🔍 Debug Trackio state:', {
+      const trackioEl = trackioContainer.querySelector(".trackio");
+      console.log("🔍 Debug Trackio state:", {
         container: !!trackioContainer,
         trackioEl: !!trackioEl,
         hasInstance: !!(trackioEl && trackioEl.__trackioInstance),
-        availableMethods: trackioEl && trackioEl.__trackioInstance ? Object.keys(trackioEl.__trackioInstance) : 'none',
-        windowInstance: !!window.trackioInstance
+        availableMethods:
+          trackioEl && trackioEl.__trackioInstance
+            ? Object.keys(trackioEl.__trackioInstance)
+            : "none",
+        windowInstance: !!window.trackioInstance,
       });
       return trackioEl;
     }
-    
+
     // Initialize with default checked states - increased delay and retry logic
     function initializeTrackio(attempt = 1) {
       console.log(`🚀 Initializing Trackio (attempt ${attempt})`);
-      
+
       const trackioEl = debugTrackioState();
-      
+
       if (trackioEl && trackioEl.__trackioInstance) {
-        console.log('✅ Trackio instance found, applying initial settings');
-        
+        console.log("✅ Trackio instance found, applying initial settings");
+
         if (logScaleXCheckbox.checked) {
-          console.log('Initializing with log scale X enabled');
+          console.log("Initializing with log scale X enabled");
           trackioEl.__trackioInstance.setLogScaleX(true);
         }
-        
+
         if (smoothDataCheckbox.checked) {
-          console.log('Initializing with smoothing enabled');
+          console.log("Initializing with smoothing enabled");
           trackioEl.__trackioInstance.setSmoothing(true);
         }
       } else {
-        console.log('❌ Trackio instance not ready yet');
+        console.log("❌ Trackio instance not ready yet");
         if (attempt < 10) {
           setTimeout(() => initializeTrackio(attempt + 1), 200 * attempt);
         } else {
-          console.error('Failed to initialize Trackio after 10 attempts');
+          console.error("Failed to initialize Trackio after 10 attempts");
         }
       }
     }
-    
+
     // Start initialization
     setTimeout(() => initializeTrackio(), 100);
-    
-    // Fonction pour générer une nouvelle valeur de métrique simulée
+
+    // Function to generate a new simulated metric value
     function generateSimulatedValue(step, metric) {
       const baseProgress = Math.min(1, step / 100); // Normalise sur 100 steps
-      
-      if (metric === 'loss') {
-        // Loss qui décroit avec du bruit
+
+      if (metric === "loss") {
+        // Loss that decreases with noise
         const baseLoss = 2.0 * Math.exp(-0.05 * step);
         const noise = (Math.random() - 0.5) * 0.2;
         return Math.max(0.01, baseLoss + noise);
-      } else if (metric === 'accuracy') {
-        // Accuracy qui augmente avec du bruit
+      } else if (metric === "accuracy") {
+        // Accuracy that increases with noise
         const baseAcc = 0.1 + 0.8 * (1 - Math.exp(-0.04 * step));
         const noise = (Math.random() - 0.5) * 0.05;
         return Math.max(0, Math.min(1, baseAcc + noise));
       }
       return Math.random();
     }
-    
-    // Gestionnaire pour démarrer la simulation
+
+    // Handler to start simulation
     function startSimulation() {
       if (simulationInterval) {
         clearInterval(simulationInterval);
       }
-      
+
       // Générer un nouveau nom de run
-      const adjectives = ['live', 'real-time', 'streaming', 'dynamic', 'active', 'running'];
-      const nouns = ['experiment', 'trial', 'session', 'training', 'run', 'test'];
-      const randomAdj = adjectives[Math.floor(Math.random() * adjectives.length)];
+      const adjectives = [
+        "live",
+        "real-time",
+        "streaming",
+        "dynamic",
+        "active",
+        "running",
+      ];
+      const nouns = [
+        "experiment",
+        "trial",
+        "session",
+        "training",
+        "run",
+        "test",
+      ];
+      const randomAdj =
+        adjectives[Math.floor(Math.random() * adjectives.length)];
       const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
       currentSimulationRun = `${randomAdj}-${randomNoun}-${Date.now().toString().slice(-4)}`;
       currentStep = 1; // Commencer à step 1
-      
+
       console.log(`Starting simulation for run: ${currentSimulationRun}`);
-      
+
       // Interface UI
-      startSimulationBtn.style.display = 'none';
-      stopSimulationBtn.style.display = 'inline-flex';
+      startSimulationBtn.style.display = "none";
+      stopSimulationBtn.style.display = "inline-flex";
       startSimulationBtn.disabled = true;
-      
+
       // Ajouter le premier point
       addSimulationStep();
-      
+
       // Continuer chaque seconde
       simulationInterval = setInterval(() => {
         currentStep++;
         addSimulationStep();
-        
-        // Arrêter après 200 steps pour éviter l'infini
+
+        // Stop after 200 steps to avoid infinity
         if (currentStep > 200) {
           stopSimulation();
         }
       }, 1000); // Chaque seconde
     }
-    
-    // Fonction pour ajouter un nouveau point de données
+
+    // Function to add a new data point
     function addSimulationStep() {
-      const trackioEl = trackioContainer.querySelector('.trackio');
+      const trackioEl = trackioContainer.querySelector(".trackio");
       if (trackioEl && trackioEl.__trackioInstance) {
         const newDataPoint = {
           step: currentStep,
-          loss: generateSimulatedValue(currentStep, 'loss'),
-          accuracy: generateSimulatedValue(currentStep, 'accuracy')
+          loss: generateSimulatedValue(currentStep, "loss"),
+          accuracy: generateSimulatedValue(currentStep, "accuracy"),
         };
-        
-        console.log(`Adding simulation step ${currentStep} for run ${currentSimulationRun}:`, newDataPoint);
-        
+
+        console.log(
+          `Adding simulation step ${currentStep} for run ${currentSimulationRun}:`,
+          newDataPoint,
+        );
+
         // Ajouter le point via l'instance Trackio
-        if (typeof trackioEl.__trackioInstance.addLiveDataPoint === 'function') {
-          trackioEl.__trackioInstance.addLiveDataPoint(currentSimulationRun, newDataPoint);
+        if (
+          typeof trackioEl.__trackioInstance.addLiveDataPoint === "function"
+        ) {
+          trackioEl.__trackioInstance.addLiveDataPoint(
+            currentSimulationRun,
+            newDataPoint,
+          );
         } else {
-          console.warn('addLiveDataPoint method not found on Trackio instance');
+          console.warn("addLiveDataPoint method not found on Trackio instance");
         }
       }
     }
-    
-    // Gestionnaire pour arrêter la simulation  
+
+    // Handler to stop simulation
     function stopSimulation() {
       if (simulationInterval) {
         clearInterval(simulationInterval);
         simulationInterval = null;
       }
-      
+
       console.log(`Stopping simulation for run: ${currentSimulationRun}`);
-      
+
       // Interface UI
-      startSimulationBtn.style.display = 'inline-flex';
-      stopSimulationBtn.style.display = 'none';
+      startSimulationBtn.style.display = "inline-flex";
+      stopSimulationBtn.style.display = "none";
       startSimulationBtn.disabled = false;
-      
+
       currentSimulationRun = null;
       currentStep = 0;
     }
-    
-    // Event listeners pour les boutons de simulation
-    startSimulationBtn.addEventListener('click', startSimulation);
-    stopSimulationBtn.addEventListener('click', stopSimulation);
-    
+
+    // Event listeners for simulation buttons
+    startSimulationBtn.addEventListener("click", startSimulation);
+    stopSimulationBtn.addEventListener("click", stopSimulation);
+
     // Arrêter la simulation si l'utilisateur quitte la page
-    window.addEventListener('beforeunload', stopSimulation);
-    
+    window.addEventListener("beforeunload", stopSimulation);
+
     // Randomize data handler - now uses the store
-    randomizeBtn.addEventListener('click', () => {
-      console.log('Randomize button clicked - triggering jitter via store'); // Debug log
-      
+    randomizeBtn.addEventListener("click", () => {
+      console.log("Randomize button clicked - triggering jitter via store"); // Debug log
+
       // Arrêter la simulation en cours si elle tourne
       if (simulationInterval) {
         stopSimulation();
       }
-      
+
       // Add vibration animation
-      randomizeBtn.classList.add('vibrating');
+      randomizeBtn.classList.add("vibrating");
       setTimeout(() => {
-        randomizeBtn.classList.remove('vibrating');
+        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
+      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
+        console.log("No window.trackioInstance found, using store trigger"); // Debug log
         triggerJitter();
       }
     });
@@ -299,7 +350,7 @@ import Trackio from './trackio/Trackio.svelte';
     width: 100%;
     margin: 0px 0 20px 0;
   }
-  
+
   .trackio-controls {
     display: flex;
     justify-content: space-between;
@@ -310,21 +361,21 @@ import Trackio from './trackio/Trackio.svelte';
     gap: 16px;
     flex-wrap: nowrap;
   }
-  
+
   .controls-left {
     display: flex;
     align-items: center;
     gap: 24px;
     flex-wrap: wrap;
   }
-  
+
   .controls-right {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
   }
-  
+
   .btn-randomize {
     display: inline-flex;
     align-items: center;
@@ -339,16 +390,16 @@ import Trackio from './trackio/Trackio.svelte';
     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;
@@ -357,12 +408,12 @@ import Trackio from './trackio/Trackio.svelte';
     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);
@@ -373,12 +424,12 @@ import Trackio from './trackio/Trackio.svelte';
     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;
@@ -386,53 +437,74 @@ import Trackio from './trackio/Trackio.svelte';
     flex-shrink: 0;
     white-space: nowrap;
   }
-  
-  /* Animation de vibration pour le bouton */
+
+  /* Vibration animation for button */
   @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); }
+    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: 10px;
     border: 1px solid var(--border-color);
     padding: 24px 12px;
-
   }
-  
+
   @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>
+</style>

app/src/components/trackio/core/adaptive-sampler.js

@@ -7,24 +7,24 @@
 export class AdaptiveSampler {
   constructor(options = {}) {
     this.options = {
-      maxPoints: 400,           // Seuil pour déclencher le sampling
-      targetPoints: 200,        // Nombre cible de points après sampling
-      preserveFeatures: true,   // Préserver les pics/vallées importantes
+      maxPoints: 400,           // Threshold to trigger sampling
+      targetPoints: 200,        // Target number of points after sampling
+      preserveFeatures: true,   // Preserve important peaks/valleys
       adaptiveStrategy: 'smart', // 'uniform', 'smart', 'lod'
-      smoothingWindow: 3,       // Fenêtre pour détection des features
+      smoothingWindow: 3,       // Window for feature detection
       ...options
     };
   }
 
   /**
-   * Détermine si le sampling est nécessaire
+   * Determine if sampling is necessary
    */
   needsSampling(dataLength) {
     return dataLength > this.options.maxPoints;
   }
 
   /**
-   * Point d'entrée principal pour le sampling
+   * Main entry point for sampling
    */
   sampleSeries(data, strategy = null) {
     if (!Array.isArray(data) || data.length === 0) {
@@ -234,11 +234,11 @@ export class AdaptiveSampler {
       const index = Math.floor(logProgress * (totalLength - 1));
       indices.push(Math.max(1, Math.min(totalLength - 2, index)));
     }
-    return [...new Set(indices)]; // Supprimer les doublons
+    return [...new Set(indices)]; // Remove duplicates
   }
 
   /**
-   * Échantillonnage basé sur la variation locale
+   * Sampling based on local variation
    */
   sampleByVariation(data, targetPoints) {
     const variations = [];
@@ -290,7 +290,7 @@ export class AdaptiveSampler {
    * Reconstruit les données complètes pour une zone spécifique (pour le zoom)
    */
   getFullDataForRange(originalData, samplingInfo, startStep, endStep) {
-    // Cette méthode permettrait de récupérer plus de détails
+    // This method would allow recovering more details
     // quand l'utilisateur zoom sur une zone spécifique
     const startIdx = originalData.findIndex(d => d.step >= startStep);
     const endIdx = originalData.findIndex(d => d.step > endStep);

app/src/content/assets/data/data.json

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

.devcontainer/devcontainer.json → app/src/content/assets/data/font-sprite-mapping.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:79a20e69bb53755d95829b1a9a67f8b7ad9e6cad4859412d6e7d3bc7d5570c93
-size 1282
+oid sha256:ea1b487ebafe8d495737674a7eb6492b06551aeb97de79728afeb4aba7c39f29
+size 9766

app/src/content/assets/data/font_manifest.json

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

app/src/content/assets/data/typography_data.json

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

app/src/content/chapters/demo/best-pratices.mdx

@@ -1,7 +1,7 @@
 
 import visualPoster from '../../assets/image/visual-vocabulary-poster.png';
 import Note from '../../../components/Note.astro';
-import ResponsiveImage from '../../../components/ResponsiveImage.astro';
+import Figure from '../../../components/Figure.astro';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
 import Sidenote from '../../../components/Sidenote.astro';
 
@@ -44,7 +44,7 @@ Favor **concise captions** and callouts that clarify what to look at and why it
 
 Picking the right visualization depends on your goal (compare values, show distribution, part-to-whole, trends, relationships, etc.). The Visual Vocabulary poster below provides a concise mapping from **analytical task** to **chart types**.
 
-<ResponsiveImage
+<Figure
   src={visualPoster}
   alt="Visual Vocabulary: choosing the right chart by task"
   linkHref="https://raw.githubusercontent.com/Financial-Times/chart-doctor/refs/heads/main/visual-vocabulary/poster.png"

app/src/content/chapters/demo/components.mdx

@@ -7,8 +7,8 @@ import Wide from '../../../components/Wide.astro';
 import Note from '../../../components/Note.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import Accordion from '../../../components/Accordion.astro';
-import Figure from '../../../components/ResponsiveImage.astro';
-import SubFigures from '../../../components/MultiImage.astro';
+import Figure from '../../../components/Figure.astro';
+import SubFigures from '../../../components/MultiFigure.astro';
 import Quote from '../../../components/Quote.astro';
 
 ## Components
@@ -20,8 +20,8 @@ import Quote from '../../../components/Quote.astro';
 To use any component in your MDX file, add the import statement at the top:
 
 ```mdx
-import Figure from '../components/ResponsiveImage.astro';
-import SubFigures from '../components/MultiImage.astro';
+import Figure from '../components/Figure.astro';
+import SubFigures from '../components/MultiFigure.astro';
 import Note from '../components/Note.astro';
 
 # Your content
@@ -94,7 +94,7 @@ Here are the components that are available:
 
 <Accordion title="Code example">
 ```mdx
-import Figure from '../../../components/ResponsiveImage.astro'
+import Figure from '../../../components/Figure.astro'
 import myImage from './assets/image/placeholder.jpg'
 
 <Figure src={myImage} alt="Optimized figure with caption" />
@@ -304,8 +304,8 @@ import Note from '../../../components/Note.astro'
 
 Elegant quotes with optional source attribution.
 
-<Quote source="Geoffrey Hinton, <a href='https://list-quotes.com/quotes/geoffrey-hinton-300077/'>Interview on Brain Complexity</a>">
-  In the brain, you have connections between the neurons called synapses, and they can change. All your knowledge is stored in those synapses. You have about 1,000-trillion synapses - 10 to the 15, it's a very big number.
+<Quote source="Geoffrey Hinton, <a href='https://www.nature.com/articles/323533a0'>Learning representations by back-propagating errors</a>">
+  Backpropagation allows neural networks to discover their own internal representations of data.
 </Quote>
 
 | Prop     | Required | Type   | Description                    |
@@ -316,8 +316,8 @@ Elegant quotes with optional source attribution.
 ```mdx
 import Quote from '../../../components/Quote.astro'
 
-<Quote source="Geoffrey Hinton, <a href='https://list-quotes.com/quotes/geoffrey-hinton-300077/'>Interview on Brain Complexity</a>">
-  In the brain, you have connections between the neurons called synapses, and they can change. All your knowledge is stored in those synapses. You have about 1,000-trillion synapses - 10 to the 15, it's a very big number.
+<Quote source="Geoffrey Hinton, <a href='https://www.nature.com/articles/323533a0'>Learning representations by back-propagating errors</a>">
+  Backpropagation allows neural networks to discover their own internal representations of data.
 </Quote>
 ```
 </Accordion>

app/src/content/chapters/demo/debug-components.mdx

@@ -1,6 +1,6 @@
 import Accordion from '../../../components/Accordion.astro';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
-import ResponsiveImage from '../../../components/ResponsiveImage.astro';
+import Figure from '../../../components/Figure.astro';
 import Wide from '../../../components/Wide.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import Note from '../../../components/Note.astro';

app/src/content/chapters/demo/introduction.mdx

@@ -2,12 +2,13 @@ import Sidenote from "../../../components/Sidenote.astro";
 
 Welcome to this single‑page **research article template**. It helps you publish **clear**, **modern**, and **interactive technical writing** with **minimal setup**.
 
-Grounded in up to date good practices in web dev, it favors **interactive explanations**, **clear notation**, and **inspectable examples** over static snapshots.
-
 <Sidenote>
   Reading time: 20–25 minutes.
 </Sidenote>
 
+Grounded in up to date good practices in web dev, it favors **interactive explanations**, **clear notation**, and **inspectable examples** over static snapshots.
+
+
 #### Features
 
 <div className="tag-list">

app/src/content/chapters/demo/markdown.mdx

@@ -6,7 +6,7 @@ import Wide from '../../../components/Wide.astro';
 import Note from '../../../components/Note.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import Accordion from '../../../components/Accordion.astro';
-import ResponsiveImage from '../../../components/ResponsiveImage.astro';
+import Figure from '../../../components/Figure.astro';
 
 ## Markdown
 
@@ -301,7 +301,7 @@ In research articles, you may have to make references to anything. They are basi
   <HtmlEmbed id="neural-network-mnist-like"/>
   [Chart 1](#neural-network-mnist-like)
 
-  <ResponsiveImage id="placeholder-image" src="..."/>
+  <Figure id="placeholder-image" src="..."/>
   [Fig 1](#placeholder-image)
 ```
 </Accordion>

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

@@ -1,6 +1,7 @@
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
 import Note from '../../../components/Note.astro';
-import TrackioWrapper from '../../../components/TrackioWrapper.astro';
+import TrackioWrapper from '../../../components/trackio/TrackioWrapper.astro';
+import Sidenote from '../../../components/Sidenote.astro';
 
 ## Vibe coding charts
 
@@ -27,15 +28,19 @@ I want you to code a d3 chart that visualizes the data.
 4. Once the chart created, iterate with littles adjustments to make it better.
 5. And that's it! 🎉
 
-### Real‑world examples
+### Base examples
 
-They can be found in the `app/src/content/embeds` folder and you can also use them as a starting point or examples to vibe code with.
+These are fundamental chart types that serve as building blocks for more complex visualizations. You can find all the source code in `app/src/content/embeds`.
 
 <HtmlEmbed
+  id="fig1"
   title="d3-benchmark: LLM Benchmark"
   src="d3-benchmark.html" desc={`Figure 1: Grouped bar chart comparing model scores across benchmarks (MMLU, GSM8K, HellaSwag, TruthfulQA, ARC‑C). Each group is a benchmark; colors encode models; values are accuracy/score (higher is better).`}  />
+<Sidenote> Example of <a href="#color-palettes" target="_blank">categorical color palette</a> </Sidenote>
+
 ---
-  <HtmlEmbed
+<HtmlEmbed
+  id="fig2"
   src="d3-line.html"
   title="d3-line: Average Ranking of Models"
   desc='Figure 2: Average Ranking of Models trained with internally deduplicated / merged samples. No clear benefit in merging can be seen with respect to model performance.<br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>'
@@ -44,33 +49,77 @@ They can be found in the `app/src/content/embeds` folder and you can also use th
     defaultMetric: ['average_rank']
   }}
 />
+
 ---
-  <HtmlEmbed
-    src="d3-neural-network.html"
-    id="neural-network-mnist-like"
-    title="d3-neural-network: MNIST-like Neural Network"
-    desc={`Figure 3: Interactive MNIST-like neural network. Draw a digit on the left canvas; activations propagate through hidden layers (node size/opacity reflect activation). The right side displays class probabilities (0–9) with the top class emphasized.`}
-  />
+<HtmlEmbed id="fig4" src="d3-pie.html" title="d3-pie: Simple pie chart" frameless desc={'Figure 4: Simple pie chart showing data distribution across categories.<br/>Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>'} />
+
+
 ---
-  <HtmlEmbed
-    src="d3-matrix.html"
-    title="d3-matrix: Baseline and Δ (Improved − Baseline)"
-    frameless
-    desc={`<p>
-  Figure 4: Left: baseline matrix (row-normalized, sequential palette).
-  Right: Δ (Improved − Baseline) in percentage points, using a diverging palette centered at 0 to highlight improvements vs degradations.
+<HtmlEmbed
+  id="fig3"
+  src="d3-matrix.html"
+  title="d3-matrix: Baseline and Δ (Improved − Baseline)"
+  frameless
+  desc={`<p>
+Figure 3: Left: baseline matrix (row-normalized, sequential palette).
+Right: Δ (Improved − Baseline) in percentage points, using a diverging palette centered at 0 to highlight improvements vs degradations.
 </p>`}
-  />
+/>
+<Sidenote> Example of <a href="#color-palettes" target="_blank">sequential</a> and <a href="#color-palettes" target="_blank">diverging color palette</a> </Sidenote>
+
 ---
-  <HtmlEmbed title="d3-line-quad: Comparison across thresholds" frameless src="d3-line-quad.html" desc={"Figure 5: Comparison across thresholds for all four filters individually: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence <br/> Credit: "+'<a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>'} />
+
+<HtmlEmbed 
+  id="fig8"
+  src="d3-equation-editor.html" 
+  frameless
+  title="Interactive Mathematical Function Plotter" 
+  desc={`Figure 8: Interactive <strong>equation editor</strong> with real-time function plotting. Edit mathematical expressions and see their graphs update instantly. Supports common functions (sin, cos, exp, etc.) with customizable domain range.`} 
+/>
+
+
+### Advanced examples
+
+These are more complex, interactive visualizations that demonstrate advanced D3 capabilities and real-world applications.
+
+<HtmlEmbed
+  id="fig5"
+  src="d3-neural-network.html"
+  id="neural-network-mnist-like"
+  frameless
+  title="MNIST-like Neural Network"
+  desc={`Figure 5: Interactive MNIST-like neural network. Draw a digit on the left canvas; activations propagate through hidden layers (node size/opacity reflect activation). The right side displays class probabilities (0–9) with the top class emphasized.`}
+/>
+---
+
+<HtmlEmbed 
+  id="fig6"
+  src="arxiv/arxiv.html" 
+  title="arXiv: Research Paper Clustering" 
+  desc={`Figure 6: Interactive visualization of ~8k recent arXiv submissions via UMAP dimensionality reduction. Each point represents a research paper positioned by semantic similarity. Colors indicate academic categories (cs.AI, cs.LG, cs.CV, etc.).`} 
+  data="data.json"
+  frameless 
+  align="center" 
+/>
+
+<Sidenote> 
+  Recent arXiv publications (~8k papers from last month) via TF-IDF embeddings projected to 2D via UMAP.
+</Sidenote>
 ---
-<HtmlEmbed src="d3-bar.html" title="d3-bar: Memory usage with recomputation" desc={`Figure 6: Memory usage with recomputation.<br/>Credits: <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">Ultrascale playbook</a>`}/>
---- 
-  <HtmlEmbed src="d3-pie.html" title="d3-pie: Pie charts by category" desc='Figure 7: Comparison across thresholds for all four filters individually: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>' /> 
---- 
-  <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 
+  id="fig7"
+  src="d3-umap-typography.html" 
+  title="Visual Similarity of Typefaces" 
+  desc={`Figure 7: Interactive 2D visualization of 382 <strong>Google Fonts</strong> clustered by visual similarity via <strong>UMAP</strong>. Each point represents a typeface positioned based on pixel-level differences computed from font matrices.`} 
+  frameless 
+  align="center" 
+/>
+
 ---
-<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 id="fig9" src="d3-pie-quad.html" title="d3-pie-quad: Quad donuts by metric" align="center" frameless desc={'Figure 9: Quad view: Answer Tokens, Number of Samples, Number of Turns, Number of Images.<br/>Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>'} />
 
 {/* ### Trackio redesign experiment
 <TrackioWrapper /> */}

app/src/content/chapters/demo/writing-your-content.mdx

@@ -6,8 +6,8 @@ import Wide from '../../../components/Wide.astro';
 import Note from '../../../components/Note.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
-import ColorPicker from '../../../components/ColorPicker.astro';
-import Palettes from '../../../components/Palettes.astro';
+import ColorPicker from '../../../components/demo/ColorPicker.astro';
+import Palettes from '../../../components/demo/Palettes.astro';
 import audioDemo from '../../assets/audio/audio-example.wav';
 import Accordion from '../../../components/Accordion.astro';
 
@@ -87,7 +87,7 @@ Your story. Write your content here.
 <small className="muted">**Content** in app/src/content/article.mdx</small>
 ```mdx
 import placeholder from '../../assets/image/placeholder.png'
-import ResponsiveImage from '../../../components/ResponsiveImage.astro'
+import Figure from '../../../components/Figure.astro'
 import Sidenote from '../../../components/Sidenote.astro'
 
 This paragraph is written in Markdown.
@@ -95,7 +95,7 @@ This paragraph is written in Markdown.
 <Sidenote>
   A short callout inserted via a component.
 </Sidenote>
-<ResponsiveImage src={placeholder} alt="Sample image with optimization" />
+<Figure src={placeholder} alt="Sample image with optimization" />
 
 This paragraph is also written in Markdown. 
 ```
@@ -144,6 +144,7 @@ Use the **color picker** below to see how the primary color affects the theme.
 
 Here is a suggestion of **color palettes** for your **data visualizations** that align with your **brand identity**. These palettes are generated from your `--primary-color`.
 
+
 <Palettes />
 <br/>
 **Use color with care.**

app/src/content/chapters/your-first-chapter.mdx

@@ -0,0 +1,2 @@
+# this is an example chapter
+

app/src/content/embeds/arxiv/arxiv.html

@@ -0,0 +1,566 @@
+<div class="arxiv-umap"></div>
+
+<style>
+    .arxiv-umap {
+        position: relative;
+    }
+
+    .arxiv-umap svg {
+        display: block;
+    }
+
+    /* Tooltip styling comme d3-scatter */
+    .arxiv-umap .d3-tooltip {
+        z-index: 20;
+        backdrop-filter: saturate(1.12) blur(8px);
+    }
+
+    .arxiv-umap .d3-tooltip__inner {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        min-width: 280px;
+        max-width: 400px;
+        max-height: 90vh;
+        overflow-y: auto;
+        word-wrap: break-word;
+        word-break: break-word;
+    }
+
+    .arxiv-umap .paper-header {
+        background: linear-gradient(135deg, var(--surface-bg), var(--code-bg));
+        padding: 12px;
+        margin: -10px -12px 8px -12px;
+        border-radius: 8px 8px 0 0;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    .arxiv-umap .paper-title {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 1.4;
+        margin-bottom: 8px;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--text-color);
+    }
+
+    .arxiv-umap .paper-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 6px;
+    }
+
+    .arxiv-umap .paper-category {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        color: var(--muted-color);
+    }
+
+    .arxiv-umap .paper-badges {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+    }
+
+    .arxiv-umap .paper-authors {
+        font-size: 11px;
+        color: var(--muted-color);
+        font-style: italic;
+        margin-bottom: 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        opacity: 0.9;
+    }
+
+    .arxiv-umap .paper-abstract {
+        font-size: 11px;
+        line-height: 1.4;
+        color: var(--text-color);
+        padding-top: 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 6;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: none;
+    }
+
+    .arxiv-umap .paper-year {
+        background: var(--primary-color);
+        color: white;
+        padding: 3px 8px;
+        border-radius: 12px;
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+    }
+
+    .arxiv-umap .paper-id {
+        background: var(--border-color);
+        color: var(--muted-color);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 9px;
+        font-weight: 500;
+        font-family: monospace;
+        white-space: nowrap;
+    }
+</style>
+
+<script>
+    (() => {
+        const ensureD3 = (cb) => {
+            if (window.d3 && typeof window.d3.select === 'function') return cb();
+            let s = document.getElementById('d3-cdn-script');
+            if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+            const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.d3) onReady();
+        };
+
+        const bootstrap = () => {
+            const scriptEl = document.currentScript;
+            let container = scriptEl ? scriptEl.previousElementSibling : null;
+            if (!(container && container.classList && container.classList.contains('arxiv-umap'))) {
+                const cs = Array.from(document.querySelectorAll('.arxiv-umap')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+                container = cs[cs.length - 1] || null;
+            }
+            if (!container) return;
+            if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+            // Tooltip
+            container.style.position = container.style.position || 'relative';
+            let tip = container.querySelector('.d3-tooltip'); let tipInner;
+            if (!tip) {
+                tip = document.createElement('div'); tip.className = 'd3-tooltip';
+                Object.assign(tip.style, { position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none', padding: '10px 12px', borderRadius: '12px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)', background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity: '0', transition: 'opacity .12s ease', backdropFilter: 'saturate(1.12) blur(8px)' });
+                tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign = 'left'; tip.appendChild(tipInner); container.appendChild(tip);
+            } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+            // SVG
+            const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+            const gRoot = svg.append('g');
+            const gDots = gRoot.append('g').attr('class', 'dots');
+            const gCentroids = gRoot.append('g').attr('class', 'centroids');
+
+            // State & scales
+            let width = 800, height = 360; const margin = { top: 8, right: 12, bottom: 8, left: 12 };
+            const x = d3.scaleLinear();
+            const y = d3.scaleLinear();
+            const color = d3.scaleOrdinal();
+            const radius = () => 3;
+            let isDarkMode = false;
+
+            // Beautiful category labels
+            const categoryLabels = {
+                'cs': 'Computer Science',
+                'math': 'Mathematics',
+                'physics': 'Physics',
+                'stat': 'Statistics',
+                'eess': 'Electrical Engineering',
+                'econ': 'Economics',
+                'q-bio': 'Quantitative Biology',
+                'q-fin': 'Quantitative Finance',
+                'astro-ph': 'Astrophysics',
+                'cond-mat': 'Condensed Matter',
+                'gr-qc': 'General Relativity',
+                'hep-ex': 'High Energy Physics - Experiment',
+                'hep-lat': 'High Energy Physics - Lattice',
+                'hep-ph': 'High Energy Physics - Phenomenology',
+                'hep-th': 'High Energy Physics - Theory',
+                'math-ph': 'Mathematical Physics',
+                'nlin': 'Nonlinear Sciences',
+                'nucl-ex': 'Nuclear Experiment',
+                'nucl-th': 'Nuclear Theory',
+                'quant-ph': 'Quantum Physics'
+            };
+
+            function getCategoryLabel(category) {
+                return categoryLabels[category] || category;
+            }
+
+            // Inverse mapping: from family names to domain codes for colors
+            const familyToDomainCode = {
+                'Computer Science': 'cs',
+                'Physics': 'physics',
+                'Astrophysics': 'astro-ph',
+                'Condensed Matter': 'cond-mat',
+                'Quantum Physics': 'quant-ph',
+                'Mathematics': 'math',
+                'Statistics': 'stat',
+                'Mathematical Physics': 'math-ph',
+                'Engineering': 'eess',
+                'Biology': 'q-bio',
+                'Economics': 'econ',
+                'Finance': 'q-fin',
+                'General Relativity': 'gr-qc',
+                'Particle Physics': 'hep-ph',
+                'Nonlinear Sciences': 'nlin',
+                'Nuclear Physics': 'nucl-ex'
+            };
+
+            function getFamilyColor(familyName) {
+                const domainCode = familyToDomainCode[familyName] || familyName;
+                return color(domainCode) || 'var(--text-color)';
+            }
+
+            function getDotStrokeColor(fillColor = null) {
+                if (!fillColor) return 'var(--muted-color)';
+
+                let resolvedColor = fillColor;
+                if (fillColor.startsWith('var(')) {
+                    const tempEl = document.createElement('div');
+                    tempEl.style.color = fillColor;
+                    document.body.appendChild(tempEl);
+                    resolvedColor = getComputedStyle(tempEl).color;
+                    document.body.removeChild(tempEl);
+                }
+
+                try {
+                    const colorObj = d3.color(resolvedColor);
+                    if (!colorObj) return 'var(--muted-color)';
+
+                    return isDarkMode ?
+                        colorObj.darker(0.3).toString() :
+                        colorObj.brighter(0.8).toString();
+                } catch {
+                    return 'var(--muted-color)';
+                }
+            }
+
+            // Data loading
+            async function fetchFirstAvailable(paths) {
+                for (const p of paths) {
+                    try {
+                        const res = await fetch(p, { cache: 'no-cache' });
+                        if (res.ok) { return await res.json(); }
+                    } catch (e) { }
+                }
+                throw new Error('Failed to load data from provided paths');
+            }
+
+            let data = [];
+            let categories = [];
+            let centroids = [];
+
+            // Mapping des domaines vers les 9 grandes familles
+            const domainToFamily = {
+                'cs': 'Computer Science',
+                'physics': 'Physics',
+                'astro-ph': 'Astrophysics',
+                'cond-mat': 'Condensed Matter',
+                'quant-ph': 'Quantum Physics',
+                'math': 'Mathematics',
+                'stat': 'Statistics',
+                'math-ph': 'Mathematical Physics',
+                'eess': 'Engineering',
+                'q-bio': 'Biology',
+                'econ': 'Economics',
+                'q-fin': 'Finance',
+                'gr-qc': 'General Relativity',
+                'hep-ex': 'Particle Physics',
+                'hep-lat': 'Particle Physics',
+                'hep-ph': 'Particle Physics',
+                'hep-th': 'Particle Physics',
+                'nlin': 'Nonlinear Sciences',
+                'nucl-ex': 'Nuclear Physics',
+                'nucl-th': 'Nuclear Physics'
+            };
+
+            function calculateCentroids(data) {
+                // Group by the 9 major scientific families
+                const groups = d3.group(data, d => {
+                    const category = d.primary_category;
+                    const fullDomain = category.split('.')[0]; // Keep full domain like "astro-ph", "cond-mat"
+                    return domainToFamily[fullDomain] || domainToFamily[fullDomain.split('-')[0]] || 'Other Sciences';
+                });
+
+                centroids = Array.from(groups.entries()).map(([family, points]) => {
+                    // Calculate local density for each point
+                    const densities = points.map(point => {
+                        const neighbors = points.filter(p => {
+                            const distance = Math.sqrt(
+                                Math.pow(p.x - point.x, 2) + Math.pow(p.y - point.y, 2)
+                            );
+                            return distance < 0.1; // Rayon de voisinage
+                        });
+                        return neighbors.length; // Densité = nombre de voisins
+                    });
+
+                    // Centroid pondéré par la densité
+                    const totalWeight = d3.sum(densities);
+                    const x = d3.sum(points, (d, i) => d.x * densities[i]) / totalWeight;
+                    const y = d3.sum(points, (d, i) => d.y * densities[i]) / totalWeight;
+
+                    // Maximum density point for information
+                    const maxDensityIndex = d3.maxIndex(densities);
+                    const densityCenter = points[maxDensityIndex];
+
+                    return {
+                        category: family,
+                        x,
+                        y,
+                        count: points.length,
+                        density: totalWeight / points.length, // Densité moyenne
+                        maxDensityPoint: densityCenter
+                    };
+                }).filter(centroid => centroid.count >= 100); // Only show top 9 families
+            }
+
+            function updateScales(data) {
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                isDarkMode = !!isDark;
+
+                width = container.clientWidth || 800; height = Math.max(260, Math.round(width / 3)); svg.attr('width', width).attr('height', height);
+                const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+                const xExtent = d3.extent(data, d => d.x);
+                const yExtent = d3.extent(data, d => d.y);
+                x.domain([xExtent[0], xExtent[1]]).range([0, innerWidth]).nice();
+                y.domain([yExtent[0], yExtent[1]]).range([innerHeight, 0]).nice();
+
+                return { innerWidth, innerHeight };
+            }
+
+            // Helper function to shuffle array with fixed seed
+            function shuffleArray(array, seed = 5) {
+                const shuffled = [...array];
+                // Simple seeded random number generator
+                let rng = seed;
+                const seededRandom = () => {
+                    rng = (rng * 9301 + 49297) % 233280;
+                    return rng / 233280;
+                };
+
+                for (let i = shuffled.length - 1; i > 0; i--) {
+                    const j = Math.floor(seededRandom() * (i + 1));
+                    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+                }
+                return shuffled;
+            }
+
+            function refreshPalette() {
+                try {
+                    const cats = categories && categories.length ? categories.length : 6;
+                    if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+                        const arr = window.ColorPalettes.getColors('categorical', cats) || [];
+                        if (arr && arr.length) {
+                            // Randomize color order
+                            const shuffledColors = shuffleArray(arr);
+                            color.range(shuffledColors);
+                            return;
+                        }
+                    }
+                    // fallback with randomization
+                    const fallbackColors = (d3.schemeTableau10 ? d3.schemeTableau10 : ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ab']).slice(0, cats);
+                    const shuffledFallback = shuffleArray(fallbackColors);
+                    color.range(shuffledFallback);
+                } catch {
+                    const cats = categories && categories.length ? categories.length : 6;
+                    const fallbackColors = (d3.schemeTableau10 ? d3.schemeTableau10 : ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ab']).slice(0, cats);
+                    const shuffledFallback = shuffleArray(fallbackColors);
+                    color.range(shuffledFallback);
+                }
+                try { if (data && data.length) draw(); } catch { }
+            }
+
+            function draw() {
+                if (!data || !data.length) return;
+                const { innerWidth, innerHeight } = updateScales(data);
+                const fillFor = d => {
+                    const category = d.primary_category;
+                    // Extract main prefix - take everything before first dot
+                    const mainCategory = category.split('.')[0];
+                    return color(mainCategory);
+                };
+
+                // Calculate centroids
+                calculateCentroids(data);
+
+                // Points
+                const dots = gDots.selectAll('circle.dot').data(data, (d, i) => d.id || i);
+                dots.enter().append('circle').attr('class', 'dot')
+                    .attr('cx', d => x(d.x)).attr('cy', d => y(d.y)).attr('r', radius())
+                    .attr('fill', fillFor).attr('fill-opacity', 0.85)
+                    .attr('stroke', d => getDotStrokeColor(fillFor(d))).attr('stroke-width', '0.75px')
+                    .on('mouseenter', function (ev, d) {
+                        d3.select(this).style('stroke', 'var(--text-color)').style('stroke-width', '1.5px').attr('fill-opacity', 1);
+                        const swatch = `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="5" fill="${fillFor(d)}" /></svg>`;
+                        // Keep title as is, let CSS handle truncation
+                        const title = d.title || 'Untitled Paper';
+
+                        // Format authors nicely
+                        const authorsText = d.authors && d.authors.length > 0 ?
+                            (d.authors.length <= 3 ? d.authors.join(', ') : `${d.authors.slice(0, 2).join(', ')} et al. (${d.authors.length} authors)`) :
+                            'Unknown authors';
+
+                        // Get abstract if available, let CSS handle truncation with line-clamp
+                        const abstract = d.abstract || 'No abstract available';
+
+                        // Extract arXiv ID if available
+                        const arxivId = d.url ? d.url.match(/abs\/([^\/]+)$/)?.[1] || '' : '';
+
+                        tipInner.innerHTML = `
+              <div class="paper-header">
+                <div class="paper-title">${title}</div>
+                <div class="paper-meta">
+                  <div class="paper-category">
+                    ${swatch}
+                    <span>${d.primary_category}</span>
+                  </div>
+                  <div class="paper-badges">
+                    ${arxivId ? `<span class="paper-id">${arxivId}</span>` : ''}
+                  </div>
+                </div>
+                <div class="paper-authors">${authorsText}</div>
+              </div>
+              <div class="paper-abstract">${abstract}</div>`;
+                        tip.style.opacity = '1';
+                    })
+                    .on('mousemove', function (ev) { const [mx, my] = d3.pointer(ev, container); const ox = 12, oy = 12; tip.style.transform = `translate(${Math.round(mx + ox)}px, ${Math.round(my + oy)}px)`; })
+                    .on('mouseleave', function (ev, d) { tip.style.opacity = '0'; tip.style.transform = 'translate(-9999px, -9999px)'; d3.select(this).style('stroke', getDotStrokeColor(fillFor(d))).style('stroke-width', '0.75px').attr('fill-opacity', 0.85); })
+                    .on('click', function (ev, d) { if (d.url) window.open(d.url, '_blank'); })
+                    .merge(dots)
+                    .transition().duration(180)
+                    .attr('cx', d => x(d.x)).attr('cy', d => y(d.y)).attr('r', radius())
+                    .attr('fill', fillFor).attr('fill-opacity', 0.85)
+                    .attr('stroke', d => getDotStrokeColor(fillFor(d))).attr('stroke-width', '0.75px');
+                dots.exit().remove();
+
+                // Centroids with labels (d3-scatter style)
+                const nodes = centroids.map((c) => ({
+                    category: c.category,
+                    count: c.count,
+                    targetX: x(c.x),
+                    targetY: y(c.y),
+                    x: x(c.x),
+                    y: y(c.y),
+                    width: Math.max(18, (String(c.category || '').length || 6) * 11),
+                    height: 16
+                }));
+
+                if (nodes.length > 1) {
+                    const sim = d3.forceSimulation(nodes)
+                        .force('x', d3.forceX((d) => d.targetX).strength(0.9))
+                        .force('y', d3.forceY((d) => d.targetY).strength(0.9))
+                        .force('collide', d3.forceCollide((d) => Math.hypot(d.width / 2, d.height / 2) + 15))
+                        .stop();
+                    for (let i = 0; i < 650; i++) sim.tick();
+                    const maxOffset = 45;
+                    nodes.forEach((n) => {
+                        const dx = n.x - n.targetX, dy = n.y - n.targetY; const dist = Math.hypot(dx, dy);
+                        if (dist > maxOffset && dist > 0) { const s = maxOffset / dist; n.x = n.targetX + dx * s; n.y = n.targetY + dy * s; }
+                    });
+                }
+
+                const labels = gCentroids.selectAll('g.centroid').data(nodes, d => d.category || 'Unknown');
+                const enter = labels.enter().append('g').attr('class', 'centroid').attr('pointer-events', 'none');
+                enter.append('text').attr('class', 'label-bg').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle');
+                enter.append('text').attr('class', 'label-fg').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle');
+                const merged = enter.merge(labels);
+                merged
+                    .transition().duration(180)
+                    .attr('transform', d => `translate(${Math.round(d.x)}, ${Math.round(d.y)})`)
+                    .each(function (d) {
+                        const base = getFamilyColor(d.category || 'Unknown');
+                        const bgNode = this.querySelector('text.label-bg');
+                        const fgNode = this.querySelector('text.label-fg');
+                        if (bgNode) {
+                            bgNode.textContent = getCategoryLabel(d.category);
+                            bgNode.style.setProperty('fill', "var(--page-bg)", 'important');
+                            bgNode.style.setProperty('stroke', "var(--page-bg)");
+                            bgNode.style.setProperty('stroke-width', '8px');
+                            bgNode.style.setProperty('paint-order', 'stroke fill');
+                            bgNode.style.setProperty('font-weight', '800');
+                            bgNode.style.setProperty('font-size', '16px');
+                        }
+                        if (fgNode) {
+                            fgNode.textContent = getCategoryLabel(d.category);
+                            fgNode.style.setProperty('fill', base, 'important');
+                            fgNode.style.setProperty('font-weight', '800');
+                            fgNode.style.setProperty('font-size', '16px');
+                        }
+                    });
+                labels.exit().remove();
+            }
+
+            // Load data
+            let mountEl = container;
+            while (mountEl && !mountEl.getAttribute?.('data-datafiles') && !mountEl.getAttribute?.('data-config')) {
+                mountEl = mountEl.parentElement;
+            }
+            let providedData = null;
+            try {
+                const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
+                if (attr && attr.trim()) {
+                    providedData = attr.trim();
+                }
+            } catch (_) { }
+            const DEFAULT_JSON = '/data/data.json';
+            const ensureDataPrefix = (p) => {
+                if (typeof p !== 'string' || !p) return p;
+                return p.includes('/') ? p : `/data/${p}`;
+            };
+            const JSON_PATHS = providedData ? [ensureDataPrefix(providedData)] : [
+                DEFAULT_JSON,
+                './assets/data/data.json',
+                '../assets/data/data.json',
+                '../../assets/data/data.json'
+            ];
+            const fetchFirstAvailableJson = async (paths) => {
+                for (const p of paths) { try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) return await r.json(); } catch (_) { } }
+                throw new Error('JSON not found: data.json');
+            };
+
+            fetchFirstAvailableJson(JSON_PATHS).then(rawData => {
+                // Show only 1 point out of 5 for performance
+                data = rawData.filter((_, index) => index % 1 === 0);
+                console.log(`📊 Affichage de ${data.length} points (1 sur 1) sur ${rawData.length} total`);
+                // Extract main prefixes (math, cs, physics, etc.)
+                categories = Array.from(new Set(data.map(d => {
+                    const category = d.primary_category;
+                    // For categories like "math-ph", take only "math"
+                    if (category.includes('-')) {
+                        return category.split('-')[0];
+                    }
+                    // For categories like "cs.AI", take only "cs"
+                    if (category.includes('.')) {
+                        return category.split('.')[0];
+                    }
+                    // Otherwise, return the complete category
+                    return category;
+                }).filter(Boolean)));
+                color.domain(categories);
+                refreshPalette();
+                draw();
+            }).catch(e => {
+                console.error('Failed to load data:', e);
+                gRoot.append('text').attr('x', width / 2).attr('y', height / 2).attr('text-anchor', 'middle').attr('fill', '#e74c3c').text('Failed to load data');
+            });
+
+            // Resize
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(() => draw());
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', draw);
+            }
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+        } else {
+            ensureD3(bootstrap);
+        }
+    })();
+</script>

app/src/content/embeds/arxiv/fetch_arxiv_api.py

@@ -0,0 +1,270 @@
+#!/usr/bin/env python3
+"""
+Script to retrieve papers from the arXiv API
+Optimized for natural representation of scientific domains
+"""
+
+import requests
+import xml.etree.ElementTree as ET
+import json
+import time
+import os
+from urllib.parse import quote
+from datetime import datetime, timedelta
+from collections import Counter
+import random
+
+class ArxivFetcher:
+    def __init__(self):
+        self.base_url = "http://export.arxiv.org/api/query"
+        self.delay = 3  # Delay between requests (respecting API limits)
+        
+    def fetch_by_category(self, categories, max_per_category=500, total_max=15000):
+        """Retrieve papers by category with global limit"""
+        print(f"🔍 Retrieval by category (max {max_per_category} per cat, {total_max} total)")
+        
+        all_papers = []
+        
+        for i, category in enumerate(categories):
+            if len(all_papers) >= total_max:
+                break
+                
+            print(f"  [{i+1}/{len(categories)}] {category}...")
+            
+            # Dynamic calculation of number to retrieve
+            remaining = total_max - len(all_papers)
+            fetch_count = min(max_per_category, remaining)
+            
+            papers = self._fetch_category(category, fetch_count)
+            all_papers.extend(papers)
+            
+            print(f"    ✅ {len(papers)} papers retrieved (total: {len(all_papers)})")
+            
+            # Delay between categories
+            if i < len(categories) - 1:
+                time.sleep(self.delay)
+        
+        return all_papers[:total_max]
+    
+    def fetch_recent_papers(self, days_back=30, max_results=15000):
+        """Retrieve recent papers from the last days"""
+        print(f"📅 Retrieving papers from the last {days_back} days")
+        
+        # End date: today
+        end_date = datetime.now()
+        # Start date: X days ago
+        start_date = end_date - timedelta(days=days_back)
+        
+        # Format arXiv: YYYYMMDDHHMM
+        date_query = f"submittedDate:[{start_date.strftime('%Y%m%d%H%M')} TO {end_date.strftime('%Y%m%d%H%M')}]"
+        
+        return self._fetch_with_query(date_query, max_results)
+    
+    def _fetch_category(self, category, max_results):
+        """Retrieve papers from a specific category"""
+        query = f"cat:{category}"
+        return self._fetch_with_query(query, max_results)
+    
+    def _fetch_with_query(self, query, max_results):
+        """Generic method to retrieve with a query"""
+        papers = []
+        start = 0
+        batch_size = min(1000, max_results)  # arXiv limits to 1000 per request
+        
+        while len(papers) < max_results:
+            remaining = max_results - len(papers)
+            current_batch = min(batch_size, remaining)
+            
+            params = {
+                'search_query': query,
+                'start': start,
+                'max_results': current_batch,
+                'sortBy': 'submittedDate',
+                'sortOrder': 'descending'
+            }
+            
+            try:
+                response = requests.get(self.base_url, params=params, timeout=30)
+                response.raise_for_status()
+                
+                batch_papers = self._parse_response(response.text)
+                if not batch_papers:
+                    print(f"    ⚠️  No results for start={start}")
+                    break
+                
+                papers.extend(batch_papers)
+                start += len(batch_papers)
+                
+                print(f"    📄 Batch {len(batch_papers)} papers (total: {len(papers)})")
+                
+                # Delay between requests
+                time.sleep(self.delay)
+                
+            except Exception as e:
+                print(f"    ❌ Error: {e}")
+                break
+        
+        return papers[:max_results]
+    
+    def _parse_response(self, xml_content):
+        """Parse arXiv XML response"""
+        papers = []
+        
+        try:
+            root = ET.fromstring(xml_content)
+            
+            # arXiv Namespace
+            ns = {'atom': 'http://www.w3.org/2005/Atom',
+                  'arxiv': 'http://arxiv.org/schemas/atom'}
+            
+            entries = root.findall('atom:entry', ns)
+            
+            for entry in entries:
+                try:
+                    # ID arXiv
+                    arxiv_id = entry.find('atom:id', ns).text.split('/')[-1]
+                    
+                    # Titre
+                    title = entry.find('atom:title', ns).text.strip()
+                    title = ' '.join(title.split())  # Clean spaces
+                    
+                    # Résumé
+                    summary = entry.find('atom:summary', ns).text.strip()
+                    summary = ' '.join(summary.split())[:500]  # Limit size
+                    
+                    # Auteurs
+                    authors = []
+                    for author in entry.findall('atom:author', ns):
+                        name = author.find('atom:name', ns)
+                        if name is not None:
+                            authors.append(name.text.strip())
+                    
+                    # Catégories
+                    categories = []
+                    primary_category = None
+                    
+                    for category in entry.findall('atom:category', ns):
+                        term = category.get('term')
+                        if term:
+                            categories.append(term)
+                    
+                    # Primary category
+                    primary_cat = entry.find('arxiv:primary_category', ns)
+                    if primary_cat is not None:
+                        primary_category = primary_cat.get('term')
+                    elif categories:
+                        primary_category = categories[0]
+                    
+                    # Publication date
+                    published = entry.find('atom:published', ns)
+                    published_date = published.text if published is not None else None
+                    
+                    paper = {
+                        'id': arxiv_id,
+                        'title': title,
+                        'summary': summary,
+                        'authors': authors,
+                        'categories': categories,
+                        'primary_category': primary_category,
+                        'published': published_date
+                    }
+                    
+                    papers.append(paper)
+                    
+                except Exception as e:
+                    print(f"    ⚠️  Error parsing entry: {e}")
+                    continue
+            
+        except ET.ParseError as e:
+            print(f"❌ XML parsing error: {e}")
+        
+        return papers
+
+def save_papers(papers, filename):
+    """Save papers to JSON"""
+    with open(filename, 'w', encoding='utf-8') as f:
+        json.dump(papers, f, indent=2, ensure_ascii=False)
+    
+    size_mb = os.path.getsize(filename) / 1024 / 1024
+    print(f"💾 Saved: {filename} ({len(papers)} papers, {size_mb:.1f} MB)")
+
+def main():
+    """Main arXiv data retrieval"""
+    print("🚀 ArXiv Data Fetcher - Version Optimisée")
+    print("=" * 50)
+    
+    fetcher = ArxivFetcher()
+    
+    # Simple approach: 1 month of recent data
+    print("\n📅 SIMPLE APPROACH: 1 month of recent data")
+    print("🎯 Objective: retrieve everything available from the last month")
+    print("⚡ Without representativeness constraint - just natural data")
+    
+    # Try with different periods to find data
+    monthly_papers = None
+    for days in [30, 60, 90, 120]:  # 1, 2, 3, 4 months
+        print(f"\n🔍 Attempt: {days} days...")
+        monthly_papers = fetcher.fetch_recent_papers(days_back=days, max_results=15000)
+        if monthly_papers and len(monthly_papers) > 1000:
+            print(f"✅ {len(monthly_papers)} papers found over {days} days")
+            break
+        elif monthly_papers:
+            print(f"⚠️  Only {len(monthly_papers)} papers over {days} days")
+        else:
+            print(f"❌ No papers found over {days} days")
+    
+    if not monthly_papers:
+        print("\n🔄 Fallback: retrieval by popular categories")
+        # If no recent data, just take popular categories
+        popular_categories = [
+            'cs.LG', 'cs.AI', 'cs.CV', 'cs.CL', 'cs.CR', 'cs.RO', 'cs.HC',
+            'physics.comp-ph', 'physics.data-an', 'physics.optics',
+            'math.ST', 'math.NA', 'math.OC', 'math.PR',
+            'stat.ML', 'stat.ME', 'stat.AP',
+            'eess.AS', 'eess.IV', 'eess.SP',
+            'q-bio.QM', 'q-bio.BM', 'astro-ph.CO'
+        ]
+        
+        monthly_papers = fetcher.fetch_by_category(
+            categories=popular_categories,
+            max_per_category=500,
+            total_max=15000
+        )
+    
+    if monthly_papers:
+        save_papers(monthly_papers, "arxiv_monthly_papers.json")
+        
+        # Statistiques finales
+        from collections import Counter
+        
+        # Check paper structure
+        sample_keys = list(monthly_papers[0].keys()) if monthly_papers else []
+        category_key = 'primary_category' if 'primary_category' in sample_keys else 'categories'
+        
+        domains = []
+        for paper in monthly_papers:
+            if category_key in paper:
+                cat = paper[category_key]
+                if isinstance(cat, list) and cat:
+                    domains.append(cat[0].split('.')[0])
+                elif isinstance(cat, str):
+                    domains.append(cat.split('.')[0])
+        
+        domain_counts = Counter(domains)
+        
+        print(f"\n📊 Natural distribution ({len(monthly_papers)} papers):")
+        for domain, count in domain_counts.most_common():
+            percentage = count / len(monthly_papers) * 100
+            print(f"   {domain}: {count} papers ({percentage:.1f}%)")
+    else:
+        print("❌ Complete retrieval failure")
+    
+    print("\n🎉 Retrieval completed!")
+    print("📁 Files created:")
+    for filename in ["arxiv_monthly_papers.json"]:
+        if os.path.exists(filename):
+            size = os.path.getsize(filename) / 1024 / 1024  # MB
+            print(f"   - {filename} ({size:.1f} MB)")
+
+if __name__ == "__main__":
+    main()

app/src/content/embeds/arxiv/generate_umap.py

@@ -0,0 +1,329 @@
+#!/usr/bin/env python3
+"""
+UMAP Generator for arXiv papers
+Creates 2D and 3D projections with density-weighted centroids
+"""
+
+import json
+import numpy as np
+import pandas as pd
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.decomposition import TruncatedSVD
+import umap
+import os
+import shutil
+from datetime import datetime
+from collections import Counter
+
+def load_papers(filename="arxiv_monthly_papers.json"):
+    """Load papers from JSON file"""
+    if not os.path.exists(filename):
+        print(f"❌ File {filename} not found!")
+        print("💡 Run fetch_arxiv_api.py first")
+        return None
+    
+    with open(filename, 'r', encoding='utf-8') as f:
+        papers = json.load(f)
+    
+    print(f"📚 {len(papers)} papers loaded from {filename}")
+    return papers
+
+def preprocess_papers(papers, sample_rate=5):
+    """Preprocess papers and sample if necessary"""
+    print(f"🔄 Preprocessing papers...")
+    
+    # Filter papers with missing data
+    valid_papers = []
+    for paper in papers:
+        if (paper.get('title') and 
+            paper.get('summary') and 
+            paper.get('primary_category')):
+            valid_papers.append(paper)
+    
+    print(f"✅ {len(valid_papers)} valid papers after filtering")
+    
+    # Sampling for performance (1 out of N)
+    if sample_rate > 1:
+        sampled_papers = valid_papers[::sample_rate]
+        print(f"📊 Sampling 1/{sample_rate}: {len(sampled_papers)} papers retained")
+        return sampled_papers
+    
+    return valid_papers
+
+def create_embeddings(papers, max_features=5000, n_components=50):
+    """Create TF-IDF + SVD embeddings of papers"""
+    print(f"🔢 Creating embeddings (max_features={max_features}, n_components={n_components})")
+    
+    # Combine title and summary
+    texts = []
+    for paper in papers:
+        title = paper.get('title', '').strip()
+        summary = paper.get('summary', '').strip()
+        combined = f"{title} {summary}"
+        texts.append(combined)
+    
+    # TF-IDF
+    print("  📝 TF-IDF vectorization...")
+    tfidf = TfidfVectorizer(
+        max_features=max_features,
+        stop_words='english',
+        ngram_range=(1, 2),
+        min_df=2,
+        max_df=0.95
+    )
+    
+    tfidf_matrix = tfidf.fit_transform(texts)
+    print(f"  ✅ TF-IDF: {tfidf_matrix.shape}")
+    
+    # Dimensionality reduction with SVD
+    print(f"  🔄 SVD reduction to {n_components} dimensions...")
+    svd = TruncatedSVD(n_components=n_components, random_state=42)
+    embeddings = svd.fit_transform(tfidf_matrix)
+    
+    print(f"  ✅ Final embeddings: {embeddings.shape}")
+    print(f"  📊 Explained variance: {svd.explained_variance_ratio_.sum():.3f}")
+    
+    return embeddings
+
+def map_to_families(papers):
+    """Map categories to 9 main scientific families"""
+    
+    # Mapping to 9 scientific families
+    domain_to_family = {
+        'cs': 'Computer Science',
+        'math': 'Mathematics', 
+        'physics': 'Physics',
+        'stat': 'Statistics',
+        'q-bio': 'Biology',
+        'eess': 'Engineering',
+        'astro-ph': 'Astrophysics',
+        'cond-mat': 'Condensed Matter',
+        'nucl': 'Nuclear Physics'
+    }
+    
+    families = []
+    for paper in papers:
+        primary_cat = paper.get('primary_category', '')
+        if primary_cat:
+            domain = primary_cat.split('.')[0]
+            family = domain_to_family.get(domain, 'Other')
+        else:
+            family = 'Other'
+        families.append(family)
+    
+    family_counts = Counter(families)
+    print(f"📊 Distribution by family:")
+    for family, count in family_counts.most_common():
+        print(f"   {family}: {count} papers")
+    
+    return families
+
+def generate_umap_projection(embeddings, families, n_neighbors=50, min_dist=0.1, spread=0.5, n_components=2):
+    """Generate UMAP projection"""
+    print(f"🎯 UMAP projection (n_neighbors={n_neighbors}, min_dist={min_dist}, spread={spread}, n_components={n_components})")
+    
+    # Configuration UMAP
+    reducer = umap.UMAP(
+        n_neighbors=n_neighbors,
+        min_dist=min_dist, 
+        spread=spread,
+        n_components=n_components,
+        random_state=42,
+        metric='cosine'
+    )
+    
+    # Projection
+    projection = reducer.fit_transform(embeddings)
+    print(f"✅ Projection UMAP: {projection.shape}")
+    
+    return projection
+
+def calculate_density_weighted_centroids(projection, families, families_list):
+    """Calculate density-weighted centroids"""
+    print("🎯 Calculating density-weighted centroids...")
+    
+    centroids = {}
+    
+    for family in families_list:
+        # Points of this family
+        family_mask = np.array(families) == family
+        family_points = projection[family_mask]
+        
+        if len(family_points) < 30:  # Filter families too small
+            continue
+            
+        if projection.shape[1] == 2:  # 2D
+            # Calculate 2D density
+            densities = []
+            for point in family_points:
+                distances = np.linalg.norm(family_points - point, axis=1)
+                density = np.sum(distances < np.percentile(distances, 20))  # Local density
+                densities.append(density)
+
+            densities = np.array(densities)
+            weights = densities / densities.sum()
+
+            # Weighted centroid
+            centroid_x = np.sum(family_points[:, 0] * weights)
+            centroid_y = np.sum(family_points[:, 1] * weights)
+            
+            centroids[family] = {
+                'x': float(centroid_x),
+                'y': float(centroid_y),
+                'count': len(family_points)
+            }
+            
+        else:  # 3D
+            # Calculate 3D density
+            densities = []
+            for point in family_points:
+                distances = np.linalg.norm(family_points - point, axis=1)
+                density = np.sum(distances < np.percentile(distances, 20))
+                densities.append(density)
+
+            densities = np.array(densities)
+            weights = densities / densities.sum()
+
+            # Weighted centroid
+            centroid_x = np.sum(family_points[:, 0] * weights)
+            centroid_y = np.sum(family_points[:, 1] * weights) 
+            centroid_z = np.sum(family_points[:, 2] * weights)
+            
+            centroids[family] = {
+                'x': float(centroid_x),
+                'y': float(centroid_y), 
+                'z': float(centroid_z),
+                'count': len(family_points)
+            }
+    
+    print(f"✅ {len(centroids)} centroids calculated")
+    return centroids
+
+def save_visualization_data(papers, projection, families, centroids, output_prefix):
+    """Save visualization data"""
+    
+    # Prepare data
+    viz_data = []
+    for i, paper in enumerate(papers):
+        if projection.shape[1] == 2:  # 2D
+            point = {
+                'id': paper.get('id', f'paper_{i}'),
+                'title': paper.get('title', ''),
+                'summary': paper.get('summary', '')[:200] + '...',
+                'authors': ', '.join(paper.get('authors', [])[:3]),  # Max 3 authors
+                'category': paper.get('primary_category', ''),
+                'family': families[i],
+                'x': float(projection[i, 0]),
+                'y': float(projection[i, 1])
+            }
+        else:  # 3D
+            point = {
+                'id': paper.get('id', f'paper_{i}'),
+                'title': paper.get('title', ''),
+                'summary': paper.get('summary', '')[:200] + '...',
+                'authors': ', '.join(paper.get('authors', [])[:3]),
+                'category': paper.get('primary_category', ''),
+                'family': families[i],
+                'x': float(projection[i, 0]),
+                'y': float(projection[i, 1]),
+                'z': float(projection[i, 2])
+            }
+        viz_data.append(point)
+    
+    # Add centroids
+    viz_data_with_centroids = {
+        'points': viz_data,
+        'centroids': centroids,
+        'metadata': {
+            'total_papers': len(papers),
+            'dimensions': projection.shape[1],
+            'families': list(set(families)),
+            'generated': datetime.now().isoformat()
+        }
+    }
+    
+    # Save
+    output_file = f"{output_prefix}.json"
+    with open(output_file, 'w', encoding='utf-8') as f:
+        json.dump(viz_data_with_centroids, f, indent=2, ensure_ascii=False)
+    
+    size_mb = os.path.getsize(output_file) / 1024 / 1024
+    print(f"💾 Data saved: {output_file} ({size_mb:.1f} MB)")
+    
+    return output_file
+
+def main():
+    """Main UMAP generation pipeline"""
+    print("🚀 ArXiv UMAP Generator")
+    print("=" * 40)
+    
+    # 1. Data loading
+    papers = load_papers()
+    if not papers:
+        return
+    
+    # 2. Preprocessing
+    papers = preprocess_papers(papers, sample_rate=5)  # 1 point out of 5
+    
+    # 3. Mapping to families
+    families = map_to_families(papers)
+    families_list = list(set(families))
+    
+    # 4. Embedding creation
+    embeddings = create_embeddings(papers, max_features=3000, n_components=50)
+    
+    # 5. UMAP projection generation
+    
+    # UMAP 2D
+    print("\n🎯 Generating 2D UMAP...")
+    projection_2d = generate_umap_projection(
+        embeddings, families,
+        n_neighbors=50, min_dist=0.8, spread=1.0, n_components=2
+    )
+    
+    centroids_2d = calculate_density_weighted_centroids(projection_2d, families, families_list)
+    
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    output_2d = save_visualization_data(
+        papers, projection_2d, families, centroids_2d,
+        f"arxiv_umap_viz_2d_{timestamp}"
+    )
+    
+    # UMAP 3D
+    print("\n🎯 Generating 3D UMAP...")
+    projection_3d = generate_umap_projection(
+        embeddings, families,
+        n_neighbors=50, min_dist=0.8, spread=1.0, n_components=3
+    )
+    
+    centroids_3d = calculate_density_weighted_centroids(projection_3d, families, families_list)
+    
+    output_3d = save_visualization_data(
+        papers, projection_3d, families, centroids_3d,
+        f"arxiv_umap_viz_3d_{timestamp}"
+    )
+    
+    # Automatic copy to content/assets/data
+    import shutil
+    source_file = output_2d  # Use 2D by default
+    target_dir = "../../assets/data"
+    target_file = os.path.join(target_dir, "data.json")
+    
+    try:
+        # Create directory if necessary
+        os.makedirs(target_dir, exist_ok=True)
+        shutil.copy2(source_file, target_file)
+        print(f"\n✅ AUTOMATIC COPY SUCCESSFUL!")
+        print(f"📁 {source_file} → {target_file}")
+    except Exception as e:
+        print(f"\n⚠️  Automatic copy failed: {e}")
+    
+    print(f"\n🎉 Generation completed!")
+    print(f"📁 Files created:")
+    for f in [output_2d, output_3d]:
+        if os.path.exists(f):
+            size = os.path.getsize(f) / 1024 / 1024
+            print(f"   - {f} ({size:.1f} MB)")
+
+if __name__ == "__main__":
+    main()

app/src/content/embeds/banner.html

@@ -1,267 +1,258 @@
 <div class="d3-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
 <script>
-  (() => {
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let s = document.getElementById('d3-cdn-script');
-      if (!s) {
-        s = document.createElement('script');
-        s.id = 'd3-cdn-script';
-        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
-        document.head.appendChild(s);
-      }
-      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true });
-      if (window.d3) onReady();
-    };
+    (() => {
+        const ensureD3 = (cb) => {
+            if (window.d3 && typeof window.d3.select === 'function') return cb();
+            let s = document.getElementById('d3-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'd3-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.d3) onReady();
+        };
 
-    const bootstrap = () => {
-      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-      const container = (mount && mount.querySelector && mount.querySelector('.d3-galaxy')) || document.querySelector('.d3-galaxy');
-      if (!container) return;
-      if (container.dataset) {
-        if (container.dataset.mounted === 'true') return;
-        container.dataset.mounted = 'true';
-      }
-      // Scene params (match previous Plotly ranges)
-      const cx = 1.5, cy = 0.5;
-      const a = 1.3, b = 0.45;
-      const numPoints = 3000; 
-      const numArms = 3;
-      const numTurns = 2.1;
-      const angleJitter = 0.12;
-      const posNoise = 0.015;
+        const bootstrap = () => {
+            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+            const container = (mount && mount.querySelector && mount.querySelector('.d3-galaxy')) || document.querySelector('.d3-galaxy');
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+            // Scene params (match previous Plotly ranges)
+            const cx = 1.5, cy = 0.5;
+            const a = 1.3, b = 0.45;
+            const numPoints = 3000;
+            const numArms = 3;
+            const numTurns = 2.1;
+            const angleJitter = 0.12;
+            const posNoise = 0.015;
 
-      // Generate spiral + bulge
-      const twoPi = Math.PI * 2;
-      const t = Float64Array.from({ length: numPoints }, () => Math.random() * (twoPi * numTurns));
-      const armIndices = Int16Array.from({ length: numPoints }, () => Math.floor(Math.random() * numArms));
-      const armOffsets = Float64Array.from(armIndices, (k) => k * (twoPi / numArms));
-      const theta = Float64Array.from(t, (tv, i) => tv + armOffsets[i] + d3.randomNormal.source(Math.random)(0, angleJitter)());
-      const rNorm = Float64Array.from(t, (tv) => Math.pow(tv / (twoPi * numTurns), 0.9));
-      const noiseScale = (rn) => posNoise * (0.8 + 0.6 * rn);
-      const noiseX = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
-      const noiseY = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
+            // Circle size settings
+            const minCircleSize = 4;  // minimum diameter in pixels
+            const maxCircleSize = 12; // maximum diameter in pixels
 
-      const xSpiral = Float64Array.from(theta, (th, i) => cx + a * rNorm[i] * Math.cos(th) + noiseX[i]);
-      const ySpiral = Float64Array.from(theta, (th, i) => cy + b * rNorm[i] * Math.sin(th) + noiseY[i]);
+            // Generate spiral + bulge
+            const twoPi = Math.PI * 2;
+            const t = Float64Array.from({ length: numPoints }, () => Math.random() * (twoPi * numTurns));
+            const armIndices = Int16Array.from({ length: numPoints }, () => Math.floor(Math.random() * numArms));
+            const armOffsets = Float64Array.from(armIndices, (k) => k * (twoPi / numArms));
+            const theta = Float64Array.from(t, (tv, i) => tv + armOffsets[i] + d3.randomNormal.source(Math.random)(0, angleJitter)());
+            const rNorm = Float64Array.from(t, (tv) => Math.pow(tv / (twoPi * numTurns), 0.9));
+            const noiseScale = (rn) => posNoise * (0.8 + 0.6 * rn);
+            const noiseX = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
+            const noiseY = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
 
-      const bulgePoints = Math.floor(0.18 * numPoints);
-      const phiB = Float64Array.from({ length: bulgePoints }, () => twoPi * Math.random());
-      const rB = Float64Array.from({ length: bulgePoints }, () => Math.pow(Math.random(), 2.2) * 0.22);
-      const noiseXB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-      const noiseYB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-      const xBulge = Float64Array.from(phiB, (ph, i) => cx + a * rB[i] * Math.cos(ph) + noiseXB[i]);
-      const yBulge = Float64Array.from(phiB, (ph, i) => cy + b * rB[i] * Math.sin(ph) + noiseYB[i]);
+            const xSpiral = Float64Array.from(theta, (th, i) => cx + a * rNorm[i] * Math.cos(th) + noiseX[i]);
+            const ySpiral = Float64Array.from(theta, (th, i) => cy + b * rNorm[i] * Math.sin(th) + noiseY[i]);
 
-      // Concatenate
-      const X = Array.from(xSpiral).concat(Array.from(xBulge));
-      const Y = Array.from(ySpiral).concat(Array.from(yBulge));
-      const lenSpiral = xSpiral.length;
+            const bulgePoints = Math.floor(0.18 * numPoints);
+            const phiB = Float64Array.from({ length: bulgePoints }, () => twoPi * Math.random());
+            const rB = Float64Array.from({ length: bulgePoints }, () => Math.pow(Math.random(), 2.2) * 0.22);
+            const noiseXB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
+            const noiseYB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
+            const xBulge = Float64Array.from(phiB, (ph, i) => cx + a * rB[i] * Math.cos(ph) + noiseXB[i]);
+            const yBulge = Float64Array.from(phiB, (ph, i) => cy + b * rB[i] * Math.sin(ph) + noiseYB[i]);
 
-      const zSpiral = Array.from(rNorm, (rn) => 1 - rn);
-      const maxRB = rB && rB.length ? (window.d3 && d3.max ? d3.max(rB) : Math.max.apply(null, Array.from(rB))) : 1;
-      const zBulge = Array.from(rB, (rb) => 1 - (maxRB ? rb / maxRB : 0));
-      const Zraw = zSpiral.concat(zBulge);
-      const sizesPx = Zraw.map((z) => (z + 1) * 5); // 5..10 px (diameter)
+            // Concatenate
+            const X = Array.from(xSpiral).concat(Array.from(xBulge));
+            const Y = Array.from(ySpiral).concat(Array.from(yBulge));
+            const lenSpiral = xSpiral.length;
 
-      // Labels (same categories as Python version)
-      const labelOf = (i) => {
-        const z = Zraw[i];
-        if (z < 0.25) return 'smol dot';
-        if (z < 0.5) return 'ok-ish dot';
-        if (z < 0.75) return 'a dot';
-        return 'biiig dot';
-      };
+            const zSpiral = Array.from(rNorm, (rn) => 1 - rn);
+            const maxRB = rB && rB.length ? (window.d3 && d3.max ? d3.max(rB) : Math.max.apply(null, Array.from(rB))) : 1;
+            const zBulge = Array.from(rB, (rb) => 1 - (maxRB ? rb / maxRB : 0));
+            const Zraw = zSpiral.concat(zBulge);
+            const sizesPx = Zraw.map((z) => minCircleSize + z * (maxCircleSize - minCircleSize)); // diameter in pixels
 
-      // Sort by size ascending for z-index: small first, big last
-      const idx = d3.range(X.length).sort((i, j) => sizesPx[i] - sizesPx[j]);
+            // Labels (same categories as Python version)
+            const labelOf = (i) => {
+                const z = Zraw[i];
+                if (z < 0.25) return 'tiny star';
+                if (z < 0.5) return 'small star';
+                if (z < 0.75) return 'medium star';
+                return 'large star';
+            };
 
-      // Colors: piecewise gradient [0 -> 0.5 -> 1]
-      const c0 = d3.rgb(78, 165, 183);    // rgb(78, 165, 183)
-      const c1 = d3.rgb(206, 192, 250);   // rgb(206, 192, 250)
-      const c2 = d3.rgb(232, 137, 171);   // rgb(232, 137, 171)
-      const interp01 = d3.interpolateRgb(c0, c1);
-      const interp12 = d3.interpolateRgb(c1, c2);
-      const colorFor = (v) => {
-        const t = Math.max(0, Math.min(1, v));
-        return t <= 0.5 ? interp01(t / 0.5) : interp12((t - 0.5) / 0.5);
-      };
+            // Sort by size ascending for z-index: small first, big last
+            const idx = d3.range(X.length).sort((i, j) => sizesPx[i] - sizesPx[j]);
 
-      // Create SVG
-      const svg = d3.select(container).append('svg')
-        .attr('width', '100%')
-        .style('display', 'block')
-        .style('cursor', 'crosshair');
+            // Colors: piecewise gradient [0 -> 0.5 -> 1]
+            const c0 = d3.rgb(78, 165, 183);    // rgb(78, 165, 183)
+            const c1 = d3.rgb(206, 192, 250);   // rgb(206, 192, 250)
+            const c2 = d3.rgb(232, 137, 171);   // rgb(232, 137, 171)
+            const interp01 = d3.interpolateRgb(c0, c1);
+            const interp12 = d3.interpolateRgb(c1, c2);
+            const colorFor = (v) => {
+                const t = Math.max(0, Math.min(1, v));
+                return t <= 0.5 ? interp01(t / 0.5) : interp12((t - 0.5) / 0.5);
+            };
 
-      const render = () => {
-        const width = container.clientWidth || 800;
-        const height = Math.max(260, Math.round(width / 3)); // keep ~3:1, min height
-        svg.attr('width', width).attr('height', height);
+            // Create SVG
+            const svg = d3.select(container).append('svg')
+                .attr('width', '100%')
+                .style('display', 'block')
+                .style('cursor', 'crosshair');
 
-        const xScale = d3.scaleLinear().domain([0, 3]).range([0, width]);
-        const yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
+            const render = () => {
+                const width = container.clientWidth || 800;
+                const height = Math.max(260, Math.round(width / 3)); // keep ~3:1, min height
+                svg.attr('width', width).attr('height', height);
 
-        // Subtle stroke color depending on theme
-        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-        const strokeColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)';
-        const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
+                const xScale = d3.scaleLinear().domain([0, 3]).range([0, width]);
+                const yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
 
+                // Subtle stroke color depending on theme
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                const strokeColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)';
+                const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
 
-        // Group for points (no blend mode for better print/PDF visibility)
-        const g = svg.selectAll('g.points').data([0]).join('g').attr('class', 'points');
 
-        // Ensure container can host an absolute tooltip
-        container.style.position = container.style.position || 'relative';
-        let tip = container.querySelector('.d3-tooltip');
-        let tipInner;
-        if (!tip) {
-          tip = document.createElement('div');
-          tip.className = 'd3-tooltip';
-          Object.assign(tip.style, {
-            position: 'absolute',
-            top: '0px',
-            left: '0px',
-            transform: 'translate(-9999px, -9999px)',
-            pointerEvents: 'none',
-            padding: '10px 12px',
-            borderRadius: '12px',
-            fontSize: '12px',
-            lineHeight: '1.35',
-            border: '1px solid var(--border-color)',
-            background: 'var(--surface-bg)',
-            color: 'var(--text-color)',
-            boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
-            opacity: '0',
-            transition: 'opacity .12s ease',
-            backdropFilter: 'saturate(1.12) blur(8px)',
-            zIndex: '20'
-          });
-          tipInner = document.createElement('div');
-          tipInner.className = 'd3-tooltip__inner';
-          Object.assign(tipInner.style, {
-            textAlign: 'left',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '6px',
-            minWidth: '220px'
-          });
-          tip.appendChild(tipInner);
-          container.appendChild(tip);
-        } else {
-          tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
-        }
+                // Group for points (no blend mode for better print/PDF visibility)
+                const g = svg.selectAll('g.points').data([0]).join('g').attr('class', 'points');
 
-        // Final filter: remove small dots very close to the galaxy center (after placement)
-        const centerHoleRadius = 0.48; // elliptical radius threshold
-        const smallSizeThreshold = 7.5; // same notion as Python size cut
-        const rTotal = idx.map((i) => Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2));
-        const idxFiltered = idx.filter((i, k) => !(rTotal[k] <= centerHoleRadius && sizesPx[i] < smallSizeThreshold));
+                // Ensure container can host an absolute tooltip
+                container.style.position = container.style.position || 'relative';
+                let tip = container.querySelector('.d3-tooltip');
+                let tipInner;
+                if (!tip) {
+                    tip = document.createElement('div');
+                    tip.className = 'd3-tooltip';
+                    Object.assign(tip.style, {
+                        position: 'absolute',
+                        top: '0px',
+                        left: '0px',
+                        transform: 'translate(-9999px, -9999px)',
+                        pointerEvents: 'none',
+                        padding: '10px 12px',
+                        borderRadius: '12px',
+                        fontSize: '12px',
+                        lineHeight: '1.35',
+                        border: '1px solid var(--border-color)',
+                        background: 'var(--surface-bg)',
+                        color: 'var(--text-color)',
+                        boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
+                        opacity: '0',
+                        transition: 'opacity .12s ease',
+                        backdropFilter: 'saturate(1.12) blur(8px)',
+                        zIndex: '20'
+                    });
+                    tipInner = document.createElement('div');
+                    tipInner.className = 'd3-tooltip__inner';
+                    Object.assign(tipInner.style, {
+                        textAlign: 'left',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '6px',
+                        minWidth: '220px'
+                    });
+                    tip.appendChild(tipInner);
+                    container.appendChild(tip);
+                } else {
+                    tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+                }
 
-        const sel = g.selectAll('circle').data(idxFiltered, (i) => i);
-        sel.join(
-          (enter) => enter.append('circle')
-            .attr('cx', (i) => xScale(X[i]))
-            .attr('cy', (i) => yScale(Y[i]))
-            .attr('r', (i) => sizesPx[i] / 2)
-            .attr('fill', (i) => colorFor(Zraw[i]))
-            .attr('fill-opacity', 0.9)
-            .attr('stroke', strokeColor)
-            .attr('stroke-width', 0.4)
-            .on('mouseenter', function(ev, i) {
-              d3.select(this).raise()
-                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                .transition().duration(120).ease(d3.easeCubicOut)
-                .attr('stroke', isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)')
-                .attr('stroke-width', 1.4)
-                .attr('r', (sizesPx[i] / 2) * 1.25)
-                .attr('fill-opacity', 1);
-              const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-              const type = i < lenSpiral ? 'spiral' : 'bulge';
-              const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-              tipInner.innerHTML =
-                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
-              tip.style.opacity = '1';
-            })
-            .on('mousemove', (ev, i) => {
-              const [mx, my] = d3.pointer(ev, container);
-              const offsetX = 10, offsetY = 12;
-              tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
-            })
-            .on('mouseleave', function() {
-              tip.style.opacity = '0';
-              tip.style.transform = 'translate(-9999px, -9999px)';
-              d3.select(this)
-                .style('filter', null)
-                .transition().duration(120).ease(d3.easeCubicOut)
-                .attr('stroke', strokeColor)
-                .attr('stroke-width', 0.4)
-                .attr('r', (i2) => sizesPx[i2] / 2)
-                .attr('fill-opacity', 0.9);
-            }),
-          (update) => update
-            .attr('cx', (i) => xScale(X[i]))
-            .attr('cy', (i) => yScale(Y[i]))
-            .attr('r', (i) => sizesPx[i] / 2)
-            .attr('fill', (i) => colorFor(Zraw[i]))
-            .attr('fill-opacity', 0.9)
-            .attr('stroke', strokeColor)
-            .attr('stroke-width', 0.4)
-            .on('mouseenter', function(ev, i) {
-              d3.select(this).raise()
-                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                .transition().duration(120).ease(d3.easeCubicOut)
-                .attr('stroke', isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)')
-                .attr('stroke-width', 1.4)
-                .attr('r', (sizesPx[i] / 2) * 1.25)
-                .attr('fill-opacity', 1);
-              const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-              const type = i < lenSpiral ? 'spiral' : 'bulge';
-              const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-              tipInner.innerHTML =
-                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
-              tip.style.opacity = '1';
-            })
-            .on('mousemove', (ev, i) => {
-              const [mx, my] = d3.pointer(ev, container);
-              const offsetX = 10, offsetY = 12;
-              tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
-            })
-            .on('mouseleave', function() {
-              tip.style.opacity = '0';
-              tip.style.transform = 'translate(-9999px, -9999px)';
-              d3.select(this)
-                .style('filter', null)
-                .transition().duration(120).ease(d3.easeCubicOut)
-                .attr('stroke', strokeColor)
-                .attr('stroke-width', 0.4)
-                .attr('r', (i2) => sizesPx[i2] / 2)
-                .attr('fill-opacity', 0.9);
-            })
-        );
-      };
+                // Final filter: remove small dots very close to the galaxy center (after placement)
+                const centerHoleRadius = 0.48; // elliptical radius threshold
+                const smallSizeThreshold = 7.5; // same notion as Python size cut
+                const rTotal = idx.map((i) => Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2));
+                const idxFiltered = idx.filter((i, k) => !(rTotal[k] <= centerHoleRadius && sizesPx[i] < smallSizeThreshold));
 
-      // First render + resize
-      if (window.ResizeObserver) {
-        const ro = new ResizeObserver(() => render());
-        ro.observe(container);
-      } else {
-        window.addEventListener('resize', render);
-      }
-      render();
-    };
+                const sel = g.selectAll('circle').data(idxFiltered, (i) => i);
+                sel.join(
+                    (enter) => enter.append('circle')
+                        .attr('cx', (i) => xScale(X[i]))
+                        .attr('cy', (i) => yScale(Y[i]))
+                        .attr('r', (i) => sizesPx[i] / 2)
+                        .attr('fill', (i) => colorFor(Zraw[i]))
+                        .attr('fill-opacity', 0.9)
+                        .on('mouseenter', function (ev, i) {
+                            d3.select(this).raise()
+                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
+                                .transition().duration(120).ease(d3.easeCubicOut)
+                                .attr('r', (sizesPx[i] / 2) * 1.25)
+                                .attr('fill-opacity', 1);
+                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
+                            const type = i < lenSpiral ? 'spiral' : 'bulge';
+                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
+                            tipInner.innerHTML =
+                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
+                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
+                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
+                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
+                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
+                            tip.style.opacity = '1';
+                        })
+                        .on('mousemove', (ev, i) => {
+                            const [mx, my] = d3.pointer(ev, container);
+                            const offsetX = 10, offsetY = 12;
+                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
+                        })
+                        .on('mouseleave', function () {
+                            tip.style.opacity = '0';
+                            tip.style.transform = 'translate(-9999px, -9999px)';
+                            d3.select(this)
+                                .style('filter', null)
+                                .transition().duration(120).ease(d3.easeCubicOut)
+                                .attr('r', (i2) => sizesPx[i2] / 2)
+                                .attr('fill-opacity', 0.9);
+                        }),
+                    (update) => update
+                        .attr('cx', (i) => xScale(X[i]))
+                        .attr('cy', (i) => yScale(Y[i]))
+                        .attr('r', (i) => sizesPx[i] / 2)
+                        .attr('fill', (i) => colorFor(Zraw[i]))
+                        .attr('fill-opacity', 0.9)
+                        .on('mouseenter', function (ev, i) {
+                            d3.select(this).raise()
+                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
+                                .transition().duration(120).ease(d3.easeCubicOut)
+                                .attr('r', (sizesPx[i] / 2) * 1.25)
+                                .attr('fill-opacity', 1);
+                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
+                            const type = i < lenSpiral ? 'spiral' : 'bulge';
+                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
+                            tipInner.innerHTML =
+                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
+                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
+                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
+                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
+                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
+                            tip.style.opacity = '1';
+                        })
+                        .on('mousemove', (ev, i) => {
+                            const [mx, my] = d3.pointer(ev, container);
+                            const offsetX = 10, offsetY = 12;
+                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
+                        })
+                        .on('mouseleave', function () {
+                            tip.style.opacity = '0';
+                            tip.style.transform = 'translate(-9999px, -9999px)';
+                            d3.select(this)
+                                .style('filter', null)
+                                .transition().duration(120).ease(d3.easeCubicOut)
+                                .attr('r', (i2) => sizesPx[i2] / 2)
+                                .attr('fill-opacity', 0.9);
+                        })
+                );
+            };
 
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-    } else { ensureD3(bootstrap); }
-  })();
-</script>
+            // First render + resize
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(() => render());
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', render);
+            }
+            render();
+        };
 
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+        } else { ensureD3(bootstrap); }
+    })();
+</script>

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

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

app/src/content/embeds/d3-equation-editor.html

@@ -0,0 +1,677 @@
+<div class="d3-equation-editor"></div>
+<style>
+    .d3-equation-editor {
+        position: relative;
+        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
+    }
+
+    .d3-equation-editor .chart-card {
+        background: var(--surface-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 10px;
+        padding: 8px;
+    }
+
+
+    .d3-equation-editor .chart-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: 24px;
+        margin: 16px 0 0 0;
+        flex-wrap: wrap;
+    }
+
+    .d3-equation-editor .controls {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        align-items: flex-start;
+        justify-content: flex-start;
+        width: 100%;
+    }
+
+    .d3-equation-editor .controls .control-group {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    .d3-equation-editor .controls .control-group.equation-group {
+        width: 100%;
+    }
+
+    .d3-equation-editor .controls .input-row {
+        display: flex;
+        gap: 24px;
+        align-items: flex-start;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        width: 100%;
+    }
+
+    .d3-equation-editor .controls .input-row .control-group.equation-group {
+        flex: 1;
+        min-width: 300px;
+    }
+
+    .d3-equation-editor .controls .control-group.domain-group {
+        flex: 0 0 240px;
+    }
+
+    .d3-equation-editor .controls label {
+        font-size: 13px;
+        color: var(--text-color);
+        font-weight: 600;
+        letter-spacing: -0.01em;
+    }
+
+    .d3-equation-editor .controls input[type="text"] {
+        font-size: 17px;
+        font-weight: 400;
+        padding: 14px 18px;
+        border: 1.5px solid var(--primary-color);
+        border-radius: var(--button-radius);
+        background-color: var(--surface-bg);
+        color: var(--text-color);
+        cursor: text;
+        transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        width: 100%;
+        font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
+        line-height: 1.2;
+    }
+
+    [data-theme="dark"] .d3-equation-editor .controls input[type="text"] {
+        border: 1.5px solid var(--primary-color);
+    }
+
+
+    .d3-equation-editor .controls input[type="text"]:hover {
+        border-color: rgba(0, 123, 255, 0.3);
+    }
+
+    .d3-equation-editor .controls input[type="text"]:focus {
+        border-color: rgba(0, 123, 255, 0.6);
+        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+        outline: none;
+    }
+
+    [data-theme="dark"] .d3-equation-editor .controls input[type="text"]:hover {
+        border-color: rgba(10, 132, 255, 0.4);
+    }
+
+    [data-theme="dark"] .d3-equation-editor .controls input[type="text"]:focus {
+        border-color: rgba(10, 132, 255, 0.7);
+        box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
+    }
+
+    .d3-equation-editor .controls input[type="range"] {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 6px;
+        border-radius: 3px;
+        background: var(--border-color);
+        outline: none;
+        cursor: pointer;
+        width: 100%;
+        transition: background 0.2s ease;
+    }
+
+    .d3-equation-editor .controls input[type="range"]:hover {
+        background: var(--muted-color);
+    }
+
+    .d3-equation-editor .controls input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--primary-color);
+        cursor: pointer;
+        border: 2px solid var(--page-bg);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: all 0.2s ease;
+    }
+
+    .d3-equation-editor .controls input[type="range"]::-webkit-slider-thumb:hover {
+        background: var(--primary-color-hover);
+        transform: scale(1.1);
+    }
+
+    .d3-equation-editor .controls input[type="range"]::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--primary-color);
+        cursor: pointer;
+        border: 2px solid var(--page-bg);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: all 0.2s ease;
+    }
+
+    .d3-equation-editor .controls input[type="range"]::-moz-range-thumb:hover {
+        background: var(--primary-color-hover);
+        transform: scale(1.1);
+    }
+
+    .d3-equation-editor .legend-bottom {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+        font-size: 12px;
+        color: var(--text-color);
+    }
+
+    .d3-equation-editor .legend-bottom .legend-title {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--text-color);
+    }
+
+    .d3-equation-editor .legend-bottom .items {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 14px;
+    }
+
+    .d3-equation-editor .legend-bottom .item {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        white-space: nowrap;
+    }
+
+    .d3-equation-editor .legend-bottom .swatch {
+        width: 14px;
+        height: 14px;
+        border-radius: 3px;
+        border: 1px solid var(--border-color);
+        display: inline-block;
+    }
+
+    .d3-equation-editor .axis-label {
+        fill: var(--text-color);
+        font-size: 12px;
+        font-weight: 700;
+    }
+
+    .d3-equation-editor .axes path,
+    .d3-equation-editor .axes line {
+        stroke: var(--axis-color);
+    }
+
+    .d3-equation-editor .axes text {
+        fill: var(--tick-color);
+    }
+
+    .d3-equation-editor .grid line {
+        stroke: var(--grid-color);
+        stroke-width: 1;
+        shape-rendering: crispEdges;
+    }
+
+    .d3-equation-editor .function-curve {
+        fill: none;
+        stroke-width: 2.5;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+    }
+
+    .d3-equation-editor .d3-tooltip {
+        z-index: var(--z-tooltip);
+        backdrop-filter: saturate(1.12) blur(8px);
+    }
+
+    .d3-equation-editor .error-message {
+        color: var(--danger, #b00020);
+        font-size: 11px;
+        margin-top: 4px;
+        font-style: italic;
+    }
+
+    .d3-equation-editor .examples {
+        width: 100%;
+    }
+
+    .d3-equation-editor .examples .button {
+        margin: 0 10px 10px 0;
+    }
+</style>
+<script>
+    (() => {
+        const ensureD3 = (cb) => {
+            if (window.d3 && typeof window.d3.select === 'function') return cb();
+            let s = document.getElementById('d3-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'd3-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => {
+                if (window.d3 && typeof window.d3.select === 'function') cb();
+            };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.d3) onReady();
+        };
+
+        const bootstrap = () => {
+            const scriptEl = document.currentScript;
+            let container = scriptEl ? scriptEl.previousElementSibling : null;
+            if (!(container && container.classList && container.classList.contains('d3-equation-editor'))) {
+                const candidates = Array.from(document.querySelectorAll('.d3-equation-editor'))
+                    .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+                container = candidates[candidates.length - 1] || null;
+            }
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // Controls
+            const controls = document.createElement('div');
+            controls.className = 'controls';
+
+            // Input row (equation + domain)
+            const inputRow = document.createElement('div');
+            inputRow.className = 'input-row';
+
+            // Equation input
+            const groupEquation = document.createElement('div');
+            groupEquation.className = 'control-group equation-group';
+            const labelEquation = document.createElement('label');
+            labelEquation.textContent = 'Equation f(x) =';
+            const inputEquation = document.createElement('input');
+            inputEquation.type = 'text';
+            inputEquation.value = 'sin(x) * exp(-x^2/8) + 0.3*sin(3*x)';
+            inputEquation.placeholder = 'e.g., sin(x)*exp(-x^2/8), x^3 - 3*x, sin(x) + cos(2*x)';
+            groupEquation.appendChild(labelEquation);
+            groupEquation.appendChild(inputEquation);
+
+            // Domain range
+            const groupRange = document.createElement('div');
+            groupRange.className = 'control-group domain-group';
+            const labelRange = document.createElement('label');
+            labelRange.textContent = 'Domain';
+            const inputRange = document.createElement('input');
+            inputRange.type = 'range';
+            inputRange.min = '1';
+            inputRange.max = '10';
+            inputRange.step = '0.5';
+            inputRange.value = '4';
+            const rangeValue = document.createElement('span');
+            rangeValue.style.fontSize = '13px';
+            rangeValue.style.color = 'var(--muted-color)';
+            rangeValue.style.fontWeight = '500';
+            rangeValue.style.marginTop = '4px';
+            rangeValue.textContent = '[-4π, 4π]';
+            groupRange.appendChild(labelRange);
+            groupRange.appendChild(inputRange);
+            groupRange.appendChild(rangeValue);
+
+            inputRow.appendChild(groupEquation);
+            inputRow.appendChild(groupRange);
+
+            // Examples (more focused and pertinent)
+            const examples = document.createElement('div');
+            examples.className = 'examples';
+            const exampleFunctions = [
+                'sin(x) * exp(-x^2/8)',
+                'sin(x) + 0.5*cos(2*x)',
+                'x^3 - 3*x',
+                'sin(x) * exp(-x^2/8) + 0.3*sin(3*x)',
+                'exp(-x^2/2) * cos(4*x)',
+                'sin(x) + sin(3*x)/3 + sin(5*x)/5'
+            ];
+            exampleFunctions.forEach(func => {
+                const btn = document.createElement('button');
+                btn.className = 'button button--ghost';
+                btn.textContent = func;
+                btn.addEventListener('click', () => {
+                    inputEquation.value = func;
+                    updatePlot();
+                });
+                examples.appendChild(btn);
+            });
+
+            controls.appendChild(inputRow);
+            controls.appendChild(examples);
+
+            // Error message
+            const errorMsg = document.createElement('div');
+            errorMsg.className = 'error-message';
+            errorMsg.style.display = 'none';
+
+            // Header (controls only) to be placed after chart
+            const header = document.createElement('div');
+            header.className = 'chart-header';
+            header.appendChild(controls);
+
+            // SVG scaffolding inside a card wrapper
+            const card = document.createElement('div');
+            card.className = 'chart-card';
+            container.appendChild(card);
+            container.appendChild(header);
+            container.appendChild(errorMsg);
+
+            const svg = d3.select(card).append('svg').attr('width', '100%').style('display', 'block');
+            const gRoot = svg.append('g');
+            const gGrid = gRoot.append('g').attr('class', 'grid');
+            const gAxes = gRoot.append('g').attr('class', 'axes');
+            const gCurve = gRoot.append('g').attr('class', 'curve');
+
+            // Tooltip
+            container.style.position = container.style.position || 'relative';
+            let tip = container.querySelector('.d3-tooltip');
+            let tipInner;
+            if (!tip) {
+                tip = document.createElement('div');
+                tip.className = 'd3-tooltip';
+                Object.assign(tip.style, {
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    transform: 'translate(-9999px, -9999px)',
+                    pointerEvents: 'none',
+                    padding: '8px 10px',
+                    borderRadius: 'var(--button-radius)',
+                    fontSize: '12px',
+                    lineHeight: '1.35',
+                    border: '1px solid var(--border-color)',
+                    background: 'var(--surface-bg)',
+                    color: 'var(--text-color)',
+                    boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+                    opacity: '0',
+                    transition: 'opacity .12s ease'
+                });
+                tipInner = document.createElement('div');
+                tipInner.className = 'd3-tooltip__inner';
+                tipInner.style.textAlign = 'left';
+                tip.appendChild(tipInner);
+                container.appendChild(tip);
+            } else {
+                tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+            }
+
+            // State
+            let width = 800, height = 480;
+            const margin = { top: 16, right: 32, bottom: 44, left: 56 };
+            const xScale = d3.scaleLinear();
+            const yScale = d3.scaleLinear();
+            const line = d3.line()
+                .x(d => xScale(d.x))
+                .y(d => yScale(d.y))
+                .curve(d3.curveCardinal);
+
+            // Math parser - improved to handle complex expressions and exponents correctly
+            function safeEval(expr, x) {
+                try {
+                    // First, replace x with the actual value in parentheses for safety
+                    let cleanExpr = expr.replace(/\bx\b/g, `(${x})`);
+
+                    // Replace math functions and constants
+                    cleanExpr = cleanExpr
+                        .replace(/\bsin\b/g, 'Math.sin')
+                        .replace(/\bcos\b/g, 'Math.cos')
+                        .replace(/\btan\b/g, 'Math.tan')
+                        .replace(/\bexp\b/g, 'Math.exp')
+                        .replace(/\blog\b/g, 'Math.log')
+                        .replace(/\babs\b/g, 'Math.abs')
+                        .replace(/\bsqrt\b/g, 'Math.sqrt')
+                        .replace(/\bpi\b/g, 'Math.PI')
+                        .replace(/\be\b/g, 'Math.E');
+
+                    // Handle exponents more carefully - need to preserve operator precedence
+                    // Convert x^n to Math.pow(x, n) for proper precedence
+                    cleanExpr = cleanExpr.replace(/([^*+\-\/\s]+)\^([^*+\-\/\s]+)/g, 'Math.pow($1, $2)');
+
+                    // Handle remaining ^ operators (fallback to **)
+                    cleanExpr = cleanExpr.replace(/\^/g, '**');
+
+                    // Handle implicit multiplication (e.g., 2x -> 2*x, sin(x)cos(x) -> sin(x)*cos(x))
+                    cleanExpr = cleanExpr
+                        .replace(/(\d)(\()/g, '$1*$2')  // 2( -> 2*(
+                        .replace(/(\))(\()/g, '$1*$2')  // )( -> )*(
+                        .replace(/(\))(\d)/g, '$1*$2')  // )2 -> )*2
+                        .replace(/(\d)([a-zA-Z])/g, '$1*$2');  // 2x -> 2*x
+
+                    // Security check: only allow safe mathematical operations
+                    const safePattern = /^[0-9+\-*/.()Math\w\s,]*$/;
+                    const withoutMath = cleanExpr.replace(/Math\.\w+/g, '');
+                    if (!safePattern.test(withoutMath)) {
+                        throw new Error('Invalid expression');
+                    }
+
+                    const result = eval(cleanExpr);
+                    return isFinite(result) ? result : NaN;
+                } catch (e) {
+                    return NaN;
+                }
+            }
+
+            function getColor() {
+                try {
+                    if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+                        return window.ColorPalettes.getColors('categorical', 1)[0];
+                    }
+                } catch (_) { }
+                return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#4e79a7';
+            }
+
+            function updateScales() {
+                width = container.clientWidth || 800;
+                height = Math.max(280, Math.round(width / 3));
+                svg.attr('width', width).attr('height', height);
+                const innerWidth = width - margin.left - margin.right;
+                const innerHeight = height - margin.top - margin.bottom;
+                gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+                const domainSize = parseFloat(inputRange.value);
+                const xDomain = [-domainSize * Math.PI, domainSize * Math.PI];
+                xScale.domain(xDomain).range([0, innerWidth]);
+
+                // Calculate y domain based on current function
+                const equation = inputEquation.value.trim();
+                if (equation) {
+                    const testPoints = d3.range(xDomain[0], xDomain[1], (xDomain[1] - xDomain[0]) / 100);
+                    const yValues = testPoints.map(x => safeEval(equation, x)).filter(y => !isNaN(y) && isFinite(y));
+                    if (yValues.length > 0) {
+                        const yExtent = d3.extent(yValues);
+                        const yPadding = (yExtent[1] - yExtent[0]) * 0.1 || 1;
+                        yScale.domain([yExtent[0] - yPadding, yExtent[1] + yPadding]).range([innerHeight, 0]);
+                    } else {
+                        yScale.domain([-2, 2]).range([innerHeight, 0]);
+                    }
+                } else {
+                    yScale.domain([-2, 2]).range([innerHeight, 0]);
+                }
+
+                // Grid
+                gGrid.selectAll('*').remove();
+                gGrid.selectAll('line.grid-x').data(xScale.ticks(8)).join('line')
+                    .attr('class', 'grid-x')
+                    .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
+                    .attr('y1', 0).attr('y2', innerHeight)
+                    .attr('stroke', 'var(--grid-color)')
+                    .attr('stroke-width', 1)
+                    .attr('shape-rendering', 'crispEdges');
+
+                gGrid.selectAll('line.grid-y').data(yScale.ticks(6)).join('line')
+                    .attr('class', 'grid-y')
+                    .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();
+                gAxes.append('g')
+                    .attr('transform', `translate(0,${innerHeight})`)
+                    .call(d3.axisBottom(xScale).ticks(8).tickFormat(d => {
+                        const val = d / Math.PI;
+                        if (Math.abs(val) < 0.01) return '0';
+                        if (Math.abs(val - 1) < 0.01) return 'π';
+                        if (Math.abs(val + 1) < 0.01) return '-π';
+                        if (Math.abs(val - 0.5) < 0.01) return 'π/2';
+                        if (Math.abs(val + 0.5) < 0.01) return '-π/2';
+                        if (Math.abs(val % 1) < 0.01) return `${Math.round(val)}π`;
+                        return d3.format('.1f')(val) + 'π';
+                    }))
+                    .call(g => {
+                        g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+                        g.selectAll('text').attr('fill', 'var(--tick-color)');
+                    });
+
+                gAxes.append('g')
+                    .call(d3.axisLeft(yScale).ticks(6))
+                    .call(g => {
+                        g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+                        g.selectAll('text').attr('fill', 'var(--tick-color)');
+                    });
+
+                // Axis labels
+                gAxes.append('text')
+                    .attr('class', 'axis-label axis-label--x')
+                    .attr('x', innerWidth / 2)
+                    .attr('y', innerHeight + 44)
+                    .attr('text-anchor', 'middle')
+                    .text('x');
+
+                gAxes.append('text')
+                    .attr('class', 'axis-label axis-label--y')
+                    .attr('text-anchor', 'middle')
+                    .attr('transform', `translate(${-44},${innerHeight / 2}) rotate(-90)`)
+                    .text('f(x)');
+
+                return { innerWidth, innerHeight };
+            }
+
+            function updatePlot() {
+                errorMsg.style.display = 'none';
+                const equation = inputEquation.value.trim();
+
+                if (!equation) {
+                    gCurve.selectAll('*').remove();
+                    return;
+                }
+
+                updateScales();
+
+                // Generate data points
+                const domainSize = parseFloat(inputRange.value);
+                const xDomain = [-domainSize * Math.PI, domainSize * Math.PI];
+                const numPoints = Math.max(200, Math.min(1000, Math.round((xDomain[1] - xDomain[0]) * 50)));
+                const data = [];
+                let hasValidPoints = false;
+                let errorCount = 0;
+
+                for (let i = 0; i <= numPoints; i++) {
+                    const x = xDomain[0] + (i / numPoints) * (xDomain[1] - xDomain[0]);
+                    const y = safeEval(equation, x);
+
+                    if (!isNaN(y) && isFinite(y)) {
+                        data.push({ x, y });
+                        hasValidPoints = true;
+                    } else {
+                        errorCount++;
+                    }
+                }
+
+                if (!hasValidPoints) {
+                    errorMsg.textContent = `Error: unable to evaluate equation "${equation}"`;
+                    errorMsg.style.display = 'block';
+                    gCurve.selectAll('*').remove();
+                    return;
+                }
+
+                if (errorCount > numPoints * 0.5) {
+                    errorMsg.textContent = `Warning: ${errorCount} invalid points out of ${numPoints}`;
+                    errorMsg.style.display = 'block';
+                }
+
+                // Draw the curve
+                const color = getColor();
+                const path = gCurve.selectAll('path.function-curve').data([data]);
+
+                path.enter()
+                    .append('path')
+                    .attr('class', 'function-curve')
+                    .attr('stroke', color)
+                    .merge(path)
+                    .transition()
+                    .duration(150)
+                    .attr('d', line)
+                    .attr('stroke', color);
+
+                path.exit().remove();
+
+                // Hover interaction
+                const overlay = gCurve.selectAll('rect.overlay').data([0]);
+                const { innerWidth, innerHeight } = updateScales();
+
+                overlay.enter()
+                    .append('rect')
+                    .attr('class', 'overlay')
+                    .attr('fill', 'transparent')
+                    .style('cursor', 'crosshair')
+                    .merge(overlay)
+                    .attr('width', innerWidth)
+                    .attr('height', innerHeight)
+                    .on('mousemove', function (event) {
+                        const [mx] = d3.pointer(event, this);
+                        const x = xScale.invert(mx);
+                        const y = safeEval(equation, x);
+
+                        if (!isNaN(y) && isFinite(y)) {
+                            tipInner.innerHTML = `
+                <div><strong>f(${x.toFixed(3)}) = ${y.toFixed(3)}</strong></div>
+                <div style="font-size:11px;color:var(--muted-color);margin-top:2px;">${equation}</div>
+              `;
+                            tip.style.opacity = '1';
+                            const tx = Math.max(0, Math.min(mx + margin.left + 12, (container.clientWidth || 0) - (tip.offsetWidth + 6)));
+                            const ty = Math.max(0, Math.min(yScale(y) + margin.top + 12, (container.clientHeight || 0) - (tip.offsetHeight + 6)));
+                            tip.style.transform = `translate(${Math.round(tx)}px, ${Math.round(ty)}px)`;
+                        }
+                    })
+                    .on('mouseleave', function () {
+                        tip.style.opacity = '0';
+                        tip.style.transform = 'translate(-9999px, -9999px)';
+                    });
+            }
+
+
+            // Event listeners
+            inputEquation.addEventListener('input', updatePlot);
+            inputRange.addEventListener('input', () => {
+                const val = parseFloat(inputRange.value);
+                rangeValue.textContent = `[-${val}π, ${val}π]`;
+                updatePlot();
+            });
+
+            // Initial setup (already done above)
+
+            // Initial render
+            updatePlot();
+
+            // Resize handling
+            const rerender = () => updatePlot();
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(() => rerender());
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', rerender);
+            }
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+        } else {
+            ensureD3(bootstrap);
+        }
+    })();
+</script>

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

@@ -1,74 +1,190 @@
 <div class="line-quad">
-  
+
   <div class="line-quad__grid">
     <div class="quad-cell" data-title="Formatting Filter" data-csv="/data/formatting_filters.csv"></div>
     <div class="quad-cell" data-title="Relevance Filter" data-csv="/data/relevance_filters.csv"></div>
     <div class="quad-cell" data-title="Visual Dependency Filter" data-csv="/data/visual_dependency_filters.csv"></div>
-    <div class="quad-cell" data-title="Image Correspondence Filter" data-csv="/data/image_correspondence_filters.csv"></div>
+    <div class="quad-cell" data-title="Image Correspondence Filter" data-csv="/data/image_correspondence_filters.csv">
+    </div>
   </div>
   <noscript>JavaScript is required to render these charts.</noscript>
 
 </div>
 <style>
-  .line-quad { position: relative; }
+  .line-quad {
+    position: relative;
+  }
+
   /* Axis/tick/grid use global variables from _variables.css */
   /* Apply axis/tick/grid purely via CSS */
   .line-quad .axes path,
-  .line-quad .axes line { stroke: var(--axis-color); }
-  .line-quad .axes text { fill: var(--tick-color); }
-  .line-quad .grid line { stroke: var(--grid-color); }
-  .line-quad__grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
-  @media (max-width: 980px) { .line-quad__grid { grid-template-columns: 1fr; } }
+  .line-quad .axes line {
+    stroke: var(--axis-color);
+  }
+
+  .line-quad .axes text {
+    fill: var(--tick-color);
+  }
+
+  .line-quad .grid line {
+    stroke: var(--grid-color);
+  }
+
+  .line-quad__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  @media (max-width: 980px) {
+    .line-quad__grid {
+      grid-template-columns: 1fr;
+    }
+  }
 
-  
 
-  .quad-cell { border:1px solid var(--border-color); border-radius:10px; background: var(--surface-bg); display:flex; flex-direction:column; position: relative; }
+
+  .quad-cell {
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--surface-bg);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
   /* Stacking order to ensure hover/tooltip overlays are not hidden by neighbors */
-  .line-quad__grid .quad-cell:nth-child(1) { z-index: 4; } /* top-left */
-  .line-quad__grid .quad-cell:nth-child(3) { z-index: 3; } /* bottom-left */
-  .line-quad__grid .quad-cell:nth-child(2) { z-index: 2; } /* top-right */
-  .line-quad__grid .quad-cell:nth-child(4) { z-index: 1; } /* bottom-right */
-  .quad-cell .cell-header { padding:8px 10px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; gap:8px; }
-  .quad-cell .cell-title { font-size: 13px; font-weight: 700; color: var(--text-color); }
-  .quad-cell .cell-controls { display:flex; align-items:center; gap:12px; }
-  .quad-cell .cell-controls label { font-size:12px; color: var(--muted-color); display:flex; align-items:center; gap:6px; white-space:nowrap; }
+  .line-quad__grid .quad-cell:nth-child(1) {
+    z-index: 4;
+  }
+
+  /* top-left */
+  .line-quad__grid .quad-cell:nth-child(3) {
+    z-index: 3;
+  }
+
+  /* bottom-left */
+  .line-quad__grid .quad-cell:nth-child(2) {
+    z-index: 2;
+  }
+
+  /* top-right */
+  .line-quad__grid .quad-cell:nth-child(4) {
+    z-index: 1;
+  }
+
+  /* bottom-right */
+  .quad-cell .cell-header {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .quad-cell .cell-title {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .quad-cell .cell-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .quad-cell .cell-controls label {
+    font-size: 12px;
+    color: var(--muted-color);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+  }
+
   .quad-cell select {
-    font-size: 12px; padding: 6px 28px 6px 10px; border: 1px solid var(--border-color); border-radius: 8px;
-    background-color: var(--surface-bg); color: var(--text-color);
+    font-size: 12px;
+    padding: 6px 28px 6px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
-    -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    transition: border-color .15s ease, box-shadow .15s ease;
   }
+
   [data-theme="dark"] .quad-cell select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   }
-  .quad-cell select:hover { border-color: var(--primary-color); }
-  .quad-cell select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
-  .quad-cell .cell-body { position: relative; }
-  .quad-cell .cell-body { width:100%; overflow:hidden; }
-  .quad-cell .cell-body svg { max-width:100%; height:auto; }
-  
-  .line-quad.hovering .lines path.ghost { opacity: .25; }
-  .line-quad.hovering .points circle.ghost { opacity: .25; }
-  .line-quad.hovering .areas path.ghost { opacity: .08; }
-  .line-quad.hovering .legend-bottom .item.ghost { opacity: .35; }
+
+  .quad-cell select:hover {
+    border-color: var(--primary-color);
+  }
+
+  .quad-cell select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(232, 137, 171, .25);
+    outline: none;
+  }
+
+  .quad-cell .cell-body {
+    position: relative;
+  }
+
+  .quad-cell .cell-body {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .quad-cell .cell-body svg {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .line-quad.hovering .lines path.ghost {
+    opacity: .25;
+  }
+
+  .line-quad.hovering .points circle.ghost {
+    opacity: .25;
+  }
+
+  .line-quad.hovering .areas path.ghost {
+    opacity: .08;
+  }
+
+  .line-quad.hovering .legend-bottom .item.ghost {
+    opacity: .35;
+  }
+
   /* Tooltip refined styling */
   .line-quad .d3-tooltip {
     z-index: 20;
     backdrop-filter: saturate(1.12) blur(8px);
   }
+
   .line-quad .d3-tooltip__inner {
     display: flex;
     flex-direction: column;
     gap: 6px;
     min-width: 220px;
   }
-  .line-quad .d3-tooltip__inner > div:first-child {
+
+  .line-quad .d3-tooltip__inner>div:first-child {
     font-weight: 800;
     letter-spacing: 0.1px;
     margin-bottom: 0;
   }
-  .line-quad .d3-tooltip__inner > div:nth-child(2) {
+
+  .line-quad .d3-tooltip__inner>div:nth-child(2) {
     font-size: 11px;
     color: var(--muted-color);
     display: block;
@@ -76,18 +192,22 @@
     margin-bottom: 2px;
     letter-spacing: 0.1px;
   }
-  .line-quad .d3-tooltip__inner > div:nth-child(n+3) {
+
+  .line-quad .d3-tooltip__inner>div:nth-child(n+3) {
     padding-top: 6px;
     border-top: 1px solid var(--border-color);
   }
+
   .line-quad .d3-tooltip__inner svg {
     display: inline-block;
     vertical-align: middle;
     margin-right: 2px;
   }
+
   .line-quad .d3-tooltip__inner strong {
     margin-right: 6px;
   }
+
   .line-quad .d3-tooltip__color-dot {
     display: inline-block;
     width: 12px;
@@ -95,6 +215,7 @@
     border-radius: 3px;
     border: 1px solid var(--border-color);
   }
+
   /* Header layout (like d3-line-simple) */
   .line-quad__header {
     display: flex;
@@ -104,6 +225,7 @@
     margin: 8px 0 0 0;
     flex-wrap: wrap;
   }
+
   .line-quad__header .legend-bottom {
     display: flex;
     flex-direction: column;
@@ -112,22 +234,26 @@
     font-size: 12px;
     color: var(--text-color);
   }
+
   .line-quad__header .legend-bottom .legend-title {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
+
   .line-quad__header .legend-bottom .items {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 14px;
   }
+
   .line-quad__header .legend-bottom .item {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     white-space: nowrap;
   }
+
   .line-quad__header .legend-bottom .swatch {
     width: 14px;
     height: 14px;
@@ -135,6 +261,7 @@
     border: 1px solid var(--border-color);
     display: inline-block;
   }
+
   .line-quad .controls {
     margin-top: 0;
     display: flex;
@@ -144,12 +271,14 @@
     width: auto;
     flex-wrap: wrap;
   }
+
   .line-quad .controls .control-group {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;
   }
+
   .line-quad .controls label {
     font-size: 12px;
     color: var(--text-color);
@@ -159,6 +288,7 @@
     white-space: nowrap;
     font-weight: 700;
   }
+
   .line-quad .controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
@@ -175,11 +305,20 @@
     cursor: pointer;
     transition: border-color .15s ease, box-shadow .15s ease;
   }
+
   [data-theme="dark"] .line-quad .controls select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   }
-  .line-quad .controls select:hover { border-color: var(--primary-color); }
-  .line-quad .controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
+
+  .line-quad .controls select:hover {
+    border-color: var(--primary-color);
+  }
+
+  .line-quad .controls select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(232, 137, 171, .25);
+    outline: none;
+  }
 </style>
 <script>
   (() => {
@@ -208,7 +347,7 @@
       s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
     };
 
-    function initRunLine(cell){
+    function initRunLine(cell) {
       const d3 = window.d3;
       const csvPath = cell.getAttribute('data-csv');
       const titleText = cell.getAttribute('data-title') || '';
@@ -221,14 +360,14 @@
 
       // 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 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');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
+      const gLines = gRoot.append('g').attr('class', 'lines');
+      const gPoints = gRoot.append('g').attr('class', 'points');
+      const gHover = gRoot.append('g').attr('class', 'hover');
       // Removed per-cell legend; using global footer legend
 
       // Tooltip
@@ -238,26 +377,26 @@
         tip = document.createElement('div');
         tip.className = 'd3-tooltip';
         Object.assign(tip.style, {
-          position:'absolute',
-          top:'0',
-          left:'0',
-          transform:'translate(-9999px,-9999px)',
-          pointerEvents:'none',
-          padding:'10px 12px',
-          borderRadius:'12px',
-          fontSize:'12px',
-          lineHeight:'1.35',
-          border:'1px solid var(--border-color)',
-          background:'var(--surface-bg)',
-          color:'var(--text-color)',
-          boxShadow:'0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
-          opacity:'0',
-          transition:'opacity .12s ease',
-          backdropFilter:'saturate(1.12) blur(8px)'
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          transform: 'translate(-9999px,-9999px)',
+          pointerEvents: 'none',
+          padding: '10px 12px',
+          borderRadius: '12px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
+          opacity: '0',
+          transition: 'opacity .12s ease',
+          backdropFilter: 'saturate(1.12) blur(8px)'
         });
         tipInner = document.createElement('div');
         tipInner.className = 'd3-tooltip__inner';
-        tipInner.style.textAlign='left';
+        tipInner.style.textAlign = 'left';
         tip.appendChild(tipInner);
         cell.appendChild(tip);
       } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
@@ -270,18 +409,18 @@
       let isRankStrictFlag = false; let isRankMetricFlag = false; let rankTickMax = 1;
       let sharedYConfig = null; // { type: 'rank_strict', maxRank } | { type: 'value', min, max }
       let axisLabelY = 'Value';
-      
+
       // Colors and markers (match original embeds)
       const getRunColors = (n) => {
-        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch(_) {}
-        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
-        return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])].slice(0, n);
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch (_) { }
+        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
+        return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10 || [])].slice(0, n);
       };
       const pool = getRunColors(12);
-      // Shapes supprimés: on n'utilise que la couleur
+      // Shapes removed: we only use color
       // Ready signal for async load completion
       let readyResolve = null;
-      const ready = new Promise((res)=> { readyResolve = res; });
+      const ready = new Promise((res) => { readyResolve = res; });
 
       // Shared formatter for thousands: 5000 -> 5k, 1500 -> 1.5k (trim .0)
       const formatK = (v) => {
@@ -294,7 +433,7 @@
         return d3.format('d')(v);
       };
 
-      function updateScales(){
+      function updateScales() {
         const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
         const axisColor = 'var(--axis-color)';
         const tickColor = 'var(--tick-color)';
@@ -303,29 +442,29 @@
         const rect = cell.getBoundingClientRect();
         width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
         height = Math.max(280, Math.round(width / 2.3));
-        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','xMidYMid meet');
+        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio', 'xMidYMid meet');
         const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
         xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
 
         // Y ticks
         let yTicks = [];
-        if (isRankStrictFlag) { const maxR = Math.max(1, Math.round(rankTickMax)); for (let v=1; v<=maxR; v+=1) yTicks.push(v); }
+        if (isRankStrictFlag) { const maxR = Math.max(1, Math.round(rankTickMax)); for (let v = 1; v <= maxR; v += 1) yTicks.push(v); }
         else { yTicks = yScale.ticks(6); }
 
         // Grid
         gGrid.selectAll('*').remove();
         gGrid.selectAll('line').data(yTicks).join('line')
-          .attr('x1',0).attr('x2',innerWidth).attr('y1',d=>yScale(d)).attr('y2',d=>yScale(d))
-          .attr('stroke', gridColor).attr('stroke-width',1).attr('shape-rendering','crispEdges');
+          .attr('x1', 0).attr('x2', innerWidth).attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
+          .attr('stroke', gridColor).attr('stroke-width', 1).attr('shape-rendering', 'crispEdges');
 
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0); xAxis = xAxis.ticks(8);
         xAxis = xAxis.tickFormat(formatK);
         const yAxis = d3.axisLeft(yScale).tickValues(yTicks).tickSizeOuter(0).tickFormat(isRankStrictFlag ? d3.format('d') : d3.format('.2f'));
-        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','11px'); });
-        gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','11px'); });
+        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g => { g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size', '11px'); });
+        gAxes.append('g').call(yAxis).call(g => { g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size', '11px'); });
 
         // Axis labels
         gAxes.append('text')
@@ -352,16 +491,16 @@
         return { innerWidth, innerHeight, tickColor };
       }
 
-      function renderMetric(metricKey){
+      function renderMetric(metricKey) {
         const map = dataByMetric.get(metricKey) || {};
         const runs = runOrder;
         let minStep = Infinity, maxStep = -Infinity, maxVal = 0, minVal = Infinity;
         const isRank = /rank/i.test(metricKey); const isAverage = /average/i.test(metricKey); const isRankStrict = isRank && !isAverage;
-        runs.forEach(r => { (map[r]||[]).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; minStep=Math.min(minStep,pt.step); maxStep=Math.max(maxStep,pt.step); maxVal=Math.max(maxVal,v); minVal=Math.min(minVal,v); }); });
+        runs.forEach(r => { (map[r] || []).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); maxVal = Math.max(maxVal, v); minVal = Math.min(minVal, v); }); });
         if (!isFinite(minStep) || !isFinite(maxStep)) return;
         xScale.domain([minStep, maxStep]);
         if (sharedYConfig && sharedYConfig.type === 'rank_strict') {
-          rankTickMax = Math.max(1, Math.round(sharedYConfig.maxRank||1));
+          rankTickMax = Math.max(1, Math.round(sharedYConfig.maxRank || 1));
           yScale.domain([rankTickMax, 1]);
           isRankStrictFlag = true;
           isRankMetricFlag = true;
@@ -385,7 +524,7 @@
           const j = (typeof idx === 'number' ? idx : runs.indexOf(run));
           return pool[(j >= 0 ? j : 0) % pool.length];
         };
-        const series = runs.map((r, i) => ({ run:r, color: colorForRun(r, i), values:(map[r]||[]).slice().sort((a,b)=>a.step-b.step).map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt) }));
+        const series = runs.map((r, i) => ({ run: r, color: colorForRun(r, i), values: (map[r] || []).slice().sort((a, b) => a.step - b.step).map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt) }));
 
         // zones ± stderr (métriques non rank)
         gAreas.selectAll('*').remove();
@@ -396,9 +535,9 @@
             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);
+            const pathData = d3.line().x(d => d[0]).y(d => d[1]).curve(d3.curveLinearClosed)(coords);
             gAreas.append('path')
-              .attr('class','area')
+              .attr('class', 'area')
               .attr('data-run', s.run)
               .attr('d', pathData)
               .attr('fill', s.color)
@@ -409,66 +548,68 @@
           });
         }
 
-        const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
+        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('class', 'run-line')
+          .attr('data-run', d => d.run)
+          .attr('fill', 'none')
           .attr('stroke-width', 1)
-          .attr('opacity',0)
-          .attr('stroke', d=>d.color)
-          .attr('d', d=>lineGen(d.values))
+          .attr('opacity', 0)
+          .attr('stroke', d => d.color)
+          .attr('d', d => lineGen(d.values))
           .transition(tChange || undefined)
-          .attr('opacity',0.9);
+          .attr('opacity', 0.9);
         paths
           .transition(tChange || undefined)
-          .attr('stroke', d=>d.color)
-          .attr('opacity',0.9)
-          .attr('d', d=>lineGen(d.values));
+          .attr('stroke', d => d.color)
+          .attr('opacity', 0.9)
+          .attr('d', d => lineGen(d.values));
         paths.exit().remove();
 
         // Draw light point markers at each data sample (subtle)
-        const allPoints = series.flatMap(s => s.values.map(v => ({ run:s.run, color:s.color, step:v.step, value:v.value })));
-        const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d=> `${d.run}-${d.step}`);
-        ptsSel.enter().append('circle').attr('class','pt')
-          .attr('data-run', d=>d.run)
+        const allPoints = series.flatMap(s => s.values.map(v => ({ run: s.run, color: s.color, step: v.step, value: v.value })));
+        const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d => `${d.run}-${d.step}`);
+        ptsSel.enter().append('circle').attr('class', 'pt')
+          .attr('data-run', d => d.run)
           .attr('r', 1.5)
-          .attr('fill', d=>d.color)
+          .attr('fill', d => d.color)
           .attr('fill-opacity', 0.6)
           .attr('stroke', 'none')
-          .attr('cx', d=>xScale(d.step))
-          .attr('cy', d=>yScale(d.value))
+          .attr('cx', d => xScale(d.step))
+          .attr('cy', d => yScale(d.value))
           .merge(ptsSel)
-          .attr('fill', d=>d.color)
+          .attr('fill', d => d.color)
           .transition(tChange || undefined)
           .attr('r', 2)
-          .attr('cx', d=>xScale(d.step))
-          .attr('cy', d=>yScale(d.value));
+          .attr('cx', d => xScale(d.step))
+          .attr('cy', d => yScale(d.value));
         ptsSel.exit().remove();
 
         // No per-cell legend content (handled globally)
 
         // Hover
         gHover.selectAll('*').remove();
-        const overlay = gHover.append('rect').attr('fill','transparent').style('cursor','crosshair').attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight);
-        const hoverLine = gHover.append('line').style('stroke','var(--text-color)').attr('stroke-opacity', 0.25).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
-        const stepSet = new Set(); series.forEach(s=>s.values.forEach(v=>stepSet.add(v.step))); const steps = Array.from(stepSet).sort((a,b)=>a-b);
-        function onMove(ev){ if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx,my]=d3.pointer(ev, overlay.node()); const nearest = steps.reduce((best,s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]); const xpx = xScale(nearest); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
+        const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair').attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+        const hoverLine = gHover.append('line').style('stroke', 'var(--text-color)').attr('stroke-opacity', 0.25).attr('stroke-width', 1).attr('y1', 0).attr('y2', innerHeight).style('display', 'none');
+        const stepSet = new Set(); series.forEach(s => s.values.forEach(v => stepSet.add(v.step))); const steps = Array.from(stepSet).sort((a, b) => a - b);
+        function onMove(ev) {
+          if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx, my] = d3.pointer(ev, overlay.node()); const nearest = steps.reduce((best, s) => Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]); const xpx = xScale(nearest); hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
           let html = `<div><strong>${titleText}</strong></div><div><strong>step</strong> ${formatK(nearest)}</div>`;
-          const entries = series.map(s=>{ const map = new Map(s.values.map(v=>[v.step, v])); const pt = map.get(nearest); return { run:s.run, color:s.color, pt }; }).filter(e => e.pt && e.pt.value!=null);
-          entries.sort((a,b)=> (a.pt.value - b.pt.value));
-          const fmt = (vv)=> (isRankStrictFlag? d3.format('d')(vv) : (+vv).toFixed(4));
+          const entries = series.map(s => { const map = new Map(s.values.map(v => [v.step, v])); const pt = map.get(nearest); return { run: s.run, color: s.color, pt }; }).filter(e => e.pt && e.pt.value != null);
+          entries.sort((a, b) => (a.pt.value - b.pt.value));
+          const fmt = (vv) => (isRankStrictFlag ? d3.format('d')(vv) : (+vv).toFixed(4));
           entries.forEach(e => {
-            const err = (e.pt.stderr!=null && isFinite(e.pt.stderr) && e.pt.stderr>0) ? ` ± ${fmt(e.pt.stderr)}` : '';
+            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); }
+          tipInner.innerHTML = html; const offsetX = 12, offsetY = 12; tip.style.opacity = '1'; tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
+        }
+        function onLeave() { hideTipTimer = setTimeout(() => { tip.style.opacity = '0'; tip.style.transform = 'translate(-9999px, -9999px)'; hoverLine.style('display', 'none'); }, 100); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
       }
 
-      async function load(){
+      async function load() {
         try {
           const file = (csvPath || '').split('/').pop();
           const CANDIDATES = [
@@ -479,18 +620,18 @@
             `../../assets/data/${file}`
           ].filter(Boolean);
           let text = null;
-          for (const p of CANDIDATES){
-            try { const r = await fetch(p, { cache:'no-cache' }); if (r.ok) { text = await r.text(); break; } } catch(e){}
+          for (const p of CANDIDATES) {
+            try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) { text = await r.text(); break; } } catch (e) { }
           }
           if (text == null) throw new Error(`CSV not found: ${file}`);
-          const rows = d3.csvParse(text, d => ({ run:(d.run||'').trim(), step:+d.step, metric:(d.metric||'').trim(), value:+d.value, stderr: (d.stderr!=null && d.stderr!=='') ? +d.stderr : null }));
-          metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
-          runList = Array.from(new Set(rows.map(r=>r.run))).sort(); runOrder = runList;
-          metricList.forEach(m => { const map={}; runList.forEach(r=>map[r]=[]); rows.filter(r=>r.metric===m).forEach(r=>{ if(!isNaN(r.step)&&!isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); }); dataByMetric.set(m, map); });
+          const rows = d3.csvParse(text, d => ({ run: (d.run || '').trim(), step: +d.step, metric: (d.metric || '').trim(), value: +d.value, stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null }));
+          metricList = Array.from(new Set(rows.map(r => r.metric))).sort();
+          runList = Array.from(new Set(rows.map(r => r.run))).sort(); runOrder = runList;
+          metricList.forEach(m => { const map = {}; runList.forEach(r => map[r] = []); rows.filter(r => r.metric === m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step: r.step, value: r.value, stderr: r.stderr }); }); dataByMetric.set(m, map); });
           const preferred = metricList.find(m => m === 'ai2d_exact_match') || metricList.find(m => /average_rank/i.test(m));
           const def = preferred || metricList[0];
           renderMetric(def);
-          const ro = window.ResizeObserver ? new ResizeObserver(()=>renderMetric(def)) : null; if (ro) ro.observe(cell);
+          const ro = window.ResizeObserver ? new ResizeObserver(() => renderMetric(def)) : null; if (ro) ro.observe(cell);
           if (typeof readyResolve === 'function') readyResolve();
         } catch (e) {
           const pre = document.createElement('pre'); pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e);
@@ -499,7 +640,7 @@
         }
       }
       load();
-      
+
       return {
         ready,
         getMetrics: () => metricList.slice(),
@@ -508,7 +649,7 @@
           const key = m; const map = dataByMetric.get(key) || {}; const runs = runOrder;
           let maxVal = 0, minVal = Infinity; let minStep = Infinity, maxStep = -Infinity;
           const isRank = /rank/i.test(key); const isAverage = /average/i.test(key); const isRankStrict = isRank && !isAverage;
-          runs.forEach(r => { (map[r]||[]).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; minStep=Math.min(minStep,pt.step); maxStep=Math.max(maxStep,pt.step); maxVal=Math.max(maxVal,v); minVal=Math.min(minVal,v); }); });
+          runs.forEach(r => { (map[r] || []).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); maxVal = Math.max(maxVal, v); minVal = Math.min(minVal, v); }); });
           const rankMax = isRank ? Math.max(1, Math.round(maxVal)) : null;
           return { isRank, isRankStrict, min: maxVal === 0 && minVal === Infinity ? null : minVal, max: maxVal, rankMax };
         },
@@ -560,7 +701,7 @@
         const select = (headerEl || header).querySelector('.controls select');
         if (select) {
           select.innerHTML = '';
-          metrics.forEach(m => { const o=document.createElement('option'); o.value=m; o.textContent=prettyMetricLabel(m); select.appendChild(o); });
+          metrics.forEach(m => { const o = document.createElement('option'); o.value = m; o.textContent = prettyMetricLabel(m); select.appendChild(o); });
           if (def) select.value = def;
         }
 
@@ -577,7 +718,7 @@
               const max = Math.max(...infos.map(info => info.max));
               instances.forEach(i => i && typeof i.setSharedY === 'function' && i.setSharedY({ type: 'value', min, max, key: metric }));
             }
-          } catch (_) {}
+          } catch (_) { }
         };
 
         const applyAll = (v) => { computeAndApplySharedY(v); instances.forEach(i => i && typeof i.setMetric === 'function' && i.setMetric(v)); };
@@ -589,14 +730,14 @@
         if (legendItemsHost) {
           try {
             const f = '/data/formatting_filters.csv';
-            const r = await fetch(f, { cache:'no-cache' });
+            const r = await fetch(f, { cache: 'no-cache' });
             if (r.ok && window.d3 && window.d3.csvParse) {
               const txt = await r.text();
               const rows = window.d3.csvParse(txt);
-              const runList = Array.from(new Set(rows.map(row => String(row.run||'').trim()).filter(Boolean))).sort();
-              const poolLegend = (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function')
+              const runList = Array.from(new Set(rows.map(row => String(row.run || '').trim()).filter(Boolean))).sort();
+              const poolLegend = (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function')
                 ? window.ColorPalettes.getColors('categorical', runList.length)
-                : (()=>{ const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB'; return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...((window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'])]; })();
+                : (() => { const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...((window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ab'])]; })();
               // Build shared run->color map once
               SHARED_RUN_COLOR = {};
               runList.forEach((name, i) => { SHARED_RUN_COLOR[name] = poolLegend[i % poolLegend.length]; });
@@ -608,7 +749,7 @@
               try {
                 const currentMetric = (select && select.value) || def;
                 if (currentMetric) applyAll(currentMetric);
-              } catch {}
+              } catch { }
               // Legend hover ghosting across all cells
               legendItemsHost.querySelectorAll('.item').forEach(el => {
                 el.addEventListener('mouseenter', () => {
@@ -632,14 +773,11 @@
                 });
               });
             }
-          } catch {}
+          } catch { }
         }
       })();
     };
 
     if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
   })();
-</script>
-
-
-
+</script>

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

@@ -1,18 +1,21 @@
-<div class="d3-matrix"  ></div>
+<div class="d3-matrix"></div>
 <style>
   .d3-matrix {
     position: relative;
   }
+
   .d3-matrix .panels {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     margin-bottom: 4px;
   }
+
   .d3-matrix .panel {
     flex: 1 1 320px;
     min-width: 280px;
   }
+
   .d3-matrix .panel__title {
     color: var(--text-color);
     font-size: 12px;
@@ -20,22 +23,31 @@
     margin: 0 0 6px 0;
     font-weight: 600;
   }
+
   .d3-matrix .axis-label {
     fill: var(--text-color);
     font-size: 11px;
     font-weight: 700;
   }
+
   .d3-matrix .cell-border {
     stroke: var(--border-color);
     stroke-width: 1px;
     fill: none;
   }
+
   .d3-matrix .cell-text {
     fill: var(--muted-color);
     font-size: 11px;
     pointer-events: none;
   }
-  .d3-matrix .chart-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; }
+
+  .d3-matrix .chart-card {
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 8px;
+  }
 </style>
 <script>
   (() => {
@@ -57,7 +69,7 @@
     const bootstrap = () => {
       const scriptEl = document.currentScript;
       let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-matrix'))){
+      if (!(container && container.classList && container.classList.contains('d3-matrix'))) {
         const cs = Array.from(document.querySelectorAll('.d3-matrix')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
         container = cs[cs.length - 1] || null;
       }
@@ -131,30 +143,30 @@
 
       // Demo data (two distinct 10x10 matrices: Baseline vs Improved)
       // Rows / Columns are generic class labels
-      const classes = ['0','1','2','3','4','5','6','7','8','9'];
+      const classes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
       const matrixA = [
-        [90,  2,  1,  0,  0,  0,  1,  0,  5,  1],
-        [ 3, 85,  5,  1,  0,  1,  2,  1,  1,  1],
-        [ 1,  6, 70, 10,  4,  4,  1,  1,  1,  2],
-        [ 0,  1,  8, 65, 10, 10,  2,  1,  1,  2],
-        [ 0,  0,  2,  6, 83,  3,  1,  1,  3,  1],
-        [ 0,  1,  2, 12,  4, 70,  5,  2,  2,  2],
-        [ 1,  2,  1,  0,  1,  2, 88,  1,  3,  1],
-        [ 0,  1,  1,  1,  1,  1,  2, 90,  1,  2],
-        [ 6,  2,  2,  4,  6,  3,  3,  2, 70,  2],
-        [ 1,  1,  1,  1,  2,  1,  1,  2,  1, 89]
+        [90, 2, 1, 0, 0, 0, 1, 0, 5, 1],
+        [3, 85, 5, 1, 0, 1, 2, 1, 1, 1],
+        [1, 6, 70, 10, 4, 4, 1, 1, 1, 2],
+        [0, 1, 8, 65, 10, 10, 2, 1, 1, 2],
+        [0, 0, 2, 6, 83, 3, 1, 1, 3, 1],
+        [0, 1, 2, 12, 4, 70, 5, 2, 2, 2],
+        [1, 2, 1, 0, 1, 2, 88, 1, 3, 1],
+        [0, 1, 1, 1, 1, 1, 2, 90, 1, 2],
+        [6, 2, 2, 4, 6, 3, 3, 2, 70, 2],
+        [1, 1, 1, 1, 2, 1, 1, 2, 1, 89]
       ];
       const matrixB = [
-        [94,  1,  0,  0,  0,  0,  1,  0,  3,  1],
-        [ 2, 90,  3,  1,  0,  0,  1,  1,  1,  1],
-        [ 1,  4, 78,  7,  3,  3,  1,  1,  1,  1],
-        [ 0,  1,  5, 74,  7,  8,  1,  1,  1,  2],
-        [ 0,  0,  1,  4, 88,  2,  1,  1,  2,  1],
-        [ 0,  1,  1,  9,  3, 78,  3,  1,  2,  2],
-        [ 1,  1,  1,  0,  1,  1, 91,  1,  2,  1],
-        [ 0,  1,  1,  1,  1,  1,  1, 92,  1,  1],
-        [ 4,  1,  1,  3,  4,  2,  2,  2, 79,  2],
-        [ 1,  1,  1,  1,  2,  1,  1,  1,  1, 90]
+        [94, 1, 0, 0, 0, 0, 1, 0, 3, 1],
+        [2, 90, 3, 1, 0, 0, 1, 1, 1, 1],
+        [1, 4, 78, 7, 3, 3, 1, 1, 1, 1],
+        [0, 1, 5, 74, 7, 8, 1, 1, 1, 2],
+        [0, 0, 1, 4, 88, 2, 1, 1, 2, 1],
+        [0, 1, 1, 9, 3, 78, 3, 1, 2, 2],
+        [1, 1, 1, 0, 1, 1, 91, 1, 2, 1],
+        [0, 1, 1, 1, 1, 1, 1, 92, 1, 1],
+        [4, 1, 1, 3, 4, 2, 2, 2, 79, 2],
+        [1, 1, 1, 1, 2, 1, 1, 1, 1, 90]
       ];
 
       // Colors: sequential palette via window.ColorPalettes with graceful fallback
@@ -163,7 +175,7 @@
           if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
             return window.ColorPalettes.getColors('sequential', count);
           }
-        } catch (_) {}
+        } catch (_) { }
         // Fallback: generate a monochrome scale using the primary color with varying opacity
         const arr = [];
         for (let i = 0; i < count; i++) arr.push('var(--primary-color)');
@@ -176,13 +188,13 @@
           if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
             return window.ColorPalettes.getColors('diverging', count);
           }
-        } catch (_) {}
-        const steps = Math.max(3, count|0);
+        } catch (_) { }
+        const steps = Math.max(3, count | 0);
         const arr = [];
         for (let i = 0; i < steps; i++) {
           const t = i / (steps - 1);
           const pct = Math.round(t * 100);
-          arr.push(`color-mix(in srgb, #D64545 ${100-pct}%, #3A7BD5 ${pct}%)`);
+          arr.push(`color-mix(in srgb, #D64545 ${100 - pct}%, #3A7BD5 ${pct}%)`);
         }
         return arr;
       };
@@ -248,19 +260,19 @@
       }
 
       // Compute a fixed readable text color from a CSS rgb()/rgba() string
-      function chooseFixedReadableTextOnBg(bgCss){
+      function chooseFixedReadableTextOnBg(bgCss) {
         try {
-          const m = String(bgCss||'').match(/rgba?\(([^)]+)\)/);
+          const m = String(bgCss || '').match(/rgba?\(([^)]+)\)/);
           if (!m) return '#0e1116';
           const parts = m[1].split(',').map(s => parseFloat(s.trim()));
           const [r, g, b] = parts;
           // sRGB → relative luminance
           const srgb = [r, g, b].map(v => Math.max(0, Math.min(255, v)) / 255);
-          const linear = srgb.map(c => (c <= 0.03928 ? c/12.92 : Math.pow((c + 0.055)/1.055, 2.4)));
-          const L = 0.2126*linear[0] + 0.7152*linear[1] + 0.0722*linear[2];
+          const linear = srgb.map(c => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
+          const L = 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
           // Threshold ~ 0.5 for readability; darker BG → white text, else near-black
           return L < 0.5 ? '#ffffff' : '#0e1116';
-        } catch(_) { return '#0e1116'; }
+        } catch (_) { return '#0e1116'; }
       }
 
       function render() {
@@ -319,7 +331,7 @@
           .attr('x', d => x(d.c) + x.bandwidth() / 2)
           .attr('y', d => y(d.r) + y.bandwidth() / 2)
           .text(d => `${Math.round(d.value * 100)}`)
-          .style('fill', function(d){
+          .style('fill', function (d) {
             try {
               const rect = this && this.parentNode ? this.parentNode.querySelector('rect') : null;
               const bg = rect ? getComputedStyle(rect).fill : colorA(d.value);
@@ -382,7 +394,7 @@
         const delta = dataB.data.map(d => ({ r: d.r, c: d.c, count: d.count, value: (d.value - (mapA.get(d.r + '-' + d.c) || 0)) }));
         // Symmetric domain around 0 (in proportions), express later as pp in labels
         const maxAbsDelta = Math.max(0.01, d3.max(delta, d => Math.abs(d.value)) || 0.01);
-        const colorB = d3.scaleQuantize().domain([-maxAbsDelta, maxAbsDelta]).range(diverging);
+        const colorB = d3.scaleQuantize().domain([-maxAbsDelta / 2, maxAbsDelta]).range(diverging);
 
         gCellsB.selectAll('rect.cell-bg')
           .data([0])
@@ -408,12 +420,12 @@
           .attr('ry', 2)
           .on('mousemove', (event, d) => {
             const [px, py] = d3.pointer(event, container);
-            const a = dataA.data.find(x => x.r===d.r && x.c===d.c);
-            const b = dataB.data.find(x => x.r===d.r && x.c===d.c);
+            const a = dataA.data.find(x => x.r === d.r && x.c === d.c);
+            const b = dataB.data.find(x => x.r === d.r && x.c === d.c);
             const dv = ((b ? b.value : 0) - (a ? a.value : 0)) * 100;
             tipInner.innerHTML = `<strong>${classes[d.r]}</strong> → <strong>${classes[d.c]}</strong>` +
-              `<br/>baseline ${(a ? a.value*100 : 0).toFixed(1)}%` +
-              `<br/>improved ${(b ? b.value*100 : 0).toFixed(1)}%` +
+              `<br/>baseline ${(a ? a.value * 100 : 0).toFixed(1)}%` +
+              `<br/>improved ${(b ? b.value * 100 : 0).toFixed(1)}%` +
               `<br/>delta ${dv.toFixed(1)} pp`;
             tip.style.transform = `translate(${px + 10}px, ${py + 10}px)`;
             tip.style.opacity = '1';
@@ -434,18 +446,18 @@
           .attr('y', d => y(d.r))
           .attr('width', Math.max(1, x.bandwidth()))
           .attr('height', Math.max(1, y.bandwidth()))
-          .attr('fill', d => colorB(delta.find(x => x.r===d.r && x.c===d.c).value));
+          .attr('fill', d => colorB(delta.find(x => x.r === d.r && x.c === d.c).value));
 
         cellsMergedB.select('text')
           .attr('x', d => x(d.c) + x.bandwidth() / 2)
           .attr('y', d => y(d.r) + y.bandwidth() / 2)
           .text(d => {
-            const dv = delta.find(x => x.r===d.r && x.c===d.c).value; return `${Math.round(dv * 100)}`;
+            const dv = delta.find(x => x.r === d.r && x.c === d.c).value; return `${Math.round(dv * 100)}`;
           })
-          .style('fill', function(d){
+          .style('fill', function (d) {
             try {
               const rect = this && this.parentNode ? this.parentNode.querySelector('rect') : null;
-              const dv = delta.find(x => x.r===d.r && x.c===d.c).value;
+              const dv = delta.find(x => x.r === d.r && x.c === d.c).value;
               const bg = rect ? getComputedStyle(rect).fill : colorB(dv);
               return chooseFixedReadableTextOnBg(bg);
             } catch (_) {
@@ -509,7 +521,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
-
-
-
+</script>

app/src/content/embeds/d3-neural-network.html

@@ -1,33 +1,172 @@
 <div class="d3-neural"></div>
 <style>
-  .d3-neural { position: relative; width:100%;margin:0;}
-  .d3-neural .controls { margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
-  .d3-neural .controls label { font-size: 12px; color: var(--muted-color); display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 10px; }
-  .d3-neural .controls input[type="range"]{ width: 160px; }
-  .d3-neural .panel { display:flex; gap:8px; align-items:stretch; flex-wrap: nowrap; }
-  .d3-neural .left { flex: 0 0 33.333%; max-width: 33.333%; min-width: 160px; display:flex; flex-direction:column; gap:8px; }
-  .d3-neural .right { flex: 1 1 66.666%; max-width: 66.666%; min-width: 280px; display:flex; }
-  .d3-neural .right > svg { flex: 1 1 auto; height: 100%; }
-  .d3-neural .arrow-sep { flex: 0 0 18px; max-width: 18px; display:flex; align-items:center; justify-content:center; color: var(--muted-color); }
-  .d3-neural .arrow-sep svg { display:block; width: 16px; height: 16px; }
+  .d3-neural {
+    position: relative;
+    width: 100%;
+    margin: 0;
+  }
+
+  .d3-neural .controls {
+    margin-top: 12px;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .d3-neural .controls label {
+    font-size: 12px;
+    color: var(--muted-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    padding: 6px 10px;
+  }
+
+  .d3-neural .controls input[type="range"] {
+    width: 160px;
+  }
+
+  .d3-neural .panel {
+    display: flex;
+    gap: 8px;
+    align-items: stretch;
+    flex-wrap: nowrap;
+  }
+
+  .d3-neural .left {
+    flex: 0 0 33.333%;
+    max-width: 33.333%;
+    min-width: 160px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .d3-neural .right {
+    flex: 1 1 66.666%;
+    max-width: 66.666%;
+    min-width: 280px;
+    display: flex;
+  }
+
+  .d3-neural .right>svg {
+    flex: 1 1 auto;
+    height: 100%;
+  }
+
+  .d3-neural .arrow-sep {
+    flex: 0 0 18px;
+    max-width: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted-color);
+  }
+
+  .d3-neural .arrow-sep svg {
+    display: block;
+    width: 16px;
+    height: 16px;
+  }
+
   @media (max-width: 800px) {
-    .d3-neural .panel { flex-direction: column; }
+    .d3-neural .panel {
+      flex-direction: column;
+    }
+
     .d3-neural .left,
-    .d3-neural .right { flex: 0 0 100%; max-width: 100%; min-width: 0; }
-    .d3-neural .arrow-sep { display: none; }
+    .d3-neural .right {
+      flex: 0 0 100%;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    .d3-neural .arrow-sep {
+      display: none;
+    }
+  }
+
+  .d3-neural canvas {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    display: block;
+  }
+
+  .d3-neural .preview28 {
+    display: grid;
+    grid-template-columns: repeat(28, 1fr);
+    gap: 1px;
+    width: 100%;
+  }
+
+  .d3-neural .preview28 span {
+    display: block;
+    aspect-ratio: 1/1;
+    border-radius: 2px;
+  }
+
+  .d3-neural .legend {
+    font-size: 12px;
+    color: var(--text-color);
+    line-height: 1.35;
+  }
+
+  .d3-neural .probs {
+    display: flex;
+    gap: 6px;
+    align-items: flex-end;
+    height: 64px;
+  }
+
+  .d3-neural .probs .bar {
+    width: 10px;
+    border-radius: 2px 2px 0 0;
+    background: var(--border-color);
+    transition: height .15s ease, background-color .15s ease;
+  }
+
+  .d3-neural .probs .bar.active {
+    background: var(--primary-color);
+  }
+
+  .d3-neural .probs .tick {
+    font-size: 10px;
+    color: var(--muted-color);
+    text-align: center;
+    margin-top: 2px;
+  }
+
+  .d3-neural .canvas-wrap {
+    position: relative;
+  }
+
+  .d3-neural .erase-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-color);
+  }
+
+  .d3-neural .canvas-hint {
+    position: absolute;
+    top: 8px;
+    left: 12px;
+    font-size: 12px;
+    font-weight: 700;
+    color: rgba(0, 0, 0, .9);
+    pointer-events: none;
+    transition: opacity .12s ease;
   }
-  .d3-neural canvas { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border-color); background: var(--surface-bg); display:block; }
-  .d3-neural .preview28 { display:grid; grid-template-columns: repeat(28, 1fr); gap: 1px; width: 100%; }
-  .d3-neural .preview28 span { display:block; aspect-ratio:1/1; border-radius:2px; }
-  .d3-neural .legend { font-size: 12px; color: var(--text-color); line-height:1.35; }
-  .d3-neural .probs { display:flex; gap:6px; align-items:flex-end; height: 64px; }
-  .d3-neural .probs .bar { width: 10px; border-radius:2px 2px 0 0; background: var(--border-color); transition: height .15s ease, background-color .15s ease; }
-  .d3-neural .probs .bar.active { background: var(--primary-color); }
-  .d3-neural .probs .tick { font-size: 10px; color: var(--muted-color); text-align:center; margin-top: 2px; }
-  .d3-neural .canvas-wrap { position: relative; }
-  .d3-neural .erase-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display:flex; align-items:center; justify-content:center; border: 1px solid var(--border-color);  }
-  .d3-neural .canvas-hint { position: absolute; top: 8px; left: 12px; font-size: 12px; font-weight: 700; color: rgba(0,0,0,.9); pointer-events: none; transition: opacity .12s ease; }
-  
 </style>
 <script>
   (() => {
@@ -40,14 +179,7 @@
       if (window.d3) onReady();
     };
 
-    const ensureTF = (cb) => {
-      if (window.tf && typeof window.tf.tensor === 'function') return cb();
-      let s = document.getElementById('tfjs-cdn-script');
-      if (!s) { s = document.createElement('script'); s.id = 'tfjs-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.20.0/dist/tf.min.js'; document.head.appendChild(s); }
-      const onReady = () => { if (window.tf && typeof window.tf.tensor === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true });
-      if (window.tf) onReady();
-    };
+    // TensorFlow.js loading removed - not needed for glyph-based fallback
 
     const bootstrap = () => {
       const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
@@ -72,18 +204,18 @@
       const canvas = document.createElement('canvas'); canvas.width = CANVAS_PX; canvas.height = CANVAS_PX;
       const ctx = canvas.getContext('2d');
       // init white bg
-      ctx.fillStyle = '#ffffff'; ctx.fillRect(0,0,CANVAS_PX,CANVAS_PX);
+      ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, CANVAS_PX, CANVAS_PX);
       const canvasWrap = document.createElement('div'); canvasWrap.className = 'canvas-wrap';
       canvasWrap.appendChild(canvas);
       // Erase icon button (top-right)
-      const eraseBtn = document.createElement('button'); eraseBtn.className='erase-btn button--ghost'; eraseBtn.type='button'; eraseBtn.setAttribute('aria-label','Clear');
+      const eraseBtn = document.createElement('button'); eraseBtn.className = 'erase-btn button--ghost'; eraseBtn.type = 'button'; eraseBtn.setAttribute('aria-label', 'Clear');
       // Hidden until the user interacts with the canvas
       eraseBtn.style.display = 'none';
       eraseBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path></svg>';
       eraseBtn.addEventListener('click', () => clearCanvas());
       canvasWrap.appendChild(eraseBtn);
       // Hint (top-left)
-      const hint = document.createElement('div'); hint.className='canvas-hint'; hint.textContent='Draw a digit here';
+      const hint = document.createElement('div'); hint.className = 'canvas-hint'; hint.textContent = 'Draw a digit here';
       canvasWrap.appendChild(hint);
       left.appendChild(canvasWrap);
 
@@ -94,133 +226,133 @@
       // (prediction panel removed; predictions rendered next to output nodes)
 
       // SVG network on right
-      const svg = d3.select(right).append('svg').attr('width','100%').style('display','block');
+      const svg = d3.select(right).append('svg').attr('width', '100%').style('display', 'block');
       const defs = svg.append('defs');
       const gRoot = svg.append('g');
-      const gInput = gRoot.append('g').attr('class','input');
-      const gInputLinks = gRoot.append('g').attr('class','input-links');
-      const gLinks = gRoot.append('g').attr('class','links');
-      const gNodes = gRoot.append('g').attr('class','nodes');
-      const gLabels = gRoot.append('g').attr('class','labels');
-      const gOutText = gRoot.append('g').attr('class','out-probs');
+      const gInput = gRoot.append('g').attr('class', 'input');
+      const gInputLinks = gRoot.append('g').attr('class', 'input-links');
+      const gLinks = gRoot.append('g').attr('class', 'links');
+      const gNodes = gRoot.append('g').attr('class', 'nodes');
+      const gLabels = gRoot.append('g').attr('class', 'labels');
+      const gOutText = gRoot.append('g').attr('class', 'out-probs');
 
       // Network structure (compact: 8 -> 8 -> 10)
       const layerSizes = [8, 8, 10];
-      const layers = layerSizes.map((n, li)=> Array.from({length:n}, (_, i)=>({ id:`L${li}N${i}`, layer: li, index: i, a:0 })));
+      const layers = layerSizes.map((n, li) => Array.from({ length: n }, (_, i) => ({ id: `L${li}N${i}`, layer: li, index: i, a: 0 })));
       // Links only between hidden->hidden and hidden->output
       const links = [];
-      for (let i=0;i<layerSizes[0];i++){
-        for (let j=0;j<layerSizes[1];j++) links.push({ s:{l:0,i}, t:{l:1,j}, w: (Math.sin(i*17+j*31)+1)/2 });
+      for (let i = 0; i < layerSizes[0]; i++) {
+        for (let j = 0; j < layerSizes[1]; j++) links.push({ s: { l: 0, i }, t: { l: 1, j }, w: (Math.sin(i * 17 + j * 31) + 1) / 2 });
       }
-      for (let i=0;i<layerSizes[1];i++){
-        for (let j=0;j<layerSizes[2];j++) links.push({ s:{l:1,i}, t:{l:2,j}, w: (Math.cos(i*7+j*13)+1)/2 });
+      for (let i = 0; i < layerSizes[1]; i++) {
+        for (let j = 0; j < layerSizes[2]; j++) links.push({ s: { l: 1, i }, t: { l: 2, j }, w: (Math.cos(i * 7 + j * 13) + 1) / 2 });
       }
 
       // Linear classifier: logits = W * feats + b, feats in [0,1]
       // features: [total, cx, cy, lr, tb, htrans, vtrans, loopiness]
       const W = [
         // 0  1    2    3    4    5      6      7
-        [ 0.3, 0.0, 0.0, 0.0, 0.0, -0.8, -0.6,  1.2], // 0
-        [-0.2, 0.9, 0.2, 0.8, 0.1, -0.2,  0.2, -1.1], // 1
-        [ 0.1, 0.4, 0.2, 0.5, 0.2,  0.9,  0.1, -0.6], // 2
-        [ 0.2, 0.3, 0.2, 0.2, 0.2,  0.9,  0.0, -0.2], // 3
-        [ 0.0,-0.3, 0.2,-0.6, 0.4,  0.2,  0.8, -0.6], // 4
-        [ 0.1,-0.4, 0.2,-0.5, 0.5,  0.9,  0.1, -0.6], // 5
-        [ 0.2,-0.2, 0.6,-0.2, 0.8, -0.3,  0.2,  0.6], // 6
-        [ 0.0, 0.6,-0.2, 0.6,-0.8,  0.6,  0.0, -0.8], // 7
-        [ 0.4, 0.0, 0.0, 0.1, 0.1,  0.6,  0.6,  1.0], // 8
-        [ 0.2, 0.2,-0.6, 0.2,-0.8,  0.2,  0.6,  0.5], // 9
+        [0.3, 0.0, 0.0, 0.0, 0.0, -0.8, -0.6, 1.2], // 0
+        [-0.2, 0.9, 0.2, 0.8, 0.1, -0.2, 0.2, -1.1], // 1
+        [0.1, 0.4, 0.2, 0.5, 0.2, 0.9, 0.1, -0.6], // 2
+        [0.2, 0.3, 0.2, 0.2, 0.2, 0.9, 0.0, -0.2], // 3
+        [0.0, -0.3, 0.2, -0.6, 0.4, 0.2, 0.8, -0.6], // 4
+        [0.1, -0.4, 0.2, -0.5, 0.5, 0.9, 0.1, -0.6], // 5
+        [0.2, -0.2, 0.6, -0.2, 0.8, -0.3, 0.2, 0.6], // 6
+        [0.0, 0.6, -0.2, 0.6, -0.8, 0.6, 0.0, -0.8], // 7
+        [0.4, 0.0, 0.0, 0.1, 0.1, 0.6, 0.6, 1.0], // 8
+        [0.2, 0.2, -0.6, 0.2, -0.8, 0.2, 0.6, 0.5], // 9
       ];
       const b = [-0.2, -0.1, -0.05, -0.05, -0.05, -0.05, -0.05, -0.1, -0.15, -0.1];
 
-      function computeFeatures(x28){
+      function computeFeatures(x28) {
         // x28: Float32Array length 784, values in [0,1] (1 = black/ink)
-        let sum=0, cx=0, cy=0; const w=28, h=28;
+        let sum = 0, cx = 0, cy = 0; const w = 28, h = 28;
         const rowSum = new Array(h).fill(0); const colSum = new Array(w).fill(0);
-        let hTransitions=0, vTransitions=0;
-        for (let y=0;y<h;y++){
-          for (let x=0;x<w;x++){
-            const v = x28[y*w+x]; sum += v; cx += x*v; cy += y*v; rowSum[y]+=v; colSum[x]+=v;
-            if (x>0){ const v0=x28[y*w+(x-1)], v1=v; if ((v0>0.25)!==(v1>0.25)) hTransitions+=1; }
-            if (y>0){ const v0=x28[(y-1)*w+x], v1=v; if ((v0>0.25)!==(v1>0.25)) vTransitions+=1; }
+        let hTransitions = 0, vTransitions = 0;
+        for (let y = 0; y < h; y++) {
+          for (let x = 0; x < w; x++) {
+            const v = x28[y * w + x]; sum += v; cx += x * v; cy += y * v; rowSum[y] += v; colSum[x] += v;
+            if (x > 0) { const v0 = x28[y * w + (x - 1)], v1 = v; if ((v0 > 0.25) !== (v1 > 0.25)) hTransitions += 1; }
+            if (y > 0) { const v0 = x28[(y - 1) * w + x], v1 = v; if ((v0 > 0.25) !== (v1 > 0.25)) vTransitions += 1; }
           }
         }
-        const total = sum/(w*h); // [0,1]
-        const cxn = sum>1e-6 ? (cx/sum)/(w-1) : 0.5; // [0,1]
-        const cyn = sum>1e-6 ? (cy/sum)/(h-1) : 0.5; // [0,1]
-        let left=0,right=0,top=0,bottom=0;
-        for (let y=0;y<h;y++){ for (let x=0;x<w;x++){ const v=x28[y*w+x]; if (x<w/2) left+=v; else right+=v; if (y<h/2) top+=v; else bottom+=v; }}
-        const lr = (right/(right+left+1e-6));
-        const tb = (bottom/(bottom+top+1e-6));
-        const htn = Math.min(1, hTransitions/(w*h*0.35));
-        const vtn = Math.min(1, vTransitions/(w*h*0.35));
+        const total = sum / (w * h); // [0,1]
+        const cxn = sum > 1e-6 ? (cx / sum) / (w - 1) : 0.5; // [0,1]
+        const cyn = sum > 1e-6 ? (cy / sum) / (h - 1) : 0.5; // [0,1]
+        let left = 0, right = 0, top = 0, bottom = 0;
+        for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const v = x28[y * w + x]; if (x < w / 2) left += v; else right += v; if (y < h / 2) top += v; else bottom += v; } }
+        const lr = (right / (right + left + 1e-6));
+        const tb = (bottom / (bottom + top + 1e-6));
+        const htn = Math.min(1, hTransitions / (w * h * 0.35));
+        const vtn = Math.min(1, vTransitions / (w * h * 0.35));
         // Loopiness proxy: ink near perimeter low vs center high
-        let perimeter=0, center=0; const m=5;
-        for (let y=0;y<h;y++){
-          for (let x=0;x<w;x++){
-            const v=x28[y*w+x];
-            const isBorder = (x<m||x>=w-m||y<m||y>=h-m);
-            if (isBorder) perimeter+=v; else center+=v;
+        let perimeter = 0, center = 0; const m = 5;
+        for (let y = 0; y < h; y++) {
+          for (let x = 0; x < w; x++) {
+            const v = x28[y * w + x];
+            const isBorder = (x < m || x >= w - m || y < m || y >= h - m);
+            if (isBorder) perimeter += v; else center += v;
           }
         }
-        const loopiness = Math.min(1, center/(perimeter+center+1e-6)*1.8);
+        const loopiness = Math.min(1, center / (perimeter + center + 1e-6) * 1.8);
         return [total, cxn, cyn, lr, tb, htn, vtn, loopiness];
       }
 
-      function softmax(arr){ const m=Math.max(...arr); const ex=arr.map(v=>Math.exp(v-m)); const s=ex.reduce((a,b)=>a+b,0)+1e-12; return ex.map(v=>v/s); }
-      function l2norm(a){ return Math.hypot(...a) || 0; }
-      function normalize(a){ const n=l2norm(a); return n>0 ? a.map(v=>v/n) : a.slice(); }
-      function cosine(a,b){ let s=0; for (let i=0;i<a.length;i++) s+=a[i]*b[i]; const na=l2norm(a), nb=l2norm(b)||1; return na>0 ? s/(na*nb) : 0; }
+      function softmax(arr) { const m = Math.max(...arr); const ex = arr.map(v => Math.exp(v - m)); const s = ex.reduce((a, b) => a + b, 0) + 1e-12; return ex.map(v => v / s); }
+      function l2norm(a) { return Math.hypot(...a) || 0; }
+      function normalize(a) { const n = l2norm(a); return n > 0 ? a.map(v => v / n) : a.slice(); }
+      function cosine(a, b) { let s = 0; for (let i = 0; i < a.length; i++) s += a[i] * b[i]; const na = l2norm(a), nb = l2norm(b) || 1; return na > 0 ? s / (na * nb) : 0; }
 
       // MNIST-like normalization: crop to tight bbox, scale into 20x20, center in 28x28
-      function normalize28(x28){
-        const w=28,h=28, thr=0.2;
-        let minX=29,minY=29,maxX=-1,maxY=-1, sum=0, cx=0, cy=0;
-        for (let y=0;y<h;y++){
-          for (let x=0;x<w;x++){
-            const v = x28[y*w+x];
-            if (v>thr){ if (x<minX) minX=x; if (x>maxX) maxX=x; if (y<minY) minY=y; if (y>maxY) maxY=y; }
-            sum += v; cx += x*v; cy += y*v;
+      function normalize28(x28) {
+        const w = 28, h = 28, thr = 0.2;
+        let minX = 29, minY = 29, maxX = -1, maxY = -1, sum = 0, cx = 0, cy = 0;
+        for (let y = 0; y < h; y++) {
+          for (let x = 0; x < w; x++) {
+            const v = x28[y * w + x];
+            if (v > thr) { if (x < minX) minX = x; if (x > maxX) maxX = x; if (y < minY) minY = y; if (y > maxY) maxY = y; }
+            sum += v; cx += x * v; cy += y * v;
           }
         }
-        if (sum < 1e-3 || maxX<0){ return x28; }
-        const comX = cx/sum, comY = cy/sum;
-        const bw = Math.max(1, maxX-minX+1), bh = Math.max(1, maxY-minY+1);
-        const scale = 20/Math.max(bw, bh);
-        const out = new Float32Array(w*h);
+        if (sum < 1e-3 || maxX < 0) { return x28; }
+        const comX = cx / sum, comY = cy / sum;
+        const bw = Math.max(1, maxX - minX + 1), bh = Math.max(1, maxY - minY + 1);
+        const scale = 20 / Math.max(bw, bh);
+        const out = new Float32Array(w * h);
         // center of canvas
-        const cxOut = (w-1)/2, cyOut = (h-1)/2;
-        for (let y=0;y<h;y++){
-          for (let x=0;x<w;x++){
+        const cxOut = (w - 1) / 2, cyOut = (h - 1) / 2;
+        for (let y = 0; y < h; y++) {
+          for (let x = 0; x < w; x++) {
             // map output pixel to source space around COM
-            const sx = (x - cxOut)/scale + comX;
-            const sy = (y - cyOut)/scale + comY;
-            out[y*w+x] = bilinearSample(x28, w, h, sx, sy);
+            const sx = (x - cxOut) / scale + comX;
+            const sy = (y - cyOut) / scale + comY;
+            out[y * w + x] = bilinearSample(x28, w, h, sx, sy);
           }
         }
         return out;
       }
-      function bilinearSample(img, w, h, x, y){
+      function bilinearSample(img, w, h, x, y) {
         const x0 = Math.floor(x), y0 = Math.floor(y);
-        const x1 = x0+1, y1 = y0+1;
+        const x1 = x0 + 1, y1 = y0 + 1;
         const tx = x - x0, ty = y - y0;
-        function at(ix,iy){ if (ix<0||iy<0||ix>=w||iy>=h) return 0; return img[iy*w+ix]; }
-        const v00 = at(x0,y0), v10 = at(x1,y0), v01 = at(x0,y1), v11 = at(x1,y1);
-        const a = v00*(1-tx)+v10*tx; const b = v01*(1-tx)+v11*tx; return a*(1-ty)+b*ty;
+        function at(ix, iy) { if (ix < 0 || iy < 0 || ix >= w || iy >= h) return 0; return img[iy * w + ix]; }
+        const v00 = at(x0, y0), v10 = at(x1, y0), v01 = at(x0, y1), v11 = at(x1, y1);
+        const a = v00 * (1 - tx) + v10 * tx; const b = v01 * (1 - tx) + v11 * tx; return a * (1 - ty) + b * ty;
       }
       // Simple dilation (max-pooling 3x3) to thicken strokes
-      function dilate28(x){
-        const w=28,h=28; const out=new Float32Array(w*h);
-        for (let y=0;y<h;y++){
-          for (let x0=0;x0<w;x0++){
-            let m=0;
-            for (let dy=-1;dy<=1;dy++){
-              for (let dx=-1;dx<=1;dx++){
-                const xx=x0+dx, yy=y+dy; if (xx<0||yy<0||xx>=w||yy>=h) continue;
-                const v = x[yy*w+xx]; if (v>m) m=v;
+      function dilate28(x) {
+        const w = 28, h = 28; const out = new Float32Array(w * h);
+        for (let y = 0; y < h; y++) {
+          for (let x0 = 0; x0 < w; x0++) {
+            let m = 0;
+            for (let dy = -1; dy <= 1; dy++) {
+              for (let dx = -1; dx <= 1; dx++) {
+                const xx = x0 + dx, yy = y + dy; if (xx < 0 || yy < 0 || xx >= w || yy >= h) continue;
+                const v = x[yy * w + xx]; if (v > m) m = v;
               }
             }
-            out[y*w+x0]=m;
+            out[y * w + x0] = m;
           }
         }
         return out;
@@ -228,44 +360,44 @@
 
       // Glyph-based 28x28 prototypes for digits 0-9 (normalized)
       const protoGlyphs28 = [];
-      (function buildGlyphProtos(){
+      (function buildGlyphProtos() {
         const off = document.createElement('canvas'); off.width = CANVAS_PX; off.height = CANVAS_PX;
         const c = off.getContext('2d');
-        for (let d=0; d<10; d++){
-          c.fillStyle = '#ffffff'; c.fillRect(0,0,off.width,off.height);
-          c.fillStyle = '#000000'; c.textAlign='center'; c.textBaseline='middle';
+        for (let d = 0; d < 10; d++) {
+          c.fillStyle = '#ffffff'; c.fillRect(0, 0, off.width, off.height);
+          c.fillStyle = '#000000'; c.textAlign = 'center'; c.textBaseline = 'middle';
           c.font = 'bold 180px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif';
-          c.fillText(String(d), off.width/2, off.height*0.56);
-          const src = c.getImageData(0,0,off.width,off.height).data; const block = off.width/28;
-          const vec = new Float32Array(28*28);
-          for (let gy=0; gy<28; gy++){
-            for (let gx=0; gx<28; gx++){
-              let acc=0, cnt=0; const x0=Math.floor(gx*block), y0=Math.floor(gy*block);
-              for (let yy=y0; yy<y0+block; yy++){
-                for (let xx=x0; xx<x0+block; xx++){
-                  const idx=(yy*off.width+xx)*4; const r=src[idx], g=src[idx+1], b=src[idx+2];
-                  const gray=(r+g+b)/3/255; acc += (1-gray); cnt++;
+          c.fillText(String(d), off.width / 2, off.height * 0.56);
+          const src = c.getImageData(0, 0, off.width, off.height).data; const block = off.width / 28;
+          const vec = new Float32Array(28 * 28);
+          for (let gy = 0; gy < 28; gy++) {
+            for (let gx = 0; gx < 28; gx++) {
+              let acc = 0, cnt = 0; const x0 = Math.floor(gx * block), y0 = Math.floor(gy * block);
+              for (let yy = y0; yy < y0 + block; yy++) {
+                for (let xx = x0; xx < x0 + block; xx++) {
+                  const idx = (yy * off.width + xx) * 4; const r = src[idx], g = src[idx + 1], b = src[idx + 2];
+                  const gray = (r + g + b) / 3 / 255; acc += (1 - gray); cnt++;
                 }
               }
-              vec[gy*28+gx] = acc/(cnt||1);
+              vec[gy * 28 + gx] = acc / (cnt || 1);
             }
           }
           const normed = normalize28(vec);
-          const n = l2norm(normed)||1; protoGlyphs28.push(normed.map(v=>v/n));
+          const n = l2norm(normed) || 1; protoGlyphs28.push(normed.map(v => v / n));
         }
       })();
-      function dot(a,b){ let s=0; for (let i=0;i<a.length;i++) s+=a[i]*b[i]; return s; }
+      function dot(a, b) { let s = 0; for (let i = 0; i < a.length; i++) s += a[i] * b[i]; return s; }
 
       // Resize handling and node layout
-      let width=640, height=360; const margin = { top: 16, right: 8, bottom: 24, left: 8 };
+      let width = 640, height = 360; const margin = { top: 16, right: 8, bottom: 24, left: 8 };
       let inputGrid = { cell: 0, x: 0, y: 0, width: 0, height: 0 };
-      function layoutNodes(){
+      function layoutNodes() {
         // Right panel width, and a non-square aspect ratio for clarity
         width = Math.max(280, Math.round(right.clientWidth || 640));
         height = Math.max(260, Math.round(width * 0.56));
         svg.attr('width', width).attr('height', height);
         // Match canvas height to SVG height so both columns align vertically
-        try { canvas.style.height = '100%'; canvasWrap.style.height = height + 'px'; } catch(_) {}
+        try { canvas.style.height = '100%'; canvasWrap.style.height = height + 'px'; } catch (_) { }
         const innerW = width - margin.left - margin.right; const innerH = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
         // Input grid layout (28x28) at left — cap width to a fraction of innerW
@@ -273,8 +405,8 @@
         const cellByHeight = Math.floor(innerH / 28);
         const cellByWidth = Math.floor((innerW * maxGridFrac) / 28);
         let cell = Math.max(3, Math.min(cellByHeight, cellByWidth));
-        let gridH = cell * 28; let gridY = Math.floor((innerH - gridH)/2);
-        inputGrid = { cell, x: 0, y: gridY, width: cell*28, height: gridH };
+        let gridH = cell * 28; let gridY = Math.floor((innerH - gridH) / 2);
+        inputGrid = { cell, x: 0, y: gridY, width: cell * 28, height: gridH };
         // Equal horizontal gaps: grid -> L0 -> L1 -> L2
         const nLayers = layerSizes.length; // 3
         const rightLabelPad = 36; // smaller pad; use more width for spreading layers
@@ -283,30 +415,30 @@
         const desiredMinFree = rightLabelPad + nLayers * minGap; // 3 equal gaps
         if (inputGrid.width + desiredMinFree > innerW) {
           cell = Math.max(3, Math.floor((innerW - desiredMinFree) / 28));
-          gridH = cell * 28; gridY = Math.floor((innerH - gridH)/2);
-          inputGrid = { cell, x: 0, y: gridY, width: cell*28, height: gridH };
+          gridH = cell * 28; gridY = Math.floor((innerH - gridH) / 2);
+          inputGrid = { cell, x: 0, y: gridY, width: cell * 28, height: gridH };
         }
         const gridRight = inputGrid.x + inputGrid.width;
         const freeW = Math.max(nLayers * minGap, innerW - gridRight - rightLabelPad);
         const gapX = Math.min(maxGap, Math.max(minGap, Math.floor(freeW / nLayers)));
         const xs = Array.from({ length: nLayers }, (_, li) => gridRight + gapX * (li + 1));
         // Y positions evenly spaced per layer
-        layers.forEach((nodes, li)=>{
+        layers.forEach((nodes, li) => {
           const n = nodes.length;
           if (n <= 1) {
-            nodes.forEach((nd)=>{ nd.x = xs[li]; nd.y = innerH/2; });
+            nodes.forEach((nd) => { nd.x = xs[li]; nd.y = innerH / 2; });
           } else {
             const occupancy = 0.9; // use 90% of vertical space
             const span = innerH * occupancy;
             const topPad = (innerH - span) / 2;
             const spacing = span / (n - 1);
-            nodes.forEach((nd, i)=>{ nd.x = xs[li]; nd.y = topPad + i*spacing; });
+            nodes.forEach((nd, i) => { nd.x = xs[li]; nd.y = topPad + i * spacing; });
           }
         });
       }
 
-      let lastX28 = new Float32Array(28*28);
-      function nodeRadiusForNode(n){
+      let lastX28 = new Float32Array(28 * 28);
+      function nodeRadiusForNode(n) {
         const a = Math.max(0, Math.min(1, (n && typeof n.a === 'number') ? n.a : 0));
         if (n && n.layer === 2) {
           // Output nodes: variable radius based on activation
@@ -315,14 +447,14 @@
         // Hidden/feature nodes: variable radius based on activation
         return 5 + 5 * a; // ~5–10
       }
-      function renderInputGrid(){
+      function renderInputGrid() {
         if (!inputGrid || inputGrid.cell <= 0) return;
-        const data = Array.from({ length: 28*28 }, (_, i) => ({ i, v: lastX28[i] || 0 }));
-        const sel = gInput.selectAll('rect.input-px').data(data, d=>d.i);
+        const data = Array.from({ length: 28 * 28 }, (_, i) => ({ i, v: lastX28[i] || 0 }));
+        const sel = gInput.selectAll('rect.input-px').data(data, d => d.i);
         const gap = Math.max(1, Math.floor(inputGrid.cell * 0.10));
         const inner = Math.max(1, inputGrid.cell - gap);
         const offset = Math.floor(gap / 2);
-        sel.enter().append('rect').attr('class','input-px')
+        sel.enter().append('rect').attr('class', 'input-px')
           .attr('width', inner).attr('height', inner)
           .merge(sel)
           .attr('x', d => inputGrid.x + (d.i % 28) * inputGrid.cell + offset)
@@ -338,26 +470,26 @@
 
         // Border around the input grid area
         const borderSel = gInput.selectAll('rect.input-border').data([0]);
-        borderSel.enter().append('rect').attr('class','input-border')
-          .attr('fill','none')
+        borderSel.enter().append('rect').attr('class', 'input-border')
+          .attr('fill', 'none')
           .attr('rx', 0).attr('ry', 0)
-          .attr('stroke','var(--text-color)')
+          .attr('stroke', 'var(--text-color)')
           .attr('stroke-opacity', 0.25)
           .attr('stroke-width', 1)
           .lower()
           .merge(borderSel)
-          .attr('x', inputGrid.x-1)
-          .attr('y', inputGrid.y-1)
-          .attr('width', inputGrid.width+1)
-          .attr('height', inputGrid.height+1);
+          .attr('x', inputGrid.x - 1)
+          .attr('y', inputGrid.y - 1)
+          .attr('width', inputGrid.width + 1)
+          .attr('height', inputGrid.height + 1);
 
         // Centered label above the input grid
         const labelSel = gInput.selectAll('text.input-label').data([0]);
-        labelSel.enter().append('text').attr('class','input-label')
-          .attr('text-anchor','middle')
-          .style('font-size','12px')
-          .style('font-weight','700')
-          .style('fill','var(--muted-color)')
+        labelSel.enter().append('text').attr('class', 'input-label')
+          .attr('text-anchor', 'middle')
+          .style('font-size', '12px')
+          .style('font-weight', '700')
+          .style('fill', 'var(--muted-color)')
           .merge(labelSel)
           .attr('x', inputGrid.x + inputGrid.width / 2)
           .attr('y', Math.max(12, inputGrid.y - 10))
@@ -365,7 +497,7 @@
       }
 
       // Compute link path between two layered nodes using their current radii
-      function computeLinkD(d){
+      function computeLinkD(d) {
         const s = layers[d.s.l][d.s.i];
         const t = layers[d.t.l][d.t.j];
         if (!s || !t) return '';
@@ -375,10 +507,10 @@
         const x1 = s.x + rs, y1 = s.y;    // right edge of source circle
         const x2 = t.x - rt, y2 = t.y;    // left edge of target circle
         const dx = (x2 - x1) * 0.45;
-        return `M${x1},${y1} C${x1+dx},${y1} ${x2-dx},${y2} ${x2},${y2}`;
+        return `M${x1},${y1} C${x1 + dx},${y1} ${x2 - dx},${y2} ${x2},${y2}`;
       }
 
-      function renderInputLinks(){
+      function renderInputLinks() {
         // Draw bundle-like links from input grid right edge to first layer nodes (features)
         const firstLayer = layers[0];
         if (!firstLayer || !inputGrid || inputGrid.cell <= 0) { gInputLinks.selectAll('path').remove(); return; }
@@ -400,20 +532,20 @@
           return { x0, y0, x1, y1, c1x: x0 + dx, c1y: y0, c2x: x1 - dx, c2y: y1, idx };
         });
         const sel = gInputLinks.selectAll('path.input-link').data(paths);
-        sel.enter().append('path').attr('class','input-link')
-          .attr('fill','none')
-          .attr('stroke','var(--text-color)')
+        sel.enter().append('path').attr('class', 'input-link')
+          .attr('fill', 'none')
+          .attr('stroke', 'var(--text-color)')
           .attr('stroke-opacity', 0.25)
           .attr('stroke-width', 1)
-          .attr('stroke-linecap','round')
+          .attr('stroke-linecap', 'round')
           .merge(sel)
           .attr('d', d => `M${d.x0},${d.y0} C${d.c1x},${d.c1y} ${d.c2x},${d.c2y} ${d.x1},${d.y1}`)
-          .attr('stroke','var(--text-color)');
+          .attr('stroke', 'var(--text-color)');
         sel.exit().remove();
       }
 
       // Recompute input link path on the fly (used when node radii change)
-      function computeInputLinkD(idx){
+      function computeInputLinkD(idx) {
         const firstLayer = layers[0];
         const n = firstLayer[idx]; if (!n) return '';
         const x0 = inputGrid.x + inputGrid.width;
@@ -433,66 +565,66 @@
         return `M${x0},${y0} C${c1x},${c1y} ${c2x},${c2y} ${x1},${y1}`;
       }
 
-      function renderGraph(showEdges){
+      function renderGraph(showEdges) {
         layoutNodes();
         renderInputGrid();
         renderInputLinks();
         // Nodes
         const allNodes = layers.flat();
-        const nodeSel = gNodes.selectAll('circle.node').data(allNodes, d=>d.id);
-        nodeSel.enter().append('circle').attr('class','node')
+        const nodeSel = gNodes.selectAll('circle.node').data(allNodes, d => d.id);
+        nodeSel.enter().append('circle').attr('class', 'node')
           .attr('r', 10)
-          .attr('cx', d=>d.x).attr('cy', d=>d.y)
-          .attr('fill', d=> d.layer===2 ? 'var(--page-bg)' : 'var(--primary-color)')
-          .attr('fill-opacity', d=> d.layer===2 ? 1 : 0.12)
-          .attr('stroke', d=> d.layer===2 ? 'var(--border-color)' : 'var(--border-color)')
-          .attr('stroke-width',1)
-          .attr('stroke-linejoin','round')
+          .attr('cx', d => d.x).attr('cy', d => d.y)
+          .attr('fill', d => d.layer === 2 ? 'var(--page-bg)' : 'var(--primary-color)')
+          .attr('fill-opacity', d => d.layer === 2 ? 1 : 0.12)
+          .attr('stroke', d => d.layer === 2 ? 'var(--border-color)' : 'var(--border-color)')
+          .attr('stroke-width', 1)
+          .attr('stroke-linejoin', 'round')
           .merge(nodeSel)
-          .attr('cx', d=>d.x).attr('cy', d=>d.y)
+          .attr('cx', d => d.x).attr('cy', d => d.y)
           .attr('opacity', 1);
         nodeSel.exit().remove();
 
         // Labels for first hidden layer only (avoid stacking with output probs)
         const labels = [];
-        layers[0].forEach((n,i)=> labels.push({ x:n.x-30, y:n.y+4, txt:`f${i+1}` }));
+        layers[0].forEach((n, i) => labels.push({ x: n.x - 30, y: n.y + 4, txt: `f${i + 1}` }));
         const labSel = gLabels.selectAll('text').data(labels);
         labSel.enter().append('text')
-          .style('font-size','10px')
-          .style('fill','var(--muted-color)')
-          .style('paint-order','stroke')
-          .style('stroke','var(--page-bg)')
-          .style('stroke-width','3px')
-          .attr('x', d=>d.x)
-          .attr('y', d=>d.y)
-          .text(d=>d.txt)
+          .style('font-size', '10px')
+          .style('fill', 'var(--muted-color)')
+          .style('paint-order', 'stroke')
+          .style('stroke', 'var(--page-bg)')
+          .style('stroke-width', '3px')
+          .attr('x', d => d.x)
+          .attr('y', d => d.y)
+          .text(d => d.txt)
           .merge(labSel)
-          .style('paint-order','stroke')
-          .style('stroke','var(--page-bg)')
-          .style('stroke-width','5px')
-          .attr('x', d=>d.x)
-          .attr('y', d=>d.y)
-          .text(d=>d.txt);
+          .style('paint-order', 'stroke')
+          .style('stroke', 'var(--page-bg)')
+          .style('stroke-width', '5px')
+          .attr('x', d => d.x)
+          .attr('y', d => d.y)
+          .text(d => d.txt);
         labSel.exit().remove();
 
         // Links as smooth curves
-        const linkSel = gLinks.selectAll('path.link').data(links, d=> `${d.s.l}-${d.s.i}-${d.t.l}-${d.t.j}`);
-        linkSel.enter().append('path').attr('class','link')
+        const linkSel = gLinks.selectAll('path.link').data(links, d => `${d.s.l}-${d.s.i}-${d.t.l}-${d.t.j}`);
+        linkSel.enter().append('path').attr('class', 'link')
           .attr('d', computeLinkD)
-          .attr('fill','none')
-          .attr('stroke','var(--text-color)')
+          .attr('fill', 'none')
+          .attr('stroke', 'var(--text-color)')
           .attr('stroke-opacity', 0.25)
-          .attr('stroke-width', d=> 0.5 + d.w*1.2)
-          .attr('stroke-linecap','round')
+          .attr('stroke-width', d => 0.5 + d.w * 1.2)
+          .attr('stroke-linecap', 'round')
           .merge(linkSel)
           .attr('d', computeLinkD)
-          .attr('stroke','var(--text-color)')
-          .attr('stroke-width', d=> 0.5 + d.w*1.2);
+          .attr('stroke', 'var(--text-color)')
+          .attr('stroke-width', d => 0.5 + d.w * 1.2);
         linkSel.exit().remove();
 
         // Ensure output labels remain aligned with the last layer on resize
         gOutText.selectAll('g.out-label')
-          .attr('transform', function(d){
+          .attr('transform', function (d) {
             if (!d || typeof d.digit !== 'number') return d3.select(this).attr('transform');
             const n = layers[2][d.digit];
             if (!n) return d3.select(this).attr('transform');
@@ -501,73 +633,73 @@
           });
         // Ensure clip-path circles are updated on resize
         if (defs) {
-          const clips = defs.selectAll('clipPath.clip-node').data(layers[2], d=>d.id);
-          const ce = clips.enter().append('clipPath').attr('class','clip-node').attr('clipPathUnits','userSpaceOnUse').attr('id', d=>`clip-${d.id}`);
+          const clips = defs.selectAll('clipPath.clip-node').data(layers[2], d => d.id);
+          const ce = clips.enter().append('clipPath').attr('class', 'clip-node').attr('clipPathUnits', 'userSpaceOnUse').attr('id', d => `clip-${d.id}`);
           ce.append('circle');
-          clips.merge(ce).select('circle').attr('cx', d=>d.x).attr('cy', d=>d.y).attr('r', d=>nodeRadiusForNode(d));
+          clips.merge(ce).select('circle').attr('cx', d => d.x).attr('cy', d => d.y).attr('r', d => nodeRadiusForNode(d));
           clips.exit().remove();
         }
       }
 
-      function setNodeActivations(h1, h2, out){
-        layers[0].forEach((n,i)=> n.a = h1[i] || 0);
-        layers[1].forEach((n,i)=> n.a = h2[i] || 0);
-        layers[2].forEach((n,i)=> n.a = out[i] || 0);
+      function setNodeActivations(h1, h2, out) {
+        layers[0].forEach((n, i) => n.a = h1[i] || 0);
+        layers[1].forEach((n, i) => n.a = h2[i] || 0);
+        layers[2].forEach((n, i) => n.a = out[i] || 0);
         // Determine top prediction (for ghosting others)
         let argmaxIdx = 0; let bestProb = -1;
         if (Array.isArray(out)) {
-          for (let i=0;i<out.length;i++){ if (out[i] > bestProb){ bestProb = out[i]; argmaxIdx = i; } }
+          for (let i = 0; i < out.length; i++) { if (out[i] > bestProb) { bestProb = out[i]; argmaxIdx = i; } }
         }
         // Color/size by activation with smooth transitions
         gNodes.selectAll('circle.node')
           .transition().duration(180).ease(d3.easeCubicOut)
-          .attr('fill', d=> d.layer===2 ? 'var(--page-bg)' : 'var(--primary-color)')
-          .attr('fill-opacity', d=> d.layer===2 ? 1 : (0.12 + 0.58*Math.min(1, d.a||0)))
+          .attr('fill', d => d.layer === 2 ? 'var(--page-bg)' : 'var(--primary-color)')
+          .attr('fill-opacity', d => d.layer === 2 ? 1 : (0.12 + 0.58 * Math.min(1, d.a || 0)))
           .attr('stroke', 'var(--primary-color)')
-          .attr('stroke-opacity', d=> (d.layer===2 ? 0.9 : (0.45 + 0.45*Math.min(1, d.a||0))))
-          .attr('opacity', d=> 0.55 + 0.45*Math.min(1, d.a||0))
-          .attr('r', d=> nodeRadiusForNode(d));
+          .attr('stroke-opacity', d => (d.layer === 2 ? 0.9 : (0.45 + 0.45 * Math.min(1, d.a || 0))))
+          .attr('opacity', d => 0.55 + 0.45 * Math.min(1, d.a || 0))
+          .attr('r', d => nodeRadiusForNode(d));
         // Link opacity by activation flow
         gLinks.selectAll('path.link')
           .transition().duration(180).ease(d3.easeCubicOut)
           .attr('d', computeLinkD)
-          .attr('stroke','var(--text-color)')
-          .attr('stroke-opacity', d=>{
+          .attr('stroke', 'var(--text-color)')
+          .attr('stroke-opacity', d => {
             const aS = layers[d.s.l][d.s.i].a || 0; const aT = layers[d.t.l][d.t.j].a || 0;
             return Math.min(1, 0.15 + 0.85 * (aS * aT));
           })
-          .attr('stroke-width', d=>{
+          .attr('stroke-width', d => {
             const aS = layers[d.s.l][d.s.i].a || 0; const aT = layers[d.t.l][d.t.j].a || 0;
-            return 0.6 + 2.2*(aS*aT);
+            return 0.6 + 2.2 * (aS * aT);
           });
         // Theme-aware and activation-aware input links
         gInputLinks.selectAll('path.input-link')
           .transition().duration(180).ease(d3.easeCubicOut)
-          .attr('d', (d)=> computeInputLinkD(d.idx))
-          .attr('stroke','var(--text-color)')
+          .attr('d', (d) => computeInputLinkD(d.idx))
+          .attr('stroke', 'var(--text-color)')
           .attr('stroke-opacity', 0.25)
-          .attr('stroke-width', d=> 0.6 + 2.0*(layers[0][d.idx] ? (layers[0][d.idx].a||0) : 0));
+          .attr('stroke-width', d => 0.6 + 2.0 * (layers[0][d.idx] ? (layers[0][d.idx].a || 0) : 0));
         // Update clip-path circles to match new radii/positions of output nodes
         if (defs) {
-          const clips = defs.selectAll('clipPath.clip-node').data(layers[2], d=>d.id);
+          const clips = defs.selectAll('clipPath.clip-node').data(layers[2], d => d.id);
           clips.select('circle')
             .transition().duration(180).ease(d3.easeCubicOut)
-            .attr('cx', d=>d.x)
-            .attr('cy', d=>d.y)
-            .attr('r', d=> nodeRadiusForNode(d));
+            .attr('cx', d => d.x)
+            .attr('cy', d => d.y)
+            .attr('r', d => nodeRadiusForNode(d));
         }
         // Theme-aware input links on updates handled above via transition
         // Output labels: digit placed to the right of the node
-        const outs = layers[2].map((n,i)=>({ x:n.x + nodeRadiusForNode(n) + 8, y:n.y, digit: i, prob: (out[i]||0), isTop: i===argmaxIdx }));
-        const gSel = gOutText.selectAll('g.out-label').data(outs, d=>d.digit);
-        const gEnter = gSel.enter().append('g').attr('class','out-label');
-        gEnter.append('text').attr('class','out-digit')
-          .style('font-size','12px').style('font-weight','800').style('fill','var(--text-color)')
-          .attr('text-anchor','start').attr('dominant-baseline','middle')
-          .style('paint-order','stroke').style('stroke','var(--transparent-page-contrast)').style('stroke-width','3px');
+        const outs = layers[2].map((n, i) => ({ x: n.x + nodeRadiusForNode(n) + 8, y: n.y, digit: i, prob: (out[i] || 0), isTop: i === argmaxIdx }));
+        const gSel = gOutText.selectAll('g.out-label').data(outs, d => d.digit);
+        const gEnter = gSel.enter().append('g').attr('class', 'out-label');
+        gEnter.append('text').attr('class', 'out-digit')
+          .style('font-size', '12px').style('font-weight', '800').style('fill', 'var(--text-color)')
+          .attr('text-anchor', 'start').attr('dominant-baseline', 'middle')
+          .style('paint-order', 'stroke').style('stroke', 'var(--transparent-page-contrast)').style('stroke-width', '3px');
         const merged = gEnter.merge(gSel)
-          .attr('transform', d=>`translate(${d.x},${d.y})`)
-          .each(function(d){
+          .attr('transform', d => `translate(${d.x},${d.y})`)
+          .each(function (d) {
             const sel = d3.select(this);
             sel.select('text.out-digit')
               .attr('x', 0).attr('y', 0)
@@ -581,28 +713,28 @@
         gSel.exit().remove();
 
         // Output liquid fill using clipPath + rect from bottom
-        const rects = gNodes.selectAll('rect.out-liquid').data(layers[2], d=>d.id);
-        const rectEnter = rects.enter().append('rect').attr('class','out-liquid')
-          .attr('fill','var(--primary-color)')
+        const rects = gNodes.selectAll('rect.out-liquid').data(layers[2], d => d.id);
+        const rectEnter = rects.enter().append('rect').attr('class', 'out-liquid')
+          .attr('fill', 'var(--primary-color)')
           .attr('fill-opacity', 0.55)
           .attr('clip-path', d => `url(#clip-${d.id})`);
         rectEnter.merge(rects)
           .transition().duration(180).ease(d3.easeCubicOut)
-          .attr('x', d=> d.x - nodeRadiusForNode(d))
-          .attr('width', d=> 2 * nodeRadiusForNode(d))
-          .attr('y', d=> {
+          .attr('x', d => d.x - nodeRadiusForNode(d))
+          .attr('width', d => 2 * nodeRadiusForNode(d))
+          .attr('y', d => {
             const r = nodeRadiusForNode(d);
-            const h = 2 * r * Math.max(0, Math.min(1, d.a||0));
+            const h = 2 * r * Math.max(0, Math.min(1, d.a || 0));
             return d.y + r - h;
           })
-          .attr('height', d=> 2 * nodeRadiusForNode(d) * Math.max(0, Math.min(1, d.a||0)))
+          .attr('height', d => 2 * nodeRadiusForNode(d) * Math.max(0, Math.min(1, d.a || 0)))
           .attr('fill-opacity', 0.55);
         rects.exit().remove();
       }
 
       // (no separate updateBars; bars are rendered next to nodes)
 
-      function runPipeline(){
+      function runPipeline() {
         const x28raw = downsample28();
         const x28 = dilate28(normalize28(x28raw));
         // Update input grid data
@@ -615,14 +747,14 @@
         // Hidden 1 = raw features
         const h1 = feats;
         // Hidden 2 = simple non-linear mix for visualization only
-        const h2 = layers[1].map((_, j)=>{
-          let s=0; for (let i=0;i<layers[0].length;i++){ const w = (Math.sin(i*17+j*31)+1)/2 * 0.8 + 0.1; s += w*h1[i]; }
-          return Math.tanh(s*0.8);
+        const h2 = layers[1].map((_, j) => {
+          let s = 0; for (let i = 0; i < layers[0].length; i++) { const w = (Math.sin(i * 17 + j * 31) + 1) / 2 * 0.8 + 0.1; s += w * h1[i]; }
+          return Math.tanh(s * 0.8);
         });
         let prob;
-        if (inkMass < 0.03){
+        if (inkMass < 0.03) {
           // Too little ink: return near-uniform distribution
-          prob = Array.from({length:10}, ()=> 1/10);
+          prob = Array.from({ length: 10 }, () => 1 / 10);
         } else {
           // Prefer TFJS model if available
           const tfProbs = predictTfjs(x28);
@@ -632,115 +764,85 @@
             // Fallback: rely mostly on glyph similarity
             const x28n = normalize(x28);
             const logitsGlyph = protoGlyphs28.map(p => 8.0 * cosine(x28n, p));
-            const logitsLinear = W.map((row, k)=> dot(row, h1) + b[k]);
-            const logits = logitsGlyph.map((v,k)=> v + 0.2*logitsLinear[k]);
+            const logitsLinear = W.map((row, k) => dot(row, h1) + b[k]);
+            const logits = logitsGlyph.map((v, k) => v + 0.2 * logitsLinear[k]);
             prob = softmax(logits);
           }
         }
-        setNodeActivations(h1, h2.map(v => (v+1)/2), prob);
+        setNodeActivations(h1, h2.map(v => (v + 1) / 2), prob);
       }
 
-      function downsample28(){
+      function downsample28() {
         // From canvas (224x224) to 28x28 by average pooling in 8x8 blocks
-        const block = CANVAS_PX/28; // 8
-        const src = ctx.getImageData(0,0,CANVAS_PX,CANVAS_PX).data;
-        const out = new Float32Array(28*28);
-        for (let gy=0; gy<28; gy++){
-          for (let gx=0; gx<28; gx++){
-            let acc=0; let cnt=0;
-            const x0 = Math.floor(gx*block), y0 = Math.floor(gy*block);
-            for (let y=y0; y<y0+block; y++){
-              for (let x=x0; x<x0+block; x++){
-                const idx = (y*CANVAS_PX + x)*4; // RGBA
-                const r=src[idx], g=src[idx+1], b=src[idx+2];
-                const gray = (r+g+b)/3/255; // 1: white, 0: black
-                const ink = 1-gray; // 1: ink/black
+        const block = CANVAS_PX / 28; // 8
+        const src = ctx.getImageData(0, 0, CANVAS_PX, CANVAS_PX).data;
+        const out = new Float32Array(28 * 28);
+        for (let gy = 0; gy < 28; gy++) {
+          for (let gx = 0; gx < 28; gx++) {
+            let acc = 0; let cnt = 0;
+            const x0 = Math.floor(gx * block), y0 = Math.floor(gy * block);
+            for (let y = y0; y < y0 + block; y++) {
+              for (let x = x0; x < x0 + block; x++) {
+                const idx = (y * CANVAS_PX + x) * 4; // RGBA
+                const r = src[idx], g = src[idx + 1], b = src[idx + 2];
+                const gray = (r + g + b) / 3 / 255; // 1: white, 0: black
+                const ink = 1 - gray; // 1: ink/black
                 acc += ink; cnt++;
               }
             }
-            out[gy*28+gx] = acc/(cnt||1);
+            out[gy * 28 + gx] = acc / (cnt || 1);
           }
         }
         return out;
       }
 
-      function clearCanvas(){ ctx.fillStyle = '#ffffff'; ctx.fillRect(0,0,CANVAS_PX,CANVAS_PX); runPipeline(); }
+      function clearCanvas() { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, CANVAS_PX, CANVAS_PX); runPipeline(); }
 
       // Drawing interactions
-      let drawing=false; let last=null;
-      let hasInteracted=false;
+      let drawing = false; let last = null;
+      let hasInteracted = false;
       const getPos = (ev) => {
         const rect = canvas.getBoundingClientRect();
-        const sx = CANVAS_PX/rect.width; const sy = CANVAS_PX/rect.height;
-        const x = (('touches' in ev)? ev.touches[0].clientX : ev.clientX) - rect.left;
-        const y = (('touches' in ev)? ev.touches[0].clientY : ev.clientY) - rect.top;
-        return { x: x*sx, y: y*sy };
+        const sx = CANVAS_PX / rect.width; const sy = CANVAS_PX / rect.height;
+        const x = (('touches' in ev) ? ev.touches[0].clientX : ev.clientX) - rect.left;
+        const y = (('touches' in ev) ? ev.touches[0].clientY : ev.clientY) - rect.top;
+        return { x: x * sx, y: y * sy };
       };
-      function drawTo(p){
+      function drawTo(p) {
         const size = 24;
-        ctx.lineCap='round'; ctx.lineJoin='round'; ctx.strokeStyle='#000000'; ctx.lineWidth=size;
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = '#000000'; ctx.lineWidth = size;
         if (!last) last = p;
         ctx.beginPath(); ctx.moveTo(last.x, last.y); ctx.lineTo(p.x, p.y); ctx.stroke();
         last = p; runPipeline();
       }
-      function onDown(ev){
-        drawing=true; last=null;
-        if (!hasInteracted){ hasInteracted=true; try { eraseBtn.style.display = 'flex'; } catch(_) {} }
+      function onDown(ev) {
+        drawing = true; last = null;
+        if (!hasInteracted) { hasInteracted = true; try { eraseBtn.style.display = 'flex'; } catch (_) { } }
         drawTo(getPos(ev)); ev.preventDefault();
       }
-      function onMove(ev){ if (!drawing) return; drawTo(getPos(ev)); ev.preventDefault(); }
-      function onUp(){ drawing=false; last=null; }
+      function onMove(ev) { if (!drawing) return; drawTo(getPos(ev)); ev.preventDefault(); }
+      function onUp() { drawing = false; last = null; }
       canvas.addEventListener('mousedown', onDown); canvas.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp);
-      canvas.addEventListener('touchstart', onDown, { passive:false }); canvas.addEventListener('touchmove', onMove, { passive:false }); window.addEventListener('touchend', onUp);
+      canvas.addEventListener('touchstart', onDown, { passive: false }); canvas.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', onUp);
 
       // (erase button handled as overlay)
       const rerender = () => { renderGraph(true); };
       if (window.ResizeObserver) {
-        const ro = new ResizeObserver(()=>rerender());
+        const ro = new ResizeObserver(() => rerender());
         ro.observe(right);
         ro.observe(canvas);
       } else { window.addEventListener('resize', rerender); }
 
-      // TFJS model (optional)
+      // TFJS model disabled - using glyph-based fallback only
       let tfModel = null;
       const tryLoadModel = async () => {
-        await new Promise((res)=> ensureTF(res));
-        const candidates = [
-          // Prefer public path via symlink to assets/data
-          '/data/mnist-variant-model.json',
-          // Fallbacks to relative copies under content assets (shards must be colocated)
-          './assets/data/mnist-variant-model.json',
-          '../assets/data/mnist-variant-model.json',
-          '/assets/data/mnist-variant-model.json',
-          // Fallback to public TFJS MNIST
-          'https://storage.googleapis.com/tfjs-models/tfjs/mnist/model.json'
-        ];
-        for (const u of candidates){
-          try { tfModel = await tf.loadLayersModel(u); return; } catch(_) { /* try next */ }
-        }
+        // Model loading disabled to avoid 404 errors
         tfModel = null;
       };
 
-      function predictTfjs(x28){
-        if (!tfModel || !window.tf) return null;
-        const run = (arr) => {
-          const t = tf.tidy(()=> tf.tensor(arr, [28,28,1]).expandDims(0));
-          try { const y = tfModel.predict(t); const p = y.softmax(); const out = Array.from(p.dataSync()); tf.dispose([y,p,t]); return out; } catch(e){ tf.dispose(t); return null; }
-        };
-        // Try both orientations and keep the one with higher confidence
-        const p1 = run(x28);
-        const inv = x28.map(v=>1-v);
-        const p2 = run(inv);
-        let probs = p1 || p2;
-        if (p1 && p2){
-          const m1 = Math.max(...p1), m2 = Math.max(...p2);
-          probs = m2>m1 ? p2 : p1;
-        }
-        if (!probs) return null;
-        // Normalize output size to 10 classes (pad or slice)
-        if (probs.length < 10){ probs = probs.concat(Array(10 - probs.length).fill(0)); }
-        if (probs.length > 10){ probs = probs.slice(0,10); }
-        return probs;
+      function predictTfjs(x28) {
+        // Always return null to use glyph-based fallback
+        return null;
       }
 
       // Initial render
@@ -751,8 +853,4 @@
 
     if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
   })();
-</script>
-
-
-
-
+</script>

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

@@ -21,7 +21,7 @@
   .d3-pie-quad.hovering .slice.ghost {
     opacity: .25;
   }
-  /* Layout HTML (pas JS) pour la grille et les cellules */
+  /* HTML layout (not JS) for grid and cells */
   .d3-pie-quad .plots-grid {
     display: flex;
     flex-wrap: wrap;
@@ -33,21 +33,21 @@
     margin-right: auto;
     width: 100%;
   }
-  /* Par défaut (flux ~1280): 2 colonnes centrées */
+  /* Default (flow ~1280): 2 centered columns */
   .content-grid .d3-pie-quad .plots-grid { width: 100%; }
   .content-grid .d3-pie-quad .pie-cell { flex: 0 0 calc((100% - 20px)/2); }
-  /* En wrappers larges: viser 4 colonnes si l'espace le permet */
+  /* In wide wrappers: aim for 4 columns if space allows */
   .wide .d3-pie-quad .plots-grid,
   .full-width .d3-pie-quad .plots-grid { width: 100%; }
   .wide .d3-pie-quad .pie-cell,
   .full-width .d3-pie-quad .pie-cell { flex: 0 0 calc((100% - 60px)/4); }
-  /* Forcer 2 colonnes dans le flux lorsque le parent ~1280px */
+  /* Force 2 columns in flow when parent ~1280px */
   .content-grid .d3-pie-quad .plots-grid { width: min(740px, 100%); }
   .d3-pie-quad .pie-cell {
     display: flex;
     flex-direction: column;
     align-items: center;
-    flex: 0 0 360px; /* 2 colonnes fixes dans le flux à 1280px */
+    flex: 0 0 360px; /* 2 fixed columns in flow at 1280px */
   }
   /* 4/2/1 colonnes en fonction de la largeur du parent */
   /* @container (min-width: 740px) {
@@ -179,10 +179,10 @@
       const CAPTION_GAP = 36;   // espace entre titre et donut
       const GAP_X = 20;         // espace entre colonnes
       const GAP_Y = 12;         // espace entre lignes
-      const TOP_OFFSET = 4;     // décalage vertical supplémentaire pour aérer le haut
+      const TOP_OFFSET = 4;     // additional vertical offset to air out the top
       const DONUT_INNER_RATIO = 0.58; // ratio du trou central (0 = pie plein, 0.5 = moitié)
       // LEGEND_GAP supprimé: l'espacement est désormais géré en CSS via .d3-pie-quad .legend { margin-bottom }
-      const SVG_VPAD = 16;      // padding vertical supplémentaire à l'intérieur des SVG pour éviter la coupe
+      const SVG_VPAD = 16;      // additional vertical padding inside SVGs to avoid cropping
       
       const updateSize = () => {
         width = container.clientWidth || 800;
@@ -199,7 +199,7 @@
       function drawPies(rows){
         const { innerWidth } = updateSize();
 
-        // Catégories (triées) + échelle de couleurs harmonisée avec banner.html
+        // Categories (sorted) + color scale harmonized with banner.html
         const categories = Array.from(new Set(rows.map(r => r.eagle_cathegory || 'Unknown'))).sort();
         const getCatColors = (n) => {
           try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch(_) {}

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

@@ -80,7 +80,7 @@
       function getDotStrokeColor(fillColor = null){ 
         if (!fillColor) return 'var(--muted-color)';
         
-        // Résoudre les variables CSS en couleurs réelles
+        // Resolve CSS variables to actual colors
         let resolvedColor = fillColor;
         if (fillColor.startsWith('var(')) {
           const tempEl = document.createElement('div');

app/src/content/embeds/d3-umap-typography.html

@@ -0,0 +1,804 @@
+<div class="typography-umap-2d">
+    <svg class="main-svg" xmlns="http://www.w3.org/2000/svg">
+        <defs id="font-defs"></defs>
+        <g class="viewport-group"></g>
+        <g class="ui-group"></g>
+    </svg>
+    <div class="ui-layer"></div>
+</div>
+<style>
+    .typography-umap-2d {
+        position: relative;
+        min-height: 280px;
+        max-height: 450px;
+        width: 100%;
+        overflow: hidden;
+        cursor: grab;
+        contain: layout style paint;
+    }
+
+    .main-svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+        cursor: grab;
+        /* Rendering optimizations */
+        shape-rendering: optimizeLegibility;
+        text-rendering: optimizeLegibility;
+        image-rendering: optimizeLegibility;
+        /* GPU layer */
+        will-change: transform;
+        transform: translateZ(0);
+    }
+
+    .typography-umap-2d:active {
+        cursor: grabbing;
+    }
+
+    /* Viewport - THE only element that receives transforms */
+    .viewport {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+    }
+
+    /* Font glyphs with expanded hit area */
+    .font-glyph-group {
+        cursor: pointer;
+    }
+
+    .font-hit-area {
+        cursor: pointer;
+    }
+
+    .font-glyph {
+        pointer-events: none;
+        /* The glyph itself no longer intercepts events */
+    }
+
+    /* Native SVG centroid labels */
+    .centroid-label {
+        font-weight: 700;
+        font-size: 14px;
+        pointer-events: none;
+        paint-order: stroke fill;
+        stroke: var(--page-bg);
+        stroke-width: 3px;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+    }
+
+    /* UI Layer - static */
+    .ui-layer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 100;
+    }
+
+    /* HTML tooltip in foreignObject */
+    .svg-tooltip {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    .tooltip-html {
+        background: var(--surface-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        padding: 12px;
+        font-size: 12px;
+        line-height: 1.4;
+        color: var(--text-color);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        white-space: nowrap;
+        font-family: var(--font-sans);
+        min-width: 140px;
+        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
+    }
+
+    .tooltip-title {
+        font-weight: 600;
+        font-size: 13px;
+        margin-bottom: 4px;
+        color: var(--text-color);
+    }
+
+    .tooltip-category {
+        font-size: 11px;
+        color: var(--muted-color);
+        margin-bottom: 2px;
+    }
+
+    /* Zoom controls */
+    .zoom-controls {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        pointer-events: all;
+    }
+
+    .zoom-controls button {
+        background: var(--surface-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: bold;
+        color: var(--text-color);
+        transition: all 0.2s ease;
+    }
+
+    .zoom-controls button:hover {
+        background: var(--primary-color);
+        color: white;
+        transform: scale(1.1);
+    }
+</style>
+
+<script>
+    (() => {
+        // Ensure D3 is loaded
+        const ensureD3 = (cb) => {
+            if (window.d3) return cb();
+            const script = document.createElement('script');
+            script.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+            script.onload = cb;
+            document.head.appendChild(script);
+        };
+
+        const bootstrap = () => {
+            // Get container
+            const containers = document.querySelectorAll('.typography-umap-2d');
+            const container = containers[containers.length - 1];
+            if (!container || container.dataset.mounted) return;
+            container.dataset.mounted = 'true';
+
+            // SVG elements - Native architecture
+            const mainSvg = container.querySelector('.main-svg');
+            let fontDefs = container.querySelector('#font-defs');
+            let viewportGroup = container.querySelector('.viewport-group');
+            const uiGroup = container.querySelector('.ui-group');
+            const uiLayer = container.querySelector('.ui-layer');
+
+            // Create viewportGroup if necessary (will be used as zoomGroup)
+            if (!viewportGroup) {
+                viewportGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                viewportGroup.className = 'viewport-group';
+                mainSvg.appendChild(viewportGroup);
+            }
+
+            // Check and create fontDefs if necessary
+            if (!fontDefs) {
+                fontDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+                fontDefs.id = 'font-defs';
+                mainSvg.insertBefore(fontDefs, mainSvg.firstChild);
+            }
+
+            // State
+            let width = 800, height = 500;
+            const margin = 20;
+            let data = [];
+            let visibleGlyphs = new Map();
+            let centroids = new Map();
+            let transform = d3.zoomIdentity;
+            let isZooming = false;
+
+            // Native SVG tooltip
+            let tooltipGroup = null;
+            let currentTooltipFont = null;
+            let hoverTimeout = null;
+
+            // Scales
+            const x = d3.scaleLinear();
+            const y = d3.scaleLinear();
+            const color = d3.scaleOrdinal(d3.schemeTableau10);
+
+            // Typography families
+            const families = {
+                'serif': 'Serif',
+                'sans-serif': 'Sans Serif',
+                'monospace': 'Monospace',
+                'display': 'Display',
+                'handwriting': 'Handwriting',
+                'geometric': 'Geometric'
+            };
+
+            // Mapping fonts to sprite IDs
+            let fontMapping = {};
+
+            // Load mapping and inject sprite into defs - SIMPLIFIED APPROACH
+            const initSprite = async () => {
+                try {
+                    // Load mapping
+                    const mappingPaths = ['/data/font-sprite-mapping.json', './assets/data/font-sprite-mapping.json', '../assets/data/font-sprite-mapping.json'];
+                    let mappingResponse;
+                    for (const path of mappingPaths) {
+                        try {
+                            mappingResponse = await fetch(path);
+                            if (mappingResponse.ok) break;
+                        } catch (e) { }
+                    }
+                    if (!mappingResponse?.ok) throw new Error('Mapping not found');
+                    fontMapping = await mappingResponse.json();
+
+                    // Load SVG sprite
+                    const spritePaths = ['/data/font-sprite.svg', './assets/sprites/font-sprite.svg', '../assets/sprites/font-sprite.svg'];
+                    let spriteResponse;
+                    for (const path of spritePaths) {
+                        try {
+                            spriteResponse = await fetch(path);
+                            if (spriteResponse.ok) break;
+                        } catch (e) { }
+                    }
+                    if (!spriteResponse?.ok) throw new Error('Sprite not found');
+                    const spriteContent = await spriteResponse.text();
+
+                    // SIMPLIFIED APPROACH: Inject complete sprite at beginning of document
+                    // This makes symbols available globally via <use>
+                    if (!document.getElementById('global-font-sprite')) {
+                        const spriteContainer = document.createElement('div');
+                        spriteContainer.id = 'global-font-sprite';
+                        spriteContainer.innerHTML = spriteContent;
+                        spriteContainer.style.display = 'none';
+                        spriteContainer.style.position = 'absolute';
+                        spriteContainer.style.width = '0';
+                        spriteContainer.style.height = '0';
+                        document.body.insertBefore(spriteContainer, document.body.firstChild);
+                    }
+
+                } catch (error) {
+                    console.error('Sprite loading error:', error);
+                }
+            };
+
+            const getFontSymbolId = (fontName) => {
+                const mapped = fontMapping[fontName];
+                if (mapped) return mapped;
+
+                // Fallback: generate ID from name
+                return fontName.replace(/\s+/g, '_').replace(/[^a-zA-Z0-9_]/g, '').toLowerCase() + '_a';
+            };
+
+            const createFontUse = (fontName, x, y) => {
+                const symbolId = getFontSymbolId(fontName);
+
+                // Group containing glyph and its hit area
+                const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                group.setAttribute('class', 'font-glyph-group');
+                group.setAttribute('data-font', fontName);
+
+                // Invisible hit area (larger square)
+                const hitArea = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+                hitArea.setAttribute('x', x - 12);
+                hitArea.setAttribute('y', y - 12);
+                hitArea.setAttribute('width', '24');
+                hitArea.setAttribute('height', '24');
+                hitArea.setAttribute('fill', 'transparent');
+                hitArea.setAttribute('class', 'font-hit-area');
+                hitArea.setAttribute('data-font', fontName);
+
+                // The visible glyph
+                const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+                use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `#${symbolId}`);
+                use.setAttribute('x', x - 8);
+                use.setAttribute('y', y - 8);
+                use.setAttribute('width', '16');
+                use.setAttribute('height', '16');
+                use.setAttribute('class', 'font-glyph');
+                use.setAttribute('data-font', fontName);
+
+                // Simple click handler with delay to avoid conflicts with D3
+                group.addEventListener('click', (e) => {
+                    if (!isZooming) {
+                        // Small delay to ensure it's not a drag
+                        setTimeout(() => {
+                            if (!isZooming) {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                const fontData = data.find(d => d.label === fontName);
+                                if (fontData && fontData.googleFontsUrl) {
+                                    window.open(fontData.googleFontsUrl, '_blank');
+                                }
+                            }
+                        }, 10);
+                    }
+                });
+
+                group.appendChild(hitArea);
+                group.appendChild(use);
+
+                return group;
+            };
+
+            // TOOLTIP SYSTEM with foreignObject + HTML
+            const createTooltipGroup = () => {
+                if (tooltipGroup) return tooltipGroup;
+
+                tooltipGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                tooltipGroup.setAttribute('class', 'svg-tooltip');
+
+                // foreignObject to contain HTML
+                const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+                foreignObject.setAttribute('width', '160');
+                foreignObject.setAttribute('height', '60');
+
+                // HTML content in the foreignObject
+                const htmlDiv = document.createElement('div');
+                htmlDiv.className = 'tooltip-html';
+                htmlDiv.innerHTML = `
+                    <div class="tooltip-title"></div>
+                    <div class="tooltip-category">
+                        <span class="tooltip-category-text"></span>
+                    </div>
+                `;
+
+                foreignObject.appendChild(htmlDiv);
+                tooltipGroup.appendChild(foreignObject);
+
+                uiGroup.appendChild(tooltipGroup);
+                return tooltipGroup;
+            };
+
+            const showTooltip = (fontData, mouseX, mouseY) => {
+                if (isZooming) return;
+
+                // Clear pending hide
+                if (hoverTimeout) {
+                    clearTimeout(hoverTimeout);
+                    hoverTimeout = null;
+                }
+
+                // Same font, just update position
+                if (currentTooltipFont === fontData.label) {
+                    updateTooltipPosition(mouseX, mouseY);
+                    return;
+                }
+
+                currentTooltipFont = fontData.label;
+                const tooltip = createTooltipGroup();
+                const clr = color(fontData.group);
+
+                // Update HTML content
+                const titleEl = tooltip.querySelector('.tooltip-title');
+                const categoryTextEl = tooltip.querySelector('.tooltip-category-text');
+
+                titleEl.textContent = fontData.label;
+                categoryTextEl.textContent = families[fontData.group] || fontData.group;
+
+                // Position tooltip in screen coordinates (SVG viewport coordinates)
+                const { x: svgX, y: svgY } = screenToSvg(mouseX, mouseY);
+
+                // Fixed size for foreignObject (smaller without preview)
+                const tooltipWidth = 160;
+                const tooltipHeight = 60;
+
+                let tooltipX = svgX + 15;
+                let tooltipY = svgY - tooltipHeight - 10;
+
+                // Keep tooltip in bounds
+                if (tooltipX + tooltipWidth > width) tooltipX = svgX - tooltipWidth - 15;
+                if (tooltipY < 0) tooltipY = svgY + 15;
+
+                tooltip.setAttribute('transform', `translate(${tooltipX}, ${tooltipY})`);
+                tooltip.style.opacity = '1';
+            };
+
+            const hideTooltip = () => {
+                if (!tooltipGroup || hoverTimeout) return;
+
+                hoverTimeout = setTimeout(() => {
+                    if (tooltipGroup) {
+                        tooltipGroup.style.opacity = '0';
+                    }
+                    currentTooltipFont = null;
+                    hoverTimeout = null;
+                }, 100);
+            };
+
+            const updateTooltipPosition = (mouseX, mouseY) => {
+                if (!tooltipGroup || !currentTooltipFont) return;
+
+                const { x: svgX, y: svgY } = screenToSvg(mouseX, mouseY);
+
+                const tooltipWidth = 160;
+                const tooltipHeight = 60;
+
+                let tooltipX = svgX + 15;
+                let tooltipY = svgY - tooltipHeight - 10;
+
+                if (tooltipX + tooltipWidth > width) tooltipX = svgX - tooltipWidth - 15;
+                if (tooltipY < 0) tooltipY = svgY + 15;
+
+                tooltipGroup.setAttribute('transform', `translate(${tooltipX}, ${tooltipY})`);
+            };
+
+            const createFallbackSvg = () => {
+                return `
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="16" height="16">
+                        <rect width="80" height="80" fill="var(--surface-bg)" stroke="var(--border-color)" stroke-width="1"/>
+                        <text x="40" y="50" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-size="32" fill="currentColor">A</text>
+                    </svg>
+                `;
+            };
+
+            // CORE: Update viewport transform - SVG NATIVE
+            const updateTransform = () => {
+                const { k, x: tx, y: ty } = transform;
+                viewportGroup.setAttribute('transform', `translate(${tx}, ${ty}) scale(${k})`);
+
+                // Adjust centroid label size to remain constant on screen
+                // centroids.forEach((labelElement, family) => {
+                //     const inverseScale = 1 / k;
+                //     // Get original centroid position
+                //     const originalX = parseFloat(labelElement.getAttribute('data-x'));
+                //     const originalY = parseFloat(labelElement.getAttribute('data-y'));
+
+                //     // Apply inverse scale centered on label position
+                //     labelElement.setAttribute('transform', `translate(${originalX}, ${originalY}) scale(${inverseScale}) translate(${-originalX}, ${-originalY})`);
+                // });
+            };
+
+            // Native SVG render - ULTRA PERFORMANCE
+            const render = () => {
+                if (!data.length) return;
+
+                // Create all glyphs as <use> elements in SVG
+                data.forEach((d, i) => {
+                    if (visibleGlyphs.has(i)) return; // Already created
+
+                    const useElement = createFontUse(d.label, x(d.x), y(d.y));
+                    viewportGroup.appendChild(useElement);
+                    visibleGlyphs.set(i, useElement);
+                });
+
+                // Native SVG centroids with density-weighted position
+                // if (centroids.size === 0) {
+                //     const groups = d3.rollup(data, v => {
+                //         // Calculate centroid weighted by local density
+                //         const positions = v.map(d => ({ x: d.x, y: d.y }));
+
+                //         // For each point, calculate its local density (number of neighbors within radius)
+                //         const radius = 2.0; // Radius to calculate local density
+                //         const densityWeights = positions.map(pos => {
+                //             const neighbors = positions.filter(other => {
+                //                 const dist = Math.sqrt(Math.pow(pos.x - other.x, 2) + Math.pow(pos.y - other.y, 2));
+                //                 return dist <= radius;
+                //             });
+                //             return neighbors.length; // Weight = number of neighbors
+                //         });
+
+                //         // Calculate weighted centroid
+                //         const totalWeight = d3.sum(densityWeights);
+                //         const weightedX = d3.sum(positions, (d, i) => d.x * densityWeights[i]) / totalWeight;
+                //         const weightedY = d3.sum(positions, (d, i) => d.y * densityWeights[i]) / totalWeight;
+
+                //         return {
+                //             x: weightedX,
+                //             y: weightedY,
+                //             count: v.length
+                //         };
+                //     }, d => d.group);
+
+                //     groups.forEach((info, family) => {
+                //         if (info.count < 3) return; // Show groups with 3+ fonts
+
+                //         const posX = x(info.x);
+                //         const posY = y(info.y);
+
+                //         const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                //         text.setAttribute('x', posX);
+                //         text.setAttribute('y', posY);
+                //         text.setAttribute('data-x', posX); // Store original position
+                //         text.setAttribute('data-y', posY); // Store original position
+                //         text.setAttribute('class', 'centroid-label');
+                //         text.setAttribute('text-anchor', 'middle');
+                //         text.setAttribute('dominant-baseline', 'middle');
+                //         text.setAttribute('fill', color(family));
+                //         text.textContent = families[family] || family;
+
+                //         viewportGroup.appendChild(text);
+                //         centroids.set(family, text);
+                //     });
+                // }
+            };
+
+            // Zoom handler - ONLY transform viewport
+            const handleZoom = (event) => {
+                transform = event.transform;
+                updateTransform();
+            };
+
+            // Professional approach for zoom/pan constraints
+            const getConstraints = () => {
+                // No data = generic default constraints
+                if (!data.length) {
+                    return {
+                        scaleExtent: [0.25, 10],
+                        translateExtent: [[-width * 0.5, -height * 0.5], [width * 1.5, height * 1.5]]
+                    };
+                }
+
+                // Calculate actual data bounds in screen space
+                const xExtent = d3.extent(data, d => d.x);
+                const yExtent = d3.extent(data, d => d.y);
+
+                // Convert to screen coordinates
+                const screenLeft = x(xExtent[0]);
+                const screenRight = x(xExtent[1]);
+                const screenTop = y(yExtent[1]);    // y inverted
+                const screenBottom = y(yExtent[0]); // y inverted
+
+                const contentWidth = screenRight - screenLeft;
+                const contentHeight = screenBottom - screenTop;
+
+                // Minimum scale: see all content with comfortable padding
+                const paddingFactor = 1.1; // 10% padding
+                const minScaleX = width / (contentWidth * paddingFactor);
+                const minScaleY = height / (contentHeight * paddingFactor);
+                const minScale = Math.min(minScaleX, minScaleY) * 0.9; // Small safety margin
+
+                // Maximum scale: fine details visible
+                const maxScale = 12;
+
+                // Translation bounds: "rubber band" strategy - can go out but not too much
+                // Allow centering any part of content in view
+                const buffer = Math.min(width, height) * 0.3; // 30% flexible buffer
+
+                const translateExtent = [
+                    // Top-left bounds: can go quite far left/up
+                    [screenLeft - width + buffer, screenTop - height + buffer],
+                    // Bottom-right bounds: can go quite far right/down
+                    [screenRight - buffer, screenBottom - buffer]
+                ];
+
+                const constraints = {
+                    scaleExtent: [Math.max(0.1, minScale), maxScale],
+                    translateExtent
+                };
+
+                return constraints;
+            };
+
+            // Setup zoom with D3 best practices
+            // 1. Element that receives the behavior (mainSvg)
+            // 2. Element that will be transformed (zoomGroup in the SVG)
+            // 3. Visual content (in zoomGroup)
+
+            const zoom = d3.zoom()
+                .scaleExtent([1, 4])
+                // Constraints will be applied after data loading
+                .on('start', () => {
+                    isZooming = true;
+                    if (tooltipGroup) {
+                        tooltipGroup.style.opacity = '0';
+                    }
+                    currentTooltipFont = null;
+                })
+                .on('zoom', (event) => {
+                    const { transform } = event;
+
+                    // Apply transformation directly (WITHOUT updateTransform which interferes)
+                    d3.select(viewportGroup).attr('transform', transform.toString());
+                })
+                .on('end', () => {
+                    setTimeout(() => { isZooming = false; }, 100);
+                });
+            d3.select(mainSvg).call(zoom);
+
+            // Convert screen coordinates to SVG
+            const screenToSvg = (clientX, clientY) => {
+                const rect = mainSvg.getBoundingClientRect();
+                const svgX = ((clientX - rect.left) / rect.width) * width;
+                const svgY = ((clientY - rect.top) / rect.height) * height;
+                return { x: svgX, y: svgY };
+            };
+
+            // TOOLTIP EVENTS - Screen coordinates
+            mainSvg.addEventListener('mousemove', (e) => {
+                if (isZooming) return;
+
+                // Find element under mouse
+                const element = document.elementFromPoint(e.clientX, e.clientY);
+
+                // Check if it's a glyph, hit area, or in a glyph group
+                let fontName = null;
+                if (element && (element.classList.contains('font-glyph') || element.classList.contains('font-hit-area'))) {
+                    fontName = element.getAttribute('data-font');
+                } else if (element && element.closest('.font-glyph-group')) {
+                    fontName = element.closest('.font-glyph-group').getAttribute('data-font');
+                }
+
+                if (fontName) {
+                    const fontData = data.find(d => d.label === fontName);
+                    if (fontData) {
+                        showTooltip(fontData, e.clientX, e.clientY);
+                    }
+                } else {
+                    hideTooltip();
+                }
+            });
+
+            mainSvg.addEventListener('mouseleave', () => {
+                hideTooltip();
+            });
+
+
+            // Zoom controls
+            const controls = document.createElement('div');
+            controls.className = 'zoom-controls';
+            controls.innerHTML = `
+            <button title="Zoom In">+</button>
+            <button title="Zoom Out">−</button>
+            <button title="Reset">⌂</button>
+        `;
+
+            const [zoomIn, zoomOut, reset] = controls.querySelectorAll('button');
+            zoomIn.onclick = () => d3.select(mainSvg).transition().call(zoom.scaleBy, 1.5);
+            zoomOut.onclick = () => d3.select(mainSvg).transition().call(zoom.scaleBy, 1 / 1.5);
+
+            // Smart reset: return to optimal data view
+            reset.onclick = () => {
+                if (!data.length) {
+                    d3.select(mainSvg).transition().call(zoom.transform, d3.zoomIdentity);
+                    return;
+                }
+
+                const constraints = getConstraints();
+                const optimalScale = constraints.scaleExtent[0] * 1.05; // Slightly above minimum
+
+                // Calculate translation to center content
+                const xExtent = d3.extent(data, d => d.x);
+                const yExtent = d3.extent(data, d => d.y);
+                const centerX = (x(xExtent[0]) + x(xExtent[1])) / 2;
+                const centerY = (y(yExtent[0]) + y(yExtent[1])) / 2;
+
+                const targetX = width / 2 - centerX * optimalScale;
+                const targetY = height / 2 - centerY * optimalScale;
+
+                const resetTransform = d3.zoomIdentity.translate(targetX, targetY).scale(optimalScale);
+
+                d3.select(mainSvg).transition().duration(750).call(zoom.transform, resetTransform);
+            };
+
+            uiLayer.appendChild(controls);
+
+            // Setup scales - Compact size inspired by scatter
+            const updateScales = () => {
+                width = container.clientWidth || 800;
+                height = Math.max(280, Math.min(450, Math.round(width * 0.4))); // More compact: 2.5:1 max ratio
+
+                // Update main SVG viewBox
+                mainSvg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+
+                const xExtent = d3.extent(data, d => d.x);
+                const yExtent = d3.extent(data, d => d.y);
+
+                x.domain(xExtent).range([margin, width - margin]);
+                y.domain(yExtent).range([height - margin, margin]);
+            };
+
+            // Color palette
+            const updateColors = () => {
+                try {
+                    if (window.ColorPalettes?.getColors) {
+                        const colors = window.ColorPalettes.getColors('categorical', 6);
+                        if (colors?.length) color.range(colors);
+                    }
+                } catch (e) { }
+            };
+
+            // Load data
+            const loadData = async () => {
+                try {
+                    // Load SVG sprite first
+                    await initSprite();
+
+                    const paths = ['/data/typography_data.json', './assets/data/typography_data.json', '../assets/data/typography_data.json'];
+                    let response;
+                    for (const path of paths) {
+                        try {
+                            response = await fetch(path);
+                            if (response.ok) break;
+                        } catch (e) { }
+                    }
+
+                    if (!response?.ok) throw new Error('Data not found');
+
+                    const raw = await response.json();
+                    const fontsData = raw.fonts || raw; // Support both formats
+                    data = fontsData.map((d, i) => ({
+                        id: i,
+                        originalId: d.id,
+                        googleFontsUrl: d.google_fonts_url, // Pre-generated URL
+                        x: d.x,
+                        y: d.y,
+                        group: d.family || 'sans-serif',
+                        label: d.name
+                    })).filter(d => Number.isFinite(d.x) && Number.isFinite(d.y));
+
+                    color.domain([...new Set(data.map(d => d.group))]);
+                    updateColors();
+                    updateScales();
+
+                    // Apply professional constraints based on data
+                    const xExtent = d3.extent(data, d => d.x);
+                    const yExtent = d3.extent(data, d => d.y);
+
+                    // Convert to screen coordinates
+                    const contentLeft = x(xExtent[0]);
+                    const contentRight = x(xExtent[1]);
+                    const contentTop = y(yExtent[1]);
+                    const contentBottom = y(yExtent[0]);
+
+                    const contentWidth = contentRight - contentLeft;
+                    const contentHeight = contentBottom - contentTop;
+
+                    // Professional pan area: slightly larger than content
+                    const padding = 1; // padding in pixels
+                    const panLeft = contentLeft - padding;
+                    const panRight = contentRight + padding;
+                    const panTop = contentTop - padding;
+                    const panBottom = contentBottom + padding;
+
+                    // Apply constraints to zoom
+                    zoom.translateExtent([[panLeft, panTop], [panRight, panBottom]]);
+
+                    render();
+                } catch (e) {
+                    console.error('Failed to load data:', e);
+                    container.innerHTML = '<div style="color:red;padding:20px;">Failed to load typography data</div>';
+                }
+            };
+
+            // Initialize
+            updateColors();
+            document.addEventListener('palettes:updated', updateColors);
+
+            // Resize handler
+            let resizeTimer;
+            const handleResize = () => {
+                clearTimeout(resizeTimer);
+                resizeTimer = setTimeout(() => {
+                    updateScales();
+
+                    // TEMPORARILY DISABLED: Recalculate constraints after resize
+                    // if (data.length) {
+                    //     const constraints = getConstraints();
+                    //     zoom.scaleExtent(constraints.scaleExtent)
+                    //         .translateExtent(constraints.translateExtent);
+                    // }
+
+                    render();
+                }, 100);
+            };
+
+            new ResizeObserver(handleResize).observe(container);
+
+            loadData();
+        };
+
+        // Start when ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap));
+        } else {
+            ensureD3(bootstrap);
+        }
+    })();
+</script>

app/src/content/embeds/demo/color-picker.html

@@ -1,226 +0,0 @@
-<div class="color-picker" style="width:100%; margin: 10px 0;">
-  <style>
-    .color-picker .picker__stack { display:flex; flex-direction:column; gap:12px; }
-    .color-picker .current-card { display:grid; grid-template-columns: 30% 70%; align-items: center; gap:14px; padding:14px 32px 14px 16px; border:1px solid var(--border-color); background: var(--surface-bg); border-radius: 12px; }
-    .color-picker .current-left { display:flex; flex-direction: column; gap:8px; min-width: 0; }
-    .color-picker .current-right { display:flex; flex-direction: column; gap:8px; padding-left: 14px; border-left: 1px solid var(--border-color); }
-    .color-picker .current-main { display:flex; align-items:center; gap:12px; min-width: 0; }
-    .color-picker .current-swatch { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-color); }
-    .color-picker .current-text { display:flex; flex-direction: column; line-height: 1.2; min-width: 0; }
-    .color-picker .current-name { font-size: 14px; font-weight: 800; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(140px, 28vw, 260px); }
-    .color-picker .current-hex, .color-picker .current-extra { font-size: 11px; color: var(--muted-color); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(140px, 28vw, 260px); }
-    /* theme preview styles removed */
-    .color-picker .picker__label { font-weight:700; font-size: 12px; color: var(--muted-color); text-transform: uppercase; letter-spacing: .02em; }
-    .color-picker .hue-slider { position:relative; height:16px; border-radius:10px; border:1px solid var(--border-color); background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); cursor: ew-resize; touch-action: none; flex: 1 1 auto; min-width: 200px; }
-    .color-picker .hue-knob { position:absolute; top:50%; left:93.6%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; transform:translate(-50%, -50%); background: var(--surface-bg); z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
-    .color-picker .hue-slider:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
-    .color-picker .hue-value { font-variant-numeric: tabular-nums; color: var(--muted-color); font-size: 12px; }
-    @media (max-width: 720px) { .color-picker .current-card { grid-template-columns: 1fr; } .color-picker .current-right { padding-left: 0; border-left: none; } }
-  </style>
-  <div class="picker__stack">
-    <div class="current-card">
-      <div class="current-left">
-        <div class="current-main">
-          <div class="current-swatch" aria-label="Current color" title="Current color"></div>
-          <div class="current-text">
-            <div class="current-name">—</div>
-            <div class="current-hex">—</div>
-            <div class="current-extra current-lch">—</div>
-            <div class="current-extra current-rgb">—</div>
-          </div>
-        </div>
-      </div>
-      <div class="current-right">
-        <div class="picker__label">Hue</div>
-        <div class="hue-slider" role="slider" aria-label="Hue" aria-valuemin="0" aria-valuemax="360" aria-valuenow="337" tabindex="0">
-          <div class="hue-knob"></div>
-        </div>
-        <div class="hue-value">337°</div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  (() => {
-    // Ensure chroma.js is loaded once
-    const ensureChroma = (next) => {
-      if (window.chroma) return next();
-      const loadScript = (id, src, onload, onerror) => {
-        let s = document.getElementById(id);
-        if (s) { return onload && onload(); }
-        s = document.createElement('script');
-        s.id = id; s.src = src; s.async = true;
-        if (onload) s.addEventListener('load', onload, { once: true });
-        if (onerror) s.addEventListener('error', onerror, { once: true });
-        document.head.appendChild(s);
-      };
-      loadScript('chroma-cdn', 'https://unpkg.com/chroma-js@2.4.2/dist/chroma.min.js', next, () => {
-        loadScript('chroma-cdn-fallback', 'https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js', next);
-      });
-    };
-
-    // Minimal embedded color-name list (same as palettes)
-    const COLOR_NAMES = [{"name":"Candy Apple Red","hex":"#ff0800"},{"name":"Boiling Magma","hex":"#ff3300"},{"name":"Aerospace Orange","hex":"#ff4f00"},{"name":"Burtuqali Orange","hex":"#ff6700"},{"name":"American Orange","hex":"#ff8b00"},{"name":"Cheese","hex":"#ffa600"},{"name":"Amber","hex":"#ffbf00"},{"name":"Demonic Yellow","hex":"#ffe700"},{"name":"Bat-Signal","hex":"#feff00"},{"name":"Bitter Lime","hex":"#cfff00"},{"name":"Electric Lime","hex":"#ccff00"},{"name":"Bright Yellow Green","hex":"#9dff00"},{"name":"Lasting Lime","hex":"#88ff00"},{"name":"Bright Green","hex":"#66ff00"},{"name":"Chlorophyll Green","hex":"#4aff00"},{"name":"Green Screen","hex":"#22ff00"},{"name":"Electric Pickle","hex":"#00ff04"},{"name":"Acid","hex":"#00ff22"},{"name":"Lucent Lime","hex":"#00ff33"},{"name":"Cathode Green","hex":"#00ff55"},{"name":"Booger Buster","hex":"#00ff77"},{"name":"Green Gas","hex":"#00ff99"},{"name":"Enthusiasm","hex":"#00ffaa"},{"name":"Ice Ice Baby","hex":"#00ffdd"},{"name":"Master Sword Blue","hex":"#00ffee"},{"name":"Agressive Aqua","hex":"#00fbff"},{"name":"Vivid Sky Blue","hex":"#00ccff"},{"name":"Capri","hex":"#00bfff"},{"name":"Sky of Magritte","hex":"#0099ff"},{"name":"Azure","hex":"#007fff"},{"name":"Blue Ribbon","hex":"#0066ff"},{"name":"Blinking Blue","hex":"#0033ff"},{"name":"Icelandic Water","hex":"#0011ff"},{"name":"Blue","hex":"#0000ff"},{"name":"Blue Pencil","hex":"#2200ff"},{"name":"Electric Ultramarine","hex":"#3f00ff"},{"name":"Aladdin's Feather","hex":"#5500ff"},{"name":"Purple Climax","hex":"#8800ff"},{"name":"Amethyst Ganzstar","hex":"#8f00ff"},{"name":"Electric Purple","hex":"#bf00ff"},{"name":"Phlox","hex":"#df00ff"},{"name":"Brusque Pink","hex":"#ee00ff"},{"name":"Bright Magenta","hex":"#ff08e8"},{"name":"Big bang Pink","hex":"#ff00bb"},{"name":"Mean Girls Lipstick","hex":"#ff00ae"},{"name":"Pink","hex":"#ff0099"},{"name":"Hot Flamingoes","hex":"#ff005d"},{"name":"Blazing Dragonfruit","hex":"#ff0054"},{"name":"Carmine Red","hex":"#ff0038"},{"name":"Bright Red","hex":"#ff000d"}];
-    if (!window.__colorNames) window.__colorNames = COLOR_NAMES;
-
-    // Shared event bus so multiple instances stay in sync
-    if (!window.__colorPickerBus) {
-      window.__colorPickerBus = (() => {
-        let hue = 337; // shared initial hue
-        let adjusting = false;
-        const listeners = new Set();
-        return {
-          get: () => ({ hue, adjusting }),
-          publish: (sourceId, nextHue, isAdjusting) => {
-            hue = ((nextHue % 360) + 360) % 360;
-            adjusting = !!isAdjusting;
-            listeners.forEach((fn) => { try { fn({ sourceId, hue, adjusting }); } catch {} });
-          },
-          subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); }
-        };
-      })();
-    }
-
-    const bootstrap = () => {
-      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-      const root = mount && mount.closest('.color-picker') ? mount.closest('.color-picker') : document.querySelector('.color-picker');
-      if (!root || root.dataset.mounted) return; root.dataset.mounted = 'true';
-
-      const slider = root.querySelector('.hue-slider');
-      const knob = root.querySelector('.hue-knob');
-      const hueValue = root.querySelector('.hue-value');
-      const currentSwatch = root.querySelector('.current-swatch');
-      const currentName = root.querySelector('.current-name');
-      const currentHex = root.querySelector('.current-hex');
-      const currentLch = root.querySelector('.current-lch');
-      const currentRgb = root.querySelector('.current-rgb');
-
-      const bus = window.__colorPickerBus;
-      const instanceId = Math.random().toString(36).slice(2);
-
-      const getKnobRadius = () => {
-        try { const w = knob ? knob.getBoundingClientRect().width : 0; return w ? w / 2 : 8; } catch { return 8; }
-      };
-
-      const getName = (hex) => {
-        const list = (window.__colorNames && window.__colorNames.length) ? window.__colorNames : COLOR_NAMES;
-        if (list && window.chroma) {
-          let bestName = null; let best = Infinity;
-          for (let i = 0; i < list.length; i++) {
-            const item = list[i];
-            const d = (chroma.deltaE ? chroma.deltaE(hex, item.hex) : chroma.distance(hex, item.hex, 'lab'));
-            if (d < best) { best = d; bestName = item.name; }
-          }
-          if (bestName) return bestName;
-        }
-        const hh = chroma(hex).get('hsl.h') || 0;
-        const labels = ['Red','Orange','Yellow','Lime','Green','Cyan','Blue','Indigo','Violet','Magenta'];
-        const idx = Math.round(((hh % 360) / 360) * (labels.length - 1));
-        return labels[idx];
-      };
-
-      const updateUI = (h, adjusting) => {
-        const rect = slider.getBoundingClientRect();
-        const r = Math.min(getKnobRadius(), Math.max(0, rect.width / 2 - 1));
-        const t = Math.max(0, Math.min(1, (h / 360)));
-        const leftPx = r + t * Math.max(0, (rect.width - 2 * r));
-        if (knob) knob.style.left = (leftPx / rect.width * 100) + '%';
-        if (hueValue) hueValue.textContent = `${Math.round(h)}°`;
-        if (slider) slider.setAttribute('aria-valuenow', String(Math.round(h)));
-        // Use LCH for consistent chroma across hues
-        const L = 70; // lightness
-        const C = 60; // chroma kept within sRGB-friendly range
-        const base = chroma.lch(L, C, h);
-        const baseHex = base.hex();
-        if (currentSwatch) currentSwatch.style.background = baseHex;
-        if (currentName) currentName.textContent = getName(baseHex.toUpperCase());
-        if (currentHex) currentHex.textContent = baseHex.toUpperCase();
-        if (currentLch) {
-          const lc = base.lch();
-          const L = Math.round((lc[0] || 0));
-          const C = Math.round((lc[1] || 0));
-          const H = Math.round(((lc[2] || 0) % 360 + 360) % 360);
-          currentLch.textContent = `LCH ${L}, ${C}, ${H}°`;
-        }
-        if (currentRgb) {
-          const rgb = base.rgb().map(v => Math.round(v));
-          currentRgb.textContent = `RGB ${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
-        }
-        // Apply to theme (always, to reflect the selection)
-        const hoverL = Math.max(0, Math.min(100, L - 8));
-        const hoverHex = chroma.lch(hoverL, C, h).hex();
-        const rootEl = document.documentElement;
-        rootEl.style.setProperty('--primary-color', baseHex);
-        rootEl.style.setProperty('--primary-color-hover', hoverHex);
-      };
-
-      const getHueFromEvent = (ev) => {
-        const rect = slider.getBoundingClientRect();
-        const clientX = ev.touches ? ev.touches[0].clientX : ev.clientX;
-        const x = clientX - rect.left;
-        const r = Math.min(getKnobRadius(), Math.max(0, rect.width / 2 - 1));
-        const effX = Math.max(r, Math.min(rect.width - r, x));
-        const denom = Math.max(1, rect.width - 2 * r);
-        const t = (effX - r) / denom;
-        return t * 360;
-      };
-
-      // Subscribe to bus to sync multiple instances
-      const unsubscribe = bus.subscribe(({ sourceId, hue, adjusting }) => {
-        if (sourceId === instanceId) return; // avoid feedback
-        updateUI(hue, adjusting);
-      });
-
-      // Init from theme color if available
-      try {
-        const cssPrimary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
-        if (cssPrimary) {
-          const initH = chroma(cssPrimary).get('hsl.h') || 0;
-          updateUI(initH, false);
-          bus.publish(instanceId, initH, false);
-        } else {
-          const { hue: sharedHue } = bus.get();
-          updateUI(sharedHue, false);
-        }
-      } catch {
-        const { hue: sharedHue } = bus.get();
-        updateUI(sharedHue, false);
-      }
-
-      const onDown = (ev) => {
-        ev.preventDefault();
-        const h = getHueFromEvent(ev);
-        updateUI(h, true);
-        bus.publish(instanceId, h, true);
-        const move = (e) => { e.preventDefault && e.preventDefault(); const hh = getHueFromEvent(e); updateUI(hh, true); bus.publish(instanceId, hh, true); };
-        const up = () => { bus.publish(instanceId, getHueFromEvent(ev), false); window.removeEventListener('mousemove', move); window.removeEventListener('touchmove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); };
-        window.addEventListener('mousemove', move, { passive: false });
-        window.addEventListener('touchmove', move, { passive: false });
-        window.addEventListener('mouseup', up, { once: true });
-        window.addEventListener('touchend', up, { once: true });
-      };
-
-      if (slider) {
-        slider.addEventListener('mousedown', onDown);
-        slider.addEventListener('touchstart', onDown, { passive: false });
-        // Minimal keyboard support (←/→, Shift for larger steps)
-        slider.addEventListener('keydown', (e) => {
-          const step = e.shiftKey ? 10 : 2;
-          if (e.key === 'ArrowLeft') { e.preventDefault(); const { hue } = bus.get(); const h = hue - step; updateUI(h, true); bus.publish(instanceId, h, true); bus.publish(instanceId, h, false); }
-          if (e.key === 'ArrowRight') { e.preventDefault(); const { hue } = bus.get(); const h = hue + step; updateUI(h, true); bus.publish(instanceId, h, true); bus.publish(instanceId, h, false); }
-        });
-      }
-
-      // Clean up on detach (best-effort)
-      const ro = new MutationObserver(() => {
-        if (!document.body.contains(root)) { unsubscribe && unsubscribe(); ro.disconnect(); }
-      });
-      ro.observe(document.body, { childList: true, subtree: true });
-    };
-
-    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => ensureChroma(bootstrap), { once: true });
-    else ensureChroma(bootstrap);
-  })();
-</script>
-
-

app/src/content/embeds/demo/palettes.html

@@ -1,219 +0,0 @@
-<div class="palettes" style="width:100%; margin: 10px 0;">
-  <style>
-    .palettes { box-sizing: border-box; overflow-x: hidden; }
-    .palettes .palettes__grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 100%; }
-    .palettes .palette-card { position: relative; display: grid; grid-template-columns: auto 1fr minmax(0, 220px); align-items: stretch; gap: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
-    /* removed circular badge */
-    .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 2px; margin: 0; min-height: 20px; }
-    .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; min-height: 0; border-radius: 0; border: 1px solid var(--border-color); }
-    .palettes .palette-card__swatches .sw:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
-    .palettes .palette-card__swatches .sw:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
-    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-right: 0; }
-    .palettes .palette-card__content__info { display: flex; flex-direction: column;  }
-    .palettes .palette-card__title { text-align: left; font-weight: 800; font-size: 15px; }
-    .palettes .palette-card__desc { text-align: left; color: var(--muted-color); line-height: 1.5; font-size: 12px; }
-    .palettes .palette-card__actions { display: flex; align-items: center; justify-content: flex-start; justify-self: start; align-self: stretch; }
-    /* .palettes .copy-btn { margin: 0; padding: 0 10px; height: 100%; border-radius: 8px; } */
-    /* .palettes .copy-btn:hover { background: var(--primary-color); color: var(--on-primary)!important; border-color: transparent; }
-    .palettes .copy-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } */
-    .palettes .copy-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
-    /* Simulation UI */
-    .palettes .palettes__select { width: 100%; max-width: 100%; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color); padding: 8px 10px; border-radius: 8px; }
-    .palettes .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
-    .palettes .palettes__controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 14px; }
-    .palettes .palettes__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; max-width: 100%; }
-    .palettes .palettes__label { font-size: 12px; color: var(--muted-color); font-weight: 800; }
-    .palettes .palettes__label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-    .palettes .ghost-badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--muted-color); background: transparent; font-variant-numeric: tabular-nums; }
-    .palettes .palettes__count { display: flex; align-items: center; gap: 8px; max-width: 100%; }
-    .palettes .palettes__count input[type="range"] { width: 100%; }
-    .palettes .palettes__count output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted-color); }
-    /* Slider styling */
-    .palettes input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; accent-color: var(--primary-color); }
-    .palettes input[type="range"]:focus { outline: none; }
-    /* WebKit */
-    .palettes input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--border-color); border-radius: 999px; }
-    .palettes input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
-    /* Firefox */
-    .palettes input[type="range"]::-moz-range-track { height: 6px; background: var(--border-color); border: none; border-radius: 999px; }
-    .palettes input[type="range"]::-moz-range-progress { height: 6px; background: var(--primary-color); border-radius: 999px; }
-    .palettes input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
-    /* Page-wide color vision simulation classes */
-    html.cb-grayscale, body.cb-grayscale { filter: grayscale(1) !important; }
-    html.cb-protanopia, body.cb-protanopia { filter: url(#cb-protanopia) !important; }
-    html.cb-deuteranopia, body.cb-deuteranopia { filter: url(#cb-deuteranopia) !important; }
-    html.cb-tritanopia, body.cb-tritanopia { filter: url(#cb-tritanopia) !important; }
-    html.cb-achromatopsia, body.cb-achromatopsia { filter: url(#cb-achromatopsia) !important; }
-    @media (max-width: 640px) {
-      .palettes .palette-card { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
-      .palettes .palette-card__swatches { grid-template-columns: repeat(6, minmax(0, 1fr));  }
-      .palettes .palette-card__content { border-right: none; padding-right: 0; }
-      .palettes .palette-card__actions { justify-self: start; }
-      
-    }
-  </style>
-  <div class="palettes__controls">
-    <div class="palettes__field">
-      <label class="palettes__label" for="cb-select">Color vision simulation</label>
-      <select id="cb-select" class="palettes__select">
-        <option value="none">Normal color vision — typical for most people</option>
-        <option value="achromatopsia">Achromatopsia — no color at all</option>
-        <option value="protanopia">Protanopia — reduced/absent reds</option>
-        <option value="deuteranopia">Deuteranopia — reduced/absent greens</option>
-        <option value="tritanopia">Tritanopia — reduced/absent blues</option>
-      </select>
-    </div>
-    <div class="palettes__field">
-      <div class="palettes__label-row">
-        <label class="palettes__label" for="color-count">Number of colors</label>
-        <output id="color-count-out" for="color-count" class="ghost-badge">8</output>
-      </div>
-      <div class="palettes__count">
-        <input id="color-count" type="range" min="6" max="10" step="1" value="8" aria-label="Number of colors" />
-      </div>
-    </div>
-  </div>
-  <div class="palettes__grid"></div>
-  <div class="palettes__simu" role="group" aria-labelledby="cb-sim-title">
-    <!-- Hidden SVG filters used by the page-wide simulation classes -->
-    <svg aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute; left:-9999px; overflow:hidden;">
-      <defs>
-        <!-- Matrices from common color vision deficiency simulations -->
-        <filter id="cb-protanopia">
-          <feColorMatrix type="matrix" values="0.567 0.433 0     0 0  0.558 0.442 0     0 0  0      0.242 0.758 0 0  0 0 0 1 0"/>
-        </filter>
-        <filter id="cb-deuteranopia">
-          <feColorMatrix type="matrix" values="0.625 0.375 0     0 0  0.7   0.3   0     0 0  0      0.3   0.7   0 0  0 0 0 1 0"/>
-        </filter>
-        <filter id="cb-tritanopia">
-          <feColorMatrix type="matrix" values="0.95  0.05  0     0 0  0     0.433 0.567 0 0  0     0.475 0.525 0 0  0 0 0 1 0"/>
-        </filter>
-        <filter id="cb-achromatopsia">
-          <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0 0 0 1 0"/>
-        </filter>
-      </defs>
-    </svg>
-  </div>
-</div>
-<script>
-  (() => {
-    const cards = [
-      { key: 'categorical', title: 'Categorical', desc: 'For <strong>non‑numeric categories</strong>; <strong>visually distinct</strong> colors. The more you have the more likely they are to look similar.' },
-      { key: 'sequential', title: 'Sequential', desc: 'For <strong>numeric scales</strong>; gradient from <strong>dark to light</strong>. Ideal for <strong>heatmaps</strong>.' },
-      { key: 'diverging', title: 'Diverging', desc: 'Opposing extremes via <strong>base → white → complement</strong>; smooth contrast around a neutral midpoint.' }
-    ];
-
-    const getPaletteColors = (key, count) => {
-      const total = Number(count) || 6;
-      if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-        return window.ColorPalettes.getColors(key, total) || [];
-      }
-      return [];
-    };
-
-    const render = () => {
-      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-      const root = mount && mount.closest('.palettes') ? mount.closest('.palettes') : document.querySelector('.palettes');
-      if (!root) return;
-      const grid = root.querySelector('.palettes__grid');
-      if (!grid) return;
-      const input = document.getElementById('color-count');
-      const total = input ? Number(input.value) || 6 : 6;
-      const html = cards.map((c) => {
-        const colors = getPaletteColors(c.key, total);
-        const swatches = colors.map(col => `<div class="sw" style="background:${col}"></div>`).join('');
-        return `
-          <div class="palette-card" data-colors="${colors.join(',')}">
-            <div class="palette-card__content">
-              <div class="palette-card__content__info">
-                <div class="palette-card__title">${c.title}</div>
-                <div class="palette-card__desc">${c.desc}</div>
-              </div>
-              <button class="copy-btn button--ghost" type="button" aria-label="Copy palette">
-                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
-              </button>
-            </div>
-            <div class="palette-card__actions"></div>
-            <div class="palette-card__swatches" style="grid-template-columns: repeat(${colors.length}, minmax(0, 1fr));">${swatches}</div>
-          </div>
-        `;
-      }).join('');
-      grid.innerHTML = html;
-    };
-
-    const MODE_TO_CLASS = { protanopia: 'cb-protanopia', deuteranopia: 'cb-deuteranopia', tritanopia: 'cb-tritanopia', achromatopsia: 'cb-achromatopsia' };
-    const CLEAR_CLASSES = Object.values(MODE_TO_CLASS);
-    const clearCbClasses = () => {
-      const rootEl = document.documentElement;
-      CLEAR_CLASSES.forEach(cls => rootEl.classList.remove(cls));
-    };
-    const applyCbClass = (mode) => {
-      clearCbClasses();
-      const cls = MODE_TO_CLASS[mode];
-      if (cls) document.documentElement.classList.add(cls);
-    };
-    const currentCbMode = () => {
-      const rootEl = document.documentElement;
-      for (const [mode, cls] of Object.entries(MODE_TO_CLASS)) { if (rootEl.classList.contains(cls)) return mode; }
-      return 'none';
-    };
-    const setupCbSim = () => {
-      const select = document.getElementById('cb-select');
-      if (!select) return;
-      try { select.value = currentCbMode(); } catch {}
-      select.addEventListener('change', () => applyCbClass(select.value));
-    };
-
-    const setupCountControl = () => {
-      const input = document.getElementById('color-count');
-      const out = document.getElementById('color-count-out');
-      if (!input) return;
-      const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
-      const read = () => clamp(Number(input.value) || 6, 6, 10);
-      const syncOut = () => { if (out) out.textContent = String(read()); };
-      const onChange = () => { syncOut(); render(); };
-      syncOut();
-      input.addEventListener('input', onChange);
-      document.addEventListener('palettes:updated', () => { syncOut(); render(); });
-    };
-
-    let copyDelegationSetup = false;
-    const setupCopyDelegation = () => {
-      if (copyDelegationSetup) return;
-      const root = document.querySelector('.palettes');
-      if (!root) return;
-      const grid = root.querySelector('.palettes__grid');
-      if (!grid) return;
-      grid.addEventListener('click', async (e) => {
-        const target = e.target.closest ? e.target.closest('.copy-btn') : null;
-        if (!target) return;
-        const card = target.closest('.palette-card');
-        if (!card) return;
-        const colors = (card.dataset.colors || '').split(',').filter(Boolean);
-        const json = JSON.stringify(colors, null, 2);
-        try {
-          await navigator.clipboard.writeText(json);
-          const old = target.innerHTML;
-          target.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>';
-          setTimeout(() => target.innerHTML = old, 900);
-        } catch {
-          window.prompt('Copy palette', json);
-        }
-      });
-      copyDelegationSetup = true;
-    };
-
-    const bootstrap = () => {
-      setupCbSim();
-      setupCountControl();
-      render();
-      setupCopyDelegation();
-      // Re-render when primary color changes
-      document.addEventListener('palettes:updated', render);
-    };
-
-    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
-    else bootstrap();
-  })();
-</script>
-