update charts and colors

README.md

@@ -9,3 +9,42 @@ header: mini
 app_port: 8080
 thumbnail: https://huggingface.co/spaces/tfrere/research-paper-template/thumb.jpg
 ---
+
+## Find recent duplicated Spaces
+
+This repository includes a small utility to list public Spaces created in the last N days that were duplicated from a given source Space.
+
+Prerequisites:
+
+```bash
+pip install huggingface_hub requests
+```
+
+Usage:
+
+```bash
+python app/scripts/find_duplicated_spaces.py --source owner/space-name --days 14
+```
+
+Options:
+
+- `--source`: required. The source Space in the form `owner/space-name`.
+- `--days`: optional. Time window in days (default: 14).
+- `--token`: optional. Your HF token. Defaults to `HF_TOKEN` env var if set.
+- `--no-deep`: optional. Disable README/frontmatter fallback detection.
+
+Examples:
+
+```bash
+# Using env var for the token (optional)
+export HF_TOKEN=hf_xxx
+
+# Find Spaces duplicated from tfrere/my-space in the last 14 days
+python app/scripts/find_duplicated_spaces.py --source tfrere/my-space
+
+# Use a 7-day window and explicit token
+python app/scripts/find_duplicated_spaces.py --source tfrere/my-space --days 7 --token $HF_TOKEN
+```
+
+The script first checks card metadata (e.g., `duplicated_from`) and optionally falls back to parsing the README frontmatter for robustness.
+

app/scripts/find_duplicated_spaces.py

@@ -0,0 +1,196 @@
+#!/usr/bin/env python3
+"""
+Find Spaces created in the last N days that were duplicated from a given source Space.
+
+This script uses the public Hugging Face Hub APIs via `huggingface_hub` and optionally
+falls back to reading README frontmatter for robustness.
+
+Usage:
+  python app/scripts/find_duplicated_spaces.py --source owner/space-name [--days 14] [--token <hf_token>] [--no-deep]
+
+Notes:
+  - Comments are in English as requested.
+  - Chat responses remain in French.
+"""
+
+from __future__ import annotations
+
+import argparse
+import os
+from datetime import datetime, timedelta, timezone
+from typing import Iterable, List, Optional
+
+import requests
+from huggingface_hub import HfApi
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser(
+        description="List recent Spaces duplicated from a given Space"
+    )
+    parser.add_argument(
+        "--source",
+        required=True,
+        help="Source Space in the form 'owner/space-name'",
+    )
+    parser.add_argument(
+        "--days",
+        type=int,
+        default=14,
+        help="Time window in days (default: 14)",
+    )
+    parser.add_argument(
+        "--token",
+        default=os.environ.get("HF_TOKEN"),
+        help="Hugging Face token (optional). Defaults to HF_TOKEN env var if set.",
+    )
+    parser.add_argument(
+        "--no-deep",
+        action="store_true",
+        help=(
+            "Disable deep detection (README/frontmatter fetch) when card metadata is missing."
+        ),
+    )
+    return parser.parse_args()
+
+
+def iso_to_datetime(value: str) -> datetime:
+    """Parse ISO 8601 timestamps returned by the Hub to aware datetime in UTC."""
+    # Examples: "2024-09-01T12:34:56.789Z" or without microseconds
+    try:
+        dt = datetime.strptime(value, "%Y-%m-%dT%H:%M:%S.%fZ")
+    except ValueError:
+        dt = datetime.strptime(value, "%Y-%m-%dT%H:%M:%SZ")
+    return dt.replace(tzinfo=timezone.utc)
+
+
+def readme_frontmatter_duplicated_from(space_id: str) -> Optional[str]:
+    """Fetch README raw and try to extract duplicated_from from YAML frontmatter."""
+    # Raw README for Spaces is accessible at /spaces/{id}/raw/README.md
+    url = f"https://huggingface.co/spaces/{space_id}/raw/README.md"
+    try:
+        resp = requests.get(url, timeout=10)
+        if resp.status_code != 200:
+            return None
+        text = resp.text
+    except requests.RequestException:
+        return None
+
+    # Very light-weight frontmatter scan to find a line like: duplicated_from: owner/space
+    # Do not parse full YAML to avoid extra deps.
+    lines = text.splitlines()
+    in_frontmatter = False
+    for line in lines:
+        if line.strip() == "---":
+            in_frontmatter = not in_frontmatter
+            # Stop if we closed the frontmatter without finding the key.
+            if not in_frontmatter:
+                break
+            continue
+        if in_frontmatter and line.strip().startswith("duplicated_from:"):
+            # Extract value after colon, trim quotes/spaces
+            value = line.split(":", 1)[1].strip().strip("'\"")
+            return value or None
+    return None
+
+
+def get_recent_spaces(api: HfApi, days: int) -> Iterable:
+    """Yield Spaces created within the last `days` days, iterating newest first.
+
+    Tries to sort by creation date descending; falls back gracefully if not supported.
+    """
+    cutoff = datetime.now(timezone.utc) - timedelta(days=days)
+
+    # Primary attempt: request spaces sorted by creation date (newest first)
+    try:
+        spaces_iter = api.list_spaces(full=True, sort="created", direction=-1)
+    except TypeError:
+        # Fallback: no sort support in current huggingface_hub; get a reasonably large list
+        # Note: This may include items older than the cutoff; we'll filter below.
+        spaces_iter = api.list_spaces(full=True)
+
+    for space in spaces_iter:
+        created_at_raw = getattr(space, "created_at", None) or getattr(space, "createdAt", None)
+        if not created_at_raw:
+            # If missing, include conservatively
+            yield space
+            continue
+        created_at = (
+            created_at_raw if isinstance(created_at_raw, datetime) else iso_to_datetime(str(created_at_raw))
+        )
+        if created_at >= cutoff:
+            yield space
+        else:
+            # If we know the iteration is sorted by creation desc, we can break early
+            # Only do that when we explicitly asked for sort="created"
+            if "spaces_iter" in locals():
+                try:
+                    # If we reached here under the sorted branch, short-circuit
+                    # by checking if the generator came from the sorted call
+                    _ = api  # keep linter calm
+                except Exception:
+                    pass
+            # We can't be certain the iterator is sorted in fallback; just continue
+            # without breaking to avoid missing any items.
+            continue
+
+
+def find_duplicated_spaces(
+    api: HfApi, source: str, days: int, deep_detection: bool
+) -> List[str]:
+    """Return list of Space IDs that were duplicated from `source` within `days`."""
+    source = source.strip().strip("/ ")
+    results: List[str] = []
+    for space in get_recent_spaces(api, days=days):
+        space_id = getattr(space, "id", None) or getattr(space, "repo_id", None)
+        if not space_id:
+            continue
+
+        # Check card metadata first
+        card = getattr(space, "cardData", None) or getattr(space, "card_data", None)
+        duplicated_from_value: Optional[str] = None
+        if isinstance(card, dict):
+            for key in ("duplicated_from", "duplicatedFrom", "duplicated-from"):
+                if key in card and isinstance(card[key], str):
+                    duplicated_from_value = card[key].strip().strip("/ ")
+                    break
+
+        # Optional deep detection via README frontmatter
+        if not duplicated_from_value and deep_detection:
+            duplicated_from_value = readme_frontmatter_duplicated_from(space_id)
+            if duplicated_from_value:
+                duplicated_from_value = duplicated_from_value.strip().strip("/ ")
+
+        if duplicated_from_value and duplicated_from_value.lower() == source.lower():
+            results.append(space_id)
+
+    return results
+
+
+def main() -> None:
+    args = parse_args()
+    api = HfApi(token=args.token)
+
+    duplicated = find_duplicated_spaces(
+        api=api,
+        source=args.source,
+        days=args.days,
+        deep_detection=not args.no_deep,
+    )
+
+    if duplicated:
+        print(
+            f"Found {len(duplicated)} Space(s) duplicated from {args.source} in the last {args.days} days:\n"
+        )
+        for sid in duplicated:
+            print(f"https://huggingface.co/spaces/{sid}")
+    else:
+        print(
+            f"No public Spaces duplicated from {args.source} in the last {args.days} days."
+        )
+
+
+if __name__ == "__main__":
+    main()
+
+

app/src/components/ColorPicker.astro

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

app/src/components/HtmlEmbed.astro

@@ -33,11 +33,7 @@ const configAttr = typeof config === 'string' ? config : (config != null ? JSON.
   <div><!-- Fragment not found: {src} --></div>
  ) }
 
-<script type="module" is:inline>
-  // Ensure global color palettes generator is loaded once per page
-  import '../scripts/color-palettes.js';
-  export {};
-</script>
+
 
 <script>
   // Re-execute <script> tags inside the injected fragment (innerHTML doesn't run scripts)

app/src/components/Palettes.astro

@@ -0,0 +1,169 @@
+---
+const rootId = `palettes-${Math.random().toString(36).slice(2)}`;
+---
+<div class="palettes" id={rootId} style="width:100%; margin: 10px 0;">
+  <style is:global>
+    .palettes { box-sizing: border-box; }
+    .palettes .palettes__grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 100%; }
+    .palettes .palette-card { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 220px); align-items: stretch; gap: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; min-height: 60px; }
+    .palettes .palette-card__preview { width: 48px; height: 48px; border-radius: 999px; flex: 0 0 auto; background-size: cover; background-position: center; }
+    .palettes .palette-card__copy { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); z-index: 3;  border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
+    .palettes .palette-card__copy svg { width: 18px; height: 18px; fill: currentColor; display: block; color: inherit; }
+    .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 2px; margin: 0; min-height: 60px; }
+    .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; height: auto; border-radius: 0; border: 1px solid var(--border-color); }
+    .palettes .palette-card__swatches .sw:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
+    .palettes .palette-card__swatches .sw:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
+    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; padding-right: 12px; }
+    .palettes .palette-card__preview { width: 48px; height: 48px; border-radius: 999px; position: relative; flex: 0 0 auto; overflow: hidden; }
+    .palettes .palette-card__preview .dot { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 999px; box-shadow: 0 0 0 1px var(--border-color); }
+    .palettes .palette-card__preview .donut-hole { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 999px; background: var(--surface-bg); box-shadow: 0 0 0 1px var(--border-color) inset; }
+    
+    .palettes .palette-card__content__info { display: flex; flex-direction: column; }
+    .palettes .palette-card__title { text-align: left; font-weight: 800; font-size: 15px; }
+    .palettes .palette-card__desc { text-align: left; color: var(--muted-color); line-height: 1.5; font-size: 12px; }
+    
+    .palettes .palettes__select { width: 100%; max-width: 100%; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color); padding: 8px 10px; border-radius: 8px; }
+    .palettes .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
+    .palettes .palettes__controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 14px; }
+    .palettes .palettes__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; max-width: 100%; }
+    .palettes .palettes__label { font-size: 12px; color: var(--muted-color); font-weight: 800; }
+    .palettes .palettes__label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .palettes .ghost-badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--muted-color); background: transparent; font-variant-numeric: tabular-nums; }
+    .palettes .palettes__count { display: flex; align-items: center; gap: 8px; max-width: 100%; }
+    .palettes .palettes__count input[type="range"] { width: 100%; }
+    .palettes .palettes__count output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted-color); }
+    .palettes input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; accent-color: var(--primary-color); }
+    .palettes input[type="range"]:focus { outline: none; }
+    .palettes input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--border-color); border-radius: 999px; }
+    .palettes input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
+    .palettes input[type="range"]::-moz-range-track { height: 6px; background: var(--border-color); border: none; border-radius: 999px; }
+    .palettes input[type="range"]::-moz-range-progress { height: 6px; background: var(--primary-color); border-radius: 999px; }
+    .palettes input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); border: 2px solid var(--surface-bg); border-radius: 50%; }
+    html.cb-grayscale, body.cb-grayscale { filter: grayscale(1) !important; }
+    html.cb-protanopia, body.cb-protanopia { filter: url(#cb-protanopia) !important; }
+    html.cb-deuteranopia, body.cb-deuteranopia { filter: url(#cb-deuteranopia) !important; }
+    html.cb-tritanopia, body.cb-tritanopia { filter: url(#cb-tritanopia) !important; }
+    html.cb-achromatopsia, body.cb-achromatopsia { filter: url(#cb-achromatopsia) !important; }
+    @media (max-width: 1100px) { .palettes .palette-card { grid-template-columns: 1fr; align-items: stretch; gap: 10px; } .palettes .palette-card__swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } .palettes .palette-card__content { border-right: none; padding-right: 0; } .palettes .palette-card__copy { display: none; } }
+  </style>
+  <div class="palettes__controls">
+    <div class="palettes__field">
+      <label class="palettes__label" for="cb-select">Color vision simulation</label>
+      <select id="cb-select" class="palettes__select">
+        <option value="none">Normal color vision — typical for most people</option>
+        <option value="achromatopsia">Achromatopsia — no color at all</option>
+        <option value="protanopia">Protanopia — reduced/absent reds</option>
+        <option value="deuteranopia">Deuteranopia — reduced/absent greens</option>
+        <option value="tritanopia">Tritanopia — reduced/absent blues</option>
+      </select>
+    </div>
+    <div class="palettes__field">
+      <div class="palettes__label-row">
+        <label class="palettes__label" for="color-count">Number of colors</label>
+        <output id="color-count-out" for="color-count" class="ghost-badge">8</output>
+      </div>
+      <div class="palettes__count">
+        <input id="color-count" type="range" min="6" max="10" step="1" value="8" aria-label="Number of colors" />
+      </div>
+    </div>
+  </div>
+  <div class="palettes__grid"></div>
+  <div class="palettes__simu" role="group" aria-labelledby="cb-sim-title">
+    <svg aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute; left:-9999px; overflow:hidden;">
+      <defs>
+        <filter id="cb-protanopia"><feColorMatrix type="matrix" values="0.567 0.433 0     0 0  0.558 0.442 0     0 0  0      0.242 0.758 0 0  0 0 0 1 0"/></filter>
+        <filter id="cb-deuteranopia"><feColorMatrix type="matrix" values="0.625 0.375 0     0 0  0.7   0.3   0     0 0  0      0.3   0.7   0 0  0 0 0 1 0"/></filter>
+        <filter id="cb-tritanopia"><feColorMatrix type="matrix" values="0.95  0.05  0     0 0  0     0.433 0.567 0 0  0     0.475 0.525 0 0  0 0 0 1 0"/></filter>
+        <filter id="cb-achromatopsia"><feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0 0 0 1 0"/></filter>
+      </defs>
+    </svg>
+  </div>
+</div>
+<script type="module" is:inline>
+  import '/src/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/content/chapters/introduction.mdx

@@ -17,7 +17,8 @@ import Sidenote from "../../components/Sidenote.astro";
   <span className="tag">Markdown-based</span>
   <span className="tag">KaTeX math</span>
   <span className="tag">Syntax highlighting</span>
-  <span className="tag">Citations & footnotes</span>
+  <span className="tag">Citations in all flavors</span>
+  <span className="tag">Footnotes</span>
   <span className="tag">Table of contents</span>
   <span className="tag">Mermaid diagrams</span>
   <span className="tag">Plotly ready</span>

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

@@ -27,8 +27,8 @@ I want you to code a d3 chart that visualizes the data.
 
 They can be found in the `app/src/content/embeds` folder and you can also use them as a starting point or examples to vibe code with.
 
-  <HtmlEmbed
-    title="d3-benchmark: LLM Benchmark"
+<HtmlEmbed
+  title="d3-benchmark: LLM Benchmark"
   src="d3-benchmark.html" desc={`Figure 1: Grouped bar chart comparing model scores across benchmarks (MMLU, GSM8K, HellaSwag, TruthfulQA, ARC‑C). Each group is a benchmark; colors encode models; values are accuracy/score (higher is better).`}  />
 ---
   <HtmlEmbed

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

@@ -6,6 +6,8 @@ import Wide from '../../components/Wide.astro';
 import Note from '../../components/Note.astro';
 import FullWidth from '../../components/FullWidth.astro';
 import HtmlEmbed from '../../components/HtmlEmbed.astro';
+import ColorPicker from '../../components/ColorPicker.astro';
+import Palettes from '../../components/Palettes.astro';
 import audioDemo from '../assets/audio/audio-example.wav';
 import Accordion from '../../components/Accordion.astro';
 
@@ -130,7 +132,7 @@ Use the **color picker** below to see how the primary color affects the theme.
 #### Brand color
 
 <Sidenote>
-  <HtmlEmbed frameless src="demo/color-picker.html" />
+  <ColorPicker />
   <Fragment slot="aside">
     You can use the color picker to select the right color.
     
@@ -143,7 +145,7 @@ Use the **color picker** below to see how the primary color affects the theme.
 
 Here is a suggestion of **color palettes** for your **data visualizations** that align with your **brand identity**. These palettes are generated from your `--primary-color`.
 
-<HtmlEmbed frameless src="demo/palettes.html" />
+<Palettes />
 <br/>
 **Use color with care.**
 Color should rarely be the only channel of meaning.

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

@@ -1,16 +1,5 @@
 <div class="d3-bar"  ></div>
 <style>
-  /* Theme-driven axis/tick/grid variables */
-  .d3-bar {
-    --axis-color: rgba(0,0,0,0.25);
-    --tick-color: rgba(0,0,0,0.55);
-    --grid-color: rgba(0,0,0,0.05);
-  }
-  [data-theme="dark"] .d3-bar {
-    --axis-color: rgba(255,255,255,0.25);
-    --tick-color: rgba(255,255,255,0.70);
-    --grid-color: rgba(255,255,255,0.08);
-  }
   .d3-bar .controls { margin-top: 0; display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
   .d3-bar .controls .control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
   .d3-bar .controls label { font-size: 12px; color: var(--text-color); font-weight: 700; }

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

@@ -1,16 +1,6 @@
 <div class="d3-benchmark"></div>
 <style>
-  .d3-benchmark {
-    position: relative;
-    --axis-color: rgba(0,0,0,0.25);
-    --tick-color: rgba(0,0,0,0.55);
-    --grid-color: rgba(0,0,0,0.05);
-  }
-  [data-theme="dark"] .d3-benchmark {
-    --axis-color: rgba(255,255,255,0.25);
-    --tick-color: rgba(255,255,255,0.70);
-    --grid-color: rgba(255,255,255,0.08);
-  }
+  .d3-benchmark { position: relative; }
   .d3-benchmark .controls {
     display: flex;
     align-items: center;

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

@@ -184,6 +184,8 @@
 <script>
   (() => {
     const THIS_SCRIPT = document.currentScript;
+    // Shared run->color mapping to keep legend and series perfectly in sync
+    let SHARED_RUN_COLOR = null;
     // Pretty label mapping for metric keys
     const prettyMetricLabel = (key) => {
       if (!key) return '';
@@ -270,8 +272,12 @@
       let axisLabelY = 'Value';
       
       // Colors and markers (match original embeds)
-      const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
-      const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])];
+      const getRunColors = (n) => {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch(_) {}
+        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
+        return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])].slice(0, n);
+      };
+      const pool = getRunColors(12);
       // Shapes supprimés: on n'utilise que la couleur
       // Ready signal for async load completion
       let readyResolve = null;
@@ -371,9 +377,15 @@
         }
 
         axisLabelY = isRankStrict ? 'Rank' : prettyMetricLabel(metricKey);
+        const tChange = (window.d3 && d3.transition) ? d3.transition().duration(260).ease(d3.easeCubicOut) : null;
         const { innerWidth, innerHeight } = updateScales();
 
-        const series = runs.map((r, i) => ({ run:r, color: pool[i % pool.length], values:(map[r]||[]).slice().sort((a,b)=>a.step-b.step).map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt) }));
+        const colorForRun = (run, idx) => {
+          if (SHARED_RUN_COLOR && Object.prototype.hasOwnProperty.call(SHARED_RUN_COLOR, run)) return SHARED_RUN_COLOR[run];
+          const j = (typeof idx === 'number' ? idx : runs.indexOf(run));
+          return pool[(j >= 0 ? j : 0) % pool.length];
+        };
+        const series = runs.map((r, i) => ({ run:r, color: colorForRun(r, i), values:(map[r]||[]).slice().sort((a,b)=>a.step-b.step).map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt) }));
 
         // zones ± stderr (métriques non rank)
         gAreas.selectAll('*').remove();
@@ -407,10 +419,10 @@
           .attr('opacity',0)
           .attr('stroke', d=>d.color)
           .attr('d', d=>lineGen(d.values))
-          .transition().duration(450).ease(d3.easeCubicOut)
+          .transition(tChange || undefined)
           .attr('opacity',0.9);
         paths
-          .transition().duration(450).ease(d3.easeCubicOut)
+          .transition(tChange || undefined)
           .attr('stroke', d=>d.color)
           .attr('opacity',0.9)
           .attr('d', d=>lineGen(d.values));
@@ -421,14 +433,16 @@
         const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d=> `${d.run}-${d.step}`);
         ptsSel.enter().append('circle').attr('class','pt')
           .attr('data-run', d=>d.run)
-          .attr('r', 2)
+          .attr('r', 1.5)
           .attr('fill', d=>d.color)
           .attr('fill-opacity', 0.6)
           .attr('stroke', 'none')
           .attr('cx', d=>xScale(d.step))
           .attr('cy', d=>yScale(d.value))
           .merge(ptsSel)
-          .transition().duration(180)
+          .attr('fill', d=>d.color)
+          .transition(tChange || undefined)
+          .attr('r', 2)
           .attr('cx', d=>xScale(d.step))
           .attr('cy', d=>yScale(d.value));
         ptsSel.exit().remove();
@@ -579,13 +593,22 @@
             if (r.ok && window.d3 && window.d3.csvParse) {
               const txt = await r.text();
               const rows = window.d3.csvParse(txt);
-              const runList = Array.from(new Set(rows.map(row => String(row.run||'').trim()).filter(Boolean)));
-              const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
-              const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...((window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'])];
-              legendItemsHost.innerHTML = runList.map((name, i)=> {
-                const color = pool[i % pool.length];
+              const runList = Array.from(new Set(rows.map(row => String(row.run||'').trim()).filter(Boolean))).sort();
+              const poolLegend = (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function')
+                ? window.ColorPalettes.getColors('categorical', runList.length)
+                : (()=>{ const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB'; return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...((window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'])]; })();
+              // Build shared run->color map once
+              SHARED_RUN_COLOR = {};
+              runList.forEach((name, i) => { SHARED_RUN_COLOR[name] = poolLegend[i % poolLegend.length]; });
+              legendItemsHost.innerHTML = runList.map((name) => {
+                const color = SHARED_RUN_COLOR[name];
                 return `<span class="item" data-run="${name}"><span class=\"swatch\" style=\"background:${color}\"></span><span>${name}</span></span>`;
               }).join('');
+              // Re-render all cells with the shared mapping to ensure perfect sync
+              try {
+                const currentMetric = (select && select.value) || def;
+                if (currentMetric) applyAll(currentMetric);
+              } catch {}
               // Legend hover ghosting across all cells
               legendItemsHost.querySelectorAll('.item').forEach(el => {
                 el.addEventListener('mouseenter', () => {

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

@@ -1,17 +1,6 @@
 <div class="d3-line-simple"></div>
 <style>
   .d3-line-simple { position: relative; }
-  /* Theme-driven axis/tick/grid variables */
-  .d3-line-simple {
-    --axis-color: rgba(0,0,0,0.25);
-    --tick-color: rgba(0,0,0,0.55);
-    --grid-color: rgba(0,0,0,0.05);
-  }
-  [data-theme="dark"] .d3-line-simple {
-    --axis-color: rgba(255,255,255,0.25);
-    --tick-color: rgba(255,255,255,0.70);
-    --grid-color: rgba(255,255,255,0.08);
-  }
   .d3-line-simple .controls {
     margin-top: 0;
     display: flex;

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

@@ -105,7 +105,7 @@
       const gOutText = gRoot.append('g').attr('class','out-probs');
 
       // Network structure (compact: 8 -> 8 -> 10)
-      const layerSizes = [8, 8, 8];
+      const layerSizes = [8, 8, 10];
       const layers = layerSizes.map((n, li)=> Array.from({length:n}, (_, i)=>({ id:`L${li}N${i}`, layer: li, index: i, a:0 })));
       // Links only between hidden->hidden and hidden->output
       const links = [];

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

@@ -201,7 +201,11 @@
 
         // Catégories (triées) + échelle de couleurs harmonisée avec banner.html
         const categories = Array.from(new Set(rows.map(r => r.eagle_cathegory || 'Unknown'))).sort();
-        const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10);
+        const getCatColors = (n) => {
+          try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch(_) {}
+          return (d3.schemeTableau10 ? d3.schemeTableau10.slice(0, n) : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'].slice(0, n));
+        };
+        const color = d3.scaleOrdinal().domain(categories).range(getCatColors(categories.length));
         const colorOf = (cat) => color(cat || 'Unknown');
 
         // Clear plots grid

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

@@ -122,12 +122,16 @@
 
       function refreshPalette(){
         try {
-          const raw = getComputedStyle(document.documentElement).getPropertyValue('--palette-categorical-json').trim();
-          const arr = raw ? JSON.parse(raw) : [];
-          if (arr && arr.length) color.range(arr);
-          else color.range(['var(--primary-color)','#4EA5B7','#E38A42','#CEC0FA','#98C97C','#F6BD60']);
+          const cats = categories && categories.length ? categories.length : 6;
+          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+            const arr = window.ColorPalettes.getColors('categorical', cats) || [];
+            if (arr && arr.length) { color.range(arr); return; }
+          }
+          // fallback
+          color.range((d3.schemeTableau10 ? d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab']).slice(0, cats));
         } catch {
-          color.range(['var(--primary-color)','#4EA5B7','#E38A42','#CEC0FA','#98C97C','#F6BD60']);
+          const cats = categories && categories.length ? categories.length : 6;
+          color.range((d3.schemeTableau10 ? d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab']).slice(0, cats));
         }
         // Recolor existing marks/labels after palette changes
         try { if (data && data.length) draw(); } catch {}

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

@@ -3,7 +3,7 @@
 ### Quickstart (TL;DR)
 - Create a single self-contained HTML fragment: root div + scoped style + IIFE script.
 - Draw marks/axes in SVG; render UI (legend and controls) in HTML.
-- Place legend and controls ABOVE the chart. Include a legend title "Legend" and a select labeled "Metric" when relevant.
+- Place legend and controls BELOW the chart (header appended after the chart). Include a legend title "Legend" and a select labeled "Metric" when relevant.
 - Load data from public `/data` first, then fall back to `assets/data`.
 - Use `window.ColorPalettes` for colors; stick to CSS variables for theming.
 
@@ -160,27 +160,25 @@ Minimal skeleton:
   - Prefer CSS-only where possible.
 - Keep backgrounds light and borders subtle; the outer card frame is handled by `HtmlEmbed.astro`.
 
-Standard axis/tick/grid colors (reuse across charts):
+Standard axis/tick/grid colors (global variables from `_variables.css`):
 
 ```css
-.your-root-class {
-  --axis-color: rgba(0,0,0,0.25);
-  --tick-color: rgba(0,0,0,0.55);
-  --grid-color: rgba(0,0,0,0.05);
+/* Provided globally */
+:root {
+  --axis-color: var(--text-color);
+  --tick-color: var(--muted-color);
+  --grid-color: rgba(0,0,0,.08);
 }
-[data-theme="dark"] .your-root-class {
-  --axis-color: rgba(255,255,255,0.25);
-  --tick-color: rgba(255,255,255,0.70);
-  --grid-color: rgba(255,255,255,0.08);
+[data-theme="dark"] {
+  --axis-color: var(--text-color);
+  --tick-color: var(--muted-color);
+  --grid-color: rgba(255,255,255,.10);
 }
-/* Example axis application (D3) */
-g.axis-x, g.axis-y { }
-/* In JS after calling axis: */
-// g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
-// g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size','12px');
-/* Gridlines: */
-// grid.call(d3.axisLeft(y).ticks(6).tickSize(-innerWidth).tickFormat(''))
-//   .call(g => g.selectAll('.tick line').attr('stroke','var(--grid-color)'));
+/* Apply inside charts */
+.your-root-class .axes path,
+.your-root-class .axes line { stroke: var(--axis-color); }
+.your-root-class .axes text { fill: var(--tick-color); }
+.your-root-class .grid line { stroke: var(--grid-color); }
 ```
 
 #### 3.1) Text on fixed-colored backgrounds

app/src/scripts/color-palettes.js

@@ -214,6 +214,7 @@
     };
     window.ColorPalettes = {
       refresh: updatePalettes,
+      notify: () => { try { const primary = getPrimaryHex(); document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary } })); } catch {} },
       getPrimary: () => getPrimaryHex(),
       getColors: (key, count = 6) => {
         const primary = getPrimaryHex();