living-documentation 3.7.0 → 3.8.0

package/dist/src/frontend/diagram/clipboard.js

@@ -1,9 +1,78 @@
 // ── Clipboard (copy / paste) ───────────────────────────────────────────────────
 
 import { st, markDirty } from './state.js';
-import { visNodeProps }  from './node-rendering.js';
+import { visNodeProps, SHAPE_DEFAULTS }  from './node-rendering.js';
 import { visEdgeProps }  from './edge-rendering.js';
 import { showNodePanel } from './node-panel.js';
+import { showToast }     from './toast.js';
+
+// ── Copy selection as PNG ─────────────────────────────────────────────────────
+
+export async function copySelectionAsPng() {
+  if (!st.network || !st.selectedNodeIds.length) return;
+
+  const PAD = 20;
+  const dpr = window.devicePixelRatio || 1;
+
+  // Compute bounding box in canvas coordinates
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const id of st.selectedNodeIds) {
+    const n  = st.nodes.get(id);
+    const bn = st.network.body.nodes[id];
+    if (!bn) continue;
+    const defaults = SHAPE_DEFAULTS[(n && n.shapeType) || 'box'] || [100, 40];
+    const w   = (n && n.nodeWidth)  || defaults[0];
+    const h   = (n && n.nodeHeight) || defaults[1];
+    const rot = (n && n.rotation)   || 0;
+    let hw, hh;
+    if (rot === 0) {
+      hw = w / 2; hh = h / 2;
+    } else {
+      const cos = Math.abs(Math.cos(rot)); const sin = Math.abs(Math.sin(rot));
+      hw = (w * cos + h * sin) / 2;
+      hh = (w * sin + h * cos) / 2;
+    }
+    minX = Math.min(minX, bn.x - hw); maxX = Math.max(maxX, bn.x + hw);
+    minY = Math.min(minY, bn.y - hh); maxY = Math.max(maxY, bn.y + hh);
+  }
+
+  // Convert canvas coords to DOM pixels
+  const tl = st.network.canvasToDOM({ x: minX, y: minY });
+  const br = st.network.canvasToDOM({ x: maxX, y: maxY });
+
+  const cropX = Math.max(0, Math.floor(tl.x - PAD));
+  const cropY = Math.max(0, Math.floor(tl.y - PAD));
+  const cropW = Math.ceil(br.x - tl.x + PAD * 2);
+  const cropH = Math.ceil(br.y - tl.y + PAD * 2);
+
+  // Grab vis-network's canvas element
+  const visCanvas = document.querySelector('#vis-canvas canvas');
+  if (!visCanvas) return;
+
+  // Crop into an offscreen canvas
+  const out = document.createElement('canvas');
+  out.width  = cropW * dpr;
+  out.height = cropH * dpr;
+  const octx = out.getContext('2d');
+
+  // Fill background matching current theme
+  const isDark = document.documentElement.classList.contains('dark');
+  octx.fillStyle = isDark ? '#030712' : '#f9fafb';
+  octx.fillRect(0, 0, out.width, out.height);
+
+  octx.drawImage(visCanvas,
+    cropX * dpr, cropY * dpr, cropW * dpr, cropH * dpr,
+    0, 0, out.width, out.height
+  );
+
+  try {
+    const blob = await new Promise((res) => out.toBlob(res, 'image/png'));
+    await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+    showToast('PNG copié dans le presse-papier');
+  } catch {
+    showToast('Impossible de copier l\'image', 'error');
+  }
+}
 
 export function copySelected() {
   if (!st.network || !st.selectedNodeIds.length) return;

package/dist/src/frontend/diagram/constants.js

@@ -12,6 +12,7 @@ export const TOOL_BTN_MAP = {
   'addNode:actor':     'toolActor',
   'addNode:post-it':   'toolPostIt',
   'addNode:text-free': 'toolTextFree',
+  'addNode:image':     'toolImage',
   addEdge: 'toolArrow',
 };
 

package/dist/src/frontend/diagram/image-upload.js

@@ -0,0 +1,34 @@
+// ── Image upload helper ───────────────────────────────────────────────────────
+// Converts a File or Blob to base64 and uploads it via POST /api/images/upload.
+// Returns the absolute URL path usable in an <img> or ctx.drawImage(), e.g. "/images/foo.png".
+
+async function toBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload  = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+export async function uploadImageFile(file) {
+  const ext    = (file.name.split('.').pop() || 'png').toLowerCase();
+  const base64 = await toBase64(file);
+  return _upload(base64, ext);
+}
+
+export async function uploadImageBlob(blob, ext = 'png') {
+  const base64 = await toBase64(blob);
+  return _upload(base64, ext);
+}
+
+async function _upload(base64, ext) {
+  const res  = await fetch('/api/images/upload', {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify({ data: base64, ext }),
+  });
+  if (!res.ok) throw new Error('Upload failed');
+  const { filename } = await res.json();
+  return `/images/${filename}`;
+}

package/dist/src/frontend/diagram/main.js

@@ -3,7 +3,7 @@
 
 import { st, markDirty }      from './state.js';
 import { TOOL_BTN_MAP }       from './constants.js';
-import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp } from './node-panel.js';
+import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp, stepRotate } from './node-panel.js';
 import { hideEdgePanel, setEdgeArrow, setEdgeDashes, changeEdgeFontSize } from './edge-panel.js';
 import { startLabelEdit, startEdgeLabelEdit, hideLabelInput } from './label-editor.js';
 import { hideSelectionOverlay } from './selection-overlay.js';
@@ -11,7 +11,10 @@ import { togglePhysics, toggleGrid } from './grid.js';
 import { toggleDebug }   from './debug.js';
 import { adjustZoom, resetZoom } from './zoom.js';
 import { loadDiagramList, newDiagram, saveDiagram } from './persistence.js';
-import { copySelected, pasteClipboard } from './clipboard.js';
+import { copySelected, pasteClipboard, copySelectionAsPng } from './clipboard.js';
+import { createImageNode } from './network.js';
+import { uploadImageBlob } from './image-upload.js';
+import { showToast }       from './toast.js';
 
 // ── Tool management ───────────────────────────────────────────────────────────
 
@@ -32,6 +35,14 @@ function setTool(tool, shape) {
   else if (st.network) st.network.disableEditMode();
 }
 
+function selectAll() {
+  if (!st.network || !st.nodes) return;
+  const ids = st.nodes.getIds();
+  st.network.selectNodes(ids);
+  st.selectedNodeIds = ids;
+  showNodePanel();
+}
+
 function deleteSelected() {
   if (!st.network) return;
   st.network.deleteSelected();
@@ -71,6 +82,7 @@ document.getElementById('toolCircle').addEventListener('click',   () => setTool(
 document.getElementById('toolActor').addEventListener('click',    () => setTool('addNode', 'actor'));
 document.getElementById('toolPostIt').addEventListener('click',   () => setTool('addNode', 'post-it'));
 document.getElementById('toolTextFree').addEventListener('click', () => setTool('addNode', 'text-free'));
+document.getElementById('toolImage').addEventListener('click',    () => setTool('addNode', 'image'));
 document.getElementById('toolArrow').addEventListener('click',    () => setTool('addEdge'));
 
 document.getElementById('btnDelete').addEventListener('click', deleteSelected);
@@ -106,17 +118,19 @@ document.getElementById('btnValignMiddle').addEventListener('click', () => setTe
 document.getElementById('btnValignBottom').addEventListener('click', () => setTextValign('bottom'));
 document.getElementById('btnZOrderBack').addEventListener('click',  () => changeZOrder(-1));
 document.getElementById('btnZOrderFront').addEventListener('click', () => changeZOrder(1));
+document.getElementById('btnRotateCW').addEventListener('click',    () => stepRotate(10));
+document.getElementById('btnRotateCCW').addEventListener('click',   () => stepRotate(-10));
 // Stamp buttons: capture targets on mousedown (before vis-network can fire
 // deselectNode), then activate the stamp mode on click.
-['btnStampColor', 'btnStampRotation', 'btnStampFontSize'].forEach((id) => {
+['btnStampColor', 'btnStampFontSize'].forEach((id) => {
   document.getElementById(id).addEventListener('mousedown', (e) => {
     e.preventDefault(); // prevent canvas focus loss
     st.stampTargetIds = [...st.selectedNodeIds]; // save before any deselect fires
   });
 });
 document.getElementById('btnStampColor').addEventListener('click',    () => activateStamp('color'));
-document.getElementById('btnStampRotation').addEventListener('click', () => activateStamp('rotation'));
 document.getElementById('btnStampFontSize').addEventListener('click', () => activateStamp('fontSize'));
+document.getElementById('btnCopyPng').addEventListener('click', () => copySelectionAsPng());
 
 // ── Edge panel wiring ─────────────────────────────────────────────────────────
 
@@ -134,7 +148,9 @@ document.getElementById('btnEdgeLabelEdit').addEventListener('click', startEdgeL
 document.addEventListener('keydown', (e) => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   if (e.key === 'Delete' || e.key === 'Backspace')            { deleteSelected();           return; }
-  if ((e.metaKey || e.ctrlKey) && e.key === 'c')             { e.preventDefault(); copySelected();    return; }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'a')             { e.preventDefault(); selectAll();       return; }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'c' && e.shiftKey) { e.preventDefault(); copySelectionAsPng(); return; }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'c')               { e.preventDefault(); copySelected();       return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 'v')             { e.preventDefault(); pasteClipboard();  return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 's')             { e.preventDefault(); saveDiagram();     return; }
   if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); setTool('select'); return; }
@@ -149,6 +165,28 @@ document.addEventListener('keydown', (e) => {
   if (e.key === 'g' || e.key === 'G')  { toggleGrid();                   return; }
 });
 
+// ── Paste image from clipboard ────────────────────────────────────────────────
+document.addEventListener('paste', async (e) => {
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  if (!st.network) return;
+  const items = Array.from(e.clipboardData.items || []);
+  const imageItem = items.find((it) => it.type.startsWith('image/'));
+  if (!imageItem) return;
+  e.preventDefault();
+  const blob = imageItem.getAsFile();
+  if (!blob) return;
+  const ext = imageItem.type.split('/')[1] || 'png';
+  try {
+    const src = await uploadImageBlob(blob, ext);
+    // Place at centre of current viewport
+    const center = st.network.getViewPosition();
+    createImageNode(src, center.x, center.y);
+    showToast('Image ajoutée');
+  } catch {
+    showToast('Impossible d\'importer l\'image', 'error');
+  }
+});
+
 // ── Dark mode initialisation ──────────────────────────────────────────────────
 
 document.getElementById('darkIcon').textContent =

package/dist/src/frontend/diagram/network.js

@@ -4,6 +4,8 @@
 
 import { st, markDirty } from './state.js';
 import { visNodeProps, SHAPE_DEFAULTS }   from './node-rendering.js';
+import { uploadImageFile } from './image-upload.js';
+import { showToast }       from './toast.js';
 import { visEdgeProps }   from './edge-rendering.js';
 import { showNodePanel, hideNodePanel } from './node-panel.js';
 import { showEdgePanel, hideEdgePanel } from './edge-panel.js';
@@ -120,6 +122,9 @@ function onDoubleClick(params) {
     st.selectedEdgeIds = [params.edges[0]];
     showEdgePanel();
     startEdgeLabelEdit();
+  } else if (st.currentTool === 'addNode' && st.pendingShape === 'image') {
+    const canvasPos = params.pointer.canvas;
+    pickAndCreateImageNode(canvasPos.x, canvasPos.y);
   } else if (st.currentTool === 'addNode') {
     const id       = 'n' + Date.now();
     const defaults = SHAPE_DEFAULTS[st.pendingShape] || [100, 40];
@@ -142,6 +147,45 @@ function onDoubleClick(params) {
   }
 }
 
+// ── Image node creation ───────────────────────────────────────────────────────
+
+function pickAndCreateImageNode(canvasX, canvasY) {
+  const input = document.createElement('input');
+  input.type   = 'file';
+  input.accept = 'image/*';
+  input.onchange = async () => {
+    const file = input.files && input.files[0];
+    if (!file) return;
+    try {
+      const src = await uploadImageFile(file);
+      createImageNode(src, canvasX, canvasY);
+    } catch {
+      showToast('Impossible d\'importer l\'image', 'error');
+    }
+  };
+  input.click();
+}
+
+export function createImageNode(imageSrc, canvasX, canvasY) {
+  if (!st.network) return;
+  const id = 'n' + Date.now();
+  const defaults = SHAPE_DEFAULTS['image'];
+  st.nodes.add({
+    id, label: '', imageSrc,
+    shapeType: 'image', colorKey: 'c-gray',
+    nodeWidth: defaults[0], nodeHeight: defaults[1],
+    fontSize: null, rotation: 0, labelRotation: 0,
+    x: canvasX, y: canvasY,
+    ...visNodeProps('image', 'c-gray', defaults[0], defaults[1], null, null, null),
+  });
+  markDirty();
+  setTimeout(() => {
+    st.network.selectNodes([id]);
+    st.selectedNodeIds = [id];
+    showNodePanel();
+  }, 50);
+}
+
 function onSelectNode(params) {
   st.selectedNodeIds = params.nodes;
   st.selectedEdgeIds = [];

package/dist/src/frontend/diagram/node-panel.js

@@ -154,6 +154,22 @@ document.getElementById('stampOverlay').addEventListener('click', (e) => {
   }
 });
 
+// ── Step rotation ─────────────────────────────────────────────────────────────
+
+export function stepRotate(degrees) {
+  if (!st.selectedNodeIds.length) return;
+  const delta = degrees * (Math.PI / 180);
+  st.selectedNodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (!n) return;
+    st.nodes.update({ id, rotation: (n.rotation || 0) + delta });
+    const bn = st.network && st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  if (st.network) st.network.redraw();
+  markDirty();
+}
+
 export function changeZOrder(direction) {
   // direction: +1 = bring to front (last in canonicalOrder = drawn on top)
   //            -1 = send to back   (first in canonicalOrder = drawn below)

package/dist/src/frontend/diagram/node-rendering.js

@@ -273,6 +273,67 @@ export function makeActorRenderer(colorKey) {
   };
 }
 
+// ── Image node ────────────────────────────────────────────────────────────────
+// Images are loaded once and cached. When still loading a placeholder is drawn;
+// once the image is ready network.redraw() is called so the frame updates.
+
+const _imgCache = new Map(); // src → HTMLImageElement | 'loading' | 'error'
+
+function getCachedImage(src, redrawFn) {
+  if (!src) return null;
+  const cached = _imgCache.get(src);
+  if (cached === 'loading' || cached === 'error') return null;
+  if (cached) return cached;
+  _imgCache.set(src, 'loading');
+  const img = new Image();
+  img.onload  = () => { _imgCache.set(src, img); redrawFn && redrawFn(); };
+  img.onerror = () => { _imgCache.set(src, 'error'); };
+  img.src = src;
+  return null;
+}
+
+export function makeImageRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 160, 120, colorKey || 'c-gray');
+    const n      = st.nodes && st.nodes.get(id);
+    const src    = n && n.imageSrc;
+    const img    = getCachedImage(src, () => st.network && st.network.redraw());
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        // Border (always visible, orange when selected)
+        ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
+        ctx.lineWidth   = visState.selected ? 2 : 1;
+        roundRect(ctx, -W / 2, -H / 2, W, H, 4);
+        ctx.stroke();
+
+        if (img) {
+          // Clip to rounded rect then draw image
+          ctx.save();
+          roundRect(ctx, -W / 2, -H / 2, W, H, 4);
+          ctx.clip();
+          ctx.drawImage(img, -W / 2, -H / 2, W, H);
+          ctx.restore();
+        } else {
+          // Placeholder: light fill + icon
+          ctx.fillStyle = visState.selected ? c.hbg : c.bg;
+          roundRect(ctx, -W / 2, -H / 2, W, H, 4);
+          ctx.fill();
+          ctx.fillStyle = c.border;
+          ctx.font = `${Math.round(Math.min(W, H) * 0.25)}px system-ui`;
+          ctx.textAlign    = 'center';
+          ctx.textBaseline = 'middle';
+          ctx.fillText(src ? '…' : '🖼', 0, 0);
+        }
+
+        if (label) drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: H },
+    };
+  };
+}
+
 // ── Public API ────────────────────────────────────────────────────────────────
 
 // Returns the rendered height from vis-network internals (used by node-panel
@@ -294,6 +355,7 @@ const RENDERER_MAP = {
   'post-it':  makePostItRenderer,
   'text-free':makeTextFreeRenderer,
   actor:      makeActorRenderer,
+  image:      makeImageRenderer,
 };
 
 // Default dimensions per shape type (used when nodeWidth/nodeHeight are null).
@@ -305,6 +367,7 @@ export const SHAPE_DEFAULTS = {
   actor:      [30,  52],
   'post-it':  [120, 100],
   'text-free':[80,  30],
+  image:      [160, 120],
 };
 
 // Builds the full vis.js node property object.

package/dist/src/frontend/diagram/persistence.js

@@ -116,6 +116,7 @@ export async function saveDiagram() {
       nodeWidth: n.nodeWidth || null, nodeHeight: n.nodeHeight || null,
       fontSize: n.fontSize || null, textAlign: n.textAlign || null, textValign: n.textValign || null,
       rotation: n.rotation || 0, labelRotation: n.labelRotation || 0,
+      imageSrc: n.imageSrc || null,
       x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y,
     }));
 

package/dist/src/frontend/diagram/toast.js

@@ -0,0 +1,21 @@
+// ── Toast notifications ───────────────────────────────────────────────────────
+// Minimal sonner-style toasts, no dependencies.
+
+export function showToast(message, type = 'success', duration = 3500) {
+  const container = document.getElementById('toastContainer');
+  const el = document.createElement('div');
+  el.className = 'ld-toast ld-toast--' + type;
+  el.textContent = message;
+  container.appendChild(el);
+
+  // Animate in on next frame
+  requestAnimationFrame(() => el.classList.add('ld-toast--visible'));
+
+  const hide = () => {
+    el.classList.remove('ld-toast--visible');
+    el.addEventListener('transitionend', () => el.remove(), { once: true });
+  };
+
+  const timer = setTimeout(hide, duration);
+  el.addEventListener('click', () => { clearTimeout(timer); hide(); });
+}

package/dist/src/frontend/diagram.html

@@ -210,6 +210,47 @@
       }
       #rh-label-rotate:active { cursor: grabbing; }
       .dark #rh-label-rotate { background: #374151; }
+
+      /* Toast notifications */
+      #toastContainer {
+        position: fixed;
+        bottom: 1.5rem;
+        right: 1.5rem;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0.5rem;
+        z-index: 1000;
+        pointer-events: none;
+      }
+      .ld-toast {
+        pointer-events: all;
+        padding: 0.6rem 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        font-weight: 500;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+        cursor: pointer;
+        opacity: 0;
+        transform: translateY(0.5rem);
+        transition: opacity 0.2s ease, transform 0.2s ease;
+        background: #1c1917;
+        color: #fafaf9;
+        border: 1px solid #292524;
+      }
+      .dark .ld-toast {
+        background: #fafaf9;
+        color: #1c1917;
+        border-color: #e7e5e4;
+      }
+      .ld-toast--error {
+        background: #7f1d1d;
+        color: #fef2f2;
+        border-color: #991b1b;
+      }
+      .ld-toast--visible {
+        opacity: 1;
+        transform: translateY(0);
+      }
     </style>
   </head>
   <body
@@ -358,6 +399,17 @@
       >
         T
       </button>
+      <button
+        id="toolImage"
+        class="tool-btn"
+        title="Image — double-clic sur le canvas pour choisir un fichier, ou coller (⌘V) depuis le presse-papier"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="1" y="1" width="12" height="12" rx="1.5"/>
+          <circle cx="4.5" cy="4.5" r="1.2"/>
+          <path d="M1 9.5 L4 6.5 L6.5 9 L9 7 L13 10.5"/>
+        </svg>
+      </button>
       <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
 
       <button
@@ -538,7 +590,14 @@
             style="bottom: -5px; right: -5px; cursor: se-resize"
           ></div>
           <div id="rh-rotate" title="Rotation forme">↻</div>
-          <div id="rh-label-rotate" title="Rotation texte" style="left: 0; top: -28px;">T↻</div>
+          <div id="rh-label-rotate" title="Rotation texte" style="left: 0; top: -28px;">
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <g transform="rotate(25,5,5)">
+                <line x1="2.5" y1="3" x2="7.5" y2="3"/>
+                <line x1="5" y1="3" x2="5" y2="8"/>
+              </g>
+            </svg>
+          </div>
         </div>
 
         <!-- Node panel -->
@@ -814,31 +873,14 @@
 
           <div class="panel-sep"></div>
 
-          <!-- Stamp: copy color -->
+          <!-- Stamp: copy color (goutte) -->
           <button
             id="btnStampColor"
             class="tool-btn !w-7 !h-6"
             title="Tampon couleur — sélectionner les cibles, cliquer ici, puis cliquer la source"
           >
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor" stroke="none" opacity="0.5"/>
-              <rect x="7" y="7" width="6" height="6" rx="1" fill="currentColor" stroke="none" opacity="0.5"/>
-              <path d="M7 3.5h4M3.5 7v4"/>
-              <circle cx="10.5" cy="10.5" r="1" fill="currentColor" stroke="none"/>
-            </svg>
-          </button>
-
-          <!-- Stamp: copy rotation -->
-          <button
-            id="btnStampRotation"
-            class="tool-btn !w-7 !h-6"
-            title="Tampon rotation — sélectionner les cibles, cliquer ici, puis cliquer la source"
-          >
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M2 7a5 5 0 1 0 1.5-3.5"/>
-              <polyline points="1,1 1.5,3.5 4,3"/>
-              <line x1="7" y1="4" x2="7" y2="7" stroke-width="1.8"/>
-              <line x1="7" y1="7" x2="9" y2="7" stroke-width="1.8"/>
+              <path d="M7 2 C7 2 3 6.5 3 9 a4 4 0 0 0 8 0 C11 6.5 7 2 7 2 Z" fill="currentColor" fill-opacity="0.25"/>
             </svg>
           </button>
 
@@ -848,6 +890,40 @@
             class="tool-btn !w-7 !h-6 font-mono text-xs font-bold"
             title="Tampon taille police — sélectionner les cibles, cliquer ici, puis cliquer la source"
           >Aa</button>
+
+          <div class="panel-sep"></div>
+
+          <!-- Rotation anti-horaire 10° -->
+          <button
+            id="btnRotateCCW"
+            class="tool-btn !w-7 !h-6"
+            title="Rotation anti-horaire 10°"
+            style="font-size:15px; line-height:1;"
+          >↺</button>
+
+          <!-- Rotation horaire 10° -->
+          <button
+            id="btnRotateCW"
+            class="tool-btn !w-7 !h-6"
+            title="Rotation horaire 10°"
+            style="font-size:15px; line-height:1;"
+          >↻</button>
+
+          <div class="panel-sep"></div>
+
+          <!-- Copy as PNG -->
+          <button
+            id="btnCopyPng"
+            class="tool-btn !h-6 px-1.5 font-mono text-xs font-semibold flex items-center gap-0.5"
+            title="Copier la sélection en PNG (⌘⇧C)"
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="5" y1="7" x2="5" y2="1"/>
+              <polyline points="2,4 5,1 8,4"/>
+              <line x1="1" y1="9" x2="9" y2="9"/>
+            </svg>
+            PNG
+          </button>
         </div>
 
         <!-- Edge panel -->
@@ -969,6 +1045,7 @@
       </div>
     </div>
 
+    <div id="toastContainer"></div>
     <script type="module" src="/diagram/main.js"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "living-documentation",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "A CLI tool that serves a local Markdown documentation viewer",
   "main": "dist/src/server.js",
   "bin": {