doc-survival-kit 1.0.0 → 2.0.0

package/diagram.js

@@ -5,7 +5,11 @@
 // ── État global ──
 var currentTool = "select";
 var diagramsList = [];
-var currentDiagramIdx = 0;
+var currentDiagramId = null;
+var diagNavStack = [];
+var diagExpandedIds = {};
+var pendingParentId = null;
+var pendingNavDiagId = null;
 var viewTransform = { x: 60, y: 60, scale: 1 };
 var selectedId = null;
 var selectedType = null;   // "shape" | "arrow"
@@ -18,6 +22,7 @@ var dragState = null;
 var panStart = null;
 var arrowSrcId = null;
 var editingShapeId = null;
+var editingTableCell = null;  // { row, col } | null
 var pickMode = null;          // "fontSize" | "fullStyle" | null
 var pickTargetIds = [];       // selectedIds sauvegardés pendant le pick
 var lastClickTime = 0;
@@ -25,7 +30,27 @@ var lastClickShapeId = null;
 var lastClickArrowId = null;
 var editingArrowId = null;
 var boardLocked = false;
-var diagDragSrcIdx = null;
+var diagDragSrcId = null;
+var historyStack = [];
+var MAX_HISTORY = 50;
+
+// ── Helpers tableau ──
+function getColWidths(shape) {
+  var cols = shape.cols || 3;
+  if (shape.colWidths && shape.colWidths.length === cols) return shape.colWidths;
+  var w = shape.w / cols;
+  var result = [];
+  for (var i = 0; i < cols; i++) result.push(w);
+  return result;
+}
+
+// xOffsets[i] = x du début de la colonne i (relatif à shape.x)
+function getColOffsets(shape) {
+  var cw = getColWidths(shape);
+  var offsets = [0];
+  for (var i = 0; i < cw.length - 1; i++) offsets.push(offsets[i] + cw[i]);
+  return offsets;
+}
 
 // ── Palette ──
 var COLORS = {
@@ -35,6 +60,7 @@ var COLORS = {
   "t-sky":    { fill: "rgba(224,242,254,0.75)", stroke: "#0284c7", text: "#0369a1" },
   "t-rose":   { fill: "rgba(255,228,230,0.75)", stroke: "#e11d48", text: "#be123c" },
   "t-teal":   { fill: "rgba(204,251,241,0.75)", stroke: "#0d9488", text: "#0f766e" },
+  "t-white":  { fill: "rgba(255,255,255,0.95)", stroke: "#d4d4d4", text: "#404040" },
 };
 var DEFAULT_COLOR = "t-sky";
 
@@ -43,8 +69,11 @@ var DEFAULT_SIZES = {
   rounded: { w: 130, h: 50 },
   db:      { w: 100, h: 65 },
   cloud:   { w: 110, h: 65 },
+  nuage:   { w: 121, h: 96 },
   text:    { w: 110, h: 34 },
   postit:  { w: 130, h: 110 },
+  actor:   { w: 60,  h: 90 },
+  table:   { w: 210, h: 120 },
 };
 
 // ── Helpers ──
@@ -78,6 +107,22 @@ function wrapPostitLines(text, maxWidth, fontSize) {
     var words = line.split(" ");
     var current = "";
     words.forEach(function (word) {
+      // Si le mot seul dépasse maxWidth, le couper caractère par caractère
+      if (measureText(word, fs, "600") > maxWidth) {
+        if (current !== "") { result.push(current); current = ""; }
+        var chunk = "";
+        for (var ci = 0; ci < word.length; ci++) {
+          var chunkTest = chunk + word[ci];
+          if (measureText(chunkTest, fs, "600") > maxWidth) {
+            if (chunk !== "") result.push(chunk);
+            chunk = word[ci];
+          } else {
+            chunk = chunkTest;
+          }
+        }
+        current = chunk;
+        return;
+      }
       var test = current ? current + " " + word : word;
       if (current && measureText(test, fs, "600") > maxWidth) {
         result.push(current);
@@ -91,17 +136,103 @@ function wrapPostitLines(text, maxWidth, fontSize) {
   return result;
 }
 
+function findDiagramById(id, list) {
+  if (!list) return null;
+  for (var i = 0; i < list.length; i++) {
+    if (String(list[i].id) === String(id)) return list[i];
+    var found = findDiagramById(id, list[i].children);
+    if (found) return found;
+  }
+  return null;
+}
+
+function findParentListOf(id, list) {
+  if (!list) return null;
+  for (var i = 0; i < list.length; i++) {
+    if (String(list[i].id) === String(id)) return { list: list, index: i };
+    var found = findParentListOf(id, list[i].children);
+    if (found) return found;
+  }
+  return null;
+}
+
+function flattenDiagrams(list, result) {
+  result = result || [];
+  (list || []).forEach(function (d) {
+    result.push(d);
+    flattenDiagrams(d.children, result);
+  });
+  return result;
+}
+
+function calcMaxExpandedDepth(list, depth) {
+  var max = depth;
+  (list || []).forEach(function (d) {
+    if (d.children && d.children.length > 0 && diagExpandedIds[String(d.id)]) {
+      var childMax = calcMaxExpandedDepth(d.children, depth + 1);
+      max = Math.max(max, childMax);
+    }
+  });
+  return max;
+}
+
+function updateSidebarWidth() {
+  var depth = calcMaxExpandedDepth(diagramsList, 0);
+  var totalW = 220 + depth * 14;
+  var panel = document.getElementById("diagramListPanel");
+  if (!panel) return;
+  panel.style.width = totalW + "px";
+}
+
+function getAncestorPath(targetId, list, path) {
+  path = path || [];
+  for (var i = 0; i < (list || []).length; i++) {
+    var d = list[i];
+    if (String(d.id) === String(targetId)) return path;
+    var childPath = getAncestorPath(targetId, d.children, path.concat([String(d.id)]));
+    if (childPath !== null) return childPath;
+  }
+  return null;
+}
+
+function updateBackBtn() {
+  var btn = document.getElementById("btnDiagBack");
+  if (!btn) return;
+  btn.style.display = diagNavStack.length > 0 ? "inline-flex" : "none";
+}
+
 function getCurrentDiagram() {
-  return diagramsList[currentDiagramIdx] || null;
+  if (currentDiagramId !== null) {
+    var found = findDiagramById(currentDiagramId, diagramsList);
+    if (found) return found;
+  }
+  return diagramsList[0] || null;
 }
 
 // ── Persistance localStorage ──
 function loadDiagrammes() {
   try {
     var stored = JSON.parse(localStorage.getItem("mes_diagrammes"));
-    if (stored && stored.length) return stored;
+    if (stored && stored.length) {
+      var migrate = function (list) {
+        list.forEach(function (d) {
+          if (!d.children) d.children = [];
+          migrate(d.children);
+        });
+      };
+      migrate(stored);
+      return stored;
+    }
   } catch (e) {}
-  return JSON.parse(JSON.stringify(diagrammesDefaut));
+  var defaults = JSON.parse(JSON.stringify(diagrammesDefaut));
+  var migrate2 = function (list) {
+    list.forEach(function (d) {
+      if (!d.children) d.children = [];
+      migrate2(d.children);
+    });
+  };
+  migrate2(defaults);
+  return defaults;
 }
 
 function saveDiagrammes() {
@@ -109,6 +240,22 @@ function saveDiagrammes() {
   checkDiffDiagrammes();
 }
 
+function pushHistory() {
+  historyStack.push(JSON.stringify(diagramsList));
+  if (historyStack.length > MAX_HISTORY) historyStack.shift();
+}
+
+function undoAction() {
+  if (historyStack.length === 0) return;
+  diagramsList = JSON.parse(historyStack.pop());
+  if (!findDiagramById(currentDiagramId, diagramsList)) {
+    currentDiagramId = diagramsList[0] ? String(diagramsList[0].id) : null;
+  }
+  saveDiagrammes();
+  renderAll();
+  renderDiagramList();
+}
+
 function checkDiffDiagrammes() {
   var stored = localStorage.getItem("mes_diagrammes");
   var diff = stored !== JSON.stringify(diagrammesDefaut);
@@ -123,14 +270,14 @@ function getLockMap() {
   try { return JSON.parse(localStorage.getItem("diagrammes_lock") || "{}"); } catch(e) { return {}; }
 }
 function saveCurrentLock() {
-  var diag = diagramsList[currentDiagramIdx];
+  var diag = getCurrentDiagram();
   if (!diag) return;
   var map = getLockMap();
   map[diag.id] = boardLocked;
   localStorage.setItem("diagrammes_lock", JSON.stringify(map));
 }
-function restoreLockForDiagram(idx) {
-  var diag = diagramsList[idx];
+function restoreLockForDiagram(diagId) {
+  var diag = findDiagramById(diagId, diagramsList);
   if (!diag) return;
   var map = getLockMap();
   boardLocked = map[diag.id] === true;
@@ -159,14 +306,14 @@ function getZoomMap() {
   try { return JSON.parse(localStorage.getItem("diagrammes_zoom") || "{}"); } catch(e) { return {}; }
 }
 function saveCurrentZoom() {
-  var diag = diagramsList[currentDiagramIdx];
+  var diag = getCurrentDiagram();
   if (!diag) return;
   var map = getZoomMap();
   map[diag.id] = viewTransform.scale;
   localStorage.setItem("diagrammes_zoom", JSON.stringify(map));
 }
-function restoreZoomForDiagram(idx) {
-  var diag = diagramsList[idx];
+function restoreZoomForDiagram(diagId) {
+  var diag = findDiagramById(diagId, diagramsList);
   if (!diag) return;
   var map = getZoomMap();
   viewTransform.scale = map[diag.id] !== undefined ? map[diag.id] : 1;
@@ -372,6 +519,7 @@ function updateViewport() {
   );
   document.getElementById("zoomLevel").textContent =
     Math.round(viewTransform.scale * 100) + "%";
+  updateTableOverlay();
 }
 
 // ── Zoom ──
@@ -439,7 +587,7 @@ function renderShape(shape) {
     g.appendChild(topEl);
 
   } else if (shape.type === "cloud") {
-    // Ellipse à bordure pointillée = service externe / cloud
+    // Ellipse en trait continu = service externe / cloud
     var el = createSVGEl("ellipse");
     el.setAttribute("cx", shape.x + shape.w / 2);
     el.setAttribute("cy", shape.y + shape.h / 2);
@@ -450,6 +598,211 @@ function renderShape(shape) {
     el.setAttribute("stroke-width", sw);
     g.appendChild(el);
 
+  } else if (shape.type === "nuage") {
+    // Nuage — contour extérieur du Bootstrap cloud icon (viewBox 0 0 16 16)
+    // Le path se referme exactement : endpoint = startpoint, Z explicite
+    var nuageG = createSVGEl("g");
+    nuageG.setAttribute("transform",
+      "translate(" + shape.x + "," + shape.y + ") scale(" + (shape.w / 16) + "," + (shape.h / 16) + ")"
+    );
+    var nuagePathEl = createSVGEl("path");
+    nuagePathEl.setAttribute("d",
+      "M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579" +
+      "C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13" +
+      "H3.781C1.708 13 0 11.366 0 9.318" +
+      "c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383Z"
+    );
+    nuagePathEl.setAttribute("fill", c.fill);
+    nuagePathEl.setAttribute("stroke", stroke);
+    nuagePathEl.setAttribute("stroke-width", sw);
+    nuagePathEl.setAttribute("vector-effect", "non-scaling-stroke");
+    nuageG.appendChild(nuagePathEl);
+    g.appendChild(nuageG);
+
+  } else if (shape.type === "actor") {
+    // Bonhomme UML (stick figure) — pas de fond, juste les traits
+    var acx = shape.x + shape.w / 2;
+    var aHeadR = Math.min(shape.w * 0.20, shape.h * 0.14);
+    var aHeadCY = shape.y + aHeadR + shape.h * 0.02;
+    // Tête
+    var aHead = createSVGEl("circle");
+    aHead.setAttribute("cx", acx);
+    aHead.setAttribute("cy", aHeadCY);
+    aHead.setAttribute("r", aHeadR);
+    aHead.setAttribute("fill", c.fill);
+    aHead.setAttribute("stroke", stroke);
+    aHead.setAttribute("stroke-width", sw);
+    g.appendChild(aHead);
+    // Corps
+    var aBodyTop = aHeadCY + aHeadR;
+    var aBodyBot = shape.y + shape.h * 0.60;
+    var aBody = createSVGEl("line");
+    aBody.setAttribute("x1", acx); aBody.setAttribute("y1", aBodyTop);
+    aBody.setAttribute("x2", acx); aBody.setAttribute("y2", aBodyBot);
+    aBody.setAttribute("stroke", stroke); aBody.setAttribute("stroke-width", sw);
+    aBody.setAttribute("stroke-linecap", "round");
+    g.appendChild(aBody);
+    // Bras
+    var aArmY = shape.y + shape.h * 0.38;
+    var aArmLX = shape.x + shape.w * 0.10;
+    var aArmRX = shape.x + shape.w * 0.90;
+    var aArms = createSVGEl("line");
+    aArms.setAttribute("x1", aArmLX); aArms.setAttribute("y1", aArmY);
+    aArms.setAttribute("x2", aArmRX); aArms.setAttribute("y2", aArmY);
+    aArms.setAttribute("stroke", stroke); aArms.setAttribute("stroke-width", sw);
+    aArms.setAttribute("stroke-linecap", "round");
+    g.appendChild(aArms);
+    // Jambe gauche
+    var aLegLX = shape.x + shape.w * 0.18;
+    var aLegRX = shape.x + shape.w * 0.82;
+    var aLegBotY = shape.y + shape.h * 0.82;
+    var aLegL = createSVGEl("line");
+    aLegL.setAttribute("x1", acx); aLegL.setAttribute("y1", aBodyBot);
+    aLegL.setAttribute("x2", aLegLX); aLegL.setAttribute("y2", aLegBotY);
+    aLegL.setAttribute("stroke", stroke); aLegL.setAttribute("stroke-width", sw);
+    aLegL.setAttribute("stroke-linecap", "round");
+    g.appendChild(aLegL);
+    // Jambe droite
+    var aLegR = createSVGEl("line");
+    aLegR.setAttribute("x1", acx); aLegR.setAttribute("y1", aBodyBot);
+    aLegR.setAttribute("x2", aLegRX); aLegR.setAttribute("y2", aLegBotY);
+    aLegR.setAttribute("stroke", stroke); aLegR.setAttribute("stroke-width", sw);
+    aLegR.setAttribute("stroke-linecap", "round");
+    g.appendChild(aLegR);
+
+  } else if (shape.type === "table") {
+    var tRows = shape.rows || 3;
+    var tCols = shape.cols || 3;
+    var tCells = shape.cells || [];
+    var tColWidths = getColWidths(shape);
+    var tColOffsets = getColOffsets(shape);
+    var cellH = shape.h / tRows;
+    var tfs = shape.fontSize || 12;
+    // Fond
+    var tBg = createSVGEl("rect");
+    tBg.setAttribute("x", shape.x);      tBg.setAttribute("y", shape.y);
+    tBg.setAttribute("width", shape.w);  tBg.setAttribute("height", shape.h);
+    tBg.setAttribute("rx", 3);
+    tBg.setAttribute("fill", c.fill);    tBg.setAttribute("stroke", stroke);
+    tBg.setAttribute("stroke-width", sw);
+    g.appendChild(tBg);
+    // Lignes horizontales internes
+    for (var tri = 1; tri < tRows; tri++) {
+      var thl = createSVGEl("line");
+      thl.setAttribute("x1", shape.x);            thl.setAttribute("y1", shape.y + tri * cellH);
+      thl.setAttribute("x2", shape.x + shape.w);  thl.setAttribute("y2", shape.y + tri * cellH);
+      thl.setAttribute("stroke", stroke);          thl.setAttribute("stroke-width", sw * 0.5);
+      g.appendChild(thl);
+    }
+    // Lignes verticales internes
+    for (var tci = 1; tci < tCols; tci++) {
+      var tvl = createSVGEl("line");
+      var tvlX = shape.x + tColOffsets[tci];
+      tvl.setAttribute("x1", tvlX);  tvl.setAttribute("y1", shape.y);
+      tvl.setAttribute("x2", tvlX);  tvl.setAttribute("y2", shape.y + shape.h);
+      tvl.setAttribute("stroke", stroke);  tvl.setAttribute("stroke-width", sw * 0.5);
+      g.appendChild(tvl);
+    }
+    // Textes des cellules avec word wrap
+    var clineH = Math.round(tfs * 1.33);
+    for (var tri2 = 0; tri2 < tRows; tri2++) {
+      for (var tci2 = 0; tci2 < tCols; tci2++) {
+        var cellVal = (tCells[tri2] && tCells[tri2][tci2]) || "";
+        if (!cellVal) continue;
+        var cellW2 = tColWidths[tci2];
+        var cpad = 6;
+        var clines = wrapPostitLines(cellVal, cellW2 - cpad * 2, tfs);
+        var cCenterY = shape.y + tri2 * cellH + cellH / 2;
+        var cfirstY = cCenterY - clines.length * clineH / 2 + clineH * 0.5 + tfs * 0.5;
+        var cellCenterX = shape.x + tColOffsets[tci2] + cellW2 / 2;
+        var ctxt = createSVGEl("text");
+        ctxt.setAttribute("x", cellCenterX);
+        ctxt.setAttribute("y", cfirstY);
+        ctxt.setAttribute("text-anchor", "middle");
+        ctxt.setAttribute("fill", c.text);
+        ctxt.setAttribute("font-size", tfs);
+        ctxt.setAttribute("data-cell", tri2 + "-" + tci2);
+        ctxt.setAttribute("font-family", '"Segoe UI",system-ui,sans-serif');
+        ctxt.setAttribute("font-weight", "600");
+        ctxt.setAttribute("pointer-events", "none");
+        (function(cx, lines) {
+          lines.forEach(function(line, i) {
+            var ts = createSVGEl("tspan");
+            ts.setAttribute("x", cx);
+            if (i > 0) ts.setAttribute("dy", clineH + "px");
+            ts.textContent = line || " ";
+            ctxt.appendChild(ts);
+          });
+        })(cellCenterX, clines);
+        g.appendChild(ctxt);
+      }
+    }
+    // Poignées de redimensionnement des colonnes (chevrons au-dessus de chaque séparateur)
+    if (isSel && selectedIds.length === 1) {
+      for (var tsi = 1; tsi < tCols; tsi++) {
+        var hx = shape.x + tColOffsets[tsi];
+        var hy = shape.y - 13;
+        var hg = createSVGEl("g");
+        hg.setAttribute("data-col-sep", tsi - 1);
+        hg.setAttribute("data-shape-id", shape.id);
+        hg.style.cursor = "col-resize";
+        // Zone de clic transparente
+        var hArea = createSVGEl("rect");
+        hArea.setAttribute("x", hx - 9);  hArea.setAttribute("y", hy - 7);
+        hArea.setAttribute("width", 18);   hArea.setAttribute("height", 22);
+        hArea.setAttribute("fill", "transparent");
+        hArea.setAttribute("data-col-sep", tsi - 1);
+        hArea.setAttribute("data-shape-id", shape.id);
+        hg.appendChild(hArea);
+        // Chevron ∨
+        var chev = createSVGEl("path");
+        chev.setAttribute("d", "M" + (hx - 5) + "," + (hy - 1) + " L" + hx + "," + (hy + 5) + " L" + (hx + 5) + "," + (hy - 1));
+        chev.setAttribute("fill", "none");
+        chev.setAttribute("stroke", "#f97316");
+        chev.setAttribute("stroke-width", "1.8");
+        chev.setAttribute("stroke-linecap", "round");
+        chev.setAttribute("stroke-linejoin", "round");
+        chev.setAttribute("pointer-events", "none");
+        hg.appendChild(chev);
+        // Trait pointillé vers la table
+        var hvl = createSVGEl("line");
+        hvl.setAttribute("x1", hx);  hvl.setAttribute("y1", hy + 5);
+        hvl.setAttribute("x2", hx);  hvl.setAttribute("y2", shape.y);
+        hvl.setAttribute("stroke", "#f97316");
+        hvl.setAttribute("stroke-width", "1");
+        hvl.setAttribute("stroke-dasharray", "3,2");
+        hvl.setAttribute("pointer-events", "none");
+        hg.appendChild(hvl);
+        g.appendChild(hg);
+      }
+    }
+    // Poignée de redimensionnement
+    if (isSel && selectedIds.length === 1) {
+      var tGrip = createSVGEl("rect");
+      tGrip.setAttribute("x", shape.x + shape.w - 5);  tGrip.setAttribute("y", shape.y + shape.h - 5);
+      tGrip.setAttribute("width", 10);  tGrip.setAttribute("height", 10);
+      tGrip.setAttribute("rx", 2);
+      tGrip.setAttribute("fill", "#f97316");
+      tGrip.setAttribute("stroke", "#fff");  tGrip.setAttribute("stroke-width", 1.5);
+      tGrip.classList.add("resize-grip");
+      tGrip.setAttribute("data-shape-id", shape.id);
+      g.appendChild(tGrip);
+    }
+    // Points de connexion
+    var thcx = shape.x + shape.w / 2, thcy = shape.y + shape.h / 2;
+    [[thcx, shape.y], [thcx, shape.y + shape.h], [shape.x, thcy], [shape.x + shape.w, thcy]]
+      .forEach(function (pt) {
+        var tdot = createSVGEl("circle");
+        tdot.setAttribute("cx", pt[0]);  tdot.setAttribute("cy", pt[1]);
+        tdot.setAttribute("r", 5);
+        tdot.setAttribute("fill", "#f97316");
+        tdot.setAttribute("stroke", "#fff");  tdot.setAttribute("stroke-width", 1.5);
+        tdot.classList.add("conn-dot");
+        tdot.setAttribute("data-shape-id", shape.id);
+        g.appendChild(tdot);
+      });
+    return g;
+
   } else if (shape.type === "postit") {
     var fold = 18;
     var body = createSVGEl("path");
@@ -505,7 +858,9 @@ function renderShape(shape) {
   // ── Texte ──
   var textCy = shape.type === "db"
     ? shape.y + shape.h * 0.62
-    : shape.y + shape.h / 2;
+    : shape.type === "actor"
+      ? shape.y + shape.h - 2
+      : shape.y + shape.h / 2;
   var ta = shape.textAlign || "center";
   var textAnchor = ta === "left" ? "start" : ta === "right" ? "end" : "middle";
   var txt = createSVGEl("text");
@@ -539,12 +894,30 @@ function renderShape(shape) {
       ts.textContent = line || " ";
       txt.appendChild(ts);
     });
-  } else if (shape.type === "rect" || shape.type === "rounded" || shape.type === "db" || shape.type === "cloud") {
-    var wpad = shape.type === "cloud" ? Math.round(shape.w * 0.2) : 12;
-    var wvpad = shape.type === "cloud" ? Math.round(shape.h * 0.12) : 8;
+  } else if (shape.type === "actor") {
+    var alines = wrapPostitLines(shape.text || "", shape.w * 1.2, fs);
+    var alineH = Math.round(fs * 1.33);
+    txt.setAttribute("text-anchor", "middle");
+    txt.removeAttribute("dominant-baseline");
+    alines.forEach(function (line, i) {
+      var ts = createSVGEl("tspan");
+      ts.setAttribute("x", shape.x + shape.w / 2);
+      if (i > 0) ts.setAttribute("dy", alineH + "px");
+      ts.textContent = line || " ";
+      txt.appendChild(ts);
+    });
+  } else if (shape.type === "rect" || shape.type === "rounded" || shape.type === "db" || shape.type === "cloud" || shape.type === "nuage") {
+    var wpad = shape.type === "cloud" ? Math.round(shape.w * 0.2) : shape.type === "nuage" ? Math.round(shape.w * 0.12) : 12;
+    // Pour nuage : vpad = offset depuis le haut visible (y=2/16) + marge interne
+    var wvpad = shape.type === "cloud" ? Math.round(shape.h * 0.12)
+      : shape.type === "nuage" ? Math.round(shape.h * 2 / 16) + 6
+      : 8;
     var wlines = wrapPostitLines(shape.text || "", shape.w - wpad * 2, fs);
     var wlineH = Math.round(fs * 1.33);
-    var wcenterY = shape.type === "db" ? shape.y + shape.h * 0.62 : shape.y + shape.h / 2;
+    // Pour nuage : centre de la forme visible = milieu entre y=2/16 et y=13/16
+    var wcenterY = shape.type === "db" ? shape.y + shape.h * 0.62
+      : shape.type === "nuage" ? shape.y + shape.h * ((2 + 13) / 2 / 16)
+      : shape.y + shape.h / 2;
     var dbCapH = shape.type === "db" ? Math.min(12, shape.h * 0.2) * 2 : 0;
     var wfirstY = tv === "top"
       ? shape.y + dbCapH + wvpad + wlineH * 0.5
@@ -584,6 +957,36 @@ function renderShape(shape) {
   // ── Texte non rendu pour les images ──
   if (shape.type === "image") return g;
 
+  // ── Indicateur de lien (diagramme enfant ou lien externe) ──
+  if ((shape.linkedDiagramId || shape.externalUrl) && shape.type !== "image") {
+    var lnkColor = shape.externalUrl ? "#0284c7" : "#f97316";
+    var lnkCirc = createSVGEl("circle");
+    lnkCirc.setAttribute("cx", shape.x + shape.w - 5);
+    lnkCirc.setAttribute("cy", shape.y + 5);
+    lnkCirc.setAttribute("r", 6);
+    lnkCirc.setAttribute("fill", lnkColor);
+    lnkCirc.setAttribute("stroke", "#fff");
+    lnkCirc.setAttribute("stroke-width", 1.5);
+    lnkCirc.setAttribute("pointer-events", "none");
+    g.appendChild(lnkCirc);
+    var lnkTxt = createSVGEl("text");
+    lnkTxt.setAttribute("x", shape.x + shape.w - 5);
+    lnkTxt.setAttribute("y", shape.y + 8.5);
+    lnkTxt.setAttribute("text-anchor", "middle");
+    lnkTxt.setAttribute("font-size", "8");
+    lnkTxt.setAttribute("font-weight", "bold");
+    lnkTxt.setAttribute("fill", "#fff");
+    lnkTxt.setAttribute("pointer-events", "none");
+    lnkTxt.textContent = "\u2197";
+    g.appendChild(lnkTxt);
+  }
+
+  // ── Rotation ──
+  if (shape.rotation) {
+    var rcx = shape.x + shape.w / 2, rcy = shape.y + shape.h / 2;
+    g.setAttribute("transform", "rotate(" + shape.rotation + "," + rcx + "," + rcy + ")");
+  }
+
   // ── Points de connexion (visibles au hover et en mode flèche — sauf postit) ──
   if (shape.type !== "postit") {
     var hcx = shape.x + shape.w / 2, hcy = shape.y + shape.h / 2;
@@ -611,16 +1014,35 @@ function renderShape(shape) {
 function getEdgePoint(shape, targetX, targetY) {
   var cx = shape.x + shape.w / 2;
   var cy = shape.y + shape.h / 2;
-  var dx = targetX - cx, dy = targetY - cy;
-  if (dx === 0 && dy === 0) return { x: cx, y: shape.y };
-  var hw = shape.w / 2, hh = shape.h / 2;
-  if (Math.abs(dx) * hh > Math.abs(dy) * hw) {
-    var sx = dx > 0 ? 1 : -1;
-    return { x: cx + sx * hw, y: cy + dy * hw / Math.abs(dx) };
+  var lTargetX = targetX, lTargetY = targetY;
+  if (shape.rotation) {
+    var rad = -shape.rotation * Math.PI / 180;
+    var cos = Math.cos(rad), sin = Math.sin(rad);
+    var ddx = targetX - cx, ddy = targetY - cy;
+    lTargetX = cx + ddx * cos - ddy * sin;
+    lTargetY = cy + ddx * sin + ddy * cos;
+  }
+  var dx = lTargetX - cx, dy = lTargetY - cy;
+  var p;
+  if (dx === 0 && dy === 0) {
+    p = { x: cx, y: shape.y };
   } else {
-    var sy = dy > 0 ? 1 : -1;
-    return { x: cx + dx * hh / Math.abs(dy), y: cy + sy * hh };
+    var hw = shape.w / 2, hh = shape.h / 2;
+    if (Math.abs(dx) * hh > Math.abs(dy) * hw) {
+      var sx = dx > 0 ? 1 : -1;
+      p = { x: cx + sx * hw, y: cy + dy * hw / Math.abs(dx) };
+    } else {
+      var sy = dy > 0 ? 1 : -1;
+      p = { x: cx + dx * hh / Math.abs(dy), y: cy + sy * hh };
+    }
   }
+  if (shape.rotation) {
+    var rad2 = shape.rotation * Math.PI / 180;
+    var cos2 = Math.cos(rad2), sin2 = Math.sin(rad2);
+    var ex = p.x - cx, ey = p.y - cy;
+    p = { x: cx + ex * cos2 - ey * sin2, y: cy + ex * sin2 + ey * cos2 };
+  }
+  return p;
 }
 
 function renderArrow(arrow, shapes) {
@@ -705,106 +1127,97 @@ function renderAll() {
 
   updateViewport();
   renderDiagramList();
-}
-
-function renderDiagramList() {
-  var el = document.getElementById("diagramList");
-  el.innerHTML = diagramsList.map(function (d, i) {
-    var active = i === currentDiagramIdx ? " active" : "";
+  syncColorPanel();
+  updateTableOverlay();
+}
+
+function renderDiagramListLevel(list, depth) {
+  return (list || []).map(function (d) {
+    var isActive = String(d.id) === String(currentDiagramId);
+    var isExpanded = !!diagExpandedIds[String(d.id)];
+    var hasChildren = d.children && d.children.length > 0;
+    var indent = 10 + depth * 14;
+    var childrenHtml = (isExpanded && hasChildren)
+      ? '<div class="diagram-list-children">' + renderDiagramListLevel(d.children, depth + 1) + '</div>'
+      : '';
     return (
-      '<div class="diagram-list-item' + active + '" draggable="true"' +
-      ' ondragstart="onDiagDragStart(event,' + i + ')"' +
-      ' ondragover="onDiagDragOver(event,' + i + ')"' +
-      ' ondragleave="onDiagDragLeave(event)"' +
-      ' ondrop="onDiagDrop(event,' + i + ')"' +
-      ' ondragend="onDiagDragEnd()"' +
-      ' onclick="selectDiagramme(' + i + ')">' +
-      '<span class="diagram-list-grip">⠿</span>' +
+      '<div class="diagram-list-group">' +
+      '<div class="diagram-list-item' + (isActive ? ' active' : '') + '"' +
+      ' style="padding-left:' + indent + 'px"' +
+      ' onclick="selectDiagramme(\'' + d.id + '\', true)">' +
+      '<span class="diagram-list-expand" onclick="event.stopPropagation();toggleDiagExpand(\'' + d.id + '\')">' +
+      (hasChildren ? (isExpanded ? '&#9660;' : '&#9658;') : '<span style="display:inline-block;width:0.7em"></span>') +
+      '</span>' +
       '<span class="diagram-list-name">' + escDiag(d.titre) + '</span>' +
-      (diagramsList.length > 1
-        ? '<button class="diagram-list-del" onclick="event.stopPropagation();supprimerDiagramme(' + i + ')">×</button>'
-        : "") +
-      "</div>"
+      '<button class="diagram-list-add" onclick="event.stopPropagation();creerEnfantDiagramme(\'' + d.id + '\')" title="Ajouter un diagramme enfant">+</button>' +
+      (depth > 0 || list.length > 1
+        ? '<button class="diagram-list-del" onclick="event.stopPropagation();supprimerDiagramme(\'' + d.id + '\')">×</button>'
+        : '') +
+      '</div>' +
+      childrenHtml +
+      '</div>'
     );
-  }).join("");
-}
-
-function onDiagDragStart(e, idx) {
-  diagDragSrcIdx = idx;
-  e.dataTransfer.effectAllowed = "move";
-  e.currentTarget.classList.add("dragging");
+  }).join('');
 }
 
-function onDiagDragOver(e, idx) {
-  e.preventDefault();
-  e.dataTransfer.dropEffect = "move";
-  document.querySelectorAll(".diagram-list-item").forEach(function (el) {
-    el.classList.remove("drag-over-after", "drag-over-before");
-  });
-  if (idx !== diagDragSrcIdx) {
-    var goingDown = diagDragSrcIdx < idx;
-    e.currentTarget.classList.add(goingDown ? "drag-over-after" : "drag-over-before");
-  }
-}
-
-function onDiagDragLeave(e) {
-  e.currentTarget.classList.remove("drag-over-after", "drag-over-before");
+function renderDiagramList() {
+  var el = document.getElementById("diagramList");
+  if (!el) return;
+  el.innerHTML = renderDiagramListLevel(diagramsList, 0);
+  updateSidebarWidth();
 }
 
-function onDiagDrop(e, idx) {
-  e.preventDefault();
-  if (diagDragSrcIdx === null || diagDragSrcIdx === idx) {
-    onDiagDragEnd();
-    return;
-  }
-  var src = diagDragSrcIdx;
-  var item = diagramsList.splice(src, 1)[0];
-
-  // insertAt = idx dans les deux cas :
-  // - descente (src < idx) : après remove, la cible est à idx-1, on insère à idx = après elle ✓
-  // - montée  (src > idx) : après remove, la cible est toujours à idx, on insère à idx = avant elle ✓
-  diagramsList.splice(idx, 0, item);
-
-  var cur = currentDiagramIdx;
-  if (cur === src) {
-    currentDiagramIdx = idx;
+function toggleDiagExpand(id) {
+  var key = String(id);
+  if (diagExpandedIds[key]) {
+    delete diagExpandedIds[key];
   } else {
-    var adjustedCur = cur > src ? cur - 1 : cur;
-    currentDiagramIdx = adjustedCur >= idx ? adjustedCur + 1 : adjustedCur;
+    diagExpandedIds[key] = true;
   }
-  localStorage.setItem("current_diagram_idx", currentDiagramIdx);
-  diagDragSrcIdx = null;
-  saveDiagrammes();
   renderDiagramList();
 }
 
-function onDiagDragEnd() {
-  diagDragSrcIdx = null;
-  document.querySelectorAll(".diagram-list-item").forEach(function (el) {
-    el.classList.remove("dragging", "drag-over-after", "drag-over-before");
-  });
-}
-
 // ── Gestion des diagrammes ──
-function selectDiagramme(idx) {
+function selectDiagramme(id, clearStack) {
+  if (clearStack) diagNavStack = [];
   saveCurrentZoom();
   saveCurrentLock();
-  currentDiagramIdx = idx;
-  localStorage.setItem("current_diagram_idx", idx);
-  selectedId = null;  selectedType = null;
+  currentDiagramId = String(id);
+  localStorage.setItem("current_diagram_id", String(id));
+  selectedId = null; selectedType = null;
   selectedIds = [];
-  restoreZoomForDiagram(idx);
-  restoreLockForDiagram(idx);
+  pendingNavDiagId = null;
+  restoreZoomForDiagram(id);
+  restoreLockForDiagram(id);
   viewTransform.x = 60;
   viewTransform.y = 60;
   document.getElementById("colorPanel").style.display = "none";
   renderAll();
   updateLockBtn();
+  updateBackBtn();
   document.getElementById("diagramListPanel").classList.remove("open");
 }
 
+function goBackDiagram() {
+  if (diagNavStack.length === 0) return;
+  var prevId = diagNavStack.pop();
+  selectDiagramme(prevId);
+}
+
 function creerDiagramme() {
+  pendingParentId = null;
+  pendingNewDiagram = true;
+  var input = document.getElementById("diagramTitle");
+  input.value = "";
+  input.placeholder = window.t ? window.t.diag_new_diagram : "Nouveau diagramme";
+  input.focus();
+  input.select();
+}
+
+function creerEnfantDiagramme(parentId) {
+  pendingParentId = String(parentId);
   pendingNewDiagram = true;
+  diagExpandedIds[String(parentId)] = true;
   var input = document.getElementById("diagramTitle");
   input.value = "";
   input.placeholder = window.t ? window.t.diag_new_diagram : "Nouveau diagramme";
@@ -818,10 +1231,21 @@ function confirmerNouveauDiagramme() {
   var input = document.getElementById("diagramTitle");
   var titre = input.value.trim() || (window.t ? window.t.diag_new_diagram : "Nouveau diagramme");
   input.placeholder = "";
-  var d = { id: Date.now(), titre: titre, shapes: [], arrows: [] };
-  diagramsList.push(d);
+  var d = { id: Date.now(), titre: titre, shapes: [], arrows: [], children: [] };
+  if (pendingParentId) {
+    var parent = findDiagramById(pendingParentId, diagramsList);
+    if (parent) {
+      if (!parent.children) parent.children = [];
+      parent.children.push(d);
+    } else {
+      diagramsList.push(d);
+    }
+    pendingParentId = null;
+  } else {
+    diagramsList.push(d);
+  }
   saveDiagrammes();
-  selectDiagramme(diagramsList.length - 1);
+  selectDiagramme(d.id);
   document.getElementById("diagramTitle").blur();
 }
 
@@ -835,17 +1259,31 @@ function annulerNouveauDiagramme() {
   input.blur();
 }
 
-function supprimerDiagramme(idx) {
-  if (diagramsList.length <= 1) return;
-  diagramsList.splice(idx, 1);
-  if (currentDiagramIdx >= diagramsList.length) currentDiagramIdx = diagramsList.length - 1;
-  localStorage.setItem("current_diagram_idx", currentDiagramIdx);
+function supprimerDiagramme(id) {
+  var info = findParentListOf(id, diagramsList);
+  if (!info) return;
+  if (info.list === diagramsList && info.list.length <= 1) return;
+  pushHistory();
+  info.list.splice(info.index, 1);
+  if (!findDiagramById(currentDiagramId, diagramsList)) {
+    currentDiagramId = diagramsList[0] ? String(diagramsList[0].id) : null;
+    localStorage.setItem("current_diagram_id", currentDiagramId || "");
+  }
   saveDiagrammes();
   renderAll();
 }
 
 function toggleDiagramList() {
-  document.getElementById("diagramListPanel").classList.toggle("open");
+  var panel = document.getElementById("diagramListPanel");
+  var isOpening = !panel.classList.contains("open");
+  panel.classList.toggle("open");
+  if (isOpening && currentDiagramId) {
+    var path = getAncestorPath(currentDiagramId, diagramsList);
+    if (path) {
+      path.forEach(function (id) { diagExpandedIds[id] = true; });
+      renderDiagramList();
+    }
+  }
 }
 
 // ── Outil actif ──
@@ -873,9 +1311,9 @@ function setTool(tool) {
 
 // ── Ajout d'une forme ──
 function addShape(type, x, y) {
+  pushHistory();
   var diag = getCurrentDiagram();
   var size = DEFAULT_SIZES[type] || { w: 120, h: 50 };
-  var labels = { db: "Database", cloud: "Cloud", text: "Label", postit: "" };
   var shape = {
     id: "s" + Date.now(),
     type: type,
@@ -883,21 +1321,30 @@ function addShape(type, x, y) {
     y: Math.round(y - size.h / 2),
     w: size.w,
     h: size.h,
-    text: type in labels ? labels[type] : "Service",
+    text: "",
     color: type === "postit" ? "t-amber" : DEFAULT_COLOR,
   };
+  if (type === "table") {
+    shape.rows = 3; shape.cols = 3;
+    shape.cells = [["","",""],["","",""],["","",""]];
+    var initW = shape.w / 3;
+    shape.colWidths = [initW, initW, initW];
+  }
   diag.shapes.push(shape);
   saveDiagrammes();
   selectedId = shape.id;  selectedType = "shape";
   selectedIds = [shape.id];
   renderAll();
   document.getElementById("colorPanel").style.display = "flex";
-  startTextEdit(shape.id);
+  syncColorPanel();
+  if (type !== "table") startTextEdit(shape.id);
 }
 
 // ── Suppression ──
 function deleteSelected() {
   var diag = getCurrentDiagram();
+  if (selectedIds.length === 0 && !(selectedId && selectedType === "arrow")) return;
+  pushHistory();
   if (selectedIds.length > 0) {
     diag.shapes = diag.shapes.filter(function (s) { return selectedIds.indexOf(s.id) === -1; });
     diag.arrows = diag.arrows.filter(function (a) {
@@ -919,6 +1366,7 @@ function deleteSelected() {
 // ── Couleur ──
 function setShapeColor(color) {
   if (selectedIds.length === 0) return;
+  pushHistory();
   var diag = getCurrentDiagram();
   selectedIds.forEach(function (id) {
     var shape = diag.shapes.find(function (s) { return s.id === id; });
@@ -931,6 +1379,7 @@ function setShapeColor(color) {
 
 function setShapeTextValign(valign) {
   if (selectedIds.length === 0) return;
+  pushHistory();
   var diag = getCurrentDiagram();
   selectedIds.forEach(function (id) {
     var shape = diag.shapes.find(function (s) { return s.id === id; });
@@ -943,6 +1392,7 @@ function setShapeTextValign(valign) {
 
 function setShapeTextAlign(align) {
   if (selectedIds.length === 0) return;
+  pushHistory();
   var diag = getCurrentDiagram();
   selectedIds.forEach(function (id) {
     var shape = diag.shapes.find(function (s) { return s.id === id; });
@@ -955,6 +1405,7 @@ function setShapeTextAlign(align) {
 
 function changeShapeFontSize(delta) {
   if (selectedIds.length === 0) return;
+  pushHistory();
   var diag = getCurrentDiagram();
   selectedIds.forEach(function (id) {
     var shape = diag.shapes.find(function (s) { return s.id === id; });
@@ -985,6 +1436,7 @@ function cancelPickMode() {
 }
 
 function applyPickMode(srcShape) {
+  pushHistory();
   var diag = getCurrentDiagram();
   pickTargetIds.forEach(function (id) {
     if (id === srcShape.id) return;
@@ -1000,6 +1452,7 @@ function applyPickMode(srcShape) {
       shape.h          = srcShape.h;
       shape.textAlign  = srcShape.textAlign  || "center";
       shape.textValign = srcShape.textValign || "middle";
+      shape.rotation   = srcShape.rotation   || 0;
     }
   });
   selectedIds = pickTargetIds.slice();
@@ -1008,11 +1461,48 @@ function applyPickMode(srcShape) {
   document.getElementById("colorPanel").style.display = "flex";
 }
 
+function rotateShape(delta) {
+  var diag = getCurrentDiagram();
+  if (!diag || selectedIds.length === 0) return;
+  pushHistory();
+  selectedIds.forEach(function (id) {
+    var s = diag.shapes.find(function (sh) { return sh.id === id; });
+    if (!s || s.type === "image") return;
+    s.rotation = ((s.rotation || 0) + delta + 360) % 360;
+  });
+  saveDiagrammes();
+  renderAll();
+}
+
+function changeShapeOrder(delta) {
+  var diag = getCurrentDiagram();
+  if (!diag || selectedIds.length === 0) return;
+  pushHistory();
+  if (delta > 0) {
+    // Avancer : parcourir de la fin vers le début
+    for (var i = diag.shapes.length - 1; i >= 0; i--) {
+      if (selectedIds.indexOf(diag.shapes[i].id) !== -1 && i < diag.shapes.length - 1) {
+        var tmp = diag.shapes[i]; diag.shapes[i] = diag.shapes[i + 1]; diag.shapes[i + 1] = tmp;
+      }
+    }
+  } else {
+    // Reculer : parcourir du début vers la fin
+    for (var i = 0; i < diag.shapes.length; i++) {
+      if (selectedIds.indexOf(diag.shapes[i].id) !== -1 && i > 0) {
+        var tmp = diag.shapes[i]; diag.shapes[i] = diag.shapes[i - 1]; diag.shapes[i - 1] = tmp;
+      }
+    }
+  }
+  saveDiagrammes();
+  renderAll();
+}
+
 // ── Édition texte inline ──
 function startTextEdit(shapeId) {
   var diag = getCurrentDiagram();
   var shape = diag.shapes.find(function (s) { return s.id === shapeId; });
   if (!shape || shape.type === "image") return;
+  if (shape.type === "table") return;
   editingShapeId = shapeId;
 
   var svg = document.getElementById("canvas");
@@ -1023,15 +1513,21 @@ function startTextEdit(shapeId) {
   var sh = shape.h * viewTransform.scale;
   var c = COLORS[shape.color] || COLORS[DEFAULT_COLOR];
 
-  var useTextarea = shape.type === "postit" || shape.type === "rect" || shape.type === "rounded" || shape.type === "db" || shape.type === "cloud";
+  var useTextarea = shape.type === "postit" || shape.type === "rect" || shape.type === "rounded" || shape.type === "db" || shape.type === "cloud" || shape.type === "nuage";
   if (useTextarea) {
     var ta = document.getElementById("postitTextInput");
     ta.value = shape.text || "";
-    var hpad = shape.type === "cloud" ? Math.round(sw * 0.15) : 8;
+    var hpad = shape.type === "cloud" ? Math.round(sw * 0.15) : shape.type === "nuage" ? Math.round(sw * 0.14) : 8;
     var vtop, vheight;
     if (shape.type === "cloud") {
       vtop    = sy + Math.round(sh * 0.12);
       vheight = sh - Math.round(sh * 0.12) * 2;
+    } else if (shape.type === "nuage") {
+      // Le nuage Bootstrap : haut visible ≈ y=2/16, bas de la zone texte ≈ y=10/16
+      var nuageTop = Math.round(sh * 2 / 16);
+      var nuageBot = Math.round(sh * 10 / 16);
+      vtop    = sy + nuageTop;
+      vheight = nuageBot - nuageTop - 4;
     } else if (shape.type === "db") {
       var dbRy = Math.min(12, shape.h * 0.2) * viewTransform.scale;
       vtop    = sy + dbRy * 2 + 4;
@@ -1057,9 +1553,15 @@ function startTextEdit(shapeId) {
   } else {
     var input = document.getElementById("shapeTextInput");
     input.value = shape.text || "";
-    input.style.left   = (sx + sw * 0.08) + "px";
-    input.style.top    = (sy + sh * 0.22) + "px";
-    input.style.width  = (sw * 0.84) + "px";
+    if (shape.type === "actor") {
+      input.style.left  = sx + "px";
+      input.style.top   = (sy + sh * 0.84) + "px";
+      input.style.width = sw + "px";
+    } else {
+      input.style.left  = (sx + sw * 0.08) + "px";
+      input.style.top   = (sy + sh * 0.22) + "px";
+      input.style.width = (sw * 0.84) + "px";
+    }
     var editFs2 = shape.fontSize || 13;
     input.style.fontSize   = Math.max(10, editFs2 * viewTransform.scale) + "px";
     input.style.color      = c.text;
@@ -1076,18 +1578,32 @@ function confirmTextEdit() {
   if (editingShapeId) {
     var shape = diag.shapes.find(function (s) { return s.id === editingShapeId; });
     if (shape) {
-      var usesTextarea = shape.type === "postit" || shape.type === "rect" || shape.type === "rounded" || shape.type === "db" || shape.type === "cloud";
-      var val = usesTextarea
-        ? document.getElementById("postitTextInput").value
-        : input.value;
-      shape.text = val;
+      if (shape.type === "table" && editingTableCell !== null) {
+        var tval = document.getElementById("postitTextInput").value;
+        var oldCellVal = (shape.cells && shape.cells[editingTableCell.row] && shape.cells[editingTableCell.row][editingTableCell.col]) || "";
+        if (tval !== oldCellVal) pushHistory();
+        if (!shape.cells) shape.cells = [];
+        while (shape.cells.length <= editingTableCell.row) shape.cells.push([]);
+        shape.cells[editingTableCell.row][editingTableCell.col] = tval;
+        editingTableCell = null;
+      } else {
+        var usesTextarea = shape.type === "postit" || shape.type === "rect" || shape.type === "rounded" || shape.type === "db" || shape.type === "cloud" || shape.type === "nuage";
+        var val = usesTextarea
+          ? document.getElementById("postitTextInput").value
+          : input.value;
+        if (val !== (shape.text || "")) pushHistory();
+        shape.text = val;
+      }
       saveDiagrammes();
       renderAll();
     }
     editingShapeId = null;
   } else if (editingArrowId) {
     var arrow = (diag.arrows || []).find(function (a) { return a.id === editingArrowId; });
-    if (arrow) { arrow.label = input.value; saveDiagrammes(); renderAll(); }
+    if (arrow) {
+      if (input.value !== (arrow.label || "")) pushHistory();
+      arrow.label = input.value; saveDiagrammes(); renderAll();
+    }
     editingArrowId = null;
   }
   document.getElementById("textOverlay").style.display = "none";
@@ -1095,6 +1611,285 @@ function confirmTextEdit() {
   document.getElementById("shapeTextInput").style.display = "block";
 }
 
+function startTableCellEdit(shapeId, row, col) {
+  var diag = getCurrentDiagram();
+  var shape = diag.shapes.find(function (s) { return s.id === shapeId; });
+  if (!shape) return;
+  editingShapeId = shapeId;
+  editingTableCell = { row: row, col: col };
+
+  var tRows = shape.rows || 3;
+  var scColWidths = getColWidths(shape);
+  var scColOffsets = getColOffsets(shape);
+  var cellW = scColWidths[col], cellH = shape.h / tRows;
+  var cellX = shape.x + scColOffsets[col], cellY = shape.y + row * cellH;
+
+  var svgEl = document.getElementById("canvas");
+  var sr = svgEl.getBoundingClientRect();
+  var csx = cellX * viewTransform.scale + viewTransform.x + sr.left;
+  var csy = cellY * viewTransform.scale + viewTransform.y + sr.top;
+  var csw = cellW * viewTransform.scale, csh = cellH * viewTransform.scale;
+  var cc = COLORS[shape.color] || COLORS[DEFAULT_COLOR];
+
+  var ta = document.getElementById("postitTextInput");
+  ta.value = (shape.cells && shape.cells[row] && shape.cells[row][col]) || "";
+  ta.style.left   = (csx + 2) + "px";
+  ta.style.top    = (csy + 2) + "px";
+  ta.style.width  = (csw - 4) + "px";
+  ta.style.height = (csh - 4) + "px";
+  var tfs = shape.fontSize || 12;
+  ta.style.fontSize = Math.max(10, tfs * viewTransform.scale) + "px";
+  ta.style.color  = cc.text;
+  ta.style.display = "block";
+  document.getElementById("shapeTextInput").style.display = "none";
+  document.getElementById("textOverlay").style.display = "block";
+  var sg = document.querySelector('#shapesLayer [data-id="' + shapeId + '"]');
+  if (sg) { var cellTx = sg.querySelector('text[data-cell="' + row + '-' + col + '"]'); if (cellTx) cellTx.style.visibility = "hidden"; }
+  setTimeout(function () { ta.focus(); ta.select(); }, 10);
+}
+
+function addTableRow() {
+  var diag = getCurrentDiagram();
+  var shape = selectedIds.length === 1 ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape || shape.type !== "table") return;
+  pushHistory();
+  shape.rows = (shape.rows || 3) + 1;
+  if (!shape.cells) shape.cells = [];
+  while (shape.cells.length < shape.rows) shape.cells.push([]);
+  shape.cells[shape.rows - 1] = new Array(shape.cols || 3).fill("");
+  saveDiagrammes(); renderAll();
+  document.getElementById("colorPanel").style.display = "flex";
+  syncColorPanel();
+}
+
+function removeTableRow() {
+  var diag = getCurrentDiagram();
+  var shape = selectedIds.length === 1 ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape || shape.type !== "table" || (shape.rows || 3) <= 1) return;
+  pushHistory();
+  shape.rows = (shape.rows || 3) - 1;
+  if (shape.cells && shape.cells.length > shape.rows) shape.cells.splice(shape.rows);
+  saveDiagrammes(); renderAll();
+  document.getElementById("colorPanel").style.display = "flex";
+  syncColorPanel();
+}
+
+function addTableCol() {
+  var diag = getCurrentDiagram();
+  var shape = selectedIds.length === 1 ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape || shape.type !== "table") return;
+  pushHistory();
+  var oldCols = shape.cols || 3;
+  shape.cols = oldCols + 1;
+  if (!shape.cells) shape.cells = [];
+  var rows = shape.rows || 3;
+  for (var ri = 0; ri < rows; ri++) {
+    if (!shape.cells[ri]) shape.cells[ri] = [];
+    shape.cells[ri].push("");
+  }
+  // Répartir la largeur : réduire les colonnes existantes proportionnellement
+  var oldWidths = getColWidths({ cols: oldCols, w: shape.w, colWidths: shape.colWidths });
+  var newColW = shape.w / shape.cols;
+  var scale = (shape.w - newColW) / shape.w;
+  shape.colWidths = oldWidths.map(function (w) { return w * scale; });
+  shape.colWidths.push(newColW);
+  saveDiagrammes(); renderAll();
+  document.getElementById("colorPanel").style.display = "flex";
+  syncColorPanel();
+}
+
+function removeTableCol() {
+  var diag = getCurrentDiagram();
+  var shape = selectedIds.length === 1 ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape || shape.type !== "table" || (shape.cols || 3) <= 1) return;
+  pushHistory();
+  var oldCols = shape.cols || 3;
+  shape.cols = oldCols - 1;
+  if (shape.cells) shape.cells.forEach(function (row) { if (row.length > shape.cols) row.splice(shape.cols); });
+  // Retirer la dernière colonne et rescaler les restantes pour remplir shape.w
+  var cw = getColWidths({ cols: oldCols, w: shape.w, colWidths: shape.colWidths });
+  cw.splice(shape.cols);
+  var total = cw.reduce(function (s, v) { return s + v; }, 0);
+  shape.colWidths = cw.map(function (w) { return w * shape.w / total; });
+  saveDiagrammes(); renderAll();
+  document.getElementById("colorPanel").style.display = "flex";
+  syncColorPanel();
+}
+
+// ── Overlay tableau (boutons +/− ligne/colonne sur le canvas) ──
+function updateTableOverlay() {
+  var ids = ["tcBtnAddCol","tcBtnRemoveCol","tcBtnAddRow","tcBtnRemoveRow"];
+  var hide = function () { ids.forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = "none"; }); };
+  if (boardLocked || selectedIds.length !== 1 || selectedType !== "shape") { hide(); return; }
+  var diag = getCurrentDiagram();
+  if (!diag) { hide(); return; }
+  var shape = diag.shapes.find(function (s) { return s.id === selectedIds[0]; });
+  if (!shape || shape.type !== "table") { hide(); return; }
+
+  var svg = document.getElementById("canvas");
+  var sr  = svg.getBoundingClientRect();
+  var sc  = viewTransform.scale;
+  var tx  = viewTransform.x, ty = viewTransform.y;
+  var right  = (shape.x + shape.w) * sc + tx + sr.left;
+  var bottom = (shape.y + shape.h) * sc + ty + sr.top;
+  var rows   = shape.rows || 3;
+  var cellH  = shape.h * sc / rows;
+  var BW = 22, GAP = 4;
+
+  // +/− col : à droite de la dernière ligne, centrés verticalement dans cette ligne
+  var lastRowCy = bottom - cellH / 2;
+  var ac = document.getElementById("tcBtnAddCol");
+  var rc = document.getElementById("tcBtnRemoveCol");
+  ac.style.left = (right + GAP) + "px";  ac.style.top = (lastRowCy - BW - 2) + "px";
+  rc.style.left = (right + GAP) + "px";  rc.style.top = (lastRowCy + 2) + "px";
+  ac.style.display = rc.style.display = "flex";
+
+  // +/− row : sous la dernière ligne, alignés à droite de la table
+  var ar = document.getElementById("tcBtnAddRow");
+  var rr = document.getElementById("tcBtnRemoveRow");
+  ar.style.left = (right - BW * 2 - GAP) + "px";  ar.style.top = (bottom + GAP) + "px";
+  rr.style.left = (right - BW - 2) + "px";         rr.style.top = (bottom + GAP) + "px";
+  ar.style.display = rr.style.display = "flex";
+}
+
+function syncColorPanel() {
+  var btn = document.getElementById("btnShapeLink");
+  if (!btn) return;
+  if (selectedIds.length === 1 && selectedType === "shape") {
+    var diag = getCurrentDiagram();
+    var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+    if (shape && shape.linkedDiagramId) {
+      btn.classList.add("active");
+      var linked = findDiagramById(shape.linkedDiagramId, diagramsList);
+      btn.title = linked ? "Lié à : " + linked.titre + " (cliquer pour délier)" : "Supprimer le lien";
+    } else if (shape && shape.externalUrl) {
+      btn.classList.add("active");
+      btn.title = "Lien externe : " + shape.externalUrl + " (cliquer pour délier)";
+    } else {
+      btn.classList.remove("active");
+      btn.title = "Lier à un diagramme enfant ou URL externe";
+    }
+    btn.style.display = "";
+  } else {
+    btn.classList.remove("active");
+    btn.style.display = "none";
+  }
+}
+
+function toggleShapeLink() {
+  if (selectedIds.length !== 1 || selectedType !== "shape") return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  if (shape.linkedDiagramId || shape.externalUrl) {
+    pushHistory();
+    delete shape.linkedDiagramId;
+    delete shape.externalUrl;
+    saveDiagrammes();
+    renderAll();
+    syncColorPanel();
+    hideLinkPicker();
+  } else {
+    showLinkPicker();
+  }
+}
+
+function showLinkPicker() {
+  var panel = document.getElementById("linkPickerPanel");
+  if (!panel) return;
+  var btn = document.getElementById("btnShapeLink");
+  var r = btn ? btn.getBoundingClientRect() : { bottom: 100, left: 200 };
+  panel.style.top = (r.bottom + 6) + "px";
+  panel.style.left = r.left + "px";
+  var all = flattenDiagrams(diagramsList);
+  var curId = String(currentDiagramId);
+  var items = all.filter(function (d) { return String(d.id) !== curId; });
+  var html = items.map(function (d) {
+    return '<div class="link-picker-item" onclick="lierForme(\'' + d.id + '\')">' + escDiag(d.titre) + '</div>';
+  }).join("");
+  html += '<div class="link-picker-new" onclick="creerEnfantEtLier()">+ Nouveau diagramme enfant</div>';
+  html += '<div class="link-picker-new link-picker-ext-toggle" onclick="showExternalLinkInput()" style="display:flex;align-items:center;gap:6px;">'
+        + '<svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="6" fill="#0284c7" stroke="#fff" stroke-width="1.5"/><text x="7" y="10.5" text-anchor="middle" font-size="8" font-weight="bold" fill="#fff">\u2197</text></svg>'
+        + 'Lien externe (URL)</div>';
+  html += '<div id="linkPickerExtRow" style="display:none;padding:6px 8px;border-top:1px solid #e7e5e4;">'
+        + '<input id="linkPickerExtUrl" type="text" placeholder="https://..." '
+        + 'style="width:100%;box-sizing:border-box;padding:4px 6px;border:1px solid #d4d4d4;border-radius:4px;font-size:12px;" '
+        + 'onkeydown="if(event.key===\'Enter\')lierFormeExterne()">'
+        + '<div id="linkPickerExtErr" style="color:#e11d48;font-size:11px;margin-top:3px;display:none;">URL invalide (http://, https:// ou file://)</div>'
+        + '</div>';
+  document.getElementById("linkPickerList").innerHTML = html;
+  panel.style.display = "block";
+}
+
+function showExternalLinkInput() {
+  var row = document.getElementById("linkPickerExtRow");
+  if (!row) return;
+  row.style.display = "block";
+  var input = document.getElementById("linkPickerExtUrl");
+  if (input) setTimeout(function () { input.focus(); }, 10);
+}
+
+function lierFormeExterne() {
+  var input = document.getElementById("linkPickerExtUrl");
+  if (!input) return;
+  var url = input.value.trim();
+  var err = document.getElementById("linkPickerExtErr");
+  if (!/^(https?|file):\/\//i.test(url)) {
+    if (err) err.style.display = "block";
+    return;
+  }
+  if (err) err.style.display = "none";
+  if (selectedIds.length !== 1) return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  pushHistory();
+  shape.externalUrl = url;
+  delete shape.linkedDiagramId;
+  hideLinkPicker();
+  saveDiagrammes();
+  renderAll();
+  syncColorPanel();
+}
+
+function hideLinkPicker() {
+  var panel = document.getElementById("linkPickerPanel");
+  if (panel) panel.style.display = "none";
+}
+
+function lierForme(diagId) {
+  if (selectedIds.length !== 1) return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  pushHistory();
+  shape.linkedDiagramId = String(diagId);
+  delete shape.externalUrl;
+  hideLinkPicker();
+  saveDiagrammes();
+  renderAll();
+  syncColorPanel();
+}
+
+function creerEnfantEtLier() {
+  if (selectedIds.length !== 1) return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  hideLinkPicker();
+  var titre = shape.text || "Sous-diagramme";
+  var child = { id: Date.now(), titre: titre, shapes: [], arrows: [], children: [] };
+  if (!diag.children) diag.children = [];
+  diag.children.push(child);
+  diagExpandedIds[String(diag.id)] = true;
+  pushHistory();
+  shape.linkedDiagramId = String(child.id);
+  saveDiagrammes();
+  renderAll();
+  renderDiagramList();
+  syncColorPanel();
+}
+
 function startArrowTextEdit(arrowId) {
   var diag = getCurrentDiagram();
   var arrow = (diag.arrows || []).find(function (a) { return a.id === arrowId; });
@@ -1134,7 +1929,16 @@ function shapeAt(x, y) {
   if (!diag) return null;
   for (var i = diag.shapes.length - 1; i >= 0; i--) {
     var s = diag.shapes[i];
-    if (x >= s.x && x <= s.x + s.w && y >= s.y && y <= s.y + s.h) return s;
+    var lx = x, ly = y;
+    if (s.rotation) {
+      var scx = s.x + s.w / 2, scy = s.y + s.h / 2;
+      var rad = -s.rotation * Math.PI / 180;
+      var cos = Math.cos(rad), sin = Math.sin(rad);
+      var ddx = x - scx, ddy = y - scy;
+      lx = scx + ddx * cos - ddy * sin;
+      ly = scy + ddx * sin + ddy * cos;
+    }
+    if (lx >= s.x && lx <= s.x + s.w && ly >= s.y && ly <= s.y + s.h) return s;
   }
   return null;
 }
@@ -1166,6 +1970,7 @@ function distToSeg(px, py, x1, y1, x2, y2) {
 function createArrow(fromId, toId) {
   var diag = getCurrentDiagram();
   if (diag.arrows.some(function (a) { return a.from === fromId && a.to === toId; })) return;
+  pushHistory();
   var arrow = { id: "a" + Date.now(), from: fromId, to: toId, label: "" };
   diag.arrows.push(arrow);
   saveDiagrammes();
@@ -1219,13 +2024,26 @@ function onMouseDown(e) {
     return;
   }
 
+  // Clic sur un chevron de redimensionnement de colonne
+  var colSepEl = e.target.closest("[data-col-sep]");
+  if (colSepEl) {
+    var csColIdx = parseInt(colSepEl.getAttribute("data-col-sep"), 10);
+    var csSid = colSepEl.getAttribute("data-shape-id");
+    var csShape = getCurrentDiagram().shapes.find(function (s) { return s.id === csSid; });
+    if (csShape) {
+      var csCw = getColWidths(csShape);
+      dragState = { type: "col-resize", id: csSid, colIdx: csColIdx, sx: pt.x, origWidths: csCw.slice(), snapshot: JSON.stringify(diagramsList) };
+    }
+    return;
+  }
+
   // Clic sur la poignée de resize
   var grip = e.target.closest(".resize-grip");
   if (grip) {
     var sid = grip.getAttribute("data-shape-id");
     var shape = getCurrentDiagram().shapes.find(function (s) { return s.id === sid; });
     if (shape) {
-      dragState = { type: "resize", id: sid, sx: pt.x, sy: pt.y, ow: shape.w, oh: shape.h };
+      dragState = { type: "resize", id: sid, sx: pt.x, sy: pt.y, ow: shape.w, oh: shape.h, snapshot: JSON.stringify(diagramsList) };
     }
     return;
   }
@@ -1238,7 +2056,20 @@ function onMouseDown(e) {
       var now = Date.now();
       if (now - lastClickTime < 350 && lastClickShapeId === shape.id) {
         lastClickTime = 0;  lastClickShapeId = null;
-        startTextEdit(shape.id);
+        if (shape.type === "table") {
+          var tDblRows = shape.rows || 3;
+          var tDblOffsets = getColOffsets(shape);
+          var tDblCw = getColWidths(shape);
+          var tDblRx = pt.x - shape.x;
+          var tDblC = tDblCw.length - 1;
+          for (var tci3 = 0; tci3 < tDblCw.length; tci3++) {
+            if (tDblRx < tDblOffsets[tci3] + tDblCw[tci3]) { tDblC = tci3; break; }
+          }
+          var tDblR = Math.min(tDblRows - 1, Math.max(0, Math.floor((pt.y - shape.y) / (shape.h / tDblRows))));
+          startTableCellEdit(shape.id, tDblR, tDblC);
+        } else {
+          startTextEdit(shape.id);
+        }
         return;
       }
       lastClickTime = now;  lastClickShapeId = shape.id;  lastClickArrowId = null;
@@ -1266,12 +2097,13 @@ function onMouseDown(e) {
             var s = diag.shapes.find(function (sh) { return sh.id === id; });
             return { id: id, ox: s ? s.x : 0, oy: s ? s.y : 0 };
           }),
+          snapshot: JSON.stringify(diagramsList),
         };
       } else {
         // Clic simple → sélection unique
         selectedIds = [shape.id];
         selectedId = shape.id;  selectedType = "shape";
-        dragState = { type: "move", id: shape.id, sx: pt.x, sy: pt.y, ox: shape.x, oy: shape.y };
+        dragState = { type: "move", id: shape.id, sx: pt.x, sy: pt.y, ox: shape.x, oy: shape.y, snapshot: JSON.stringify(diagramsList) };
         document.getElementById("colorPanel").style.display = "flex";
         renderAll();
       }
@@ -1353,6 +2185,7 @@ function onMouseMove(e) {
     rb.setAttribute("height", Math.abs(pt.y - rubberBandState.sy));
     rb.style.display = "";
   } else if (dragState) {
+    dragState.moved = true;
     var diag = getCurrentDiagram();
     if (dragState.type === "multi-move") {
       var dx = pt.x - dragState.sx;
@@ -1369,8 +2202,27 @@ function onMouseMove(e) {
         shape.x = Math.round(dragState.ox + pt.x - dragState.sx);
         shape.y = Math.round(dragState.oy + pt.y - dragState.sy);
       } else if (dragState.type === "resize") {
-        shape.w = Math.max(60, Math.round(dragState.ow + pt.x - dragState.sx));
-        shape.h = Math.max(30, Math.round(dragState.oh + pt.y - dragState.sy));
+        var newW = Math.max(60, Math.round(dragState.ow + pt.x - dragState.sx));
+        var newH = Math.max(30, Math.round(dragState.oh + pt.y - dragState.sy));
+        if (shape.type === "table" && shape.colWidths && shape.colWidths.length === (shape.cols || 3)) {
+          var oldW2 = shape.w;
+          shape.colWidths = shape.colWidths.map(function (cw) { return cw * newW / oldW2; });
+        }
+        shape.w = newW;
+        shape.h = newH;
+      } else if (dragState.type === "col-resize") {
+        var crCw = dragState.origWidths.slice();
+        var crDx = pt.x - dragState.sx;
+        var crCi = dragState.colIdx;
+        var MIN_COL = 20;
+        var crLeft  = Math.max(MIN_COL, crCw[crCi] + crDx);
+        var crRight = Math.max(MIN_COL, crCw[crCi + 1] - crDx);
+        var crTotal = crCw[crCi] + crCw[crCi + 1];
+        crLeft  = Math.min(crTotal - MIN_COL, crLeft);
+        crRight = crTotal - crLeft;
+        crCw[crCi] = crLeft;
+        crCw[crCi + 1] = crRight;
+        shape.colWidths = crCw;
       }
       renderAll();
     }
@@ -1384,6 +2236,31 @@ function onMouseMove(e) {
 function onMouseUp(e) {
   var pt = svgPoint(e.clientX, e.clientY);
 
+  // En mode verrouillé : détecter un clic (sans déplacement) sur une forme liée
+  if (boardLocked && panStart) {
+    var movedPx = Math.abs(e.clientX - panStart.cx) + Math.abs(e.clientY - panStart.cy);
+    if (movedPx < 5 && !e.shiftKey) {
+      var shape = shapeAt(pt.x, pt.y);
+      if (shape && shape.linkedDiagramId) {
+        var target = findDiagramById(shape.linkedDiagramId, diagramsList);
+        if (target) {
+          hideLinkPicker();
+          diagNavStack.push(currentDiagramId);
+          if (diagNavStack.length > 30) diagNavStack.shift();
+          panStart = null;
+          selectDiagramme(shape.linkedDiagramId);
+          return;
+        }
+      } else if (shape && shape.externalUrl) {
+        panStart = null;
+        window.open(shape.externalUrl, "_blank");
+        return;
+      }
+    }
+    panStart = null;
+    return;
+  }
+
   // Fin de tracé de flèche via conn-dot
   if (arrowSrcId && !dragState) {
     document.getElementById("tempArrow").style.display = "none";
@@ -1416,9 +2293,34 @@ function onMouseUp(e) {
   }
 
   if (dragState) {
+    var wasMoved = dragState.moved;
+    var draggedId = dragState.id;
+    var dragType = dragState.type;
+    if (dragState.moved && dragState.snapshot) {
+      historyStack.push(dragState.snapshot);
+      if (historyStack.length > MAX_HISTORY) historyStack.shift();
+    }
     saveDiagrammes();
     dragState = null;
     renderAll();
+    // Naviguer vers le diagramme lié si clic sans déplacement
+    if (!wasMoved && dragType === "move" && draggedId && !e.shiftKey) {
+      var diag = getCurrentDiagram();
+      var clickedShape = diag ? diag.shapes.find(function (s) { return s.id === draggedId; }) : null;
+      if (clickedShape && clickedShape.linkedDiagramId) {
+        var target = findDiagramById(clickedShape.linkedDiagramId, diagramsList);
+        if (target) {
+          hideLinkPicker();
+          diagNavStack.push(currentDiagramId);
+          if (diagNavStack.length > 30) diagNavStack.shift();
+          selectDiagramme(clickedShape.linkedDiagramId);
+          return;
+        }
+      } else if (clickedShape && clickedShape.externalUrl) {
+        window.open(clickedShape.externalUrl, "_blank");
+        return;
+      }
+    }
   }
   panStart = null;
 }
@@ -1431,9 +2333,11 @@ function onWheel(e) {
   applyZoom(e.deltaY < 0 ? 1.12 : 1 / 1.12, e.clientX - r.left, e.clientY - r.top);
 }
 
+
 // ── Coller des formes ──
 function pasteShapes() {
   if (clipboard.length === 0) return;
+  pushHistory();
   var diag = getCurrentDiagram();
   var now = Date.now();
   var pasted = clipboard.map(function (s, i) {
@@ -1456,14 +2360,22 @@ function pasteShapes() {
 document.addEventListener("DOMContentLoaded", function () {
   diagramsList = loadDiagrammes();
   if (!localStorage.getItem("mes_diagrammes")) saveDiagrammes();
-  var savedIdx = parseInt(localStorage.getItem("current_diagram_idx"), 10);
-  if (!isNaN(savedIdx) && savedIdx >= 0 && savedIdx < diagramsList.length) {
-    currentDiagramIdx = savedIdx;
+  var savedDiagId = localStorage.getItem("current_diagram_id");
+  if (savedDiagId && findDiagramById(savedDiagId, diagramsList)) {
+    currentDiagramId = savedDiagId;
+  } else {
+    var savedIdx = parseInt(localStorage.getItem("current_diagram_idx"), 10);
+    if (!isNaN(savedIdx) && savedIdx >= 0 && savedIdx < diagramsList.length) {
+      currentDiagramId = String(diagramsList[savedIdx].id);
+    } else {
+      currentDiagramId = diagramsList[0] ? String(diagramsList[0].id) : null;
+    }
   }
-  restoreLockForDiagram(currentDiagramIdx);
+  restoreLockForDiagram(currentDiagramId);
   checkDiffDiagrammes();
   renderAll();
   updateLockBtn();
+  updateBackBtn();
 
   var canvas = document.getElementById("canvas");
   canvas.addEventListener("mousedown", onMouseDown);
@@ -1505,6 +2417,43 @@ document.addEventListener("DOMContentLoaded", function () {
       editingShapeId = null;
       renderAll(); // restaure la visibilité du texte SVG
     }
+    if (e.key === "Tab" && editingTableCell !== null) {
+      e.preventDefault();
+      var diag = getCurrentDiagram();
+      var shape = diag.shapes.find(function (s) { return s.id === editingShapeId; });
+      if (!shape) return;
+      // Sauvegarder la cellule courante
+      if (!shape.cells) shape.cells = [];
+      while (shape.cells.length <= editingTableCell.row) shape.cells.push([]);
+      shape.cells[editingTableCell.row][editingTableCell.col] = postitInput.value;
+      var rows = shape.rows || 3;
+      var cols = shape.cols || 3;
+      var nextRow = editingTableCell.row;
+      var nextCol = editingTableCell.col;
+      if (e.shiftKey) {
+        // Shift+Tab : cellule précédente, s'arrête à la première
+        nextCol -= 1;
+        if (nextCol < 0) {
+          if (nextRow > 0) { nextRow--; nextCol = cols - 1; }
+          else { nextCol = 0; }
+        }
+      } else {
+        // Tab : cellule suivante, ajoute une ligne à la fin
+        nextCol += 1;
+        if (nextCol >= cols) { nextRow++; nextCol = 0; }
+        if (nextRow >= rows) {
+          pushHistory();
+          shape.rows = rows + 1;
+          if (!shape.cells) shape.cells = [];
+          while (shape.cells.length < shape.rows) shape.cells.push([]);
+          shape.cells[shape.rows - 1] = new Array(cols).fill("");
+        }
+      }
+      var shapeId = editingShapeId;
+      saveDiagrammes();
+      renderAll();
+      startTableCellEdit(shapeId, nextRow, nextCol);
+    }
     // Enter ajoute un saut de ligne (comportement natif textarea — pas de preventDefault)
   });
   postitInput.addEventListener("blur", function () {
@@ -1513,12 +2462,41 @@ document.addEventListener("DOMContentLoaded", function () {
 
   document.addEventListener("keydown", function (e) {
     if (document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA") return;
+    if ((e.ctrlKey || e.metaKey) && e.key === "z") { e.preventDefault(); undoAction(); return; }
+    if ((e.ctrlKey || e.metaKey) && e.key === "a") {
+      e.preventDefault();
+      var diag = getCurrentDiagram();
+      if (diag && diag.shapes.length > 0) {
+        selectedIds = diag.shapes.map(function (s) { return s.id; });
+        selectedType = "shape";
+        selectedId = selectedIds[selectedIds.length - 1];
+        renderAll();
+        document.getElementById("colorPanel").style.display = "flex";
+        syncColorPanel();
+      }
+      return;
+    }
     if (boardLocked) return;
     if (e.key === "Delete" || e.key === "Backspace") deleteSelected();
     if (e.key === "Escape") {
+      hideLinkPicker();
       arrowSrcId = null;
       document.getElementById("tempArrow").style.display = "none";
       setTool("select");
+      selectedIds = []; selectedId = null; selectedType = null;
+      document.getElementById("colorPanel").style.display = "none";
+      renderAll();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "x") {
+      e.preventDefault();
+      if (selectedIds.length === 0) return;
+      var diag = getCurrentDiagram();
+      clipboard = selectedIds.map(function (id) {
+        var s = diag.shapes.find(function (sh) { return sh.id === id; });
+        return s ? JSON.parse(JSON.stringify(s)) : null;
+      }).filter(Boolean);
+      deleteSelected();
+      return;
     }
     if ((e.ctrlKey || e.metaKey) && e.key === "c") {
       e.preventDefault();
@@ -1561,7 +2539,13 @@ document.addEventListener("DOMContentLoaded", function () {
     if (e.target === this) this.classList.remove("open");
   });
 
+
   document.addEventListener("mousedown", function (e) {
+    var lp = document.getElementById("linkPickerPanel");
+    if (lp && lp.style.display !== "none") {
+      var lbtn = document.getElementById("btnShapeLink");
+      if (!lp.contains(e.target) && e.target !== lbtn) hideLinkPicker();
+    }
     var panel = document.getElementById("diagramListPanel");
     if (!panel.classList.contains("open")) return;
     var burgerBtn = document.querySelector(".diagram-tool[onclick=\"toggleDiagramList()\"]");