update

.gitattributes

@@ -1,14 +1,14 @@
-# Images et médias
 *.png filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
 *.gif filter=lfs diff=lfs merge=lfs -text
-
-# Vidéos et audio
+*.mp3 filter=lfs diff=lfs merge=lfs -text
 *.mp4 filter=lfs diff=lfs merge=lfs -text
 *.mov filter=lfs diff=lfs merge=lfs -text
 *.avi filter=lfs diff=lfs merge=lfs -text
-*.mp3 filter=lfs diff=lfs merge=lfs -text
 *.wav filter=lfs diff=lfs merge=lfs -text
-
-*.pdf filter=lfs diff=lfs merge=lfs -text
+*.csv filter=lfs diff=lfs merge=lfs -text
+*.json filter=lfs diff=lfs merge=lfs -text
+# the package and package lock should not be tracked
+package.json -filter -diff -merge text
+package-lock.json -filter -diff -merge text

CHANGELOG.md

@@ -0,0 +1,118 @@
+# Changelog
+
+All notable changes to the Research Article Template will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+- Initial open source release
+- Comprehensive documentation
+- Contributing guidelines
+- License file
+
+## [1.0.0] - 2024-12-19
+
+### Added
+- **Core Features**:
+  - Markdown/MDX-based writing system
+  - KaTeX mathematical notation support
+  - Syntax highlighting for code blocks
+  - Academic citations with BibTeX integration
+  - Footnotes and sidenotes system
+  - Auto-generated table of contents
+  - Interactive Mermaid diagrams
+  - Plotly.js and D3.js integration
+  - HTML embed support
+  - Gradio app embedding
+  - Dataviz color palettes
+  - Image optimization
+  - SEO-friendly structure
+  - Automatic PDF export
+  - Dark/light theme toggle
+  - Mobile-responsive design
+  - LaTeX import functionality
+  - Template synchronization system
+
+- **Components**:
+  - Figure component with captions
+  - MultiFigure for image galleries
+  - Note component with variants
+  - Quote component
+  - Accordion for collapsible content
+  - Sidenote component
+  - Table of Contents
+  - Theme Toggle
+  - HTML Embed
+  - Raw HTML support
+  - SEO component
+  - Hero section
+  - Footer
+  - Full-width and wide layouts
+
+- **Build System**:
+  - Astro 4.10.0 integration
+  - PostCSS with custom media queries
+  - Automatic compression
+  - Docker support
+  - Nginx configuration
+  - Git LFS support
+
+- **Scripts**:
+  - PDF export functionality
+  - LaTeX to MDX conversion
+  - Template synchronization
+  - Font SVG generation
+  - TrackIO data generation
+
+- **Documentation**:
+  - Getting started guide
+  - Writing best practices
+  - Component reference
+  - LaTeX conversion guide
+  - Interactive examples
+
+### Technical Details
+- **Framework**: Astro 4.10.0
+- **Styling**: PostCSS with custom properties
+- **Math**: KaTeX 0.16.22
+- **Charts**: Plotly.js 3.1.0, D3.js 7.9.0
+- **Diagrams**: Mermaid 11.10.1
+- **Node.js**: >=20.0.0
+- **License**: CC-BY-4.0
+
+### Browser Support
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+---
+
+## Version History
+
+- **1.0.0**: Initial stable release with full feature set
+- **0.0.1**: Development version (pre-release)
+
+## Migration Guide
+
+### From 0.0.1 to 1.0.0
+
+This is the first stable release. No breaking changes from the development version.
+
+### Updating Your Project
+
+Use the template synchronization system to update:
+
+```bash
+npm run sync:template -- --dry-run  # Preview changes
+npm run sync:template               # Apply updates
+```
+
+## Support
+
+- **Documentation**: [Hugging Face Space](https://huggingface.co/spaces/tfrere/research-article-template)
+- **Issues**: [Community Discussions](https://huggingface.co/spaces/tfrere/research-article-template/discussions)
+- **Contact**: [@tfrere](https://huggingface.co/tfrere)

CONTRIBUTING.md

@@ -0,0 +1,196 @@
+# Contributing to Research Article Template
+
+Thank you for your interest in contributing to the Research Article Template! This document provides guidelines and information for contributors.
+
+## 🤝 How to Contribute
+
+### Reporting Issues
+
+Before creating an issue, please:
+1. **Search existing issues** to avoid duplicates
+2. **Use the issue template** when available
+3. **Provide detailed information**:
+   - Clear description of the problem
+   - Steps to reproduce
+   - Expected vs actual behavior
+   - Environment details (OS, Node.js version, browser)
+   - Screenshots if applicable
+
+### Suggesting Features
+
+We welcome feature suggestions! Please:
+1. **Check existing discussions** first
+2. **Describe the use case** clearly
+3. **Explain the benefits** for the community
+4. **Consider implementation complexity**
+
+### Code Contributions
+
+#### Getting Started
+
+1. **Fork the repository** on Hugging Face
+2. **Clone your fork**:
+   ```bash
+   git clone git@hf.co:spaces/<your-username>/research-article-template
+   cd research-article-template
+   ```
+3. **Install dependencies**:
+   ```bash
+   cd app
+   npm install
+   ```
+4. **Create a feature branch**:
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+#### Development Workflow
+
+1. **Make your changes** following our coding standards
+2. **Test thoroughly**:
+   ```bash
+   npm run dev    # Test locally
+   npm run build  # Ensure build works
+   ```
+3. **Update documentation** if needed
+4. **Commit with clear messages**:
+   ```bash
+   git commit -m "feat: add new component for interactive charts"
+   ```
+
+#### Pull Request Process
+
+1. **Push your branch**:
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+2. **Create a Pull Request** with:
+   - Clear title and description
+   - Reference related issues
+   - Screenshots for UI changes
+   - Testing instructions
+
+## 📋 Coding Standards
+
+### Code Style
+
+- **Use Prettier** for consistent formatting
+- **Follow existing patterns** in the codebase
+- **Write clear, self-documenting code**
+- **Add comments** for complex logic
+- **Use meaningful variable names**
+
+### File Organization
+
+- **Components**: Place in `src/components/`
+- **Styles**: Use CSS modules or component-scoped styles
+- **Assets**: Organize in `src/content/assets/`
+- **Documentation**: Update relevant `.mdx` files
+
+### Commit Message Format
+
+We follow [Conventional Commits](https://www.conventionalcommits.org/):
+
+```
+type(scope): description
+
+feat: add new interactive chart component
+fix: resolve mobile layout issues
+docs: update installation instructions
+style: improve button hover states
+refactor: simplify component structure
+test: add unit tests for utility functions
+```
+
+**Types**: `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore`
+
+## 🧪 Testing
+
+### Manual Testing
+
+Before submitting:
+- [ ] Test on different screen sizes
+- [ ] Verify dark/light theme compatibility
+- [ ] Check browser compatibility (Chrome, Firefox, Safari)
+- [ ] Test with different content types
+- [ ] Ensure accessibility standards
+
+### Automated Testing
+
+```bash
+# Run build to catch errors
+npm run build
+
+# Test PDF export
+npm run export:pdf
+
+# Test LaTeX conversion
+npm run latex:convert
+```
+
+## 📚 Documentation
+
+### Writing Guidelines
+
+- **Use clear, concise language**
+- **Provide examples** for complex features
+- **Include screenshots** for UI changes
+- **Update both English content and code comments**
+
+### Documentation Structure
+
+- **README.md**: Project overview and quick start
+- **CONTRIBUTING.md**: This file
+- **Content files**: In `src/content/chapters/demo/`
+- **Component docs**: Inline comments and examples
+
+## 🎯 Areas for Contribution
+
+### High Priority
+
+- **Bug fixes** and stability improvements
+- **Accessibility enhancements**
+- **Mobile responsiveness**
+- **Performance optimizations**
+- **Documentation improvements**
+
+### Feature Ideas
+
+- **New interactive components**
+- **Additional export formats**
+- **Enhanced LaTeX import**
+- **Theme customization**
+- **Plugin system**
+
+### Community
+
+- **Answer questions** in discussions
+- **Share examples** of your work
+- **Write tutorials** and guides
+- **Help with translations**
+
+## 🚫 What Not to Contribute
+
+- **Breaking changes** without discussion
+- **Major architectural changes** without approval
+- **Dependencies** that significantly increase bundle size
+- **Features** that don't align with the project's goals
+
+## 📞 Getting Help
+
+- **Discussions**: [Community tab](https://huggingface.co/spaces/tfrere/research-article-template/discussions)
+- **Issues**: [Report bugs](https://huggingface.co/spaces/tfrere/research-article-template/discussions?status=open&type=issue)
+- **Contact**: [@tfrere](https://huggingface.co/tfrere) on Hugging Face
+
+## 📄 License
+
+By contributing, you agree that your contributions will be licensed under the same [CC-BY-4.0 license](LICENSE) that covers the project.
+
+## 🙏 Recognition
+
+Contributors will be:
+- **Listed in acknowledgments** (if desired)
+- **Mentioned in release notes** for significant contributions
+- **Credited** in relevant documentation
+
+Thank you for helping make scientific writing more accessible and interactive! 🎉

Dockerfile

@@ -1,6 +1,6 @@
 # Use an official Node runtime as the base image for building the application
 # Build with Playwright (browsers and deps ready)
-FROM mcr.microsoft.com/playwright:v1.56.0-jammy AS build
+FROM mcr.microsoft.com/playwright:v1.55.0-jammy AS build
 
 # Install git, git-lfs, and dependencies for Pandoc (only if ENABLE_LATEX_CONVERSION=true)
 RUN apt-get update && apt-get install -y git git-lfs wget && apt-get clean
@@ -24,7 +24,7 @@ RUN npm install
 COPY app/ .
 
 # Conditionally convert LaTeX to MDX if ENABLE_LATEX_CONVERSION=true
-ARG ENABLE_LATEX_CONVERSION=false
+ARG ENABLE_LATEX_CONVERSION=true
 RUN if [ "$ENABLE_LATEX_CONVERSION" = "true" ]; then \
     echo "🔄 LaTeX importer enabled - running latex:convert..."; \
     npm run latex:convert; \
@@ -32,10 +32,6 @@ RUN if [ "$ENABLE_LATEX_CONVERSION" = "true" ]; then \
     echo "⏭️  LaTeX importer disabled - skipping..."; \
     fi
 
-# Pre-install notion-importer dependencies (for runtime import)
-# Note: Notion import is done at RUNTIME (not build time) to access secrets
-RUN cd scripts/notion-importer && npm install && cd ../..
-
 # Ensure `public/data` is a real directory with real files (not a symlink)
 # This handles the case where `public/data` is a symlink in the repo, which
 # would be broken inside the container after COPY.
@@ -46,32 +42,30 @@ RUN set -e; \
     mkdir -p public/data; \
     cp -a src/content/assets/data/. public/data/
 
-# Build the application (with minimal placeholder content)
+# Build the application
 RUN npm run build
 
 # Generate the PDF (light theme, full wait)
 RUN npm run export:pdf -- --theme=light --wait=full
 
-# Generate LaTeX export
-RUN npm run export:latex
+# Use an official Nginx runtime as the base image for serving the application
+FROM nginx:alpine
 
-# Install nginx in the build stage (we'll use this image as final to keep Node.js)
-RUN apt-get update && apt-get install -y nginx && apt-get clean && rm -rf /var/lib/apt/lists/*
+# Copy the built application from the build stage
+COPY --from=build /app/dist /usr/share/nginx/html
 
-# Copy nginx configuration
+# Copy a custom Nginx configuration file
 COPY nginx.conf /etc/nginx/nginx.conf
 
-# Copy entrypoint script
-COPY entrypoint.sh /entrypoint.sh
-RUN chmod +x /entrypoint.sh
-
 # Create necessary directories and set permissions
-RUN mkdir -p /var/cache/nginx /var/run /var/log/nginx /var/lib/nginx/body && \
-    chmod -R 777 /var/cache/nginx /var/run /var/log/nginx /var/lib/nginx /etc/nginx/nginx.conf && \
-    chmod -R 777 /app
+RUN mkdir -p /var/cache/nginx /var/run /var/log/nginx && \
+    chmod -R 777 /var/cache/nginx /var/run /var/log/nginx /etc/nginx/nginx.conf
+
+# Switch to non-root user
+USER nginx
 
 # Expose port 8080
 EXPOSE 8080
 
-# Use entrypoint script that handles Notion import if enabled
-ENTRYPOINT ["/entrypoint.sh"]
+# Command to run the application
+CMD ["nginx", "-g", "daemon off;"]

LICENSE

@@ -0,0 +1,33 @@
+Creative Commons Attribution 4.0 International License
+
+Copyright (c) 2024 Thibaud Frere
+
+This work is licensed under the Creative Commons Attribution 4.0 International License.
+To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
+or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
+
+You are free to:
+
+    Share — copy and redistribute the material in any medium or format
+    Adapt — remix, transform, and build upon the material for any purpose, even commercially.
+
+The licensor cannot revoke these freedoms as long as you follow the license terms.
+
+Under the following terms:
+
+    Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+
+    No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
+
+Notices:
+
+    You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation.
+
+    No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.
+
+---
+
+For the source code and technical implementation:
+- The source code is available at: https://huggingface.co/spaces/tfrere/research-article-template
+- Third-party figures and assets are excluded from this license and marked in their captions
+- Dependencies and third-party libraries maintain their respective licenses

app/astro.config.mjs

@@ -56,11 +56,13 @@ export default defineConfig({
     rehypePlugins: [
       rehypeSlug,
       [rehypeAutolinkHeadings, { behavior: 'wrap' }],
-      [rehypeKatex, { trust: true }],
+      [rehypeKatex, {
+        trust: true,
+      }],
       [rehypeCitation, {
         bibliography: 'src/content/bibliography.bib',
         linkCitations: true,
-        csl: "apa"
+        csl: "apa",
       }],
       rehypeReferencesAndFootnotes,
       rehypeRestoreAtInCode,

app/public/scripts/color-palettes.js

@@ -46,63 +46,95 @@
     return { r, g, b: b3 };
   };
   const oklchToOklab = (L, C, hDeg) => { const h = (hDeg * Math.PI) / 180; return { L, a: C * Math.cos(h), b: C * Math.sin(h) }; };
-  const oklabToOklch = (L, a, b) => { const C = Math.sqrt(a*a + b*b); let h = Math.atan2(b, a) * 180 / Math.PI; if (h < 0) h += 360; return { L, C, h }; };
+  const oklabToOklch = (L, a, b) => { const C = Math.sqrt(a * a + b * b); let h = Math.atan2(b, a) * 180 / Math.PI; if (h < 0) h += 360; return { L, C, h }; };
   const clamp01 = (x) => Math.min(1, Math.max(0, x));
   const isInGamut = ({ r, g, b }) => r >= 0 && r <= 1 && g >= 0 && g <= 1 && b >= 0 && b <= 1;
-  const toHex = ({ r, g, b }) => { const R = Math.round(clamp01(r)*255), G = Math.round(clamp01(g)*255), B = Math.round(clamp01(b)*255); const h = (n) => n.toString(16).padStart(2,'0'); return `#${h(R)}${h(G)}${h(B)}`.toUpperCase(); };
-  const oklchToHexSafe = (L, C, h) => { let c = C; for (let i=0;i<12;i++){ const { a, b } = oklchToOklab(L,c,h); const rgb = oklabToRgb(L,a,b); if (isInGamut(rgb)) return toHex(rgb); c = Math.max(0, c-0.02);} return toHex(oklabToRgb(L,0,0)); };
-  const parseCssColorToRgb = (css) => { try { const el = document.createElement('span'); el.style.color = css; document.body.appendChild(el); const cs = getComputedStyle(el).color; document.body.removeChild(el); const m = cs.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i); if (!m) return null; return { r: Number(m[1])/255, g: Number(m[2])/255, b: Number(m[3])/255 }; } catch { return null; } };
+  const toHex = ({ r, g, b }) => {
+    const R = Math.round(clamp01(r) * 255), G = Math.round(clamp01(g) * 255), B = Math.round(clamp01(b) * 255);
+    const h = (n) => n.toString(16).padStart(2, '0');
+    return `#${h(R)}${h(G)}${h(B)}`.toUpperCase();
+  };
+  const oklchToHexSafe = (L, C, h) => { let c = C; for (let i = 0; i < 12; i++) { const { a, b } = oklchToOklab(L, c, h); const rgb = oklabToRgb(L, a, b); if (isInGamut(rgb)) return toHex(rgb); c = Math.max(0, c - 0.02); } return toHex(oklabToRgb(L, 0, 0)); };
+  const parseCssColorToRgb = (css) => { try { const el = document.createElement('span'); el.style.color = css; document.body.appendChild(el); const cs = getComputedStyle(el).color; document.body.removeChild(el); const m = cs.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i); if (!m) return null; return { r: Number(m[1]) / 255, g: Number(m[2]) / 255, b: Number(m[3]) / 255 }; } catch { return null; } };
 
-  const getPrimaryHex = () => {
+  // Get primary color in OKLCH format to preserve precision
+  const getPrimaryOKLCH = () => {
     const css = getCssVar('--primary-color');
-    if (!css) return '#E889AB';
-    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(css)) return css.toUpperCase();
+    if (!css) return null;
+
+    // For OKLCH colors, return the exact values without conversion
+    if (css.includes('oklch')) {
+      const oklchMatch = css.match(/oklch\(([^)]+)\)/);
+      if (oklchMatch) {
+        const values = oklchMatch[1].split(/\s+/).map(v => parseFloat(v.trim()));
+        if (values.length >= 3) {
+          const [L, C, h] = values;
+          return { L, C, h };
+        }
+      }
+    }
+
+    // For non-OKLCH colors, convert to OKLCH for consistency
     const rgb = parseCssColorToRgb(css);
-    if (rgb) return toHex(rgb);
-    return '#E889AB';
+    if (rgb) {
+      const { L, a, b } = rgbToOklab(rgb.r, rgb.g, rgb.b);
+      const { C, h } = oklabToOklch(L, a, b);
+      return { L, C, h };
+    }
+    return null;
+  };
+
+  // Keep getPrimaryHex for backward compatibility, but now it converts from OKLCH
+  const getPrimaryHex = () => {
+    const oklch = getPrimaryOKLCH();
+    if (!oklch) return null;
+
+    const { a, b } = oklchToOklab(oklch.L, oklch.C, oklch.h);
+    const rgb = oklabToRgb(oklch.L, a, b);
+    return toHex(rgb);
   };
   // No count management via CSS anymore; counts are passed directly to the API
 
   const generators = {
-    categorical: (baseHex, count) => {
-      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { r: parseInt(v.slice(0,2),16)/255, g: parseInt(v.slice(2,4),16)/255, b: parseInt(v.slice(4,6),16)/255 }; };
-      const { r, g, b } = parseHex(baseHex);
-      const { L, a, b: bb } = rgbToOklab(r,g,b);
-      const { C, h } = oklabToOklch(L,a,bb);
+    categorical: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
       const L0 = Math.min(0.85, Math.max(0.4, L));
       const C0 = Math.min(0.35, Math.max(0.1, C || 0.2));
       const total = Math.max(1, Math.min(12, count || 8));
       const hueStep = 360 / total;
       const results = [];
-      for (let i=0;i<total;i++) { const hDeg = (h + i*hueStep) % 360; const lVar = ((i % 3) - 1) * 0.04; results.push(oklchToHexSafe(Math.max(0.4, Math.min(0.85, L0 + lVar)), C0, hDeg)); }
+      for (let i = 0; i < total; i++) {
+        const hDeg = (h + i * hueStep) % 360;
+        const lVar = ((i % 3) - 1) * 0.04;
+        results.push(oklchToHexSafe(Math.max(0.4, Math.min(0.85, L0 + lVar)), C0, hDeg));
+      }
       return results;
     },
-    sequential: (baseHex, count) => {
-      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { r: parseInt(v.slice(0,2),16)/255, g: parseInt(v.slice(2,4),16)/255, b: parseInt(v.slice(4,6),16)/255 }; };
-      const { r, g, b } = parseHex(baseHex);
-      const { L, a, b: bb } = rgbToOklab(r,g,b);
-      const { C, h } = oklabToOklch(L,a,bb);
+    sequential: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
       const total = Math.max(1, Math.min(12, count || 8));
       const startL = Math.max(0.25, L - 0.18);
       const endL = Math.min(0.92, L + 0.18);
       const cBase = Math.min(0.33, Math.max(0.08, C * 0.9 + 0.06));
       const out = [];
-      for (let i=0;i<total;i++) { const t = total===1 ? 0 : i/(total-1); const lNow = startL*(1-t)+endL*t; const cNow = cBase*(0.85 + 0.15*(1 - Math.abs(0.5 - t)*2)); out.push(oklchToHexSafe(lNow, cNow, h)); }
+      for (let i = 0; i < total; i++) {
+        const t = total === 1 ? 0 : i / (total - 1);
+        const lNow = startL * (1 - t) + endL * t;
+        const cNow = cBase * (0.85 + 0.15 * (1 - Math.abs(0.5 - t) * 2));
+        out.push(oklchToHexSafe(lNow, cNow, h));
+      }
       return out;
     },
-    diverging: (baseHex, count) => {
-      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { r: parseInt(v.slice(0,2),16)/255, g: parseInt(v.slice(2,4),16)/255, b: parseInt(v.slice(4,6),16)/255 }; };
-      const { r, g, b } = parseHex(baseHex);
-      const baseLab = rgbToOklab(r,g,b);
-      const baseLch = oklabToOklch(baseLab.L, baseLab.a, baseLab.b);
+    diverging: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
       const total = Math.max(1, Math.min(12, count || 8));
 
       // Left endpoint: EXACT primary color (no darkening)
-      const leftLab = baseLab;
+      const leftLab = oklchToOklab(L, C, h);
       // Right endpoint: complement with same L and similar C (clamped safe)
-      const compH = (baseLch.h + 180) % 360;
-      const cSafe = Math.min(0.35, Math.max(0.08, baseLch.C));
-      const rightLab = oklchToOklab(baseLab.L, cSafe, compH);
+      const compH = (h + 180) % 360;
+      const cSafe = Math.min(0.35, Math.max(0.08, C));
+      const rightLab = oklchToOklab(L, cSafe, compH);
       const whiteLab = { L: 0.98, a: 0, b: 0 }; // center near‑white
 
       const hexFromOKLab = (L, a, b) => toHex(oklabToRgb(L, a, b));
@@ -152,18 +184,22 @@
   let lastSignature = '';
 
   const updatePalettes = () => {
-    const primary = getPrimaryHex();
-    const signature = `${primary}`;
+    const primaryOKLCH = getPrimaryOKLCH();
+    const primaryHex = getPrimaryHex();
+    const signature = `${primaryOKLCH?.L},${primaryOKLCH?.C},${primaryOKLCH?.h}`;
     if (signature === lastSignature) return;
     lastSignature = signature;
-    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {}
+    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary: primaryHex, primaryOKLCH } })); } catch { }
   };
 
   const bootstrap = () => {
+    // Initial setup - only run once on page load
     updatePalettes();
+
+    // Observer will handle all subsequent changes
     const mo = new MutationObserver(() => updatePalettes());
     mo.observe(MODE.cssRoot, { attributes: true, attributeFilter: ['style', 'data-theme'] });
-    setInterval(updatePalettes, 400);
+
     // Utility: choose high-contrast (or softened) text style against an arbitrary background color
     const pickTextStyleForBackground = (bgCss, opts = {}) => {
       const cssRoot = document.documentElement;
@@ -175,13 +211,13 @@
         if (!rgb) return null;
         return rgb; // already 0..1
       };
-      const mixRgb01 = (a, b, t) => ({ r: a.r*(1-t)+b.r*t, g: a.g*(1-t)+b.g*t, b: a.b*(1-t)+b.b*t });
+      const mixRgb01 = (a, b, t) => ({ r: a.r * (1 - t) + b.r * t, g: a.g * (1 - t) + b.g * t, b: a.b * (1 - t) + b.b * t });
       const relLum = (rgb) => {
         const f = (u) => srgbToLinear(u);
-        return 0.2126*f(rgb.r) + 0.7152*f(rgb.g) + 0.0722*f(rgb.b);
+        return 0.2126 * f(rgb.r) + 0.7152 * f(rgb.g) + 0.0722 * f(rgb.b);
       };
       const contrast = (fg, bg) => {
-        const L1 = relLum(fg), L2 = relLum(bg); const a = Math.max(L1,L2), b = Math.min(L1,L2);
+        const L1 = relLum(fg), L2 = relLum(bg); const a = Math.max(L1, L2), b = Math.min(L1, L2);
         return (a + 0.05) / (b + 0.05);
       };
       try {
@@ -193,7 +229,7 @@
           .filter(x => !!x.rgb);
         // Pick the max contrast
         let best = candidates[0]; let bestCR = contrast(best.rgb, bg);
-        for (let i=1;i<candidates.length;i++){
+        for (let i = 1; i < candidates.length; i++) {
           const cr = contrast(candidates[i].rgb, bg);
           if (cr > bestCR) { best = candidates[i]; bestCR = cr; }
         }
@@ -206,7 +242,7 @@
           finalRgb = mixRgb01(best.rgb, mutedRgb, blend);
         }
         const haloStrength = Math.min(1, Math.max(0, Number(opts.haloStrength == null ? 0.5 : opts.haloStrength)));
-        const stroke = (best.css === '#000' || best.css.toLowerCase() === 'black') ? `rgba(255,255,255,${0.30 + 0.40*haloStrength})` : `rgba(0,0,0,${0.30 + 0.30*haloStrength})`;
+        const stroke = (best.css === '#000' || best.css.toLowerCase() === 'black') ? `rgba(255,255,255,${0.30 + 0.40 * haloStrength})` : `rgba(0,0,0,${0.30 + 0.30 * haloStrength})`;
         return { fill: toHex(finalRgb), stroke, strokeWidth: (opts.haloWidth == null ? 1 : Number(opts.haloWidth)) };
       } catch {
         return { fill: getCssVar('--text-color') || '#000', stroke: 'var(--transparent-page-contrast)', strokeWidth: 1 };
@@ -214,14 +250,16 @@
     };
     window.ColorPalettes = {
       refresh: updatePalettes,
-      notify: () => { try { const primary = getPrimaryHex(); document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {} },
+      notify: () => { try { const primaryOKLCH = getPrimaryOKLCH(); const primaryHex = getPrimaryHex(); document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary: primaryHex, primaryOKLCH } })); } catch { } },
       getPrimary: () => getPrimaryHex(),
+      getPrimaryOKLCH: () => getPrimaryOKLCH(),
       getColors: (key, count = 6) => {
-        const primary = getPrimaryHex();
+        const primaryOKLCH = getPrimaryOKLCH();
+        if (!primaryOKLCH) return [];
         const total = Math.max(1, Math.min(12, Number(count) || 6));
-        if (key === 'categorical') return generators.categorical(primary, total);
-        if (key === 'sequential') return generators.sequential(primary, total);
-        if (key === 'diverging') return generators.diverging(primary, total);
+        if (key === 'categorical') return generators.categorical(primaryOKLCH, total);
+        if (key === 'sequential') return generators.sequential(primaryOKLCH, total);
+        if (key === 'diverging') return generators.diverging(primaryOKLCH, total);
         return [];
       },
       getTextStyleForBackground: (bgCss, opts) => pickTextStyleForBackground(bgCss, opts || {}),

app/scripts/notion-importer/.notion-to-md/media/27877f1c-9c9d-804d-9c82-f7b3905578ff_media.json

@@ -1,198 +1,3 @@
-{
-  "pageId": "27877f1c-9c9d-804d-9c82-f7b3905578ff",
-  "lastUpdated": "2025-10-08T13:00:26.065Z",
-  "mediaEntries": {
-    "27877f1c-9c9d-8078-b6da-c7a4c67c8f35": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/69940e63-ba02-4d6b-bc79-81dcab16590b/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RQAHHWD2%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQCja3KUJzl59DJB4he%2BZc4EIAdSKZH6PHGkvSc5iTCA5gIhAK1O3OugR1Ap%2Fhuos6U7RbD2KxvfMHmfQXSU6K7IuEKgKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igw0pXUjiFqmEZtM2z8q3AMIdeJHjnKFMXfrzdsbRQMk5j3lsQc7tLMnmEPmHH%2FmX7sZrT4UjUkaKoeSyH%2Bg7wFpYmgvN77x8nGQ0nEQtZAPw2%2F3EH4nPTYF53xRmvyn7%2FMwloMmw7eBz7SIZ3Xk0aPYpbtVRoPUesefx7Jvddzmxu0Q%2FQpw0%2FrRCkLPJAnMdsR8fY3n8s8TBv7cVHHWkjpqgeaNKOD7O7Ej%2FNkVahgG%2BVi%2B8DlcuBG8FNk2EzDNroum71dNW6RzTO3ju65V5xHwLgmRkZRTKS%2FHeolCb01h51d%2BhJY03OORmJCMcOEYzPWg48LVGlFl%2FOA6OAhR%2FQ0eWs%2B1ZzKAz7HOSK6gHOhmcCj%2Bbve0%2FVaH2P708k33m5SQqjZQmfmO0JUCNn2WRPK9uYfSy64QFqpzeEXgAGiaNMQCrWjrLpO1TNcK457IQ4ofuJ9bt3be947z17Fa2pKdcescLFE7GdVtV5L4Nps5%2FoHCl0X1BxCPjpxN8zLRIQZtHFRloU8K6ebOrPFIb4bkjxfC9VidpyS0vnZ1DhFt8ssI1sOwrzRn5Kf%2FRltkKxvJPAp829yFUsrA35VhLZLllGpsdLzGVZS1GWkNqf0UxA5BZhdb9t4qPmp1WbBIufTnxcFuHKdUMxsdfTCxpZnHBjqkASugrWSTfsJxQU%2BvD6fKuut0yaNhG1Zscr6q%2FLX6mZAcKzCrMYWhsql27FMH5lEFZTsvBfNoX2h1ie3MPQw%2B67C4yNLYGIvBL%2BFPBfaw6qimvk48x5JDZBNsxN4fEMufvUM1%2FbemWiZZJSl8V5Q5h0NMxBmZFJkachxllAPWTTVPbSArY%2FYyX3vpKDGMi1fYZYT4IjNycyQDb6nSEKlqbnOjUosj&X-Amz-Signature=0e7a6d2cf89a76128b1e4ecd8e12053deb0a5e802a15e3e8c3d7979e2131fa09&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8078-b6da-c7a4c67c8f35.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8078-b6da-c7a4c67c8f35.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:35.892Z",
-      "updatedAt": "2025-10-08T13:00:25.689Z"
-    },
-    "27877f1c-9c9d-8014-834f-d700b623256b": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/a11fbd23-10f8-4485-ad35-f3de9d480449/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RQAHHWD2%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQCja3KUJzl59DJB4he%2BZc4EIAdSKZH6PHGkvSc5iTCA5gIhAK1O3OugR1Ap%2Fhuos6U7RbD2KxvfMHmfQXSU6K7IuEKgKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igw0pXUjiFqmEZtM2z8q3AMIdeJHjnKFMXfrzdsbRQMk5j3lsQc7tLMnmEPmHH%2FmX7sZrT4UjUkaKoeSyH%2Bg7wFpYmgvN77x8nGQ0nEQtZAPw2%2F3EH4nPTYF53xRmvyn7%2FMwloMmw7eBz7SIZ3Xk0aPYpbtVRoPUesefx7Jvddzmxu0Q%2FQpw0%2FrRCkLPJAnMdsR8fY3n8s8TBv7cVHHWkjpqgeaNKOD7O7Ej%2FNkVahgG%2BVi%2B8DlcuBG8FNk2EzDNroum71dNW6RzTO3ju65V5xHwLgmRkZRTKS%2FHeolCb01h51d%2BhJY03OORmJCMcOEYzPWg48LVGlFl%2FOA6OAhR%2FQ0eWs%2B1ZzKAz7HOSK6gHOhmcCj%2Bbve0%2FVaH2P708k33m5SQqjZQmfmO0JUCNn2WRPK9uYfSy64QFqpzeEXgAGiaNMQCrWjrLpO1TNcK457IQ4ofuJ9bt3be947z17Fa2pKdcescLFE7GdVtV5L4Nps5%2FoHCl0X1BxCPjpxN8zLRIQZtHFRloU8K6ebOrPFIb4bkjxfC9VidpyS0vnZ1DhFt8ssI1sOwrzRn5Kf%2FRltkKxvJPAp829yFUsrA35VhLZLllGpsdLzGVZS1GWkNqf0UxA5BZhdb9t4qPmp1WbBIufTnxcFuHKdUMxsdfTCxpZnHBjqkASugrWSTfsJxQU%2BvD6fKuut0yaNhG1Zscr6q%2FLX6mZAcKzCrMYWhsql27FMH5lEFZTsvBfNoX2h1ie3MPQw%2B67C4yNLYGIvBL%2BFPBfaw6qimvk48x5JDZBNsxN4fEMufvUM1%2FbemWiZZJSl8V5Q5h0NMxBmZFJkachxllAPWTTVPbSArY%2FYyX3vpKDGMi1fYZYT4IjNycyQDb6nSEKlqbnOjUosj&X-Amz-Signature=9145e81d85d35d531ffb6bbabad25d5846aa559613d371bc2880f6d02529b799&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8014-834f-d700b623256b.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8014-834f-d700b623256b.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:35.899Z",
-      "updatedAt": "2025-10-08T13:00:25.703Z"
-    },
-    "27877f1c-9c9d-808d-9c6d-fae817ac8868": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/9b549e26-b527-4ad5-b1ad-3ed049747090/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466X3VEST5Q%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130020Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQC4Th0nobtVjj0GnPkA6aNua8I5iyMPP5wm3FPgOcNrpQIhAM6Cd1AyvJOWLCdgyh%2F9xxRIzhQ8ZEYJPtDoTzf9dVzsKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igwbq%2Fmpsk4PhTeoeU8q3ANUdDY8Un1V3sp1KnXAZQmxQggeyUGmjkp%2BsBgML%2Bh3jLesSMzdlQPFwlTBbqh74KOfU7NmNfHFLiHqWLrpeLClymtDa9BGRQAnfNGuT%2BUXXxp5dSoeOsbUJInqYhW4FsjUBRNw%2FSAslpIJKfTrmcN81%2FIUQNc0TRtVmiiXKPFUCNfWErOAQlec%2B6mNZCJYY1EbzUg1tPFNYYLpoiNb45%2F0t1VlsyeG6WlkA2KFXybguL2BmlWms%2BC%2BDeANHe2r%2Bq0h9JVtz%2BYBB3CzzQdeerNfGtyml%2BTz5DiBvv0h9F5FNcqJ4Uf1CbLGaRVIlCXLHam3xV3Fk%2FpYYQerVcK6t6YWWeRO0x92Uj1TyF1H4aCPO%2BuAjxDdY0WJfdLROdRvwH69zTdBYb26Lo7h2T2MnY%2FjJ4UNGPf0CWoGMVU9BJCO6%2Bm7RySlYPw1Axogb7clhfZAUYsM%2FhBI01n5OLo2mIl1dMcIxnZNc%2FFxp3njz6Jpth%2Fu0KOe8X%2FPTgM9S58jNUVTWHYd3bEm54SfyUlEIwmSVHkdHAvZw8QfhIC8DAJULbBkKHe6nRKxvGqo1UZW2OY0%2BKpOu7kPBwFl13lcqjMeSy%2F%2BvpZDgwHonNSKYiYRrlffBfL%2BUFWdiijebzDHpJnHBjqkAfpE6DXG5ducvq1TeQISVLspLOKXhLJ0Jn1auWbgWOv02xnmSsxVrzmbEGcfsyZArqlrtxdg9N9yH30onEToRB0OnUGFrpiazcXfmdl7JS0Cn3mL4FiEHdFC%2B2lUkrwFbKVX0NhXsjQRmkeUUtT7dXPTDyzpPIxoyghxvJsm6OswiSouBbg4NB6EQaFjgxRw9KEg79jjKbCgyYvpKNs56YVN9kvk&X-Amz-Signature=b9e650906f6978d3d01caebf5329c1571bfa97d53d88a3c571eaaa7b618970d2&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-808d-9c6d-fae817ac8868.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-808d-9c6d-fae817ac8868.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:35.943Z",
-      "updatedAt": "2025-10-08T13:00:25.727Z"
-    },
-    "27877f1c-9c9d-8075-ae2e-dc24fe9296ca": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/943ada15-c18b-4434-ac96-cca2440119db/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466X3VEST5Q%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130020Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQC4Th0nobtVjj0GnPkA6aNua8I5iyMPP5wm3FPgOcNrpQIhAM6Cd1AyvJOWLCdgyh%2F9xxRIzhQ8ZEYJPtDoTzf9dVzsKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igwbq%2Fmpsk4PhTeoeU8q3ANUdDY8Un1V3sp1KnXAZQmxQggeyUGmjkp%2BsBgML%2Bh3jLesSMzdlQPFwlTBbqh74KOfU7NmNfHFLiHqWLrpeLClymtDa9BGRQAnfNGuT%2BUXXxp5dSoeOsbUJInqYhW4FsjUBRNw%2FSAslpIJKfTrmcN81%2FIUQNc0TRtVmiiXKPFUCNfWErOAQlec%2B6mNZCJYY1EbzUg1tPFNYYLpoiNb45%2F0t1VlsyeG6WlkA2KFXybguL2BmlWms%2BC%2BDeANHe2r%2Bq0h9JVtz%2BYBB3CzzQdeerNfGtyml%2BTz5DiBvv0h9F5FNcqJ4Uf1CbLGaRVIlCXLHam3xV3Fk%2FpYYQerVcK6t6YWWeRO0x92Uj1TyF1H4aCPO%2BuAjxDdY0WJfdLROdRvwH69zTdBYb26Lo7h2T2MnY%2FjJ4UNGPf0CWoGMVU9BJCO6%2Bm7RySlYPw1Axogb7clhfZAUYsM%2FhBI01n5OLo2mIl1dMcIxnZNc%2FFxp3njz6Jpth%2Fu0KOe8X%2FPTgM9S58jNUVTWHYd3bEm54SfyUlEIwmSVHkdHAvZw8QfhIC8DAJULbBkKHe6nRKxvGqo1UZW2OY0%2BKpOu7kPBwFl13lcqjMeSy%2F%2BvpZDgwHonNSKYiYRrlffBfL%2BUFWdiijebzDHpJnHBjqkAfpE6DXG5ducvq1TeQISVLspLOKXhLJ0Jn1auWbgWOv02xnmSsxVrzmbEGcfsyZArqlrtxdg9N9yH30onEToRB0OnUGFrpiazcXfmdl7JS0Cn3mL4FiEHdFC%2B2lUkrwFbKVX0NhXsjQRmkeUUtT7dXPTDyzpPIxoyghxvJsm6OswiSouBbg4NB6EQaFjgxRw9KEg79jjKbCgyYvpKNs56YVN9kvk&X-Amz-Signature=f6c6aeafa758351188cf92575d7adbac6d4438d61891b377861cceebe4699c16&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8075-ae2e-dc24fe9296ca.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8075-ae2e-dc24fe9296ca.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.095Z",
-      "updatedAt": "2025-10-08T13:00:25.926Z"
-    },
-    "27877f1c-9c9d-801d-841a-e35011491566": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/3a912fb2-01eb-46d2-9687-41ffbb5b0446/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466Y2XCJFFW%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQDGr1WaO6mypVW00YGoLx4XK5HeMm7tg4Wxi4tRLT0sBQIhAJZB9sfEWXoL6QQ8WnamF77mePTGmWqiZjYqIQ1Ba5kMKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1IgyvfgauHIg52DwLqjMq3AOxwogx8uxNPXYdZuG3Giz0pcRPcVYGSzx%2FsCHi3wTJAjMOnK7oq5bOcT%2Fl2UzIP2n1RWhZZWYAbDJFjDsGnnxxjP1dA4W%2BG2JxtQjoyKDV24YvvyoKp%2B8c%2BVuzeJYc%2FAp0wja9UZjjmB6We9vy73l%2F0lzOEnuDWGvA3Wz7HN72nCAxRWfFw3VXoLc12NJA7jMXJpMTJ0kQhR54IefMuCgXQRkP9ThY944aJBcJDVVW2oPCliR0sNKWOwxmzYLfqTaCfVYnYWij0W2PFYWTl8O8Fz%2F6tJQeBzIzYZkQH%2B%2FID9QHo2H91PyVglygKK5nFfSUGmu5%2BlBHNZhF0tQ%2BkkSiJBO%2Fzpzh1l3tJ5%2FSDTS3OkCq9CgQS1LlOZ%2FWVGRa0dO%2BPKuLt2kSE3g%2BdENrh0uHMXL16JnD8tihVBQjDVDteb9ty3wYric3oz7UIdTbcFFhBvLNK2iaTTxgVVe8Iwec1Yh5%2Br70PVEtQ2RGpeJRNF%2FTCdNajTXZecTA4gfj3Dep1uEbLH6wJzKpoYff5ewJZaQ5NqIKjBbwZlP0ZsdmirA3vCFTiBuA%2FtxyQutgfCfqtxDzRYtRLdYtuXHnOJX19k0dW1qKTx%2FvJHjGhd%2BF7DDuSjbWdZfyMNBtvTCCpZnHBjqkAXWtzxhDxy981YikbANxxcBAJxQM7hXL4Lmn9JZH3hI2Z46Dd1xpYDzpq%2Bv0TjPTSsilTsyySr4C8rXZuw4BTrdyjlduhH34%2FNp16EC1u7PlP2iNue5eMeLdERldacspGGFk9eApo%2FSCPEUJdHN%2B514Zr0nBCSnGWEy9najlnY9KFSWwfrPpbEz0Z2MLkADQVvGJ4N1Aa7S4MU9m9WAxOA%2BBxMyX&X-Amz-Signature=fdbb11308e72b72824529e50a6386bf06785d0576e5c27d6cf6f609380614733&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-801d-841a-e35011491566.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-801d-841a-e35011491566.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.121Z",
-      "updatedAt": "2025-10-08T13:00:25.898Z"
-    },
-    "27877f1c-9c9d-8048-9b7e-db4fa7485915": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/58651851-13c8-4e99-92e3-857c8e3d305b/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466X3VEST5Q%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130020Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQC4Th0nobtVjj0GnPkA6aNua8I5iyMPP5wm3FPgOcNrpQIhAM6Cd1AyvJOWLCdgyh%2F9xxRIzhQ8ZEYJPtDoTzf9dVzsKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igwbq%2Fmpsk4PhTeoeU8q3ANUdDY8Un1V3sp1KnXAZQmxQggeyUGmjkp%2BsBgML%2Bh3jLesSMzdlQPFwlTBbqh74KOfU7NmNfHFLiHqWLrpeLClymtDa9BGRQAnfNGuT%2BUXXxp5dSoeOsbUJInqYhW4FsjUBRNw%2FSAslpIJKfTrmcN81%2FIUQNc0TRtVmiiXKPFUCNfWErOAQlec%2B6mNZCJYY1EbzUg1tPFNYYLpoiNb45%2F0t1VlsyeG6WlkA2KFXybguL2BmlWms%2BC%2BDeANHe2r%2Bq0h9JVtz%2BYBB3CzzQdeerNfGtyml%2BTz5DiBvv0h9F5FNcqJ4Uf1CbLGaRVIlCXLHam3xV3Fk%2FpYYQerVcK6t6YWWeRO0x92Uj1TyF1H4aCPO%2BuAjxDdY0WJfdLROdRvwH69zTdBYb26Lo7h2T2MnY%2FjJ4UNGPf0CWoGMVU9BJCO6%2Bm7RySlYPw1Axogb7clhfZAUYsM%2FhBI01n5OLo2mIl1dMcIxnZNc%2FFxp3njz6Jpth%2Fu0KOe8X%2FPTgM9S58jNUVTWHYd3bEm54SfyUlEIwmSVHkdHAvZw8QfhIC8DAJULbBkKHe6nRKxvGqo1UZW2OY0%2BKpOu7kPBwFl13lcqjMeSy%2F%2BvpZDgwHonNSKYiYRrlffBfL%2BUFWdiijebzDHpJnHBjqkAfpE6DXG5ducvq1TeQISVLspLOKXhLJ0Jn1auWbgWOv02xnmSsxVrzmbEGcfsyZArqlrtxdg9N9yH30onEToRB0OnUGFrpiazcXfmdl7JS0Cn3mL4FiEHdFC%2B2lUkrwFbKVX0NhXsjQRmkeUUtT7dXPTDyzpPIxoyghxvJsm6OswiSouBbg4NB6EQaFjgxRw9KEg79jjKbCgyYvpKNs56YVN9kvk&X-Amz-Signature=f13847b038a80822deb40d3e0873722dc40cb227be4a6edfdb70d27be0794729&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8048-9b7e-db4fa7485915.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8048-9b7e-db4fa7485915.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.136Z",
-      "updatedAt": "2025-10-08T13:00:25.917Z"
-    },
-    "27877f1c-9c9d-804d-bd0a-e0b1c15e504f": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/3fbc7e6c-8ec0-4ef5-9161-7aef75930323/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RQAHHWD2%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130014Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQCja3KUJzl59DJB4he%2BZc4EIAdSKZH6PHGkvSc5iTCA5gIhAK1O3OugR1Ap%2Fhuos6U7RbD2KxvfMHmfQXSU6K7IuEKgKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igw0pXUjiFqmEZtM2z8q3AMIdeJHjnKFMXfrzdsbRQMk5j3lsQc7tLMnmEPmHH%2FmX7sZrT4UjUkaKoeSyH%2Bg7wFpYmgvN77x8nGQ0nEQtZAPw2%2F3EH4nPTYF53xRmvyn7%2FMwloMmw7eBz7SIZ3Xk0aPYpbtVRoPUesefx7Jvddzmxu0Q%2FQpw0%2FrRCkLPJAnMdsR8fY3n8s8TBv7cVHHWkjpqgeaNKOD7O7Ej%2FNkVahgG%2BVi%2B8DlcuBG8FNk2EzDNroum71dNW6RzTO3ju65V5xHwLgmRkZRTKS%2FHeolCb01h51d%2BhJY03OORmJCMcOEYzPWg48LVGlFl%2FOA6OAhR%2FQ0eWs%2B1ZzKAz7HOSK6gHOhmcCj%2Bbve0%2FVaH2P708k33m5SQqjZQmfmO0JUCNn2WRPK9uYfSy64QFqpzeEXgAGiaNMQCrWjrLpO1TNcK457IQ4ofuJ9bt3be947z17Fa2pKdcescLFE7GdVtV5L4Nps5%2FoHCl0X1BxCPjpxN8zLRIQZtHFRloU8K6ebOrPFIb4bkjxfC9VidpyS0vnZ1DhFt8ssI1sOwrzRn5Kf%2FRltkKxvJPAp829yFUsrA35VhLZLllGpsdLzGVZS1GWkNqf0UxA5BZhdb9t4qPmp1WbBIufTnxcFuHKdUMxsdfTCxpZnHBjqkASugrWSTfsJxQU%2BvD6fKuut0yaNhG1Zscr6q%2FLX6mZAcKzCrMYWhsql27FMH5lEFZTsvBfNoX2h1ie3MPQw%2B67C4yNLYGIvBL%2BFPBfaw6qimvk48x5JDZBNsxN4fEMufvUM1%2FbemWiZZJSl8V5Q5h0NMxBmZFJkachxllAPWTTVPbSArY%2FYyX3vpKDGMi1fYZYT4IjNycyQDb6nSEKlqbnOjUosj&X-Amz-Signature=fd7ef992dc4f3a290a5f04a0a640fe2828b5a33487682c4956913fe674c9c017&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-804d-bd0a-e0b1c15e504f.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-804d-bd0a-e0b1c15e504f.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.244Z",
-      "updatedAt": "2025-10-08T13:00:26.009Z"
-    },
-    "27877f1c-9c9d-80b9-8cfb-f0a6aaaa8760": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/d3899f55-47ba-45b0-be0f-9abc5bb4f247/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RQAHHWD2%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQCja3KUJzl59DJB4he%2BZc4EIAdSKZH6PHGkvSc5iTCA5gIhAK1O3OugR1Ap%2Fhuos6U7RbD2KxvfMHmfQXSU6K7IuEKgKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igw0pXUjiFqmEZtM2z8q3AMIdeJHjnKFMXfrzdsbRQMk5j3lsQc7tLMnmEPmHH%2FmX7sZrT4UjUkaKoeSyH%2Bg7wFpYmgvN77x8nGQ0nEQtZAPw2%2F3EH4nPTYF53xRmvyn7%2FMwloMmw7eBz7SIZ3Xk0aPYpbtVRoPUesefx7Jvddzmxu0Q%2FQpw0%2FrRCkLPJAnMdsR8fY3n8s8TBv7cVHHWkjpqgeaNKOD7O7Ej%2FNkVahgG%2BVi%2B8DlcuBG8FNk2EzDNroum71dNW6RzTO3ju65V5xHwLgmRkZRTKS%2FHeolCb01h51d%2BhJY03OORmJCMcOEYzPWg48LVGlFl%2FOA6OAhR%2FQ0eWs%2B1ZzKAz7HOSK6gHOhmcCj%2Bbve0%2FVaH2P708k33m5SQqjZQmfmO0JUCNn2WRPK9uYfSy64QFqpzeEXgAGiaNMQCrWjrLpO1TNcK457IQ4ofuJ9bt3be947z17Fa2pKdcescLFE7GdVtV5L4Nps5%2FoHCl0X1BxCPjpxN8zLRIQZtHFRloU8K6ebOrPFIb4bkjxfC9VidpyS0vnZ1DhFt8ssI1sOwrzRn5Kf%2FRltkKxvJPAp829yFUsrA35VhLZLllGpsdLzGVZS1GWkNqf0UxA5BZhdb9t4qPmp1WbBIufTnxcFuHKdUMxsdfTCxpZnHBjqkASugrWSTfsJxQU%2BvD6fKuut0yaNhG1Zscr6q%2FLX6mZAcKzCrMYWhsql27FMH5lEFZTsvBfNoX2h1ie3MPQw%2B67C4yNLYGIvBL%2BFPBfaw6qimvk48x5JDZBNsxN4fEMufvUM1%2FbemWiZZJSl8V5Q5h0NMxBmZFJkachxllAPWTTVPbSArY%2FYyX3vpKDGMi1fYZYT4IjNycyQDb6nSEKlqbnOjUosj&X-Amz-Signature=0e702a4db1c4dabdd69b83b59535958cd39a3e2906332aa607e61864797bca59&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80b9-8cfb-f0a6aaaa8760.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80b9-8cfb-f0a6aaaa8760.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.247Z",
-      "updatedAt": "2025-10-08T13:00:26.000Z"
-    },
-    "27877f1c-9c9d-80aa-b968-c54c9fe7e5d7": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/1f240ffd-b4d7-422a-9a81-0aabda1f6c16/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466Y2XCJFFW%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQDGr1WaO6mypVW00YGoLx4XK5HeMm7tg4Wxi4tRLT0sBQIhAJZB9sfEWXoL6QQ8WnamF77mePTGmWqiZjYqIQ1Ba5kMKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1IgyvfgauHIg52DwLqjMq3AOxwogx8uxNPXYdZuG3Giz0pcRPcVYGSzx%2FsCHi3wTJAjMOnK7oq5bOcT%2Fl2UzIP2n1RWhZZWYAbDJFjDsGnnxxjP1dA4W%2BG2JxtQjoyKDV24YvvyoKp%2B8c%2BVuzeJYc%2FAp0wja9UZjjmB6We9vy73l%2F0lzOEnuDWGvA3Wz7HN72nCAxRWfFw3VXoLc12NJA7jMXJpMTJ0kQhR54IefMuCgXQRkP9ThY944aJBcJDVVW2oPCliR0sNKWOwxmzYLfqTaCfVYnYWij0W2PFYWTl8O8Fz%2F6tJQeBzIzYZkQH%2B%2FID9QHo2H91PyVglygKK5nFfSUGmu5%2BlBHNZhF0tQ%2BkkSiJBO%2Fzpzh1l3tJ5%2FSDTS3OkCq9CgQS1LlOZ%2FWVGRa0dO%2BPKuLt2kSE3g%2BdENrh0uHMXL16JnD8tihVBQjDVDteb9ty3wYric3oz7UIdTbcFFhBvLNK2iaTTxgVVe8Iwec1Yh5%2Br70PVEtQ2RGpeJRNF%2FTCdNajTXZecTA4gfj3Dep1uEbLH6wJzKpoYff5ewJZaQ5NqIKjBbwZlP0ZsdmirA3vCFTiBuA%2FtxyQutgfCfqtxDzRYtRLdYtuXHnOJX19k0dW1qKTx%2FvJHjGhd%2BF7DDuSjbWdZfyMNBtvTCCpZnHBjqkAXWtzxhDxy981YikbANxxcBAJxQM7hXL4Lmn9JZH3hI2Z46Dd1xpYDzpq%2Bv0TjPTSsilTsyySr4C8rXZuw4BTrdyjlduhH34%2FNp16EC1u7PlP2iNue5eMeLdERldacspGGFk9eApo%2FSCPEUJdHN%2B514Zr0nBCSnGWEy9najlnY9KFSWwfrPpbEz0Z2MLkADQVvGJ4N1Aa7S4MU9m9WAxOA%2BBxMyX&X-Amz-Signature=c353bf2bf0d4ef95c66531df5c779035a90add76e2c286e9e26d41c1a6526eb9&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80aa-b968-c54c9fe7e5d7.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80aa-b968-c54c9fe7e5d7.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.247Z",
-      "updatedAt": "2025-10-08T13:00:26.061Z"
-    },
-    "27877f1c-9c9d-8013-b668-f14bd1ac0ec0": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/cb01b334-89a5-436f-a141-b7c310d25b57/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466Y2XCJFFW%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQDGr1WaO6mypVW00YGoLx4XK5HeMm7tg4Wxi4tRLT0sBQIhAJZB9sfEWXoL6QQ8WnamF77mePTGmWqiZjYqIQ1Ba5kMKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1IgyvfgauHIg52DwLqjMq3AOxwogx8uxNPXYdZuG3Giz0pcRPcVYGSzx%2FsCHi3wTJAjMOnK7oq5bOcT%2Fl2UzIP2n1RWhZZWYAbDJFjDsGnnxxjP1dA4W%2BG2JxtQjoyKDV24YvvyoKp%2B8c%2BVuzeJYc%2FAp0wja9UZjjmB6We9vy73l%2F0lzOEnuDWGvA3Wz7HN72nCAxRWfFw3VXoLc12NJA7jMXJpMTJ0kQhR54IefMuCgXQRkP9ThY944aJBcJDVVW2oPCliR0sNKWOwxmzYLfqTaCfVYnYWij0W2PFYWTl8O8Fz%2F6tJQeBzIzYZkQH%2B%2FID9QHo2H91PyVglygKK5nFfSUGmu5%2BlBHNZhF0tQ%2BkkSiJBO%2Fzpzh1l3tJ5%2FSDTS3OkCq9CgQS1LlOZ%2FWVGRa0dO%2BPKuLt2kSE3g%2BdENrh0uHMXL16JnD8tihVBQjDVDteb9ty3wYric3oz7UIdTbcFFhBvLNK2iaTTxgVVe8Iwec1Yh5%2Br70PVEtQ2RGpeJRNF%2FTCdNajTXZecTA4gfj3Dep1uEbLH6wJzKpoYff5ewJZaQ5NqIKjBbwZlP0ZsdmirA3vCFTiBuA%2FtxyQutgfCfqtxDzRYtRLdYtuXHnOJX19k0dW1qKTx%2FvJHjGhd%2BF7DDuSjbWdZfyMNBtvTCCpZnHBjqkAXWtzxhDxy981YikbANxxcBAJxQM7hXL4Lmn9JZH3hI2Z46Dd1xpYDzpq%2Bv0TjPTSsilTsyySr4C8rXZuw4BTrdyjlduhH34%2FNp16EC1u7PlP2iNue5eMeLdERldacspGGFk9eApo%2FSCPEUJdHN%2B514Zr0nBCSnGWEy9najlnY9KFSWwfrPpbEz0Z2MLkADQVvGJ4N1Aa7S4MU9m9WAxOA%2BBxMyX&X-Amz-Signature=ff0a0599c70fd9f202d55e4a7e887de8d8727724550d0e9faf6df28e0e9b7696&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8013-b668-f14bd1ac0ec0.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8013-b668-f14bd1ac0ec0.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.250Z",
-      "updatedAt": "2025-10-08T13:00:26.056Z"
-    },
-    "27877f1c-9c9d-80e9-b729-dbd328930bed": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/9d723e06-252f-44e3-844e-1410fa92667a/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RQAHHWD2%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQCja3KUJzl59DJB4he%2BZc4EIAdSKZH6PHGkvSc5iTCA5gIhAK1O3OugR1Ap%2Fhuos6U7RbD2KxvfMHmfQXSU6K7IuEKgKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igw0pXUjiFqmEZtM2z8q3AMIdeJHjnKFMXfrzdsbRQMk5j3lsQc7tLMnmEPmHH%2FmX7sZrT4UjUkaKoeSyH%2Bg7wFpYmgvN77x8nGQ0nEQtZAPw2%2F3EH4nPTYF53xRmvyn7%2FMwloMmw7eBz7SIZ3Xk0aPYpbtVRoPUesefx7Jvddzmxu0Q%2FQpw0%2FrRCkLPJAnMdsR8fY3n8s8TBv7cVHHWkjpqgeaNKOD7O7Ej%2FNkVahgG%2BVi%2B8DlcuBG8FNk2EzDNroum71dNW6RzTO3ju65V5xHwLgmRkZRTKS%2FHeolCb01h51d%2BhJY03OORmJCMcOEYzPWg48LVGlFl%2FOA6OAhR%2FQ0eWs%2B1ZzKAz7HOSK6gHOhmcCj%2Bbve0%2FVaH2P708k33m5SQqjZQmfmO0JUCNn2WRPK9uYfSy64QFqpzeEXgAGiaNMQCrWjrLpO1TNcK457IQ4ofuJ9bt3be947z17Fa2pKdcescLFE7GdVtV5L4Nps5%2FoHCl0X1BxCPjpxN8zLRIQZtHFRloU8K6ebOrPFIb4bkjxfC9VidpyS0vnZ1DhFt8ssI1sOwrzRn5Kf%2FRltkKxvJPAp829yFUsrA35VhLZLllGpsdLzGVZS1GWkNqf0UxA5BZhdb9t4qPmp1WbBIufTnxcFuHKdUMxsdfTCxpZnHBjqkASugrWSTfsJxQU%2BvD6fKuut0yaNhG1Zscr6q%2FLX6mZAcKzCrMYWhsql27FMH5lEFZTsvBfNoX2h1ie3MPQw%2B67C4yNLYGIvBL%2BFPBfaw6qimvk48x5JDZBNsxN4fEMufvUM1%2FbemWiZZJSl8V5Q5h0NMxBmZFJkachxllAPWTTVPbSArY%2FYyX3vpKDGMi1fYZYT4IjNycyQDb6nSEKlqbnOjUosj&X-Amz-Signature=4faf0d241e315ba80e5f56bb4cb410229c15e429fcab990fd1ebc2b17e2e4388&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80e9-b729-dbd328930bed.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80e9-b729-dbd328930bed.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.251Z",
-      "updatedAt": "2025-10-08T13:00:26.048Z"
-    },
-    "27877f1c-9c9d-80a9-b4d0-f2129716632d": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/137c2c51-6f89-437f-ba45-3a844c747b7a/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466W5FHSQK6%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130018Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJGMEQCIAhuEUuJdQLuRcUIqWrlF%2FxJVRmDyl6u61kVLhtjlfZUAiBV%2Fg6BRYZGv8gjl2KUiGhGUm6oydw9R%2BGbL4YBC8orxyqIBAi9%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAAaDDYzNzQyMzE4MzgwNSIM3uBXzGO9Ig0qNGY4KtwD8SFvKEBtLvytudTAIznpwZ0LlbKJs50UtNCuHXZMaMCWVzh3bh5s1YUDv9F8QzpxpmwoEHNA0zdieOQ0RTayznMP%2FQonTMVpq110QUSpjw0oiOQAObBO%2FZhOW3eVIvyERdtG8hJ%2FFdtOx68HiwShjXQNIx%2FTLP%2FyKsamFu97bNFKLLbXaKEQL%2FPeYBMfUh1FOikwzUsWtnX6xkIyDZlzyvR5XfiR93IkhPKAe3tRogdfHErVfaMhWD4CLC3CotugLqYLChLu2FEgjljFpEHc5u5od5FnVy9AUpcA9X21VVFEM5ZdQ2e3RAB6wIMQvIaYTHHCnFFfouA8nRqcEVzWysN3qwh2ilXM%2FkIfZN7fRIxbBSPLyUIVcJpZNwbzs8d5bs3qvzM9G8FkzDvtYML3JOdEzF4LuxAAJJLAqhTTQ1PhnB4lalWW%2BzGBluxdvxfidxr7w8b74x1A6sr2RRg204TCYmbv8epUSs%2BRfkjbpQb25T59MrJnDDkvR3vwM0uRiYOcx7BIJoJQ9NABbDhUdQivPKSx%2FWfUI4qzy2Qu3ylcwrudYUrkObXxW8EpCrpCr3q7hWCPkKfvLhioYojN04XKEoAr9eJNJKYu8%2BGtS2%2FHsFqf94Soxz4NYa8wsaWZxwY6pgEneyRps7aPn1nFrZvbD3DUmmNVnG7Ot90eZ9AeaSCgE0a8LPo2EBJqYduCTOFx0ZS31WSpymmuKKyjsI94sx8u%2F5Mmvyc%2F6g6F%2FSGga8Z7F5NIPVciGCTsa2iZFLblK4LGKDfvx5RgoyuAatccTNlNYca%2F5w9iQ1JXOu83l39OW1O54Xr5rX96kIiak60h5LxJgIHU3zeBdD4UeGH39LaRoJyMksdX&X-Amz-Signature=3e45baae308e0004d8e62bc03d6e459d6310e19ae4935db52491727bc24231cb&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80a9-b4d0-f2129716632d.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80a9-b4d0-f2129716632d.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.257Z",
-      "updatedAt": "2025-10-08T13:00:26.048Z"
-    },
-    "27877f1c-9c9d-80b6-be07-e8646502f82a": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/843a4edd-435d-45ca-8212-1af31305fb3a/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466RQAHHWD2%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQCja3KUJzl59DJB4he%2BZc4EIAdSKZH6PHGkvSc5iTCA5gIhAK1O3OugR1Ap%2Fhuos6U7RbD2KxvfMHmfQXSU6K7IuEKgKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igw0pXUjiFqmEZtM2z8q3AMIdeJHjnKFMXfrzdsbRQMk5j3lsQc7tLMnmEPmHH%2FmX7sZrT4UjUkaKoeSyH%2Bg7wFpYmgvN77x8nGQ0nEQtZAPw2%2F3EH4nPTYF53xRmvyn7%2FMwloMmw7eBz7SIZ3Xk0aPYpbtVRoPUesefx7Jvddzmxu0Q%2FQpw0%2FrRCkLPJAnMdsR8fY3n8s8TBv7cVHHWkjpqgeaNKOD7O7Ej%2FNkVahgG%2BVi%2B8DlcuBG8FNk2EzDNroum71dNW6RzTO3ju65V5xHwLgmRkZRTKS%2FHeolCb01h51d%2BhJY03OORmJCMcOEYzPWg48LVGlFl%2FOA6OAhR%2FQ0eWs%2B1ZzKAz7HOSK6gHOhmcCj%2Bbve0%2FVaH2P708k33m5SQqjZQmfmO0JUCNn2WRPK9uYfSy64QFqpzeEXgAGiaNMQCrWjrLpO1TNcK457IQ4ofuJ9bt3be947z17Fa2pKdcescLFE7GdVtV5L4Nps5%2FoHCl0X1BxCPjpxN8zLRIQZtHFRloU8K6ebOrPFIb4bkjxfC9VidpyS0vnZ1DhFt8ssI1sOwrzRn5Kf%2FRltkKxvJPAp829yFUsrA35VhLZLllGpsdLzGVZS1GWkNqf0UxA5BZhdb9t4qPmp1WbBIufTnxcFuHKdUMxsdfTCxpZnHBjqkASugrWSTfsJxQU%2BvD6fKuut0yaNhG1Zscr6q%2FLX6mZAcKzCrMYWhsql27FMH5lEFZTsvBfNoX2h1ie3MPQw%2B67C4yNLYGIvBL%2BFPBfaw6qimvk48x5JDZBNsxN4fEMufvUM1%2FbemWiZZJSl8V5Q5h0NMxBmZFJkachxllAPWTTVPbSArY%2FYyX3vpKDGMi1fYZYT4IjNycyQDb6nSEKlqbnOjUosj&X-Amz-Signature=6b41be5cc09cf3fae5304c63a3291650e24c6ad9285ba21202c90a186c8be390&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80b6-be07-e8646502f82a.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80b6-be07-e8646502f82a.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.274Z",
-      "updatedAt": "2025-10-08T13:00:25.995Z"
-    },
-    "27877f1c-9c9d-808f-b712-c7c608da3fc6": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/33327526-41c3-4e9c-b4ee-c7cc3c23c7ca/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466Y2XCJFFW%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130015Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQDGr1WaO6mypVW00YGoLx4XK5HeMm7tg4Wxi4tRLT0sBQIhAJZB9sfEWXoL6QQ8WnamF77mePTGmWqiZjYqIQ1Ba5kMKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1IgyvfgauHIg52DwLqjMq3AOxwogx8uxNPXYdZuG3Giz0pcRPcVYGSzx%2FsCHi3wTJAjMOnK7oq5bOcT%2Fl2UzIP2n1RWhZZWYAbDJFjDsGnnxxjP1dA4W%2BG2JxtQjoyKDV24YvvyoKp%2B8c%2BVuzeJYc%2FAp0wja9UZjjmB6We9vy73l%2F0lzOEnuDWGvA3Wz7HN72nCAxRWfFw3VXoLc12NJA7jMXJpMTJ0kQhR54IefMuCgXQRkP9ThY944aJBcJDVVW2oPCliR0sNKWOwxmzYLfqTaCfVYnYWij0W2PFYWTl8O8Fz%2F6tJQeBzIzYZkQH%2B%2FID9QHo2H91PyVglygKK5nFfSUGmu5%2BlBHNZhF0tQ%2BkkSiJBO%2Fzpzh1l3tJ5%2FSDTS3OkCq9CgQS1LlOZ%2FWVGRa0dO%2BPKuLt2kSE3g%2BdENrh0uHMXL16JnD8tihVBQjDVDteb9ty3wYric3oz7UIdTbcFFhBvLNK2iaTTxgVVe8Iwec1Yh5%2Br70PVEtQ2RGpeJRNF%2FTCdNajTXZecTA4gfj3Dep1uEbLH6wJzKpoYff5ewJZaQ5NqIKjBbwZlP0ZsdmirA3vCFTiBuA%2FtxyQutgfCfqtxDzRYtRLdYtuXHnOJX19k0dW1qKTx%2FvJHjGhd%2BF7DDuSjbWdZfyMNBtvTCCpZnHBjqkAXWtzxhDxy981YikbANxxcBAJxQM7hXL4Lmn9JZH3hI2Z46Dd1xpYDzpq%2Bv0TjPTSsilTsyySr4C8rXZuw4BTrdyjlduhH34%2FNp16EC1u7PlP2iNue5eMeLdERldacspGGFk9eApo%2FSCPEUJdHN%2B514Zr0nBCSnGWEy9najlnY9KFSWwfrPpbEz0Z2MLkADQVvGJ4N1Aa7S4MU9m9WAxOA%2BBxMyX&X-Amz-Signature=68518895319bebfef33cc5c5786ea73b408d55f058fe1b07a6e057f3167389dc&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-808f-b712-c7c608da3fc6.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-808f-b712-c7c608da3fc6.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.274Z",
-      "updatedAt": "2025-10-08T13:00:25.863Z"
-    },
-    "27877f1c-9c9d-8031-ac8d-c5678af1bdd5": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/16831579-d887-4894-b36a-d4df8a134653/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466X3VEST5Q%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130020Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQC4Th0nobtVjj0GnPkA6aNua8I5iyMPP5wm3FPgOcNrpQIhAM6Cd1AyvJOWLCdgyh%2F9xxRIzhQ8ZEYJPtDoTzf9dVzsKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igwbq%2Fmpsk4PhTeoeU8q3ANUdDY8Un1V3sp1KnXAZQmxQggeyUGmjkp%2BsBgML%2Bh3jLesSMzdlQPFwlTBbqh74KOfU7NmNfHFLiHqWLrpeLClymtDa9BGRQAnfNGuT%2BUXXxp5dSoeOsbUJInqYhW4FsjUBRNw%2FSAslpIJKfTrmcN81%2FIUQNc0TRtVmiiXKPFUCNfWErOAQlec%2B6mNZCJYY1EbzUg1tPFNYYLpoiNb45%2F0t1VlsyeG6WlkA2KFXybguL2BmlWms%2BC%2BDeANHe2r%2Bq0h9JVtz%2BYBB3CzzQdeerNfGtyml%2BTz5DiBvv0h9F5FNcqJ4Uf1CbLGaRVIlCXLHam3xV3Fk%2FpYYQerVcK6t6YWWeRO0x92Uj1TyF1H4aCPO%2BuAjxDdY0WJfdLROdRvwH69zTdBYb26Lo7h2T2MnY%2FjJ4UNGPf0CWoGMVU9BJCO6%2Bm7RySlYPw1Axogb7clhfZAUYsM%2FhBI01n5OLo2mIl1dMcIxnZNc%2FFxp3njz6Jpth%2Fu0KOe8X%2FPTgM9S58jNUVTWHYd3bEm54SfyUlEIwmSVHkdHAvZw8QfhIC8DAJULbBkKHe6nRKxvGqo1UZW2OY0%2BKpOu7kPBwFl13lcqjMeSy%2F%2BvpZDgwHonNSKYiYRrlffBfL%2BUFWdiijebzDHpJnHBjqkAfpE6DXG5ducvq1TeQISVLspLOKXhLJ0Jn1auWbgWOv02xnmSsxVrzmbEGcfsyZArqlrtxdg9N9yH30onEToRB0OnUGFrpiazcXfmdl7JS0Cn3mL4FiEHdFC%2B2lUkrwFbKVX0NhXsjQRmkeUUtT7dXPTDyzpPIxoyghxvJsm6OswiSouBbg4NB6EQaFjgxRw9KEg79jjKbCgyYvpKNs56YVN9kvk&X-Amz-Signature=0e07c27075a366f43cf237c80660a72ba43bdbad3486e7f1f9e3a12afdfcc7f0&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8031-ac8d-c5678af1bdd5.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-8031-ac8d-c5678af1bdd5.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.276Z",
-      "updatedAt": "2025-10-08T13:00:25.920Z"
-    },
-    "27877f1c-9c9d-80e7-a500-fb79cebde7e3": {
-      "mediaInfo": {
-        "type": "DOWNLOAD",
-        "originalUrl": "https://prod-files-secure.s3.us-west-2.amazonaws.com/6fe77f1c-9c9d-81b1-b174-00031f2bc702/0458ed42-9805-4c8f-9d7e-c675474a626e/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466X3VEST5Q%2F20251008%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20251008T130020Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECQaCXVzLXdlc3QtMiJIMEYCIQC4Th0nobtVjj0GnPkA6aNua8I5iyMPP5wm3FPgOcNrpQIhAM6Cd1AyvJOWLCdgyh%2F9xxRIzhQ8ZEYJPtDoTzf9dVzsKogECL3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMNjM3NDIzMTgzODA1Igwbq%2Fmpsk4PhTeoeU8q3ANUdDY8Un1V3sp1KnXAZQmxQggeyUGmjkp%2BsBgML%2Bh3jLesSMzdlQPFwlTBbqh74KOfU7NmNfHFLiHqWLrpeLClymtDa9BGRQAnfNGuT%2BUXXxp5dSoeOsbUJInqYhW4FsjUBRNw%2FSAslpIJKfTrmcN81%2FIUQNc0TRtVmiiXKPFUCNfWErOAQlec%2B6mNZCJYY1EbzUg1tPFNYYLpoiNb45%2F0t1VlsyeG6WlkA2KFXybguL2BmlWms%2BC%2BDeANHe2r%2Bq0h9JVtz%2BYBB3CzzQdeerNfGtyml%2BTz5DiBvv0h9F5FNcqJ4Uf1CbLGaRVIlCXLHam3xV3Fk%2FpYYQerVcK6t6YWWeRO0x92Uj1TyF1H4aCPO%2BuAjxDdY0WJfdLROdRvwH69zTdBYb26Lo7h2T2MnY%2FjJ4UNGPf0CWoGMVU9BJCO6%2Bm7RySlYPw1Axogb7clhfZAUYsM%2FhBI01n5OLo2mIl1dMcIxnZNc%2FFxp3njz6Jpth%2Fu0KOe8X%2FPTgM9S58jNUVTWHYd3bEm54SfyUlEIwmSVHkdHAvZw8QfhIC8DAJULbBkKHe6nRKxvGqo1UZW2OY0%2BKpOu7kPBwFl13lcqjMeSy%2F%2BvpZDgwHonNSKYiYRrlffBfL%2BUFWdiijebzDHpJnHBjqkAfpE6DXG5ducvq1TeQISVLspLOKXhLJ0Jn1auWbgWOv02xnmSsxVrzmbEGcfsyZArqlrtxdg9N9yH30onEToRB0OnUGFrpiazcXfmdl7JS0Cn3mL4FiEHdFC%2B2lUkrwFbKVX0NhXsjQRmkeUUtT7dXPTDyzpPIxoyghxvJsm6OswiSouBbg4NB6EQaFjgxRw9KEg79jjKbCgyYvpKNs56YVN9kvk&X-Amz-Signature=e43c1f35e9930e144c0b2b6098457be4848a723301fd78f3ff27d94f87ccbebb&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",
-        "localPath": "/Users/thibaudfrere/Documents/work-projects/huggingface/research-article-template/app/scripts/notion-importer/output/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80e7-a500-fb79cebde7e3.png",
-        "sourceType": "block",
-        "transformedPath": "/media/27877f1c9c9d804d9c82f7b3905578ff/image_27877f1c-9c9d-80e7-a500-fb79cebde7e3.png"
-      },
-      "lastEdited": "2025-09-24T09:22:00.000Z",
-      "createdAt": "2025-09-24T09:36:36.448Z",
-      "updatedAt": "2025-10-08T13:00:26.065Z"
-    }
-  }
-}
+version https://git-lfs.github.com/spec/v1
+oid sha256:c282e7bcb40ee2caafda422b3614d996d6023dbb4bbe10f96521348ee151aeb0
+size 36969

app/scripts/notion-importer/README.md

@@ -4,25 +4,6 @@ Complete Notion to MDX (Markdown + JSX) importer optimized for Astro with advanc
 
 ## 🚀 Quick Start
 
-### Method 1: Using NOTION_PAGE_ID (Recommended)
-
-```bash
-# Install dependencies
-npm install
-
-# Setup environment variables
-cp env.example .env
-# Edit .env with your Notion token and page ID
-
-# Complete Notion → MDX conversion (fetches title/slug automatically)
-NOTION_TOKEN=secret_xxx NOTION_PAGE_ID=abc123 node index.mjs
-
-# Or use .env file
-node index.mjs
-```
-
-### Method 2: Using pages.json (Legacy)
-
 ```bash
 # Install dependencies
 npm install
@@ -31,18 +12,7 @@ npm install
 cp env.example .env
 # Edit .env with your Notion token
 
-# Configure pages in input/pages.json
-# {
-#   "pages": [
-#     {
-#       "id": "your-page-id",
-#       "title": "Title",
-#       "slug": "slug"
-#     }
-#   ]
-# }
-
-# Complete Notion → MDX conversion
+# Complete Notion → MDX conversion with all features
 node index.mjs
 
 # For step-by-step debugging
@@ -73,7 +43,7 @@ notion-importer/
 ### 🎯 **Advanced Media Handling**
 - **Local download**: Automatic download of all Notion media (images, files, PDFs)
 - **Path transformation**: Smart path conversion for web accessibility
-- **Image components**: Automatic conversion to Astro `Image` components with zoom/download
+- **Figure components**: Automatic conversion to Astro `Figure` components with zoom/download
 - **Media organization**: Structured media storage by page ID
 
 ### 🧮 **Interactive Components**
@@ -121,7 +91,7 @@ published: "2024-01-15"
 tableOfContentsAutoCollapse: true
 ---
 
-import Image from '../components/Image.astro';
+import Figure from '../components/Figure.astro';
 import Note from '../components/Note.astro';
 import gettingStartedImage from './media/getting-started/image1.png';
 

app/scripts/notion-importer/env.example

@@ -1,2 +1,72 @@
-NOTION_TOKEN=ntn_xxx
-NOTION_PAGE_ID=xxx
+# Notion to MDX Toolkit - Environment Variables
+# Copy this file to .env and fill in your actual values
+
+# ===========================================
+# NOTION API CONFIGURATION
+# ===========================================
+
+# Your Notion Integration Token
+# Get this from: https://www.notion.so/my-integrations
+# Format: secret_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NOTION_TOKEN=secret_your_notion_integration_token_here
+
+# ===========================================
+# OPTIONAL CONFIGURATION
+# ===========================================
+
+# Custom output directory (optional)
+# Default: ./output
+# OUTPUT_DIR=./my-custom-output
+
+# Custom input configuration file (optional)
+# Default: ./input/pages.json
+# INPUT_CONFIG=./my-pages.json
+
+# ===========================================
+# USAGE EXAMPLES
+# ===========================================
+
+# 1. Basic usage:
+#   NOTION_TOKEN=secret_xxx node index.mjs
+
+# 2. With custom paths:
+#   NOTION_TOKEN=secret_xxx OUTPUT_DIR=./converted node index.mjs
+
+# 3. Test access to a page:
+#   NOTION_TOKEN=secret_xxx node test-access.mjs
+
+# ===========================================
+# SETUP INSTRUCTIONS
+# ===========================================
+
+# 1. Create a Notion integration:
+#    - Go to https://www.notion.so/my-integrations
+#    - Click "New integration"
+#    - Give it a name (e.g., "MDX Converter")
+#    - Select your workspace
+#    - Click "Submit"
+#    - Copy the "Internal Integration Token"
+
+# 2. Share your Notion pages with the integration:
+#    - Open your Notion page
+#    - Click "Share" (top right)
+#    - Click "Invite"
+#    - Search for your integration name
+#    - Select it and give "Can read content" permission
+#    - Click "Invite"
+
+# 3. Configure your pages in input/pages.json:
+#    {
+#      "pages": [
+#        {
+#          "id": "your-notion-page-id",
+#          "title": "Page Title",
+#          "slug": "page-slug"
+#        }
+#      ]
+#    }
+
+# 4. Run the conversion:
+#    cp env.example .env
+#    # Edit .env with your actual token
+#    node index.mjs --clean

app/scripts/notion-importer/index.mjs

@@ -6,10 +6,9 @@ import { fileURLToPath } from 'url';
 import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
 import { convertNotionToMarkdown } from './notion-converter.mjs';
 import { convertToMdx } from './mdx-converter.mjs';
-import { Client } from '@notionhq/client';
 
-// Load environment variables from .env file (but don't override existing ones)
-config({ override: false });
+// Load environment variables from .env file
+config();
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -29,8 +28,7 @@ function parseArgs() {
         clean: false,
         notionOnly: false,
         mdxOnly: false,
-        token: process.env.NOTION_TOKEN,
-        pageId: process.env.NOTION_PAGE_ID
+        token: process.env.NOTION_TOKEN
     };
 
     for (const arg of args) {
@@ -40,8 +38,6 @@ function parseArgs() {
             config.output = arg.split('=')[1];
         } else if (arg.startsWith('--token=')) {
             config.token = arg.split('=')[1];
-        } else if (arg.startsWith('--page-id=')) {
-            config.pageId = arg.split('=')[1];
         } else if (arg === '--clean') {
             config.clean = true;
         } else if (arg === '--notion-only') {
@@ -127,54 +123,6 @@ function readPagesConfig(inputFile) {
     }
 }
 
-/**
- * Create a temporary pages.json from NOTION_PAGE_ID environment variable
- * Extracts title and generates slug from the Notion page
- */
-async function createPagesConfigFromEnv(pageId, token, outputPath) {
-    try {
-        console.log('🔍 Fetching page info from Notion API...');
-        const notion = new Client({ auth: token });
-        const page = await notion.pages.retrieve({ page_id: pageId });
-
-        // Extract title
-        let title = 'Article';
-        if (page.properties.title && page.properties.title.title && page.properties.title.title.length > 0) {
-            title = page.properties.title.title[0].plain_text;
-        } else if (page.properties.Name && page.properties.Name.title && page.properties.Name.title.length > 0) {
-            title = page.properties.Name.title[0].plain_text;
-        }
-
-        // Generate slug from title
-        const slug = title
-            .toLowerCase()
-            .replace(/[^\w\s-]/g, '')
-            .replace(/\s+/g, '-')
-            .replace(/-+/g, '-')
-            .trim();
-
-        console.log(`    ✅ Found page: "${title}" (slug: ${slug})`);
-
-        // Create pages config
-        const pagesConfig = {
-            pages: [{
-                id: pageId,
-                title: title,
-                slug: slug
-            }]
-        };
-
-        // Write to temporary file
-        writeFileSync(outputPath, JSON.stringify(pagesConfig, null, 4));
-        console.log(`    ✅ Created temporary pages config`);
-
-        return pagesConfig;
-    } catch (error) {
-        console.error(`❌ Error fetching page from Notion: ${error.message}`);
-        throw error;
-    }
-}
-
 function copyToAstroContent(outputDir) {
     console.log('📋 Copying MDX files to Astro content directory...');
 
@@ -188,9 +136,7 @@ function copyToAstroContent(outputDir) {
         const mdxFiles = files.filter(file => file.endsWith('.mdx'));
         if (mdxFiles.length > 0) {
             const mdxFile = join(outputDir, mdxFiles[0]); // Take the first MDX file
-            // Read and write instead of copy to avoid EPERM issues
-            const mdxContent = readFileSync(mdxFile, 'utf8');
-            writeFileSync(ASTRO_CONTENT_PATH, mdxContent);
+            copyFileSync(mdxFile, ASTRO_CONTENT_PATH);
             console.log(`    ✅ Copied MDX to ${ASTRO_CONTENT_PATH}`);
         }
 
@@ -253,24 +199,6 @@ async function main() {
     console.log('========================');
 
     try {
-        // Prepare input config file
-        let inputConfigFile = config.input;
-        let pageIdFromEnv = null;
-
-        // If NOTION_PAGE_ID is provided via env var, create temporary pages.json
-        if (config.pageId && config.token) {
-            console.log('✨ Using NOTION_PAGE_ID from environment variable');
-            const tempConfigPath = join(config.output, '.temp-pages.json');
-            ensureDirectory(config.output);
-            await createPagesConfigFromEnv(config.pageId, config.token, tempConfigPath);
-            inputConfigFile = tempConfigPath;
-            pageIdFromEnv = config.pageId;
-        } else if (!existsSync(config.input)) {
-            console.error(`❌ No NOTION_PAGE_ID environment variable and no pages.json found at: ${config.input}`);
-            console.log('💡 Either set NOTION_PAGE_ID env var or create input/pages.json');
-            process.exit(1);
-        }
-
         if (config.clean) {
             console.log('🧹 Cleaning output directory...');
             await cleanDirectory(config.output);
@@ -285,7 +213,7 @@ async function main() {
         } else if (config.notionOnly) {
             // Only convert Notion to Markdown
             console.log('📄 Notion conversion only mode');
-            await convertNotionToMarkdown(inputConfigFile, config.output, config.token);
+            await convertNotionToMarkdown(config.input, config.output, config.token);
 
         } else {
             // Full workflow
@@ -293,13 +221,13 @@ async function main() {
 
             // Step 1: Convert Notion to Markdown
             console.log('\n📄 Step 1: Converting Notion pages to Markdown...');
-            await convertNotionToMarkdown(inputConfigFile, config.output, config.token);
+            await convertNotionToMarkdown(config.input, config.output, config.token);
 
             // Step 2: Convert Markdown to MDX with Notion metadata
             console.log('\n📝 Step 2: Converting Markdown to MDX...');
-            const pagesConfig = readPagesConfig(inputConfigFile);
+            const pagesConfig = readPagesConfig(config.input);
             const firstPage = pagesConfig.pages && pagesConfig.pages.length > 0 ? pagesConfig.pages[0] : null;
-            const pageId = pageIdFromEnv || (firstPage ? firstPage.id : null);
+            const pageId = firstPage ? firstPage.id : null;
             await convertToMdx(config.output, config.output, pageId, config.token);
 
             // Step 3: Copy to Astro content directory

app/scripts/notion-importer/input/pages.json

@@ -1,9 +1,3 @@
-{
-    "pages": [
-        {
-            "id": "27877f1c9c9d804d9c82f7b3905578ff",
-            "title": "The Smol Training Guide",
-            "slug": "smol-training-guide"
-        }
-    ]
-}
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d51fba4ce9b05562f5df611a150e3cd702b487d2e608441318336556e0f248a
+size 188

app/scripts/notion-importer/mdx-converter.mjs

@@ -122,12 +122,12 @@ function addComponentImports(content) {
 }
 
 /**
- * Transform Notion images to Image components
+ * Transform Notion images to Figure components
  * @param {string} content - MDX content
- * @returns {string} - Content with Image components
+ * @returns {string} - Content with Figure components
  */
 function transformImages(content) {
-    console.log('  🖼️  Transforming images to Image components...');
+    console.log('  🖼️  Transforming images to Figure components...');
 
     let hasImages = false;
 
@@ -163,8 +163,8 @@ function transformImages(content) {
             : cleaned;
     };
 
-    // Create Image component with import
-    const createImageComponent = (src, alt = '', caption = '') => {
+    // Create Figure component with import
+    const createFigureComponent = (src, alt = '', caption = '') => {
         const cleanSrc = cleanSrcPath(src);
 
         // Skip PDF URLs and external URLs - they should remain as links only
@@ -177,7 +177,7 @@ function transformImages(content) {
 
         const varName = generateImageVarName(cleanSrc);
         imageImports.set(cleanSrc, varName);
-        usedComponents.add('Image');
+        usedComponents.add('Figure');
 
         const props = [];
         props.push(`src={${varName}}`);
@@ -187,30 +187,30 @@ function transformImages(content) {
         if (alt) props.push(`alt="${alt}"`);
         if (caption) props.push(`caption={'${caption}'}`);
 
-        return `<Image\n  ${props.join('\n  ')}\n/>`;
+        return `<Figure\n  ${props.join('\n  ')}\n/>`;
     };
 
     // Transform markdown images: ![alt](src)
     content = content.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
         const cleanSrc = cleanSrcPath(src);
-        const cleanAlt = cleanAltText(alt || 'Image');
+        const cleanAlt = cleanAltText(alt || 'Figure');
         hasImages = true;
 
-        return createImageComponent(cleanSrc, cleanAlt);
+        return createFigureComponent(cleanSrc, cleanAlt);
     });
 
     // Transform images with captions (Notion sometimes adds captions as separate text)
     content = content.replace(/!\[([^\]]*)\]\(([^)]+)\)\s*\n\s*([^\n]+)/g, (match, alt, src, caption) => {
         const cleanSrc = cleanSrcPath(src);
-        const cleanAlt = cleanAltText(alt || 'Image');
+        const cleanAlt = cleanAltText(alt || 'Figure');
         const cleanCap = cleanCaption(caption);
         hasImages = true;
 
-        return createImageComponent(cleanSrc, cleanAlt, cleanCap);
+        return createFigureComponent(cleanSrc, cleanAlt, cleanCap);
     });
 
     if (hasImages) {
-        console.log('    ✅ Image components with imports will be created');
+        console.log('    ✅ Figure components with imports will be created');
     }
 
     return content;

app/scripts/notion-importer/notion-converter.mjs

@@ -10,8 +10,8 @@ import { fileURLToPath } from 'url';
 import { postProcessMarkdown } from './post-processor.mjs';
 import { createCustomCodeRenderer } from './custom-code-renderer.mjs';
 
-// Load environment variables from .env file (but don't override existing ones)
-config({ override: false });
+// Load environment variables from .env file
+config();
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);

app/scripts/sync-template.mjs

@@ -0,0 +1,361 @@
+#!/usr/bin/env node
+
+/**
+ * Template synchronization script for research-article-template
+ * 
+ * This script:
+ * 1. Clones or updates the template repo in a temporary directory
+ * 2. Copies all files EXCEPT those in ./src/content which contain specific content
+ * 3. Preserves important local configuration files
+ * 4. Creates backups of files that will be overwritten
+ * 
+ * Usage: npm run sync:template [--dry-run] [--backup] [--force]
+ */
+
+import { execSync } from 'child_process';
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const APP_ROOT = path.resolve(__dirname, '..');
+const PROJECT_ROOT = path.resolve(APP_ROOT, '..');
+const TEMP_DIR = path.join(PROJECT_ROOT, '.temp-template-sync');
+const TEMPLATE_REPO = 'https://huggingface.co/spaces/tfrere/research-article-template';
+
+// Files and directories to PRESERVE (do not overwrite)
+const PRESERVE_PATHS = [
+    // Project-specific content
+    'app/src/content',
+
+    // Public data (symlink to our data) - CRITICAL: preserve this symlink
+    'app/public/data',
+
+    // Local configuration
+    'app/package-lock.json',
+    'app/node_modules',
+
+    // Project-specific scripts (preserve our sync script)
+    'app/scripts/sync-template.mjs',
+
+    // Project configuration files
+    'README.md',
+    'tools',
+
+    // Backup and temporary files
+    '.backup-*',
+    '.temp-*',
+
+    // Git
+    '.git',
+    '.gitignore'
+];
+
+// Files to handle with caution (require confirmation)
+const SENSITIVE_FILES = [
+    'app/package.json',
+    'app/astro.config.mjs',
+    'Dockerfile',
+    'nginx.conf'
+];
+
+const args = process.argv.slice(2);
+const isDryRun = args.includes('--dry-run');
+const shouldBackup = args.includes('--backup'); // Disabled by default, use --backup to enable
+const isForce = args.includes('--force');
+
+console.log('🔄 Template synchronization script for research-article-template');
+console.log(`📁 Working directory: ${PROJECT_ROOT}`);
+console.log(`🎯 Template source: ${TEMPLATE_REPO}`);
+if (isDryRun) console.log('🔍 DRY-RUN mode enabled - no files will be modified');
+if (shouldBackup) console.log('💾 Backup enabled');
+if (!shouldBackup) console.log('🚫 Backup disabled (use --backup to enable)');
+console.log('');
+
+async function executeCommand(command, options = {}) {
+    try {
+        if (isDryRun && !options.allowInDryRun) {
+            console.log(`[DRY-RUN] Command: ${command}`);
+            return '';
+        }
+        console.log(`$ ${command}`);
+        const result = execSync(command, {
+            encoding: 'utf8',
+            cwd: options.cwd || PROJECT_ROOT,
+            stdio: options.quiet ? 'pipe' : 'inherit'
+        });
+        return result;
+    } catch (error) {
+        console.error(`❌ Error during execution: ${command}`);
+        console.error(error.message);
+        throw error;
+    }
+}
+
+async function pathExists(filePath) {
+    try {
+        await fs.access(filePath);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+async function isPathPreserved(relativePath) {
+    return PRESERVE_PATHS.some(preserve =>
+        relativePath === preserve ||
+        relativePath.startsWith(preserve + '/')
+    );
+}
+
+async function createBackup(filePath) {
+    if (!shouldBackup || isDryRun) return;
+
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const backupPath = `${filePath}.backup-${timestamp}`;
+
+    try {
+        await fs.copyFile(filePath, backupPath);
+        console.log(`💾 Backup created: ${path.relative(PROJECT_ROOT, backupPath)}`);
+    } catch (error) {
+        console.warn(`⚠️  Unable to create backup for ${filePath}: ${error.message}`);
+    }
+}
+
+async function syncFile(sourcePath, targetPath) {
+    const relativeTarget = path.relative(PROJECT_ROOT, targetPath);
+
+    // Check if the file should be preserved
+    if (await isPathPreserved(relativeTarget)) {
+        console.log(`🔒 PRESERVED: ${relativeTarget}`);
+        return;
+    }
+
+    // Check if it's a sensitive file
+    if (SENSITIVE_FILES.includes(relativeTarget)) {
+        if (!isForce) {
+            console.log(`⚠️  SENSITIVE (ignored): ${relativeTarget} (use --force to overwrite)`);
+            return;
+        } else {
+            console.log(`⚠️  SENSITIVE (forced): ${relativeTarget}`);
+        }
+    }
+
+    // Check if target file is a symbolic link to preserve
+    if (await pathExists(targetPath)) {
+        try {
+            const targetStats = await fs.lstat(targetPath);
+            if (targetStats.isSymbolicLink()) {
+                console.log(`🔗 SYMLINK TARGET (preserved): ${relativeTarget}`);
+                return;
+            }
+        } catch (error) {
+            console.warn(`⚠️  Impossible de vérifier ${targetPath}: ${error.message}`);
+        }
+    }
+
+    // Create backup if file already exists (and is not a symbolic link)
+    if (await pathExists(targetPath)) {
+        try {
+            const stats = await fs.lstat(targetPath);
+            if (!stats.isSymbolicLink()) {
+                await createBackup(targetPath);
+            }
+        } catch (error) {
+            console.warn(`⚠️  Impossible de vérifier ${targetPath}: ${error.message}`);
+        }
+    }
+
+    if (isDryRun) {
+        console.log(`[DRY-RUN] COPY: ${relativeTarget}`);
+        return;
+    }
+
+    // Assurer que le répertoire parent existe
+    await fs.mkdir(path.dirname(targetPath), { recursive: true });
+
+    // Check if source is a symbolic link
+    try {
+        const sourceStats = await fs.lstat(sourcePath);
+        if (sourceStats.isSymbolicLink()) {
+            console.log(`🔗 SYMLINK SOURCE (ignored): ${relativeTarget}`);
+            return;
+        }
+    } catch (error) {
+        console.warn(`⚠️  Unable to check source ${sourcePath}: ${error.message}`);
+        return;
+    }
+
+    // Remove target file if it exists (to handle symbolic links)
+    if (await pathExists(targetPath)) {
+        await fs.rm(targetPath, { recursive: true, force: true });
+    }
+
+    // Copier le fichier
+    await fs.copyFile(sourcePath, targetPath);
+    console.log(`✅ COPIED: ${relativeTarget}`);
+}
+
+async function syncDirectory(sourceDir, targetDir) {
+    const items = await fs.readdir(sourceDir, { withFileTypes: true });
+
+    for (const item of items) {
+        const sourcePath = path.join(sourceDir, item.name);
+        const targetPath = path.join(targetDir, item.name);
+        const relativeTarget = path.relative(PROJECT_ROOT, targetPath);
+
+        if (await isPathPreserved(relativeTarget)) {
+            console.log(`🔒 DOSSIER PRÉSERVÉ: ${relativeTarget}/`);
+            continue;
+        }
+
+        if (item.isDirectory()) {
+            if (!isDryRun) {
+                await fs.mkdir(targetPath, { recursive: true });
+            }
+            await syncDirectory(sourcePath, targetPath);
+        } else {
+            await syncFile(sourcePath, targetPath);
+        }
+    }
+}
+
+async function cloneOrUpdateTemplate() {
+    console.log('📥 Fetching template...');
+
+    // Nettoyer le dossier temporaire s'il existe
+    if (await pathExists(TEMP_DIR)) {
+        await fs.rm(TEMP_DIR, { recursive: true, force: true });
+        if (isDryRun) {
+            console.log(`[DRY-RUN] Suppression: ${TEMP_DIR}`);
+        }
+    }
+
+    // Clone template repo (even in dry-run to be able to compare)
+    await executeCommand(`git clone ${TEMPLATE_REPO} "${TEMP_DIR}"`, { allowInDryRun: true });
+
+    return TEMP_DIR;
+}
+
+async function ensureDataSymlink() {
+    const dataSymlinkPath = path.join(APP_ROOT, 'public', 'data');
+    const dataSourcePath = path.join(APP_ROOT, 'src', 'content', 'assets', 'data');
+
+    // Check if symlink exists and is correct
+    if (await pathExists(dataSymlinkPath)) {
+        try {
+            const stats = await fs.lstat(dataSymlinkPath);
+            if (stats.isSymbolicLink()) {
+                const target = await fs.readlink(dataSymlinkPath);
+                const expectedTarget = path.relative(path.dirname(dataSymlinkPath), dataSourcePath);
+                if (target === expectedTarget) {
+                    console.log('🔗 Data symlink is correct');
+                    return;
+                } else {
+                    console.log(`⚠️  Data symlink points to wrong target: ${target} (expected: ${expectedTarget})`);
+                }
+            } else {
+                console.log('⚠️  app/public/data exists but is not a symlink');
+            }
+        } catch (error) {
+            console.log(`⚠️  Error checking symlink: ${error.message}`);
+        }
+    }
+
+    // Recreate symlink
+    if (!isDryRun) {
+        if (await pathExists(dataSymlinkPath)) {
+            await fs.rm(dataSymlinkPath, { recursive: true, force: true });
+        }
+        await fs.symlink(path.relative(path.dirname(dataSymlinkPath), dataSourcePath), dataSymlinkPath);
+        console.log('✅ Data symlink recreated');
+    } else {
+        console.log('[DRY-RUN] Would recreate data symlink');
+    }
+}
+
+async function showSummary(templateDir) {
+    console.log('\n📊 SYNCHRONIZATION SUMMARY');
+    console.log('================================');
+
+    console.log('\n🔒 Preserved files/directories:');
+    for (const preserve of PRESERVE_PATHS) {
+        const fullPath = path.join(PROJECT_ROOT, preserve);
+        if (await pathExists(fullPath)) {
+            console.log(`   ✓ ${preserve}`);
+        } else {
+            console.log(`   - ${preserve} (n'existe pas)`);
+        }
+    }
+
+    console.log('\n⚠️  Sensitive files (require --force):');
+    for (const sensitive of SENSITIVE_FILES) {
+        const fullPath = path.join(PROJECT_ROOT, sensitive);
+        if (await pathExists(fullPath)) {
+            console.log(`   ! ${sensitive}`);
+        }
+    }
+
+    if (isDryRun) {
+        console.log('\n🔍 To execute for real: npm run sync:template');
+        console.log('🔧 To force sensitive files: npm run sync:template -- --force');
+    }
+}
+
+async function cleanup() {
+    console.log('\n🧹 Cleaning up...');
+    if (await pathExists(TEMP_DIR)) {
+        if (!isDryRun) {
+            await fs.rm(TEMP_DIR, { recursive: true, force: true });
+        }
+        console.log(`🗑️  Temporary directory removed: ${TEMP_DIR}`);
+    }
+}
+
+async function main() {
+    try {
+        // Verify we're in the correct directory
+        const packageJsonPath = path.join(APP_ROOT, 'package.json');
+        if (!(await pathExists(packageJsonPath))) {
+            throw new Error(`Package.json not found in ${APP_ROOT}. Are you in the correct directory?`);
+        }
+
+        // Clone the template
+        const templateDir = await cloneOrUpdateTemplate();
+
+        // Synchroniser
+        console.log('\n🔄 Synchronisation en cours...');
+        await syncDirectory(templateDir, PROJECT_ROOT);
+
+        // S'assurer que le lien symbolique des données est correct
+        console.log('\n🔗 Vérification du lien symbolique des données...');
+        await ensureDataSymlink();
+
+        // Afficher le résumé
+        await showSummary(templateDir);
+
+        console.log('\n✅ Synchronization completed!');
+
+    } catch (error) {
+        console.error('\n❌ Error during synchronization:');
+        console.error(error.message);
+        process.exit(1);
+    } finally {
+        await cleanup();
+    }
+}
+
+// Signal handling to clean up on interruption
+process.on('SIGINT', async () => {
+    console.log('\n\n⚠️  Interruption detected, cleaning up...');
+    await cleanup();
+    process.exit(1);
+});
+
+process.on('SIGTERM', async () => {
+    console.log('\n\n⚠️  Shutdown requested, cleaning up...');
+    await cleanup();
+    process.exit(1);
+});
+
+main();

app/src/components/Glossary.astro

@@ -0,0 +1,336 @@
+---
+interface Props {
+  /** The word or term to define */
+  term: string;
+  /** The definition of the term */
+  definition: string;
+  /** Optional CSS class to apply to the term */
+  class?: string;
+  /** Optional style to apply to the term */
+  style?: string;
+  /** Tooltip position (top, bottom, left, right) */
+  position?: "top" | "bottom" | "left" | "right";
+  /** Delay before showing tooltip in ms */
+  delay?: number;
+  /** Disable tooltip on mobile */
+  disableOnMobile?: boolean;
+}
+
+const {
+  term,
+  definition,
+  class: className = "",
+  style: inlineStyle = "",
+  position = "top",
+  delay = 300,
+  disableOnMobile = false,
+} = Astro.props as Props;
+
+// Generate a unique ID for this component
+const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
+---
+
+<div class="glossary-container" data-glossary-container-id={tooltipId}>
+  <span
+    class={`glossary-term ${className}`}
+    style={inlineStyle}
+    data-glossary-term={term}
+    data-glossary-definition={definition}
+    data-glossary-position={position}
+    data-glossary-delay={delay}
+    data-glossary-disable-mobile={disableOnMobile}
+    data-glossary-id={tooltipId}
+    tabindex="0"
+    role="button"
+    aria-describedby={`${tooltipId}-tooltip`}
+  >
+    {term}
+  </span>
+
+  <div
+    id={`${tooltipId}-tooltip`}
+    class="glossary-tooltip"
+    data-glossary-tooltip-id={tooltipId}
+    data-position={position}
+    role="tooltip"
+    aria-hidden="true"
+  >
+    <div class="glossary-tooltip__content">
+      <div class="glossary-tooltip__term">{term}</div>
+      <div class="glossary-tooltip__definition">{definition}</div>
+    </div>
+    <div class="glossary-tooltip__arrow"></div>
+  </div>
+</div>
+
+<script is:inline>
+  // Global script for all Glossary tooltips
+  if (!window.glossaryInitialized) {
+    window.glossaryInitialized = true;
+
+    function initAllGlossaryTooltips() {
+      const glossaryTerms = document.querySelectorAll(".glossary-term");
+
+      glossaryTerms.forEach((termElement) => {
+        const tooltipElement =
+          termElement.parentElement.querySelector(".glossary-tooltip");
+
+        if (!tooltipElement) return;
+
+        const term = termElement.getAttribute("data-glossary-term");
+        const definition = termElement.getAttribute("data-glossary-definition");
+
+        if (!term || !definition) return;
+
+        // Fonction pour afficher le tooltip au niveau de la souris
+        const showTooltip = (event) => {
+          tooltipElement.style.display = "block";
+          tooltipElement.style.opacity = "1";
+          tooltipElement.style.position = "fixed";
+          tooltipElement.style.top = event.clientY + 10 + "px";
+          tooltipElement.style.left = event.clientX + 10 + "px";
+          tooltipElement.style.zIndex = "9999";
+          tooltipElement.style.pointerEvents = "none";
+        };
+
+        const hideTooltip = () => {
+          tooltipElement.style.display = "none";
+          tooltipElement.style.opacity = "0";
+        };
+
+        // Add events
+        termElement.addEventListener("mouseenter", showTooltip);
+        termElement.addEventListener("mouseleave", hideTooltip);
+        termElement.addEventListener("mousemove", showTooltip);
+      });
+    }
+
+    // Initialize when DOM is ready
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initAllGlossaryTooltips);
+    } else {
+      initAllGlossaryTooltips();
+    }
+
+    // Observe DOM changes for new elements
+    if (window.MutationObserver) {
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "childList") {
+            mutation.addedNodes.forEach((node) => {
+              if (
+                node.nodeType === 1 &&
+                node.querySelector &&
+                node.querySelector(".glossary-term")
+              ) {
+                initAllGlossaryTooltips();
+              }
+            });
+          }
+        });
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+</script>
+
+<style>
+  /* ============================================================================ */
+  /* Glossary Component */
+  /* ============================================================================ */
+
+  .glossary-container {
+    display: inline;
+    position: relative;
+  }
+
+  .glossary-term {
+    color: var(--primary-color) !important;
+    text-decoration: none !important;
+    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
+    border-bottom: 1px dashed
+      color-mix(in srgb, var(--primary-color) 100%, transparent) !important;
+    cursor: help;
+    transition: all 0.2s ease;
+    border-radius: 3px;
+    margin: 0 2px;
+    padding: 4px 8px;
+  }
+
+  .glossary-term:hover,
+  .glossary-term:focus {
+    color: var(--primary-color-hover) !important;
+    text-decoration: none !important;
+    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
+    outline: none;
+  }
+
+  .glossary-term:focus {
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--primary-color) 20%, transparent);
+  }
+
+  .glossary-tooltip {
+    position: fixed;
+    top: -9999px;
+    left: -9999px;
+    z-index: var(--z-tooltip);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+    pointer-events: none;
+    max-width: 300px;
+    min-width: 200px;
+  }
+
+  .glossary-tooltip.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .glossary-tooltip__content {
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px 16px;
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.12),
+      0 2px 8px rgba(0, 0, 0, 0.06);
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+
+  .glossary-tooltip__term {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--primary-color);
+    margin-bottom: 4px;
+    line-height: 1.3;
+  }
+
+  .glossary-tooltip__definition {
+    font-size: 13px;
+    color: var(--text-color);
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  .glossary-tooltip__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+  }
+
+  /* Arrow positioning */
+  .glossary-tooltip[data-position="top"] .glossary-tooltip__arrow {
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="top"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -7px;
+    left: -6px;
+    border: 6px solid transparent;
+    border-top-color: var(--surface-bg);
+  }
+
+  .glossary-tooltip[data-position="bottom"] .glossary-tooltip__arrow {
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="bottom"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: -6px;
+    border: 6px solid transparent;
+    border-bottom-color: var(--surface-bg);
+  }
+
+  .glossary-tooltip[data-position="left"] .glossary-tooltip__arrow {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="left"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: -7px;
+    border: 6px solid transparent;
+    border-left-color: var(--surface-bg);
+  }
+
+  .glossary-tooltip[data-position="right"] .glossary-tooltip__arrow {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-right-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="right"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: -5px;
+    border: 6px solid transparent;
+    border-right-color: var(--surface-bg);
+  }
+
+  /* Mode sombre */
+  [data-theme="dark"] .glossary-tooltip__content {
+    background: var(--surface-bg);
+    border-color: var(--border-color);
+  }
+
+  [data-theme="dark"] .glossary-tooltip__term {
+    color: var(--primary-color);
+  }
+
+  [data-theme="dark"] .glossary-tooltip__definition {
+    color: var(--text-color);
+  }
+
+  /* Responsive - hide on mobile if disabled */
+  @media (max-width: 768px) {
+    .glossary-term[data-glossary-disable-mobile="true"] {
+      border-bottom: none;
+      color: inherit;
+      cursor: default;
+    }
+
+    .glossary-term[data-glossary-disable-mobile="true"]:hover,
+    .glossary-term[data-glossary-disable-mobile="true"]:focus {
+      background: none;
+      color: inherit;
+      border-bottom: none;
+    }
+  }
+
+  /* Accessibility improvement */
+  @media (prefers-reduced-motion: reduce) {
+    .glossary-tooltip {
+      transition: none;
+    }
+
+    .glossary-term {
+      transition: none;
+    }
+  }
+</style>

app/src/components/Hero.astro

@@ -12,6 +12,7 @@ interface Props {
   affiliation?: string; // legacy single affiliation
   published?: string;
   doi?: string;
+  pdfProOnly?: boolean; // Gate PDF download to Pro users only
 }
 
 const {
@@ -23,6 +24,7 @@ const {
   affiliation,
   published,
   doi,
+  pdfProOnly = false,
 } = Astro.props as Props;
 
 type Author = { name: string; url?: string; affiliationIndices?: number[] };
@@ -111,12 +113,11 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
                 shouldShowAffiliationSupers &&
                 Array.isArray(a.affiliationIndices) &&
                 a.affiliationIndices.length ? (
-                  <sup>{a.affiliationIndices.join(",")}</sup>
+                  <sup>{a.affiliationIndices.join(", ")}</sup>
                 ) : null;
               return (
                 <li>
-                  {a.url ? <a href={a.url}>{a.name}</a> : a.name}
-                  {supers}
+                  {a.url ? <a href={a.url}>{a.name}</a> : a.name}{supers}{i < normalizedAuthors.length - 1 && <span set:html=",&nbsp;" />}
                 </li>
               );
             })}
@@ -126,7 +127,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     }
     {
       Array.isArray(affiliations) && affiliations.length > 0 && (
-        <div class="meta-container-cell">
+        <div class="meta-container-cell meta-container-cell--affiliations">
           <h3>Affiliation{affiliations.length > 1 ? "s" : ""}</h3>
           {hasMultipleAffiliations ? (
             <ol class="affiliations">
@@ -162,7 +163,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     }
     {
       (!affiliations || affiliations.length === 0) && affiliation && (
-        <div class="meta-container-cell">
+        <div class="meta-container-cell meta-container-cell--affiliations">
           <h3>Affiliation</h3>
           <p>{affiliation}</p>
         </div>
@@ -183,26 +184,170 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
       </div>
     )} -->
     <div class="meta-container-cell meta-container-cell--pdf">
-      <h3>PDF</h3>
-      <p>
-        <a
-          class="button"
-          href={`/${pdfFilename}`}
-          download={pdfFilename}
-          aria-label={`Download PDF ${pdfFilename}`}
-        >
-          Download PDF
-        </a>
-      </p>
+      <div class="pdf-header-wrapper">
+        <h3>PDF</h3>
+        <span class="pro-badge-wrapper" style="display: none;">
+          <span class="pro-badge-prefix">- you are</span>
+          <span class="pro-badge">PRO</span>
+        </span>
+        <span class="pro-only-label" style="display: none;">
+          <span class="pro-only-dash">-</span>
+          <span class="pro-only-text">pro only</span>
+          <svg class="pro-only-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+          </svg>
+        </span>
+      </div>
+      <div id="pdf-download-container" data-pdf-pro-only={pdfProOnly.toString()}>
+        <p class="pdf-loading">Checking access...</p>
+        <p class="pdf-pro-only" style="display: none;">
+          <a
+            class="button"
+            href={`/${pdfFilename}`}
+            download={pdfFilename}
+            aria-label={`Download PDF ${pdfFilename}`}
+          >
+            Download PDF
+          </a>
+        </p>
+        <div class="pdf-locked" style="display: none;">
+          <a 
+            class="button button-locked" 
+            href="https://huggingface.co/subscribe/pro"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 12 12" fill="none">
+              <path d="M6.48 1.26c0 1.55.67 2.58 1.5 3.24.86.68 1.9 1 2.58 1.07v.86A5.3 5.3 0 0 0 7.99 7.5a3.95 3.95 0 0 0-1.51 3.24h-.96c0-1.55-.67-2.58-1.5-3.24a5.3 5.3 0 0 0-2.58-1.07v-.86A5.3 5.3 0 0 0 4.01 4.5a3.95 3.95 0 0 0 1.51-3.24h.96Z" fill="currentColor"></path>
+            </svg>
+            <span class="locked-title">Subscribe to Pro</span>
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </header>
 
+<script>
+  // PDF access control for Pro users only
+  
+  // ⚙️ Configuration for local development
+  const LOCAL_IS_PRO = false; // Set to true to test Pro access locally
+  
+  const FALLBACK_TIMEOUT_MS = 3000;
+  let userPlanChecked = false;
+
+  // Check if PDF Pro gating is enabled
+  const pdfContainer = document.querySelector("#pdf-download-container") as HTMLElement;
+  const pdfProOnly = pdfContainer?.getAttribute("data-pdf-pro-only") === "true";
+
+  /**
+   * Check if user has Pro access
+   * Isolated logic for Pro user verification
+   * Expected plan structure: { user: "pro", org: "enterprise" }
+   */
+  function isProUser(plan: any): boolean {
+    if (!plan) return false;
+    
+    // Check if user property is "pro"
+    return plan.user === "pro";
+  }
+
+  /**
+   * Update UI based on user's Pro status
+   */
+  function updatePdfAccess(isPro: boolean) {
+    const loadingEl = document.querySelector(".pdf-loading") as HTMLElement;
+    const proOnlyEl = document.querySelector(".pdf-pro-only") as HTMLElement;
+    const lockedEl = document.querySelector(".pdf-locked") as HTMLElement;
+    const proOnlyLabel = document.querySelector(".pro-only-label") as HTMLElement;
+    const proBadgeWrapper = document.querySelector(".pro-badge-wrapper") as HTMLElement;
+    
+    // Hide loading state
+    if (loadingEl) loadingEl.style.display = "none";
+    
+    // If PDF Pro gating is disabled, just show the download button
+    if (!pdfProOnly) {
+      if (proOnlyEl) proOnlyEl.style.display = "block";
+      if (proOnlyLabel) proOnlyLabel.style.display = "none";
+      if (lockedEl) lockedEl.style.display = "none";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "none";
+      return;
+    }
+    
+    // Show appropriate state based on Pro status
+    if (isPro) {
+      if (proOnlyEl) proOnlyEl.style.display = "block";
+      if (proOnlyLabel) proOnlyLabel.style.display = "none";
+      if (lockedEl) lockedEl.style.display = "none";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "inline-flex";
+    } else {
+      if (proOnlyEl) proOnlyEl.style.display = "none";
+      if (proOnlyLabel) proOnlyLabel.style.display = "inline-flex";
+      if (lockedEl) lockedEl.style.display = "block";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "none";
+    }
+  }
+
+  /**
+   * Handle user plan response
+   */
+  function handleUserPlan(plan: any) {
+    userPlanChecked = true;
+    const isPro = isProUser(plan);
+    updatePdfAccess(isPro);
+    
+    // Optional: log for debugging
+    console.log("[PDF Access]", { plan, isPro });
+  }
+
+  /**
+   * Fallback behavior when no parent window responds
+   * Uses LOCAL_IS_PRO configuration for local development
+   */
+  function handleFallback() {
+    if (LOCAL_IS_PRO) {
+      handleUserPlan({ user: "pro" });
+    } else {
+      handleUserPlan({ user: "free" });
+    }
+  }
+
+  // If PDF Pro gating is disabled, show the download button immediately
+  if (!pdfProOnly) {
+    updatePdfAccess(true);
+  } else {
+    // Listen for messages from parent window (Hugging Face Spaces)
+    window.addEventListener("message", (event) => {
+      if (event.data.type === "USER_PLAN") {
+        handleUserPlan(event.data.plan);
+      }
+    });
+
+    // Request user plan on page load
+    if (window.parent && window.parent !== window) {
+      // We're in an iframe, request user plan
+      window.parent.postMessage({ type: "USER_PLAN_REQUEST" }, "*");
+      
+      // Fallback if no response after timeout
+      setTimeout(() => {
+        if (!userPlanChecked) {
+          handleFallback();
+        }
+      }, FALLBACK_TIMEOUT_MS);
+    } else {
+      // Not in iframe (local development), use fallback immediately
+      handleFallback();
+    }
+  }
+</script>
+
 <style>
   /* Hero (full-width) */
   .hero {
     width: 100%;
-    padding: 48px 16px 48px;
+    padding: 48px 16px 16px;
     text-align: center;
   }
   .hero-title {
@@ -259,6 +404,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     display: flex;
     flex-direction: column;
     gap: 8px;
+    max-width: 250px;
   }
   .meta-container-cell h3 {
     margin: 0;
@@ -275,6 +421,12 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     margin: 0;
     list-style-type: none;
     padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .authors li {
+    white-space: nowrap;
+    padding:0;
   }
   .affiliations {
     margin: 0;
@@ -289,9 +441,152 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     row-gap: 12px;
   }
 
+  @media (max-width: 768px) {
+    .meta-container-cell--affiliations,
+    .meta-container-cell--pdf {
+      text-align: right;
+    }
+  }
+
   @media print {
     .meta-container-cell--pdf {
       display: none !important;
     }
   }
+
+  /* PDF access control styles */
+  .pdf-header-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 1;
+  }
+
+  .pdf-header-wrapper h3 {
+    line-height: 1;
+  }
+
+  .pdf-loading {
+    color: var(--muted-color);
+    font-size: 0.9em;
+  }
+
+  .pdf-pro-only {
+    margin: 0;
+  }
+
+  .pro-badge-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-style: normal;
+  }
+
+  .pro-badge-prefix {
+    font-size: 0.85em;
+    opacity: 0.5;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  .pro-badge {
+    display: inline-block;
+    border: 1px solid rgba(0, 0, 0, 0.025);
+    background: linear-gradient(to bottom right, #f9a8d4, #86efac, #fde047);
+    color: black;
+    padding: 1px 5px;
+    border-radius: 3px;
+    font-size: 0.5rem;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+  }
+
+  /* Dark mode pro badge */
+  :global(.dark) .pro-badge,
+  :global([data-theme="dark"]) .pro-badge {
+    background: linear-gradient(to bottom right, #ec4899, #22c55e, #eab308);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .pro-only-label {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.85em;
+    opacity: 0.5;
+    font-weight: 400;
+    line-height: 1;
+  }
+
+  .pro-only-dash {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .pro-only-icon {
+    width: 11px;
+    height: 11px;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .pro-only-text {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .pdf-locked {
+    display: block;
+  }
+
+  .button-locked {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: linear-gradient(135deg, 
+                  var(--primary-color) 0%, 
+                  oklch(from var(--primary-color) calc(l - 0.1) calc(c + 0.05) calc(h - 60)) 100%);
+    border-radius: var(--button-radius);
+    padding: var(--button-padding-y) var(--button-padding-x);
+    font-size: var(--button-font-size);
+    line-height: 1;
+    color: var(--on-primary);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: normal;
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
+  .button-locked:active {
+    transform: translateY(0);
+  }
+
+  .lock-icon {
+    font-size: 1em;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .locked-title {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Dark mode locked button - inherits from light mode variables */
+
+  @media (max-width: 768px) {
+    .meta-container-cell--pdf {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+  }
 </style>

app/src/components/HtmlEmbed.astro

@@ -20,12 +20,15 @@ const html = resolveFragment(src);
 const mountId = `frag-${Math.random().toString(36).slice(2)}`;
 const dataAttr = Array.isArray(data) ? JSON.stringify(data) : (typeof data === 'string' ? data : undefined);
 const configAttr = typeof config === 'string' ? config : (config != null ? JSON.stringify(config) : undefined);
+
+// Apply the ID to the HTML content if provided
+const htmlWithId = id && html ? html.replace(/<div class="([^"]*)"[^>]*>/, `<div class="$1" id="${id}">`) : html;
 ---
 { html ? (
   <figure class="html-embed" id={id}>
     {title && <figcaption class="html-embed__title" style={`text-align:${align}`}>{title}</figcaption>}
     <div class={`html-embed__card${frameless ? ' is-frameless' : ''}`}>
-      <div id={mountId} data-datafiles={dataAttr} data-config={configAttr} set:html={html} />
+      <div id={mountId} data-datafiles={dataAttr} data-config={configAttr} set:html={htmlWithId} />
     </div>
     {desc && <figcaption class="html-embed__desc" style={`text-align:${align}`} set:html={desc}></figcaption>}
   </figure>
@@ -70,7 +73,6 @@ const configAttr = typeof config === 'string' ? config : (config != null ? JSON.
   .html-embed { margin: 0 0 var(--block-spacing-y);
     z-index: var(--z-elevated);
     position: relative;
-  
   }
   .html-embed__title { 
     text-align: left; 
@@ -83,12 +85,14 @@ const configAttr = typeof config === 'string' ? config : (config != null ? JSON.
     position: relative;
     display: block;
     width: 100%;
+    background: var(--page-bg);
+    z-index: var(--z-elevated);
   }
   .html-embed__card {
     background: var(--code-bg);
     border: 1px solid var(--border-color);
     border-radius: 10px;
-    padding: 8px;
+    padding: 24px;
     z-index: calc(var(--z-elevated) + 1);
     position: relative;
   }
@@ -108,6 +112,7 @@ const configAttr = typeof config === 'string' ? config : (config != null ? JSON.
     z-index: var(--z-elevated);
     display: block;
     width: 100%;
+    background: var(--page-bg);
   }
   /* Plotly – fragments & controls */
   .html-embed__card svg text { fill: var(--text-color); }

app/src/components/Image.astro

@@ -0,0 +1,508 @@
+---
+// @ts-ignore - types provided by Astro at runtime
+import { Image as AstroImage } from "astro:assets";
+
+interface Props {
+  /** Source image imported via astro:assets */
+  src: any;
+  /** Alt text for accessibility */
+  alt: string;
+  /** Optional HTML string caption (use slot caption for rich content) */
+  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;
+  /** Optional link that wraps the image (not the caption) */
+  linkHref?: string;
+  /** Optional target for the link (default: _blank when linkHref provided) */
+  linkTarget?: string;
+  /** Optional rel for the link (default: noopener noreferrer when linkHref provided) */
+  linkRel?: string;
+  /** Make the image span full width */
+  fullWidth?: boolean;
+  /** Any additional attributes should be forwarded to the underlying <AstroImage> */
+  [key: string]: any;
+}
+
+const {
+  caption,
+  figureClass,
+  zoomable,
+  downloadable,
+  downloadName,
+  downloadSrc,
+  linkHref,
+  linkTarget,
+  linkRel,
+  fullWidth,
+  ...imgProps
+} = Astro.props as Props;
+const hasCaptionSlot = Astro.slots.has("caption");
+const hasCaption =
+  hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
+const hasTitle = Astro.slots.has("title");
+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;
+const hasLink = typeof linkHref === "string" && linkHref.length > 0;
+const resolvedTarget = hasLink ? linkTarget || "_blank" : undefined;
+const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
+---
+
+<div
+  class={`ri-root`}
+  data-ri-root={uid}
+  data-has-title={hasTitle}
+  data-has-caption={hasCaption}
+>
+  {
+    hasCaption ? (
+      <figure
+        class={(figureClass || "") + (dataDownloadable ? " has-dl-btn" : "")}
+      >
+        {dataDownloadable ? (
+          <span class="img-dl-wrap">
+            {hasLink ? (
+              <a
+                class="ri-link"
+                href={linkHref}
+                target={resolvedTarget}
+                rel={resolvedRel}
+              >
+                <AstroImage
+                  {...imgProps}
+                  data-zoomable={dataZoomable}
+                  data-downloadable={dataDownloadable}
+                  data-download-name={downloadName}
+                  data-download-src={downloadSrc}
+                />
+              </a>
+            ) : (
+              <AstroImage
+                {...imgProps}
+                data-zoomable={dataZoomable}
+                data-downloadable={dataDownloadable}
+                data-download-name={downloadName}
+                data-download-src={downloadSrc}
+              />
+            )}
+            <button
+              type="button"
+              class="button 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>
+        ) : hasLink ? (
+          <a
+            class="ri-link"
+            href={linkHref}
+            target={resolvedTarget}
+            rel={resolvedRel}
+          >
+            <AstroImage {...imgProps} data-zoomable={dataZoomable} />
+          </a>
+        ) : (
+          <AstroImage {...imgProps} data-zoomable={dataZoomable} />
+        )}
+        <figcaption>
+          {hasCaptionSlot ? (
+            <slot name="caption" />
+          ) : (
+            caption && <span set:html={caption} />
+          )}
+        </figcaption>
+      </figure>
+    ) : dataDownloadable ? (
+      <span class="img-dl-wrap">
+        {hasLink ? (
+          <a
+            class="ri-link"
+            href={linkHref}
+            target={resolvedTarget}
+            rel={resolvedRel}
+          >
+            <AstroImage
+              {...imgProps}
+              data-zoomable={dataZoomable}
+              data-downloadable={dataDownloadable}
+              data-download-name={downloadName}
+              data-download-src={downloadSrc}
+            />
+          </a>
+        ) : (
+          <AstroImage
+            {...imgProps}
+            data-zoomable={dataZoomable}
+            data-downloadable={dataDownloadable}
+            data-download-name={downloadName}
+            data-download-src={downloadSrc}
+          />
+        )}
+        <button
+          type="button"
+          class="button 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>
+    ) : hasLink ? (
+      <a
+        class="ri-link"
+        href={linkHref}
+        target={resolvedTarget}
+        rel={resolvedRel}
+      >
+        <AstroImage
+          {...imgProps}
+          data-zoomable={dataZoomable}
+          class={fullWidth ? "full" : ""}
+        />
+      </a>
+    ) : (
+      <AstroImage
+        {...imgProps}
+        data-zoomable={dataZoomable}
+        class={fullWidth ? "full" : ""}
+      />
+    )
+  }
+</div>
+
+<script is:inline>
+  (() => {
+    const scriptEl = document.currentScript;
+    const root = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!root) {
+      console.log("Figure script: No root element found, exiting");
+      return;
+    }
+    const img =
+      root.tagName === "IMG"
+        ? root
+        : root.querySelector
+          ? root.querySelector("img")
+          : null;
+    if (!img) {
+      console.log("Figure script: No img element found, exiting");
+      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"],
+        });
+      });
+    };
+
+    // Global zoom management to hide other Figures
+    const setupGlobalZoomBehavior = () => {
+      img.addEventListener("click", () => {
+        if (img.getAttribute("data-zoomable") === "1") {
+          // Enlever zoom-active de tous les autres ri-root
+          document
+            .querySelectorAll(".ri-root.zoom-active")
+            .forEach((el) => el.classList.remove("zoom-active"));
+
+          // Add zoom-active to this ri-root
+          root.classList.add("zoom-active");
+        }
+      });
+    };
+
+    // 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 {}
+      });
+    }
+
+    // Setup comportement zoom
+    setupGlobalZoomBehavior();
+
+    if (document.readyState === "complete") initZoomIfNeeded();
+    else window.addEventListener("load", initZoomIfNeeded, { once: true });
+  })();
+</script>
+
+<style>
+  figure {
+    margin: var(--block-spacing-y) 0;
+  }
+  figcaption {
+    text-align: left;
+    font-size: 0.9rem;
+    color: var(--muted-color);
+    margin-top: 6px;
+  }
+  figcaption {
+    background: var(--page-bg);
+    position: relative;
+    z-index: var(--z-elevated);
+    display: block;
+    width: 100%;
+  }
+  .image-credit {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--muted-color);
+  }
+  .image-credit a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Zoomable overlay container (if used by any lightbox implementation) */
+  [data-zoom-overlay],
+  .zoom-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+  }
+
+  /* Download link inside figures */
+  figure .download-link {
+    position: relative;
+    z-index: var(--z-elevated);
+  }
+
+  /* Opt-in zoomable images */
+  img[data-zoomable] {
+    cursor: zoom-in;
+  }
+  .medium-zoom--opened img[data-zoomable] {
+    cursor: zoom-out;
+  }
+
+  /* Download button for img[data-downloadable] */
+  figure.has-dl-btn {
+    position: relative;
+  }
+  .dl-host {
+    position: relative;
+  }
+  .img-dl-wrap {
+    position: relative;
+    display: inline-block;
+  }
+  .img-dl-btn {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 6px;
+    color: white;
+    text-decoration: none;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    z-index: var(--z-elevated);
+    display: none;
+    background: var(--primary-color);
+  }
+
+  /* When an image is zoomed, hide ALL Figures on the page */
+  :global(.medium-zoom--opened) .ri-root {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+  }
+
+  /* The currently zoomed image remains visible */
+  :global(.medium-zoom--opened) .ri-root:has(.medium-zoom--opened) {
+    opacity: 1;
+    z-index: var(--z-overlay);
+  }
+
+  /* Fallback for browsers without :has() support */
+  :global(.medium-zoom--opened) .ri-root.zoom-active {
+    opacity: 1 !important;
+    z-index: var(--z-overlay) !important;
+  }
+
+  /* Specifically hide download button and figcaption during zoom */
+  :global(.medium-zoom--opened) .img-dl-btn {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+  }
+
+  :global(.medium-zoom--opened) figcaption {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+  }
+
+  /* Even for active zoomed image, hide button and caption for clean experience */
+  :global(.medium-zoom--opened) .ri-root.zoom-active .img-dl-btn {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+  }
+
+  :global(.medium-zoom--opened) .ri-root.zoom-active figcaption {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+  }
+  .img-dl-btn svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+  }
+  .img-dl-wrap:hover .img-dl-btn {
+    display: inline-flex;
+  }
+  .img-dl-btn:hover {
+    background: var(--primary-color-hover);
+  }
+
+  [data-theme="dark"] .img-dl-btn {
+    background: var(--primary-color);
+    color: var(--on-primary);
+    border-color: var(--primary-color);
+  }
+  [data-theme="dark"] .img-dl-btn:hover {
+    background: var(--primary-color-hover);
+  }
+
+  /* Conditional margins based on title and caption presence */
+  .ri-root:not([data-has-title="true"]) {
+    margin-top: 20px;
+  }
+
+  .ri-root:not([data-has-caption="true"]) {
+    margin-bottom: 20px;
+  }
+
+  /* full image styles */
+  img.full {
+    width: 100% !important;
+    min-width: 100%;
+    max-width: 100%;
+  }
+</style>

app/src/components/Quote.astro

@@ -0,0 +1,124 @@
+---
+interface Props {
+    source?: string;
+}
+
+const { source } = Astro.props;
+---
+
+<blockquote class="quote">
+    <div class="quote__text">
+        <slot />
+    </div>
+    {
+        source && (
+            <footer class="quote__footer">
+                <span class="quote__source" set:html={source} />
+            </footer>
+        )
+    }
+</blockquote>
+
+<style>
+    .quote {
+        font-family: var(--default-font-family);
+        margin: 32px 0;
+        max-width: 600px;
+        text-align: left;
+        position: relative;
+        padding: 0;
+        border: none;
+        background: none;
+        box-shadow: none;
+        white-space: normal;
+    }
+
+    .quote::before {
+        content: '"';
+        position: absolute;
+        top: -24px;
+        left: -30px;
+        font-size: 8rem;
+        font-family: var(--default-font-family);
+        font-weight: 400;
+        color: var(--text-color);
+        opacity: 0.05;
+        z-index: -1;
+        line-height: 1;
+        pointer-events: none;
+    }
+
+    .quote__text {
+        font-size: 1.5rem;
+        line-height: 1.4;
+        font-style: normal;
+        font-weight: 400;
+        font-family:
+            "SF Pro Text",
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            sans-serif;
+        color: var(--text-color);
+        margin-bottom: 12px;
+        padding: 0;
+        letter-spacing: -0.01em;
+    }
+
+    .quote__text p {
+        margin: 0;
+    }
+
+    .quote__footer {
+        font-size: 0.875rem;
+        color: var(--muted-color);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 6px;
+        margin-top: 0;
+        font-family:
+            "SF Pro Text",
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            sans-serif;
+    }
+
+    .quote__source {
+        font-weight: 500;
+        opacity: 0.85;
+        font-style: italic;
+        color: var(--text-color);
+    }
+
+    .quote__source::before {
+        content: "— ";
+        font-style: normal;
+    }
+
+    @media (max-width: 640px) {
+        .quote {
+            margin: 24px 0;
+            max-width: 100%;
+        }
+
+        .quote::before {
+            font-size: 6rem;
+            top: -18px;
+            left: -16px;
+        }
+
+        .quote__text {
+            font-size: 1.25rem;
+            line-height: 1.45;
+            padding: 0;
+        }
+
+        .quote__footer {
+            flex-direction: row;
+            gap: 6px;
+            font-size: 0.8rem;
+        }
+    }
+</style>

app/src/components/Reference.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+    /** ID unique pour la référence */
+    id: string;
+    /** Légende HTML pour la référence */
+    caption: string;
+}
+
+const { id, caption } = Astro.props as Props;
+---
+
+<div class="reference-wrapper" id={id}>
+    <figure class="reference">
+        <div class="reference__content">
+            <slot />
+        </div>
+        <figcaption class="reference__caption" set:html={caption} />
+    </figure>
+</div>
+
+<style>
+    .reference-wrapper {
+        margin: var(--block-spacing-y) 0;
+    }
+
+    .reference {
+        margin: 0;
+    }
+
+    .reference__content {
+        /* Le contenu peut être n'importe quoi */
+    }
+
+    .reference__caption {
+        text-align: left;
+        font-size: 0.9rem;
+        color: var(--muted-color);
+        margin-top: 6px;
+        background: var(--page-bg);
+        position: relative;
+        z-index: var(--z-elevated);
+        display: block;
+        width: 100%;
+    }
+</style>

app/src/components/Sidenote.astro

@@ -1,37 +1,99 @@
 ---
+
 ---
-<div class="aside">
-  <div class="aside__main">
+
+<div class="sidenote-container">
+  <aside class="sidenote">
     <slot />
-  </div>
-  <aside class="aside__aside">
-    <slot name="aside" />
   </aside>
 </div>
 
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const containers = document.querySelectorAll(".sidenote-container");
+
+    containers.forEach((container) => {
+      // Find the previous element (sibling just before)
+      const previousElement = container.previousElementSibling as HTMLElement;
+
+      if (previousElement && previousElement.parentNode) {
+        // Create a wrapper div that will contain both the previous element and the sidenote
+        const wrapper = document.createElement("div");
+        wrapper.className = "sidenote-wrapper";
+
+        // Insert the wrapper before the previous element
+        previousElement.parentNode.insertBefore(wrapper, previousElement);
+
+        // Move both the previous element and the sidenote container into the wrapper
+        wrapper.appendChild(previousElement);
+        wrapper.appendChild(container);
+
+        // Style the wrapper to create the layout
+        wrapper.style.position = "relative";
+        wrapper.style.display = "block";
+
+        // Style the sidenote container so it positions correctly
+        const sidenoteContainer = container as HTMLElement;
+        sidenoteContainer.style.position = "absolute";
+        sidenoteContainer.style.top = "0";
+        sidenoteContainer.style.right = "-292px"; // 260px width + 32px gap
+        sidenoteContainer.style.width = "260px";
+
+        // Display the container with a fade-in
+        sidenoteContainer.style.display = "block";
+        sidenoteContainer.style.opacity = "0";
+
+        // Fade-in with transition
+        setTimeout(() => {
+          sidenoteContainer.style.opacity = "1";
+        }, 10);
+      }
+    });
+  });
+</script>
 
 <style is:global>
-  .aside {
+  .sidenote-wrapper {
+    /* Le wrapper contient l'élément original et le sidenote */
     position: relative;
-    margin: 12px 0;
+    display: block;
+  }
+
+  .sidenote-container {
+    /* Caché par défaut, sera affiché par JS */
+    display: none;
+    margin: 0;
+    /* Transition for fade-in */
+    transition: opacity 0.3s ease-in-out;
   }
 
-  .aside__aside {
-    position: absolute;
-    top: 0;
-    right: -260px; /* push into the right grid column (width 260 + gap 32) */
-    width: 260px;
+  .sidenote {
     border-radius: 8px;
     padding: 0 30px;
     font-size: 0.9rem;
     color: var(--muted-color);
+    margin: 0;
   }
 
   @media (--bp-content-collapse) {
-    .aside__aside {
-      position: static;
-      width: auto;
+    .sidenote-wrapper {
+      /* Sur mobile, le wrapper n'a pas besoin de position relative */
+      position: static !important;
+    }
+
+    .sidenote-container {
+      position: static !important;
+      width: auto !important;
+      right: auto !important;
+      top: auto !important;
       margin-top: 8px;
+      /* Affichage normal sur mobile */
+      display: block !important;
+      opacity: 1 !important;
+    }
+
+    .sidenote {
+      padding: 0;
     }
   }
 </style>

app/src/components/Stack.astro

@@ -0,0 +1,161 @@
+---
+interface Props {
+    /** Layout mode: number of columns or 'auto' for responsive */
+    layout?: "2-column" | "3-column" | "4-column" | "auto";
+    /** Gap between items - can be a predefined size or custom value (e.g., "2rem", "20px", "1.5em") */
+    gap?: "small" | "medium" | "large" | string;
+    /** Optional class to apply on the wrapper */
+    class?: string;
+    /** Optional ID for the stack */
+    id?: string;
+}
+
+const {
+    layout = "2-column",
+    gap = "medium",
+    class: className,
+    id,
+} = Astro.props as Props;
+
+// Generate flex properties based on layout
+const getFlexProperties = () => {
+    switch (layout) {
+        case "2-column":
+            return { flexBasis: "50%", maxWidth: "50%" };
+        case "3-column":
+            return { flexBasis: "33.333%", maxWidth: "33.333%" };
+        case "4-column":
+            return { flexBasis: "25%", maxWidth: "25%" };
+        case "auto":
+            return { flexBasis: "auto", maxWidth: "none" };
+        default:
+            // By default, all children on one line with equal width
+            return { flexBasis: "auto", maxWidth: "none" };
+    }
+};
+
+const getGapSize = () => {
+    // If it's a predefined size, return the corresponding value
+    switch (gap) {
+        case "small":
+            return "0.5rem";
+        case "medium":
+            return "1rem";
+        case "large":
+            return "1.5rem";
+        default:
+            // If it's a custom value, return it as-is (e.g., "2rem", "20px", "1.5em")
+            return gap;
+    }
+};
+
+const flexProps = getFlexProperties();
+const gapSize = getGapSize();
+---
+
+<div
+    class={`stack ${className || ""}`}
+    data-layout={layout}
+    data-gap={gap}
+    {id}
+    style={`gap: ${gapSize}`}
+>
+    <slot />
+</div>
+
+<style>
+    .stack {
+        display: grid;
+        gap: 1rem;
+        margin: var(--block-spacing-y) 0;
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    /* Layout configurations */
+    .stack[data-layout="2-column"] {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .stack[data-layout="3-column"] {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .stack[data-layout="4-column"] {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .stack[data-layout="auto"] {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
+
+    /* Default layout (2-column) */
+    .stack:not([data-layout]) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    /* Ensure child elements don't overflow */
+    .stack :global(> *) {
+        min-width: 0 !important;
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+        word-wrap: break-word !important;
+        overflow-wrap: break-word !important;
+        overflow: hidden !important;
+    }
+
+    /* Handle code blocks inside stack */
+    .stack pre {
+        overflow-x: auto;
+        max-width: 100%;
+        width: 100%;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        box-sizing: border-box;
+        min-width: 0 !important;
+    }
+
+    .stack code {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        max-width: 100%;
+        box-sizing: border-box;
+        min-width: 0 !important;
+    }
+
+    /* Override the min-width: 100% from _code.css */
+    .stack pre code {
+        min-width: 0 !important;
+    }
+
+    /* Override section.content-grid pre code min-width rule */
+    .stack section.content-grid pre code {
+        min-width: 0 !important;
+    }
+
+    /* Responsive behavior */
+    @media (max-width: 768px) {
+        .stack[data-layout="3-column"],
+        .stack[data-layout="4-column"],
+        .stack[data-layout="2-column"],
+        .stack[data-layout="auto"],
+        .stack:not([data-layout]) {
+            grid-template-columns: 1fr !important;
+        }
+    }
+
+    @media (min-width: 769px) and (max-width: 1100px) {
+        .stack[data-layout="3-column"],
+        .stack[data-layout="4-column"],
+        .stack[data-layout="auto"] {
+            grid-template-columns: repeat(2, 1fr) !important;
+        }
+    }
+
+    @media (min-width: 1101px) and (max-width: 1400px) {
+        .stack[data-layout="4-column"] {
+            grid-template-columns: repeat(2, 1fr) !important;
+        }
+    }
+</style>

app/src/components/demo/ColorPicker.astro

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

app/src/components/demo/Palettes.astro

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

app/src/components/trackio/Trackio.svelte

@@ -1,14 +1,20 @@
 <script>
-  import * as d3 from 'd3';
-  import { formatAbbrev, smoothMetricData } from './core/chart-utils.js';
-  import { generateRunNames, genCurves, Random, Performance, generateMassiveTestDataset } from './core/data-generator.js';
-  import Legend from './components/Legend.svelte';
-  import Cell from './components/Cell.svelte';
-  import FullscreenModal from './components/FullscreenModal.svelte';
-  import { onMount, onDestroy } from 'svelte';
-  import { jitterTrigger } from './core/store.js';
-
-  export let variant = 'classic'; // 'classic' | 'oblivion'
+  import * as d3 from "d3";
+  import { formatAbbrev, smoothMetricData } from "./core/chart-utils.js";
+  import {
+    generateRunNames,
+    genCurves,
+    Random,
+    Performance,
+    generateMassiveTestDataset,
+  } from "./core/data-generator.js";
+  import Legend from "./components/Legend.svelte";
+  import Cell from "./components/Cell.svelte";
+  import FullscreenModal from "./components/FullscreenModal.svelte";
+  import { onMount, onDestroy } from "svelte";
+  import { jitterTrigger } from "./core/store.js";
+
+  export let variant = "classic"; // 'classic' | 'oblivion'
   export let normalizeLoss = true;
   export let logScaleX = false;
   export let smoothing = false;
@@ -17,99 +23,143 @@
   let gridEl;
   let legendItems = [];
   const cellsDef = [
-    { metric:'epoch', title:'Epoch' },
-    { metric:'train_accuracy', title:'Train accuracy' },
-    { metric:'train_loss', title:'Train loss' },
-    { metric:'val_accuracy', title:'Val accuracy' },
-    { metric:'val_loss', title:'Val loss', wide:true }
+    { metric: "epoch", title: "Epoch" },
+    { metric: "train_accuracy", title: "Train accuracy" },
+    { metric: "train_loss", title: "Train loss" },
+    { metric: "val_accuracy", title: "Val accuracy" },
+    { metric: "val_loss", title: "Val loss", wide: true },
   ];
   let preparedData = {};
   let colorsByRun = {};
-  
+
   // Variables for data management (will be initialized in onMount)
   let dataByMetric = new Map();
   let metricsToDraw = [];
   let currentRunList = [];
   let cycleIdx = 2;
-  
+
   // Dynamic color palette using color-palettes.js helper
-  let dynamicPalette = ['#0ea5e9', '#8b5cf6', '#f59e0b', '#ef4444', '#10b981', '#f97316', '#3b82f6', '#8b5ad6']; // fallback
-  
+  let dynamicPalette = [
+    "#0ea5e9",
+    "#8b5cf6",
+    "#f59e0b",
+    "#ef4444",
+    "#10b981",
+    "#f97316",
+    "#3b82f6",
+    "#8b5ad6",
+  ]; // fallback
+
   const updateDynamicPalette = () => {
-    if (typeof window !== 'undefined' && window.ColorPalettes && currentRunList.length > 0) {
+    if (
+      typeof window !== "undefined" &&
+      window.ColorPalettes &&
+      currentRunList.length > 0
+    ) {
       try {
-        dynamicPalette = window.ColorPalettes.getColors('categorical', currentRunList.length);
+        dynamicPalette = window.ColorPalettes.getColors(
+          "categorical",
+          currentRunList.length,
+        );
       } catch (e) {
-        console.warn('Failed to generate dynamic palette:', e);
+        console.warn("Failed to generate dynamic palette:", e);
         // Keep fallback palette
       }
     }
   };
-  
+
   const colorForRun = (name) => {
     const idx = currentRunList.indexOf(name);
-    return idx >= 0 ? dynamicPalette[idx % dynamicPalette.length] : '#999';
+    return idx >= 0 ? dynamicPalette[idx % dynamicPalette.length] : "#999";
   };
-  
 
   // Jitter function - generates completely new data with new runs
-  function jitterData(){
-    console.log('jitterData called - generating new data with random number of runs'); // Debug log
-    
+  function jitterData() {
+    console.log(
+      "jitterData called - generating new data with random number of runs",
+    ); // Debug log
+
     // Generate new random data with weighted probability for fewer runs
     // Higher probability for 2-3 runs, lower for 4-5-6 runs
     const rand = Math.random();
     let wantRuns;
-    if (rand < 0.4) wantRuns = 2;        // 40% chance
-    else if (rand < 0.7) wantRuns = 3;   // 30% chance  
-    else if (rand < 0.85) wantRuns = 4;  // 15% chance
-    else if (rand < 0.95) wantRuns = 5;  // 10% chance
-    else wantRuns = 6;                   // 5% chance
+    if (rand < 0.4)
+      wantRuns = 2; // 40% chance
+    else if (rand < 0.7)
+      wantRuns = 3; // 30% chance
+    else if (rand < 0.85)
+      wantRuns = 4; // 15% chance
+    else if (rand < 0.95)
+      wantRuns = 5; // 10% chance
+    else wantRuns = 6; // 5% chance
     // Use realistic ML training step counts
     const stepsCount = Random.trainingSteps();
     const runsSim = generateRunNames(wantRuns, stepsCount);
-    const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+    const steps = Array.from({ length: stepsCount }, (_, i) => i + 1);
     const nextByMetric = new Map();
-    const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
-    
+    const TARGET_METRICS = [
+      "epoch",
+      "train_accuracy",
+      "train_loss",
+      "val_accuracy",
+      "val_loss",
+    ];
+
     // Initialize data structure
     TARGET_METRICS.forEach((tgt) => {
       const map = {};
-      runsSim.forEach((r) => { map[r] = []; });
+      runsSim.forEach((r) => {
+        map[r] = [];
+      });
       nextByMetric.set(tgt, map);
     });
-    
+
     // Generate curves for each run
-    runsSim.forEach(run => {
+    runsSim.forEach((run) => {
       const curves = genCurves(stepsCount);
-      steps.forEach((s,i)=>{
-        nextByMetric.get('epoch')[run].push({ step:s, value:s });
-        nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
-        nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
-        nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
-        nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
+      steps.forEach((s, i) => {
+        nextByMetric.get("epoch")[run].push({ step: s, value: s });
+        nextByMetric
+          .get("train_accuracy")
+          [run].push({ step: s, value: curves.accTrain[i] });
+        nextByMetric
+          .get("val_accuracy")
+          [run].push({ step: s, value: curves.accVal[i] });
+        nextByMetric
+          .get("train_loss")
+          [run].push({ step: s, value: curves.lossTrain[i] });
+        nextByMetric
+          .get("val_loss")
+          [run].push({ step: s, value: curves.lossVal[i] });
       });
     });
-    
+
     // Update all reactive data
-    nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
+    nextByMetric.forEach((v, k) => dataByMetric.set(k, v));
     metricsToDraw = TARGET_METRICS;
     currentRunList = runsSim.slice();
     updateDynamicPalette(); // Generate new colors based on run count
-    legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
+    legendItems = currentRunList.map((name) => ({
+      name,
+      color: colorForRun(name),
+    }));
     updatePreparedData();
-    colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
-    
-    console.log(`jitterData completed - generated ${wantRuns} runs with ${stepsCount} steps`); // Debug log
+    colorsByRun = Object.fromEntries(
+      currentRunList.map((name) => [name, colorForRun(name)]),
+    );
+
+    console.log(
+      `jitterData completed - generated ${wantRuns} runs with ${stepsCount} steps`,
+    ); // Debug log
   }
 
   // Public API: allow external theme switch
-  function setTheme(name){
-    variant = name === 'oblivion' ? 'oblivion' : 'classic';
+  function setTheme(name) {
+    variant = name === "oblivion" ? "oblivion" : "classic";
     updateThemeClass();
-    
+
     // Debug log for font application
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       console.log(`Theme switched to: ${variant}`);
       if (hostEl) {
         const computedStyle = getComputedStyle(hostEl);
@@ -135,41 +185,67 @@
 
   // Public API: generate massive test dataset
   function generateMassiveDataset(steps = null, runs = 3) {
-    console.log('🧪 Generating massive test dataset for sampling validation...');
-    
+    console.log(
+      "🧪 Generating massive test dataset for sampling validation...",
+    );
+
     const result = generateMassiveTestDataset(steps, runs);
-    
+
     // Update reactive data with massive dataset
     result.dataByMetric.forEach((v, k) => dataByMetric.set(k, v));
-    metricsToDraw = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
+    metricsToDraw = [
+      "epoch",
+      "train_accuracy",
+      "train_loss",
+      "val_accuracy",
+      "val_loss",
+    ];
     currentRunList = result.runNames.slice();
     updateDynamicPalette();
-    legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
+    legendItems = currentRunList.map((name) => ({
+      name,
+      color: colorForRun(name),
+    }));
     updatePreparedData();
-    colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
-    
-    console.log(`✅ Massive dataset loaded: ${result.stepCount} steps × ${result.runNames.length} runs`);
+    colorsByRun = Object.fromEntries(
+      currentRunList.map((name) => [name, colorForRun(name)]),
+    );
+
+    console.log(
+      `✅ Massive dataset loaded: ${result.stepCount} steps × ${result.runNames.length} runs`,
+    );
     console.log(`📊 Total data points: ${result.totalPoints.toLocaleString()}`);
     console.log(`🎯 Description: ${result.description}`);
-    
+
     return result;
   }
 
   // Public API: add live data point for simulation
   function addLiveDataPoint(runName, dataPoint) {
     console.log(`Adding live data point for run "${runName}":`, dataPoint);
-    
+
     // Add run to currentRunList if it doesn't exist
     if (!currentRunList.includes(runName)) {
       currentRunList = [...currentRunList, runName];
       updateDynamicPalette();
-      colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
-      legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
+      colorsByRun = Object.fromEntries(
+        currentRunList.map((name) => [name, colorForRun(name)]),
+      );
+      legendItems = currentRunList.map((name) => ({
+        name,
+        color: colorForRun(name),
+      }));
     }
-    
+
     // Initialize data structures for the run if needed
-    const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
-    TARGET_METRICS.forEach(metric => {
+    const TARGET_METRICS = [
+      "epoch",
+      "train_accuracy",
+      "train_loss",
+      "val_accuracy",
+      "val_loss",
+    ];
+    TARGET_METRICS.forEach((metric) => {
       if (!dataByMetric.has(metric)) {
         dataByMetric.set(metric, {});
       }
@@ -178,114 +254,125 @@
         metricData[runName] = [];
       }
     });
-    
+
     // Add the new data points to each metric
     const step = dataPoint.step;
-    
+
     // Add epoch data
-    const epochData = dataByMetric.get('epoch');
+    const epochData = dataByMetric.get("epoch");
     epochData[runName].push({ step, value: step });
-    
+
     // Add accuracy data (train and val get the same value for simplicity)
     if (dataPoint.accuracy !== undefined) {
-      const trainAccData = dataByMetric.get('train_accuracy');
-      const valAccData = dataByMetric.get('val_accuracy');
-      
+      const trainAccData = dataByMetric.get("train_accuracy");
+      const valAccData = dataByMetric.get("val_accuracy");
+
       // Add some noise between train and val accuracy
       const trainAcc = dataPoint.accuracy;
-      const valAcc = Math.max(0, Math.min(1, dataPoint.accuracy - 0.01 - Math.random() * 0.03));
-      
+      const valAcc = Math.max(
+        0,
+        Math.min(1, dataPoint.accuracy - 0.01 - Math.random() * 0.03),
+      );
+
       trainAccData[runName].push({ step, value: trainAcc });
       valAccData[runName].push({ step, value: valAcc });
     }
-    
+
     // Add loss data (train and val get the same value for simplicity)
     if (dataPoint.loss !== undefined) {
-      const trainLossData = dataByMetric.get('train_loss');
-      const valLossData = dataByMetric.get('val_loss');
-      
+      const trainLossData = dataByMetric.get("train_loss");
+      const valLossData = dataByMetric.get("val_loss");
+
       // Add some noise between train and val loss
       const trainLoss = dataPoint.loss;
       const valLoss = dataPoint.loss + 0.05 + Math.random() * 0.1;
-      
+
       trainLossData[runName].push({ step, value: trainLoss });
       valLossData[runName].push({ step, value: valLoss });
     }
-    
+
     // Update all metrics to draw
     metricsToDraw = TARGET_METRICS;
-    
+
     // Update prepared data with new values
     updatePreparedData();
-    
-    console.log(`Live data point added successfully. Total runs: ${currentRunList.length}`);
+
+    console.log(
+      `Live data point added successfully. Total runs: ${currentRunList.length}`,
+    );
   }
 
   // Update prepared data with optional smoothing
   let preparedRawData = {}; // Store original data for background display
-  
+
   function updatePreparedData() {
-    const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
+    const TARGET_METRICS = [
+      "epoch",
+      "train_accuracy",
+      "train_loss",
+      "val_accuracy",
+      "val_loss",
+    ];
     let dataToUse = {};
     let rawDataToStore = {};
-    
-    TARGET_METRICS.forEach(metric => {
+
+    TARGET_METRICS.forEach((metric) => {
       const rawData = dataByMetric.get(metric);
       if (rawData) {
         // Store original data
         rawDataToStore[metric] = rawData;
-        
+
         // Apply smoothing if enabled (except for epoch which should stay exact)
-        dataToUse[metric] = (smoothing && metric !== 'epoch') 
-          ? smoothMetricData(rawData, 5) // Window size of 5
-          : rawData;
+        dataToUse[metric] =
+          smoothing && metric !== "epoch"
+            ? smoothMetricData(rawData, 5) // Window size of 5
+            : rawData;
       }
     });
-    
+
     preparedData = dataToUse;
     preparedRawData = rawDataToStore;
     console.log(`Prepared data updated, smoothing: ${smoothing}`);
   }
 
-  function updateThemeClass(){
+  function updateThemeClass() {
     if (!hostEl) return;
-    hostEl.classList.toggle('theme--classic', variant === 'classic');
-    hostEl.classList.toggle('theme--oblivion', variant === 'oblivion');
-    hostEl.setAttribute('data-variant', variant);
+    hostEl.classList.toggle("theme--classic", variant === "classic");
+    hostEl.classList.toggle("theme--oblivion", variant === "oblivion");
+    hostEl.setAttribute("data-variant", variant);
   }
 
   $: updateThemeClass();
 
-
   // Chart logic now handled by Cell.svelte
-  
+
   // Fullscreen navigation state
   let currentFullscreenIndex = 0;
   let isModalOpen = false;
-  
+
   function handleNavigate(newIndex) {
     currentFullscreenIndex = newIndex;
   }
-  
+
   function openModal(index) {
     currentFullscreenIndex = index;
     isModalOpen = true;
   }
-  
+
   function closeModal() {
     isModalOpen = false;
   }
-  
+
   // Prepare all charts data for navigation
-  $: allChartsData = cellsDef.map(c => ({
+  $: allChartsData = cellsDef.map((c) => ({
     metricKey: c.metric,
     titleText: c.title,
     metricData: (preparedData && preparedData[c.metric]) || {},
-    rawMetricData: (preparedRawData && preparedRawData[c.metric]) || {}
+    rawMetricData: (preparedRawData && preparedRawData[c.metric]) || {},
   }));
-  
+
   // Color function for the modal
-  $: modalColorForRun = (name) => colorsByRun[name] || '#999';
+  $: modalColorForRun = (name) => colorsByRun[name] || "#999";
 
   let cleanup = null;
   onMount(() => {
@@ -293,66 +380,97 @@
     hostEl.__setTheme = setTheme;
 
     // Jitter & Simulate functions
-    function rebuildLegend(){ 
+    function rebuildLegend() {
       updateDynamicPalette(); // Update colors when adding new data
-      legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) })); 
+      legendItems = currentRunList.map((name) => ({
+        name,
+        color: colorForRun(name),
+      }));
     }
-    
-    function simulateData(){
+
+    function simulateData() {
       // Generate new random data with weighted probability for fewer runs
       // Higher probability for 2-3 runs, lower for 4-5-6 runs
       const rand = Math.random();
       let wantRuns;
-      if (rand < 0.4) wantRuns = 2;        // 40% chance
-      else if (rand < 0.7) wantRuns = 3;   // 30% chance  
-      else if (rand < 0.85) wantRuns = 4;  // 15% chance
-      else if (rand < 0.95) wantRuns = 5;  // 10% chance
-      else wantRuns = 6;                   // 5% chance
+      if (rand < 0.4)
+        wantRuns = 2; // 40% chance
+      else if (rand < 0.7)
+        wantRuns = 3; // 30% chance
+      else if (rand < 0.85)
+        wantRuns = 4; // 15% chance
+      else if (rand < 0.95)
+        wantRuns = 5; // 10% chance
+      else wantRuns = 6; // 5% chance
       // Use realistic ML training step counts with cycling scenarios
       let stepsCount;
       if (cycleIdx === 0) {
-        stepsCount = Random.trainingStepsForScenario('prototyping');
+        stepsCount = Random.trainingStepsForScenario("prototyping");
       } else if (cycleIdx === 1) {
-        stepsCount = Random.trainingStepsForScenario('development');
+        stepsCount = Random.trainingStepsForScenario("development");
       } else if (cycleIdx === 2) {
-        stepsCount = Random.trainingStepsForScenario('production');
+        stepsCount = Random.trainingStepsForScenario("production");
       } else if (cycleIdx === 3) {
-        stepsCount = Random.trainingStepsForScenario('research');
+        stepsCount = Random.trainingStepsForScenario("research");
       } else if (cycleIdx === 4) {
-        stepsCount = Random.trainingStepsForScenario('llm');
+        stepsCount = Random.trainingStepsForScenario("llm");
       } else if (cycleIdx === 5) {
-        stepsCount = Random.trainingStepsForScenario('massive');
+        stepsCount = Random.trainingStepsForScenario("massive");
       } else {
         stepsCount = Random.trainingSteps(); // Full range for variety
       }
       cycleIdx = (cycleIdx + 1) % 7; // Cycle through 7 scenarios now
-      
+
       const runsSim = generateRunNames(wantRuns, stepsCount);
-      const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
+      const steps = Array.from({ length: stepsCount }, (_, i) => i + 1);
       const nextByMetric = new Map();
-      const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
-      const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
+      const TARGET_METRICS = [
+        "epoch",
+        "train_accuracy",
+        "train_loss",
+        "val_accuracy",
+        "val_loss",
+      ];
+      const mList =
+        metricsToDraw && metricsToDraw.length ? metricsToDraw : TARGET_METRICS;
       mList.forEach((tgt) => {
         const map = {};
-        runsSim.forEach((r) => { map[r] = []; });
+        runsSim.forEach((r) => {
+          map[r] = [];
+        });
         nextByMetric.set(tgt, map);
       });
-      runsSim.forEach(run => {
+      runsSim.forEach((run) => {
         const curves = genCurves(stepsCount);
-        steps.forEach((s,i)=>{
-          if (mList.includes('epoch')) nextByMetric.get('epoch')[run].push({ step:s, value:s });
-          if (mList.includes('train_accuracy')) nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
-          if (mList.includes('val_accuracy')) nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
-          if (mList.includes('train_loss')) nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
-          if (mList.includes('val_loss')) nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
+        steps.forEach((s, i) => {
+          if (mList.includes("epoch"))
+            nextByMetric.get("epoch")[run].push({ step: s, value: s });
+          if (mList.includes("train_accuracy"))
+            nextByMetric
+              .get("train_accuracy")
+              [run].push({ step: s, value: curves.accTrain[i] });
+          if (mList.includes("val_accuracy"))
+            nextByMetric
+              .get("val_accuracy")
+              [run].push({ step: s, value: curves.accVal[i] });
+          if (mList.includes("train_loss"))
+            nextByMetric
+              .get("train_loss")
+              [run].push({ step: s, value: curves.lossTrain[i] });
+          if (mList.includes("val_loss"))
+            nextByMetric
+              .get("val_loss")
+              [run].push({ step: s, value: curves.lossVal[i] });
         });
       });
-      nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
+      nextByMetric.forEach((v, k) => dataByMetric.set(k, v));
       currentRunList = runsSim.slice();
       rebuildLegend();
       updatePreparedData();
       updateDynamicPalette(); // Update colors when rebuilding
-      colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
+      colorsByRun = Object.fromEntries(
+        currentRunList.map((name) => [name, colorForRun(name)]),
+      );
     }
     // No need for event listeners anymore - we'll use reactive statement
 
@@ -360,105 +478,158 @@
     simulateData();
     // Svelte Cells will react to preparedData/colorsByRun updates
 
-    cleanup = () => { 
+    cleanup = () => {
       // No cleanup needed for reactive statements
     };
   });
 
-  onDestroy(() => { if (cleanup) cleanup(); });
+  onDestroy(() => {
+    if (cleanup) cleanup();
+  });
 
   // Expose instance for debugging and external theme control
   onMount(() => {
-    window.trackioInstance = { jitterData, addLiveDataPoint, generateMassiveDataset };
+    window.trackioInstance = {
+      jitterData,
+      addLiveDataPoint,
+      generateMassiveDataset,
+    };
     if (hostEl) {
-      hostEl.__trackioInstance = { setTheme, setLogScaleX, setSmoothing, jitterData, addLiveDataPoint, generateMassiveDataset };
+      hostEl.__trackioInstance = {
+        setTheme,
+        setLogScaleX,
+        setSmoothing,
+        jitterData,
+        addLiveDataPoint,
+        generateMassiveDataset,
+      };
     }
-    
+
     // Initialize dynamic palette
     updateDynamicPalette();
-    
+
     // Listen for palette updates from color-palettes.js
     const handlePaletteUpdate = () => {
       updateDynamicPalette();
       // Rebuild legend and colors if needed
       if (currentRunList.length > 0) {
-        legendItems = currentRunList.map((name) => ({ name, color: colorForRun(name) }));
-        colorsByRun = Object.fromEntries(currentRunList.map((name) => [name, colorForRun(name)]));
+        legendItems = currentRunList.map((name) => ({
+          name,
+          color: colorForRun(name),
+        }));
+        colorsByRun = Object.fromEntries(
+          currentRunList.map((name) => [name, colorForRun(name)]),
+        );
       }
     };
-    
-    document.addEventListener('palettes:updated', handlePaletteUpdate);
-    
+
+    document.addEventListener("palettes:updated", handlePaletteUpdate);
+
     // Cleanup listener on destroy
     return () => {
-      document.removeEventListener('palettes:updated', handlePaletteUpdate);
+      document.removeEventListener("palettes:updated", handlePaletteUpdate);
     };
   });
 
   // React to jitter trigger from store
   $: {
-    console.log('Reactive statement triggered, jitterTrigger value:', $jitterTrigger);
+    console.log(
+      "Reactive statement triggered, jitterTrigger value:",
+      $jitterTrigger,
+    );
     if ($jitterTrigger > 0) {
-      console.log('Jitter trigger activated:', $jitterTrigger, 'calling jitterData()');
+      console.log(
+        "Jitter trigger activated:",
+        $jitterTrigger,
+        "calling jitterData()",
+      );
       jitterData();
     }
   }
 
   // Legend ghost helpers (hover effects)
-  function ghostRun(run){
+  function ghostRun(run) {
     try {
-      hostEl.classList.add('hovering');
-      
+      hostEl.classList.add("hovering");
+
       // Ghost the chart lines and points
-      hostEl.querySelectorAll('.cell').forEach(cell => {
-        cell.querySelectorAll('svg .lines path.run-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
-        cell.querySelectorAll('svg .lines path.raw-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
-        cell.querySelectorAll('svg .points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run));
+      hostEl.querySelectorAll(".cell").forEach((cell) => {
+        cell
+          .querySelectorAll("svg .lines path.run-line")
+          .forEach((p) =>
+            p.classList.toggle("ghost", p.getAttribute("data-run") !== run),
+          );
+        cell
+          .querySelectorAll("svg .lines path.raw-line")
+          .forEach((p) =>
+            p.classList.toggle("ghost", p.getAttribute("data-run") !== run),
+          );
+        cell
+          .querySelectorAll("svg .points circle.pt")
+          .forEach((c) =>
+            c.classList.toggle("ghost", c.getAttribute("data-run") !== run),
+          );
       });
-      
+
       // Ghost the legend items
-      hostEl.querySelectorAll('.legend-bottom .item').forEach(item => {
-        const itemRun = item.getAttribute('data-run');
-        item.classList.toggle('ghost', itemRun !== run);
+      hostEl.querySelectorAll(".legend-bottom .item").forEach((item) => {
+        const itemRun = item.getAttribute("data-run");
+        item.classList.toggle("ghost", itemRun !== run);
       });
-    } catch(_) {}
+    } catch (_) {}
   }
-  function clearGhost(){
+  function clearGhost() {
     try {
-      hostEl.classList.remove('hovering');
-      
+      hostEl.classList.remove("hovering");
+
       // Clear ghost from chart lines and points
-      hostEl.querySelectorAll('.cell').forEach(cell => {
-        cell.querySelectorAll('svg .lines path.run-line').forEach(p => p.classList.remove('ghost'));
-        cell.querySelectorAll('svg .lines path.raw-line').forEach(p => p.classList.remove('ghost'));
-        cell.querySelectorAll('svg .points circle.pt').forEach(c => c.classList.remove('ghost'));
+      hostEl.querySelectorAll(".cell").forEach((cell) => {
+        cell
+          .querySelectorAll("svg .lines path.run-line")
+          .forEach((p) => p.classList.remove("ghost"));
+        cell
+          .querySelectorAll("svg .lines path.raw-line")
+          .forEach((p) => p.classList.remove("ghost"));
+        cell
+          .querySelectorAll("svg .points circle.pt")
+          .forEach((c) => c.classList.remove("ghost"));
       });
-      
+
       // Clear ghost from legend items
-      hostEl.querySelectorAll('.legend-bottom .item').forEach(item => {
-        item.classList.remove('ghost');
+      hostEl.querySelectorAll(".legend-bottom .item").forEach((item) => {
+        item.classList.remove("ghost");
       });
-    } catch(_) {}
+    } catch (_) {}
   }
 </script>
 
 <div class="trackio theme--classic" bind:this={hostEl} data-variant={variant}>
   <div class="trackio__header">
-    <Legend items={legendItems} on:legend-hover={(e) => { const run = e?.detail?.name; if (!run) return; ghostRun(run); }} on:legend-leave={() => { clearGhost(); }} />
+    <Legend
+      items={legendItems}
+      on:legend-hover={(e) => {
+        const run = e?.detail?.name;
+        if (!run) return;
+        ghostRun(run);
+      }}
+      on:legend-leave={() => {
+        clearGhost();
+      }}
+    />
   </div>
   <div class="trackio__grid" bind:this={gridEl}>
     {#each cellsDef as c, i}
-      <Cell 
-        metricKey={c.metric} 
-        titleText={c.title} 
-        wide={c.wide} 
-        {variant} 
-        {normalizeLoss} 
-        {logScaleX} 
-        {smoothing} 
-        metricData={(preparedData && preparedData[c.metric]) || {}} 
-        rawMetricData={(preparedRawData && preparedRawData[c.metric]) || {}} 
-        colorForRun={(name)=> colorsByRun[name] || '#999'} 
+      <Cell
+        metricKey={c.metric}
+        titleText={c.title}
+        wide={c.wide}
+        {variant}
+        {normalizeLoss}
+        {logScaleX}
+        {smoothing}
+        metricData={(preparedData && preparedData[c.metric]) || {}}
+        rawMetricData={(preparedRawData && preparedRawData[c.metric]) || {}}
+        colorForRun={(name) => colorsByRun[name] || "#999"}
         {hostEl}
         currentIndex={i}
         onOpenModal={openModal}
@@ -467,9 +638,17 @@
   </div>
   <div class="trackio__footer">
     <small>
-      Built with <a href="https://github.com/huggingface/trackio" target="_blank" rel="noopener noreferrer">TrackIO</a>
+      Built with <a
+        href="https://github.com/huggingface/trackio"
+        target="_blank"
+        rel="noopener noreferrer">TrackIO</a
+      >
       <span class="separator">•</span>
-      <a href="https://huggingface.co/docs/hub/spaces-sdks-docker" target="_blank" rel="noopener noreferrer">Use via API</a>
+      <a
+        href="https://huggingface.co/docs/hub/spaces-sdks-docker"
+        target="_blank"
+        rel="noopener noreferrer">Use via API</a
+      >
     </small>
   </div>
 </div>
@@ -477,7 +656,7 @@
 <!-- Centralized Fullscreen Modal -->
 <FullscreenModal
   visible={isModalOpen}
-  title={allChartsData[currentFullscreenIndex]?.titleText || ''}
+  title={allChartsData[currentFullscreenIndex]?.titleText || ""}
   metricData={allChartsData[currentFullscreenIndex]?.metricData || {}}
   rawMetricData={allChartsData[currentFullscreenIndex]?.rawMetricData || {}}
   colorForRun={modalColorForRun}
@@ -485,8 +664,8 @@
   {logScaleX}
   {smoothing}
   {normalizeLoss}
-  metricKey={allChartsData[currentFullscreenIndex]?.metricKey || ''}
-  titleText={allChartsData[currentFullscreenIndex]?.titleText || ''}
+  metricKey={allChartsData[currentFullscreenIndex]?.metricKey || ""}
+  titleText={allChartsData[currentFullscreenIndex]?.titleText || ""}
   currentIndex={currentFullscreenIndex}
   totalCharts={cellsDef.length}
   onNavigate={handleNavigate}
@@ -499,12 +678,13 @@
      ========================= */
 
   /* Font imports for themes - ensure Roboto Mono is loaded for Oblivion theme */
-  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');
-  
+  @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap");
+
   /* Fallback font-face declaration */
   @font-face {
-    font-family: 'Roboto Mono Fallback';
-    src: url('https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4AJi8SJQt.woff2') format('woff2');
+    font-family: "Roboto Mono Fallback";
+    src: url("https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4AJi8SJQt.woff2")
+      format("woff2");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -515,31 +695,37 @@
     position: relative;
     --z-tooltip: 50;
     --z-overlay: 99999999;
-    
+
     /* Typography */
-    --trackio-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    --trackio-font-family: var(
+      --font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace
+    );
     --trackio-font-weight-normal: 400;
     --trackio-font-weight-medium: 600;
     --trackio-font-weight-bold: 700;
-    
+
     /* Apply font-family to root element */
     font-family: var(--trackio-font-family);
-    
+
     /* Base color system for Classic theme */
     --trackio-base: #323232;
     --trackio-primary: var(--trackio-base);
     --trackio-dim: color-mix(in srgb, var(--trackio-base) 28%, transparent);
     --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
     --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
-    
+
     /* Chart rendering */
-    --trackio-chart-grid-type: 'lines'; /* 'lines' | 'dots' */
+    --trackio-chart-grid-type: "lines"; /* 'lines' | 'dots' */
     --trackio-chart-axis-stroke: var(--trackio-dim);
     --trackio-chart-axis-text: var(--trackio-text);
     --trackio-chart-grid-stroke: var(--trackio-subtle);
     --trackio-chart-grid-opacity: 1;
   }
-  
+
   /* Dark mode overrides for Classic theme */
   :global([data-theme="dark"]) .trackio.theme--classic {
     --trackio-base: #ffffff;
@@ -547,28 +733,28 @@
     --trackio-dim: color-mix(in srgb, var(--trackio-base) 25%, transparent);
     --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
     --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
-    
+
     /* Cell background for dark mode */
     --trackio-cell-background: rgba(255, 255, 255, 0.03);
   }
-  
+
   .trackio.theme--classic {
     /* Cell styling */
     --trackio-cell-background: rgba(0, 0, 0, 0.02);
     --trackio-cell-border: var(--border-color, rgba(0, 0, 0, 0.1));
     --trackio-cell-corner-inset: 0px;
     --trackio-cell-gap: 12px;
-    
+
     /* Typography */
     --trackio-text-primary: var(--text-color, rgba(0, 0, 0, 0.9));
     --trackio-text-secondary: var(--muted-color, rgba(0, 0, 0, 0.6));
-    --trackio-text-accent: var(--primary-color, #E889AB);
-    
+    --trackio-text-accent: var(--primary-color);
+
     /* Tooltip */
     --trackio-tooltip-background: var(--surface-bg, white);
     --trackio-tooltip-border: var(--border-color, rgba(0, 0, 0, 0.1));
     --trackio-tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-    
+
     /* Legend */
     --trackio-legend-text: var(--text-color, rgba(0, 0, 0, 0.9));
     --trackio-legend-swatch-border: var(--border-color, rgba(0, 0, 0, 0.1));
@@ -577,14 +763,14 @@
   /* Dark mode adjustments */
   :global([data-theme="dark"]) .trackio {
     --trackio-chart-axis-stroke: rgba(255, 255, 255, 0.18);
-    --trackio-chart-axis-text: rgba(255, 255, 255, 0.60);
+    --trackio-chart-axis-text: rgba(255, 255, 255, 0.6);
     --trackio-chart-grid-stroke: rgba(255, 255, 255, 0.08);
   }
 
   /* =========================
      THEME: CLASSIC (Default)
      ========================= */
-  
+
   .trackio.theme--classic {
     /* Keep default values - no overrides needed */
   }
@@ -592,64 +778,96 @@
   /* =========================
      THEME: OBLIVION
      ========================= */
-  
+
   .trackio.theme--oblivion {
     /* Core oblivion color system - Light mode: darker colors for visibility */
     --trackio-oblivion-base: #2a2a2a;
     --trackio-oblivion-primary: var(--trackio-oblivion-base);
-    --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 30%, transparent);
-    --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
-    --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
-    
+    --trackio-oblivion-dim: color-mix(
+      in srgb,
+      var(--trackio-oblivion-base) 30%,
+      transparent
+    );
+    --trackio-oblivion-subtle: color-mix(
+      in srgb,
+      var(--trackio-oblivion-base) 8%,
+      transparent
+    );
+    --trackio-oblivion-ghost: color-mix(
+      in srgb,
+      var(--trackio-oblivion-base) 4%,
+      transparent
+    );
+
     /* Chart rendering overrides */
-    --trackio-chart-grid-type: 'dots';
+    --trackio-chart-grid-type: "dots";
     --trackio-chart-axis-stroke: var(--trackio-oblivion-dim);
     --trackio-chart-axis-text: var(--trackio-oblivion-primary);
     --trackio-chart-grid-stroke: var(--trackio-oblivion-dim);
     --trackio-chart-grid-opacity: 0.6;
   }
-  
+
   /* Dark mode overrides for Oblivion theme */
   :global([data-theme="dark"]) .trackio.theme--oblivion {
     --trackio-oblivion-base: #ffffff;
     --trackio-oblivion-primary: var(--trackio-oblivion-base);
-    --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent);
-    --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
-    --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
+    --trackio-oblivion-dim: color-mix(
+      in srgb,
+      var(--trackio-oblivion-base) 25%,
+      transparent
+    );
+    --trackio-oblivion-subtle: color-mix(
+      in srgb,
+      var(--trackio-oblivion-base) 8%,
+      transparent
+    );
+    --trackio-oblivion-ghost: color-mix(
+      in srgb,
+      var(--trackio-oblivion-base) 4%,
+      transparent
+    );
   }
-  
+
   .trackio.theme--oblivion {
     /* Cell styling overrides */
     --trackio-cell-background: var(--trackio-oblivion-subtle);
     --trackio-cell-border: var(--trackio-oblivion-dim);
     --trackio-cell-corner-inset: 6px;
     --trackio-cell-gap: 0px;
-    
+
     /* HUD-specific variables */
     --trackio-oblivion-hud-gap: 10px;
     --trackio-oblivion-hud-corner-size: 8px;
-    --trackio-oblivion-hud-bg-gradient: 
-      radial-gradient(1200px 200px at 20% -10%, var(--trackio-oblivion-ghost), transparent 80%),
-      radial-gradient(900px 200px at 80% 110%, var(--trackio-oblivion-ghost), transparent 80%);
-    
+    --trackio-oblivion-hud-bg-gradient: radial-gradient(
+        1200px 200px at 20% -10%,
+        var(--trackio-oblivion-ghost),
+        transparent 80%
+      ),
+      radial-gradient(
+        900px 200px at 80% 110%,
+        var(--trackio-oblivion-ghost),
+        transparent 80%
+      );
+
     /* Typography overrides */
     --trackio-text-primary: var(--trackio-oblivion-primary);
     --trackio-text-secondary: var(--trackio-oblivion-dim);
     --trackio-text-accent: var(--trackio-oblivion-primary);
-    
+
     /* Tooltip overrides */
     --trackio-tooltip-background: var(--trackio-oblivion-subtle);
     --trackio-tooltip-border: var(--trackio-oblivion-dim);
-    --trackio-tooltip-shadow: 
-      0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent),
+    --trackio-tooltip-shadow: 0 8px 32px
+        color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent),
       0 2px 8px color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent);
-    
+
     /* Legend overrides */
     --trackio-legend-text: var(--trackio-oblivion-primary);
     --trackio-legend-swatch-border: var(--trackio-oblivion-dim);
-    
+
     /* Font styling overrides */
-    --trackio-font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
+    --trackio-font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace;
     font-family: var(--trackio-font-family) !important;
     color: var(--trackio-text-primary);
   }
@@ -657,29 +875,42 @@
   /* Force Roboto Mono application in Oblivion theme */
   .trackio.theme--oblivion,
   .trackio.theme--oblivion * {
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
   }
-  
+
   /* Specific overrides for different elements in Oblivion */
   .trackio.theme--oblivion .cell-title,
   .trackio.theme--oblivion .legend-bottom,
   .trackio.theme--oblivion .legend-title,
   .trackio.theme--oblivion .item {
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
   }
 
   /* Dark mode adjustments for Oblivion */
   :global([data-theme="dark"]) .trackio.theme--oblivion {
     --trackio-oblivion-base: #ffffff;
-    --trackio-oblivion-hud-bg-gradient: 
-      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, var(--trackio-oblivion-base) 6.5%, transparent), transparent 80%),
-      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent), transparent 80%),
-      linear-gradient(180deg, color-mix(in srgb, var(--trackio-oblivion-base) 3.5%, transparent), transparent 45%);
-    
-    --trackio-tooltip-shadow: 
-      0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 5%, transparent),
+    --trackio-oblivion-hud-bg-gradient: radial-gradient(
+        1400px 260px at 20% -10%,
+        color-mix(in srgb, var(--trackio-oblivion-base) 6.5%, transparent),
+        transparent 80%
+      ),
+      radial-gradient(
+        1100px 240px at 80% 110%,
+        color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent),
+        transparent 80%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--trackio-oblivion-base) 3.5%, transparent),
+        transparent 45%
+      );
+
+    --trackio-tooltip-shadow: 0 8px 32px
+        color-mix(in srgb, var(--trackio-oblivion-base) 5%, transparent),
       0 2px 8px color-mix(in srgb, black 10%, transparent);
-    
+
     background: #0f1115;
   }
 
@@ -692,9 +923,11 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--trackio-cell-gap);
   }
-  
+
   @media (max-width: 980px) {
-    .trackio__grid { grid-template-columns: 1fr; }
+    .trackio__grid {
+      grid-template-columns: 1fr;
+    }
   }
 
   .trackio__header {
@@ -712,28 +945,37 @@
   .trackio .axes line {
     stroke: var(--trackio-chart-axis-stroke);
   }
-  
+
   .trackio .axes text {
     fill: var(--trackio-chart-axis-text);
     font-family: var(--trackio-font-family);
   }
-  
+
   /* Force font-family for SVG text in Oblivion */
   .trackio.theme--oblivion .axes text {
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
   }
-  
+
   .trackio .grid line {
     stroke: var(--trackio-chart-grid-stroke);
     opacity: var(--trackio-chart-grid-opacity);
   }
 
   /* Grid type switching */
-  .trackio .grid-dots { display: none; }
-  .trackio.theme--oblivion .grid { display: none; }
-  .trackio.theme--oblivion .grid-dots { display: block; }
+  .trackio .grid-dots {
+    display: none;
+  }
+  .trackio.theme--oblivion .grid {
+    display: none;
+  }
+  .trackio.theme--oblivion .grid-dots {
+    display: block;
+  }
   .trackio.theme--oblivion .cell-bg,
-  .trackio.theme--oblivion .cell-corners { display: block; }
+  .trackio.theme--oblivion .cell-corners {
+    display: block;
+  }
 
   /* =========================
      FOOTER
@@ -777,8 +1019,7 @@
   }
 
   .trackio.theme--oblivion .trackio__footer small {
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
   }
 </style>
-
-

app/src/components/trackio/TrackioWrapper.astro

@@ -0,0 +1,510 @@
+---
+// TrackioWrapper.astro
+import Trackio from "./Trackio.svelte";
+---
+
+<!-- Ensure Roboto Mono is loaded for Oblivion theme -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap"
+  rel="stylesheet"
+/>
+
+<div class="trackio-wrapper">
+  <div class="trackio-controls">
+    <div class="controls-left">
+      <div class="theme-selector">
+        <label for="theme-select">Theme</label>
+        <select id="theme-select" class="theme-select">
+          <option value="classic">Classic</option>
+          <option value="oblivion">Oblivion</option>
+        </select>
+      </div>
+      <div class="scale-controls">
+        <label>
+          <input type="checkbox" id="log-scale-x" checked />
+          Log Scale X
+        </label>
+        <label>
+          <input type="checkbox" id="smooth-data" checked />
+          Smooth
+        </label>
+      </div>
+    </div>
+    <div class="controls-right">
+      <button class="button button--ghost" type="button" id="randomize-btn">
+        Randomize Data
+      </button>
+      <button
+        class="button button--primary"
+        type="button"
+        id="start-simulation-btn"
+      >
+        Live Run
+      </button>
+      <button
+        class="button button--danger"
+        type="button"
+        id="stop-simulation-btn"
+        style="display: none;"
+      >
+        Stop
+      </button>
+    </div>
+  </div>
+
+  <div class="trackio-container">
+    <Trackio client:load variant="classic" logScaleX={true} smoothing={true} />
+  </div>
+</div>
+
+<script>
+  // @ts-nocheck
+  document.addEventListener("DOMContentLoaded", async () => {
+    const themeSelect = document.getElementById("theme-select");
+    const randomizeBtn = document.getElementById("randomize-btn");
+    const startSimulationBtn = document.getElementById("start-simulation-btn");
+    const stopSimulationBtn = document.getElementById("stop-simulation-btn");
+    const logScaleXCheckbox = document.getElementById("log-scale-x");
+    const smoothDataCheckbox = document.getElementById("smooth-data");
+    const trackioContainer = document.querySelector(".trackio-container");
+
+    if (
+      !themeSelect ||
+      !randomizeBtn ||
+      !startSimulationBtn ||
+      !stopSimulationBtn ||
+      !logScaleXCheckbox ||
+      !smoothDataCheckbox ||
+      !trackioContainer
+    )
+      return;
+
+    // Variables for simulation
+    let simulationInterval = null;
+    let currentSimulationRun = null;
+    let currentStep = 0;
+
+    // Import the store function
+    const { triggerJitter } = await import("./core/store.js");
+
+    // Theme change handler
+    themeSelect.addEventListener("change", (e) => {
+      const target = e.target;
+      if (!target || !("value" in target)) return;
+
+      const newVariant = target.value;
+      console.log(`Theme changed to: ${newVariant}`); // Debug log
+
+      // Find the trackio element and call setTheme on the Svelte instance
+      const trackioEl = debugTrackioState();
+      if (trackioEl && trackioEl.__trackioInstance) {
+        console.log("✅ Calling setTheme on Trackio instance");
+        trackioEl.__trackioInstance.setTheme(newVariant);
+      } else {
+        console.warn("❌ No Trackio instance found for theme change");
+      }
+    });
+
+    // Log scale X change handler
+    logScaleXCheckbox.addEventListener("change", (e) => {
+      const target = e.target;
+      if (!target || !("checked" in target)) return;
+
+      const isLogScale = target.checked;
+      console.log(`Log scale X changed to: ${isLogScale}`); // Debug log
+
+      // Find the trackio element and call setLogScaleX on the Svelte instance
+      const trackioEl = debugTrackioState();
+      if (trackioEl && trackioEl.__trackioInstance) {
+        console.log("✅ Calling setLogScaleX on Trackio instance");
+        trackioEl.__trackioInstance.setLogScaleX(isLogScale);
+      } else {
+        console.warn("❌ Trackio instance not found for log scale change");
+      }
+    });
+
+    // Smooth data change handler
+    smoothDataCheckbox.addEventListener("change", (e) => {
+      const target = e.target;
+      if (!target || !("checked" in target)) return;
+
+      const isSmooth = target.checked;
+      console.log(`Smooth data changed to: ${isSmooth}`); // Debug log
+
+      // Find the trackio element and call setSmoothing on the Svelte instance
+      const trackioEl = debugTrackioState();
+      if (trackioEl && trackioEl.__trackioInstance) {
+        console.log("✅ Calling setSmoothing on Trackio instance");
+        trackioEl.__trackioInstance.setSmoothing(isSmooth);
+      } else {
+        console.warn("❌ Trackio instance not found for smooth change");
+      }
+    });
+
+    // Debug function to check trackio state
+    function debugTrackioState() {
+      const trackioEl = trackioContainer.querySelector(".trackio");
+      console.log("�� Debug Trackio state:", {
+        container: !!trackioContainer,
+        trackioEl: !!trackioEl,
+        hasInstance: !!(trackioEl && trackioEl.__trackioInstance),
+        availableMethods:
+          trackioEl && trackioEl.__trackioInstance
+            ? Object.keys(trackioEl.__trackioInstance)
+            : "none",
+        windowInstance: !!window.trackioInstance,
+      });
+      return trackioEl;
+    }
+
+    // Initialize with default checked states - increased delay and retry logic
+    function initializeTrackio(attempt = 1) {
+      console.log(`🚀 Initializing Trackio (attempt ${attempt})`);
+
+      const trackioEl = debugTrackioState();
+
+      if (trackioEl && trackioEl.__trackioInstance) {
+        console.log("✅ Trackio instance found, applying initial settings");
+
+        if (logScaleXCheckbox.checked) {
+          console.log("Initializing with log scale X enabled");
+          trackioEl.__trackioInstance.setLogScaleX(true);
+        }
+
+        if (smoothDataCheckbox.checked) {
+          console.log("Initializing with smoothing enabled");
+          trackioEl.__trackioInstance.setSmoothing(true);
+        }
+      } else {
+        console.log("❌ Trackio instance not ready yet");
+        if (attempt < 10) {
+          setTimeout(() => initializeTrackio(attempt + 1), 200 * attempt);
+        } else {
+          console.error("Failed to initialize Trackio after 10 attempts");
+        }
+      }
+    }
+
+    // Start initialization
+    setTimeout(() => initializeTrackio(), 100);
+
+    // Function to generate a new simulated metric value
+    function generateSimulatedValue(step, metric) {
+      const baseProgress = Math.min(1, step / 100); // Normalise sur 100 steps
+
+      if (metric === "loss") {
+        // Loss that decreases with noise
+        const baseLoss = 2.0 * Math.exp(-0.05 * step);
+        const noise = (Math.random() - 0.5) * 0.2;
+        return Math.max(0.01, baseLoss + noise);
+      } else if (metric === "accuracy") {
+        // Accuracy that increases with noise
+        const baseAcc = 0.1 + 0.8 * (1 - Math.exp(-0.04 * step));
+        const noise = (Math.random() - 0.5) * 0.05;
+        return Math.max(0, Math.min(1, baseAcc + noise));
+      }
+      return Math.random();
+    }
+
+    // Handler to start simulation
+    function startSimulation() {
+      if (simulationInterval) {
+        clearInterval(simulationInterval);
+      }
+
+      // Générer un nouveau nom de run
+      const adjectives = [
+        "live",
+        "real-time",
+        "streaming",
+        "dynamic",
+        "active",
+        "running",
+      ];
+      const nouns = [
+        "experiment",
+        "trial",
+        "session",
+        "training",
+        "run",
+        "test",
+      ];
+      const randomAdj =
+        adjectives[Math.floor(Math.random() * adjectives.length)];
+      const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
+      currentSimulationRun = `${randomAdj}-${randomNoun}-${Date.now().toString().slice(-4)}`;
+      currentStep = 1; // Commencer à step 1
+
+      console.log(`Starting simulation for run: ${currentSimulationRun}`);
+
+      // Interface UI
+      startSimulationBtn.style.display = "none";
+      stopSimulationBtn.style.display = "inline-flex";
+      startSimulationBtn.disabled = true;
+
+      // Ajouter le premier point
+      addSimulationStep();
+
+      // Continuer chaque seconde
+      simulationInterval = setInterval(() => {
+        currentStep++;
+        addSimulationStep();
+
+        // Stop after 200 steps to avoid infinity
+        if (currentStep > 200) {
+          stopSimulation();
+        }
+      }, 1000); // Chaque seconde
+    }
+
+    // Function to add a new data point
+    function addSimulationStep() {
+      const trackioEl = trackioContainer.querySelector(".trackio");
+      if (trackioEl && trackioEl.__trackioInstance) {
+        const newDataPoint = {
+          step: currentStep,
+          loss: generateSimulatedValue(currentStep, "loss"),
+          accuracy: generateSimulatedValue(currentStep, "accuracy"),
+        };
+
+        console.log(
+          `Adding simulation step ${currentStep} for run ${currentSimulationRun}:`,
+          newDataPoint,
+        );
+
+        // Ajouter le point via l'instance Trackio
+        if (
+          typeof trackioEl.__trackioInstance.addLiveDataPoint === "function"
+        ) {
+          trackioEl.__trackioInstance.addLiveDataPoint(
+            currentSimulationRun,
+            newDataPoint,
+          );
+        } else {
+          console.warn("addLiveDataPoint method not found on Trackio instance");
+        }
+      }
+    }
+
+    // Handler to stop simulation
+    function stopSimulation() {
+      if (simulationInterval) {
+        clearInterval(simulationInterval);
+        simulationInterval = null;
+      }
+
+      console.log(`Stopping simulation for run: ${currentSimulationRun}`);
+
+      // Interface UI
+      startSimulationBtn.style.display = "inline-flex";
+      stopSimulationBtn.style.display = "none";
+      startSimulationBtn.disabled = false;
+
+      currentSimulationRun = null;
+      currentStep = 0;
+    }
+
+    // Event listeners for simulation buttons
+    startSimulationBtn.addEventListener("click", startSimulation);
+    stopSimulationBtn.addEventListener("click", stopSimulation);
+
+    // Arrêter la simulation si l'utilisateur quitte la page
+    window.addEventListener("beforeunload", stopSimulation);
+
+    // Randomize data handler - now uses the store
+    randomizeBtn.addEventListener("click", () => {
+      console.log("Randomize button clicked - triggering jitter via store"); // Debug log
+
+      // Arrêter la simulation en cours si elle tourne
+      if (simulationInterval) {
+        stopSimulation();
+      }
+
+      // Add vibration animation
+      randomizeBtn.classList.add("vibrating");
+      setTimeout(() => {
+        randomizeBtn.classList.remove("vibrating");
+      }, 600);
+
+      // Test direct window approach as well
+      if (
+        window.trackioInstance &&
+        typeof window.trackioInstance.jitterData === "function"
+      ) {
+        console.log(
+          "Found window.trackioInstance, calling jitterData directly",
+        ); // Debug log
+        window.trackioInstance.jitterData();
+      } else {
+        console.log("No window.trackioInstance found, using store trigger"); // Debug log
+        triggerJitter();
+      }
+    });
+  });
+</script>
+
+<style>
+  .trackio-wrapper {
+    width: 100%;
+    margin: 0px 0 20px 0;
+  }
+
+  .trackio-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 12px 0px;
+    /* border-bottom: 1px solid var(--border-color); */
+    gap: 16px;
+    flex-wrap: nowrap;
+  }
+
+  .controls-left {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    flex-wrap: wrap;
+  }
+
+  .controls-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .btn-randomize {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    background: var(--accent-color, #007acc);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .btn-randomize:hover {
+    background: var(--accent-hover, #005a9e);
+    transform: translateY(-1px);
+  }
+
+  .btn-randomize:active {
+    transform: translateY(0);
+  }
+
+  .theme-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .theme-selector label {
+    font-weight: 500;
+    color: var(--text-color);
+  }
+
+  .theme-select {
+    padding: 6px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--input-bg, var(--surface-bg));
+    color: var(--text-color);
+    font-size: 14px;
+    cursor: pointer;
+    transition: border-color 0.15s ease;
+  }
+
+  .theme-select:focus {
+    outline: none;
+    border-color: var(--accent-color, #007acc);
+  }
+
+  .scale-controls {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  /* Vibration animation for button */
+  @keyframes vibrate {
+    0% {
+      transform: translateX(0);
+    }
+    10% {
+      transform: translateX(-2px) rotate(-1deg);
+    }
+    20% {
+      transform: translateX(2px) rotate(1deg);
+    }
+    30% {
+      transform: translateX(-2px) rotate(-1deg);
+    }
+    40% {
+      transform: translateX(2px) rotate(1deg);
+    }
+    50% {
+      transform: translateX(-1px) rotate(-0.5deg);
+    }
+    60% {
+      transform: translateX(1px) rotate(0.5deg);
+    }
+    70% {
+      transform: translateX(-1px) rotate(-0.5deg);
+    }
+    80% {
+      transform: translateX(1px) rotate(0.5deg);
+    }
+    90% {
+      transform: translateX(-0.5px) rotate(-0.25deg);
+    }
+    100% {
+      transform: translateX(0) rotate(0);
+    }
+  }
+
+  .button.vibrating {
+    animation: vibrate 0.6s ease-in-out;
+  }
+
+  .trackio-container {
+    width: 100%;
+    margin-top: 10px;
+    border: 1px solid var(--border-color);
+    padding: 24px 12px;
+  }
+
+  @media (max-width: 768px) {
+    .trackio-controls {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 12px;
+    }
+
+    .controls-left {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 12px;
+    }
+
+    .theme-selector {
+      justify-content: space-between;
+    }
+
+    .scale-controls {
+      justify-content: space-between;
+    }
+  }
+</style>

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

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

app/src/content/embeds/banner.html

@@ -0,0 +1,633 @@
+<div class="d3-robot-arm" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.d3-robot-arm')) || document.querySelector('.d3-robot-arm');
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Robot arm parameters
+      const armLengths = [120, 100, 80]; // 3 segments
+      const numSegments = armLengths.length;
+      
+      // Trail for end effector
+      const trailLength = 80;
+      const trail = [];
+      
+      // Animation state
+      let targetX = 0, targetY = 0;
+      let currentX = 0, currentY = 0; // Smooth interpolated position
+      let time = 0;
+      let prevPositions = null;
+      
+      // Task system
+      let currentTask = 0;
+      let taskProgress = 0;
+      let gripperOpen = true;
+      let gripperOpenness = 1.0; // 0 = closed, 1 = open (for smooth animation)
+      let heldObject = null;
+      
+      // Objects to manipulate with initial and target positions
+      const objects = [
+        { id: 1, x: 0, y: 0, targetX: 0, targetY: 0, size: 25, color: 0.2, label: 'Cube A', shape: 'square', placed: false },
+        { id: 2, x: 0, y: 0, targetX: 0, targetY: 0, size: 20, color: 0.5, label: 'Ball B', shape: 'circle', placed: false },
+        { id: 3, x: 0, y: 0, targetX: 0, targetY: 0, size: 22, color: 0.8, label: 'Cube C', shape: 'square', placed: false }
+      ];
+      
+      // Task sequences optimized for smooth reach
+      const tasks = [
+        { type: 'pick', objectId: 1, duration: 100 },
+        { type: 'move', x: 0.3, y: 0.5, duration: 90 },
+        { type: 'place', duration: 60 },
+        { type: 'return', duration: 80 },
+        { type: 'pick', objectId: 2, duration: 100 },
+        { type: 'move', x: 0.5, y: 0.6, duration: 90 },
+        { type: 'place', duration: 60 },
+        { type: 'return', duration: 80 },
+        { type: 'pick', objectId: 3, duration: 100 },
+        { type: 'move', x: 0.7, y: 0.5, duration: 90 },
+        { type: 'place', duration: 60 },
+        { type: 'idle', duration: 100 }
+      ];
+
+      // FABRIK Inverse Kinematics solver (Forward And Backward Reaching)
+      const solveIK = (targetX, targetY, baseX, baseY) => {
+        // Initialize joint positions (use previous if available, otherwise extend horizontally)
+        let positions;
+        
+        if (prevPositions && prevPositions.length === numSegments + 1) {
+          // Use previous positions as starting point for smooth animation
+          positions = prevPositions.map(p => ({ x: p.x, y: p.y }));
+          positions[0] = { x: baseX, y: baseY }; // Always fix base
+        } else {
+          // Initial position: extend arm horizontally to the right
+          positions = [{ x: baseX, y: baseY }];
+          let x = baseX, y = baseY;
+          for (let i = 0; i < numSegments; i++) {
+            x += armLengths[i];
+            positions.push({ x, y });
+          }
+        }
+        
+        // FABRIK iterations
+        const maxIterations = 10;
+        const tolerance = 0.1;
+        
+        for (let iter = 0; iter < maxIterations; iter++) {
+          // Forward reaching: start from end effector
+          positions[numSegments].x = targetX;
+          positions[numSegments].y = targetY;
+          
+          for (let i = numSegments - 1; i >= 0; i--) {
+            const dx = positions[i].x - positions[i + 1].x;
+            const dy = positions[i].y - positions[i + 1].y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            
+            if (dist > 0) {
+              const lambda = armLengths[i] / dist;
+              positions[i].x = positions[i + 1].x + dx * lambda;
+              positions[i].y = positions[i + 1].y + dy * lambda;
+            }
+          }
+          
+          // Backward reaching: start from base
+          positions[0].x = baseX;
+          positions[0].y = baseY;
+          
+          for (let i = 0; i < numSegments; i++) {
+            const dx = positions[i + 1].x - positions[i].x;
+            const dy = positions[i + 1].y - positions[i].y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            
+            if (dist > 0) {
+              const lambda = armLengths[i] / dist;
+              positions[i + 1].x = positions[i].x + dx * lambda;
+              positions[i + 1].y = positions[i].y + dy * lambda;
+            }
+          }
+          
+          // Check convergence
+          const endDx = positions[numSegments].x - targetX;
+          const endDy = positions[numSegments].y - targetY;
+          const endDist = Math.sqrt(endDx * endDx + endDy * endDy);
+          
+          if (endDist < tolerance) break;
+        }
+        
+        // Calculate angles from positions
+        const angles = [];
+        for (let i = 0; i < numSegments; i++) {
+          const dx = positions[i + 1].x - positions[i].x;
+          const dy = positions[i + 1].y - positions[i].y;
+          angles.push(Math.atan2(dy, dx));
+        }
+        
+        // Save positions for next iteration
+        prevPositions = positions;
+        
+        return { angles, positions };
+      };
+
+      // Colors
+      const c0 = d3.rgb(78, 165, 183);
+      const c1 = d3.rgb(206, 192, 250);
+      const c2 = d3.rgb(232, 137, 171);
+      const interp01 = d3.interpolateRgb(c0, c1);
+      const interp12 = d3.interpolateRgb(c1, c2);
+      const colorFor = (v) => {
+        const t = Math.max(0, Math.min(1, v));
+        return t <= 0.5 ? interp01(t / 0.5) : interp12((t - 0.5) / 0.5);
+      };
+
+      const svg = d3.select(container).append('svg')
+        .attr('width', '100%')
+        .style('display', 'block')
+        .style('cursor', 'default');
+
+      const render = () => {
+        const width = container.clientWidth || 800;
+        const height = Math.max(260, Math.round(width / 3));
+        svg.attr('width', width).attr('height', height);
+
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const strokeColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)';
+        const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
+
+        // Base position (left side, bottom)
+        const baseX = width * 0.15;
+        const baseY = height * 0.85;
+        
+        // Max reach of arm (sum of all segments)
+        const maxReach = armLengths.reduce((a, b) => a + b, 0); // 300px
+        
+        // Initialize object positions (only once) - on table surface, within reach
+        if (objects[0].x === 0) {
+          const tableY = baseY - 20; // Same as table surface
+          
+          objects[0].x = baseX + 130;
+          objects[0].y = tableY - objects[0].size / 2 - 4;
+          objects[0].targetX = objects[0].x;
+          objects[0].targetY = objects[0].y;
+          
+          objects[1].x = baseX + 200;
+          objects[1].y = tableY - objects[1].size / 2 - 4;
+          objects[1].targetX = objects[1].x;
+          objects[1].targetY = objects[1].y;
+          
+          objects[2].x = baseX + 270;
+          objects[2].y = tableY - objects[2].size / 2 - 4;
+          objects[2].targetX = objects[2].x;
+          objects[2].targetY = objects[2].y;
+          
+          currentX = baseX + 180;
+          currentY = baseY - 150;
+        }
+
+        // Task execution system
+        const task = tasks[currentTask % tasks.length];
+        taskProgress++;
+        
+        if (taskProgress >= task.duration) {
+          taskProgress = 0;
+          currentTask++;
+          if (currentTask >= tasks.length) {
+            currentTask = 0;
+            // Reset objects to initial positions on table
+            const tableY = baseY - 20;
+            
+            objects[0].x = baseX + 130; 
+            objects[0].y = tableY - objects[0].size / 2 - 4;
+            objects[0].targetX = objects[0].x; 
+            objects[0].targetY = objects[0].y;
+            objects[0].placed = false;
+            
+            objects[1].x = baseX + 200; 
+            objects[1].y = tableY - objects[1].size / 2 - 4;
+            objects[1].targetX = objects[1].x; 
+            objects[1].targetY = objects[1].y;
+            objects[1].placed = false;
+            
+            objects[2].x = baseX + 270; 
+            objects[2].y = tableY - objects[2].size / 2 - 4;
+            objects[2].targetX = objects[2].x; 
+            objects[2].targetY = objects[2].y;
+            objects[2].placed = false;
+            
+            trail.length = 0;
+          }
+        }
+        
+        const t = taskProgress / task.duration; // 0 to 1
+        // Easing function for smooth movement
+        const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+        const smoothT = easeInOutCubic(t);
+        
+        // Execute current task with smooth transitions
+        if (task.type === 'pick') {
+          const obj = objects.find(o => o.id === task.objectId);
+          if (obj) {
+            // Approach object smoothly - hover above it
+            targetX = obj.x;
+            targetY = obj.y - 20; // Hover well above object
+            
+            // Smooth gripper closing
+            if (t > 0.6) {
+              gripperOpenness = Math.max(0, 1 - (t - 0.6) / 0.3);
+              if (t > 0.75 && gripperOpen) {
+                gripperOpen = false;
+                heldObject = obj;
+              }
+            } else {
+              gripperOpenness = 1.0;
+            }
+          }
+        } else if (task.type === 'move') {
+          // Move to placement position (within reach, above table)
+          const destX = baseX + 150 + task.x * 100; // Spread across reachable area
+          const destY = baseY - 80 - task.y * 60; // Stay above table, within reach
+          targetX = destX;
+          targetY = destY;
+        } else if (task.type === 'place') {
+          // Open gripper smoothly
+          if (t > 0.2) {
+            gripperOpenness = Math.min(1, (t - 0.2) / 0.4);
+            if (t > 0.4 && !gripperOpen) {
+              gripperOpen = true;
+              if (heldObject) {
+                heldObject.targetX = targetX;
+                heldObject.targetY = targetY + 20;
+                heldObject.placed = true;
+                heldObject = null;
+              }
+            }
+          }
+        } else if (task.type === 'return') {
+          targetX = baseX + 180;
+          targetY = baseY - 140;
+          gripperOpenness = 1.0;
+        } else if (task.type === 'idle') {
+          targetX = baseX + 180;
+          targetY = baseY - 140;
+          gripperOpenness = 1.0;
+        }
+        
+        // Smooth interpolation of current position towards target
+        const lerpFactor = 0.12; // Smoothing factor
+        currentX += (targetX - currentX) * lerpFactor;
+        currentY += (targetY - currentY) * lerpFactor;
+
+        // Solve IK using smoothed position
+        const { angles, positions: joints } = solveIK(currentX, currentY, baseX, baseY);
+
+        // Update trail
+        const endEffector = joints[joints.length - 1];
+        trail.push({ x: endEffector.x, y: endEffector.y });
+        if (trail.length > trailLength) trail.shift();
+        
+        // Smooth object positions towards their targets
+        objects.forEach(obj => {
+          const objLerpFactor = 0.15;
+          obj.x += (obj.targetX - obj.x) * objLerpFactor;
+          obj.y += (obj.targetY - obj.y) * objLerpFactor;
+        });
+        
+        // Update held object position (stick to gripper)
+        if (heldObject) {
+          heldObject.x = endEffector.x;
+          heldObject.y = endEffector.y + 8;
+        }
+
+        // Ensure container can host tooltip
+        container.style.position = container.style.position || 'relative';
+        let tip = container.querySelector('.d3-tooltip');
+        let tipInner;
+        if (!tip) {
+          tip = document.createElement('div');
+          tip.className = 'd3-tooltip';
+          Object.assign(tip.style, {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            transform: 'translate(-9999px, -9999px)',
+            pointerEvents: 'none',
+            padding: '10px 12px',
+            borderRadius: '12px',
+            fontSize: '12px',
+            lineHeight: '1.35',
+            border: '1px solid var(--border-color)',
+            background: 'var(--surface-bg)',
+            color: 'var(--text-color)',
+            boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
+            opacity: '0',
+            transition: 'opacity .12s ease',
+            backdropFilter: 'saturate(1.12) blur(8px)',
+            zIndex: '20'
+          });
+          tipInner = document.createElement('div');
+          tipInner.className = 'd3-tooltip__inner';
+          Object.assign(tipInner.style, {
+            textAlign: 'left',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '6px',
+            minWidth: '220px'
+          });
+          tip.appendChild(tipInner);
+          container.appendChild(tip);
+        } else {
+          tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+        }
+
+        // Draw workspace table/surface
+        const workspaceGroup = svg.selectAll('g.workspace').data([0]).join('g').attr('class', 'workspace');
+        
+        // Table surface
+        workspaceGroup.selectAll('rect.table').data([0]).join('rect')
+          .attr('class', 'table')
+          .attr('x', baseX + 100)
+          .attr('y', baseY - 20)
+          .attr('width', 200)
+          .attr('height', 8)
+          .attr('fill', isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)')
+          .attr('stroke', isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)')
+          .attr('stroke-width', 1)
+          .attr('rx', 2);
+        
+        // Draw robot base/body
+        const bodyGroup = svg.selectAll('g.robot-body').data([0]).join('g').attr('class', 'robot-body');
+        
+        // Base platform
+        bodyGroup.selectAll('rect.base').data([0]).join('rect')
+          .attr('class', 'base')
+          .attr('x', baseX - 60)
+          .attr('y', baseY - 10)
+          .attr('width', 120)
+          .attr('height', 30)
+          .attr('fill', colorFor(0.1))
+          .attr('stroke', isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)')
+          .attr('stroke-width', 2)
+          .attr('rx', 4);
+        
+        // Vertical pillar
+        bodyGroup.selectAll('rect.pillar').data([0]).join('rect')
+          .attr('class', 'pillar')
+          .attr('x', baseX - 15)
+          .attr('y', baseY - 40)
+          .attr('width', 30)
+          .attr('height', 40)
+          .attr('fill', colorFor(0.15))
+          .attr('stroke', isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)')
+          .attr('stroke-width', 2)
+          .attr('rx', 3);
+        
+        // Draw trail (lighter, behind everything)
+        const trailGroup = svg.selectAll('g.trail').data([0]).join('g').attr('class', 'trail');
+        const trailPath = d3.line()
+          .x(d => d.x)
+          .y(d => d.y)
+          .curve(d3.curveCatmullRom.alpha(0.5));
+        
+        trailGroup.selectAll('path').data([trail]).join('path')
+          .attr('d', trailPath)
+          .attr('fill', 'none')
+          .attr('stroke', colorFor(0.7))
+          .attr('stroke-width', 1.5)
+          .attr('stroke-opacity', 0.25)
+          .attr('stroke-linecap', 'round');
+
+        // Draw arm segments
+        const armGroup = svg.selectAll('g.arm').data([0]).join('g').attr('class', 'arm');
+        
+        armGroup.selectAll('line.segment').data(d3.range(numSegments)).join('line')
+          .attr('class', 'segment')
+          .attr('x1', i => joints[i].x)
+          .attr('y1', i => joints[i].y)
+          .attr('x2', i => joints[i + 1].x)
+          .attr('y2', i => joints[i + 1].y)
+          .attr('stroke', (d, i) => colorFor(i / (numSegments - 1)))
+          .attr('stroke-width', (d, i) => 8 - i * 1.5)
+          .attr('stroke-linecap', 'round')
+          .attr('stroke-opacity', 0.9);
+
+        // Draw objects to manipulate
+        const objectsGroup = svg.selectAll('g.objects').data([0]).join('g').attr('class', 'objects');
+        
+        objectsGroup.selectAll('.object').data(objects).join(
+          enter => {
+            const g = enter.append('g').attr('class', 'object');
+            g.each(function(d) {
+              const elem = d3.select(this);
+              if (d.shape === 'square') {
+                elem.append('rect')
+                  .attr('class', 'obj-shape')
+                  .attr('width', d.size)
+                  .attr('height', d.size)
+                  .attr('rx', 3);
+              } else {
+                elem.append('circle')
+                  .attr('class', 'obj-shape')
+                  .attr('r', d.size / 2);
+              }
+            });
+            return g;
+          },
+          update => update
+        )
+        .attr('transform', d => `translate(${d.x}, ${d.y})`)
+        .style('cursor', 'pointer')
+        .each(function(d) {
+          const shape = d3.select(this).select('.obj-shape');
+          if (d.shape === 'square') {
+            shape
+              .attr('x', -d.size / 2)
+              .attr('y', -d.size / 2)
+              .attr('fill', colorFor(d.color))
+              .attr('stroke', isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.3)')
+              .attr('stroke-width', 2);
+          } else {
+            shape
+              .attr('fill', colorFor(d.color))
+              .attr('stroke', isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.3)')
+              .attr('stroke-width', 2);
+          }
+        })
+        .on('mouseenter', function(ev, d) {
+          d3.select(this).select('.obj-shape')
+            .transition().duration(120)
+            .attr('transform', 'scale(1.1)');
+          tipInner.innerHTML =
+            `<div style="font-weight:800;"><strong>${d.label}</strong></div>` +
+            `<div style="font-size:11px;color:var(--muted-color);margin-top:-2px;">Object ${d.shape === 'square' ? '(Cube)' : '(Sphere)'}</div>` +
+            `<div style="padding-top:4px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${d.x.toFixed(0)} · Y ${d.y.toFixed(0)}</div>` +
+            `<div><strong>Status</strong> ${heldObject === d ? 'Grasped' : 'On table'}</div>`;
+          tip.style.opacity = '1';
+        })
+        .on('mousemove', (ev) => {
+          const [mx, my] = d3.pointer(ev, container);
+          tip.style.transform = `translate(${Math.round(mx + 10)}px, ${Math.round(my + 12)}px)`;
+        })
+        .on('mouseleave', function() {
+          d3.select(this).select('.obj-shape')
+            .transition().duration(120)
+            .attr('transform', 'scale(1)');
+          tip.style.opacity = '0';
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        });
+        
+        // Draw gripper (pincers at end effector) with smooth animation
+        const gripperGroup = svg.selectAll('g.gripper').data([0]).join('g').attr('class', 'gripper');
+        const gripperAngle = angles[numSegments - 1];
+        const gripperSize = 8 + gripperOpenness * 10; // 8px (closed) to 18px (open)
+        
+        gripperGroup.selectAll('line.gripper-jaw').data([1, -1]).join('line')
+          .attr('class', 'gripper-jaw')
+          .attr('x1', endEffector.x)
+          .attr('y1', endEffector.y)
+          .attr('x2', d => endEffector.x + Math.cos(gripperAngle + Math.PI / 2 * d) * gripperSize)
+          .attr('y2', d => endEffector.y + Math.sin(gripperAngle + Math.PI / 2 * d) * gripperSize)
+          .attr('stroke', colorFor(0.9))
+          .attr('stroke-width', 4)
+          .attr('stroke-linecap', 'round')
+          .style('transition', 'all 0.1s ease');
+        
+        // Draw joints
+        const jointGroup = svg.selectAll('g.joints').data([0]).join('g').attr('class', 'joints');
+        
+        jointGroup.selectAll('circle.joint').data(joints.slice(0, -1)).join('circle') // Don't draw last joint (gripper is there)
+          .attr('class', 'joint')
+          .attr('cx', d => d.x)
+          .attr('cy', d => d.y)
+          .attr('r', (d, i) => i === 0 ? 12 : (i === joints.length - 1 ? 10 : 8))
+          .attr('fill', (d, i) => i === 0 ? colorFor(0) : (i === joints.length - 1 ? colorFor(1) : colorFor(i / joints.length)))
+          .attr('stroke', isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)')
+          .attr('stroke-width', 2)
+          .style('cursor', 'pointer')
+          .on('mouseenter', function(ev, d, i) {
+            const idx = joints.indexOf(d);
+            d3.select(this)
+              .raise()
+              .style('filter', `drop-shadow(0 0 12px ${glowColor})`)
+              .transition().duration(120).ease(d3.easeCubicOut)
+              .attr('r', (idx === 0 ? 12 : (idx === joints.length - 1 ? 10 : 8)) * 1.3)
+              .attr('stroke', isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)')
+              .attr('stroke-width', 3);
+            
+            const jointName = idx === 0 ? 'Base Joint' : `Joint ${idx}`;
+            const angle = idx > 0 ? angles[idx - 1] * (180 / Math.PI) : 0;
+            
+            tipInner.innerHTML =
+              `<div style="font-weight:800;letter-spacing:.1px;"><strong>${jointName}</strong></div>` +
+              `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;">Robot Arm Joint</div>` +
+              `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${d.x.toFixed(1)} · <strong>Y</strong> ${d.y.toFixed(1)}</div>` +
+              (idx > 0 ? `<div><strong>Angle</strong> ${angle.toFixed(1)}°</div>` : '') +
+              `<div><strong>Current Task</strong> ${task.type}</div>`;
+            tip.style.opacity = '1';
+          })
+          .on('mousemove', (ev) => {
+            const [mx, my] = d3.pointer(ev, container);
+            tip.style.transform = `translate(${Math.round(mx + 10)}px, ${Math.round(my + 12)}px)`;
+          })
+          .on('mouseleave', function(ev, d) {
+            const idx = joints.indexOf(d);
+            tip.style.opacity = '0';
+            tip.style.transform = 'translate(-9999px, -9999px)';
+            d3.select(this)
+              .style('filter', null)
+              .transition().duration(120).ease(d3.easeCubicOut)
+              .attr('r', idx === 0 ? 12 : (idx === joints.length - 1 ? 10 : 8))
+              .attr('stroke', isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)')
+              .attr('stroke-width', 2);
+          });
+
+        // Draw task status label
+        const statusGroup = svg.selectAll('g.status').data([0]).join('g').attr('class', 'status');
+        
+        const taskText = task.type === 'pick' ? `Picking ${objects.find(o => o.id === task.objectId)?.label}` :
+                        task.type === 'move' ? 'Moving object' :
+                        task.type === 'place' ? 'Placing object' :
+                        task.type === 'return' ? 'Returning to home' : 'Idle';
+        
+        statusGroup.selectAll('text.task-label').data([taskText]).join('text')
+          .attr('class', 'task-label')
+          .attr('x', width - 20)
+          .attr('y', 30)
+          .attr('text-anchor', 'end')
+          .attr('font-size', '14px')
+          .attr('font-weight', '600')
+          .attr('fill', colorFor(0.5))
+          .attr('opacity', 0.8)
+          .text(d => d);
+        
+        // Draw progress bar
+        statusGroup.selectAll('rect.progress-bg').data([0]).join('rect')
+          .attr('class', 'progress-bg')
+          .attr('x', width - 200)
+          .attr('y', 40)
+          .attr('width', 180)
+          .attr('height', 6)
+          .attr('fill', isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)')
+          .attr('rx', 3);
+        
+        statusGroup.selectAll('rect.progress-fill').data([0]).join('rect')
+          .attr('class', 'progress-fill')
+          .attr('x', width - 200)
+          .attr('y', 40)
+          .attr('width', 180 * t)
+          .attr('height', 6)
+          .attr('fill', colorFor(0.5))
+          .attr('rx', 3);
+      };
+
+      // Animation loop
+      let animationFrame;
+      const animate = () => {
+        render();
+        animationFrame = requestAnimationFrame(animate);
+      };
+
+      // Resize handling
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => {
+          // render() is already called in animate loop
+        });
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', () => {
+          // render() is already called in animate loop
+        });
+      }
+
+      // Start animation
+      animate();
+
+      // Cleanup on unmount
+      const cleanup = () => {
+        if (animationFrame) cancelAnimationFrame(animationFrame);
+      };
+      if (container.dataset) container.dataset.cleanup = cleanup;
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else { ensureD3(bootstrap); }
+  })();
+</script>
+