update

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

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

app/.astro/settings.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:585e9065073b0b2528747f99b78ccc382984e713ac7e6a5c9f99a47956e3f42e
+oid sha256:ed6d28be38b13c36af0d93f09ca03071e80381d49463aa549a5ee625ef9a8b56
 size 58

app/astro.config.mjs

@@ -57,7 +57,8 @@ export default defineConfig({
       rehypeKatex,
       [rehypeCitation, {
         bibliography: 'src/content/bibliography.bib',
-        linkCitations: true
+        linkCitations: true,
+        csl: "apa"
       }],
       rehypeReferencesAndFootnotes,
       rehypeRestoreAtInCode,

app/src/components/HtmlEmbed.astro

@@ -69,7 +69,11 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
   </script>
 
 <style is:global>
-  .html-embed { margin: 0 0 var(--block-spacing-y); }
+  .html-embed { margin: 0 0 var(--block-spacing-y);
+    z-index: var(--z-elevated);
+    position: relative;
+  
+  }
   .html-embed__title { 
     text-align: left; 
     font-weight: 600; 
@@ -77,9 +81,7 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
     color: var(--text-color);
     margin: 0;
     padding: var(--spacing-1);
-    background: var(--page-bg);
     position: relative;
-    z-index: var(--z-elevated);
     display: block;
     width: 100%;
   }
@@ -88,6 +90,7 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
     border: 1px solid var(--border-color);
     border-radius: 10px;
     padding: 8px;
+    z-index: var(--z-elevated);
   }
   .html-embed__card.is-frameless {
     background: transparent;
@@ -100,7 +103,6 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
     color: var(--muted-color); 
     margin: 0; 
     padding: var(--spacing-1);
-    background: var(--page-bg);
     position: relative;
     z-index: var(--z-elevated);
     display: block;

app/src/components/ThemeToggle.astro

@@ -40,12 +40,44 @@
         apply(next);
       });
     }
+
+    // Adjust offset for Hugging Face Spaces tiny header (production)
+    // Sets CSS var --hf-spaces-topbar used in _layout.css for sticky placement
+    const computeSpacesTopbarOffset = () => {
+      try {
+        const host = window.location.hostname || '';
+        const isSpaces = /\.hf\.space$/.test(host) || host.endsWith('huggingface.co');
+        let topbar = 0;
+        if (isSpaces) {
+          // Scan fixed elements anchored to top to estimate tiny header height
+          const nodes = Array.from(document.querySelectorAll('*'));
+          for (const el of nodes) {
+            const cs = window.getComputedStyle(el);
+            if (cs.position === 'fixed' && cs.top === '0px' && el.offsetHeight > 0) {
+              const rect = el.getBoundingClientRect();
+              if (rect.top <= 1 && rect.height <= 80) {
+                topbar = Math.max(topbar, Math.ceil(rect.bottom));
+              }
+            }
+          }
+          // Fallback reasonable tiny header height
+          if (!topbar) topbar = 40;
+        }
+        document.documentElement.style.setProperty('--hf-spaces-topbar', `${topbar}px`);
+      } catch (_) {
+        // No-op
+      }
+    };
+    window.addEventListener('load', computeSpacesTopbarOffset);
+    window.addEventListener('resize', computeSpacesTopbarOffset);
+    // Re-run shortly after load to catch late-mounted headers
+    setTimeout(computeSpacesTopbarOffset, 800);
   </script>
 </button>
 
 
 <style>
-  #theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; margin: 12px 16px; color: var(--text-color) !important; }
+  #theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--text-color) !important; }
 #theme-toggle .icon.dark { display: none; }
 [data-theme="dark"] #theme-toggle .icon.light { display: none; }
 [data-theme="dark"] #theme-toggle .icon.dark { display: inline; }

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1a47d8de2edf309fd39eb7e2ef5790d7f9c3ec4d5cc0f0c8680c12112f0d63e3
-size 63287
+oid sha256:104433529e7d9c8a3bd297be1138e9e87677a666953d1362c517ec389c6c9172
+size 64966

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b19a66e4f5999c3dcf60140f5eeab57016ebeb3d277db08c16dd0b5bede35495
-size 81529
+oid sha256:b155d8c319b1788befe716017fecca580768157feee6221f3af44b7bb9f9c7e5
+size 81995

app/src/content/chapters/components.mdx

@@ -284,21 +284,22 @@ Here are some examples that were vibe coded to inspire you.
 ---
 <HtmlEmbed src="d3-bar.html" title="D3 Memory usage with recomputation" desc={`Memory usage with recomputation — <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">from the ultrascale playbook</a>`}/>
 ---
-<Wide>
   <HtmlEmbed src="d3-neural.html" id="neural-network-mnist-like" title="D3 Interactive neural network (MNIST-like)" desc="Visualize activations and class probabilities (0–9)." align="center" />
-</Wide>
 ---
-<Wide>
-  <HtmlEmbed src="d3-pie.html" desc="D3 Pie charts by category" align="center" />
-</Wide>
+  <HtmlEmbed src="d3-pie.html" title="D3 Pie charts by category" align="center" frameless />
 ---
-<Wide>
-  <HtmlEmbed src="filters-quad.html" desc="Figure 7: Comparison across thresholds for all four filters individually: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence." align="center" />
-</Wide>
+  <HtmlEmbed src="filters-quad.html" frameless 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>'} align="center" />
 
----
+{/* ---
 <HtmlEmbed src="d3-comparison.html" title="Image similarity: query vs top-k" desc="Compare a query image to top-k matches. Shows rank and similarity." />
 ---
+<HtmlEmbed src="d3-area-stacked.html" title="Relative metric shares over steps (by run)" desc="Stacked area of normalized metric contributions across training steps. Data: /data/all_ratings_luis.csv" />
+---
+<HtmlEmbed src="d3-boxplot.html" title="Metric distribution across runs (box plots)" desc="Per-run distribution for a selected metric (median, quartiles, whiskers, outliers). Data: /data/all_ratings_luis.csv" />
+*/}
+--- 
+<HtmlEmbed src="d3-scatter.html" title="2D projection by category" desc={`Dataset visualization via UMAP <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>`} frameless align="center" />
+---
 
 ### Iframes
 

app/src/content/chapters/markdown.mdx

@@ -90,9 +90,9 @@ Hello i'm a standalone output block.
 ```python
 print("This script prints a very very long line to check overflow behavior.")
 ```
-::::output
+:::output
 This script prints a very very long line to check overflow behavior.
-::::
+:::
 </Accordion>
 
 
@@ -122,8 +122,6 @@ The **citation keys** come from `app/src/content/bibliography.bib`.
 
 **Citation** use the `@` syntax (e.g., `[@vaswani2017attention]` or `@vaswani2017attention` in narrative form) and are **automatically** collected to render the **bibliography** at the end of the article.
 
-<Note variant="info" emoji="💡">Multiple citations to the same citation key are automatically merged into a single citation.</Note>
-
 1) In-text citation with brackets: [@vaswani2017attention].
 
 2) Narrative citation: As shown by @kingma2015adam, stochastic optimization is widely used.
@@ -144,6 +142,8 @@ The **citation keys** come from `app/src/content/bibliography.bib`.
 ```
 </Accordion>
 
+<Note variant="info" emoji="💡">You can change the citation style in the `astro.config.mjs` file. There are several styles available: `apa`, `vancouver`, `harvard1`, `chicago`, `mla`. Default is `apa`.</Note>
+
 ### Footnote
 
 **Footnote** use an identifier like `[^f1]` and a definition anywhere in the document, e.g., `[^f1]: Your explanation`. They are **numbered** and **listed automatically** at the end of the article.

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

@@ -151,40 +151,20 @@ Always pair it with text, icons, shape or position. The simulation helps you spo
 
 #### Using the palettes
 
-##### CSS
-Use the generated **CSS variables** to style elements (e.g., `color: var(--palette-categorical-1)`).
+You can copy them manually from the palette viewer just above, or fetch colors via `window.ColorPalettes.getColors(key, count)` where `key` is one of `'categorical'`, `'sequential'`, `'diverging'`, and `count` is the desired number of colors (defaults to 6).
 
 <Accordion title="Code example">
-```css
-/* Usage */
-.series-a { color: var(--palette-categorical-1); }
-.series-b { color: var(--palette-categorical-2); }
-.heatmap-low  { background: var(--palette-sequential-1); }
-.heatmap-high { background: var(--palette-sequential-6); }
-.neg { color: var(--palette-diverging-1); }  /* left = primary */
-.pos { color: var(--palette-diverging-6); }  /* right = complement */
-
-/* Override size */
-:root { --palette-count: 8; }                    /* global */
-:root { --palette-diverging-count: 7; }          /* per palette */
-```
-</Accordion>
-
-<Note variant="info" emoji='💡'>**CSS overrides** automatically trigger a **palette regeneration** via JS observers; no manual call is needed.</Note>
+  ```js
+// Usage (with explicit counts)
+const cat = window.ColorPalettes.getColors('categorical', 8);
+const seq = window.ColorPalettes.getColors('sequential', 8);
+const div = window.ColorPalettes.getColors('diverging', 7);
 
-##### JS
-Fetch arrays of colors via `window.ColorPalettes.getColors('categorical')`. To change sizes **at runtime**, set CSS vars (e.g., `document.documentElement.style.setProperty('--palette-count','8')`) and call `window.ColorPalettes.refresh()`.
+// For current primary color string
+const primaryHex = window.ColorPalettes.getPrimary();
 
-<Accordion title="Code example">
-  ```js
-// Usage
-const cat = window.ColorPalettes.getColors('categorical');
-const seq = window.ColorPalettes.getColors('sequential');
-const div = window.ColorPalettes.getColors('diverging');
-
-// Override size (runtime)
-document.documentElement.style.setProperty('--palette-count', '8');
-document.documentElement.style.setProperty('--palette-diverging-count', '7');
+// If you change --primary-color dynamically, call refresh to notify listeners
+document.documentElement.style.setProperty('--primary-color', '#6D4AFF');
 window.ColorPalettes.refresh();
 ```
 </Accordion>

app/src/content/embeds/d3-area-stacked.html

@@ -0,0 +1,220 @@
+<div class="d3-area-stacked" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-area-stacked .controls {
+    margin-top: 12px;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .d3-area-stacked .controls label {
+    font-size: 12px;
+    color: var(--muted-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    padding: 6px 10px;
+  }
+  .d3-area-stacked .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-area-stacked .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-area-stacked .controls select:hover { border-color: var(--primary-color); }
+  .d3-area-stacked .controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
+  .d3-area-stacked .legend { font-size: 12px; line-height: 1.35; color: var(--text-color); }
+</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-area-stacked'))){
+        const cs = Array.from(document.querySelectorAll('.d3-area-stacked')).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:'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; }
+
+      // Controls
+      const controls = document.createElement('div'); controls.className='controls';
+      const labelRun = document.createElement('label'); labelRun.textContent='Run';
+      const selRun = document.createElement('select');
+      labelRun.appendChild(selRun);
+      const labelSmooth = document.createElement('label'); labelSmooth.textContent='Smoothing';
+      const selSmooth = document.createElement('select'); ['none','monotone','basis'].forEach((s)=>{ const o=document.createElement('option'); o.value=s; o.textContent=s; selSmooth.appendChild(o); });
+      labelSmooth.appendChild(selSmooth);
+
+      // SVG
+      const svg = d3.select(container).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 gLegend = gRoot.append('foreignObject').attr('class','legend');
+
+      // State & scales
+      let width=800,height=360; const margin={top:16,right:28,bottom:56,left:64};
+      const x=d3.scaleLinear();
+      const y=d3.scaleLinear();
+      const color=d3.scaleOrdinal().range(['var(--primary-color)','rgb(78, 165, 183)','rgb(227, 138, 66)','rgb(206, 192, 250)']);
+
+      // Data (real): relative contributions of selected metrics over steps for a run
+      const metricsToUse = ['ai2d_exact_match','docvqa_val_anls','textvqa_val_exact_match','chartqa_relaxed_overall'];
+      let categories = metricsToUse.slice();
+      let allRows = [];
+      let currentRun = null;
+      let stacked = [];
+
+      async function fetchFirstAvailable(paths){
+        for (const p of paths){
+          try { const res = await fetch(p, { cache:'no-cache' }); if (res.ok) return await res.text(); } catch(e){}
+        }
+        throw new Error('Failed to load area data');
+      }
+
+      function computeStackForRun(runName){
+        const rows = allRows.filter(r=>r.run===runName && metricsToUse.includes(r.metric));
+        const byStep = d3.rollup(rows, v=>{
+          const m = new Map(); v.forEach(r=>{ m.set(r.metric, +r.value); });
+          const obj = {}; metricsToUse.forEach(k=>{ obj[k] = m.get(k) ?? 0; });
+          // Normalize to shares
+          const sum = metricsToUse.reduce((acc,k)=>acc + Math.max(0, obj[k]), 0) || 1;
+          metricsToUse.forEach(k=>{ obj[k] = Math.max(0, obj[k]) / sum; });
+          return obj;
+        }, r=>+r.step);
+        const steps = Array.from(byStep.keys()).sort((a,b)=>a-b);
+        const series = categories.map(cat => steps.map(step => ({ x: step, y: byStep.get(step)[cat] })));
+        stacked = d3.stack().keys(d3.range(categories.length)).value((d, key)=>d[key].y)(d3.transpose(series));
+        return steps;
+      }
+
+      function renderLegend(innerWidth){
+        const legendWidth=160, legendHeight=84;
+        gLegend.attr('x', innerWidth-legendWidth).attr('y', 0).attr('width', legendWidth).attr('height', legendHeight);
+        const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        root.html(`
+          <div style="display:flex;flex-direction:column;gap:6px;align-items:flex-end;">
+            ${categories.map((c,i)=>`<div style=\"display:flex;align-items:center;gap:8px;\"><span style=\"width:18px;height:10px;background:${color(c)};border-radius:2px;display:inline-block\"></span><span>${c}</span></div>`).join('')}
+          </div>
+        `);
+      }
+
+      function updateScales(){
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
+        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';
+
+        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 yMax = stacked.length ? d3.max(stacked[stacked.length-1], (d) => d[1]) : 1;
+        const xMin = stacked.length ? d3.min(stacked[0], d=>d.data[0].x) : 0;
+        const xMax = stacked.length ? d3.max(stacked[0], d=>d.data[d.data.length-1].x) : 1;
+        x.domain([xMin, xMax]).range([0, innerWidth]).nice();
+        y.domain([0, yMax]).range([innerHeight, 0]).nice();
+
+        // Grid
+        gGrid.selectAll('*').remove();
+        gGrid.selectAll('line.grid-y').data(y.ticks(5)).join('line')
+          .attr('class','grid-y').attr('x1',0).attr('x2',innerWidth).attr('y1',d=>y(d)).attr('y2',d=>y(d))
+          .attr('stroke', gridColor).attr('stroke-width',1).attr('shape-rendering','crispEdges');
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(x).ticks(6)).call((g)=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','12px'); });
+        gAxes.append('g').call(d3.axisLeft(y).ticks(5)).call((g)=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','12px'); });
+        gAxes.append('text').attr('class','axis-label axis-label--x').attr('x', innerWidth/2).attr('y', innerHeight + 44).attr('text-anchor','middle').style('font-size','12px').style('fill', tickColor).text('Step');
+        gAxes.append('text').attr('class','axis-label axis-label--y').attr('text-anchor','middle').attr('transform', `translate(${-48},${innerHeight/2}) rotate(-90)`).style('font-size','12px').style('fill', tickColor).text('Value');
+
+        renderLegend(innerWidth);
+        return { innerWidth, innerHeight };
+      }
+
+      function draw(){
+        const { innerWidth, innerHeight } = updateScales();
+
+        const curve = selSmooth.value==='monotone' ? d3.curveMonotoneX : selSmooth.value==='basis' ? d3.curveBasis : d3.curveLinear;
+        const area = d3.area().curve(curve).x((d,i)=>x(d.data[i].x)).y0(d=>y(d[0])).y1(d=>y(d[1]));
+
+        const layers = gAreas.selectAll('path.layer').data(stacked);
+        layers.enter().append('path').attr('class','layer')
+          .attr('fill', (d,i)=>color(categories[i]))
+          .attr('opacity', 0.9)
+          .on('mouseenter', function(ev, d){ const i = stacked.indexOf(d); d3.select(this).attr('opacity', 1); tipInner.innerHTML = `<div><strong>${categories[i]}</strong></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(){ d3.select(this).attr('opacity', 0.9); tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; })
+          .merge(layers)
+          .transition().duration(180)
+          .attr('d', d=>area(d));
+        layers.exit().remove();
+      }
+
+      container.appendChild(controls);
+      controls.appendChild(labelRun);
+      controls.appendChild(labelSmooth);
+      selSmooth.addEventListener('change', ()=>draw());
+
+      (async () => {
+        try {
+          const csvText = await fetchFirstAvailable([
+            '/data/all_ratings_luis.csv',
+            '/data/against_baselines.csv',
+            '/data/ss_vs_s1.csv',
+            './assets/data/all_ratings_luis.csv',
+            '../assets/data/all_ratings_luis.csv',
+            '/data/all_ratings_luis.csv'
+          ]);
+          allRows = d3.csvParse(csvText, d=>({ run: d.run, step: +d.step, metric: d.metric, value: +d.value }));
+          const runs = Array.from(new Set(allRows.map(r=>r.run))).filter(Boolean);
+          runs.forEach(r=>{ const o=document.createElement('option'); o.value=r; o.textContent=r; selRun.appendChild(o); });
+          currentRun = runs[0]; selRun.value = currentRun;
+          selRun.addEventListener('change', (e)=>{ currentRun = e.target.value; draw(); });
+          color.domain(categories);
+          computeStackForRun(currentRun);
+          draw();
+        } catch (e) {
+          const pre = document.createElement('pre'); pre.style.color = 'crimson'; pre.textContent = 'Failed to load area data.'; container.appendChild(pre);
+        }
+      })();
+
+      const rerender = () => { draw(); };
+      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-boxplot.html

@@ -0,0 +1,251 @@
+<div class="d3-boxplot" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-boxplot .controls {
+    margin-top: 12px;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .d3-boxplot .controls label {
+    font-size: 12px;
+    color: var(--muted-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    padding: 6px 10px;
+  }
+  .d3-boxplot .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-boxplot .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-boxplot .controls select:hover { border-color: var(--primary-color); }
+  .d3-boxplot .controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
+  .d3-boxplot .legend { font-size: 12px; line-height: 1.35; color: var(--text-color); }
+</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-boxplot'))){
+        const cs = Array.from(document.querySelectorAll('.d3-boxplot')).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:'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; }
+
+      // Controls
+      const controls = document.createElement('div'); controls.className='controls';
+      const labelMetric = document.createElement('label'); labelMetric.textContent='Metric';
+      const selMetric = document.createElement('select');
+      labelMetric.appendChild(selMetric);
+
+      // SVG
+      const svg = d3.select(container).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 gBoxes = gRoot.append('g').attr('class','boxes');
+
+      // State & scales
+      let width=800,height=360; const margin={top:16,right:28,bottom:56,left:64};
+      const x=d3.scaleBand().padding(0.4);
+      const y=d3.scaleLinear();
+      const color=d3.scaleOrdinal().range(['var(--primary-color)','rgb(78, 165, 183)','rgb(227, 138, 66)','rgb(206, 192, 250)']);
+
+      // Data (real): distribution of a chosen metric across runs
+      let allRows = [];
+      let groups = [];
+      let currentMetric = null;
+      let stats = [];
+
+      async function fetchFirstAvailable(paths){
+        for (const p of paths){
+          try { const res = await fetch(p, { cache:'no-cache' }); if (res.ok) return await res.text(); } catch(e){}
+        }
+        throw new Error('Failed to load boxplot data');
+      }
+
+      function computeStatsForMetric(metric){
+        const byRun = d3.rollup(allRows.filter(r=>r.metric===metric), v=> v.map(r=>+r.value).filter(Number.isFinite), r=>r.run);
+        groups = Array.from(byRun.keys());
+        const result = groups.map((g)=>{
+          const data = (byRun.get(g) || []).slice().sort((a,b)=>a-b);
+          if (!data.length) return { key:g, q1:NaN, med:NaN, q3:NaN, min:NaN, max:NaN, outliers:[] };
+          const q1 = d3.quantile(data, 0.25);
+          const med = d3.quantile(data, 0.5);
+          const q3 = d3.quantile(data, 0.75);
+          const iqr = q3 - q1;
+          const lo = q1 - 1.5*iqr;
+          const hi = q3 + 1.5*iqr;
+          const min = d3.min(data.filter(v=>v>=lo));
+          const max = d3.max(data.filter(v=>v<=hi));
+          const outliers = data.filter(v=>v<lo || v>hi);
+          return { key:g, q1, med, q3, iqr, min, max, outliers };
+        });
+        return result;
+      }
+
+      function updateScales(){
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
+        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';
+
+        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})`);
+
+        x.domain(groups).range([0, innerWidth]);
+        const yMin = Math.floor(d3.min(stats, d=>d.min ?? 0))-0; const yMax = Math.ceil(d3.max(stats, d=>d.max ?? 1))+0;
+        y.domain([yMin, yMax]).range([innerHeight,0]).nice();
+
+        // Grid
+        gGrid.selectAll('*').remove();
+        gGrid.selectAll('line.grid-y').data(y.ticks(6)).join('line')
+          .attr('class','grid-y').attr('x1',0).attr('x2',innerWidth).attr('y1',d=>y(d)).attr('y2',d=>y(d))
+          .attr('stroke', gridColor).attr('stroke-width',1).attr('shape-rendering','crispEdges');
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(x)).call((g)=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','12px'); });
+        gAxes.append('g').call(d3.axisLeft(y).ticks(6)).call((g)=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','12px'); });
+        gAxes.append('text').attr('class','axis-label axis-label--x').attr('x', innerWidth/2).attr('y', innerHeight + 44).attr('text-anchor','middle').style('font-size','12px').style('fill', tickColor).text('Group');
+        gAxes.append('text').attr('class','axis-label axis-label--y').attr('text-anchor','middle').attr('transform', `translate(${-48},${innerHeight/2}) rotate(-90)`).style('font-size','12px').style('fill', tickColor).text('Value');
+
+        return { innerWidth, innerHeight };
+      }
+
+      function draw(){
+        const { innerWidth, innerHeight } = updateScales();
+        const bw = Math.max(10, x.bandwidth());
+
+        // Boxes
+        const groupsSel = gBoxes.selectAll('g.bp').data(stats, d=>d.key);
+        const gEnter = groupsSel.enter().append('g').attr('class','bp').attr('transform', d=>`translate(${x(d.key)},0)`);
+        const merged = gEnter.merge(groupsSel).attr('transform', d=>`translate(${x(d.key)},0)`);
+        groupsSel.exit().remove();
+
+        // Box rect (Q1-Q3)
+        const box = merged.selectAll('rect.box').data(d=>[d]);
+        box.enter().append('rect').attr('class','box')
+          .attr('x', 0).attr('width', bw)
+          .attr('y', d=>y(d.q3)).attr('height', d=>Math.max(0.5, y(d.q1) - y(d.q3)))
+          .attr('fill','var(--surface-bg)')
+          .attr('stroke', 'var(--primary-color)')
+          .attr('rx', 4).attr('ry', 4)
+          .merge(box)
+          .transition().duration(180)
+          .attr('y', d=>y(d.q3)).attr('height', d=>Math.max(0.5, y(d.q1) - y(d.q3)));
+        box.exit().remove();
+
+        // Median line
+        const med = merged.selectAll('line.med').data(d=>[d]);
+        med.enter().append('line').attr('class','med')
+          .attr('x1', 0).attr('x2', bw)
+          .attr('y1', d=>y(d.med)).attr('y2', d=>y(d.med))
+          .attr('stroke','var(--primary-color)').attr('stroke-width',2)
+          .merge(med)
+          .transition().duration(180)
+          .attr('y1', d=>y(d.med)).attr('y2', d=>y(d.med));
+        med.exit().remove();
+
+        // Whiskers
+        const whisker = merged.selectAll('line.whisk').data(d=>[d]);
+        whisker.enter().append('line').attr('class','whisk')
+          .attr('x1', bw/2).attr('x2', bw/2)
+          .attr('y1', d=>y(d.min)).attr('y2', d=>y(d.max))
+          .attr('stroke','var(--border-color)')
+          .merge(whisker)
+          .transition().duration(180)
+          .attr('y1', d=>y(d.min)).attr('y2', d=>y(d.max));
+        whisker.exit().remove();
+
+        // Whisker caps
+        const caps = merged.selectAll('g.caps').data(d=>[d]);
+        const capsEnter = caps.enter().append('g').attr('class','caps');
+        capsEnter.append('line').attr('class','cap cap--min').attr('x1',0).attr('x2',bw).attr('y1',d=>y(d.min)).attr('y2',d=>y(d.min)).attr('stroke','var(--border-color)');
+        capsEnter.append('line').attr('class','cap cap--max').attr('x1',0).attr('x2',bw).attr('y1',d=>y(d.max)).attr('y2',d=>y(d.max)).attr('stroke','var(--border-color)');
+        caps.merge(capsEnter).select('.cap--min').transition().duration(180).attr('y1',d=>y(d.min)).attr('y2',d=>y(d.min));
+        caps.merge(capsEnter).select('.cap--max').transition().duration(180).attr('y1',d=>y(d.max)).attr('y2',d=>y(d.max));
+        caps.exit().remove();
+
+        // Outliers
+        const outs = merged.selectAll('circle.out').data(d=>d.outliers.map(v=>({key:d.key, v})));
+        outs.enter().append('circle').attr('class','out')
+          .attr('cx', bw/2).attr('cy', d=>y(d.v)).attr('r', 2.5)
+          .attr('fill', 'var(--primary-color)')
+          .on('mouseenter', function(ev, d){ tipInner.innerHTML = `<div><strong>${d.key}</strong> outlier: ${d.v.toFixed(2)}</div>`; tip.style.opacity='1'; d3.select(this).attr('r',3.2); })
+          .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(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; d3.select(this).attr('r',2.5); })
+          .merge(outs)
+          .transition().duration(180)
+          .attr('cy', d=>y(d.v));
+        outs.exit().remove();
+      }
+
+      container.appendChild(controls);
+      controls.appendChild(labelMetric);
+
+      (async () => {
+        try {
+          const csvText = await fetchFirstAvailable([
+            '/data/all_ratings_luis.csv',
+            '/data/against_baselines.csv',
+            '/data/ss_vs_s1.csv',
+            './assets/data/all_ratings_luis.csv',
+            '../assets/data/all_ratings_luis.csv'
+          ]);
+          allRows = d3.csvParse(csvText, d=>({ run: d.run, step: +d.step, metric: d.metric, value: +d.value }));
+          const metrics = Array.from(new Set(allRows.map(r=>r.metric))).filter(Boolean).slice(0, 20);
+          metrics.forEach(m=>{ const o=document.createElement('option'); o.value=m; o.textContent=m; selMetric.appendChild(o); });
+          currentMetric = metrics.includes('textvqa_val_exact_match') ? 'textvqa_val_exact_match' : metrics[0];
+          selMetric.value = currentMetric;
+          selMetric.addEventListener('change', (e)=>{ currentMetric = e.target.value; stats = computeStatsForMetric(currentMetric); draw(); });
+          stats = computeStatsForMetric(currentMetric);
+          draw();
+        } catch (e) {
+          const pre = document.createElement('pre'); pre.style.color = 'crimson'; pre.textContent = 'Failed to load boxplot data.'; container.appendChild(pre);
+        }
+      })();
+
+      const rerender = () => { draw(); };
+      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-pie.html

@@ -1,12 +1,55 @@
 <div class="d3-pie" style="width:100%;margin:10px 0;"></div>
 <style>
-  .d3-pie .legend { font-size: 12px; line-height: 1.35; color: var(--text-color); }
+  /* Layout piloté par container queries (par rapport au parent) */
+  .d3-pie { container-type: inline-size; }
+  .d3-pie .legend { width: 80%;margin: 0 auto; font-size: 12px; line-height: 1.35; color: var(--text-color); }
+  .d3-pie .legend { margin-bottom: 32px; }
   .d3-pie .legend .items { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; }
   .d3-pie .legend .item { display:flex; align-items:center; gap:8px; white-space:nowrap; }
   .d3-pie .legend .swatch { width:14px; height:14px; border-radius:3px; display:inline-block; border: 1px solid var(--border-color); }
+  .d3-pie .legend .title { display:block; text-align:center; font-weight:800; margin-bottom:6px; }
   .d3-pie .caption { font-size: 14px; font-weight: 800; fill: var(--text-color); }
+  .d3-pie .caption-subtitle { font-size: 11px; font-weight: 400; fill: var(--muted-color); }
   .d3-pie .nodata { font-size: 12px; fill: var(--muted-color); }
   .d3-pie .slice-label { font-size: 11px; font-weight: 700; fill: var(--text-color); paint-order: stroke; stroke: rgba(255,255,255,0.2); stroke-width: 3px; }
+  /* Layout HTML (pas JS) pour la grille et les cellules */
+  .d3-pie .plots-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 12px 20px;
+    margin-top: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+  /* Par défaut (flux ~1280): 2 colonnes centrées */
+  .content-grid .d3-pie .plots-grid { width: 100%; }
+  .content-grid .d3-pie .pie-cell { flex: 0 0 calc((100% - 20px)/2); }
+  /* En wrappers larges: viser 4 colonnes si l'espace le permet */
+  .wide .d3-pie .plots-grid,
+  .full-width .d3-pie .plots-grid { width: 100%; }
+  .wide .d3-pie .pie-cell,
+  .full-width .d3-pie .pie-cell { flex: 0 0 calc((100% - 60px)/4); }
+  /* Forcer 2 colonnes dans le flux lorsque le parent ~1280px */
+  .content-grid .d3-pie .plots-grid { width: min(740px, 100%); }
+  .d3-pie .pie-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 0 0 360px; /* 2 colonnes fixes dans le flux à 1280px */
+  }
+  /* 4/2/1 colonnes en fonction de la largeur du parent */
+  /* @container (min-width: 740px) {
+    .d3-pie .plots-grid { width: 740px; }
+  }
+  @container (max-width: 739.98px) {
+    .d3-pie .plots-grid { width: 100%; }
+  } */
+  @media (max-width: 500px) {
+    .d3-pie .pie-cell { flex: 0 0 100%; }
+  }
 </style>
 <script>
   (() => {
@@ -50,18 +93,16 @@
         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 scaffolding
-      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block').attr('preserveAspectRatio','xMidYMin meet');
-      const gRoot = svg.append('g');
-      const gLegend = gRoot.append('foreignObject').attr('class','legend');
-      const gPlots = gRoot.append('g').attr('class','plots');
+      // HTML scaffolding: legend and plots grid as HTML; only pies are SVG
+      const legendHost = document.createElement('div'); legendHost.className = 'legend'; container.appendChild(legendHost);
+      const plotsHost = document.createElement('div'); plotsHost.className = 'plots-grid'; container.appendChild(plotsHost);
 
       // Metrics (order and labels as in the Python script)
       const METRICS = [
-        { key:'answer_total_tokens', name:'Answer Tokens', title:'Weighted by Answer Tokens', letter:'a' },
-        { key:'total_samples',       name:'Number of Samples', title:'Weighted by Number of Samples', letter:'b' },
-        { key:'total_turns',         name:'Number of Turns', title:'Weighted by Number of Turns', letter:'c' },
-        { key:'total_images',        name:'Number of Images', title:'Weighted by Number of Images', letter:'d' }
+        { key:'answer_total_tokens', name:'Answer Tokens', title:'Weighted by ', letter:'a' },
+        { key:'total_samples',       name:'Number of Samples', title:'Weighted by ', letter:'b' },
+        { key:'total_turns',         name:'Number of Turns', title:'Weighted by ', letter:'c' },
+        { key:'total_images',        name:'Number of Images', title:'Weighted by ', letter:'d' }
       ];
 
       // CSV: load from public path
@@ -90,28 +131,24 @@
 
       // Layout
       let width=800; const margin = { top: 8, right: 24, bottom: 0, left: 24 };
-      const CAPTION_GAP = 24;   // espace entre titre et donut
+      const CAPTION_GAP = 36;   // espace entre titre et donut
       const GAP_X = 20;         // espace entre colonnes
       const GAP_Y = 12;         // espace entre lignes
-      const LEGEND_HEIGHT_DESKTOP = 62; // hauteur de la légende sur desktop
-      const LEGEND_HEIGHT_MOBILE = 84;  // hauteur de la légende sur mobile
       const TOP_OFFSET = 4;     // décalage vertical supplémentaire pour aérer le haut
+      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 .legend { margin-bottom }
+      const SVG_VPAD = 16;      // padding vertical supplémentaire à l'intérieur des SVG pour éviter la coupe
+      
       const updateSize = () => {
         width = container.clientWidth || 800;
-        svg.attr('width', width);
-        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
         return { innerWidth: width - margin.left - margin.right };
       };
 
-      function renderLegend(categories, colorOf, width, x, legendY, legendHeight){
-        gLegend.attr('x', x).attr('y', legendY).attr('width', width).attr('height', legendHeight);
-        const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
-        root
-          .style('height', legendHeight + 'px')
-          .style('display', 'flex')
-          .style('align-items', 'center')
-          .style('justify-content', 'center');
-        root.html(`<div class="items">${categories.map(c => `<div class="item"><span class="swatch" style="background:${colorOf(c)}"></span><span style="font-weight:500">${c}</span></div>`).join('')}</div>`);
+      function renderLegend(categories, colorOf){
+        legendHost.style.display = 'flex';
+        legendHost.style.alignItems = 'center';
+        legendHost.style.justifyContent = 'center';
+        legendHost.innerHTML = `<div class="items">${categories.map(c => `<div class="item"><span class="swatch" style="background:${colorOf(c)}"></span><span style="font-weight:500">${c}</span></div>`).join('')}</div>`;
       }
 
       function drawPies(rows){
@@ -122,60 +159,25 @@
         const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10);
         const colorOf = (cat) => color(cat || 'Unknown');
 
-        // Clear plots
-        gPlots.selectAll('*').remove();
-
-        // Colonnes responsives: tenter 4 colonnes si possible, sinon descendre à 3/2/1
-        const selectCols = () => {
-          const MIN_RADIUS = 80; // garantir lisibilité
-          const allowed = [4, 2, 1]; // seulement 4 / 2 / 1 colonnes
-          // 1) essayer avec contrainte de rayon minimal
-          for (const c of allowed) {
-            const cw = (innerWidth - GAP_X * (c - 1)) / c;
-            const r = Math.max(30, Math.min(cw * 0.42, 120));
-            const gw = c * (r * 2) + (c - 1) * GAP_X;
-            if (gw <= innerWidth && r >= MIN_RADIUS) {
-              return { c, r };
-            }
-          }
-          // 2) sinon, première config qui tient (même si plus petit rayon)
-          for (const c of allowed) {
-            const cw = (innerWidth - GAP_X * (c - 1)) / c;
-            const r = Math.max(30, Math.min(cw * 0.42, 120));
-            const gw = c * (r * 2) + (c - 1) * GAP_X;
-            if (gw <= innerWidth) {
-              return { c, r };
-            }
-          }
-          // 3) fallback très petit écran
-          const r1 = Math.max(30, Math.min(innerWidth * 0.42, 120));
-          return { c: 1, r: r1 };
-        };
-        const { c: cols, r: radius } = selectCols();
-        const rowsCount = Math.ceil(METRICS.length / cols);
-        const innerR = Math.round(radius * 0.28);
-        // Calculer un espacement effectif pour occuper toute la largeur disponible
-        const baseGap = GAP_X;
-        const effectiveGapX = cols > 1
-          ? Math.max(baseGap, Math.floor((innerWidth - cols * (radius * 2)) / (cols - 1)))
-          : 0;
-        // largeur réelle de la grille avec l'espacement effectif
-        const gridWidth = cols * (radius * 2) + (cols - 1) * effectiveGapX;
-        const xOffset = Math.max(0, Math.floor((innerWidth - gridWidth) / 2));
-        gPlots.attr('transform', `translate(${xOffset},${TOP_OFFSET})`);
-        const perRowHeight = Math.ceil(radius * 2 + CAPTION_GAP + 20); // donut + caption + marge
-        const plotsHeight = rowsCount * perRowHeight + (rowsCount - 1) * GAP_Y;
+        // Clear plots grid
+        plotsHost.innerHTML = '';
+
+        // Légende au-dessus, centrée
+        renderLegend(categories, colorOf);
+
+        // Rayon fixé selon la largeur cible d'une cellule (gérée par CSS)
+        const CELL_BASIS = 360; // doit correspondre à .pie-cell { flex-basis }
+        const radius = Math.max(80, Math.min(120, Math.floor(CELL_BASIS * 0.42)));
+        const innerR = Math.round(radius * DONUT_INNER_RATIO);
+        // Placement géré par CSS; ici on ne fait que l'espacement vertical minimal
+        plotsHost.style.position = 'relative';
+        plotsHost.style.marginTop = (TOP_OFFSET) + 'px';
 
         const pie = d3.pie().sort(null).value(d => d.value).padAngle(0.02);
         const arc = d3.arc().innerRadius(innerR).outerRadius(radius).cornerRadius(3);
         const arcLabel = d3.arc().innerRadius((innerR + radius) / 2).outerRadius((innerR + radius) / 2);
 
-        // Positionner la légende sous les graphiques, calée sur la grille centrée
-        const legendY = TOP_OFFSET + plotsHeight + 4;
-        const legendHeight = innerWidth <= 600 ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT_DESKTOP;
-        renderLegend(categories, colorOf, gridWidth, xOffset, legendY, legendHeight);
-
-        const captions = new Map(METRICS.map(m => [m.key, `${m.title}`]));
+        // Légende déjà rendue au-dessus
 
         METRICS.forEach((metric, idx) => {
           // Aggregate by category
@@ -184,12 +186,20 @@
           const values = categories.map(c => ({ category: c, value: totals.get(c) || 0 }));
           const totalSum = d3.sum(values, d => d.value);
 
-          const rowIdx = Math.floor(idx / cols);
-          const colIdx = idx % cols;
-          const cx = colIdx * ((radius * 2) + effectiveGapX) + radius;
-          const cy = TOP_OFFSET + rowIdx * (perRowHeight + GAP_Y) + CAPTION_GAP + radius;
-
-          const gCell = gPlots.append('g').attr('transform', `translate(${cx},${cy})`);
+          // Create HTML cell container
+          const cell = document.createElement('div');
+          cell.className = 'pie-cell';
+          cell.style.width = (radius * 2) + 'px';
+          cell.style.height = (radius * 2 + SVG_VPAD * 2 + CAPTION_GAP + 24) + 'px';
+          cell.style.display = 'flex';
+          cell.style.flexDirection = 'column';
+          cell.style.alignItems = 'center';
+          cell.style.justifyContent = 'flex-start';
+          plotsHost.appendChild(cell);
+
+          // SVG pie inside cell
+          const svg = d3.select(cell).append('svg').attr('width', radius * 2).attr('height', radius * 2 + SVG_VPAD * 2).style('display','block');
+          const gCell = svg.append('g').attr('transform', `translate(${radius},${radius + SVG_VPAD})`);
 
           if (!totalSum || totalSum <= 0) {
             gCell.append('text').attr('class','nodata').attr('text-anchor','middle').attr('dy','0').text('No data for this metric');
@@ -222,17 +232,12 @@
               .text(d => `${percent(d.data.value).toFixed(1)}%`);
           }
 
-          // Caption above donut
-          gCell.append('text')
-            .attr('class','caption')
-            .attr('text-anchor','middle')
-            .attr('y', -(radius + (CAPTION_GAP - 6)))
-            .text(captions.get(metric.key));
+          // HTML captions under the SVG (keep design)
+          const subtitleEl = document.createElement('div'); subtitleEl.className = 'caption-subtitle'; subtitleEl.textContent = metric.title; subtitleEl.style.textAlign = 'center'; subtitleEl.style.marginTop = (CAPTION_GAP - 18) + 'px'; cell.appendChild(subtitleEl);
+          const titleEl = document.createElement('div'); titleEl.className = 'caption'; titleEl.textContent = metric.name; titleEl.style.textAlign = 'center'; cell.appendChild(titleEl);
         });
 
-        // Définir la hauteur totale du SVG après avoir placé les éléments
-        const totalHeight = Math.ceil(margin.top + TOP_OFFSET + plotsHeight + 4 + legendHeight + margin.bottom);
-        svg.attr('height', totalHeight);
+        // Container height flows naturally with HTML; nothing to do
       }
 
       async function init(){

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

@@ -0,0 +1,234 @@
+<div class="d3-scatter" style="width:100%;margin:10px 0;"></div>
+<style>
+  /* Frameless: no controls, no axes, only dots */
+  .d3-scatter svg { display: block; }
+</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-scatter'))){
+        const cs = Array.from(document.querySelectorAll('.d3-scatter')).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:'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; }
+
+      // SVG
+      const svg = d3.select(container).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 gDots = gRoot.append('g').attr('class','dots');
+      const gCentroids = gRoot.append('g').attr('class','centroids');
+      const gLegend = gRoot.append('foreignObject').attr('class','legend');
+
+      // 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 = () => 4;
+
+      // Data loading (real): banner visualization positions by category
+      async function fetchFirstAvailable(paths){
+        for (const p of paths){
+          try {
+            const res = await fetch(p, { cache: 'no-cache' });
+            if (res.ok){ return await res.text(); }
+          } catch (e) {}
+        }
+        throw new Error('Failed to load data from provided paths');
+      }
+
+      let data = [];
+      let categories = [];
+      let colorMode = 'group';
+
+      function renderLegend(innerWidth){ gLegend.remove(); }
+
+      function updateScales(data){
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
+        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';
+
+        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();
+
+        // Frameless: no grid, no axes
+        gGrid.selectAll('*').remove();
+        gAxes.selectAll('*').remove();
+
+        renderLegend(innerWidth);
+
+        return { innerWidth, innerHeight };
+      }
+
+      function refreshPalette(){
+        try {
+          const raw = getComputedStyle(document.documentElement).getPropertyValue('--palette-categorical-json').trim();
+          const arr = raw ? JSON.parse(raw) : [];
+          if (arr && arr.length) color.range(arr);
+          else color.range(['var(--primary-color)','#4EA5B7','#E38A42','#CEC0FA','#98C97C','#F6BD60']);
+        } catch {
+          color.range(['var(--primary-color)','#4EA5B7','#E38A42','#CEC0FA','#98C97C','#F6BD60']);
+        }
+        // Recolor existing marks/labels after palette changes
+        try { if (data && data.length) draw(); } catch {}
+      }
+
+      function draw(){
+        if (!data || !data.length) return;
+        const { innerWidth, innerHeight } = updateScales(data);
+        const fillFor = d => colorMode === 'group' ? color(d.group) : 'var(--primary-color)';
+
+        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)
+          .on('mouseenter', function(ev, d){
+            d3.select(this).attr('stroke','rgba(0,0,0,0.9)').attr('stroke-width', 1);
+            tipInner.innerHTML = `<div><strong>${d.label || 'Item'}</strong></div><div>(x: ${d.x.toFixed(2)}, y: ${d.y.toFixed(2)})</div><div>Category: ${d.group}</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(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; d3.select(this).attr('stroke','none'); })
+          .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);
+        dots.exit().remove();
+
+        // Compute centroids per category
+        const centroids = Array.from(
+          d3.rollup(
+            data,
+            (v) => ({
+              category: v[0] ? v[0].group : 'Unknown',
+              x: d3.mean(v, (d) => d.x),
+              y: d3.mean(v, (d) => d.y),
+              count: v.length
+            }),
+            (d) => d.group
+          ).values()
+        );
+
+        // Map to pixel space nodes for collision-avoiding label placement
+        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
+          .attr('transform', d => `translate(${Math.round(d.x)}, ${Math.round(d.y)})`)
+          .each(function(d){
+            const base = color(d.category || 'Unknown') || 'var(--text-color)';
+            const bg = getComputedStyle(document.documentElement).getPropertyValue('--surface-bg').trim() || '#fff';
+            const bgNode = this.querySelector('text.label-bg');
+            const fgNode = this.querySelector('text.label-fg');
+            if (bgNode) {
+              bgNode.textContent = d.category;
+              bgNode.style.setProperty('fill', bg, 'important');
+              bgNode.style.setProperty('stroke', bg);
+              bgNode.style.setProperty('stroke-width', '10px');
+              bgNode.style.setProperty('paint-order', 'stroke fill');
+              bgNode.style.setProperty('font-weight','800');
+              bgNode.style.setProperty('font-size','16px');
+            }
+            if (fgNode) {
+              fgNode.textContent = d.category;
+              fgNode.style.setProperty('fill', base, 'important');
+              fgNode.style.setProperty('font-weight','800');
+              fgNode.style.setProperty('font-size','16px');
+            }
+          });
+        labels.exit().remove();
+      }
+
+      // Initial load
+      refreshPalette();
+      document.addEventListener('palettes:updated', refreshPalette);
+
+      (async () => {
+        try {
+          const csvText = await fetchFirstAvailable([
+            '/data/banner_visualisation_data.csv',
+            './assets/data/banner_visualisation_data.csv',
+            '../assets/data/banner_visualisation_data.csv',
+            '/data/banner_visualisation_data.csv'
+          ]);
+          const rows = d3.csvParse(csvText);
+          data = rows.map((r, i) => ({
+            id: +r.original_id ?? i,
+            x: +r.x_position,
+            y: +r.y_position,
+            group: r.category || 'Unknown',
+            label: r.subset || r.category || `Item ${i+1}`
+          })).filter(d => Number.isFinite(d.x) && Number.isFinite(d.y));
+          categories = Array.from(new Set(data.map(d=>d.group)));
+          color.domain(categories);
+          draw();
+        } catch (e) {
+          const pre = document.createElement('pre'); pre.style.color = 'crimson'; pre.textContent = 'Failed to load scatter data.'; container.appendChild(pre);
+        }
+      })();
+
+      const rerender = () => { draw(); };
+      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/demo/palettes.html

@@ -66,10 +66,10 @@
     <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">6</output>
+        <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="6" aria-label="Number of colors" />
+        <input id="color-count" type="range" min="6" max="10" step="1" value="8" aria-label="Number of colors" />
       </div>
     </div>
   </div>
@@ -103,18 +103,12 @@
       { key: 'diverging', title: 'Diverging', desc: 'Opposing extremes via <strong>base → white → complement</strong>; smooth contrast around a neutral midpoint.' }
     ];
 
-    const getCssVar = (name) => {
-      try { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); } catch { return ''; }
-    };
-
-    const getPaletteColors = (key) => {
-      const count = Number(getCssVar(`--palette-${key}-count-current`)) || Number(getCssVar('--palette-count')) || 6;
-      const colors = [];
-      for (let i = 1; i <= count; i++) {
-        const v = getCssVar(`--palette-${key}-${i}`);
-        if (v) colors.push(v);
+    const getPaletteColors = (key, count) => {
+      const total = Number(count) || 6;
+      if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+        return window.ColorPalettes.getColors(key, total) || [];
       }
-      return colors;
+      return [];
     };
 
     const render = () => {
@@ -123,8 +117,10 @@
       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);
+        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(',')}">
@@ -172,19 +168,13 @@
       const input = document.getElementById('color-count');
       const out = document.getElementById('color-count-out');
       if (!input) return;
-      const read = () => {
-        const v = Number(getCssVar('--palette-count')) || 6;
-        return Math.max(6, Math.min(10, v));
-      };
-      const write = (v) => {
-        document.documentElement.style.setProperty('--palette-count', String(v));
-        if (window.ColorPalettes && typeof window.ColorPalettes.refresh === 'function') window.ColorPalettes.refresh();
-      };
+      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 syncInput = () => { try { input.value = String(read()); } catch {} };
-      syncInput(); syncOut();
-      input.addEventListener('input', () => { write(input.value); syncOut(); });
-      document.addEventListener('palettes:updated', () => { syncInput(); syncOut(); render(); });
+      const onChange = () => { syncOut(); render(); };
+      syncOut();
+      input.addEventListener('input', onChange);
+      document.addEventListener('palettes:updated', () => { syncOut(); render(); });
     };
 
     let copyDelegationSetup = false;
@@ -218,17 +208,8 @@
       setupCountControl();
       render();
       setupCopyDelegation();
-      // Re-render when global palettes update and when :root style changes
+      // Re-render when primary color changes
       document.addEventListener('palettes:updated', render);
-      const mo = new MutationObserver(() => render());
-      mo.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-
-      // Fallback: if global script loads after this fragment and we missed the event
-      const waitForPalettes = () => {
-        if (getCssVar('--palette-categorical-1')) { render(); return; }
-        setTimeout(waitForPalettes, 50);
-      };
-      waitForPalettes();
     };
 
     if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once: true });

app/src/content/embeds/filters-quad.html

@@ -61,10 +61,60 @@
   .quad-cell .legend .items { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:flex-end; }
   .quad-cell .legend .item { display:flex; align-items:center; gap:6px; white-space:nowrap; }
   .quad-cell .legend .swatch { width:10px; height:10px; border-radius:50%; display:inline-block; }
+  /* Tooltip refined styling */
+  .filters-quad .d3-tooltip {
+    z-index: 20;
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+  .filters-quad .d3-tooltip__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 220px;
+  }
+  .filters-quad .d3-tooltip__inner > div:first-child {
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    margin-bottom: 0;
+  }
+  .filters-quad .d3-tooltip__inner > div:nth-child(2) {
+    font-size: 11px;
+    color: var(--muted-color);
+    display: block;
+    margin-top: -4px;
+    margin-bottom: 2px;
+    letter-spacing: 0.1px;
+  }
+  .filters-quad .d3-tooltip__inner > div:nth-child(n+3) {
+    padding-top: 6px;
+    border-top: 1px solid var(--border-color);
+  }
+  .filters-quad .d3-tooltip__inner svg {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 2px;
+  }
+  .filters-quad .d3-tooltip__inner strong {
+    margin-right: 6px;
+  }
 </style>
 <script>
   (() => {
     const THIS_SCRIPT = document.currentScript;
+    // Pretty label mapping for metric keys
+    const prettyMetricLabel = (key) => {
+      if (!key) return '';
+      const table = {
+        'ai2d_exact_match': 'AI2D Exact Match',
+        'average_rank': 'Average Rank',
+      };
+      if (table[key]) return table[key];
+      const cleaned = String(key).replace(/[_-]+/g, ' ').trim();
+      return cleaned.split(/\s+/).map(w => {
+        if (/^(ai2d|umap|id|auc|f1)$/i.test(w)) return w.toUpperCase();
+        return w.charAt(0).toUpperCase() + w.slice(1);
+      }).join(' ');
+    };
     const ensureD3 = (cb) => {
       if (window.d3 && typeof window.d3.select === 'function') return cb();
       let s = document.getElementById('d3-cdn-script');
@@ -98,15 +148,43 @@
 
       // Tooltip
       cell.style.position = cell.style.position || 'relative';
-      let tip = cell.querySelector('.d3-tooltip'); let tipInner;
-      if (!tip) { tip = document.createElement('div'); tip.className = 'd3-tooltip'; Object.assign(tip.style, { position:'absolute', top:'0', left:'0', transform:'translate(-9999px,-9999px)', pointerEvents:'none', padding:'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); cell.appendChild(tip);} else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+      let tip = cell.querySelector('.d3-tooltip'); let tipInner; let hideTipTimer = null;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position:'absolute',
+          top:'0',
+          left:'0',
+          transform:'translate(-9999px,-9999px)',
+          pointerEvents:'none',
+          padding:'10px 12px',
+          borderRadius:'12px',
+          fontSize:'12px',
+          lineHeight:'1.35',
+          border:'1px solid var(--border-color)',
+          background:'var(--surface-bg)',
+          color:'var(--text-color)',
+          boxShadow:'0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
+          opacity:'0',
+          transition:'opacity .12s ease',
+          backdropFilter:'saturate(1.12) blur(8px)'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign='left';
+        tip.appendChild(tipInner);
+        cell.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
 
       // State
       let metricList = []; let runList = []; let runOrder = []; const dataByMetric = new Map();
-      let width = 800, height = 340; const margin = { top: 12, right: 20, bottom: 46, left: 56 };
+      let width = 800, height = 340; const margin = { top: 16, right: 20, bottom: 46, left: 56 };
       const xScale = d3.scaleLinear(); const yScale = d3.scaleLinear();
       const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
-      let isRankStrictFlag = false; let rankTickMax = 1;
+      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 primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
@@ -130,6 +208,16 @@
             return selection.append('circle').attr('r', s);
         }
       }
+      // Inline SVG for tooltip shapes
+      function markerSVG(shape, color) {
+        const size = 12; const s = size / 2; const stroke = color;
+        if (shape === 'circle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        if (shape === 'square') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        if (shape === 'triangle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        if (shape === 'diamond') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        if (shape === 'inverted-triangle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+      }
       // Ready signal for async load completion
       let readyResolve = null;
       const ready = new Promise((res)=> { readyResolve = res; });
@@ -162,22 +250,42 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0); xAxis = xAxis.ticks(8);
-        const isMobile = (typeof window !== 'undefined' && window.matchMedia) ? window.matchMedia('(max-width: 980px)').matches : false;
-        if (isMobile) {
-          const fmtK = (v) => {
-            const abs = Math.abs(v);
-            if (abs >= 1000) {
-              const n = v / 1000;
-              return (Math.round(n) === n ? n : d3.format('.1f')(n)) + 'K';
-            }
-            return d3.format('d')(v);
-          };
-          xAxis = xAxis.tickFormat(fmtK);
-        }
+        const fmtK = (v) => {
+          const abs = Math.abs(v);
+          if (abs >= 1000) {
+            const n = v / 1000;
+            const s = d3.format('.1f')(n);
+            return (s.endsWith('.0') ? s.slice(0, -2) : s) + 'k';
+          }
+          return d3.format('d')(v);
+        };
+        xAxis = xAxis.tickFormat(fmtK);
         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'); });
 
+        // Axis labels
+        gAxes.append('text')
+          .attr('class', 'x-axis-label')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + Math.max(20, Math.min(36, margin.bottom - 10)))
+          .attr('fill', tickColor)
+          .attr('text-anchor', 'middle')
+          .style('font-size', '12px')
+          .style('font-weight', '700')
+          .text('Steps');
+
+        gAxes.append('text')
+          .attr('class', 'y-axis-label')
+          .attr('transform', 'rotate(-90)')
+          .attr('x', -innerHeight / 2)
+          .attr('y', -Math.max(16, Math.min(28, margin.left - 8) + 10))
+          .attr('fill', tickColor)
+          .attr('text-anchor', 'middle')
+          .style('font-size', '12px')
+          .style('font-weight', '700')
+          .text(axisLabelY);
+
         // Legend box (top-right)
         // Per-cell legend hidden; global legend is used
         const legendWidth = 0, legendHeight = 0;
@@ -194,9 +302,24 @@
         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); }); });
         if (!isFinite(minStep) || !isFinite(maxStep)) return;
-        xScale.domain([minStep, maxStep]); if (isRank) { rankTickMax = Math.max(1, Math.round(maxVal)); yScale.domain([rankTickMax, 1]); } else { yScale.domain([minVal, maxVal]).nice(); }
-        isRankStrictFlag = isRankStrict;
+        xScale.domain([minStep, maxStep]);
+        if (sharedYConfig && sharedYConfig.type === 'rank_strict') {
+          rankTickMax = Math.max(1, Math.round(sharedYConfig.maxRank||1));
+          yScale.domain([rankTickMax, 1]);
+          isRankStrictFlag = true;
+          isRankMetricFlag = true;
+        } else if (sharedYConfig && sharedYConfig.type === 'value') {
+          yScale.domain([sharedYConfig.min, sharedYConfig.max]);
+          isRankStrictFlag = isRankStrict;
+          isRankMetricFlag = isRank;
+        } else {
+          if (isRank) { rankTickMax = Math.max(1, Math.round(maxVal)); yScale.domain([rankTickMax, 1]); }
+          else { yScale.domain([minVal, maxVal]).nice(); }
+          isRankStrictFlag = isRankStrict;
+          isRankMetricFlag = isRank;
+        }
 
+        axisLabelY = isRankStrict ? 'Rank' : prettyMetricLabel(metricKey);
         const { innerWidth, innerHeight } = updateScales();
 
         const series = runs.map((r, i) => ({ run:r, color: pool[i % pool.length], marker: markerShapes[i % markerShapes.length], 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) }));
@@ -242,10 +365,14 @@
         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').attr('stroke','rgba(0,0,0,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){ 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> ${nearest}</div>`; series.forEach(s=>{ const m = new Map(s.values.map(v=>[v.step, v])); const pt = m.get(nearest); if (pt && pt.value!=null){ const fmt = (vv)=> (isRankStrictFlag? d3.format('d')(vv) : (+vv).toFixed(4)); const err = (pt.stderr!=null && isFinite(pt.stderr) && pt.stderr>0) ? ` ± ${fmt(pt.stderr)}` : ''; html+=`<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${fmt(pt.value)}${err}</div>`; }});
+        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> ${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, marker:s.marker, 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)}` : ''; html += `<div style="display:flex;align-items:center;gap:6px;white-space:nowrap;">${markerSVG(e.marker, e.color)}<strong>${e.run}</strong> ${fmt(e.pt.value)}${err}</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(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); }
+        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);
       }
 
@@ -284,7 +411,16 @@
       return {
         ready,
         getMetrics: () => metricList.slice(),
-        setMetric: (m) => { if (m) renderMetric(m); }
+        setMetric: (m) => { if (m) renderMetric(m); },
+        getYInfo: (m) => {
+          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); }); });
+          const rankMax = isRank ? Math.max(1, Math.round(maxVal)) : null;
+          return { isRank, isRankStrict, min: minVal, max: maxVal, rankMax };
+        },
+        setSharedY: (cfg) => { sharedYConfig = cfg || null; if (metricList && metricList.length) { /* re-render last metric if possible */ const current = cfg && cfg.key ? cfg.key : null; const m = current || metricList[0]; renderMetric(m); } }
       };
     }
 
@@ -324,11 +460,27 @@
         ctrl.innerHTML = '';
         const label = document.createElement('label'); label.textContent = 'Metric';
         const select = document.createElement('select');
-        metrics.forEach(m => { const o=document.createElement('option'); o.value=m; o.textContent=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;
         label.appendChild(select); ctrl.appendChild(label);
 
-        const applyAll = (v) => instances.forEach(i => i && typeof i.setMetric === 'function' && i.setMetric(v));
+        const computeAndApplySharedY = (metric) => {
+          try {
+            const infos = instances.map(i => i && typeof i.getYInfo === 'function' ? i.getYInfo(metric) : null).filter(Boolean);
+            if (!infos.length) return;
+            const anyRank = infos.some(info => info.isRank);
+            if (anyRank) {
+              const maxRank = Math.max(1, ...infos.map(info => Math.round(info.rankMax || 1)));
+              instances.forEach(i => i && typeof i.setSharedY === 'function' && i.setSharedY({ type: 'rank_strict', maxRank, key: metric }));
+            } else {
+              const min = Math.min(...infos.map(info => info.min));
+              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 (_) {}
+        };
+
+        const applyAll = (v) => { computeAndApplySharedY(v); instances.forEach(i => i && typeof i.setMetric === 'function' && i.setMetric(v)); };
         if (def) applyAll(def);
         select.addEventListener('change', () => applyAll(select.value));
 

app/src/scripts/color-palettes.js

@@ -61,15 +61,7 @@
     if (rgb) return toHex(rgb);
     return '#E889AB';
   };
-  const getCounts = () => {
-    const Fallback = 6;
-    const globalCount = clamp(getIntFromCssVar('--palette-count', Fallback), 1, 12);
-    return {
-      categorical: clamp(getIntFromCssVar('--palette-categorical-count', globalCount), 1, 12),
-      sequential: clamp(getIntFromCssVar('--palette-sequential-count', globalCount), 1, 12),
-      diverging: clamp(getIntFromCssVar('--palette-diverging-count', globalCount), 1, 12),
-    };
-  };
+  // No count management via CSS anymore; counts are passed directly to the API
 
   const generators = {
     categorical: (baseHex, count) => {
@@ -79,7 +71,7 @@
       const { C, h } = oklabToOklch(L,a,bb);
       const L0 = Math.min(0.85, Math.max(0.4, L));
       const C0 = Math.min(0.35, Math.max(0.1, C || 0.2));
-      const total = Math.max(1, Math.min(12, count || 6));
+      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)); }
@@ -90,7 +82,7 @@
       const { r, g, b } = parseHex(baseHex);
       const { L, a, b: bb } = rgbToOklab(r,g,b);
       const { C, h } = oklabToOklch(L,a,bb);
-      const total = Math.max(1, Math.min(12, count || 6));
+      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));
@@ -103,7 +95,7 @@
       const { r, g, b } = parseHex(baseHex);
       const baseLab = rgbToOklab(r,g,b);
       const baseLch = oklabToOklch(baseLab.L, baseLab.a, baseLab.b);
-      const total = Math.max(1, Math.min(12, count || 6));
+      const total = Math.max(1, Math.min(12, count || 8));
 
       // Left endpoint: EXACT primary color (no darkening)
       const leftLab = baseLab;
@@ -157,41 +149,14 @@
     }
   };
 
-  const setCssVar = (name, value) => { try { MODE.cssRoot.style.setProperty(name, value); } catch {} };
-  const removeCssVar = (name) => { try { MODE.cssRoot.style.removeProperty(name); } catch {} };
-
   let lastSignature = '';
-  let lastCounts = { categorical: 0, sequential: 0, diverging: 0 };
 
   const updatePalettes = () => {
     const primary = getPrimaryHex();
-    const counts = getCounts();
-    const signature = `${primary}|${counts.categorical}|${counts.sequential}|${counts.diverging}`;
+    const signature = `${primary}`;
     if (signature === lastSignature) return;
-
-    const out = {};
-    out.categorical = generators.categorical(primary, counts.categorical);
-    out.sequential = generators.sequential(primary, counts.sequential);
-    out.diverging = generators.diverging(primary, counts.diverging);
-
-    setCssVar('--primary-hex', primary);
-    setCssVar('--palette-categorical-count-current', String(out.categorical.length));
-    setCssVar('--palette-sequential-count-current', String(out.sequential.length));
-    setCssVar('--palette-diverging-count-current', String(out.diverging.length));
-
-    const applyList = (key, list, prevCount) => {
-      for (let i=0;i<list.length;i++) setCssVar(`--palette-${key}-${i+1}`, list[i]);
-      for (let i=list.length;i<prevCount;i++) removeCssVar(`--palette-${key}-${i+1}`);
-      setCssVar(`--palette-${key}-json`, JSON.stringify(list));
-    };
-    applyList('categorical', out.categorical, lastCounts.categorical);
-    applyList('sequential', out.sequential, lastCounts.sequential);
-    applyList('diverging', out.diverging, lastCounts.diverging);
-
-    lastCounts = { categorical: out.categorical.length, sequential: out.sequential.length, diverging: out.diverging.length };
     lastSignature = signature;
-
-    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary, counts, palettes: out } })); } catch {}
+    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {}
   };
 
   const bootstrap = () => {
@@ -201,11 +166,14 @@
     setInterval(updatePalettes, 400);
     window.ColorPalettes = {
       refresh: updatePalettes,
-      getColors: (key) => {
-        const count = Number(getCssVar(`--palette-${key}-count-current`)) || 0;
-        const arr = [];
-        for (let i=0;i<count;i++) arr.push(getCssVar(`--palette-${key}-${i+1}`));
-        return arr.filter(Boolean);
+      getPrimary: () => getPrimaryHex(),
+      getColors: (key, count = 6) => {
+        const primary = getPrimaryHex();
+        const total = Math.max(1, Math.min(12, Number(count) || 6));
+        if (key === 'categorical') return generators.categorical(primary, total);
+        if (key === 'sequential') return generators.sequential(primary, total);
+        if (key === 'diverging') return generators.diverging(primary, total);
+        return [];
       }
     };
   };

app/src/styles/_layout.css

@@ -66,6 +66,7 @@
   box-sizing: border-box;
   position: relative;
   z-index: var(--z-elevated);
+  background-color: var(--background-color);
 }
 
 .wide {
@@ -92,6 +93,18 @@
   }
 }
 
+/* ============================================================================ */
+/* Theme toggle placement                                                       */
+/* ============================================================================ */
+
+#theme-toggle {
+  position: fixed;
+  top: calc(var(--spacing-2) + var(--hf-spaces-topbar, 0px));
+  right: var(--content-padding-x);
+  margin: 0;
+  z-index: var(--z-overlay);
+}
+
 /* ------------------------------------------------------------------------- */
 /* Hero meta bar responsiveness                                               */
 /* Two columns at collapse breakpoint, then one column below small screens    */

app/src/styles/_variables.css

@@ -55,7 +55,7 @@
   --block-spacing-y: var(--spacing-4); /* default vertical spacing between block components */
 
   /* Config */
-  --palette-count: 6;
+  --palette-count: 8;
 
   /* Button tokens */
   --button-radius: 6px;