living-documentation 3.6.0 → 3.7.0

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

@@ -5,11 +5,13 @@ export const GRID_SIZE = 40;
 
 export const TOOL_BTN_MAP = {
   select: 'toolSelect',
-  'addNode:box': 'toolBox',
-  'addNode:ellipse': 'toolEllipse',
-  'addNode:database': 'toolDatabase',
-  'addNode:circle': 'toolCircle',
-  'addNode:actor': 'toolActor',
+  'addNode:box':       'toolBox',
+  'addNode:ellipse':   'toolEllipse',
+  'addNode:database':  'toolDatabase',
+  'addNode:circle':    'toolCircle',
+  'addNode:actor':     'toolActor',
+  'addNode:post-it':   'toolPostIt',
+  'addNode:text-free': 'toolTextFree',
   addEdge: 'toolArrow',
 };
 

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

@@ -4,12 +4,29 @@
 import { st, markDirty } from './state.js';
 import { GRID_SIZE } from './constants.js';
 
+
 export function togglePhysics() {
   st.physicsEnabled = !st.physicsEnabled;
-  if (st.network) st.network.setOptions({ physics: { enabled: st.physicsEnabled } });
   const btn = document.getElementById('btnPhysics');
   btn.classList.toggle('tool-active', st.physicsEnabled);
-  btn.title = st.physicsEnabled ? 'Auto-espacement actif' : 'Auto-espacement inactif';
+  btn.title = st.physicsEnabled ? 'Anti-chevauchement actif' : 'Anti-chevauchement (espace les nœuds qui se superposent)';
+
+  if (!st.network) return;
+
+  st.network.setOptions({
+    physics: {
+      enabled: st.physicsEnabled,
+      stabilization: { enabled: false }, // no auto-stop — stays on until user toggles off
+      barnesHut: {
+        gravitationalConstant: -800, // mild repulsion — only pushes overlapping nodes
+        centralGravity: 0,           // no pull toward centre — distant nodes stay put
+        springLength: 100,
+        springConstant: 0.01,
+        damping: 0.6,                // high damping — nodes settle fast, no oscillation
+        avoidOverlap: 1,             // vis-network built-in overlap avoidance
+      },
+    },
+  });
 }
 
 export function toggleGrid() {

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 } from './node-panel.js';
+import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp } 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';
@@ -69,6 +69,8 @@ document.getElementById('toolEllipse').addEventListener('click',  () => setTool(
 document.getElementById('toolDatabase').addEventListener('click', () => setTool('addNode', 'database'));
 document.getElementById('toolCircle').addEventListener('click',   () => setTool('addNode', 'circle'));
 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('toolArrow').addEventListener('click',    () => setTool('addEdge'));
 
 document.getElementById('btnDelete').addEventListener('click', deleteSelected);
@@ -104,6 +106,17 @@ 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));
+// Stamp buttons: capture targets on mousedown (before vis-network can fire
+// deselectNode), then activate the stamp mode on click.
+['btnStampColor', 'btnStampRotation', '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'));
 
 // ── Edge panel wiring ─────────────────────────────────────────────────────────
 
@@ -124,13 +137,15 @@ document.addEventListener('keydown', (e) => {
   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')  { setTool('select');          return; }
+  if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); setTool('select'); return; }
   if (e.key === 'r' || e.key === 'R')  { setTool('addNode', 'box');      return; }
   if (e.key === 'e' || e.key === 'E')  { setTool('addNode', 'ellipse');  return; }
   if (e.key === 'd' || e.key === 'D')  { setTool('addNode', 'database'); return; }
   if (e.key === 'c' || e.key === 'C')  { setTool('addNode', 'circle');   return; }
   if (e.key === 'a' || e.key === 'A')  { setTool('addNode', 'actor');    return; }
-  if (e.key === 'f' || e.key === 'F')  { setTool('addEdge');             return; }
+  if (e.key === 'f' || e.key === 'F')  { setTool('addEdge');                  return; }
+  if (e.key === 'p' || e.key === 'P')  { setTool('addNode', 'post-it');       return; }
+  if (e.key === 't' || e.key === 'T')  { setTool('addNode', 'text-free');     return; }
   if (e.key === 'g' || e.key === 'G')  { toggleGrid();                   return; }
 });
 

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

@@ -3,7 +3,7 @@
 // and wires all network-level events.
 
 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, hideNodePanel } from './node-panel.js';
 import { showEdgePanel, hideEdgePanel } from './edge-panel.js';
@@ -74,11 +74,8 @@ export function initNetwork(savedNodes, savedEdges) {
       if (!node) continue;
       if (alwaysShow === true || node.isBoundingBoxOverlappingWith(viewableArea) === true) {
         const r = node.draw(ctx);
-        // Custom shapes (actor) draw their own label inside drawNode(); skip
-        // vis-network's external-label callback to avoid double-rendering.
-        if (r.drawExternalLabel != null && node.options.shape !== 'custom') {
-          drawExternalLabelCallbacks.push(r.drawExternalLabel);
-        }
+        // All shapes are ctxRenderer (shape:'custom') and draw their own labels.
+        // Skip drawExternalLabel entirely to avoid double-rendering.
       } else {
         node.updateBoundingBox(ctx, node.selected);
       }
@@ -124,13 +121,16 @@ function onDoubleClick(params) {
     showEdgePanel();
     startEdgeLabelEdit();
   } else if (st.currentTool === 'addNode') {
-    const id = 'n' + Date.now();
+    const id       = 'n' + Date.now();
+    const defaults = SHAPE_DEFAULTS[st.pendingShape] || [100, 40];
+    const defaultColor = st.pendingShape === 'post-it' ? 'c-amber' : 'c-gray';
     st.nodes.add({
-      id, label: 'Node',
-      shapeType: st.pendingShape, colorKey: 'c-gray',
-      nodeWidth: null, nodeHeight: null, fontSize: null,
+      id, label: st.pendingShape === 'text-free' ? 'Texte' : 'Node',
+      shapeType: st.pendingShape, colorKey: defaultColor,
+      nodeWidth: defaults[0], nodeHeight: defaults[1],
+      fontSize: null, rotation: 0, labelRotation: 0,
       x: params.pointer.canvas.x, y: params.pointer.canvas.y,
-      ...visNodeProps(st.pendingShape, 'c-gray', null, null, null, null, null),
+      ...visNodeProps(st.pendingShape, defaultColor, defaults[0], defaults[1], null, null, null),
     });
     markDirty();
     setTimeout(() => {

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

@@ -2,7 +2,18 @@
 // Floating formatting toolbar for selected nodes (color, font, alignment, z-order).
 
 import { st, markDirty } from './state.js';
-import { visNodeProps, getActualNodeHeight } from './node-rendering.js';
+import { SHAPE_DEFAULTS } from './node-rendering.js';
+
+// All shapes are ctxRenderers — vis-network never re-reads the closure after
+// nodes.update(). Force refreshNeeded + redraw so the new colorKey/fontSize/
+// textAlign/textValign values are picked up on the next draw call via st.nodes.get(id).
+function forceRedraw() {
+  st.selectedNodeIds.forEach((id) => {
+    const bn = st.network && st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  if (st.network) st.network.redraw();
+}
 
 export function showNodePanel() {
   document.getElementById('nodePanel').classList.remove('hidden');
@@ -17,8 +28,9 @@ export function setNodeColor(colorKey) {
   st.selectedNodeIds.forEach((id) => {
     const n = st.nodes.get(id);
     if (!n) return;
-    st.nodes.update({ id, colorKey, ...visNodeProps(n.shapeType || 'box', colorKey, n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign) });
+    st.nodes.update({ id, colorKey });
   });
+  forceRedraw();
   markDirty();
 }
 
@@ -28,34 +40,120 @@ export function changeNodeFontSize(delta) {
     const n = st.nodes.get(id);
     if (!n) return;
     const newSize = Math.max(8, Math.min(48, (n.fontSize || 13) + delta));
-    const ah = getActualNodeHeight(id);
-    st.nodes.update({ id, fontSize: newSize, ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, newSize, n.textAlign, n.textValign, ah) });
+    st.nodes.update({ id, fontSize: newSize });
   });
+  forceRedraw();
   markDirty();
 }
 
 export function setTextAlign(align) {
   if (!st.selectedNodeIds.length) return;
   st.selectedNodeIds.forEach((id) => {
-    const n  = st.nodes.get(id);
+    const n = st.nodes.get(id);
     if (!n) return;
-    const ah = getActualNodeHeight(id);
-    st.nodes.update({ id, textAlign: align, ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, align, n.textValign, ah) });
+    st.nodes.update({ id, textAlign: align });
   });
+  forceRedraw();
   markDirty();
 }
 
 export function setTextValign(valign) {
   if (!st.selectedNodeIds.length) return;
   st.selectedNodeIds.forEach((id) => {
-    const n  = st.nodes.get(id);
+    const n = st.nodes.get(id);
     if (!n) return;
-    const ah = getActualNodeHeight(id);
-    st.nodes.update({ id, textValign: valign, ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, valign, ah) });
+    st.nodes.update({ id, textValign: valign });
   });
+  forceRedraw();
   markDirty();
 }
 
+// ── Stamp (format painter) ────────────────────────────────────────────────────
+// Uses a transparent DOM overlay (#stampOverlay) that intercepts canvas clicks
+// during stamp mode. This bypasses vis-network's event system entirely, avoiding
+// the deselectNode/click ordering problems that make st.activeStamp unreliable.
+
+const STAMP_BTNS = { color: 'btnStampColor', rotation: 'btnStampRotation', fontSize: 'btnStampFontSize' };
+
+export function activateStamp(type) {
+  if (!st.stampTargetIds.length) return; // targets were saved on mousedown
+  st.activeStamp = type;
+  const overlay = document.getElementById('stampOverlay');
+  overlay.style.display = 'block';
+  Object.entries(STAMP_BTNS).forEach(([t, id]) =>
+    document.getElementById(id).classList.toggle('tool-active', t === type)
+  );
+}
+
+export function cancelStamp() {
+  st.activeStamp = null;
+  st.stampTargetIds = [];
+  document.getElementById('stampOverlay').style.display = 'none';
+  Object.values(STAMP_BTNS).forEach((id) =>
+    document.getElementById(id).classList.remove('tool-active')
+  );
+}
+
+function applyStamp(sourceId) {
+  const source = st.nodes.get(sourceId);
+  if (!source || !st.activeStamp || !st.stampTargetIds.length) return;
+  const type    = st.activeStamp;
+  const targets = [...st.stampTargetIds]; // snapshot before cancelStamp clears the array
+  cancelStamp();
+
+  targets.forEach((id) => {
+    if (id === sourceId) return;
+    const target = st.nodes.get(id);
+    if (!target) return;
+    if (type === 'color')    st.nodes.update({ id, colorKey: source.colorKey || 'c-gray' });
+    if (type === 'rotation') st.nodes.update({ id, rotation: source.rotation || 0 });
+    if (type === 'fontSize') st.nodes.update({ id, fontSize: source.fontSize || 13 });
+    const bn = st.network && st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  if (st.network) st.network.redraw();
+  markDirty();
+}
+
+// getNodeAt() is unreliable for shape:'custom' (bounding box near-zero).
+// Manual AABB hit test using DOMtoCanvas + node dimensions, topmost node first.
+function getNodeAtDOMPoint(domX, domY) {
+  if (!st.network || !st.nodes) return undefined;
+  const cp = st.network.DOMtoCanvas({ x: domX, y: domY });
+  for (let i = st.canonicalOrder.length - 1; i >= 0; i--) {
+    const id = st.canonicalOrder[i];
+    const n  = st.nodes.get(id);
+    const bn = st.network.body.nodes[id];
+    if (!n || !bn) continue;
+    const defaults = SHAPE_DEFAULTS[n.shapeType] || [100, 40];
+    const w = n.nodeWidth  || defaults[0];
+    const h = n.nodeHeight || defaults[1];
+    const rot = 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;
+    }
+    if (Math.abs(cp.x - bn.x) <= hw && Math.abs(cp.y - bn.y) <= hh) return id;
+  }
+  return undefined;
+}
+
+// Wire the stamp overlay click.
+document.getElementById('stampOverlay').addEventListener('click', (e) => {
+  if (!st.activeStamp || !st.network) return;
+  const rect   = document.getElementById('vis-canvas').getBoundingClientRect();
+  const nodeId = getNodeAtDOMPoint(e.clientX - rect.left, e.clientY - rect.top);
+  if (nodeId !== undefined) {
+    applyStamp(nodeId);
+  } else {
+    cancelStamp();
+  }
+});
+
 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

@@ -1,113 +1,336 @@
 // ── Node rendering ────────────────────────────────────────────────────────────
-// Actor canvas renderer + vis.js node property builder.
+// All shapes are ctxRenderers so rotation (ctx.rotate) works uniformly.
+// Each renderer reads live node data from st.nodes.get(id) on every draw call
+// (vis-network caches the ctxRenderer reference and never re-reads it from the
+// DataSet, so dimensions/rotation/alignment must be fetched at draw time).
 
 import { NODE_COLORS } from './constants.js';
 import { st } from './state.js';
 
-// Reference dimensions of the actor figure at scale 1.
+// ── Drawing helpers ───────────────────────────────────────────────────────────
+
+// Draw multi-line label centred at (0,0) in the current (possibly rotated) ctx.
+// labelRotation is applied around the label's own centre (independent of shape rotation).
+function drawLabel(ctx, label, fontSize, color, textAlign, textValign, W, H, labelRotation) {
+  if (!label) return;
+  const pad = 8;
+  ctx.save();
+  ctx.font         = `${fontSize}px system-ui,-apple-system,sans-serif`;
+  ctx.fillStyle    = color;
+  ctx.textBaseline = 'middle';
+
+  let xPos = 0;
+  if (textAlign === 'left')       { ctx.textAlign = 'left';   xPos = W ? -W / 2 + pad : -40; }
+  else if (textAlign === 'right') { ctx.textAlign = 'right';  xPos = W ? W / 2  - pad : 40;  }
+  else                            { ctx.textAlign = 'center'; xPos = 0; }
+
+  let yOff = 0;
+  if (W && H) {
+    if (textValign === 'top')         yOff = -(H / 2 - fontSize / 2 - pad);
+    else if (textValign === 'bottom') yOff =   H / 2 - fontSize / 2 - pad;
+  }
+
+  const lines  = String(label).split('\n');
+  const lineH  = fontSize * 1.3;
+  const startY = yOff - (lines.length - 1) * lineH / 2;
+
+  // Apply independent label rotation around the label centre.
+  if (labelRotation) ctx.rotate(labelRotation);
+
+  lines.forEach((line, i) => ctx.fillText(line, xPos, startY + i * lineH));
+  ctx.restore();
+}
+
+// Polyfill-safe rounded rectangle (ctx.roundRect not universally available).
+function roundRect(ctx, x, y, w, h, r) {
+  r = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx.lineTo(x + r, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+
+// Read ALL live node data from the DataSet on every draw call.
+// vis-network caches the ctxRenderer closure and never re-reads it after
+// nodes.update(), so colour, font size, dimensions, rotation, and alignment
+// must all be fetched here to reflect the latest values.
+function nodeData(id, defaultW, defaultH, defaultColorKey) {
+  const n        = st.nodes && st.nodes.get(id);
+  const colorKey = (n && n.colorKey) || defaultColorKey || 'c-gray';
+  return {
+    W:             (n && n.nodeWidth)      || defaultW,
+    H:             (n && n.nodeHeight)     || defaultH,
+    rotation:      (n && n.rotation)       || 0,
+    labelRotation: (n && n.labelRotation)  || 0,
+    textAlign:     (n && n.textAlign)      || 'center',
+    textValign:    (n && n.textValign)     || 'middle',
+    fontSize:      (n && n.fontSize)       || 13,
+    colorKey,
+    c: NODE_COLORS[colorKey] || NODE_COLORS['c-gray'],
+  };
+}
+
+// ── Shape renderers ───────────────────────────────────────────────────────────
+
+export function makeBoxRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 100, 40, colorKey);
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
+        ctx.fillStyle   = visState.selected ? c.hbg     : c.bg;
+        ctx.lineWidth   = 1.5;
+        roundRect(ctx, -W / 2, -H / 2, W, H, 4);
+        ctx.fill(); ctx.stroke();
+        drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: H },
+    };
+  };
+}
+
+export function makeEllipseRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 110, 50, colorKey);
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
+        ctx.fillStyle   = visState.selected ? c.hbg     : c.bg;
+        ctx.lineWidth   = 1.5;
+        ctx.beginPath(); ctx.ellipse(0, 0, W / 2, H / 2, 0, 0, Math.PI * 2);
+        ctx.fill(); ctx.stroke();
+        drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: H },
+    };
+  };
+}
+
+export function makeCircleRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 55, 55, colorKey);
+    const R = W / 2;
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
+        ctx.fillStyle   = visState.selected ? c.hbg     : c.bg;
+        ctx.lineWidth   = 1.5;
+        ctx.beginPath(); ctx.arc(0, 0, R, 0, Math.PI * 2);
+        ctx.fill(); ctx.stroke();
+        drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, W, labelRotation);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: W },
+    };
+  };
+}
+
+export function makeDatabaseRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 50, 70, colorKey);
+    const rx = W / 2;
+    const ry = Math.max(H * 0.12, 6);
+    const bodyTop    = -H / 2 + ry;
+    const bodyBottom =  H / 2 - ry;
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
+        ctx.fillStyle   = visState.selected ? c.hbg     : c.bg;
+        ctx.lineWidth   = 1.5;
+        ctx.fillRect(-rx, bodyTop, W, bodyBottom - bodyTop);
+        ctx.beginPath(); ctx.ellipse(0, bodyBottom, rx, ry, 0, 0, Math.PI * 2);
+        ctx.fill(); ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(-rx, bodyTop); ctx.lineTo(-rx, bodyBottom);
+        ctx.moveTo( rx, bodyTop); ctx.lineTo( rx, bodyBottom);
+        ctx.stroke();
+        ctx.beginPath(); ctx.ellipse(0, bodyTop, rx, ry, 0, 0, Math.PI * 2);
+        ctx.fill(); ctx.stroke();
+        drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: H },
+    };
+  };
+}
+
+// Post-IT: sticky note with folded top-right corner.
+export function makePostItRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 120, 100, colorKey || 'c-amber');
+    const fold = Math.min(W, H) * 0.18;
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
+        ctx.fillStyle   = visState.selected ? c.hbg     : c.bg;
+        ctx.lineWidth   = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(-W / 2,        -H / 2);
+        ctx.lineTo( W / 2 - fold, -H / 2);
+        ctx.lineTo( W / 2,        -H / 2 + fold);
+        ctx.lineTo( W / 2,         H / 2);
+        ctx.lineTo(-W / 2,         H / 2);
+        ctx.closePath();
+        ctx.fill(); ctx.stroke();
+        ctx.globalAlpha = 0.3;
+        ctx.fillStyle   = c.border;
+        ctx.beginPath();
+        ctx.moveTo(W / 2 - fold, -H / 2);
+        ctx.lineTo(W / 2,        -H / 2 + fold);
+        ctx.lineTo(W / 2 - fold, -H / 2 + fold);
+        ctx.closePath();
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.moveTo(W / 2 - fold, -H / 2);
+        ctx.lineTo(W / 2 - fold, -H / 2 + fold);
+        ctx.lineTo(W / 2,        -H / 2 + fold);
+        ctx.stroke();
+        drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: H },
+    };
+  };
+}
+
+// Free Text: no visible border or background — just the label.
+export function makeTextFreeRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 80, 30, colorKey);
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        if (visState.selected || visState.hover) {
+          ctx.strokeStyle = '#f97316';
+          ctx.lineWidth   = 1;
+          ctx.setLineDash([4, 3]);
+          roundRect(ctx, -W / 2, -H / 2, W, H, 3);
+          ctx.stroke();
+          ctx.setLineDash([]);
+        }
+        drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: H },
+    };
+  };
+}
+
+// ── Actor (stick figure) ──────────────────────────────────────────────────────
 const ACTOR_W0 = 30;
 const ACTOR_H0 = 52;
 
-// Factory: returns a vis.js ctxRenderer for the "actor" custom shape.
-//
-// Key design: this is a STABLE function — it is created ONCE per colorKey and
-// never replaced. vis-network caches the ctxRenderer reference inside its
-// CustomShape object and does NOT re-read it from the DataSet after updates,
-// so rebuilding the closure on every resize would have no effect.
-//
-// Instead, the renderer reads live dimensions on every draw call via the node
-// `id` that vis-network passes to ctxRenderer. `st.nodes.get(id)` always
-// returns the latest nodeWidth / nodeHeight written by the resize handler.
 export function makeActorRenderer(colorKey) {
-  const c = NODE_COLORS[colorKey] || NODE_COLORS['c-gray'];
-
-  return function ({ ctx, x, y, id, state: visState, label, style }) {
-    // Read the current dimensions from the DataSet on every draw.
-    const n  = st.nodes && st.nodes.get(id);
-    const W  = (n && n.nodeWidth)  || ACTOR_W0;
-    const H  = (n && n.nodeHeight) || ACTOR_H0;
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, fontSize, c } = nodeData(id, ACTOR_W0, ACTOR_H0, colorKey);
     const sx = W / ACTOR_W0;
     const sy = H / ACTOR_H0;
-    const fontSize = (style && style.font && style.font.size) ? style.font.size : 13;
-
     return {
       drawNode() {
-        // ── Scaled stick figure ───────────────────────────────────────────────
-        ctx.save();
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
         ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
-        ctx.fillStyle   = visState.selected ? c.hbg : c.bg;
+        ctx.fillStyle   = visState.selected ? c.hbg     : c.bg;
         ctx.lineWidth   = 2;
         ctx.lineCap     = 'round';
-        ctx.beginPath(); ctx.arc(x, y - 20*sy, 8*sy, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(x, y - 12*sy); ctx.lineTo(x, y + 8*sy);                ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(x - 13*sx, y - 3*sy); ctx.lineTo(x + 13*sx, y - 3*sy); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(x, y + 8*sy); ctx.lineTo(x - 10*sx, y + 24*sy);        ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(x, y + 8*sy); ctx.lineTo(x + 10*sx, y + 24*sy);        ctx.stroke();
-        ctx.restore();
-
-        // ── Label below the figure ────────────────────────────────────────────
+        ctx.beginPath(); ctx.arc(0, -20 * sy, 8 * sy, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(0, -12 * sy); ctx.lineTo(0, 8 * sy); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-13 * sx, -3 * sy); ctx.lineTo(13 * sx, -3 * sy); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(0, 8 * sy); ctx.lineTo(-10 * sx, 24 * sy); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(0, 8 * sy); ctx.lineTo( 10 * sx, 24 * sy); ctx.stroke();
+        // Label below figure (rotates with the actor)
         if (label) {
           ctx.save();
+          if (labelRotation) ctx.rotate(labelRotation);
           ctx.font         = `${fontSize}px system-ui,-apple-system,sans-serif`;
           ctx.fillStyle    = c.font;
           ctx.textAlign    = 'center';
           ctx.textBaseline = 'top';
           const lines  = String(label).split('\n');
           const lineH  = fontSize * 1.3;
-          const startY = y + 24*sy + 4; // 4 px gap below scaled leg tips
-          lines.forEach((line, i) => ctx.fillText(line, x, startY + i * lineH));
+          const startY = 24 * sy + 4;
+          lines.forEach((line, i) => ctx.fillText(line, 0, startY + i * lineH));
           ctx.restore();
         }
+        ctx.restore();
       },
-      // nodeDimensions must also reflect the current size so vis-network uses
-      // the right bounding box for collision detection and layout.
       nodeDimensions: { width: W, height: H },
     };
   };
 }
 
-// Vertical text offset for top/middle/bottom alignment inside a node.
-export function computeVadjust(textValign, nodeHeight, fontSize) {
-  if (!textValign || textValign === 'middle') return 0;
-  const h  = nodeHeight || 50;
-  const fs = fontSize   || 13;
-  const pad = 8;
-  if (textValign === 'top')    return -(h / 2 - fs / 2 - pad);
-  if (textValign === 'bottom') return   h / 2 - fs / 2 - pad;
-  return 0;
-}
+// ── Public API ────────────────────────────────────────────────────────────────
 
-// Returns the rendered height of a node from vis.js internals, or null.
+// Returns the rendered height from vis-network internals (used by node-panel
+// for vadjust calculations — legacy, kept for API compat).
 export function getActualNodeHeight(id) {
   if (!st.network) return null;
   const bn = st.network.body.nodes[id];
   return bn && bn.shape && bn.shape.height ? bn.shape.height : null;
 }
 
-// Builds the full vis.js node property object (color, font, size constraints, shape).
-export function visNodeProps(shapeType, colorKey, nodeWidth, nodeHeight, fontSize, textAlign, textValign, vadjustHeight) {
-  const c      = NODE_COLORS[colorKey] || NODE_COLORS['c-gray'];
-  const size   = fontSize  || 13;
-  const align  = textAlign || 'center';
-  const vadjust = computeVadjust(textValign, vadjustHeight || nodeHeight, size);
+// Kept for backward compat (called by node-panel but irrelevant for ctxRenderers).
+export function computeVadjust() { return 0; }
+
+const RENDERER_MAP = {
+  box:        makeBoxRenderer,
+  ellipse:    makeEllipseRenderer,
+  circle:     makeCircleRenderer,
+  database:   makeDatabaseRenderer,
+  'post-it':  makePostItRenderer,
+  'text-free':makeTextFreeRenderer,
+  actor:      makeActorRenderer,
+};
+
+// Default dimensions per shape type (used when nodeWidth/nodeHeight are null).
+export const SHAPE_DEFAULTS = {
+  box:        [100, 40],
+  ellipse:    [110, 50],
+  circle:     [55,  55],
+  database:   [50,  70],
+  actor:      [30,  52],
+  'post-it':  [120, 100],
+  'text-free':[80,  30],
+};
+
+// Builds the full vis.js node property object.
+// All shapes are rendered via ctxRenderer so rotation works uniformly.
+export function visNodeProps(shapeType, colorKey, nodeWidth, nodeHeight, fontSize, textAlign, _textValign) {
+  const c    = NODE_COLORS[colorKey] || NODE_COLORS['c-gray'];
+  const size = fontSize  || 13;
+  const align = textAlign || 'center';
 
   const colorP = {
     color: {
-      background: c.bg,
-      border: c.border,
-      highlight: { background: c.hbg, border: c.hborder },
-      hover:     { background: c.hbg, border: c.hborder },
+      background: c.bg,   border: c.border,
+      highlight:  { background: c.hbg, border: c.hborder },
+      hover:      { background: c.hbg, border: c.hborder },
     },
-    font: { color: c.font, size, face: 'system-ui,-apple-system,sans-serif', align, vadjust },
+    font: { color: c.font, size, face: 'system-ui,-apple-system,sans-serif', align },
   };
 
   const sizeP = {};
   if (nodeWidth)  sizeP.widthConstraint  = { minimum: nodeWidth,  maximum: nodeWidth  };
   if (nodeHeight) sizeP.heightConstraint = { minimum: nodeHeight, maximum: nodeHeight };
 
-  if (shapeType === 'actor') {
-    // The renderer reads dimensions from st.nodes at draw time — never recreated.
-    return { shape: 'custom', ctxRenderer: makeActorRenderer(colorKey), ...colorP, ...sizeP };
+  const factory = RENDERER_MAP[shapeType];
+  if (factory) {
+    return { shape: 'custom', ctxRenderer: factory(colorKey), ...colorP, ...sizeP };
   }
-  return { shape: shapeType, ...colorP, ...sizeP };
+  // Unknown shape — fall back to box
+  return { shape: 'custom', ctxRenderer: makeBoxRenderer(colorKey), ...colorP, ...sizeP };
 }

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

@@ -115,6 +115,7 @@ export async function saveDiagram() {
       shapeType: n.shapeType || 'box', colorKey: n.colorKey || 'c-gray',
       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,
       x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y,
     }));
 

package/dist/src/frontend/diagram/selection-overlay.js

@@ -1,36 +1,44 @@
-// ── Selection / resize overlay ────────────────────────────────────────────────
-// Dashed selection box + corner resize handles for selected nodes.
+// ── Selection / resize / rotate overlay ───────────────────────────────────────
+// Dashed selection box, corner resize handles, and top-centre rotation handle.
 
 import { st, markDirty } from './state.js';
-import { visNodeProps } from './node-rendering.js';
+import { visNodeProps, SHAPE_DEFAULTS } from './node-rendering.js';
 
+// ── Bounding box helper (works for all shapes including ctxRenderer) ──────────
+function nodeBounds(id) {
+  const n        = st.nodes.get(id);
+  const bodyNode = st.network.body.nodes[id];
+  if (!bodyNode) return null;
+  const cx = bodyNode.x, cy = bodyNode.y;
+  const shape    = n && n.shapeType || 'box';
+  const defaults = SHAPE_DEFAULTS[shape] || [60, 28];
+  const W = (n && n.nodeWidth)  || defaults[0];
+  const H = (n && n.nodeHeight) || defaults[1];
+  // Use the axis-aligned envelope of the (possibly rotated) bounding box.
+  const rot = (n && n.rotation) || 0;
+  if (rot === 0) {
+    return { minX: cx - W / 2, minY: cy - H / 2, maxX: cx + W / 2, maxY: cy + H / 2 };
+  }
+  const cos = Math.abs(Math.cos(rot));
+  const sin = Math.abs(Math.sin(rot));
+  const hw  = (W * cos + H * sin) / 2;
+  const hh  = (W * sin + H * cos) / 2;
+  // Actor: head extends above cy - H/2 when unrotated
+  const headExtra = shape === 'actor' ? (28 * (H / 52) - H / 2) : 0;
+  return { minX: cx - hw, minY: cy - hh - headExtra, maxX: cx + hw, maxY: cy + hh };
+}
+
+// ── Overlay position ──────────────────────────────────────────────────────────
 export function updateSelectionOverlay() {
   if (!st.network || !st.selectedNodeIds.length) { hideSelectionOverlay(); return; }
 
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const id of st.selectedNodeIds) {
     try {
-      const n = st.nodes.get(id);
-      if (n && n.shapeType === 'actor') {
-        // getBoundingBox() returns wrong values for custom ctxRenderer shapes.
-        // Compute the visual bounds from the node's centre + scaled actor geometry.
-        const bodyNode = st.network.body.nodes[id];
-        if (!bodyNode) continue;
-        const cx = bodyNode.x, cy = bodyNode.y;
-        const W  = n.nodeWidth  || 30;
-        const H  = n.nodeHeight || 52;
-        const sy = H / 52;
-        minX = Math.min(minX, cx - W / 2);
-        minY = Math.min(minY, cy - 28 * sy); // head top
-        maxX = Math.max(maxX, cx + W / 2);
-        maxY = Math.max(maxY, cy + 24 * sy); // legs bottom
-      } else {
-        const bb = st.network.getBoundingBox(id);
-        minX = Math.min(minX, bb.left);
-        minY = Math.min(minY, bb.top);
-        maxX = Math.max(maxX, bb.right);
-        maxY = Math.max(maxY, bb.bottom);
-      }
+      const b = nodeBounds(id);
+      if (!b) continue;
+      minX = Math.min(minX, b.minX); minY = Math.min(minY, b.minY);
+      maxX = Math.max(maxX, b.maxX); maxY = Math.max(maxY, b.maxY);
     } catch (_) { /* node still being created */ }
   }
   if (minX === Infinity) { hideSelectionOverlay(); return; }
@@ -45,38 +53,41 @@ export function updateSelectionOverlay() {
   ov.style.width   = br.x - tl.x + PAD * 2 + 'px';
   ov.style.height  = br.y - tl.y + PAD * 2 + 'px';
 
+  // Position rotation handle: top-centre of the overlay, 28px above it.
+  const rh = document.getElementById('rh-rotate');
+  rh.style.left = (br.x - tl.x) / 2 + PAD - 8 + 'px';
+  rh.style.top  = '-28px';
+
+  // Position label rotation handle: top-centre offset left by 24px to avoid overlap.
+  const lrh = document.getElementById('rh-label-rotate');
+  lrh.style.left = (br.x - tl.x) / 2 + PAD - 8 - 24 + 'px';
+  lrh.style.top  = '-28px';
 }
 
 export function hideSelectionOverlay() {
   document.getElementById('selectionOverlay').style.display = 'none';
 }
 
+// ── Resize ────────────────────────────────────────────────────────────────────
 function onResizeStart(e, corner) {
   if (!st.selectedNodeIds.length || !st.network) return;
   e.preventDefault();
   e.stopPropagation();
 
   const startBBs = st.selectedNodeIds.map((id) => {
-    const n  = st.nodes.get(id);
-    // getBoundingBox() returns wrong values for custom ctxRenderer shapes (actor).
-    // Fall back to the actor's reference dimensions when no resize has happened yet.
-    let initW, initH;
-    if (n && n.shapeType === 'actor') {
-      initW = n.nodeWidth  || 30;
-      initH = n.nodeHeight || 52;
-    } else {
-      const bb = st.network.getBoundingBox(id);
-      initW = n.nodeWidth  || Math.round(bb.right  - bb.left);
-      initH = n.nodeHeight || Math.round(bb.bottom - bb.top);
-    }
+    const n = st.nodes.get(id);
+    const b = nodeBounds(id);
+    const shape    = (n && n.shapeType) || 'box';
+    const defaults = SHAPE_DEFAULTS[shape] || [60, 28];
+    const initW = (n && n.nodeWidth)  || (b ? Math.round(b.maxX - b.minX) : defaults[0]);
+    const initH = (n && n.nodeHeight) || (b ? Math.round(b.maxY - b.minY) : defaults[1]);
     return { id, node: n, initW, initH };
   });
 
-  const initBoxW = startBBs.reduce((max, b) => Math.max(max, b.initW), 0);
-  const initBoxH = startBBs.reduce((max, b) => Math.max(max, b.initH), 0);
+  const initBoxW = startBBs.reduce((m, b) => Math.max(m, b.initW), 0);
+  const initBoxH = startBBs.reduce((m, b) => Math.max(m, b.initH), 0);
 
   st.resizeDrag = { corner, startMouse: { x: e.clientX, y: e.clientY }, startBBs, initBoxW, initBoxH };
-
   st.selectedNodeIds.forEach((id) => st.nodes.update({ id, fixed: true }));
   document.getElementById('vis-canvas').style.pointerEvents = 'none';
   document.addEventListener('mousemove', onResizeDrag);
@@ -88,9 +99,8 @@ function onResizeDrag(e) {
   const scale = st.network.getScale();
   const cdx   = (e.clientX - st.resizeDrag.startMouse.x) / scale;
   const cdy   = (e.clientY - st.resizeDrag.startMouse.y) / scale;
-  const MIN   = 40;
+  const MIN   = 20;
   const c     = st.resizeDrag.corner;
-
   const updatedIds = [];
 
   if (st.resizeDrag.startBBs.length === 1) {
@@ -102,7 +112,7 @@ function onResizeDrag(e) {
     if (c === 'tl') { nW = initW - cdx; nH = initH - cdy; }
     nW = Math.max(MIN, Math.round(nW));
     nH = Math.max(MIN, Math.round(nH));
-    st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign, nH) });
+    st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign) });
     updatedIds.push(id);
   } else {
     const { initBoxW, initBoxH } = st.resizeDrag;
@@ -111,25 +121,17 @@ function onResizeDrag(e) {
     if (c === 'bl') { sx = (initBoxW - cdx) / initBoxW; sy = (initBoxH + cdy) / initBoxH; }
     if (c === 'tr') { sx = (initBoxW + cdx) / initBoxW; sy = (initBoxH - cdy) / initBoxH; }
     if (c === 'tl') { sx = (initBoxW - cdx) / initBoxW; sy = (initBoxH - cdy) / initBoxH; }
-    sx = Math.max(0.1, sx);
-    sy = Math.max(0.1, sy);
+    sx = Math.max(0.1, sx); sy = Math.max(0.1, sy);
     for (const { id, node, initW, initH } of st.resizeDrag.startBBs) {
       const nW = Math.max(MIN, Math.round(initW * sx));
       const nH = Math.max(MIN, Math.round(initH * sy));
-      st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign, nH) });
+      st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign) });
       updatedIds.push(id);
     }
   }
 
-  // vis-network's needsRefresh() can return false for certain shapes (e.g. database)
-  // when only widthConstraint or heightConstraint changes, because the check is based
-  // on label/font state, not constraints. Force the internal refresh flag and redraw.
-  updatedIds.forEach((id) => {
-    const bn = st.network.body.nodes[id];
-    if (bn) bn.refreshNeeded = true;
-  });
+  updatedIds.forEach((id) => { const bn = st.network.body.nodes[id]; if (bn) bn.refreshNeeded = true; });
   st.network.redraw();
-
   updateSelectionOverlay();
 }
 
@@ -143,7 +145,112 @@ function onResizeEnd() {
   markDirty();
 }
 
-// ── Wire corner handle mouse events ───────────────────────────────────────────
+// ── Rotation ──────────────────────────────────────────────────────────────────
+function onRotateStart(e) {
+  if (!st.selectedNodeIds.length || !st.network) return;
+  e.preventDefault();
+  e.stopPropagation();
+
+  // Barycentre of the selection in canvas coordinates.
+  const positions = st.network.getPositions(st.selectedNodeIds);
+  const ids = st.selectedNodeIds;
+  const cx = ids.reduce((s, id) => s + (positions[id] ? positions[id].x : 0), 0) / ids.length;
+  const cy = ids.reduce((s, id) => s + (positions[id] ? positions[id].y : 0), 0) / ids.length;
+
+  const nodeAngles = ids.map((id) => {
+    const n = st.nodes.get(id);
+    const pos = positions[id] || { x: 0, y: 0 };
+    return {
+      id,
+      initRotation: (n && n.rotation) || 0,
+      // Position relative to barycentre at drag start
+      relX: pos.x - cx,
+      relY: pos.y - cy,
+    };
+  });
+
+  // Horizontal drag → rotation: right = clockwise, left = counter-clockwise.
+  // 1 px = 1 degree.
+  st.rotateDrag = { startX: e.clientX, nodeAngles, cx, cy };
+  document.getElementById('vis-canvas').style.pointerEvents = 'none';
+  document.addEventListener('mousemove', onRotateDrag);
+  document.addEventListener('mouseup',   onRotateEnd);
+}
+
+function onRotateDrag(e) {
+  if (!st.rotateDrag || !st.network) return;
+  const { startX, nodeAngles, cx, cy } = st.rotateDrag;
+  const dx    = e.clientX - startX;
+  const delta = dx * (Math.PI / 180); // 1 px = 1 degree
+  const cos   = Math.cos(delta);
+  const sin   = Math.sin(delta);
+
+  nodeAngles.forEach(({ id, initRotation, relX, relY }) => {
+    // Rotate the node's position around the barycentre
+    const newX = cx + relX * cos - relY * sin;
+    const newY = cy + relX * sin + relY * cos;
+    st.network.moveNode(id, newX, newY);
+    // Rotate the node's own orientation
+    st.nodes.update({ id, rotation: initRotation + delta });
+    const bn = st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  st.network.redraw();
+  updateSelectionOverlay();
+}
+
+function onRotateEnd() {
+  if (!st.rotateDrag) return;
+  document.getElementById('vis-canvas').style.pointerEvents = '';
+  document.removeEventListener('mousemove', onRotateDrag);
+  document.removeEventListener('mouseup',   onRotateEnd);
+  st.rotateDrag = null;
+  markDirty();
+}
+
+// ── Label rotation ────────────────────────────────────────────────────────────
+function onLabelRotateStart(e) {
+  if (!st.selectedNodeIds.length || !st.network) return;
+  e.preventDefault();
+  e.stopPropagation();
+
+  const nodeAngles = st.selectedNodeIds.map((id) => {
+    const n = st.nodes.get(id);
+    return { id, initLabelRotation: (n && n.labelRotation) || 0 };
+  });
+
+  st.labelRotateDrag = { startX: e.clientX, nodeAngles };
+  document.getElementById('vis-canvas').style.pointerEvents = 'none';
+  document.addEventListener('mousemove', onLabelRotateDrag);
+  document.addEventListener('mouseup',   onLabelRotateEnd);
+}
+
+function onLabelRotateDrag(e) {
+  if (!st.labelRotateDrag || !st.network) return;
+  const { startX, nodeAngles } = st.labelRotateDrag;
+  const dx    = e.clientX - startX;
+  const delta = dx * (Math.PI / 180); // 1 px = 1 degree
+
+  nodeAngles.forEach(({ id, initLabelRotation }) => {
+    st.nodes.update({ id, labelRotation: initLabelRotation + delta });
+    const bn = st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  st.network.redraw();
+}
+
+function onLabelRotateEnd() {
+  if (!st.labelRotateDrag) return;
+  document.getElementById('vis-canvas').style.pointerEvents = '';
+  document.removeEventListener('mousemove', onLabelRotateDrag);
+  document.removeEventListener('mouseup',   onLabelRotateEnd);
+  st.labelRotateDrag = null;
+  markDirty();
+}
+
+// ── Wire handles ──────────────────────────────────────────────────────────────
 ['tl', 'tr', 'bl', 'br'].forEach((corner) => {
   document.getElementById('rh-' + corner).addEventListener('mousedown', (e) => onResizeStart(e, corner));
 });
+document.getElementById('rh-rotate').addEventListener('mousedown', onRotateStart);
+document.getElementById('rh-label-rotate').addEventListener('mousedown', onLabelRotateStart);

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

@@ -19,6 +19,10 @@ export const st = {
   editingNodeId: null,
   editingEdgeId: null,
   resizeDrag: null,
+  rotateDrag: null,        // { startX, nodeAngles: [{id, initRotation}] }
+  labelRotateDrag: null,   // { startX, nodeAngles: [{id, initLabelRotation}] }
+  activeStamp: null,       // 'color' | 'rotation' | 'fontSize' | null
+  stampTargetIds: [],      // node IDs waiting to receive the stamped property
   clipboard: null,        // { nodes: [], edges: [] }
   canonicalOrder: [],     // user-defined z-order, immune to vis.js hover reordering
 };

package/dist/src/frontend/diagram.html

@@ -151,7 +151,7 @@
         background: rgba(0, 0, 0, 0.78);
       }
 
-      /* Resize / selection overlay */
+      /* Resize / rotation / selection overlay */
       #selectionOverlay {
         position: absolute;
         display: none;
@@ -174,6 +174,42 @@
       .dark .resize-handle {
         background: #374151;
       }
+      #rh-rotate {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: white;
+        border: 2px solid #f97316;
+        border-radius: 50%;
+        pointer-events: all;
+        z-index: 1;
+        cursor: grab;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        color: #f97316;
+      }
+      #rh-rotate:active { cursor: grabbing; }
+      .dark #rh-rotate { background: #374151; }
+      #rh-label-rotate {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: white;
+        border: 2px solid #6366f1;
+        border-radius: 50%;
+        pointer-events: all;
+        z-index: 1;
+        cursor: grab;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        color: #6366f1;
+      }
+      #rh-label-rotate:active { cursor: grabbing; }
+      .dark #rh-label-rotate { background: #374151; }
     </style>
   </head>
   <body
@@ -304,6 +340,24 @@
           <line x1="6" y1="10" x2="9.5" y2="15" />
         </svg>
       </button>
+      <button
+        id="toolPostIt"
+        class="tool-btn"
+        title="Post-it (P)"
+      >
+        <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.4">
+          <path d="M1 1 H9 L12 4 V12 H1 Z" />
+          <path d="M9 1 V4 H12" stroke-opacity="0.5"/>
+        </svg>
+      </button>
+      <button
+        id="toolTextFree"
+        class="tool-btn"
+        title="Texte libre (T)"
+        style="font-size:11px; font-weight:600;"
+      >
+        T
+      </button>
       <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
 
       <button
@@ -458,6 +512,9 @@
         <!-- Debug overlay layer -->
         <div id="debugLayer"></div>
 
+        <!-- Stamp overlay: intercepts canvas clicks during stamp mode -->
+        <div id="stampOverlay" style="position:absolute;inset:0;display:none;z-index:9;"></div>
+
         <!-- Selection / resize overlay -->
         <div id="selectionOverlay">
           <div
@@ -480,6 +537,8 @@
             class="resize-handle"
             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>
 
         <!-- Node panel -->
@@ -752,6 +811,43 @@
               <rect x="5" y="1" width="8" height="8" rx="1" />
             </svg>
           </button>
+
+          <div class="panel-sep"></div>
+
+          <!-- Stamp: copy color -->
+          <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"/>
+            </svg>
+          </button>
+
+          <!-- Stamp: copy font size -->
+          <button
+            id="btnStampFontSize"
+            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>
 
         <!-- Edge panel -->

package/package.json

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