living-documentation 3.5.0 → 3.6.0

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

@@ -0,0 +1,168 @@
+// ── Network initialisation & vis.js event handlers ────────────────────────────
+// Creates the vis.js Network, patches _drawNodes for canonical z-order,
+// and wires all network-level events.
+
+import { st, markDirty } from './state.js';
+import { visNodeProps }   from './node-rendering.js';
+import { visEdgeProps }   from './edge-rendering.js';
+import { showNodePanel, hideNodePanel } from './node-panel.js';
+import { showEdgePanel, hideEdgePanel } from './edge-panel.js';
+import { startLabelEdit, startEdgeLabelEdit, commitLabelEdit, hideLabelInput } from './label-editor.js';
+import { updateSelectionOverlay, hideSelectionOverlay } from './selection-overlay.js';
+import { drawGrid, onDragEnd } from './grid.js';
+import { drawDebugOverlay }    from './debug.js';
+import { updateZoomDisplay }   from './zoom.js';
+
+export function initNetwork(savedNodes, savedEdges) {
+  const container = document.getElementById('vis-canvas');
+
+  st.nodes = new vis.DataSet(
+    savedNodes.map((n) => ({
+      ...n,
+      ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign),
+    }))
+  );
+  st.edges = new vis.DataSet(
+    savedEdges.map((e) => ({
+      ...e,
+      ...visEdgeProps(e.arrowDir ?? 'to', e.dashes ?? false),
+      ...(e.fontSize ? { font: { size: e.fontSize, align: 'middle', color: '#6b7280' } } : {}),
+    }))
+  );
+
+  const options = {
+    physics: {
+      enabled: st.physicsEnabled,
+      stabilization: { enabled: false },
+      barnesHut: { gravitationalConstant: -3000, centralGravity: 0.3, springLength: 150, springConstant: 0.04, damping: 0.09 },
+    },
+    interaction: { hover: true, navigationButtons: false, keyboard: false, multiselect: true },
+    nodes: { font: { size: 13, face: 'system-ui,-apple-system,sans-serif' }, borderWidth: 1.5, borderWidthSelected: 2.5, shadow: false, widthConstraint: { minimum: 60 }, heightConstraint: { minimum: 28 } },
+    edges: { smooth: { type: 'continuous' }, color: { color: '#a8a29e', highlight: '#f97316', hover: '#f97316' }, width: 1.5, selectionWidth: 2.5, font: { size: 11, align: 'middle', color: '#6b7280' } },
+    manipulation: {
+      enabled: false,
+      addEdge(data, callback) {
+        data.id       = 'e' + Date.now();
+        data.arrowDir = 'to';
+        data.dashes   = false;
+        Object.assign(data, visEdgeProps('to', false));
+        callback(data);
+        markDirty();
+        setTimeout(() => st.network.addEdgeMode(), 0);
+      },
+    },
+  };
+
+  if (st.network) st.network.destroy();
+  st.network = new vis.Network(container, { nodes: st.nodes, edges: st.edges }, options);
+
+  // ── Z-order patch ──────────────────────────────────────────────────────────
+  // vis.js renders in 3 passes (normal → selected → hovered), which breaks
+  // user-defined stacking. We replace _drawNodes with a single pass in
+  // canonicalOrder so hover/selection never override the user's z-order.
+  st.canonicalOrder = [...st.network.body.nodeIndices];
+  st.network.renderer._drawNodes = function (ctx, alwaysShow = false) {
+    const bodyNodes = this.body.nodes;
+    const margin    = 20;
+    const topLeft     = this.canvas.DOMtoCanvas({ x: -margin, y: -margin });
+    const bottomRight = this.canvas.DOMtoCanvas({ x: this.canvas.frame.canvas.clientWidth + margin, y: this.canvas.frame.canvas.clientHeight + margin });
+    const viewableArea = { top: topLeft.y, left: topLeft.x, bottom: bottomRight.y, right: bottomRight.x };
+    const drawExternalLabelCallbacks = [];
+
+    for (const id of st.canonicalOrder) {
+      const node = bodyNodes[id];
+      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);
+        }
+      } else {
+        node.updateBoundingBox(ctx, node.selected);
+      }
+    }
+    return { drawExternalLabels() { for (const draw of drawExternalLabelCallbacks) draw(); } };
+  };
+
+  // Keep canonicalOrder in sync with DataSet add/remove events
+  st.nodes.on('add', (_, { items }) => {
+    const existing = new Set(st.canonicalOrder);
+    items.forEach((id) => { if (!existing.has(id)) st.canonicalOrder.push(id); });
+  });
+  st.nodes.on('remove', (_, { items }) => {
+    const removed = new Set(items);
+    st.canonicalOrder = st.canonicalOrder.filter((id) => !removed.has(id));
+  });
+
+  st.network.on('doubleClick',  onDoubleClick);
+  st.network.on('selectNode',   onSelectNode);
+  st.network.on('deselectNode', onDeselectAll);
+  st.network.on('selectEdge',   onSelectEdge);
+  st.network.on('deselectEdge', onDeselectAll);
+  st.network.on('zoom',         updateZoomDisplay);
+  st.network.on('dragEnd',      onDragEnd);
+  st.network.on('beforeDrawing', drawGrid);
+  st.network.on('afterDrawing',  updateSelectionOverlay);
+  st.network.on('afterDrawing',  () => drawDebugOverlay());
+
+  document.getElementById('emptyState').classList.add('hidden');
+  updateZoomDisplay();
+}
+
+// ── Network event handlers ────────────────────────────────────────────────────
+
+function onDoubleClick(params) {
+  if (params.nodes.length > 0) {
+    st.selectedNodeIds = params.nodes;
+    st.network.selectNodes(st.selectedNodeIds);
+    showNodePanel();
+    startLabelEdit();
+  } else if (params.edges.length > 0 && params.nodes.length === 0) {
+    st.selectedEdgeIds = [params.edges[0]];
+    showEdgePanel();
+    startEdgeLabelEdit();
+  } else if (st.currentTool === 'addNode') {
+    const id = 'n' + Date.now();
+    st.nodes.add({
+      id, label: 'Node',
+      shapeType: st.pendingShape, colorKey: 'c-gray',
+      nodeWidth: null, nodeHeight: null, fontSize: null,
+      x: params.pointer.canvas.x, y: params.pointer.canvas.y,
+      ...visNodeProps(st.pendingShape, 'c-gray', null, null, null, null, null),
+    });
+    markDirty();
+    setTimeout(() => {
+      st.network.selectNodes([id]);
+      st.selectedNodeIds = [id];
+      showNodePanel();
+      startLabelEdit();
+    }, 50);
+  }
+}
+
+function onSelectNode(params) {
+  st.selectedNodeIds = params.nodes;
+  st.selectedEdgeIds = [];
+  hideEdgePanel();
+  showNodePanel();
+}
+
+function onSelectEdge(params) {
+  if (st.selectedNodeIds.length > 0) return; // node takes priority
+  st.selectedEdgeIds = params.edges;
+  st.selectedNodeIds = [];
+  hideNodePanel();
+  showEdgePanel();
+}
+
+function onDeselectAll() {
+  st.selectedNodeIds = [];
+  st.selectedEdgeIds = [];
+  hideNodePanel();
+  hideEdgePanel();
+  commitLabelEdit();
+  hideLabelInput();
+  hideSelectionOverlay();
+}

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

@@ -0,0 +1,73 @@
+// ── Node panel ────────────────────────────────────────────────────────────────
+// Floating formatting toolbar for selected nodes (color, font, alignment, z-order).
+
+import { st, markDirty } from './state.js';
+import { visNodeProps, getActualNodeHeight } from './node-rendering.js';
+
+export function showNodePanel() {
+  document.getElementById('nodePanel').classList.remove('hidden');
+}
+
+export function hideNodePanel() {
+  document.getElementById('nodePanel').classList.add('hidden');
+}
+
+export function setNodeColor(colorKey) {
+  if (!st.selectedNodeIds.length) return;
+  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) });
+  });
+  markDirty();
+}
+
+export function changeNodeFontSize(delta) {
+  if (!st.selectedNodeIds.length) return;
+  st.selectedNodeIds.forEach((id) => {
+    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) });
+  });
+  markDirty();
+}
+
+export function setTextAlign(align) {
+  if (!st.selectedNodeIds.length) return;
+  st.selectedNodeIds.forEach((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) });
+  });
+  markDirty();
+}
+
+export function setTextValign(valign) {
+  if (!st.selectedNodeIds.length) return;
+  st.selectedNodeIds.forEach((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) });
+  });
+  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)
+  if (!st.selectedNodeIds.length) return;
+  st.selectedNodeIds.forEach((id) => {
+    const idx = st.canonicalOrder.indexOf(id);
+    if (idx === -1) return;
+    st.canonicalOrder.splice(idx, 1);
+    if (direction > 0) st.canonicalOrder.push(id);
+    else               st.canonicalOrder.unshift(id);
+  });
+  st.network.redraw();
+  st.network.selectNodes(st.selectedNodeIds);
+  markDirty();
+}

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

@@ -0,0 +1,113 @@
+// ── Node rendering ────────────────────────────────────────────────────────────
+// Actor canvas renderer + vis.js node property builder.
+
+import { NODE_COLORS } from './constants.js';
+import { st } from './state.js';
+
+// Reference dimensions of the actor figure at scale 1.
+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;
+    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.strokeStyle = visState.selected ? '#f97316' : c.border;
+        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 ────────────────────────────────────────────
+        if (label) {
+          ctx.save();
+          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));
+          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;
+}
+
+// Returns the rendered height of a node from vis.js internals, or null.
+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);
+
+  const colorP = {
+    color: {
+      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 },
+  };
+
+  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 };
+  }
+  return { shape: shapeType, ...colorP, ...sizeP };
+}

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

@@ -0,0 +1,138 @@
+// ── Persistence ───────────────────────────────────────────────────────────────
+// API calls (CRUD) for diagrams + sidebar list rendering.
+
+import { st, markDirty } from './state.js';
+import { initNetwork }   from './network.js';
+import { hideNodePanel } from './node-panel.js';
+import { hideEdgePanel } from './edge-panel.js';
+import { hideLabelInput }       from './label-editor.js';
+import { hideSelectionOverlay } from './selection-overlay.js';
+
+function escapeHtml(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export function renderDiagramList() {
+  const list = document.getElementById('diagramList');
+  list.innerHTML = '';
+  if (!st.diagrams.length) {
+    list.innerHTML = '<p class="text-xs text-gray-400 dark:text-gray-600 px-3 py-3">Aucun diagramme</p>';
+    return;
+  }
+  st.diagrams.forEach((d) => {
+    const isActive = d.id === st.currentDiagramId;
+    const item     = document.createElement('div');
+    item.className = [
+      'group flex items-center gap-1 px-2 py-1.5 mx-1 my-0.5 rounded-md cursor-pointer',
+      'hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
+      isActive ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : 'text-gray-700 dark:text-gray-300',
+    ].join(' ');
+
+    const titleSpan = document.createElement('span');
+    titleSpan.className   = 'flex-1 text-sm truncate';
+    titleSpan.textContent = d.title;
+
+    const deleteBtn = document.createElement('button');
+    deleteBtn.title     = 'Supprimer';
+    deleteBtn.className = 'hidden group-hover:flex items-center justify-center w-4 h-4 rounded text-gray-400 hover:text-red-500 shrink-0';
+    deleteBtn.textContent = '✕';
+    deleteBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      await deleteDiagram(d.id);
+    });
+
+    item.appendChild(titleSpan);
+    item.appendChild(deleteBtn);
+    item.addEventListener('click', (e) => { if (e.target.tagName === 'BUTTON') return; openDiagram(d.id); });
+    list.appendChild(item);
+  });
+}
+
+export async function loadDiagramList() {
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  renderDiagramList();
+  if (st.diagrams.length > 0) openDiagram(st.diagrams[0].id);
+}
+
+export async function openDiagram(id) {
+  const res     = await fetch(`/api/diagrams/${id}`);
+  const diagram = await res.json();
+  st.currentDiagramId = id;
+  st.isDirty          = false;
+  document.getElementById('btnSave').disabled      = true;
+  document.getElementById('diagramTitle').value    = diagram.title || '';
+  initNetwork(diagram.nodes || [], diagram.edges || []);
+  renderDiagramList();
+}
+
+export async function newDiagram() {
+  const id = 'd' + Date.now();
+  await fetch(`/api/diagrams/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title: 'Nouveau diagramme', nodes: [], edges: [] }),
+  });
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  renderDiagramList();
+  openDiagram(id);
+}
+
+export async function deleteDiagram(id) {
+  if (!confirm('Supprimer ce diagramme ?')) return;
+  await fetch(`/api/diagrams/${id}`, { method: 'DELETE' });
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+
+  if (st.currentDiagramId === id) {
+    st.currentDiagramId = null;
+    if (st.network) { st.network.destroy(); st.network = null; }
+    st.nodes = null;
+    st.edges = null;
+    document.getElementById('diagramTitle').value   = '';
+    document.getElementById('btnSave').disabled     = true;
+    hideNodePanel();
+    hideEdgePanel();
+    hideLabelInput();
+    hideSelectionOverlay();
+    if (st.diagrams.length > 0) openDiagram(st.diagrams[0].id);
+    else document.getElementById('emptyState').classList.remove('hidden');
+  }
+  renderDiagramList();
+}
+
+export async function saveDiagram() {
+  if (!st.currentDiagramId || !st.network) return;
+  const positions = st.network.getPositions();
+
+  // Serialise in canonicalOrder so z-order is restored on next load.
+  const nodeData = st.canonicalOrder
+    .map((id) => st.nodes.get(id))
+    .filter(Boolean)
+    .map((n) => ({
+      id: n.id, label: n.label,
+      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,
+      x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y,
+    }));
+
+  const edgeData = st.edges.get().map((e) => ({
+    id: e.id, from: e.from, to: e.to,
+    label: e.label || '', arrowDir: e.arrowDir || 'to',
+    dashes: e.dashes || false, fontSize: e.fontSize || null,
+  }));
+
+  const title = document.getElementById('diagramTitle').value || 'Sans titre';
+  await fetch(`/api/diagrams/${st.currentDiagramId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title, nodes: nodeData, edges: edgeData }),
+  });
+  st.isDirty = false;
+  document.getElementById('btnSave').disabled = true;
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  renderDiagramList();
+}

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

@@ -0,0 +1,149 @@
+// ── Selection / resize overlay ────────────────────────────────────────────────
+// Dashed selection box + corner resize handles for selected nodes.
+
+import { st, markDirty } from './state.js';
+import { visNodeProps } from './node-rendering.js';
+
+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);
+      }
+    } catch (_) { /* node still being created */ }
+  }
+  if (minX === Infinity) { hideSelectionOverlay(); return; }
+
+  const PAD = 10;
+  const tl  = st.network.canvasToDOM({ x: minX, y: minY });
+  const br  = st.network.canvasToDOM({ x: maxX, y: maxY });
+  const ov  = document.getElementById('selectionOverlay');
+  ov.style.display = 'block';
+  ov.style.left    = tl.x - PAD + 'px';
+  ov.style.top     = tl.y - PAD + 'px';
+  ov.style.width   = br.x - tl.x + PAD * 2 + 'px';
+  ov.style.height  = br.y - tl.y + PAD * 2 + 'px';
+
+}
+
+export function hideSelectionOverlay() {
+  document.getElementById('selectionOverlay').style.display = 'none';
+}
+
+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);
+    }
+    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);
+
+  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);
+  document.addEventListener('mouseup',   onResizeEnd);
+}
+
+function onResizeDrag(e) {
+  if (!st.resizeDrag || !st.network) return;
+  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 c     = st.resizeDrag.corner;
+
+  const updatedIds = [];
+
+  if (st.resizeDrag.startBBs.length === 1) {
+    const { id, node, initW, initH } = st.resizeDrag.startBBs[0];
+    let nW = initW, nH = initH;
+    if (c === 'br') { nW = initW + cdx; nH = initH + cdy; }
+    if (c === 'bl') { nW = initW - cdx; nH = initH + cdy; }
+    if (c === 'tr') { nW = initW + cdx; nH = initH - cdy; }
+    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) });
+    updatedIds.push(id);
+  } else {
+    const { initBoxW, initBoxH } = st.resizeDrag;
+    let sx = 1, sy = 1;
+    if (c === 'br') { sx = (initBoxW + cdx) / initBoxW; sy = (initBoxH + cdy) / initBoxH; }
+    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);
+    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) });
+      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;
+  });
+  st.network.redraw();
+
+  updateSelectionOverlay();
+}
+
+function onResizeEnd() {
+  if (!st.resizeDrag) return;
+  st.selectedNodeIds.forEach((id) => st.nodes.update({ id, fixed: false }));
+  document.getElementById('vis-canvas').style.pointerEvents = '';
+  document.removeEventListener('mousemove', onResizeDrag);
+  document.removeEventListener('mouseup',   onResizeEnd);
+  st.resizeDrag = null;
+  markDirty();
+}
+
+// ── Wire corner handle mouse events ───────────────────────────────────────────
+['tl', 'tr', 'bl', 'br'].forEach((corner) => {
+  document.getElementById('rh-' + corner).addEventListener('mousedown', (e) => onResizeStart(e, corner));
+});

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

@@ -0,0 +1,29 @@
+// ── Shared mutable state ──────────────────────────────────────────────────────
+// Single object imported by reference so all modules see the same mutations.
+
+export const st = {
+  network: null,
+  nodes: null,
+  edges: null,
+  diagrams: [],
+  currentDiagramId: null,
+  currentTool: 'select',
+  pendingShape: 'box',
+  selectedNodeIds: [],
+  selectedEdgeIds: [],
+  physicsEnabled: false,
+  gridEnabled: false,
+  debugMode: false,
+  isDirty: false,
+  sidebarOpen: true,
+  editingNodeId: null,
+  editingEdgeId: null,
+  resizeDrag: null,
+  clipboard: null,        // { nodes: [], edges: [] }
+  canonicalOrder: [],     // user-defined z-order, immune to vis.js hover reordering
+};
+
+export function markDirty() {
+  st.isDirty = true;
+  document.getElementById('btnSave').disabled = false;
+}