living-documentation 3.5.0 → 3.7.0

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

@@ -0,0 +1,58 @@
+// ── Clipboard (copy / paste) ───────────────────────────────────────────────────
+
+import { st, markDirty } from './state.js';
+import { visNodeProps }  from './node-rendering.js';
+import { visEdgeProps }  from './edge-rendering.js';
+import { showNodePanel } from './node-panel.js';
+
+export function copySelected() {
+  if (!st.network || !st.selectedNodeIds.length) return;
+
+  const positions   = st.network.getPositions(st.selectedNodeIds);
+  const copiedNodes = st.selectedNodeIds.map((id) => {
+    const { ctxRenderer, ...rest } = st.nodes.get(id);
+    return { ...rest, x: positions[id]?.x ?? rest.x, y: positions[id]?.y ?? rest.y };
+  });
+
+  // Only copy edges where both endpoints are in the selection
+  const selectedSet = new Set(st.selectedNodeIds);
+  const copiedEdges = st.edges.get().filter((e) => selectedSet.has(e.from) && selectedSet.has(e.to));
+
+  st.clipboard = { nodes: copiedNodes, edges: copiedEdges };
+}
+
+export function pasteClipboard() {
+  if (!st.clipboard || !st.clipboard.nodes.length || !st.network) return;
+
+  const OFFSET = 40;
+  const idMap  = {};
+  st.clipboard.nodes.forEach((n) => { idMap[n.id] = 'n' + Date.now() + Math.random().toString(36).slice(2); });
+
+  const newNodes = st.clipboard.nodes.map((n) => ({
+    ...n, id: idMap[n.id], x: (n.x || 0) + OFFSET, y: (n.y || 0) + OFFSET,
+    ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign),
+  }));
+  const newEdges = st.clipboard.edges.map((e) => ({
+    ...e,
+    id: 'e' + Date.now() + Math.random().toString(36).slice(2),
+    from: idMap[e.from], to: idMap[e.to],
+    ...visEdgeProps(e.arrowDir ?? 'to', e.dashes ?? false),
+    ...(e.fontSize ? { font: { size: e.fontSize, align: 'middle', color: '#6b7280' } } : {}),
+  }));
+
+  st.nodes.add(newNodes);
+  st.edges.add(newEdges);
+
+  const newIds = newNodes.map((n) => n.id);
+  st.network.selectNodes(newIds);
+  st.selectedNodeIds = newIds;
+  st.selectedEdgeIds = [];
+  showNodePanel();
+  markDirty();
+
+  // Offset clipboard so each successive paste is staggered
+  st.clipboard = {
+    nodes: st.clipboard.nodes.map((n) => ({ ...n, x: (n.x || 0) + OFFSET, y: (n.y || 0) + OFFSET })),
+    edges: st.clipboard.edges,
+  };
+}

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

@@ -0,0 +1,34 @@
+// ── Constants ─────────────────────────────────────────────────────────────────
+// Pure compile-time values shared across all diagram modules.
+
+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:post-it':   'toolPostIt',
+  'addNode:text-free': 'toolTextFree',
+  addEdge: 'toolArrow',
+};
+
+export const NODE_COLORS = {
+  'c-gray':   { bg: '#f5f5f4', border: '#a8a29e', font: '#292524', hbg: '#e7e5e4', hborder: '#78716c' },
+  'c-blue':   { bg: '#dbeafe', border: '#3b82f6', font: '#1e40af', hbg: '#bfdbfe', hborder: '#2563eb' },
+  'c-green':  { bg: '#dcfce7', border: '#22c55e', font: '#166534', hbg: '#bbf7d0', hborder: '#16a34a' },
+  'c-amber':  { bg: '#fef9c3', border: '#f59e0b', font: '#78350f', hbg: '#fef08a', hborder: '#d97706' },
+  'c-rose':   { bg: '#ffe4e6', border: '#f43f5e', font: '#881337', hbg: '#fecdd3', hborder: '#e11d48' },
+  'c-purple': { bg: '#ede9fe', border: '#8b5cf6', font: '#4c1d95', hbg: '#ddd6fe', hborder: '#7c3aed' },
+  'c-teal':   { bg: '#ccfbf1', border: '#14b8a6', font: '#134e4a', hbg: '#99f6e4', hborder: '#0d9488' },
+  'c-orange': { bg: '#ffedd5', border: '#f97316', font: '#7c2d12', hbg: '#fed7aa', hborder: '#ea580c' },
+  'c-cyan':   { bg: '#cffafe', border: '#06b6d4', font: '#164e63', hbg: '#a5f3fc', hborder: '#0891b2' },
+  'c-indigo': { bg: '#e0e7ff', border: '#6366f1', font: '#312e81', hbg: '#c7d2fe', hborder: '#4f46e5' },
+  'c-pink':   { bg: '#fce7f3', border: '#ec4899', font: '#831843', hbg: '#fbcfe8', hborder: '#db2777' },
+  'c-lime':   { bg: '#ecfccb', border: '#84cc16', font: '#365314', hbg: '#d9f99d', hborder: '#65a30d' },
+  'c-red':    { bg: '#fee2e2', border: '#ef4444', font: '#7f1d1d', hbg: '#fecaca', hborder: '#dc2626' },
+  'c-sky':    { bg: '#e0f2fe', border: '#0ea5e9', font: '#0c4a6e', hbg: '#bae6fd', hborder: '#0284c7' },
+  'c-slate':  { bg: '#f1f5f9', border: '#64748b', font: '#0f172a', hbg: '#e2e8f0', hborder: '#475569' },
+};

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

@@ -0,0 +1,43 @@
+// ── Debug overlay ─────────────────────────────────────────────────────────────
+// DOM overlay showing node IDs and bounding-box coordinates for each node.
+// Toggled by the showDiagramDebug config flag (Admin panel).
+
+import { st } from './state.js';
+
+export function toggleDebug() {
+  st.debugMode = !st.debugMode;
+  document.getElementById('btnDebug').classList.toggle('tool-active', st.debugMode);
+  if (st.network) st.network.redraw();
+}
+
+// Called on network "afterDrawing". Recycles existing .debug-box elements by node id.
+export function drawDebugOverlay() {
+  const layer = document.getElementById('debugLayer');
+  if (!st.debugMode || !st.network) { layer.innerHTML = ''; return; }
+
+  const existing = new Map(
+    [...layer.querySelectorAll('.debug-box')].map((el) => [el.dataset.nid, el])
+  );
+  const seen = new Set();
+
+  for (const id of st.canonicalOrder) {
+    const bodyNode = st.network.body.nodes[id];
+    if (!bodyNode) continue;
+    const w  = bodyNode.shape.width  || 0;
+    const h  = bodyNode.shape.height || 0;
+    const cx = bodyNode.x, cy = bodyNode.y;
+    const L  = cx - w / 2, T = cy - h / 2;
+
+    const dom  = st.network.canvasToDOM({ x: cx + w / 2 + 8, y: cy - h / 2 });
+    const text = [`id : ${id}`, `cx=${Math.round(cx)}  cy=${Math.round(cy)}`, `w =${Math.round(w)}   h =${Math.round(h)}`, `L =${Math.round(L)}   T =${Math.round(T)}`].join('\n');
+
+    let box = existing.get(String(id));
+    if (!box) { box = document.createElement('div'); box.className = 'debug-box'; box.dataset.nid = String(id); layer.appendChild(box); }
+    box.textContent = text;
+    box.style.left  = Math.round(dom.x) + 'px';
+    box.style.top   = Math.round(dom.y) + 'px';
+    seen.add(String(id));
+  }
+
+  existing.forEach((el, nid) => { if (!seen.has(nid)) el.remove(); });
+}

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

@@ -0,0 +1,61 @@
+// ── Edge panel ────────────────────────────────────────────────────────────────
+// Floating formatting toolbar for selected edges (arrow type, line style, font size).
+
+import { st, markDirty } from './state.js';
+import { visEdgeProps } from './edge-rendering.js';
+
+export function showEdgePanel() {
+  if (!st.selectedEdgeIds.length) return;
+  const e = st.edges.get(st.selectedEdgeIds[0]);
+  if (!e) return;
+  const dir    = e.arrowDir ?? 'to';
+  const dashes = e.dashes   ?? false;
+
+  ['edgeBtnNone', 'edgeBtnTo', 'edgeBtnBoth'].forEach((id) =>
+    document.getElementById(id).classList.remove('edge-btn-active'));
+  document.getElementById({ none: 'edgeBtnNone', to: 'edgeBtnTo', both: 'edgeBtnBoth' }[dir] || 'edgeBtnTo')
+    .classList.add('edge-btn-active');
+
+  ['edgeBtnSolid', 'edgeBtnDashed'].forEach((id) =>
+    document.getElementById(id).classList.remove('edge-btn-active'));
+  document.getElementById(dashes ? 'edgeBtnDashed' : 'edgeBtnSolid').classList.add('edge-btn-active');
+
+  document.getElementById('edgePanel').classList.remove('hidden');
+}
+
+export function hideEdgePanel() {
+  document.getElementById('edgePanel').classList.add('hidden');
+}
+
+export function setEdgeArrow(dir) {
+  if (!st.selectedEdgeIds.length) return;
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    st.edges.update({ id, arrowDir: dir, ...visEdgeProps(dir, e.dashes ?? false) });
+  });
+  showEdgePanel();
+  markDirty();
+}
+
+export function setEdgeDashes(dashes) {
+  if (!st.selectedEdgeIds.length) return;
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    st.edges.update({ id, dashes, ...visEdgeProps(e.arrowDir ?? 'to', dashes) });
+  });
+  showEdgePanel();
+  markDirty();
+}
+
+export function changeEdgeFontSize(delta) {
+  if (!st.selectedEdgeIds.length) return;
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const newSize = Math.max(8, Math.min(48, (e.fontSize || 11) + delta));
+    st.edges.update({ id, fontSize: newSize, font: { size: newSize, align: 'middle', color: '#6b7280' } });
+  });
+  markDirty();
+}

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

@@ -0,0 +1,12 @@
+// ── Edge rendering ────────────────────────────────────────────────────────────
+// Builds vis.js edge property objects (arrows, dashes).
+
+export function visEdgeProps(arrowDir, dashes) {
+  return {
+    arrows: {
+      to:   { enabled: arrowDir === 'to'   || arrowDir === 'both', scaleFactor: 0.7 },
+      from: { enabled: arrowDir === 'both',                        scaleFactor: 0.7 },
+    },
+    dashes: dashes === true,
+  };
+}

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

@@ -0,0 +1,85 @@
+// ── Grid & physics ────────────────────────────────────────────────────────────
+// Grid rendering (beforeDrawing), snap-to-grid (dragEnd), physics toggle.
+
+import { st, markDirty } from './state.js';
+import { GRID_SIZE } from './constants.js';
+
+
+export function togglePhysics() {
+  st.physicsEnabled = !st.physicsEnabled;
+  const btn = document.getElementById('btnPhysics');
+  btn.classList.toggle('tool-active', st.physicsEnabled);
+  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() {
+  st.gridEnabled = !st.gridEnabled;
+  const btn = document.getElementById('btnGrid');
+  btn.classList.toggle('tool-active', st.gridEnabled);
+  btn.title = st.gridEnabled ? 'Grille activée (snap on)' : 'Grille / Snap to grid (G)';
+  if (st.network) st.network.redraw();
+}
+
+// Called on network "beforeDrawing" — draws grid lines in physical pixel space.
+export function drawGrid(ctx) {
+  if (!st.gridEnabled || !st.network) return;
+  const isDark = document.documentElement.classList.contains('dark');
+  const color  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.15)';
+  const scale  = st.network.getScale();
+  const center = st.network.getViewPosition();
+  const canvas = ctx.canvas;
+  const W = canvas.width, H = canvas.height;
+
+  // vis.js coordinates (center.x, scale) are in CSS pixels; must multiply by DPR
+  // so the grid aligns correctly on Retina/HiDPI displays.
+  const dpr    = window.devicePixelRatio || 1;
+  const step   = GRID_SIZE * scale * dpr;
+  const offsetX = (((W / 2 - center.x * scale * dpr) % step) + step) % step;
+  const offsetY = (((H / 2 - center.y * scale * dpr) % step) + step) % step;
+
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0); // physical pixel space
+  ctx.strokeStyle = color;
+  ctx.lineWidth   = 1;
+  ctx.beginPath();
+  for (let x = offsetX; x < W; x += step) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
+  for (let y = offsetY; y < H; y += step) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
+  ctx.stroke();
+  ctx.restore();
+}
+
+// Called on network "dragEnd" — snaps dragged nodes to the grid.
+export function onDragEnd(params) {
+  if (st.gridEnabled && params.nodes && params.nodes.length > 0) {
+    params.nodes.forEach((id) => {
+      const bodyNode = st.network.body.nodes[id];
+      if (!bodyNode) return;
+      // shape.width/height are set by resize() on each draw — exact visual size
+      const w = bodyNode.shape.width  || 0;
+      const h = bodyNode.shape.height || 0;
+      const cx = bodyNode.x, cy = bodyNode.y;
+      // Snap the visual top-left corner to grid lines
+      const snappedLeft = Math.round((cx - w / 2) / GRID_SIZE) * GRID_SIZE;
+      const snappedTop  = Math.round((cy - h / 2) / GRID_SIZE) * GRID_SIZE;
+      st.network.moveNode(id, snappedLeft + w / 2, snappedTop + h / 2);
+    });
+  }
+  markDirty();
+}

package/dist/src/frontend/diagram/label-editor.js

@@ -0,0 +1,90 @@
+// ── Label editor ──────────────────────────────────────────────────────────────
+// Floating textarea for in-place editing of node and edge labels.
+
+import { st, markDirty } from './state.js';
+
+export function autoResizeTextarea(ta) {
+  ta.style.height = 'auto';
+  ta.style.height = ta.scrollHeight + 'px';
+}
+
+export function startLabelEdit() {
+  if (!st.selectedNodeIds.length || !st.network) return;
+  const nodeId = st.selectedNodeIds[0];
+  const n = st.nodes.get(nodeId);
+  if (!n) return;
+
+  st.editingNodeId = nodeId;
+  st.editingEdgeId = null;
+
+  const pos = st.network.getPositions([nodeId])[nodeId] || { x: 0, y: 0 };
+  const dom = st.network.canvasToDOM(pos);
+  const ta  = document.getElementById('labelInput');
+  ta.value       = n.label || '';
+  ta.style.left  = dom.x - 75 + 'px';
+  ta.style.top   = dom.y - 30 + 'px';
+  ta.style.width = '150px';
+  ta.classList.remove('hidden');
+  autoResizeTextarea(ta);
+  ta.focus();
+  ta.select();
+}
+
+export function startEdgeLabelEdit() {
+  if (!st.selectedEdgeIds.length || !st.network) return;
+  const edgeId = st.selectedEdgeIds[0];
+  const e = st.edges.get(edgeId);
+  if (!e) return;
+
+  st.editingEdgeId = edgeId;
+  st.editingNodeId = null;
+
+  const positions = st.network.getPositions([e.from, e.to]);
+  const fp  = positions[e.from] || { x: 0, y: 0 };
+  const tp  = positions[e.to]   || { x: 0, y: 0 };
+  const mid = st.network.canvasToDOM({ x: (fp.x + tp.x) / 2, y: (fp.y + tp.y) / 2 });
+
+  const ta  = document.getElementById('labelInput');
+  ta.value       = e.label || '';
+  ta.style.left  = mid.x - 60 + 'px';
+  ta.style.top   = mid.y - 14 + 'px';
+  ta.style.width = '120px';
+  ta.classList.remove('hidden');
+  autoResizeTextarea(ta);
+  ta.focus();
+  ta.select();
+}
+
+export function commitLabelEdit() {
+  const ta = document.getElementById('labelInput');
+  if (st.editingNodeId) {
+    st.nodes.update({ id: st.editingNodeId, label: ta.value });
+    markDirty();
+  } else if (st.editingEdgeId) {
+    st.edges.update({ id: st.editingEdgeId, label: ta.value });
+    markDirty();
+  }
+  st.editingNodeId = null;
+  st.editingEdgeId = null;
+}
+
+export function hideLabelInput() {
+  document.getElementById('labelInput').classList.add('hidden');
+  st.editingNodeId = null;
+  st.editingEdgeId = null;
+}
+
+// ── Wire labelInput DOM events ────────────────────────────────────────────────
+const labelInput = document.getElementById('labelInput');
+
+labelInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    commitLabelEdit();
+    hideLabelInput();
+    e.preventDefault();
+  } else if (e.key === 'Escape') {
+    hideLabelInput();
+  }
+});
+labelInput.addEventListener('input',  (e) => autoResizeTextarea(e.target));
+labelInput.addEventListener('blur',   ()  => { commitLabelEdit(); hideLabelInput(); });

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

@@ -0,0 +1,173 @@
+// ── Application entry point ───────────────────────────────────────────────────
+// Wires all toolbar buttons, keyboard shortcuts, and bootstraps the app.
+
+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 { hideEdgePanel, setEdgeArrow, setEdgeDashes, changeEdgeFontSize } from './edge-panel.js';
+import { startLabelEdit, startEdgeLabelEdit, hideLabelInput } from './label-editor.js';
+import { hideSelectionOverlay } from './selection-overlay.js';
+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';
+
+// ── Tool management ───────────────────────────────────────────────────────────
+
+function setTool(tool, shape) {
+  st.currentTool = tool;
+  if (shape) st.pendingShape = shape;
+
+  document.querySelectorAll('.tool-btn').forEach((b) => b.classList.remove('tool-active'));
+  if (st.physicsEnabled) document.getElementById('btnPhysics').classList.add('tool-active');
+
+  const key = tool === 'addNode' ? `addNode:${shape || st.pendingShape}` : tool;
+  const btn = document.getElementById(TOOL_BTN_MAP[key]);
+  if (btn) btn.classList.add('tool-active');
+
+  document.getElementById('vis-canvas').classList.toggle('cursor-crosshair', tool === 'addNode' || tool === 'addEdge');
+
+  if (tool === 'addEdge' && st.network) st.network.addEdgeMode();
+  else if (st.network) st.network.disableEditMode();
+}
+
+function deleteSelected() {
+  if (!st.network) return;
+  st.network.deleteSelected();
+  hideNodePanel();
+  hideEdgePanel();
+  hideLabelInput();
+  hideSelectionOverlay();
+  st.editingNodeId = null;
+  st.editingEdgeId = null;
+  markDirty();
+}
+
+// ── Sidebar & dark mode ───────────────────────────────────────────────────────
+
+function toggleSidebar() {
+  st.sidebarOpen = !st.sidebarOpen;
+  const sb = document.getElementById('sidebar');
+  sb.style.width    = st.sidebarOpen ? '14rem' : '0';
+  sb.style.overflow = st.sidebarOpen ? '' : 'hidden';
+}
+
+function toggleDark() {
+  const dark = document.documentElement.classList.toggle('dark');
+  localStorage.setItem('ld-dark', dark);
+  document.getElementById('darkIcon').textContent = dark ? '☀' : '☽';
+}
+
+// ── Toolbar button wiring ─────────────────────────────────────────────────────
+
+document.getElementById('btnSidebar').addEventListener('click', toggleSidebar);
+
+document.getElementById('toolSelect').addEventListener('click', () => setTool('select'));
+document.getElementById('toolBox').addEventListener('click',      () => setTool('addNode', 'box'));
+document.getElementById('toolEllipse').addEventListener('click',  () => setTool('addNode', 'ellipse'));
+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);
+document.getElementById('btnPhysics').addEventListener('click', togglePhysics);
+document.getElementById('btnGrid').addEventListener('click', toggleGrid);
+
+document.getElementById('btnZoomOut').addEventListener('click',   () => adjustZoom(-0.2));
+document.getElementById('btnZoomIn').addEventListener('click',    () => adjustZoom(0.2));
+document.getElementById('btnZoomReset').addEventListener('click', resetZoom);
+
+document.getElementById('btnDark').addEventListener('click', toggleDark);
+document.getElementById('btnDebug').addEventListener('click', toggleDebug);
+document.getElementById('btnSave').addEventListener('click',  saveDiagram);
+document.getElementById('btnNewDiagram').addEventListener('click', newDiagram);
+
+// Dirty state on title edits
+document.getElementById('diagramTitle').addEventListener('input', markDirty);
+
+// ── Node panel wiring ─────────────────────────────────────────────────────────
+
+document.getElementById('nodePanel').addEventListener('click', (e) => {
+  const colorBtn = e.target.closest('[data-color]');
+  if (colorBtn) setNodeColor(colorBtn.dataset.color);
+});
+document.getElementById('btnNodeLabelEdit').addEventListener('click', startLabelEdit);
+document.getElementById('btnNodeFontDecrease').addEventListener('click', () => changeNodeFontSize(-1));
+document.getElementById('btnNodeFontIncrease').addEventListener('click', () => changeNodeFontSize(1));
+document.getElementById('btnAlignLeft').addEventListener('click',   () => setTextAlign('left'));
+document.getElementById('btnAlignCenter').addEventListener('click', () => setTextAlign('center'));
+document.getElementById('btnAlignRight').addEventListener('click',  () => setTextAlign('right'));
+document.getElementById('btnValignTop').addEventListener('click',    () => setTextValign('top'));
+document.getElementById('btnValignMiddle').addEventListener('click', () => setTextValign('middle'));
+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 ─────────────────────────────────────────────────────────
+
+document.getElementById('edgeBtnNone').addEventListener('click',   () => setEdgeArrow('none'));
+document.getElementById('edgeBtnTo').addEventListener('click',     () => setEdgeArrow('to'));
+document.getElementById('edgeBtnBoth').addEventListener('click',   () => setEdgeArrow('both'));
+document.getElementById('edgeBtnSolid').addEventListener('click',  () => setEdgeDashes(false));
+document.getElementById('edgeBtnDashed').addEventListener('click', () => setEdgeDashes(true));
+document.getElementById('btnEdgeFontDecrease').addEventListener('click', () => changeEdgeFontSize(-1));
+document.getElementById('btnEdgeFontIncrease').addEventListener('click', () => changeEdgeFontSize(1));
+document.getElementById('btnEdgeLabelEdit').addEventListener('click', startEdgeLabelEdit);
+
+// ── Keyboard shortcuts ────────────────────────────────────────────────────────
+
+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 === '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; }
+  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 === '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; }
+});
+
+// ── Dark mode initialisation ──────────────────────────────────────────────────
+
+document.getElementById('darkIcon').textContent =
+  document.documentElement.classList.contains('dark') ? '☀' : '☽';
+
+// ── Config fetch & debug button visibility ────────────────────────────────────
+
+(async () => {
+  try {
+    const cfg = await fetch('/api/config').then((r) => r.json());
+    if (cfg.showDiagramDebug) {
+      document.getElementById('btnDebug').classList.remove('hidden');
+      document.getElementById('sepDebug').classList.remove('hidden');
+    }
+  } catch {
+    /* config unavailable — debug button stays hidden */
+  }
+})();
+
+// ── Bootstrap ─────────────────────────────────────────────────────────────────
+
+loadDiagramList();