update

.gitignore

@@ -22,4 +22,5 @@ node_modules/
 # PDF export
 app/public/*.pdf
 app/public/*.png
-app/public/*.jpg
+app/public/*.jpg
+app/public/data/**/*

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

@@ -1,206 +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": {
-"available-blocks.mdx": {
-	id: "available-blocks.mdx";
-  slug: "available-blocks";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"best-pratices.mdx": {
-	id: "best-pratices.mdx";
-  slug: "best-pratices";
-  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"] };
-"writing-your-content.mdx": {
-	id: "writing-your-content.mdx";
-  slug: "writing-your-content";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-};
-
-	};
-
-	type DataEntryMap = {
-		"assets": {
-"data/mnist-variant-model": {
-	id: "data/mnist-variant-model";
-  collection: "assets";
-  data: any
-};
-};
-"embeds": Record<string, {
-  id: string;
-  collection: "embeds";
-  data: any;
-}>;
-
-	};
-
-	type AnyEntryMap = ContentEntryMap & DataEntryMap;
-
-	export type ContentConfig = never;
-}

app/astro.config.mjs

@@ -151,6 +151,15 @@ export default defineConfig({
   devToolbar: {
     enabled: false
   },
+  // Expose a public flag to control TOC auto-collapse behavior at runtime
+  // This can be overridden via environment variable PUBLIC_TOC_AUTO_COLLAPSE
+  // (Vite define provides a default fallback when env is not set.)
+  vite: {
+    define: {
+      'import.meta.env.PUBLIC_TOC_AUTO_COLLAPSE': JSON.stringify(false),
+      'import.meta.env.PUBLIC_TABLE_OF_CONTENT_AUTO_COLLAPSE': JSON.stringify(false)
+    }
+  },
   markdown: {
     shikiConfig: {
       themes: {

app/public/scripts/color-palettes.js

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

app/src/components/HtmlEmbed.astro

@@ -31,6 +31,12 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
   <div><!-- Fragment not found: {src} --></div>
  ) }
 
+<script type="module" is:inline>
+  // Ensure global color palettes generator is loaded once per page
+  import '../scripts/color-palettes.js';
+  export {};
+</script>
+
 <script>
   // Re-execute <script> tags inside the injected fragment (innerHTML doesn't run scripts)
   const scriptEl = document.currentScript;
@@ -45,7 +51,7 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
       old.dataset.executed = 'true';
       if (old.src) {
         const s = document.createElement('script');
-        Array.from(old.attributes).forEach(({ name, value }) => s.setAttribute(name, value));
+        Array.from(old.attributes).forEach(attr => s.setAttribute(attr.name, attr.value));
         document.body.appendChild(s);
       } else {
         try {
@@ -57,10 +63,9 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
       }
     });
   };
-  // Ensure execution when ready: run now if Plotly or D3 is present, or when document is ready; otherwise wait for 'load'
-  // @ts-expect-error: Plotly/d3 are attached globally at runtime via embeds
-  if (window.Plotly || window.d3 || document.readyState === 'complete') execute();
-  else window.addEventListener('load', execute, { once: true });
+  // Execute after DOM is parsed (ensures deferred module scripts are executed first)
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', execute, { once: true });
+  else execute();
   </script>
 
 <style>

app/src/components/Note.astro

@@ -1,6 +1,12 @@
 ---
-const { title, emoji, class: className, ...props } = Astro.props;
-const wrapperClass = ["note", className].filter(Boolean).join(" ");
+interface Props {
+  title?: string;
+  emoji?: string;
+  class?: string;
+  variant?: 'neutral' | 'info' | 'success' | 'danger';
+}
+const { title, emoji, class: className, variant = 'neutral', ...props } = Astro.props as Props;
+const wrapperClass = ["note", `note--${variant}`, className].filter(Boolean).join(" ");
 const hasHeader = (emoji && String(emoji).length > 0) || (title && String(title).length > 0);
 ---
 <div class={wrapperClass} {...props}>
@@ -21,5 +27,11 @@ const hasHeader = (emoji && String(emoji).length > 0) || (title && String(title)
   .note__content { color: var(--text-color); font-size: 0.95rem; }
   /* Ensure the very last slotted element has no bottom margin */
   .note .note__content > :global(*:last-child) { margin-bottom: 0 !important; }
+
+  /* Variants */
+  .note.note--neutral { border-left-color: var(--border-color); background: var(--surface-bg); }
+  .note.note--info { border-left-color: #f39c12; background: color-mix(in oklab, #f39c12 10%, var(--surface-bg)); }
+  .note.note--success { border-left-color: #2ecc71; background: color-mix(in oklab, #2ecc71 8%, var(--surface-bg)); }
+  .note.note--danger { border-left-color: #e74c3c; background: color-mix(in oklab, #e74c3c 8%, var(--surface-bg)); }
 </style>
 

app/src/components/ResponsiveImage.astro

@@ -11,28 +11,157 @@ interface Props {
   caption?: string;
   /** Optional class to apply on the <figure> wrapper when caption is used */
   figureClass?: string;
+  /** Enable medium-zoom behavior on this image */
+  zoomable?: boolean;
+  /** Show a download button overlay and enable download flow */
+  downloadable?: boolean;
+  /** Optional explicit file name to use on download */
+  downloadName?: string;
+  /** Optional explicit source URL to download instead of currentSrc */
+  downloadSrc?: string;
   /** Any additional attributes should be forwarded to the underlying <Image> */
   [key: string]: any;
 }
 
-const { caption, figureClass, ...imgProps } = Astro.props as Props;
+const { caption, figureClass, zoomable, downloadable, downloadName, downloadSrc, ...imgProps } = Astro.props as Props;
 const hasCaptionSlot = Astro.slots.has('caption');
 const hasCaption = hasCaptionSlot || (typeof caption === 'string' && caption.length > 0);
+const uid = `ri_${Math.random().toString(36).slice(2)}`;
+const dataZoomable = (zoomable === true || (imgProps as any)['data-zoomable']) ? '1' : undefined;
+const dataDownloadable = (downloadable === true || (imgProps as any)['data-downloadable']) ? '1' : undefined;
 ---
-
-{hasCaption ? (
-  <figure class={figureClass}>
-    <Image {...imgProps} />
-    <figcaption>
-      {hasCaptionSlot ? (
-        <slot name="caption" />
+<div class="ri-root" data-ri-root={uid}>
+  {hasCaption ? (
+    <figure class={(figureClass || '') + (dataDownloadable ? ' has-dl-btn' : '')}>
+      {dataDownloadable ? (
+        <span class="img-dl-wrap">
+          <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+          <button type="button" class="button button--ghost img-dl-btn" aria-label="Download image" title={downloadName ? `Download ${downloadName}` : 'Download image'}>
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z"/></svg>
+          </button>
+        </span>
       ) : (
-        caption && <span set:html={caption} />
+        <Image {...imgProps} data-zoomable={dataZoomable} />
       )}
-    </figcaption>
-  </figure>
-) : (
-  <Image {...imgProps} />
-)}
+      <figcaption>
+        {hasCaptionSlot ? (
+          <slot name="caption" />
+        ) : (
+          caption && <span set:html={caption} />
+        )}
+      </figcaption>
+    </figure>
+  ) : (
+    dataDownloadable ? (
+      <span class="img-dl-wrap">
+        <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+        <button type="button" class="button button--ghost img-dl-btn" aria-label="Download image" title={downloadName ? `Download ${downloadName}` : 'Download image'}>
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z"/></svg>
+        </button>
+      </span>
+    ) : (
+      <Image {...imgProps} data-zoomable={dataZoomable} />
+    )
+  )}
+</div>
+
+<script is:inline>
+  (() => {
+    const scriptEl = document.currentScript;
+    const root = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!root) return;
+    const img = (root.tagName === 'IMG' ? root : (root.querySelector ? root.querySelector('img') : null));
+    if (!img) return;
+
+    // medium-zoom integration scoped to this image only
+    const ensureMediumZoomReady = (cb) => {
+      // @ts-ignore
+      if (window.mediumZoom) return cb();
+      const retry = () => {
+        // @ts-ignore
+        if (window.mediumZoom) cb(); else setTimeout(retry, 30);
+      };
+      retry();
+    };
+
+    const initZoomIfNeeded = () => {
+      if (img.getAttribute('data-zoomable') !== '1') return;
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+      const background = isDark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)';
+      ensureMediumZoomReady(() => {
+        // @ts-ignore
+        const instance = window.mediumZoom ? window.mediumZoom(img, { background, margin: 24, scrollOffset: 0 }) : null;
+        if (!instance) return;
+        let onScrollLike;
+        const attachCloseOnScroll = () => {
+          if (onScrollLike) return;
+          onScrollLike = () => { try { instance.close && instance.close(); } catch {} };
+          window.addEventListener('wheel', onScrollLike, { passive: true });
+          window.addEventListener('touchmove', onScrollLike, { passive: true });
+          window.addEventListener('scroll', onScrollLike, { passive: true });
+        };
+        const detachCloseOnScroll = () => {
+          if (!onScrollLike) return;
+          window.removeEventListener('wheel', onScrollLike);
+          window.removeEventListener('touchmove', onScrollLike);
+          window.removeEventListener('scroll', onScrollLike);
+          onScrollLike = null;
+        };
+        try { instance.on && instance.on('open', attachCloseOnScroll); } catch {}
+        try { instance.on && instance.on('close', detachCloseOnScroll); } catch {}
+        const themeObserver = new MutationObserver(() => {
+          const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+          try { instance.update && instance.update({ background: dark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)' }); } catch {}
+        });
+        themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+      });
+    };
+
+    // Download button handler
+    const dlBtn = (root.querySelector ? root.querySelector('.img-dl-btn') : null);
+    if (dlBtn) {
+      dlBtn.addEventListener('click', async (ev) => {
+        try {
+          ev.preventDefault();
+          ev.stopPropagation();
+          const pickHrefAndName = () => {
+            const current = img.currentSrc || img.src || '';
+            let href = img.getAttribute('data-download-src') || current;
+            const deriveName = () => {
+              try {
+                const u = new URL(current, location.href);
+                const rawHref = u.searchParams.get('href');
+                const candidate = rawHref ? decodeURIComponent(rawHref) : u.pathname;
+                const last = String(candidate).split('/').pop() || '';
+                const base = last.split('?')[0].split('#')[0];
+                const m = base.match(/^(.+?\.(?:png|jpe?g|webp|avif|gif|svg))(?:[._-].*)?$/i);
+                if (m && m[1]) return m[1];
+                return base || 'image';
+              } catch { return 'image'; }
+            };
+            const name = img.getAttribute('data-download-name') || deriveName();
+            return { href, name };
+          };
+          const picked = pickHrefAndName();
+          const res = await fetch(picked.href, { credentials: 'same-origin' });
+          const blob = await res.blob();
+          const objectUrl = URL.createObjectURL(blob);
+          const tmp = document.createElement('a');
+          tmp.href = objectUrl;
+          tmp.download = picked.name || 'image';
+          tmp.target = '_self';
+          tmp.rel = 'noopener';
+          tmp.style.display = 'none';
+          document.body.appendChild(tmp);
+          tmp.click();
+          setTimeout(() => { URL.revokeObjectURL(objectUrl); tmp.remove(); }, 1000);
+        } catch {}
+      });
+    }
+
+    if (document.readyState === 'complete') initZoomIfNeeded();
+    else window.addEventListener('load', initZoomIfNeeded, { once: true });
+  })();
+</script>
 
 

app/src/components/TableOfContent.astro

@@ -0,0 +1,230 @@
+---
+export interface Props { tableOfContentAutoCollapse?: boolean }
+const { tableOfContentAutoCollapse = false } = Astro.props as Props;
+---
+<aside class="toc" data-auto-collapse={tableOfContentAutoCollapse ? '1' : '0'}>
+  <div class="title">Table of Contents</div>
+  <div id="article-toc-placeholder"></div>
+  
+</aside>
+<details class="toc-mobile">
+  <summary>Table of Contents</summary>
+  <div id="article-toc-mobile-placeholder"></div>
+</details>
+
+<script is:inline>
+  // Build TOC from article headings (h2/h3/h4) and render into the sticky aside
+  const buildTOC = () => {
+    const holder = document.getElementById('article-toc-placeholder');
+    const holderMobile = document.getElementById('article-toc-mobile-placeholder');
+    // Always rebuild TOC to avoid stale entries
+    if (holder) holder.innerHTML = '';
+    if (holderMobile) holderMobile.innerHTML = '';
+    const articleRoot = document.querySelector('section.content-grid main');
+    if (!articleRoot) return;
+    const headings = articleRoot.querySelectorAll('h2, h3, h4');
+    if (!headings.length) return;
+
+    // Filter out headings that should not appear in TOC
+    const normalize = (s) => String(s || '')
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, ' ')
+      .trim();
+    const isTocLabel = (s) => /^(table\s+of\s+contents?)$|^toc$/i.test(String(s || '').replace(/[^a-zA-Z0-9]+/g, ' ').trim());
+    const shouldSkip = (h) => {
+      const t = h.textContent || '';
+      const id = String(h.id || '');
+      const slug = normalize(t).replace(/\s+/g, '_');
+      if (isTocLabel(t)) return true;
+      if (isTocLabel(id.replace(/[_-]+/g, ' '))) return true;
+      if (isTocLabel(slug.replace(/[_-]+/g, ' '))) return true;
+      return false;
+    };
+    const headingsArr = Array.from(headings).filter(h => !shouldSkip(h));
+    if (!headingsArr.length) return;
+
+    // Ensure unique ids for headings (deduplicate duplicates)
+    const usedIds = new Set();
+    const slugify = (s) => String(s || '')
+      .toLowerCase()
+      .trim()
+      .replace(/\s+/g, '_')
+      .replace(/[^a-z0-9_\-]/g, '');
+    headingsArr.forEach((h) => {
+      let id = (h.id || '').trim();
+      if (!id) {
+        const base = slugify(h.textContent || '');
+        id = base || 'section';
+      }
+      let candidate = id;
+      let n = 2;
+      while (usedIds.has(candidate)) {
+        candidate = `${id}-${n++}`;
+      }
+      if (h.id !== candidate) h.id = candidate;
+      usedIds.add(candidate);
+    });
+
+    const nav = document.createElement('nav');
+    let ulStack = [document.createElement('ul')];
+    nav.appendChild(ulStack[0]);
+
+    const levelOf = (tag) => tag === 'H2' ? 2 : tag === 'H3' ? 3 : 4;
+    let prev = 2;
+    let h2Count = -1;
+    const h2List = headingsArr.filter(h => h.tagName === 'H2');
+    headingsArr.forEach((h) => {
+      const lvl = levelOf(h.tagName);
+      // adjust depth
+      while (lvl > prev) { const ul = document.createElement('ul'); ulStack[ulStack.length-1].lastElementChild?.appendChild(ul); ulStack.push(ul); prev++; }
+      while (lvl < prev) { ulStack.pop(); prev--; }
+      const li = document.createElement('li');
+      const a = document.createElement('a');
+      a.href = '#' + h.id; a.textContent = h.textContent; a.target = '_self';
+      li.appendChild(a);
+      if (lvl === 2) {
+        h2Count += 1;
+        li.setAttribute('data-h2-idx', String(h2Count));
+      }
+      ulStack[ulStack.length-1].appendChild(li);
+    });
+
+    if (holder) holder.appendChild(nav);
+    const navClone = nav.cloneNode(true);
+    if (holderMobile) holderMobile.appendChild(navClone);
+
+    // active link on scroll
+    const links = [
+      ...(holder ? holder.querySelectorAll('a') : []),
+      ...(holderMobile ? holderMobile.querySelectorAll('a') : [])
+    ];
+    const autoCollapse = (document.querySelector('aside.toc')?.getAttribute('data-auto-collapse') === '1');
+
+    // Inject styles for collapsible & animation
+    const ensureStyles = () => {
+      if (document.getElementById('toc-collapse-style')) return;
+      const style = document.createElement('style');
+      style.id = 'toc-collapse-style';
+      style.textContent = `
+        aside.toc nav.toc-collapsible > ul > li > ul,
+        details.toc-mobile nav.toc-collapsible > ul > li > ul { overflow: hidden; transition: height 200ms ease; }
+        aside.toc nav.toc-collapsible > ul > li.collapsed > ul,
+        details.toc-mobile nav.toc-collapsible > ul > li.collapsed > ul { display: block; }
+      `;
+      document.head.appendChild(style);
+    };
+    ensureStyles();
+
+    const getTopLevelItems = () => {
+      const sideNav = holder ? holder.querySelector('nav') : null;
+      const mobileNav = holderMobile ? holderMobile.querySelector('nav') : null;
+      const q = (navEl) => navEl ? Array.from(navEl.querySelectorAll(':scope > ul > li[data-h2-idx]')) : [];
+      return { sideNav, mobileNav, sideTop: q(sideNav), mobileTop: q(mobileNav) };
+    };
+
+    const setNavCollapsible = () => {
+      const sideNav = holder ? holder.querySelector('nav') : null;
+      const mobileNav = holderMobile ? holderMobile.querySelector('nav') : null;
+      if (sideNav) sideNav.classList.add('toc-collapsible');
+      if (mobileNav) mobileNav.classList.add('toc-collapsible');
+    };
+
+    const measure = (el) => {
+      if (!el) return 0;
+      // Temporarily set height to auto to measure scrollHeight reliably
+      const prev = el.style.height;
+      el.style.height = 'auto';
+      const h = el.scrollHeight;
+      el.style.height = prev || '';
+      return h;
+    };
+
+    const animateTo = (el, target) => {
+      if (!el) return;
+      const current = parseFloat(getComputedStyle(el).height) || 0;
+      if (Math.abs(current - target) < 1) {
+        el.style.height = target ? 'auto' : '0px';
+        return;
+      }
+      el.style.height = current + 'px';
+      // Force reflow
+      void el.offsetHeight;
+      el.style.height = target + 'px';
+      const onEnd = (e) => {
+        if (e.propertyName !== 'height') return;
+        el.removeEventListener('transitionend', onEnd);
+        if (target > 0) el.style.height = 'auto';
+      };
+      el.addEventListener('transitionend', onEnd);
+    };
+
+    let prevActiveIdx = -1;
+    const setCollapsedState = (activeIdx) => {
+      if (!autoCollapse) return;
+      if (activeIdx == null || activeIdx < 0) activeIdx = 0;
+      const { sideTop, mobileTop } = getTopLevelItems();
+      const update = (items) => items.forEach((li) => {
+        const idx = Number(li.getAttribute('data-h2-idx') || '-1');
+        const sub = li.querySelector(':scope > ul');
+        if (!sub) return;
+        if (idx === activeIdx) {
+          li.classList.remove('collapsed');
+          const target = measure(sub);
+          animateTo(sub, target);
+        } else {
+          li.classList.add('collapsed');
+          animateTo(sub, 0);
+        }
+      });
+      update(sideTop);
+      update(mobileTop);
+      setNavCollapsible();
+      prevActiveIdx = activeIdx;
+    };
+
+    const onScroll = () => {
+      // active link highlight
+      let activeIdx = -1;
+      for (let i = headingsArr.length - 1; i >= 0; i--) {
+        const top = headingsArr[i].getBoundingClientRect().top;
+        if (top - 60 <= 0) {
+          links.forEach(l => l.classList.remove('active'));
+          const id = '#' + headingsArr[i].id;
+          const actives = Array.from(links).filter(l => l.getAttribute('href') === id);
+          actives.forEach(a => a.classList.add('active'));
+          if (headingsArr[i].tagName === 'H2') {
+            activeIdx = h2List.indexOf(headingsArr[i]);
+          } else {
+            for (let j = i; j >= 0; j--) {
+              if (headingsArr[j].tagName === 'H2') { activeIdx = h2List.indexOf(headingsArr[j]); break; }
+            }
+          }
+          break;
+        }
+      }
+      if (activeIdx !== prevActiveIdx) setCollapsedState(activeIdx);
+    };
+
+    window.addEventListener('scroll', onScroll);
+    // Initialize state
+    onScroll();
+
+    // Close mobile accordion when a link inside it is clicked
+    if (holderMobile) {
+      const details = holderMobile.closest('details');
+      holderMobile.addEventListener('click', (ev) => {
+        const target = ev.target;
+        const anchor = target && 'closest' in target ? target.closest('a') : null;
+        if (anchor instanceof HTMLAnchorElement && details && details.open) {
+          details.open = false;
+        }
+      });
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', buildTOC, { once: true });
+  } else { buildTOC(); }
+</script>
+
+

app/src/content/article.mdx

@@ -10,84 +10,16 @@ published: "Sep. 01, 2025"
 tags:
   - research
   - template
-ogImage: "/thumb.jpg"
+tocAutoCollapse: true
 ---
 
-import HtmlEmbed from "../components/HtmlEmbed.astro";
-import Wide from "../components/Wide.astro";
-import FullWidth from "../components/FullWidth.astro";
-import { Image } from 'astro:assets';
-import placeholder from "./assets/images/placeholder.png";
-import audioDemo from "./assets/audio/audio-example.wav";
-import Sidenote from "../components/Sidenote.astro";
-import visualPoster from "./assets/images/visual-vocabulary-poster.png";
-
+import Introduction from "./chapters/introduction.mdx";
 import BestPractices from "./chapters/best-pratices.mdx";
 import WritingYourContent from "./chapters/writing-your-content.mdx";
 import AvailableBlocks from "./chapters/available-blocks.mdx";  
 import GettingStarted from "./chapters/getting-started.mdx";
 
-<Sidenote>
-  Welcome to this **single‑page** research article template. It helps you publish **clear**, **modern**, and **interactive** technical writing with **minimal setup**. Grounded in up to date good practices in web dev, it favors interactive explanations, clear notation, and inspectable examples over static snapshots.
-
-  It offers a **ready‑to‑publish**, **all‑in‑one** workflow so you can focus on ideas rather than infrastructure.
-  <Fragment slot="aside">
-    Reading time: 20–25 minutes.
-  </Fragment>
-</Sidenote>
-
-#### Features
-
-<Sidenote>
-<div className="tag-list">
-  <span className="tag">Markdown based</span>
-  <span className="tag">KaTeX math</span>
-  <span className="tag">Syntax highlighting</span>
-  <span className="tag">Citations & footnotes</span>
-  <span className="tag">Automatic build</span>
-  <span className="tag">Table of contents</span>
-  <span className="tag">Dark theme</span>
-  <span className="tag">HTML Embeds</span>
-  <span className="tag">Plotly ready</span>
-  <span className="tag">D3.js ready</span>
-  <span className="tag">SEO Friendly</span>
-  <span className="tag">Mermaid diagrams</span>
-  <span className="tag">Lightweight bundle</span>
-  <span className="tag">Mobile friendly</span>
-  <span className="tag">Optimized images</span>
-  <span className="tag">Automatic PDF export</span>
-  <span className="tag">Dataviz color palettes</span>
-  <span className="tag">Embed gradio apps</span>
-</div>
-<Fragment slot="aside">
-    If you have questions, remarks or suggestions, open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
-  </Fragment>
-</Sidenote>
-
-## Introduction
-The web enables what static PDFs can’t: **interactive diagrams**, **progressive notation**, and **exploratory views** that reveal how ideas behave. This template makes **interactive artifacts**—figures, math, code and **inspectable experiments**—first‑class alongside prose, so readers **build intuition** rather than skim results.
-
-If you write technical blogs or research notes, you’ll get a **ready‑to‑publish workflow** with clear notation, optimized media, and **automatic builds**. **Start below and iterate quickly.**
-
-This project is heavily inspired by [**Distill**](https://distill.pub) (2016–2021), which championed clear, web‑native scholarship.
-
-### Notable examples of excellent scientific articles
-
-
-<Sidenote>
-A short, curated list of well‑designed and often interactive work:
-
-- [Growing Neural Cellular Automata](https://distill.pub/2020/growing-ca/)
-- [Activation Atlas](https://distill.pub/2019/activation-atlas/)
-- [Handwriting with a Neural Network](https://distill.pub/2016/handwriting/)
-- [The Building Blocks of Interpretability](https://distill.pub/2018/building-blocks/)
-
-<Fragment slot="aside">
-    I'm always excited to discover more great examples—please share your favorites in the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
-  </Fragment>
-</Sidenote>
-
-
+<Introduction />
 
 <GettingStarted />
 

app/src/content/chapters/available-blocks.mdx

@@ -111,19 +111,19 @@ Here are a few variations using the same bibliography:
 
 | Prop                   | Required | Description                                                                                                         
 |------------------------|----------|-------------------------------------------------------
-| `data-zoomable`        | No       | Adds a zoomable lightbox (Medium-like).                                                                             
-| `data-downloadable`    | No       | Adds a download button to fetch the image file.                                                               
+| `zoomable`        | No       | Adds a zoomable lightbox (Medium-like).                                                                             
+| `downloadable`    | No       | Adds a download button to fetch the image file.                                                               
 | `loading="lazy"`       | No       | Lazy loads the image.                                                                                               
 | `caption`              | No       | Adds a caption and credit.                                                                                          
 
 
 <ResponsiveImage
   src={placeholder}
-  data-zoomable
-  data-downloadable
+  zoomable
+  downloadable
   layout="fixed"
-  alt="Tensor parallelism in a transformer block"
-  caption={'Tensor parallelism in a transformer block <span class="image-credit">Original work on <a target="_blank" href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=tensor_parallelism_in_a_transformer_block">Ultrascale Playbook</a></span>'}
+  alt="A placeholder image alt text"
+  caption={'A placeholder image description <span class="image-credit">From the <a target="_blank" href="https://commons.wikimedia.org/wiki/File:RCA_Indian_Head_Test_Pattern.svg">RCA Indian Head Test Pattern</a></span>'}
 />
 
 <small className="muted">Example</small>
@@ -136,8 +136,8 @@ import myImage from './assets/images/placeholder.jpg'
 <ResponsiveImage
   src={myImage}
   layout="fixed"
-  data-zoomable
-  data-downloadable
+  zoomable
+  downloadable
   loading="lazy"
   alt="Example with caption and credit"
   caption={'Optimized image with a descriptive caption. <span class="image-credit">Credit: Photo by <a href="https://example.com">Author</a></span>'}
@@ -282,15 +282,25 @@ greet("Astro");
 
 Small contextual callout for tips, caveats, or emphasis.
 
-Props (optional)
-- `title`: short title displayed in the header.
-- `emoji`: emoji displayed before the title.
-- `class`: extra classes for custom styling.
+| Prop     | Required | Type                         | Description                         |
+|----------|----------|------------------------------|-------------------------------------|
+| `title`  | No       | string                       | Short title displayed in header     |
+| `emoji`  | No       | string                       | Emoji displayed before the title    |
+| `class`  | No       | string                       | Extra classes for custom styling    |
+| `variant`| No       | 'info' | 'success' | 'danger' | Visual intent of the note            |
 
-<Note title="Heads‑up" emoji="💡">
+<Note title="Heads‑up" emoji="💡" variant="info">
   Use notes to surface context without breaking reading flow.
 </Note>
 
+<Note variant="success">
+  Operation completed successfully.
+</Note>
+
+<Note variant="danger">
+  Be careful: this action cannot be undone.
+</Note>
+
 <Note>
   Plain note without header. Useful for short clarifications.
 </Note>
@@ -299,10 +309,18 @@ Props (optional)
 ```mdx
 import Note from '../../components/Note.astro'
 
-<Note title="Heads‑up" emoji="💡">
+<Note title="Heads‑up" emoji="💡" variant="info">
   Use notes to surface context without breaking reading flow.
 </Note>
 
+<Note variant="success">
+  Operation completed successfully.
+</Note>
+
+<Note variant="danger">
+  Be careful: this action cannot be undone.
+</Note>
+
 <Note>
   Plain note without header. Useful for short clarifications.
 </Note>
@@ -369,18 +387,22 @@ import HtmlEmbed from '../components/HtmlEmbed.astro'
 
 #### Data
 
-If you need to link your HTML embeds to data files, there is an **`assets/data`** folder for this.
+If you need to link your **HTML embeds** to **data files**, there is an **`assets/data`** folder for this.
 As long as your files are there, they will be served from the **`public/data`** folder.
 You can fetch them with this address: **`[domain]/data/your-data.ext`**
 
 <Note>⚠️ <b>Be careful</b>, unlike images, <b>data files are not optimized</b> by Astro. You need to optimize them manually.</Note>
 
-#### Real world examples
+#### Vibe coding charts
+
+If you are from the research field, it can be difficult to use **D3.js** charts instead of **Plotly**.
+Happily, **LLM's** are here to help you! In the `app/src/content/embeds` folder, there is a `vibe-code-d3-embeds-directives.md` file that you can use to vibe code **D3.js** charts.
+
+Inside this file, you will find every directives you need to code your own **HtmlEmbed** proof **D3.js** chart.
 
-Here are some real world examples to inspire you.
+Here are some **real world examples** that were vibe coded to inspire you.
 
 <HtmlEmbed src="d3-line.html" title="Training curves by metric" desc="Interactive time series across runs. Choose a metric; hover for values." />
-<HtmlEmbed src="d3-line-example.html" title="Training curves by metric" desc="Interactive time series across runs. Choose a metric; hover for values." />
 ---
 <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>`}/>
 ---

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

@@ -4,7 +4,7 @@ import Note from '../../components/Note.astro';
 import ResponsiveImage from '../../components/ResponsiveImage.astro';
 
 
-## Best Practices
+## Writing best practices
 
 ### Short sections
 Break content into **small, purpose‑driven sections**. Each section should answer a **single question** or support one idea. This improves **scanability**, helps readers navigate with the TOC, and makes later edits safer.

app/src/content/chapters/getting-started.mdx

@@ -14,11 +14,26 @@ The recommended way is to **duplicate this Space** on **Hugging Face** rather th
 git clone git@hf.co:spaces/<your-username>/<your-space>
 cd <your-space>
 ```
+<br/>
+4. Use **Node.js 20 or newer**. <br/>To manage versions, consider using **nvm**
+  - macOS/Linux: see [nvm-sh](https://github.com/nvm-sh/nvm)
+  - Windows: see [nvm-windows](https://github.com/coreybutler/nvm-windows)
 
-<Sidenote>
+```bash
+nvm install 20
+nvm use 20
+node -v
+```
+
+5. Install lfs and pull files from the repository.
 ```bash
 git lfs install
 git lfs pull
+```
+
+6. Install dependencies.
+<Sidenote>
+```bash
 cd app
 npm install
 ```
@@ -28,12 +43,16 @@ npm install
 </Sidenote>
 
 
+<br/>And that's it!
+
 ### Development
 
 ```bash
 npm run dev
 ```
 
+Once started, the dev server is available at `http://localhost:4321`.
+
 ### Build
 
 ```bash
@@ -43,7 +62,7 @@ npm run build
 
 ### Deploy
 
-Push your changes to your new Space repo.<br/>**Every push automatically triggers a build and deploy** on Spaces.
+**Every push** automatically triggers a **build** and **deploy** on Spaces.
 ```bash
 # Make edits locally, then:
 git add .
@@ -55,5 +74,5 @@ git push
 Serving the `dist/` directory on any static host is enough to deliver the site.
 </Note>
 <Note title="Note">
-A [slugified-title].pdf and thumb.jpg are also generated at build time.<br/>You can find them in the public folder.
+A [slugified-title].pdf and thumb.jpg are also generated at build time.<br/>You can find them in the public folder and point to them at `[domain]/public/thumb.jpg`.
 </Note>

app/src/content/chapters/introduction.mdx

@@ -0,0 +1,58 @@
+import Sidenote from "../../components/Sidenote.astro";
+
+<Sidenote>
+  Welcome to this **single‑page** research article template. It helps you publish **clear**, **modern**, and **interactive** technical writing with **minimal setup**. Grounded in up to date good practices in web dev, it favors interactive explanations, clear notation, and inspectable examples over static snapshots.
+
+  It offers a **ready‑to‑publish**, **all‑in‑one** workflow so you can focus on ideas rather than infrastructure.
+  <Fragment slot="aside">
+    Reading time: 20–25 minutes.
+  </Fragment>
+</Sidenote>
+
+#### Features
+
+<Sidenote>
+<div className="tag-list">
+  <span className="tag">Markdown based</span>
+  <span className="tag">KaTeX math</span>
+  <span className="tag">Syntax highlighting</span>
+  <span className="tag">Citations & footnotes</span>
+  <span className="tag">Automatic build</span>
+  <span className="tag">Table of contents</span>
+  <span className="tag">Dark theme</span>
+  <span className="tag">HTML Embeds</span>
+  <span className="tag">Plotly ready</span>
+  <span className="tag">D3.js ready</span>
+  <span className="tag">SEO Friendly</span>
+  <span className="tag">Mermaid diagrams</span>
+  <span className="tag">Lightweight bundle</span>
+  <span className="tag">Mobile friendly</span>
+  <span className="tag">Optimized images</span>
+  <span className="tag">Automatic PDF export</span>
+  <span className="tag">Dataviz color palettes</span>
+  <span className="tag">Embed gradio apps</span>
+</div>
+<Fragment slot="aside">
+    If you have questions, remarks or suggestions, open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
+  </Fragment>
+</Sidenote>
+
+## Introduction
+The web enables what static PDFs can’t: **interactive diagrams**, **progressive notation**, and **exploratory views** that reveal how ideas behave. This template makes **interactive artifacts**—figures, math, code and **inspectable experiments**—first‑class alongside prose, so readers **build intuition** rather than skim results.
+
+If you write technical blogs or research notes, you’ll benefit from a **ready‑to‑publish workflow** with clear notation, optimized media, and **automatic builds**.
+
+This project draws strong inspiration from [**Distill**](https://distill.pub) (2016–2021), which championed clear, web‑native scholarship and set a high standard for interactive scientific communication.
+
+<Sidenote>
+To give you a sense of what inspired this template, here is a short, curated list of well‑designed and often interactive works from Distill:
+
+- [Growing Neural Cellular Automata](https://distill.pub/2020/growing-ca/)
+- [Activation Atlas](https://distill.pub/2019/activation-atlas/)
+- [Handwriting with a Neural Network](https://distill.pub/2016/handwriting/)
+- [The Building Blocks of Interpretability](https://distill.pub/2018/building-blocks/)
+
+<Fragment slot="aside">
+    I'm always excited to discover more great examples—please share your favorites in the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
+  </Fragment>
+</Sidenote>

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

@@ -3,6 +3,7 @@ import { Image } from 'astro:assets';
 import placeholder from '../assets/images/placeholder.png';
 import Sidenote from '../../components/Sidenote.astro';
 import Wide from '../../components/Wide.astro';
+import Note from '../../components/Note.astro';
 import FullWidth from '../../components/FullWidth.astro';
 import HtmlEmbed from '../../components/HtmlEmbed.astro';
 import audioDemo from '../assets/audio/audio-example.wav';
@@ -15,12 +16,12 @@ Your **article** lives in **one place**
 
 Everything is **self-contained** under `app/src/content/`:
 - **MDX**: `article.mdx` and [**optional chapters**](#chapters) in `chapters/`
-- **Assets**: `assets/` **images**, **audios**, **datas**, etc. (tracked via **Git LFS**)
-- **Embeds**: `embed/` [**HtmlEmbed**](#htmlembed) for **Plotly/D3**, etc.
+- **Assets**: `assets/` images, audios, datas, etc. (tracked via **Git LFS**)
+- **Embeds**: `embed/` [**HtmlEmbed**](#htmlembed) for Plotly/D3, etc.
 
 The `article.mdx` file is the **main entry point** of your article.
 
-<small className="muted">Example</small>
+<small className="muted">app/src/content/article.mdx</small>
 ```mdx
 {/* HEADER */}
 ---
@@ -38,6 +39,8 @@ tags:
   - template
 {/* Optional override of the default Open Graph image */}
 ogImage: "https://override-example.com/your-og-image.png"
+{/* By default the table of contents is not collapsing */}
+tocAutoCollapse: true
 ---
 
 {/* IMPORTS */}
@@ -129,6 +132,42 @@ Here is a suggestion of **color palettes** for your **data visualizations** that
 Color should rarely be the only channel of meaning.
 Always pair it with text, icons, shape or position. The simulation helps you spot palettes and states that become indistinguishable for people with color‑vision deficiencies.
 
+#### Using the palettes
+
+##### CSS
+Use the generated **CSS variables** to style elements.
+
+```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 */
+```
+
+<Note variant="info">⚠️ **CSS overrides** automatically trigger a **palette regeneration** via JS observers; no manual call is needed.</Note>
+
+##### JS
+Fetch arrays of colors via **`window.ColorPalettes.getColors(type)`**. To change sizes **at runtime**, set CSS vars and call **`window.ColorPalettes.refresh()`**.
+
+```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');
+window.ColorPalettes.refresh();
+```
+
 ### Placement
 
 Use these helpers when you need to step outside the main content flow: **Sidenotes** for contextual side notes, **Wide** to extend beyond the main column, and **Full-width** for full-width, immersive sections.
@@ -152,7 +191,6 @@ import Sidenote from '../components/Sidenote.astro'
 </Sidenote>
 ```
 
-Use these helpers to expand content beyond the main column when needed. They will always be centered and displayed above every other content.
 
 #### Wide example
 

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

@@ -1,6 +1,6 @@
-<div class="d3-line" style="width:100%;margin:10px 0;"></div>
+<div class="d3-line-example" style="width:100%;margin:10px 0;"></div>
 <style>
-  .d3-line .d3-line__controls select {
+  .d3-line-example .d3-line__controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
     border: 1px solid var(--border-color);
@@ -17,21 +17,21 @@
     cursor: pointer;
     transition: border-color .15s ease, box-shadow .15s ease;
   }
-  [data-theme="dark"] .d3-line .d3-line__controls select {
+  [data-theme="dark"] .d3-line-example .d3-line__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-line .d3-line__controls select:hover {
+  .d3-line-example .d3-line__controls select:hover {
     border-color: var(--primary-color);
   }
-  .d3-line .d3-line__controls select:focus {
+  .d3-line-example .d3-line__controls select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(232,137,171,.25);
     outline: none;
   }
-  .d3-line .d3-line__controls label { gap: 8px; }
+  .d3-line-example .d3-line__controls label { gap: 8px; }
 
   /* Range slider themed with --primary-color */
-  .d3-line .d3-line__controls input[type="range"] { 
+  .d3-line-example .d3-line__controls input[type="range"] { 
     -webkit-appearance: none; 
     appearance: none; 
     width: 100%; 
@@ -40,12 +40,12 @@
     background: var(--border-color);
     outline: none;
   }
-  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
+  .d3-line-example .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
     height: 6px; 
     background: transparent; 
     border-radius: 999px;
   }
-  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-thumb {
+  .d3-line-example .d3-line__controls input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none; 
     appearance: none; 
     width: 16px; 
@@ -56,12 +56,12 @@
     margin-top: -5px; 
     cursor: pointer;
   }
-  .d3-line .d3-line__controls input[type="range"]::-moz-range-track {
+  .d3-line-example .d3-line__controls input[type="range"]::-moz-range-track {
     height: 6px; 
     background: transparent; 
     border-radius: 999px;
   }
-  .d3-line .d3-line__controls input[type="range"]::-moz-range-thumb {
+  .d3-line-example .d3-line__controls input[type="range"]::-moz-range-thumb {
     width: 16px; 
     height: 16px; 
     border-radius: 50%; 
@@ -70,7 +70,7 @@
     cursor: pointer;
   }
   /* Improved line color via CSS */
-  .d3-line .lines path.improved { stroke: var(--primary-color); }
+  .d3-line-example .lines path.improved { stroke: var(--primary-color); }
 </style>
 <script>
   (() => {
@@ -94,7 +94,7 @@
       const getLocalPrev = () => {
         if (!scriptEl) return null;
         let el = scriptEl.previousElementSibling;
-        while (el && !(el.classList && el.classList.contains('d3-line'))) {
+        while (el && !(el.classList && el.classList.contains('d3-line-example'))) {
           el = el.previousElementSibling;
         }
         return el || null;
@@ -103,7 +103,7 @@
       const localTarget = getLocalPrev();
       const targets = localTarget
         ? [localTarget]
-        : Array.from(document.querySelectorAll('.d3-line'))
+        : Array.from(document.querySelectorAll('.d3-line-example'))
             .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
 
       targets.forEach((container) => {

app/src/content/embeds/palettes.html

@@ -8,7 +8,7 @@
     .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; min-height: 0; border-radius: 0; border: 1px solid var(--border-color); }
     .palettes .palette-card__swatches .sw:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
     .palettes .palette-card__swatches .sw:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
-    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-right: 16px; border-right: 1px solid var(--border-color); }
+    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-right: 0; }
     .palettes .palette-card__content__info { display: flex; flex-direction: column;  }
     .palettes .palette-card__title { text-align: left; font-weight: 800; font-size: 15px; }
     .palettes .palette-card__desc { text-align: left; color: var(--muted-color); line-height: 1.5; font-size: 12px; }
@@ -97,128 +97,24 @@
 </div>
 <script>
   (() => {
-      const loadScript = (id, src, onload, onerror) => {
-        let s = document.getElementById(id);
-        if (s) { return onload && onload(); }
-      s = document.createElement('script'); s.id = id; s.src = src; s.async = true;
-        if (onload) s.addEventListener('load', onload, { once: true });
-        if (onerror) s.addEventListener('error', onerror, { once: true });
-        document.head.appendChild(s);
-      };
-      const ensureChroma = (next) => {
-        if (window.chroma) return next();
-        const tryReady = () => { if (window.chroma) next(); else setTimeout(tryReady, 25); };
-        const existing = document.getElementById('chroma-cdn') || document.getElementById('chroma-cdn-fallback');
-        if (existing) { tryReady(); return; }
-        loadScript('chroma-cdn', 'https://unpkg.com/chroma-js@2.4.2/dist/chroma.min.js', tryReady, () => {
-          loadScript('chroma-cdn-fallback', 'https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js', tryReady);
-        });
-      };
-
     const cards = [
-      { key: 'categorical', title: 'Categorical', desc: 'For <strong>non‑numeric categories</strong>; <strong>visually distinct</strong> colors. The more you have the more likely they are to look similar.', generator: (baseHex, count) => {
-          const base = chroma(baseHex);
-          const lc = base.lch();
-          const baseH = base.get('hsl.h') || 0;
-          const L0 = Math.max(40, Math.min(85, lc[0] || 70));
-          const C0 = Math.max(45, Math.min(75, lc[1] || 70));
-          const MIN_DELTA = 18; // minimal distance in Lab
-
-          const seen = new Set();
-          const results = [];
-
-          const makeSafe = (h, L, C) => {
-            let c = C;
-            let col = chroma.lch(L, c, h);
-            let guard = 0;
-            while (col.clipped && typeof col.clipped === 'function' && col.clipped() && c > 30 && guard < 8) {
-              c -= 5;
-              col = chroma.lch(L, c, h);
-              guard++;
-            }
-            return col;
-          };
-
-          const isFarEnough = (hex) => results.every(prev => chroma.distance(hex, prev, 'lab') >= MIN_DELTA);
-          const pushHex = (col) => {
-            const hex = col.hex();
-            if (!seen.has(hex.toLowerCase())) { results.push(hex); seen.add(hex.toLowerCase()); }
-          };
-
-          // Base first
-          pushHex(base);
-
-          const total = Math.max(6, Math.min(10, count || 6));
-          const hueStep = 360 / total;
-          const hueOffsets = [0, 18, -18, 36, -36, 54, -54, 72, -72];
-          const lVariants = [L0, Math.max(40, L0 - 6), Math.min(85, L0 + 6)];
-
-          for (let idx = 1; results.length < total && idx < total + 12; idx++) {
-            let stepHue = (baseH + idx * hueStep) % 360;
-            let accepted = false;
-            for (let li = 0; li < lVariants.length && !accepted; li++) {
-              for (let oi = 0; oi < hueOffsets.length && !accepted; oi++) {
-                const h = (stepHue + hueOffsets[oi] + 360) % 360;
-                const col = makeSafe(h, lVariants[li], C0);
-                const hex = col.hex();
-                if (!seen.has(hex.toLowerCase()) && isFarEnough(hex)) {
-                  pushHex(col);
-                  accepted = true;
-                }
-              }
-            }
-            if (!accepted) {
-              // Reduce chroma if necessary
-              let cTry = C0 - 10;
-              let trials = 0;
-              while (!accepted && cTry >= 30 && trials < 6) {
-                const col = makeSafe(stepHue, L0, cTry);
-                const hex = col.hex();
-                if (!seen.has(hex.toLowerCase()) && isFarEnough(hex)) {
-                  pushHex(col);
-                  accepted = true;
-                  break;
-                }
-                cTry -= 5;
-                trials++;
-              }
-              if (!accepted) {
-                let bestHex = null; let bestMin = -1;
-                hueOffsets.forEach(off => {
-                  const hh = (stepHue + off + 360) % 360;
-                  const cand = makeSafe(hh, L0, C0).hex();
-                  const minD = results.reduce((m, prev) => Math.min(m, chroma.distance(cand, prev, 'lab')), Infinity);
-                  if (minD > bestMin && !seen.has(cand.toLowerCase())) { bestMin = minD; bestHex = cand; }
-                });
-                if (bestHex) { seen.add(bestHex.toLowerCase()); results.push(bestHex); }
-              }
-            }
-          }
-
-          return results.slice(0, total);
-      }},
-      { key: 'sequential', title: 'Sequential', desc: 'For <strong>numeric scales</strong>; gradient from <strong>dark to light</strong>. Ideal for <strong>heatmaps</strong>.', generator: (baseHex, count) => {
-          const total = Math.max(6, Math.min(10, count || 6));
-          const c = chroma(baseHex).saturate(0.3);
-          return chroma.scale([c.darken(2), c, c.brighten(2)]).mode('lab').correctLightness(true).colors(total);
-      }},
-      { key: 'diverging', title: 'Diverging', desc: 'Opposing extremes via <strong>base → white → complement</strong>; smooth contrast around a neutral midpoint.', generator: (baseHex, count) => {
-          const total = Math.max(6, Math.min(10, count || 6));
-          const comp = chroma(baseHex).set('hsl.h', '+180');
-          const bez = chroma.bezier([baseHex, '#ffffff', comp]);
-          return bez.scale().padding(-0.15).colors(total);
-      }}
+      { key: 'categorical', title: 'Categorical', desc: 'For <strong>non‑numeric categories</strong>; <strong>visually distinct</strong> colors. The more you have the more likely they are to look similar.' },
+      { key: 'sequential', title: 'Sequential', desc: 'For <strong>numeric scales</strong>; gradient from <strong>dark to light</strong>. Ideal for <strong>heatmaps</strong>.' },
+      { key: 'diverging', title: 'Diverging', desc: 'Opposing extremes via <strong>base → white → complement</strong>; smooth contrast around a neutral midpoint.' }
     ];
 
-    const getCssPrimary = () => {
-      try { return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); } catch { return ''; }
+    const getCssVar = (name) => {
+      try { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); } catch { return ''; }
     };
 
-    const getDesiredCount = () => {
-      const input = document.getElementById('color-count');
-      let v = input ? parseInt(input.value, 10) : 6;
-      if (Number.isNaN(v)) v = 6;
-      return Math.max(6, Math.min(10, v));
+    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);
+      }
+      return colors;
     };
 
     const render = () => {
@@ -227,13 +123,8 @@
       if (!root) return;
       const grid = root.querySelector('.palettes__grid');
       if (!grid) return;
-      grid.innerHTML = '';
-      const css = getCssPrimary();
-      const baseHex = css && /^#|rgb|hsl/i.test(css) ? chroma(css).hex() : '#E889AB';
-      const count = getDesiredCount();
-
       const html = cards.map((c) => {
-        const colors = c.generator(baseHex, count).slice(0, count);
+        const colors = getPaletteColors(c.key);
         const swatches = colors.map(col => `<div class="sw" style="background:${col}"></div>`).join('');
         return `
           <div class="palette-card" data-colors="${colors.join(',')}">
@@ -252,7 +143,7 @@
         `;
       }).join('');
       grid.innerHTML = html;
-      };
+    };
 
     const MODE_TO_CLASS = { protanopia: 'cb-protanopia', deuteranopia: 'cb-deuteranopia', tritanopia: 'cb-tritanopia', achromatopsia: 'cb-achromatopsia' };
     const CLEAR_CLASSES = Object.values(MODE_TO_CLASS);
@@ -281,9 +172,19 @@
       const input = document.getElementById('color-count');
       const out = document.getElementById('color-count-out');
       if (!input) return;
-      const sync = () => { if (out) out.textContent = String(getDesiredCount()); render(); };
-      input.addEventListener('input', sync);
-      try { if (out) out.textContent = String(getDesiredCount()); } catch {}
+      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 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(); });
     };
 
     let copyDelegationSetup = false;
@@ -317,12 +218,21 @@
       setupCountControl();
       render();
       setupCopyDelegation();
+      // Re-render when global palettes update and when :root style 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', () => ensureChroma(bootstrap), { once: true });
-    else ensureChroma(bootstrap);
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+    else bootstrap();
   })();
 </script>
 

app/src/content/embeds/vibe-code-d3-embeds-directives.md

@@ -0,0 +1,212 @@
+## Embed Chart Authoring Guidelines
+
+Authoring rules for creating a new interactive chart as a single self-contained `.html` file under `src/content/embeds/`. These conventions are derived from `d3-bar.html`, `d3-comparison.html`, `d3-neural.html`, `d3-line.html`, and `d3-pie.html`.
+
+### 1) File, naming, and structure
+- Name files with a clear prefix and purpose: `d3-<type>.html` (e.g., `d3-scatter.html`).
+- Wrap everything in a single `<div class="<root-class>">`, a `<style>` block scoped to that root class, and a `<script>` IIFE.
+- Do not leak globals; do not attach anything to `window`.
+- Use a unique, descriptive root class (e.g., `.d3-scatter`).
+
+Minimal skeleton:
+```html
+<div class="d3-yourchart" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-yourchart {/* all styles scoped to the root */}
+</style>
+<script>
+  (() => {
+    // Optional dependency loader (e.g., D3)
+    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;
+      // Prefer the closest previous sibling with the root class
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-yourchart'))) {
+        // Fallback: pick the last unmounted instance in the page
+        const candidates = Array.from(document.querySelectorAll('.d3-yourchart'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Tooltip (optional)
+      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 scaffolding (if using D3)
+      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block');
+      const gRoot = svg.append('g');
+
+      // State & layout
+      let width = 800, height = 360; const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      function updateSize(){
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        width = container.clientWidth || 800;
+        height = Math.max(260, Math.round(width / 3));
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        return { innerWidth: width - margin.left - margin.right, innerHeight: height - margin.top - margin.bottom, isDark };
+      }
+
+      function render(){
+        const { innerWidth, innerHeight } = updateSize();
+        // ... draw/update your chart here using data joins
+      }
+
+      // Initial render + resize handling
+      render();
+      const rerender = () => render();
+      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>
+```
+
+### 2) Mounting and re-entrancy
+- Select the closest previous sibling with the root class; fallback to the last unmounted matching element in the document.
+- Gate with `data-mounted` to avoid double-initialization when the fragment re-runs.
+- Assume the chart can appear multiple times on the same page.
+
+### 3) Styling and theming
+- Scope all rules under the root class; do not style `body`, `svg` globally.
+- Use CSS variables for theme alignment: `--primary-color`, `--text-color`, `--muted-color`, `--surface-bg`, `--border-color`.
+- For dark mode–aware strokes/ticks, either:
+  - Read `document.documentElement.getAttribute('data-theme') === 'dark'`, or
+  - Prefer CSS-only where possible.
+- Keep backgrounds light and borders subtle; the outer card frame is handled by `HtmlEmbed.astro`.
+
+### 4) Controls (labels, selects, sliders)
+- Compose controls as plain HTML elements appended inside the root container.
+- Style selects like in `d3-line.html`/`d3-bar.html` for consistency (rounded 8px, custom caret via data-URI, focus ring).
+- Use `<label>` wrapping the input for accessibility; set concise text (e.g., "Metric", "Model Size").
+
+### 5) Tooltip pattern
+- Create a single `.d3-tooltip` absolutely positioned inside the container.
+- Show on hover, hide on leave; position using `d3.pointer(event, container)` plus a small offset.
+- Keep content in a `.d3-tooltip__inner` node; avoid large inner HTML.
+
+### 6) Data loading
+- Prefer public assets first, then fall back to content assets:
+  - Example CSV paths: `/data/<file>.csv`, then `./assets/data/<file>.csv`, `../assets/data/<file>.csv`, etc.
+- Implement `fetchFirstAvailable(paths)`; try in order with `cache:'no-cache'`; handle errors gracefully with a red `<pre>` message.
+- For images or JSON models, mirror the same approach (see `d3-comparison.html`, `d3-neural.html`).
+
+### 7) Responsiveness and layout
+- Compute `width = container.clientWidth`, and a height derived from width (e.g., `width / 3`), with a sensible minimum height.
+- Maintain a `margin` object and derive `innerWidth/innerHeight` for plots.
+- Use a `ResizeObserver` on the container; fallback to `window.resize`.
+- Recompute scales/axes/grid on every render.
+
+### 8) Legends and labels
+- Use `foreignObject` + inline HTML to render compact legends that wrap nicely (see `d3-line.html`, `d3-pie.html`).
+- For axes, remove and re-append groups each render (simple and predictable), or update in place if needed.
+- Always add axis labels when applicable (e.g., `Step`, `Value`).
+
+### 9) Accessibility
+- Provide `alt` attributes on `<img>` (see `d3-comparison.html`).
+- Provide `aria-label` on interactive buttons (e.g., the erase button in `d3-neural.html`).
+- Ensure focus-visible styles for interactive controls; avoid relying on color alone to encode meaning.
+
+### 10) Performance and updates
+- Use D3 data joins (`.data().join()` or explicit enter/merge/exit) and keep transitions short (≤200ms).
+- Recompute only what is necessary on each render; avoid repeated DOM clears if not needed.
+- Debounce or gate expensive computations, especially on `mousemove`.
+
+### 11) External dependencies
+- Load D3 (and optional TFJS) via CDN only once using an element id (e.g., `d3-cdn-script`, `tfjs-cdn-script`).
+- After `.load`, verify the expected API (e.g., `window.d3.select`).
+- Prefer pure D3 and built-ins; do not introduce new runtime dependencies unless necessary.
+
+### 12) Error handling and fallbacks
+- Fail gracefully: append a small `<pre>` with a readable message inside the container.
+- For optional models (e.g., TFJS), attempt multiple URLs and fall back to a heuristic if load fails.
+
+### 13) Printing
+- Favor vector (`svg`) or simple shapes; avoid large bitmap backgrounds.
+- Let `HtmlEmbed.astro` handle most print constraints; ensure the chart scales with width 100% and auto height.
+
+### 14) Conventions checklist (before committing)
+- Root class is unique and matches file name (`d3-<type>`).
+- No globals added; script wrapped in an IIFE.
+- `data-mounded` guard is present to avoid double-mount.
+- Uses CSS variables for colors; dark-mode friendly.
+- Responsive: recomputes layout on resize; uses `ResizeObserver`.
+- Controls are accessible and consistently styled.
+- Tooltip is present (if hover/inspect is required).
+- Data loading includes public-path-first strategy and graceful error.
+- Axes/labels/legends are legible at small widths.
+- Code is easy to skim: clear naming, early returns, short functions.
+
+### 15) Example: small bar chart (structure only)
+```html
+<div class="d3-mini-bar" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-mini-bar .bar { stroke: none; }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && d3.select) 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 && d3.select) 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-mini-bar'))){
+        const cs = Array.from(document.querySelectorAll('.d3-mini-bar')).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'; }
+
+      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block');
+      const g = svg.append('g');
+      let width=800,height=280; const margin={top:16,right:16,bottom:40,left:40};
+      const x=d3.scaleBand().padding(0.2), y=d3.scaleLinear();
+      const data=[{k:'A',v:3},{k:'B',v:7},{k:'C',v:5}];
+
+      function render(){
+        width = container.clientWidth || 800; height = Math.max(220, Math.round(width/3.2));
+        svg.attr('width', width).attr('height', height);
+        g.attr('transform',`translate(${margin.left},${margin.top})`);
+        const iw=width-margin.left-margin.right, ih=height-margin.top-margin.bottom;
+        x.domain(data.map(d=>d.k)).range([0,iw]); y.domain([0, d3.max(data,d=>d.v)||1]).range([ih,0]).nice();
+        const bars=g.selectAll('rect.bar').data(data);
+        bars.join('rect').attr('class','bar').attr('x',d=>x(d.k)).attr('y',d=>y(d.v)).attr('width',x.bandwidth()).attr('height',d=>Math.max(0.5, ih - y(d.v))).attr('fill','var(--primary-color)');
+        g.selectAll('.x').data([0]).join('g').attr('class','x').attr('transform',`translate(0,${ih})`).call(d3.axisBottom(x));
+        g.selectAll('.y').data([0]).join('g').attr('class','y').call(d3.axisLeft(y).ticks(5));
+      }
+      render();
+      const ro = window.ResizeObserver ? new ResizeObserver(() => render()) : null; if (ro) ro.observe(container); else window.addEventListener('resize', render);
+    };
+    if (document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once:true }); } else { ensureD3(bootstrap); }
+  })();
+</script>
+```
+
+

app/src/env.d.ts

@@ -1,6 +1,13 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="vite/client" />
 
-declare module 'astro:assets' {
-  export const Image: any;
+interface ImportMetaEnv {
+  readonly PUBLIC_TABLE_OF_CONTENT_AUTO_COLLAPSE?: string | boolean;
+  // Back-compat
+  readonly PUBLIC_TOC_AUTO_COLLAPSE?: string | boolean;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
 }

app/src/pages/index.astro

@@ -4,6 +4,7 @@ import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 import Seo from '../components/Seo.astro';
+import TableOfContent from '../components/TableOfContent.astro';
 // Default OG image served from public/
 const ogDefaultUrl = '/thumb.jpg';
 import 'katex/dist/katex.min.css';
@@ -50,8 +51,21 @@ const keyAuthor = (authors[0] || 'article').split(/\s+/).slice(-1)[0].toLowerCas
 const keyTitle = titleFlat.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '').slice(0, 24);
 const bibKey = `${keyAuthor}${year ?? ''}_${keyTitle}`;
 const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBib}},\n  ${year ? `year={${year}}` : ''}\n}`;
+// Determine if TOC auto-collapse is enabled via (priority):
+// 1) article frontmatter: tableOfContentAutoCollapse (fallback: tocAutoCollapse)
+// 2) public env flag: PUBLIC_TOC_AUTO_COLLAPSE
+// Falls back to 'false' when not defined (string or boolean)
+const __env = (import.meta as any)?.env || {};
+const envCollapse = (
+  String((__env.PUBLIC_TABLE_OF_CONTENT_AUTO_COLLAPSE ?? __env.PUBLIC_TOC_AUTO_COLLAPSE ?? 'false')).toLowerCase() === 'true'
+  || (__env.PUBLIC_TABLE_OF_CONTENT_AUTO_COLLAPSE === true)
+  || (__env.PUBLIC_TOC_AUTO_COLLAPSE === true)
+);
+const tableOfContentAutoCollapse = Boolean(
+  (articleFM as any)?.tableOfContentAutoCollapse ?? (articleFM as any)?.tocAutoCollapse ?? envCollapse
+);
 ---
-<html lang="en" data-theme="light">
+<html lang="en" data-theme="light" data-toc-auto-collapse={tableOfContentAutoCollapse ? '1' : '0'}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -66,25 +80,20 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
         } catch {}
       })();
     </script>
+    <script is:inline src="/scripts/color-palettes.js"></script>
     
     <!-- TO MANAGE PROPERLY -->
     <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
     <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
-    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.4.0/gradio.js"> </script>
+    <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"></script>
+
   </head>
   <body>
     <ThemeToggle />
     <Hero title={docTitleHtml} titleRaw={docTitle} description={subtitle} authors={articleFM?.authors} affiliation={articleFM?.affiliation} published={articleFM?.published} />
 
     <section class="content-grid">
-      <aside class="toc">
-        <div class="title">Table of Contents</div>
-        <div id="article-toc-placeholder"></div>
-      </aside>
-      <details class="toc-mobile">
-        <summary>Table of Contents</summary>
-        <div id="article-toc-mobile-placeholder"></div>
-      </details>
+      <TableOfContent tableOfContentAutoCollapse={tableOfContentAutoCollapse} />
       <main>
         <Article />
         <style is:inline>
@@ -96,185 +105,6 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
 
     <Footer citationText={citationText} bibtex={bibtex} />
 
-    <!-- Medium-like image zoom (lightbox) -->
-    <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"></script>
-    <script>
-      // Initialize zoom on img[data-zoomable]; wait for script & content; close on scroll like Medium
-      (() => {
-        /** @type {any} */
-        let zoomInstance = null;
-
-        /** @param {() => void} cb */
-        const ensureMediumZoomReady = (cb) => {
-          // @ts-ignore mediumZoom injected globally by external script
-          if (window.mediumZoom) return cb();
-          // @ts-ignore mediumZoom injected globally by external script
-          const retry = () => (window.mediumZoom ? cb() : setTimeout(retry, 30));
-          retry();
-        };
-
-        /** @returns {HTMLElement[]} */
-        const collectTargets = () => Array.from(document.querySelectorAll('section.content-grid main img[data-zoomable]'));
-
-        const initOrUpdateZoom = () => {
-          const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-          const background = isDark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)';
-          const targets = collectTargets();
-          if (!targets.length) return;
-
-          if (!zoomInstance) {
-            // @ts-ignore medium-zoom injected globally by external script
-            zoomInstance = window.mediumZoom(targets, { background, margin: 24, scrollOffset: 0 });
-
-            let onScrollLike;
-            const attachCloseOnScroll = () => {
-              if (onScrollLike) return;
-              // @ts-ignore medium-zoom instance has close()
-              onScrollLike = () => { zoomInstance && zoomInstance.close(); };
-              window.addEventListener('wheel', onScrollLike, { passive: true });
-              window.addEventListener('touchmove', onScrollLike, { passive: true });
-              window.addEventListener('scroll', onScrollLike, { passive: true });
-            };
-            const detachCloseOnScroll = () => {
-              if (!onScrollLike) return;
-              window.removeEventListener('wheel', onScrollLike);
-              window.removeEventListener('touchmove', onScrollLike);
-              window.removeEventListener('scroll', onScrollLike);
-              onScrollLike = null;
-            };
-            // @ts-ignore medium-zoom instance has on()
-            zoomInstance.on('open', attachCloseOnScroll);
-            // @ts-ignore medium-zoom instance has on()
-            zoomInstance.on('close', detachCloseOnScroll);
-
-            const themeObserver = new MutationObserver(() => {
-              const dark = document.documentElement.getAttribute('data-theme') === 'dark';
-              // @ts-ignore medium-zoom instance has update()
-              zoomInstance && zoomInstance.update({ background: dark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)' });
-            });
-            themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
-          } else {
-            // @ts-ignore medium-zoom instance has attach()/update()
-            zoomInstance.attach(targets);
-            // @ts-ignore medium-zoom instance has update()
-            zoomInstance.update({ background });
-          }
-        };
-
-        const bootstrap = () => ensureMediumZoomReady(() => {
-          initOrUpdateZoom();
-          setTimeout(initOrUpdateZoom, 0);
-          const main = document.querySelector('section.content-grid main');
-          if (main) {
-            const mo = new MutationObserver(() => initOrUpdateZoom());
-            mo.observe(main, { childList: true, subtree: true });
-          }
-        });
-
-        if (document.readyState === 'complete') bootstrap();
-        else window.addEventListener('load', bootstrap, { once: true });
-      })();
-    </script>
-    
-
-    <script>
-      // Add a small download button to img[data-downloadable]
-      (() => {
-        const SELECTOR = 'section.content-grid main img[data-downloadable]';
-
-        /**
-         * @param {HTMLImageElement} img
-         */
-        const injectDownloadButton = (img) => {
-          if (!img || img.dataset.__dlInjected) return;
-          const parentFigure = img.closest('figure');
-          const parent = img.parentElement;
-          if (!parent) return;
-          img.dataset.__dlInjected = '1';
-
-          // Wrap the image in a positioned inline-block so the button is on the image
-          const wrapper = document.createElement('span');
-          wrapper.className = 'img-dl-wrap';
-          parent.insertBefore(wrapper, img);
-          wrapper.appendChild(img);
-          if (parentFigure && !parentFigure.classList.contains('has-dl-btn')) {
-            parentFigure.classList.add('has-dl-btn');
-          }
-
-          // Determine download href and filename
-          const pickHrefAndName = () => {
-            const current = img.currentSrc || img.src || '';
-            let href = img.getAttribute('data-download-src') || current;
-            // Derive filename from the original source when possible
-            const deriveName = () => {
-              try {
-                const u = new URL(current, location.href);
-                // Prefer original href param if provided by Astro image service
-                const rawHref = u.searchParams.get('href');
-                const candidate = rawHref ? decodeURIComponent(rawHref) : u.pathname;
-                const last = String(candidate).split('/').pop() || '';
-                // Strip query/hash and any appended transform suffixes after extension
-                const base = last.split('?')[0].split('#')[0];
-                const m = base.match(/^(.+?\.(?:png|jpe?g|webp|avif|gif|svg))(?:[._-].*)?$/i);
-                if (m && m[1]) return m[1];
-                // If extension missing, fallback to base as-is
-                return base || 'image';
-              } catch {
-                return 'image';
-              }
-            };
-            const name = img.getAttribute('data-download-name') || deriveName();
-            return { href, name };
-          };
-
-          const { href, name } = pickHrefAndName();
-          const a = document.createElement('a');
-          a.className = 'button button--ghost img-dl-btn';
-          a.href = href;
-          if (name) a.download = name;
-          a.setAttribute('aria-label', 'Download image');
-          a.setAttribute('title', name ? `Download ${name}` : 'Download image');
-          a.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z"/></svg>';
-
-          // Ensure href/name match currentSrc right before navigation
-          a.addEventListener('click', async (ev) => {
-            try {
-              ev.preventDefault();
-              const picked = pickHrefAndName();
-              const res = await fetch(picked.href, { credentials: 'same-origin' });
-              const blob = await res.blob();
-              const objectUrl = URL.createObjectURL(blob);
-              const tmp = document.createElement('a');
-              tmp.href = objectUrl;
-              tmp.download = picked.name || 'image';
-              document.body.appendChild(tmp);
-              tmp.click();
-              setTimeout(() => { URL.revokeObjectURL(objectUrl); tmp.remove(); }, 1000);
-            } catch {
-              // Fallback to native behavior if fetch fails
-            }
-          });
-
-          // Append inside wrapper so positioning is relative to the image box
-          wrapper.appendChild(a);
-        };
-
-        const scan = () => {
-          document.querySelectorAll(SELECTOR).forEach((el) => injectDownloadButton(el));
-        };
-
-        const bootstrap = () => {
-          scan();
-          const main = document.querySelector('section.content-grid main');
-          if (!main) return;
-          const mo = new MutationObserver(() => scan());
-          mo.observe(main, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] });
-        };
-
-        if (document.readyState === 'complete') bootstrap();
-        else window.addEventListener('load', bootstrap, { once: true });
-      })();
-    </script>
 
     <script>
       // Open external links in a new tab; keep internal anchors in-page
@@ -320,119 +150,7 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
       });
     </script>
 
-    <script>
-      // Build TOC from article headings (h2/h3/h4) and render into the sticky aside
-      const buildTOC = () => {
-        const holder = document.getElementById('article-toc-placeholder');
-        const holderMobile = document.getElementById('article-toc-mobile-placeholder');
-        // Always rebuild TOC to avoid stale entries
-        if (holder) holder.innerHTML = '';
-        if (holderMobile) holderMobile.innerHTML = '';
-        const articleRoot = document.querySelector('section.content-grid main');
-        if (!articleRoot) return;
-        const headings = articleRoot.querySelectorAll('h2, h3, h4');
-        if (!headings.length) return;
-
-        // Filter out headings that should not appear in TOC
-        const normalize = (s) => String(s || '')
-          .toLowerCase()
-          .replace(/[^a-z0-9]+/g, ' ')
-          .trim();
-        const isTocLabel = (s) => /^(table\s+of\s+contents?)$|^toc$/i.test(String(s || '').replace(/[^a-zA-Z0-9]+/g, ' ').trim());
-        const shouldSkip = (h) => {
-          const t = h.textContent || '';
-          const id = String(h.id || '');
-          const slug = normalize(t).replace(/\s+/g, '_');
-          if (isTocLabel(t)) return true;
-          if (isTocLabel(id.replace(/[_-]+/g, ' '))) return true;
-          if (isTocLabel(slug.replace(/[_-]+/g, ' '))) return true;
-          return false;
-        };
-        const headingsArr = Array.from(headings).filter(h => !shouldSkip(h));
-        if (!headingsArr.length) return;
-
-        // Ensure unique ids for headings (deduplicate duplicates)
-        const usedIds = new Set<string>();
-        const slugify = (s: string) => String(s || '')
-          .toLowerCase()
-          .trim()
-          .replace(/\s+/g, '_')
-          .replace(/[^a-z0-9_\-]/g, '');
-        headingsArr.forEach((h) => {
-          let id = (h.id || '').trim();
-          if (!id) {
-            const base = slugify(h.textContent || '');
-            id = base || 'section';
-          }
-          let candidate = id;
-          let n = 2;
-          while (usedIds.has(candidate)) {
-            candidate = `${id}-${n++}`;
-          }
-          if (h.id !== candidate) h.id = candidate;
-          usedIds.add(candidate);
-        });
-
-        const nav = document.createElement('nav');
-        let ulStack = [document.createElement('ul')];
-        nav.appendChild(ulStack[0]);
-
-        const levelOf = (tag) => tag === 'H2' ? 2 : tag === 'H3' ? 3 : 4;
-        let prev = 2;
-        headingsArr.forEach((h) => {
-          const lvl = levelOf(h.tagName);
-          // adjust depth
-          while (lvl > prev) { const ul = document.createElement('ul'); ulStack[ulStack.length-1].lastElementChild?.appendChild(ul); ulStack.push(ul); prev++; }
-          while (lvl < prev) { ulStack.pop(); prev--; }
-          const li = document.createElement('li');
-          const a = document.createElement('a');
-          a.href = '#' + h.id; a.textContent = h.textContent; a.target = '_self';
-          li.appendChild(a);
-          ulStack[ulStack.length-1].appendChild(li);
-        });
-
-        if (holder) holder.appendChild(nav);
-        if (holderMobile) holderMobile.appendChild(nav.cloneNode(true));
-
-        // active link on scroll
-        const links = [
-          ...(holder ? holder.querySelectorAll('a') : []),
-          ...(holderMobile ? holderMobile.querySelectorAll('a') : [])
-        ];
-        const onScroll = () => {
-          for (let i = headingsArr.length - 1; i >= 0; i--) {
-            const top = headingsArr[i].getBoundingClientRect().top;
-            if (top - 60 <= 0) {
-              links.forEach(l => l.classList.remove('active'));
-              const id = '#' + headingsArr[i].id;
-              const actives = Array.from(links).filter(l => l.getAttribute('href') === id);
-              actives.forEach(a => a.classList.add('active'));
-              break;
-            }
-          }
-        };
-        window.addEventListener('scroll', onScroll);
-        onScroll();
-
-        // Close mobile accordion when a link inside it is clicked
-        if (holderMobile) {
-          const details = holderMobile.closest('details');
-          holderMobile.addEventListener('click', (ev) => {
-            const target = ev.target as Element | null;
-            const anchor = target && 'closest' in target ? (target as Element).closest('a') : null;
-            if (anchor instanceof HTMLAnchorElement && details && (details as HTMLDetailsElement).open) {
-              (details as HTMLDetailsElement).open = false;
-            }
-          });
-        }
-      };
-
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', buildTOC, { once: true });
-      } else { buildTOC(); }
-    </script>
-
-    <!-- Removed JS fallback for language chips; labels handled by CSS/Shiki -->
+    
   </body>
 </html>
 

app/src/styles/_variables.css

@@ -34,6 +34,9 @@
   --spacing-9: 64px;
   --spacing-10: 72px;
 
+  /* Palettes config */
+  --palette-count: 6; /* default number of colors per palette */
+
   /* Z-index scale */
   --z-base: 0;           /* background/base */
   --z-content: 1;        /* regular content */