feat: menu ＋ — Design System – Canevas — phase 3/8 (v7.53.0)

- Section « Design System – Canevas » : liste des canevas (intégrés +
  personnels, GET /board/api/page-templates) puis page de détail avec
  « Créer une page à partir du canevas », « Insérer dans le document ouvert »
  (désactivé sans document ouvert) et « Enregistrer le document ouvert comme
  canevas ».
- GET /board/api/page-templates/{id}/blocks (nouvelle route) : blocs d'un
  canevas — intégré via template_id=0&key=, sinon id ; 404 clé/id inconnu.
  Insertion côté front via ensureBlockIds() global + concat dans E.blocks
  + autoSave/render.
- Canevas « Design System » ajouté aux builtins (callout tokens, TOC, toggles
  composants, grille, checklist revue UI, citation).
- Fix : le front du panneau appelait /api/page-templates (404 silencieux) —
  le router est sous prefix=/board → /board/api/page-templates.
- Piège : pour /use la clé builtin se passe DANS LE BODY (body.key), pas en
  query string — test garde-fou ajouté.
- Tests : tests/test_v753_canvases.py (5) + test_v751 adapté. Suite complète
  1285 verts (-n auto), ruff 0, eslint 0 problème. OpenAPI 516 chemins.

static/js/agent_panel_2.js

@@ -42,7 +42,7 @@
     {key:'connectors', icon:'🔌', label:'Connecteurs',
      sub:'Parcourir / connecteur personnalisé — bientôt (phase 5)', disabled:true},
     {key:'canvases', icon:'🎨', label:'Design System – Canevas',
-     sub:'Galerie de canevas — bientôt (phase 3)', disabled:true},
+     sub:'Galerie de canevas : créer, insérer, enregistrer', action:'canvases', chev:true},
     {key:'plugins', icon:'🧩', label:'Add plugins',
      sub:'Modules on/off — bientôt (phase 8)', disabled:true},
     {key:'memory', icon:'🧠', label:'Mémoire (on/off)',
@@ -73,6 +73,7 @@
       plusBrowse: [], plusCrumb: [],
       skillForm: {id: null, name: '', description: '', prompt_template: ''},
       galleryFilter: '',
+      canvases: [], canvas: null,
       cmdFocus: -1, slashDismiss: false,
       toastMsg: '', toastErr: false, _toastTimer: null,
       _livePh: null,
@@ -1125,6 +1126,8 @@
         if(s === 'skills-manage') return 'Gérer les compétences';
         if(s === 'skills-gallery') return 'Parcourir les compétences';
         if(s === 'skills-edit') return this.skillForm.id ? 'Modifier le skill' : 'Nouveau skill';
+        if(s === 'canvases') return 'Design System – Canevas';
+        if(s === 'canvas') return this.canvas ? this.canvas.name : 'Canevas';
         return 'Ajouter au contexte';
       },
       get plusItems(){
@@ -1135,6 +1138,8 @@
         if(s === 'skills-manage') return this._manageItems();
         if(s === 'skills-gallery') return this._galleryItems();
         if(s === 'skills-edit') return [];   // formulaire, pas de liste
+        if(s === 'canvases') return this._canvasItems();
+        if(s === 'canvas') return this._canvasActionItems();
         return FD_PLUS_MENU;
       },
       // Sous-menu Compétences : builtin (alias affiché) + installés, puis les 2 actions.
@@ -1187,6 +1192,106 @@
         if(!out.length) out.push({key:'g-none', _sep: f ? 'Aucun résultat' : 'Galerie vide'});
         return out;
       },
+      // ── Design System – Canevas (v7.53.0) ──
+      fetchCanvases(){
+        var self = this;
+        fetch('/board/api/page-templates').then(function(r){ return r.json(); })
+          .then(function(d){ self.canvases = d.templates || []; })
+          .catch(function(){ self.canvases = []; });
+      },
+      _canvasItems(){
+        return (this.canvases || []).map(function(t){
+          return {key: 'cv-' + (t.builtin ? ('b-' + t.key) : ('u-' + t.id)),
+            icon: t.icon || '📄', label: t.name,
+            sub: (t.description || (t.builtin ? 'Canevas intégré' : 'Canevas personnel')),
+            action: 'canvas', canvas: t, chev: true};
+        });
+      },
+      _canvasActionItems(){
+        var c = this.canvas;
+        if(!c) return [];
+        var pageId = this._openPageId();
+        return [
+          {key:'cv-meta', _sep: (c.builtin ? 'Canevas intégré · ' : 'Canevas personnel · ') + c.name},
+          {key:'cv-create', icon:'＋', label:'Créer une page à partir du canevas',
+           sub:'Nouvelle page dans le workspace courant', action:'canvas-create'},
+          {key:'cv-insert', icon:'⇩', label:'Insérer dans le document ouvert',
+           sub: pageId ? 'Ajoute les blocs en fin de page' : 'Aucun document éditable ouvert',
+           action:'canvas-insert', disabled: !pageId},
+          {key:'cv-save', icon:'⭐', label:'Enregistrer le document ouvert comme canevas',
+           sub: pageId ? 'Réutilisable depuis ce menu' : 'Aucun document ouvert',
+           action:'canvas-save', disabled: !pageId}
+        ];
+      },
+      // Id de la page ouverte dans l'éditeur (refId du contexte, sinon l'URL).
+      _openPageId(){
+        try{
+          var c = window.FlowDeckCtx && window.FlowDeckCtx.current();
+          if(c && c.kind === 'page' && c.refId != null && /^\d+$/.test(String(c.refId))) return String(c.refId);
+        }catch{ /* volontaire */ }
+        var m = /\/pages\/(\d+)/.exec(window.location.pathname);
+        return m ? m[1] : null;
+      },
+      _canvasUrl(suffix, t){
+        t = t || this.canvas;
+        return t.builtin
+          ? ('/board/api/page-templates/0/' + suffix + '?key=' + encodeURIComponent(t.key))
+          : ('/board/api/page-templates/' + t.id + '/' + suffix);
+      },
+      canvasCreate(){
+        var self = this, c = this.canvas;
+        if(!c) return;
+        // le builtin se choisit par `key` DANS LE BODY (route /use), pas en query
+        fetch(this._canvasUrl('use'), {
+          method: 'POST', headers: {'X-CSRF-Token': getCsrf(), 'Content-Type': 'application/json'},
+          body: JSON.stringify(c.builtin ? {key: c.key} : {})
+        }).then(function(r){ return r.json().then(function(d){ return {ok: r.ok, d: d}; }); })
+          .then(function(res){
+            if(!res.ok){ self.toast((res.d && res.d.detail) || 'Création impossible.', true); return; }
+            self.toast('Page créée : « ' + ((res.d && res.d.title) || c.name) + ' » (Workspace).');
+            self.plusSection = 'canvases'; self.plusFocus = 0;
+          }).catch(function(){ self.toast('Création impossible (réseau).', true); });
+      },
+      canvasInsert(){
+        var self = this, c = this.canvas;
+        if(!c) return;
+        fetch(this._canvasUrl('blocks')).then(function(r){ return r.json(); })
+          .then(function(d){
+            var E = window.E;
+            if(!E || !E.blocks || !d || !Array.isArray(d.blocks)){
+              self.toast('Aucun document éditable ouvert.', true); return;
+            }
+            if(window.ensureBlockIds) window.ensureBlockIds(d.blocks);
+            try{
+              if(E.sync) E.sync();
+              var empty = E.blocks.length === 1 && E.blocks[0].type === 'paragraph'
+                          && !(E.blocks[0].content || '').trim();
+              E.blocks = empty ? d.blocks : E.blocks.concat(d.blocks);
+              E.dirty = true;
+              if(E.autoSave) E.autoSave();
+              if(E.render) E.render();
+              self.toast('Canevas inséré dans le document.');
+            }catch{ self.toast('Insertion impossible.', true); }
+          }).catch(function(){ self.toast('Lecture du canevas impossible.', true); });
+      },
+      canvasSave(){
+        var self = this, c = this.canvas;
+        var pageId = this._openPageId();
+        if(!c || !pageId) return;
+        var def = (this.activeContext && this.activeContext.label) || c.name || 'Mon canevas';
+        var name = window.prompt('Nom du canevas à enregistrer :', def);
+        if(!name || !name.trim()) return;
+        name = name.trim();
+        fetch('/board/api/page-templates', {
+                  method: 'POST', headers: {'X-CSRF-Token': getCsrf(), 'Content-Type': 'application/json'},
+          body: JSON.stringify({name: name, page_id: Number(pageId)})
+        }).then(function(r){ return r.json().then(function(d){ return {ok: r.ok, d: d}; }); })
+          .then(function(res){
+            if(!res.ok){ self.toast((res.d && res.d.detail) || 'Enregistrement impossible.', true); return; }
+            self.toast('Canevas enregistré : « ' + name + ' »');
+            self.fetchCanvases();
+          }).catch(function(){ self.toast('Enregistrement impossible (réseau).', true); });
+      },
       _plusSelectable(){
         var out = [];
         this.plusItems.forEach(function(it, i){ if(!it.disabled && !it._sep) out.push(i); });
@@ -1242,6 +1347,16 @@
           if(this.$refs.skillImport) this.$refs.skillImport.click();
           return;
         }
+        // ── Design System – Canevas (v7.53.0) ──
+        if(it.action === 'canvases'){
+          this.fetchCanvases(); this.plusSection = 'canvases'; this.plusFocus = 0; return;
+        }
+        if(it.action === 'canvas'){
+          this.canvas = it.canvas; this.plusSection = 'canvas'; this.plusFocus = 0; return;
+        }
+        if(it.action === 'canvas-create'){ this.canvasCreate(); return; }
+        if(it.action === 'canvas-insert'){ this.canvasInsert(); return; }
+        if(it.action === 'canvas-save'){ this.canvasSave(); return; }
         if(it._folder){                       // entrer dans un sous-dossier
           this.plusCrumb.push({id: it._folder, name: it.label});
           this.plusLoadBrowse(it._folder);
@@ -1261,6 +1376,7 @@
         if(sec === 'skills-manage' || sec === 'skills-gallery'){
           this.plusSection = 'skills'; this.plusFocus = 0; return;
         }
+        if(sec === 'canvas'){ this.plusSection = 'canvases'; this.plusFocus = 0; return; }
         this.plusSection = 'root';
         this.plusFocus = 0;
       },