pyfrilet 0.1.1

package/pyfrilet.js

@@ -0,0 +1,1062 @@
+/**
+ * pyfrilet.js — Python/p5 in-page runtime with slide-up editor
+ *
+ * Usage in your HTML:
+ *   <script src="pyfrilet.js"></script>
+ *   <script type="text/python" data-sources="local" data-vendor="vendor/">
+ *     from p5 import *
+ *     def setup(): size(400, 400)
+ *     def draw():  background(0)
+ *   </script>
+ *
+ *  data-sources : "local" (default) | "cdn"
+ *  data-vendor  : path to local vendor folder, default "vendor/"
+ *
+ * Keyboard shortcuts:
+ *   Shift+Enter  → run code (also closes editor)
+ *   Escape       → close editor without running
+ *   Ctrl+S       → save to localStorage
+ *   Ctrl+R       → reset to starter code
+ */
+(function () {
+'use strict';
+
+/* ── capture script element immediately (for self-fetch in download) ── */
+const _scriptEl  = document.currentScript;
+const _scriptSrc = _scriptEl ? (_scriptEl.src || '') : '';
+
+/* ═══════════════════════════ CDN URLS ═══════════════════════════════ */
+const CDN = {
+  p5          : 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js',
+  pyodide     : 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js',
+  ace         : 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.min.js',
+  acePython   : 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/mode-python.min.js',
+  aceMonokai  : 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/theme-monokai.min.js',
+  aceLangTools: 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ext-language_tools.min.js',
+  aceSearchbox: 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ext-searchbox.min.js',
+};
+
+/* ═══════════════════════════ STYLES ═════════════════════════════════ */
+const STYLES = `
+html, body {
+  height: 100%; margin: 0; overflow: hidden;
+  background: #111;
+}
+#pf-root {
+  position: fixed; inset: 0;
+  display: flex; flex-direction: column;
+  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+}
+
+/* ── app area ── */
+#pf-app {
+  flex: 1; min-height: 0;
+  position: relative;
+  background: #111;
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden;
+}
+#pf-viewport {
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+#pf-viewport canvas {
+  display: block;
+  outline: none;
+}
+#pf-loader {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 14px;
+  background: #111;
+  color: #565f89;
+  font-size: 13px;
+  z-index: 50;
+  pointer-events: none;
+}
+#pf-loader-bar {
+  width: 160px; height: 2px;
+  background: #2a2c3e;
+  border-radius: 2px;
+  overflow: hidden;
+}
+#pf-loader-bar::after {
+  content: '';
+  display: block;
+  height: 100%;
+  width: 40%;
+  background: #7aa2f7;
+  border-radius: 2px;
+  animation: pf-slide 1.2s ease-in-out infinite;
+}
+@keyframes pf-slide {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+
+/* ── drawer (slide-up editor panel) ── */
+#pf-drawer {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: #1a1b26;
+  height: 32px;   /* collapsed = handle only */
+  transition: height 0.26s cubic-bezier(.4, 0, .2, 1);
+  overflow: hidden;
+  /* shadow cast upward onto the app */
+  box-shadow: 0 -4px 20px rgba(0,0,0,.55);
+}
+#pf-drawer.pf-open {
+  height: var(--pf-drawer-h, 56vh);
+}
+
+/* ── handle bar ── */
+#pf-handle {
+  height: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 6px;
+  background: #24283b;
+  border-top: 1px solid #3d4166;
+  cursor: ns-resize;
+  user-select: none;
+  gap: 6px;
+  flex-shrink: 0;
+}
+/* grip zone: clickable to toggle, draggable to resize */
+#pf-grip {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 5px 6px;
+  flex-shrink: 0;
+  opacity: .5;
+  border-radius: 4px;
+  transition: opacity .15s, background .15s;
+  cursor: pointer;
+}
+#pf-grip:hover { opacity: .85; background: rgba(255,255,255,.06); }
+#pf-grip span {
+  display: block;
+  width: 16px; height: 2px;
+  background: #a9b1d6;
+  border-radius: 1px;
+}
+#pf-handle-hint {
+  flex: 1;
+  color: #565f89;
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#pf-handle-btns {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.pf-btn {
+  height: 26px;
+  min-width: 26px;
+  padding: 0 5px;
+  border: 0; border-radius: 5px;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 13px; line-height: 1;
+  white-space: nowrap;
+  transition: background .15s, transform .1s, opacity .15s;
+  outline: none;
+  box-sizing: border-box;
+}
+.pf-btn:active { transform: scale(.88); }
+.pf-btn:focus-visible { outline: 2px solid #7aa2f7; outline-offset: 1px; }
+
+#pf-btn-run  { background: #1a6b3a; color: #9ece6a; font-size: 11px; }
+#pf-btn-run:hover  { background: #1f8447; color: #b9f27a; }
+#pf-btn-run.pf-running { opacity: .5; cursor: not-allowed; }
+
+#pf-btn-code { background: #2a2c3e; color: #7aa2f7; font-size: 14px; }
+#pf-btn-code:hover  { background: #3d4166; color: #c0caf5; }
+#pf-btn-code.pf-active { background: #3d4166; color: #e0af68; }
+
+#pf-btn-dl   { background: #2a2c3e; color: #9d7cd8; font-size: 14px; }
+#pf-btn-dl:hover   { background: #3d4166; color: #bb9af7; }
+
+#pf-btn-reset { background: #2a2c3e; color: #e0af68; font-size: 16px; }
+#pf-btn-reset:hover { background: #3d4166; color: #ffc777; }
+
+/* ── editor area inside drawer ── */
+#pf-editor-wrap {
+  flex: 1;
+  min-height: 80px;
+  position: relative;
+}
+#pf-ace { position: absolute; inset: 0; }
+
+/* ── error panel (below editor, never overlaps ACE) ── */
+#pf-err {
+  flex-shrink: 0;
+  max-height: 120px;
+  overflow: auto;
+  margin: 0; padding: 8px 13px;
+  font-size: 11.5px; line-height: 1.45;
+  background: rgba(13, 3, 3, .95);
+  color: #f7768e;
+  white-space: pre-wrap;
+  display: none;
+  border-top: 1px solid rgba(247, 118, 142, .35);
+}
+`;
+
+/* ═══════════════════════════ MARKUP ═════════════════════════════════ */
+const MARKUP = `
+<div id="pf-root">
+  <div id="pf-app">
+    <div id="pf-viewport"><div id="pf-sketch"></div></div>
+    <div id="pf-loader">
+      <span id="pf-loader-msg">Chargement…</span>
+      <div id="pf-loader-bar"></div>
+    </div>
+  </div>
+  <div id="pf-drawer">
+    <div id="pf-handle">
+      <div id="pf-grip" title="Clic → ouvrir/fermer"><span></span><span></span><span></span></div>
+      <span id="pf-handle-hint">Clic ☰ → ouvrir/fermer &nbsp;·&nbsp; Shift+Entrée → relancer</span>
+      <div id="pf-handle-btns">
+        <button class="pf-btn" id="pf-btn-run"   title="Relancer (Shift+Entrée)">&#9654;</button>
+        <button class="pf-btn" id="pf-btn-code"  title="Éditeur plein écran">&#9999;&#xFE0F;</button>
+        <button class="pf-btn" id="pf-btn-dl"    title="Télécharger HTML autonome">&#128190;</button>
+        <button class="pf-btn" id="pf-btn-help"  title="Aide">?</button>
+        <button class="pf-btn" id="pf-btn-reset" title="Réinitialiser le code (Ctrl+R)">&#8635;</button>
+      </div>
+    </div>
+    <div id="pf-editor-wrap">
+      <div id="pf-ace"></div>
+    </div>
+    <pre id="pf-err"></pre>
+  </div>
+</div>
+`;
+
+/* ═══════════════════════════ ENTRY POINT ════════════════════════════ */
+document.addEventListener('DOMContentLoaded', function () {
+
+  const pyTag = document.querySelector('script[type="text/python"]')
+             || document.querySelector('python');
+  if (!pyTag) {
+    console.warn('[pyfrilet] No <script type="text/python"> or <python> tag found.');
+    return;
+  }
+
+  const sources = (
+    pyTag.getAttribute('data-sources') ||
+    pyTag.getAttribute('sources') ||
+    'local'
+  ).toLowerCase().trim();
+
+  const vpRaw = (
+    pyTag.getAttribute('data-vendor') ||
+    pyTag.getAttribute('vendor') ||
+    'vendor/'
+  );
+  const vp = vpRaw.replace(/\/?$/, '/');   /* ensure trailing slash */
+
+  const URLS = sources === 'cdn' ? {
+    p5          : CDN.p5,
+    pyodide     : CDN.pyodide,
+    pyodideIndex: null,
+    ace         : CDN.ace,
+    acePython   : CDN.acePython,
+    aceMonokai  : CDN.aceMonokai,
+    aceLangTools: CDN.aceLangTools,
+    aceSearchbox: CDN.aceSearchbox,
+  } : {
+    p5          : vp + 'p5.min.js',
+    pyodide     : vp + 'pyodide/pyodide.js',
+    pyodideIndex: vp + 'pyodide/',
+    ace         : vp + 'ace.min.js',
+    acePython   : vp + 'mode-python.min.js',
+    aceMonokai  : vp + 'theme-monokai.min.js',
+    aceLangTools: vp + 'ext-language_tools.min.js',
+    aceSearchbox: vp + 'ext-searchbox.min.js',
+  };
+
+  /* Dedent / strip leading blank line from embedded code */
+  const starterCode = pyTag.textContent.replace(/^\n/, '');
+
+  const SK  = 'pyfrilet:' + location.pathname;
+  const saved = (() => { try { return localStorage.getItem(SK); } catch (e) { return null; } })();
+  const initialCode = (saved && saved.trim()) ? saved : starterCode;
+
+  main(initialCode, starterCode, SK, URLS);
+});
+
+/* ═══════════════════════════ MAIN ═══════════════════════════════════ */
+function main(initialCode, starterCode, SK, URLS) {
+
+  /* ── inject styles + markup ── */
+  const styleEl = document.createElement('style');
+  styleEl.textContent = STYLES;
+  document.head.appendChild(styleEl);
+  document.body.innerHTML = MARKUP;
+
+  /* ── element refs ── */
+  const appEl       = document.getElementById('pf-app');
+  const drawerEl    = document.getElementById('pf-drawer');
+  const handleEl    = document.getElementById('pf-handle');
+  const sketchEl    = document.getElementById('pf-sketch');
+  const viewEl      = document.getElementById('pf-viewport');
+  const loaderEl    = document.getElementById('pf-loader');
+  const loaderMsg   = document.getElementById('pf-loader-msg');
+  const errEl       = document.getElementById('pf-err');
+  const btnRun      = document.getElementById('pf-btn-run');
+  const btnCode     = document.getElementById('pf-btn-code');
+  const btnDl       = document.getElementById('pf-btn-dl');
+  const btnReset    = document.getElementById('pf-btn-reset');
+  const btnHelp     = document.getElementById('pf-btn-help');
+  const gripEl      = document.getElementById('pf-grip');
+  const hintEl      = document.getElementById('pf-handle-hint');
+
+  /* ─────────────────── DRAWER ─────────────────── */
+  let drawerOpen = false;
+  let drawerH    = Math.round(window.innerHeight * 0.56);   /* px, user-adjustable */
+
+  function _applyDrawerH() {
+    document.documentElement.style.setProperty('--pf-drawer-h', drawerH + 'px');
+  }
+  _applyDrawerH();
+
+  function openDrawer() {
+    drawerOpen = true;
+    drawerEl.classList.add('pf-open');
+    btnCode.classList.add('pf-active');
+    /* wait for CSS transition to finish before notifying p5 */
+    setTimeout(() => { notifyResize(); if (aceInst) aceInst.focus(); }, 280);
+  }
+  function closeDrawer() {
+    drawerOpen = false;
+    drawerEl.classList.remove('pf-open');
+    btnCode.classList.remove('pf-active');
+    setTimeout(() => {
+      notifyResize();
+      const canvas = p5Bridge._p?.canvas;
+      if (canvas) { canvas.setAttribute('tabindex', '0'); canvas.focus(); }
+      else appEl.focus();
+    }, 280);
+  }
+  function toggleDrawer() { drawerOpen ? closeDrawer() : openDrawer(); }
+
+  /* ── drag-to-resize handle, double-click-to-toggle ── */
+  let drag = null;
+  const DRAG_THRESHOLD  = 5;    /* px movement before it counts as a drag */
+  const SNAP_CLOSE_H    = 120;  /* px — snap shut when dragged below this */
+
+  /* Transparent overlay that captures all pointer events during drag,
+     preventing the ACE editor / canvas from swallowing mousemove/mouseup */
+  const dragOverlay = document.createElement('div');
+  Object.assign(dragOverlay.style, {
+    position: 'fixed', inset: '0',
+    zIndex: '9999', cursor: 'ns-resize',
+    display: 'none',
+  });
+  document.body.appendChild(dragOverlay);
+
+  function dragStart(e) {
+    if (e.target.closest('.pf-btn')) return;
+    if (e.target.closest('#pf-grip')) return;  /* let grip handle its own click */
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    drag = { y: clientY, h: drawerOpen ? drawerH : 0, moved: false };
+    dragOverlay.style.display = 'block';
+    document.body.style.userSelect = 'none';
+    if (e.cancelable) e.preventDefault();
+    e.stopPropagation();
+  }
+  function dragMove(e) {
+    if (!drag) return;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    const delta = drag.y - clientY;   /* up = larger */
+    if (Math.abs(delta) > DRAG_THRESHOLD) drag.moved = true;
+    if (!drag.moved) return;
+
+    const newH = Math.max(0, Math.min(window.innerHeight - 50, drag.h + delta));
+
+    if (newH < SNAP_CLOSE_H) {
+      /* Show closing preview: collapse to handle only */
+      drawerEl.style.transition = 'none';
+      drawerEl.style.height = '32px';
+    } else {
+      drawerH = newH;
+      _applyDrawerH();
+      if (!drawerOpen) openDrawer();
+      drawerEl.style.transition = 'none';
+      drawerEl.style.height = drawerH + 'px';
+    }
+    notifyResize();
+  }
+  function dragEnd(e) {
+    if (!drag) return;
+    const wasDrag = drag.moved;
+    const clientY = (e.changedTouches ? e.changedTouches[0].clientY : e.clientY) ?? drag.y;
+    const delta   = drag.y - clientY;
+    const endH    = drag.h + delta;
+    drag = null;
+    dragOverlay.style.display = 'none';
+    document.body.style.userSelect = '';
+    drawerEl.style.transition = '';
+    drawerEl.style.height = '';   /* revert to CSS var */
+
+    if (wasDrag) {
+      if (endH < SNAP_CLOSE_H) {
+        closeDrawer();
+      } else {
+        drawerH = Math.max(SNAP_CLOSE_H, Math.min(window.innerHeight - 50, endH));
+        _applyDrawerH();
+        if (!drawerOpen) openDrawer();
+      }
+      notifyResize();
+    }
+    /* clicks are handled by the grip click listener */
+  }
+
+  /* Grip (hamburger) click → toggle drawer at current/default height */
+  gripEl.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleDrawer();
+  });
+
+  /* Use capture on mousedown so we get it before p5's window listener */
+  handleEl.addEventListener('mousedown',  dragStart, true);
+  document.addEventListener('mousemove',  dragMove);
+  document.addEventListener('mouseup',    dragEnd);
+  handleEl.addEventListener('touchstart', dragStart, { passive: false });
+  document.addEventListener('touchmove',  dragMove,  { passive: true  });
+  document.addEventListener('touchend',   dragEnd);
+
+  /* ── raw mouse tracking (bypasses p5's cached offset) ── */
+  let _rawMouseX = 0, _rawMouseY = 0;
+  window.addEventListener('mousemove', (e) => {
+    _rawMouseX = e.clientX;
+    _rawMouseY = e.clientY;
+  }, { passive: true });
+  window.addEventListener('touchmove', (e) => {
+    if (e.touches.length > 0) {
+      _rawMouseX = e.touches[0].clientX;
+      _rawMouseY = e.touches[0].clientY;
+    }
+  }, { passive: true });
+  /* Expose to Pyodide so _pf_refresh can read it */
+  window._pfMouse = () => {
+    const canvas = p5Bridge._p ? p5Bridge._p.canvas : null;
+    if (!canvas) return [0, 0];
+    const r  = canvas.getBoundingClientRect();
+    /* Use logical dimensions (p5Bridge._w/_h), NOT canvas.width/height which
+       may be doubled by p5's pixelDensity on HiDPI screens */
+    const sx = p5Bridge._w / r.width;
+    const sy = p5Bridge._h / r.height;
+    return [
+      (_rawMouseX - r.left) * sx,
+      (_rawMouseY - r.top)  * sy,
+    ];
+  };
+  function showError(txt) { errEl.textContent = txt; errEl.style.display = 'block'; openDrawer(); }
+  function clearError()   { errEl.textContent = '';  errEl.style.display = 'none';  }
+
+  /* ─────────────────── CANVAS FIT ─────────────── */
+  function fitCanvas() {
+    if (!p5Bridge._p || p5Bridge._mode !== 'fit') return;
+    const w = p5Bridge._w, h = p5Bridge._h;
+    if (!w || !h) return;
+    const aw = appEl.clientWidth, ah = appEl.clientHeight;
+    const s  = Math.min(aw / w, ah / h);
+    viewEl.style.transform = `scale(${s})`;
+  }
+
+  /* Call after any layout change (drawer resize, window resize).
+     Handles both fixed-size (CSS scale) and fullscreen (canvas resize) sketches,
+     and fires the user's windowResized() Python callback if defined. */
+  function notifyResize() {
+    if (p5Bridge._mode === 'fullscreen') {
+      p5Bridge.size('max');          /* resizes the canvas to new app area */
+    } else {
+      fitCanvas();
+    }
+    /* Trigger p5's windowResized handler (which in turn calls the user's callback) */
+    if (pInst && typeof pInst.windowResized === 'function') {
+      try { pInst.windowResized(); } catch (_) {}
+    }
+    if (aceInst) aceInst.resize();
+  }
+
+  window.addEventListener('resize', notifyResize);
+
+  /* ─────────────────── p5 BRIDGE ──────────────── */
+  let pInst = null;
+
+  /* Special-cased methods that need JS-side logic beyond a plain p5 forward */
+  const _p5BridgeCore = {
+    _p: null, _mode: 'fit', _w: 0, _h: 0,
+    _setP(p) { this._p = p; },
+
+    /* size() manages canvas creation, CSS scale, and fullscreen mode */
+    size(w, h, renderer) {
+      if (!this._p) return;
+      const r = renderer ?? undefined;
+      if (w === 'max' || w == null) {
+        this._mode = 'fullscreen';
+        this._w = appEl.clientWidth; this._h = appEl.clientHeight;
+        /* renderer change requires a fresh createCanvas, not resizeCanvas */
+        if (r !== undefined || !this._p.canvas)
+          this._p.createCanvas(this._w, this._h, r);
+        else
+          this._p.resizeCanvas(this._w, this._h);
+        viewEl.style.transform = 'scale(1)';
+      } else {
+        this._mode = 'fit';
+        this._w = Math.max(1, w | 0); this._h = Math.max(1, h | 0);
+        if (r !== undefined || !this._p.canvas)
+          this._p.createCanvas(this._w, this._h, r);
+        else
+          this._p.resizeCanvas(this._w, this._h);
+        fitCanvas();
+      }
+    },
+
+    /* smooth/noSmooth also toggle CSS image-rendering on the canvas */
+    noSmooth() {
+      this._p?.noSmooth();
+      if (this._p?.canvas) this._p.canvas.style.imageRendering = 'pixelated';
+    },
+    smooth() {
+      this._p?.smooth();
+      if (this._p?.canvas) this._p.canvas.style.imageRendering = 'auto';
+    },
+
+    /* pyfrilet-specific: write into the handle bar hint */
+    sketchTitle(s) { hintEl.textContent = String(s); },
+  };
+
+  /* Proxy: any property not in _p5BridgeCore is forwarded to the live p5 instance.
+     This gives Python access to the full p5 API without listing every function. */
+  const p5Bridge = new Proxy(_p5BridgeCore, {
+    get(target, prop) {
+      if (prop in target) return typeof target[prop] === 'function'
+        ? target[prop].bind(target)
+        : target[prop];
+      /* Forward to live p5 instance */
+      if (target._p && prop in target._p) {
+        const v = target._p[prop];
+        return typeof v === 'function' ? v.bind(target._p) : v;
+      }
+      return undefined;
+    },
+    set(target, prop, value) {
+      /* Internal state (_p, _mode, _w, _h) stays on target */
+      if (prop.startsWith('_')) { target[prop] = value; return true; }
+      if (target._p) target._p[prop] = value;
+      return true;
+    },
+  });
+  window.p5py = p5Bridge;
+
+  function stopSketch() {
+    if (pInst) { try { pInst.remove(); } catch (e) {} pInst = null; }
+    sketchEl.innerHTML = '';
+    p5Bridge._p = null; p5Bridge._mode = 'fit'; p5Bridge._w = 0; p5Bridge._h = 0;
+    viewEl.style.transform = 'scale(1)';
+    hintEl.textContent = 'Shift+Entrée → relancer \u00a0·\u00a0 Échap → ouvrir/fermer';
+    if (setupProxy)        { setupProxy.destroy();        setupProxy        = null; }
+    if (drawProxy)         { drawProxy.destroy();         drawProxy         = null; }
+    if (mousePressedProxy) { mousePressedProxy.destroy(); mousePressedProxy = null; }
+    if (keyPressedProxy)   { keyPressedProxy.destroy();   keyPressedProxy   = null; }
+  }
+
+  /* ─────────────────── ACE EDITOR ─────────────── */
+  let aceInst = null;
+
+  function initAce() {
+    /* In local mode ACE cannot auto-detect where its dynamic modules live
+       (searchbox, keybindings…), so we set basePath explicitly. */
+    if (URLS.ace.startsWith('vendor') || !URLS.ace.startsWith('http')) {
+      ace.config.set('basePath', URLS.ace.replace(/\/[^/]+$/, '/'));
+    }
+    aceInst = ace.edit('pf-ace');
+    aceInst.session.setMode('ace/mode/python');
+    aceInst.setTheme('ace/theme/monokai');
+    aceInst.setValue(initialCode, -1);
+    aceInst.setOptions({
+      fontSize       : '15px',
+      showPrintMargin: false,
+      wrap           : false,
+      useWorker      : false,
+      tabSize        : 4,
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion : true,
+      enableSnippets           : true,
+    });
+
+    aceInst.commands.addCommand({
+      name: 'pfRun',
+      bindKey: { win: 'Shift-Enter', mac: 'Shift-Enter' },
+      exec: () => { runCode(); },
+    });
+    aceInst.commands.addCommand({
+      name: 'pfClose',
+      bindKey: { win: 'Escape', mac: 'Escape' },
+      exec: closeDrawer,
+    });
+    aceInst.commands.addCommand({
+      name: 'pfSave',
+      bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
+      exec: saveCode,
+    });
+    aceInst.commands.addCommand({
+      name: 'pfReset',
+      bindKey: { win: 'Ctrl-R', mac: 'Command-R' },
+      exec: () => {
+        if (confirm('Réinitialiser le code ? Les modifications seront perdues.')) {
+          aceInst.setValue(starterCode, -1);
+          runCode();
+        }
+      },
+    });
+
+    let saveTimer = null;
+    aceInst.session.on('change', () => {
+      clearTimeout(saveTimer);
+      saveTimer = setTimeout(saveCode, 350);
+    });
+  }
+
+  function saveCode() {
+    try { localStorage.setItem(SK, aceInst ? aceInst.getValue() : initialCode); } catch (e) {}
+  }
+  window.addEventListener('beforeunload', saveCode);
+
+  /* ─────────────────── PYODIDE ────────────────── */
+  let pyodide = null, pyodideReady = null;
+
+  async function ensurePyodide() {
+    if (pyodideReady) return pyodideReady;
+    pyodideReady = (async () => {
+      const opts = {};
+      if (URLS.pyodideIndex) opts.indexURL = URLS.pyodideIndex;
+      pyodide = await loadPyodide(opts);
+
+      /* Build the "p5" Python module via dynamic introspection of a dummy instance */
+      pyodide.runPython(`
+import sys, types, js
+from js import p5py, _pfMouse
+from pyodide.ffi import JsProxy
+
+# ── Python builtins that must NOT be shadowed ──────────────────────
+_BLACKLIST = frozenset({
+    'abs','all','any','bin','bool','bytes','callable','chr','compile',
+    'delattr','dict','dir','divmod','enumerate','eval','exec',
+    'filter','float','format','frozenset','getattr','globals','hasattr',
+    'hash','help','hex','id','input','int','isinstance','issubclass',
+    'iter','len','list','locals','map','max','min','next','object',
+    'oct','open','ord','pow','print','property','range','repr',
+    'reversed','round','set','setattr','slice','sorted','staticmethod',
+    'str','sum','super','tuple','type','vars','zip',
+    # p5 lifecycle hooks — user defines these, we don't import them
+    'setup','draw','preload',
+})
+
+# ── Introspect a hidden dummy p5 instance ─────────────────────────
+_dummy_node = js.document.createElement('div')
+_dummy = js.p5.new(lambda _: None, _dummy_node)
+
+_p5_functions  = set()   # names of callable JS members
+_p5_attributes = set()   # names of scalar/readable members
+
+for _n in dir(_dummy):
+    if _n.startswith('_') or _n in _BLACKLIST:
+        continue
+    _v = getattr(_dummy, _n)
+    if isinstance(_v, JsProxy):
+        if callable(_v):
+            _p5_functions.add(_n)
+        # non-callable JsProxy (canvas, pixels…) → skip
+    else:
+        _p5_attributes.add(_n)
+
+# Read real initial values now, while dummy is still alive
+_attr_init = {}
+for _n in _p5_attributes:
+    try:
+        _attr_init[_n] = getattr(_dummy, _n)
+    except Exception:
+        _attr_init[_n] = 0
+
+_dummy.remove()
+del _dummy, _dummy_node
+
+# ── Build module ───────────────────────────────────────────────────
+m = types.ModuleType("p5")
+
+# Generic function wrapper: delegates to live p5Bridge instance
+class _FW:
+    __slots__ = ('_n',)
+    def __init__(self, n): self._n = n
+    def __call__(self, *a): return getattr(p5py, self._n)(*a)
+    def __repr__(self): return f'<p5 function {self._n}>'
+
+for _n in _p5_functions:
+    setattr(m, _n, _FW(_n))
+
+# ── Special overrides (our bridge has custom behaviour) ────────────
+# smooth/noSmooth exist on a real p5 instance so introspection finds
+# them — but our Proxy overrides them to also toggle CSS image-rendering.
+# size and sketchTitle are pyfrilet-only: NOT on a real p5 instance,
+# so introspection misses them — add them explicitly.
+for _n in ('size', 'sketchTitle'):
+    setattr(m, _n, _FW(_n))
+    _p5_functions.add(_n)     # keep __all__ consistent
+
+# mouseX / mouseY: override with our accurate coordinate calculator
+# (p5's own values are wrong when a CSS-transformed parent is used)
+_MOUSE_OVERRIDE = frozenset({'mouseX', 'mouseY'})
+
+# Initial values from the dummy instance — constants like WEBGL, DEGREES,
+# LEFT_ARROW… are correct from the very first setup() call.
+for _n in _p5_attributes:
+    if _n in _MOUSE_OVERRIDE:
+        setattr(m, _n, 0.0)
+    else:
+        setattr(m, _n, _attr_init.get(_n, 0))
+
+# Build __all__ for import * (after all explicit additions)
+m.__all__ = sorted(_p5_functions | _p5_attributes)
+
+# ── _pf_refresh: called before every event callback ───────────────
+def _pf_refresh(ns):
+    # accurate mouse coords (bypasses p5's stale CSS-transform offset)
+    mx, my = _pfMouse()
+
+    # update all known scalar attributes from live instance
+    for _k in _p5_attributes:
+        if _k in _MOUSE_OVERRIDE:
+            _v = mx if _k == 'mouseX' else my
+        else:
+            try:
+                _v = getattr(p5py, _k)
+            except Exception:
+                continue
+        setattr(m, _k, _v)
+        if _k in ns:
+            ns[_k] = _v
+
+sys.modules["p5"] = m
+`);
+
+      /* Inject p5 symbols into ACE autocomplete */
+      if (aceInst) {
+        const p5all = pyodide.runPython('list(m.__all__)').toJs();
+        _registerP5Completer(p5all);
+      }
+    })();
+    return pyodideReady;
+  }
+
+  /* Build and register a custom ACE completer for p5 symbols.
+     Called once after Pyodide has built the module. */
+  function _registerP5Completer(symbols) {
+    const completions = symbols.map(name => ({
+      caption: name,
+      value:   name,
+      meta:    'p5',
+      score:   1000,   /* show above generic word completions */
+    }));
+    const completer = {
+      getCompletions(editor, session, pos, prefix, callback) {
+        callback(null, prefix.length > 0 ? completions : []);
+      },
+    };
+    /* ACE stores completers on the language tools module */
+    const lt = ace.require('ace/ext/language_tools');
+    if (lt && Array.isArray(lt.completers)) {
+      /* Remove any previous p5 completer before re-adding */
+      lt.completers = lt.completers.filter(c => c._pyfrilet !== true);
+    }
+    completer._pyfrilet = true;
+    aceInst.completers = [
+      ...(aceInst.completers || []),
+      completer,
+    ];
+  }
+
+  /* ─────────────────── RUN CODE ───────────────── */
+  let running = false;
+  let setupProxy = null, drawProxy = null, mousePressedProxy = null, keyPressedProxy = null;
+
+  async function runCode() {
+    if (running) return;
+    running = true;
+    btnRun.classList.add('pf-running');
+    clearError();
+    stopSketch();
+
+    if (!pyodide) {
+      loaderMsg.textContent = 'Initialisation de Pyodide…';
+      loaderEl.style.display = 'flex';
+    }
+
+    try {
+      await ensurePyodide();
+    } catch (e) {
+      loaderEl.style.display = 'none';
+      showError('Erreur Pyodide : ' + e);
+      running = false; btnRun.classList.remove('pf-running'); return;
+    }
+
+    loaderEl.style.display = 'none';
+
+    const code = aceInst ? aceInst.getValue() : initialCode;
+    pyodide.globals.set('_USER_CODE', code);
+
+    try {
+      pyodide.runPython('_ns = {}; exec(_USER_CODE, _ns, _ns)');
+    } catch (e) {
+      showError(String(e));
+      running = false; btnRun.classList.remove('pf-running'); return;
+    }
+
+    let pySetup, pyDraw, pyMP, pyKP;
+    try {
+      pySetup = pyodide.runPython("_ns.get('setup')");
+      pyDraw  = pyodide.runPython("_ns.get('draw')");
+      pyMP    = pyodide.runPython("_ns.get('mousePressed')");
+      pyKP    = pyodide.runPython("_ns.get('keyPressed')");
+    } catch (e) {
+      showError(String(e));
+      running = false; btnRun.classList.remove('pf-running'); return;
+    }
+
+    if (!pyDraw) {
+      showError('Le script doit définir au moins une fonction draw().');
+      running = false; btnRun.classList.remove('pf-running'); return;
+    }
+
+    const { create_proxy } = pyodide.pyimport('pyodide.ffi');
+    const pyWR      = pyodide.runPython("_ns.get('windowResized')");
+    const pyRefresh = pyodide.globals.get('_pf_refresh');
+    const pyNs      = pyodide.globals.get('_ns');
+
+    setupProxy        = pySetup ? create_proxy(() => { try { pySetup(); } catch (e) { showError(String(e)); } }) : null;
+    drawProxy         = create_proxy(() => {
+      try { pyRefresh(pyNs); pyDraw(); } catch (e) { showError(String(e)); stopSketch(); }
+    });
+    mousePressedProxy    = pyMP ? create_proxy(() => {
+      try { pyRefresh(pyNs); pyMP(); } catch (e) { showError(String(e)); }
+    }) : null;
+    keyPressedProxy      = pyKP ? create_proxy(() => {
+      try { pyRefresh(pyNs); pyKP(); } catch (e) { showError(String(e)); }
+    }) : null;
+    const windowResizedProxy = pyWR ? create_proxy(() => { try { pyWR(); } catch (e) { showError(String(e)); } }) : null;
+
+    let setupDone = false;
+    pInst = new p5((p) => {
+      p5Bridge._setP(p);
+      p.setup = () => {
+        /* Let the user's setup() call size() to create the canvas — this
+           allows WEBGL mode and custom dimensions to work correctly.
+           Only create a default 2D canvas if the user didn't call size(). */
+        if (setupProxy) setupProxy();
+        if (!p.canvas) {
+          /* No size() called — fall back to a default 200×200 canvas */
+          p5Bridge.size(200, 200);
+        }
+        if (typeof p._updateMouseCoords === 'function') {
+          p._updateMouseCoords({ clientX: 0, clientY: 0 });
+        }
+        p.windowResized();
+        setupDone = true;
+      };
+      p.draw         = () => { if (setupDone) drawProxy(); };
+      p.mousePressed = () => { if (setupDone && mousePressedProxy) mousePressedProxy(); };
+      p.keyPressed   = () => { if (setupDone && keyPressedProxy)   keyPressedProxy();   };
+      /* Called by p5 on actual window resize AND by notifyResize() */
+      p.windowResized = () => {
+        if (p5Bridge._mode === 'fullscreen') p5Bridge.size('max');
+        else fitCanvas();
+        if (windowResizedProxy) windowResizedProxy();
+      };
+    }, sketchEl);
+
+    running = false;
+    btnRun.classList.remove('pf-running');
+  }
+
+  /* ─────────────────── DOWNLOAD ───────────────── */
+  async function download() {
+    btnDl.style.opacity = '.4';
+    btnDl.style.pointerEvents = 'none';
+
+    let pfSrc = '';
+
+    /* 1. try fetching from original <script src="..."> */
+    if (_scriptSrc) {
+      try { pfSrc = await (await fetch(_scriptSrc)).text(); } catch (_) {}
+    }
+
+    /* 2. fallback: look for inline <script data-pyfrilet> (present in self-downloaded files) */
+    if (!pfSrc) {
+      const inlineEl = document.querySelector('script[data-pyfrilet]');
+      if (inlineEl) pfSrc = inlineEl.textContent;
+    }
+
+    const code = aceInst ? aceInst.getValue() : initialCode;
+    const html = buildStandaloneHTML(code, pfSrc);
+    const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
+    const url  = URL.createObjectURL(blob);
+    const a    = Object.assign(document.createElement('a'), { href: url, download: 'sketch.html' });
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    btnDl.style.opacity = '';
+    btnDl.style.pointerEvents = '';
+  }
+
+  const STANDALONE_TEMPLATE = `<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>export</title>
+  <script src="FILLME-JS"><\/script>
+</head>
+<body>
+
+<script type="text/python" data-sources="cdn">
+FILLME-PYTHON
+<\/script>
+
+</body>
+</html>`;
+
+  function buildStandaloneHTML(code, pfSrc) {
+    const b64 = pfSrc
+      ? 'data:text/javascript;base64,' + btoa(unescape(encodeURIComponent(pfSrc)))
+      : '/* pyfrilet source unavailable */';
+    return STANDALONE_TEMPLATE
+      .replace('FILLME-JS',     b64)
+      .replace('FILLME-PYTHON', code);
+  }
+
+  /* ─────────────────── BUTTON HANDLERS ────────── */
+  btnRun.addEventListener('click', () => runCode());
+
+  /* Code button: open at full screen height, or close if already open */
+  btnCode.addEventListener('click', () => {
+    if (drawerOpen) {
+      closeDrawer();
+    } else {
+      drawerH = window.innerHeight - 32;
+      _applyDrawerH();
+      openDrawer();
+    }
+  });
+
+  btnDl.addEventListener('click',    download);
+  const HELP_URL = 'https://codeberg.org/nopid/pyfrilet';
+  btnHelp.addEventListener('click', () => window.open(HELP_URL, '_blank'));
+
+  btnReset.addEventListener('click', () => {
+    if (aceInst && confirm('Réinitialiser le code ? Les modifications seront perdues.')) {
+      aceInst.setValue(starterCode, -1);
+      runCode();
+    }
+  });
+
+  /* ─────────────────── GLOBAL KEYBOARD (capture phase = before p5 & ACE) ── */
+  window.addEventListener('keydown', (ev) => {
+    /* Detect whether ACE currently has keyboard focus */
+    const aceHasFocus = drawerOpen && aceInst &&
+      aceInst.isFocused && aceInst.isFocused();
+
+    /* Arrow keys: prevent browser scroll so p5 receives them intact.
+       Skip when ACE has focus so it can move the cursor normally. */
+    if (!aceHasFocus && ['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(ev.key)) {
+      ev.preventDefault();
+      return;
+    }
+    /* Shift+Enter: run — always intercept, even inside ACE */
+    if (ev.key === 'Enter' && ev.shiftKey) {
+      ev.preventDefault();
+      runCode();
+      return;
+    }
+    /* Escape: when ACE has focus, only close the drawer — let the event
+       propagate first so ACE can dismiss its own overlays (search, autocomplete).
+       When ACE does NOT have focus, toggle the drawer immediately. */
+    if (ev.key === 'Escape') {
+      if (aceHasFocus) {
+        /* Let ACE handle it first (close search bar etc.),
+           then close the drawer on the next tick if still open */
+        setTimeout(() => { if (drawerOpen) closeDrawer(); }, 0);
+        return;   /* do NOT preventDefault/stopPropagation */
+      }
+      ev.preventDefault();
+      ev.stopPropagation();
+      drawerOpen ? closeDrawer() : openDrawer();
+      return;
+    }
+    /* When ACE has focus, let it handle all other shortcuts (Cmd+F, Cmd+Z…) */
+    if (aceHasFocus) return;
+    /* Ctrl/Cmd+S: save */
+    if ((ev.key === 's' || ev.key === 'S') && (ev.ctrlKey || ev.metaKey)) {
+      ev.preventDefault();
+      saveCode();
+      return;
+    }
+    /* Ctrl/Cmd+R: reset code (prevent browser reload) */
+    if ((ev.key === 'r' || ev.key === 'R') && (ev.ctrlKey || ev.metaKey) && !ev.altKey) {
+      ev.preventDefault();
+      if (aceInst && confirm('Réinitialiser le code ? Les modifications seront perdues.')) {
+        aceInst.setValue(starterCode, -1);
+        runCode();
+      }
+      return;
+    }
+  }, true /* capture phase */);
+
+  /* ─────────────────── SCRIPT LOADING ─────────── */
+  function loadScript(src) {
+    return new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = src;
+      s.onload  = resolve;
+      s.onerror = () => reject(new Error('Impossible de charger : ' + src));
+      document.head.appendChild(s);
+    });
+  }
+
+  (async () => {
+    loaderMsg.textContent = 'Chargement des dépendances…';
+    loaderEl.style.display = 'flex';
+
+    try {
+      await loadScript(URLS.p5);
+      await loadScript(URLS.ace);
+      await loadScript(URLS.acePython);
+      await loadScript(URLS.aceMonokai);
+      await loadScript(URLS.aceLangTools);
+      await loadScript(URLS.aceSearchbox);
+      await loadScript(URLS.pyodide);
+    } catch (e) {
+      loaderMsg.textContent = '⚠ ' + e.message;
+      document.getElementById('pf-loader-bar').style.display = 'none';
+      return;
+    }
+
+    initAce();
+    await runCode();
+    loaderEl.style.display = 'none';
+  })();
+}
+
+})();