living-documentation 7.39.0 → 7.41.0

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

@@ -48,15 +48,25 @@ async function _selectionToBlob() {
   const cropW = Math.ceil(br.x - tl.x + PAD * 2);
   const cropH = Math.ceil(br.y - tl.y + PAD * 2);
 
-  // Temporarily deselect so highlights don't appear in the PNG
+  // Temporarily clear every selection state so interactive chrome (selected
+  // edge color, label resize handles, anchor handles) does not appear in PNGs.
   const savedNodeIds = [...st.selectedNodeIds];
+  const savedEdgeIds = [...(st.selectedEdgeIds || [])];
+  const savedNetworkNodeIds = st.network.getSelectedNodes();
+  const savedNetworkEdgeIds = st.network.getSelectedEdges();
   st.network.unselectAll();
   st.selectedNodeIds = [];
+  st.selectedEdgeIds = [];
+  st.exportingPng = true;
   st.network.redraw();
+  await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
 
   const visCanvas = document.querySelector('#vis-canvas canvas');
   if (!visCanvas) {
-    st.network.selectNodes(savedNodeIds);
+    st.exportingPng = false;
+    st.selectedNodeIds = savedNodeIds;
+    st.selectedEdgeIds = savedEdgeIds;
+    st.network.setSelection({ nodes: savedNetworkNodeIds, edges: savedNetworkEdgeIds });
     return null;
   }
 
@@ -73,9 +83,10 @@ async function _selectionToBlob() {
     cropX * dpr, cropY * dpr, cropW * dpr, cropH * dpr,
     0, 0, out.width, out.height
   );
+  st.exportingPng = false;
 
   const blob = await new Promise((res) => out.toBlob(res, 'image/png'));
-  return { blob, savedNodeIds };
+  return { blob, savedNodeIds, savedEdgeIds, savedNetworkNodeIds, savedNetworkEdgeIds };
 }
 
 // ── Copy selection as PNG (to clipboard) ─────────────────────────────────────
@@ -83,14 +94,16 @@ async function _selectionToBlob() {
 export async function copySelectionAsPng() {
   const result = await _selectionToBlob();
   if (!result) return;
-  const { blob, savedNodeIds } = result;
+  const { blob, savedNodeIds, savedEdgeIds, savedNetworkNodeIds, savedNetworkEdgeIds } = result;
   try {
     await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
     showToast(t('diagram.toast.png_copied'));
   } catch {
     showToast(t('diagram.toast.png_copy_error'), 'error');
   } finally {
-    st.network.selectNodes(savedNodeIds);
+    st.selectedNodeIds = savedNodeIds;
+    st.selectedEdgeIds = savedEdgeIds;
+    st.network.setSelection({ nodes: savedNetworkNodeIds, edges: savedNetworkEdgeIds });
   }
 }
 
@@ -99,7 +112,7 @@ export async function copySelectionAsPng() {
 export async function saveSelectionAsPng(filename) {
   const result = await _selectionToBlob();
   if (!result) return;
-  const { blob, savedNodeIds } = result;
+  const { blob, savedNodeIds, savedEdgeIds, savedNetworkNodeIds, savedNetworkEdgeIds } = result;
   try {
     const name = filename.replace(/\.[^.]+$/, ''); // strip extension
     await uploadImageBlob(blob, 'png', name);
@@ -107,7 +120,9 @@ export async function saveSelectionAsPng(filename) {
   } catch {
     showToast(t('diagram.toast.diagram_save_png_error'), 'error');
   } finally {
-    st.network.selectNodes(savedNodeIds);
+    st.selectedNodeIds = savedNodeIds;
+    st.selectedEdgeIds = savedEdgeIds;
+    st.network.setSelection({ nodes: savedNetworkNodeIds, edges: savedNetworkEdgeIds });
   }
 }
 

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

@@ -0,0 +1,146 @@
+// ── Evidence / source consultation mode ───────────────────────────────────────
+// Shows document-provenance markers for nodes and edges that carry `evidence`.
+
+import { st } from './state.js';
+import { t }  from './t.js';
+
+function evidenceItems(item) {
+  return Array.isArray(item && item.evidence)
+    ? item.evidence.filter((e) => e && typeof e.documentId === 'string' && e.documentId.trim())
+    : [];
+}
+
+function documentHref(documentId) {
+  return '/?doc=' + encodeURIComponent(documentId);
+}
+
+function markerPositionForNode(node) {
+  if (!st.network || !node) return null;
+  const bodyNode = st.network.body.nodes[node.id];
+  if (!bodyNode) return null;
+  const w = (bodyNode.shape && bodyNode.shape.width) || node.nodeWidth || 120;
+  const h = (bodyNode.shape && bodyNode.shape.height) || node.nodeHeight || 60;
+  return st.network.canvasToDOM({ x: bodyNode.x + w / 2 - 8, y: bodyNode.y - h / 2 + 8 });
+}
+
+function markerPositionForEdge(edge) {
+  if (!st.network || !edge) return null;
+  const bbox = st.edgeLabelBBox && st.edgeLabelBBox[edge.id];
+  if (bbox) return st.network.canvasToDOM({ x: bbox.cx, y: bbox.cy });
+
+  const from = st.network.body.nodes[edge.from];
+  const to = edge.to && st.network.body.nodes[edge.to];
+  if (!from || !to) return null;
+  return st.network.canvasToDOM({ x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 });
+}
+
+function makeMarker(kind, id, pos) {
+  const marker = document.createElement('button');
+  marker.type = 'button';
+  marker.className = 'evidence-marker';
+  marker.textContent = '⌘';
+  marker.title = t('diagram.evidence.marker_title');
+  marker.setAttribute('aria-label', marker.title);
+  marker.style.left = `${Math.round(pos.x)}px`;
+  marker.style.top = `${Math.round(pos.y)}px`;
+  marker.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    showEvidencePanel(kind, id);
+  });
+  return marker;
+}
+
+export function renderEvidenceMarkers() {
+  const layer = document.getElementById('evidenceLayer');
+  if (!layer) return;
+  layer.replaceChildren();
+  layer.classList.toggle('hidden', !st.evidenceMode);
+  if (!st.evidenceMode || !st.network || !st.nodes || !st.edges) return;
+
+  for (const node of st.nodes.get()) {
+    if (!evidenceItems(node).length || node.shapeType === 'anchor') continue;
+    const pos = markerPositionForNode(node);
+    if (pos) layer.appendChild(makeMarker('node', node.id, pos));
+  }
+
+  for (const edge of st.edges.get()) {
+    if (!evidenceItems(edge).length) continue;
+    const pos = markerPositionForEdge(edge);
+    if (pos) layer.appendChild(makeMarker('edge', edge.id, pos));
+  }
+}
+
+export function bindEvidenceModeToNetwork() {
+  if (!st.network) return;
+  st.network.on('afterDrawing', renderEvidenceMarkers);
+  renderEvidenceMarkers();
+}
+
+export function initEvidenceMode() {
+  window.addEventListener('diagram:network-ready', bindEvidenceModeToNetwork);
+  document.getElementById('btnEvidenceClose')?.addEventListener('click', hideEvidencePanel);
+}
+
+export function toggleEvidenceMode() {
+  st.evidenceMode = !st.evidenceMode;
+  const btn = document.getElementById('btnEvidenceMode');
+  if (btn) btn.classList.toggle('tool-active', st.evidenceMode);
+  if (!st.evidenceMode) hideEvidencePanel();
+  renderEvidenceMarkers();
+}
+
+export function hideEvidencePanel() {
+  const panel = document.getElementById('evidencePanel');
+  if (panel) panel.classList.add('hidden');
+}
+
+function showEvidencePanel(kind, id) {
+  const panel = document.getElementById('evidencePanel');
+  const title = document.getElementById('evidencePanelTitle');
+  const body = document.getElementById('evidencePanelBody');
+  if (!panel || !title || !body) return;
+
+  const item = kind === 'node' ? st.nodes.get(id) : st.edges.get(id);
+  const entries = evidenceItems(item);
+  title.textContent = kind === 'node'
+    ? t('diagram.evidence.node_title')
+    : t('diagram.evidence.edge_title');
+  body.replaceChildren();
+
+  if (!entries.length) {
+    const empty = document.createElement('p');
+    empty.className = 'text-sm text-gray-500 dark:text-gray-400';
+    empty.textContent = t('diagram.evidence.empty');
+    body.appendChild(empty);
+  }
+
+  for (const entry of entries) {
+    const card = document.createElement('article');
+    card.className = 'rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3 space-y-2';
+
+    const link = document.createElement('a');
+    link.className = 'block text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline break-all';
+    link.href = documentHref(entry.documentId);
+    link.textContent = entry.documentId;
+    card.appendChild(link);
+
+    if (entry.section) {
+      const section = document.createElement('p');
+      section.className = 'text-xs font-medium text-gray-500 dark:text-gray-400';
+      section.textContent = `${t('diagram.evidence.section_label')}: ${entry.section}`;
+      card.appendChild(section);
+    }
+
+    if (entry.summary) {
+      const summary = document.createElement('p');
+      summary.className = 'text-sm text-gray-700 dark:text-gray-300 leading-snug';
+      summary.textContent = entry.summary;
+      card.appendChild(summary);
+    }
+
+    body.appendChild(card);
+  }
+
+  panel.classList.remove('hidden');
+}

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

@@ -21,6 +21,9 @@ function captureState() {
   const nodes = st.nodes.get().map((n) => ({
     id: n.id, label: n.label,
     shapeType: n.shapeType || 'box', colorKey: n.colorKey || 'c-gray',
+    kind: n.kind || null, renderAs: n.renderAs || null,
+    description: n.description || null,
+    evidence: Array.isArray(n.evidence) ? n.evidence : null,
     nodeWidth: n.nodeWidth || null, nodeHeight: n.nodeHeight || null,
     fontSize: n.fontSize || null, textAlign: n.textAlign || null, textValign: n.textValign || null,
     bgOpacity: n.bgOpacity ?? null,
@@ -37,6 +40,7 @@ function captureState() {
     fromPort: e.fromPort || null, toPort: e.toPort || null,
     edgeColor: e.edgeColor || null, edgeWidth: e.edgeWidth || null,
     edgeLocked: e.edgeLocked || false,
+    evidence: Array.isArray(e.evidence) ? e.evidence : null,
   }));
   return {
     nodes,

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

@@ -21,6 +21,7 @@ import { uploadImageBlob } from './image-upload.js';
 import { promptImageName } from './image-name-modal.js';
 import { showToast }       from './toast.js';
 import { t }               from './t.js';
+import { initEvidenceMode, toggleEvidenceMode } from './evidence.js';
 
 // ── Tool management ───────────────────────────────────────────────────────────
 
@@ -30,6 +31,7 @@ function setTool(tool, shape) {
 
   document.querySelectorAll('.tool-btn').forEach((b) => b.classList.remove('tool-active'));
   if (st.alignGuides) document.getElementById('btnAlign').classList.add('tool-active');
+  if (st.evidenceMode) document.getElementById('btnEvidenceMode').classList.add('tool-active');
 
   const key = tool === 'addNode' ? `addNode:${shape || st.pendingShape}` : tool;
   const btn = document.getElementById(TOOL_BTN_MAP[key]);
@@ -134,6 +136,7 @@ document.getElementById('btnDelete').addEventListener('click', deleteSelected);
 document.getElementById('btnAlign').addEventListener('click', toggleAlignGuides);
 document.getElementById('btnGrid').addEventListener('click', toggleGrid);
 document.getElementById('btnEdgeStraight').addEventListener('click', toggleEdgeStraight);
+document.getElementById('btnEvidenceMode').addEventListener('click', toggleEvidenceMode);
 document.getElementById('btnResizeMode').addEventListener('click', toggleResizeMode);
 
 document.getElementById('btnZoomOut').addEventListener('click',   () => adjustZoom(-0.2));
@@ -147,6 +150,7 @@ document.getElementById('btnNewDiagram').addEventListener('click', newDiagram);
 
 // Dirty state on title edits
 document.getElementById('diagramTitle').addEventListener('input', markDirty);
+initEvidenceMode();
 
 // ── Node panel wiring ─────────────────────────────────────────────────────────
 

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

@@ -52,11 +52,15 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   const edgeSmooth = edgesStraight ? { enabled: false } : { type: 'continuous' };
 
   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),
-      ...(n.locked ? { fixed: { x: true, y: true }, draggable: false } : {}),
-    }))
+    savedNodes.map((n) => {
+      const shapeType = n.shapeType || n.renderAs || 'box';
+      return {
+        ...n,
+        shapeType,
+        ...visNodeProps(shapeType, n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign),
+        ...(n.locked ? { fixed: { x: true, y: true }, draggable: false } : {}),
+      };
+    })
   );
   st.edges = new vis.DataSet(
     savedEdges.map((e) => {
@@ -871,6 +875,7 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     }
     st.network.redraw();
   });
+  window.dispatchEvent(new CustomEvent('diagram:network-ready'));
 }
 
 // ── Anchor snap-to-connect ────────────────────────────────────────────────────

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

@@ -679,6 +679,7 @@ function makeAnchorRenderer() {
     const r = 4;
     return {
       drawNode() {
+        if (st.exportingPng) return;
         if (!selected && !hover) return; // invisible at rest
         ctx.save();
         ctx.translate(x, y);

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

@@ -70,6 +70,7 @@ export async function openDiagram(id) {
   st.edgesStraight    = diagram.edgesStraight === true;
   document.getElementById('btnSave').disabled      = true;
   document.getElementById('diagramTitle').value    = diagram.title || '';
+  document.getElementById('evidencePanel')?.classList.add('hidden');
   document.getElementById('btnEdgeStraight').classList.toggle('tool-active', st.edgesStraight);
   applyGridState(diagram.gridEnabled ?? true);
   applyAlignGuidesState(diagram.alignGuides ?? true);
@@ -125,6 +126,9 @@ export async function saveDiagram() {
     .map((n) => ({
       id: n.id, label: n.label,
       shapeType: n.shapeType || 'box', colorKey: n.colorKey || 'c-gray',
+      kind: n.kind || null, renderAs: n.renderAs || null,
+      description: n.description || null,
+      evidence: Array.isArray(n.evidence) ? n.evidence : null,
       nodeWidth: n.nodeWidth || null, nodeHeight: n.nodeHeight || null,
       fontSize: n.fontSize || null, textAlign: n.textAlign || null, textValign: n.textValign || null,
       bgOpacity: n.bgOpacity ?? null,
@@ -145,6 +149,7 @@ export async function saveDiagram() {
     fromPort: e.fromPort || null, toPort: e.toPort || null,
     edgeColor: e.edgeColor || null, edgeWidth: e.edgeWidth || null,
     edgeLocked: e.edgeLocked || false, edgeLabelWidth: e.edgeLabelWidth || null,
+    evidence: Array.isArray(e.evidence) ? e.evidence : null,
   }));
 
   const title = document.getElementById('diagramTitle').value || t('diagram.toast.untitled');

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

@@ -123,6 +123,7 @@ export function getNearestPort(nodeId, canvasPos) {
  * `highlightedPort` (if any) is rendered larger and fully orange.
  */
 export function drawPortDots(ctx, nodeId, highlightedPort) {
+  if (st.exportingPng) return;
   for (const key of PORT_KEYS) {
     const p = getPortPosition(nodeId, key);
     if (!p) continue;
@@ -383,4 +384,3 @@ function _distToSegment(p, a, b) {
   const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len2));
   return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
 }
-

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

@@ -31,6 +31,8 @@ export const st = {
   edgeLabelCanvasPos: {}, // edgeId → {x, y} canvas coords of last drawn label, used by label editor
   edgeLabelBBox: {},     // edgeId → {cx, cy, w, h, rotation} canvas world coords, used by label resize
   freeArrowFirstPoint: null, // addEdge two-click flow: {x, y} canvas coords of first click, or null
+  exportingPng: false, // suppress interactive-only canvas chrome during PNG export
+  evidenceMode: false, // when true, show document-provenance markers on nodes/edges
 };
 
 export function markDirty() {

package/dist/src/frontend/diagram.html

@@ -252,6 +252,40 @@
         opacity: 1;
         transform: translateY(0);
       }
+
+      #evidenceLayer {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 18;
+        overflow: hidden;
+      }
+      #evidenceLayer.hidden {
+        display: none;
+      }
+      .evidence-marker {
+        position: absolute;
+        width: 1.25rem;
+        height: 1.25rem;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 999px;
+        border: 1px solid #0284c7;
+        background: #e0f2fe;
+        color: #0369a1;
+        font-size: 0.7rem;
+        font-weight: 700;
+        line-height: 1;
+        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28);
+        pointer-events: auto;
+      }
+      .dark .evidence-marker {
+        border-color: #38bdf8;
+        background: #082f49;
+        color: #e0f2fe;
+      }
     </style>
   </head>
   <body
@@ -490,6 +524,19 @@
           <polyline points="8,2 12,2 12,6" />
         </svg>
       </button>
+      <button
+        id="btnEvidenceMode"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.evidence_mode"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 1.5 H8.5 L11 4 V12.5 H4 Z" />
+          <path d="M8.5 1.5 V4 H11" />
+          <path d="M1.5 5.5 H6.5" />
+          <path d="M1.5 8 H6.5" />
+          <path d="M1.5 10.5 H5" />
+        </svg>
+      </button>
       <button
         id="btnResizeMode"
         class="tool-btn active-tool"
@@ -597,6 +644,9 @@
         <!-- Debug overlay layer -->
         <div id="debugLayer"></div>
 
+        <!-- Evidence markers layer -->
+        <div id="evidenceLayer" class="hidden"></div>
+
         <!-- Stamp overlay: intercepts canvas clicks during stamp mode -->
         <div id="stampOverlay" style="position:absolute;inset:0;display:none;z-index:11;cursor:crosshair;"></div>
 
@@ -633,6 +683,26 @@
           </div>
         </div>
 
+        <!-- Evidence panel -->
+        <aside
+          id="evidencePanel"
+          class="hidden absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] z-30 bg-gray-50 dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 shadow-xl flex flex-col"
+        >
+          <div class="flex items-center justify-between gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+            <h2
+              id="evidencePanelTitle"
+              class="text-sm font-semibold text-gray-800 dark:text-gray-100"
+              data-i18n="diagram.evidence.panel_title"
+            >Sources</h2>
+            <button
+              id="btnEvidenceClose"
+              class="tool-btn !w-7 !h-7"
+              data-i18n-title="diagram.evidence.close"
+            >×</button>
+          </div>
+          <div id="evidencePanelBody" class="flex-1 overflow-y-auto p-3 space-y-3"></div>
+        </aside>
+
         <!-- Node panel -->
         <div id="nodePanel" class="float-panel hidden">
           <button

package/dist/src/frontend/i18n/en.json

@@ -484,6 +484,15 @@
   "diagram.edge_panel.width_increase": "Increase width",
   "diagram.edge_panel.clear_ports": "Clear attachment points",
 
+  "diagram.toolbar.evidence_mode": "Source consultation mode",
+  "diagram.evidence.panel_title": "Sources",
+  "diagram.evidence.node_title": "Node sources",
+  "diagram.evidence.edge_title": "Relation sources",
+  "diagram.evidence.marker_title": "View document sources",
+  "diagram.evidence.close": "Close sources",
+  "diagram.evidence.empty": "No source attached.",
+  "diagram.evidence.section_label": "Section",
+
   "diagram.label_input.placeholder": "Label…",
   "diagram.empty_state": "Select or create a diagram",
 

package/dist/src/frontend/i18n/fr.json

@@ -484,6 +484,15 @@
   "diagram.edge_panel.width_increase": "Augmenter l'épaisseur",
   "diagram.edge_panel.clear_ports": "Supprimer les points d'attache",
 
+  "diagram.toolbar.evidence_mode": "Mode consultation des sources",
+  "diagram.evidence.panel_title": "Sources",
+  "diagram.evidence.node_title": "Sources du nœud",
+  "diagram.evidence.edge_title": "Sources de la relation",
+  "diagram.evidence.marker_title": "Voir les sources documentaires",
+  "diagram.evidence.close": "Fermer les sources",
+  "diagram.evidence.empty": "Aucune source attachée.",
+  "diagram.evidence.section_label": "Section",
+
   "diagram.label_input.placeholder": "Libellé…",
   "diagram.empty_state": "Sélectionne ou crée un diagramme",
 

package/dist/src/mcp/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/mcp/server.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,MAAM,EAAqB,MAAM,SAAS,CAAC;AAs4CpD,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CA4BlD"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/mcp/server.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,MAAM,EAAqB,MAAM,SAAS,CAAC;AAo9CpD,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CA4BlD"}