living-documentation 4.1.0 → 4.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 A CLI tool that serves a local Markdown documentation viewer in your browser.
 
-No cloud, no database, no build step — just point it at a folder of `.md` files.
+No cloud, no database, no build step — just point it at a folder where you add your project's folder documentation composed of `.md` files (ADR : Architecture Decision Records, generally).
 
 ![Node.js](https://img.shields.io/badge/Node.js-18%2B-green)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)
@@ -11,20 +11,31 @@ No cloud, no database, no build step — just point it at a folder of `.md` file
 ## Features
 
 - **Sidebar** grouped by category, sorted alphabetically by full filename
+[![README Diagrams](./images/readme-sidebar.png)](/diagram?id=d1775399110713)
+
+- **Categories Sections and General section** — Categories are extracted from the fileName pattern of your Markdown documents (that may be Architecture Decision Records ADRs).
+ExtraFiles (added in the admin section) are always first, always expanded in a `GENERAL Section` that holds uncategorized docs and extra files
+[![README Diagrams](./images/readme-filename-pattern.png)](/diagram?id=d1775399110713)
+
 - **Recursive folder scanning** — subdirectories are scanned automatically; subdirectory name becomes the category
-- **General section** — always first, always expanded; holds uncategorized docs and extra files
-- **Extra files** — include Markdown files from outside the docs folder (e.g. `README.md`, `CLAUDE.md`)
-- **Full-text search** — instant filter + server-side content search
+
+- **Extra files** — You can add custom ExtraFiles to your documentation that are outside the docs folder (e.g. `README.md`, `CLAUDE.md`) in the `Admin` Page
+[![README Diagrams](./images/readme-extra-files.png)](/diagram?id=d1775399110713)
+
 - **Dark mode** — follows system preference, manually toggleable
 - **Syntax highlighting** — always dark, high-contrast code blocks
-- **Export to PDF** — print-friendly layout via `window.print()`
-- **Deep links** — share a direct URL to any document (`?doc=…`)
-- **Admin panel** — configure title, theme, filename pattern, and extra files in the browser
+[![README Diagrams](./images/readme-code-blocks.png)](/diagram?id=d1775399110713)
+
+- **Full-text search** — instant filter + server-side content search. Returns all the files containing searched occurences, and for each file lists all the occurences, highlight them, and visit them.
+[![README Diagrams](./images/readme-intelligent-search-demo.png)](/diagram?id=d1775399110713)
+
 - **Inline editing** — edit any document directly in the browser, saves to disk instantly
 - **Image paste** — paste an image from clipboard in the editor; auto-uploaded and inserted as Markdown
+- **Export to PDF** — Export the markdown as a PDF document
+- **Diagram editor** — built-in canvas diagram editor; deep-link to any diagram in the C4 Model Style; Paste images into diagrams; Export PNG From Images; And Many more features ...
+
+- **Admin panel** — configure title, theme, filename pattern, and extra files in the browser
 - **Word Cloud** — visualise the dominant vocabulary of any folder on disk; supports `.md`, `.ts`, `.java`, `.kt`, `.py`, `.go`, `.rs`, `.cs`, `.swift`, `.rb`, `.html`, `.css`, `.yml`, `.json` and more; stop words filtered per language
-- **Diagram editor** — built-in canvas diagram editor (vis-network); deep-link to any diagram with `?id=`
-- **Zero frontend build** — Tailwind and highlight.js loaded from CDN
 
 ---
 
@@ -222,4 +233,4 @@ The compiled package is self-contained inside `dist/`. Only `dist/` is included
 
 ## License
 
-MIT
+MIT

package/dist/src/frontend/diagram/image-name-modal.js

@@ -0,0 +1,48 @@
+// ── Image filename modal ───────────────────────────────────────────────────────
+// Returns a Promise<string|null>:
+//   string (possibly empty) → user confirmed (empty = use auto name)
+//   null                    → user cancelled
+
+const IMAGE_NAME_RE = /^[a-z0-9_-]*$/i;
+
+export function promptImageName() {
+  return new Promise((resolve) => {
+    const modal   = document.getElementById('imageNameModal');
+    const input   = document.getElementById('imageNameInput');
+    const error   = document.getElementById('imageNameError');
+    const confirm = document.getElementById('imageNameConfirm');
+    const cancel  = document.getElementById('imageNameCancel');
+
+    input.value = '';
+    error.classList.add('hidden');
+    modal.style.display = 'flex';
+    setTimeout(() => input.focus(), 50);
+
+    function validate() {
+      const val = input.value.trim();
+      const ok  = val === '' || IMAGE_NAME_RE.test(val);
+      error.classList.toggle('hidden', ok);
+      return ok;
+    }
+
+    function close(name) {
+      modal.style.display = 'none';
+      confirm.removeEventListener('click',  onConfirm);
+      cancel.removeEventListener('click',   onCancel);
+      input.removeEventListener('input',    validate);
+      input.removeEventListener('keydown',  onKey);
+      resolve(name);
+    }
+    function onConfirm() { if (validate()) close(input.value.trim()); }
+    function onCancel()  { close(null); }
+    function onKey(e) {
+      if (e.key === 'Enter')  { e.preventDefault(); if (validate()) close(input.value.trim()); }
+      if (e.key === 'Escape') { e.preventDefault(); close(null); }
+    }
+
+    confirm.addEventListener('click',  onConfirm);
+    cancel.addEventListener('click',   onCancel);
+    input.addEventListener('input',    validate);
+    input.addEventListener('keydown',  onKey);
+  });
+}

package/dist/src/frontend/diagram/image-upload.js

@@ -11,22 +11,24 @@ async function toBase64(blob) {
   });
 }
 
-export async function uploadImageFile(file) {
+export async function uploadImageFile(file, name = '') {
   const ext    = (file.name.split('.').pop() || 'png').toLowerCase();
   const base64 = await toBase64(file);
-  return _upload(base64, ext);
+  return _upload(base64, ext, name);
 }
 
-export async function uploadImageBlob(blob, ext = 'png') {
+export async function uploadImageBlob(blob, ext = 'png', name = '') {
   const base64 = await toBase64(blob);
-  return _upload(base64, ext);
+  return _upload(base64, ext, name);
 }
 
-async function _upload(base64, ext) {
+async function _upload(base64, ext, name = '') {
+  const body = { data: base64, ext };
+  if (name) body.name = name;
   const res  = await fetch('/api/images/upload', {
     method:  'POST',
     headers: { 'Content-Type': 'application/json' },
-    body:    JSON.stringify({ data: base64, ext }),
+    body:    JSON.stringify(body),
   });
   if (!res.ok) throw new Error('Upload failed');
   const { filename } = await res.json();

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

@@ -14,8 +14,9 @@ import { toggleDebug }   from './debug.js';
 import { adjustZoom, resetZoom } from './zoom.js';
 import { loadDiagramList, newDiagram, saveDiagram } from './persistence.js';
 import { copySelected, pasteClipboard, copySelectionAsPng } from './clipboard.js';
-import { createImageNode } from './network.js';
+import { createImageNode, toggleEdgeStraight } from './network.js';
 import { uploadImageBlob } from './image-upload.js';
+import { promptImageName } from './image-name-modal.js';
 import { showToast }       from './toast.js';
 
 // ── Tool management ───────────────────────────────────────────────────────────
@@ -90,6 +91,7 @@ document.getElementById('toolArrow').addEventListener('click',    () => setTool(
 document.getElementById('btnDelete').addEventListener('click', deleteSelected);
 document.getElementById('btnPhysics').addEventListener('click', togglePhysics);
 document.getElementById('btnGrid').addEventListener('click', toggleGrid);
+document.getElementById('btnEdgeStraight').addEventListener('click', toggleEdgeStraight);
 
 document.getElementById('btnZoomOut').addEventListener('click',   () => adjustZoom(-0.2));
 document.getElementById('btnZoomIn').addEventListener('click',    () => adjustZoom(0.2));
@@ -158,7 +160,7 @@ document.addEventListener('keydown', (e) => {
   if ((e.metaKey || e.ctrlKey) && e.key === 'a')             { e.preventDefault(); selectAll();       return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 'c' && e.shiftKey) { e.preventDefault(); copySelectionAsPng(); return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 'c')               { e.preventDefault(); copySelected();       return; }
-  if ((e.metaKey || e.ctrlKey) && e.key === 'v')             { e.preventDefault(); pasteClipboard();  return; }
+  // Cmd+V is handled in the 'paste' event below (needs clipboardData access)
   if ((e.metaKey || e.ctrlKey) && e.key === 's')             { e.preventDefault(); saveDiagram();     return; }
   if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); hideLinkPanel(); setTool('select'); return; }
   if (e.key === 'r' || e.key === 'R')  { setTool('addNode', 'box');      return; }
@@ -172,25 +174,37 @@ document.addEventListener('keydown', (e) => {
   if (e.key === 'g' || e.key === 'G')  { toggleGrid();                   return; }
 });
 
-// ── Paste image from clipboard ────────────────────────────────────────────────
+// ── Paste (image or shapes) ───────────────────────────────────────────────────
 document.addEventListener('paste', async (e) => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   if (!st.network) return;
-  const items = Array.from(e.clipboardData.items || []);
-  const imageItem = items.find((it) => it.type.startsWith('image/'));
-  if (!imageItem) return;
   e.preventDefault();
-  const blob = imageItem.getAsFile();
-  if (!blob) return;
-  const ext = imageItem.type.split('/')[1] || 'png';
-  try {
-    const src = await uploadImageBlob(blob, ext);
-    // Place at centre of current viewport
-    const center = st.network.getViewPosition();
-    createImageNode(src, center.x, center.y);
-    showToast('Image ajoutée');
-  } catch {
-    showToast('Impossible d\'importer l\'image', 'error');
+
+  const items     = Array.from(e.clipboardData?.items || []);
+  const imageItem = items.find((it) => it.type.startsWith('image/'));
+
+  if (imageItem) {
+    const blob = imageItem.getAsFile();
+    if (!blob) return;
+    const ext = imageItem.type.split('/')[1] || 'png';
+
+    const name = await promptImageName();
+    if (name === null) return; // user cancelled
+
+    try {
+      const src = await uploadImageBlob(blob, ext, name);
+      const center = st.network.getViewPosition();
+      createImageNode(src, center.x, center.y);
+      showToast('Image ajoutée');
+      // Clear system clipboard so the next Cmd+V pastes shapes, not the image again
+      // (our Cmd+C only writes to st.clipboard, not the system clipboard)
+      navigator.clipboard.writeText('').catch(() => {});
+    } catch {
+      showToast('Impossible d\'importer l\'image', 'error');
+    }
+  } else {
+    // No image — paste shapes from internal clipboard
+    pasteClipboard();
   }
 });
 

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

@@ -5,6 +5,7 @@
 import { st, markDirty } from './state.js';
 import { visNodeProps, SHAPE_DEFAULTS }   from './node-rendering.js';
 import { uploadImageFile } from './image-upload.js';
+import { promptImageName } from './image-name-modal.js';
 import { showToast }       from './toast.js';
 import { visEdgeProps }   from './edge-rendering.js';
 import { showNodePanel, hideNodePanel } from './node-panel.js';
@@ -17,9 +18,11 @@ import { updateZoomDisplay }   from './zoom.js';
 import { expandSelectionToGroup, drawGroupOutlines } from './groups.js';
 import { navigateNodeLink, hideLinkPanel }           from './link-panel.js';
 
-export function initNetwork(savedNodes, savedEdges) {
+export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   const container = document.getElementById('vis-canvas');
 
+  const edgeSmooth = edgesStraight ? { enabled: false } : { type: 'continuous' };
+
   st.nodes = new vis.DataSet(
     savedNodes.map((n) => ({
       ...n,
@@ -27,11 +30,16 @@ export function initNetwork(savedNodes, savedEdges) {
     }))
   );
   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' } } : {}),
-    }))
+    savedEdges.map((e) => {
+      const toNode = savedNodes.find((n) => n.id === e.to);
+      const isAnchor = toNode && toNode.shapeType === 'anchor';
+      return {
+        ...e,
+        ...visEdgeProps(e.arrowDir ?? 'to', e.dashes ?? false),
+        smooth: isAnchor ? { enabled: false } : edgeSmooth,
+        ...(e.fontSize ? { font: { size: e.fontSize, align: 'middle', color: '#6b7280' } } : {}),
+      };
+    })
   );
 
   const options = {
@@ -42,7 +50,7 @@ export function initNetwork(savedNodes, savedEdges) {
     },
     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' } },
+    edges: { smooth: edgeSmooth, 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) {
@@ -81,16 +89,70 @@ export function initNetwork(savedNodes, savedEdges) {
     for (const edgeId of Object.keys(bodyEdges)) {
       const edge = bodyEdges[edgeId];
       if (!edge.connected) continue;
-      const level = Math.min(orderMap.get(edge.fromId) ?? 0, orderMap.get(edge.toId) ?? 0);
+      // Edges are drawn just before the node at their assigned level, so they
+      // appear on top of all nodes below that level.
+      // Use Math.max so the edge follows the higher-z endpoint — it stays visible
+      // above any intermediate nodes between the two endpoints.
+      // Anchor nodes are floating endpoints that must not raise the edge above the
+      // real source: for anchor edges, use the non-anchor endpoint's level.
+      const fromData = st.nodes.get(edge.fromId);
+      const toData   = st.nodes.get(edge.toId);
+      const fromIsAnchor = fromData && fromData.shapeType === 'anchor';
+      const toIsAnchor   = toData   && toData.shapeType   === 'anchor';
+      let level;
+      if (toIsAnchor && !fromIsAnchor) {
+        level = orderMap.get(edge.fromId) ?? 0;
+      } else if (fromIsAnchor && !toIsAnchor) {
+        level = orderMap.get(edge.toId) ?? 0;
+      } else {
+        level = Math.min(orderMap.get(edge.fromId) ?? 0, orderMap.get(edge.toId) ?? 0);
+      }
       if (!edgesByLevel.has(level)) edgesByLevel.set(level, []);
       edgesByLevel.get(level).push(edge);
     }
 
+    // Build a map: anchorId → the edge(s) that connect to it, so we can draw
+    // each anchor dot AFTER its edge (giving the "planted arrowhead" effect).
+    const anchorEdgeLevel = new Map(); // anchorId → level at which its edge is drawn
+    for (const [level, edges] of edgesByLevel) {
+      for (const edge of edges) {
+        const fromData = st.nodes.get(edge.fromId);
+        const toData   = st.nodes.get(edge.toId);
+        if (toData   && toData.shapeType   === 'anchor') anchorEdgeLevel.set(edge.toId,   level);
+        if (fromData && fromData.shapeType === 'anchor') anchorEdgeLevel.set(edge.fromId, level);
+      }
+    }
+
+    // Anchors with no connected edge are drawn at level 0 (bottom).
+    for (const id of st.canonicalOrder) {
+      const n = st.nodes.get(id);
+      if (!n || n.shapeType !== 'anchor') continue;
+      if (!anchorEdgeLevel.has(id)) anchorEdgeLevel.set(id, 0);
+    }
+
     for (let i = 0; i < st.canonicalOrder.length; i++) {
-      const id   = st.canonicalOrder[i];
-      // Draw edges whose topmost node is at this level, before drawing the node.
+      const id = st.canonicalOrder[i];
+      const n  = st.nodes.get(id);
+
+      // Draw edges whose level is i, before drawing the node at level i.
       const edges = edgesByLevel.get(i);
-      if (edges) edges.forEach((e) => e.draw(ctx));
+      if (edges) {
+        edges.forEach((e) => e.draw(ctx));
+        // Draw any anchor whose edge was just drawn, so the dot appears on top.
+        for (const [anchorId, level] of anchorEdgeLevel) {
+          if (level !== i) continue;
+          const anchorNode = bodyNodes[anchorId];
+          if (!anchorNode) continue;
+          if (alwaysShow === true || anchorNode.isBoundingBoxOverlappingWith(viewableArea) === true) {
+            anchorNode.draw(ctx);
+          } else {
+            anchorNode.updateBoundingBox(ctx, anchorNode.selected);
+          }
+        }
+      }
+
+      // Skip anchor nodes here — they were drawn right after their edge above.
+      if (n && n.shapeType === 'anchor') continue;
 
       const node = bodyNodes[id];
       if (!node) continue;
@@ -115,9 +177,30 @@ export function initNetwork(savedNodes, savedEdges) {
     const existing = new Set(st.canonicalOrder);
     items.forEach((id) => { if (!existing.has(id)) st.canonicalOrder.push(id); });
   });
-  st.nodes.on('remove', (_, { items }) => {
+  st.nodes.on('remove', (_, { items, oldData }) => {
     const removed = new Set(items);
     st.canonicalOrder = st.canonicalOrder.filter((id) => !removed.has(id));
+    // If an anchor was deleted directly, also remove its connected edges.
+    (oldData || []).forEach((n) => {
+      if (n.shapeType !== 'anchor') return;
+      const connected = st.edges.get({ filter: (e) => e.from === n.id || e.to === n.id });
+      if (connected.length) st.edges.remove(connected.map((e) => e.id));
+    });
+  });
+
+  // When an edge is removed, delete any anchor node that has no remaining edges.
+  st.edges.on('remove', (_, { oldData }) => {
+    const anchorsToCheck = new Set();
+    (oldData || []).forEach((edge) => {
+      const toData   = st.nodes.get(edge.to);
+      const fromData = st.nodes.get(edge.from);
+      if (toData   && toData.shapeType   === 'anchor') anchorsToCheck.add(edge.to);
+      if (fromData && fromData.shapeType === 'anchor') anchorsToCheck.add(edge.from);
+    });
+    anchorsToCheck.forEach((anchorId) => {
+      const remaining = st.edges.get({ filter: (e) => e.from === anchorId || e.to === anchorId });
+      if (remaining.length === 0) st.nodes.remove(anchorId);
+    });
   });
 
   st.network.on('click',        onClickNode);
@@ -134,6 +217,41 @@ export function initNetwork(savedNodes, savedEdges) {
   st.network.on('afterDrawing',  (ctx) => drawGroupOutlines(ctx));
   st.network.on('afterDrawing',  () => drawDebugOverlay());
 
+  // ── Free-floating edge: drop on empty canvas creates an anchor node ──────────
+  // vis-network only fires addEdge callback when dropping on an existing node.
+  // We intercept mousedown (capture source) + mouseup (detect empty-canvas drop).
+  let _addEdgeFromId = null;
+  const visCanvas = document.getElementById('vis-canvas');
+
+  visCanvas.addEventListener('mousedown', (e) => {
+    if (st.currentTool !== 'addEdge') return;
+    _addEdgeFromId = st.network.getNodeAt({ x: e.offsetX, y: e.offsetY }) || null;
+  });
+
+  visCanvas.addEventListener('mouseup', (e) => {
+    if (st.currentTool !== 'addEdge' || !_addEdgeFromId) { _addEdgeFromId = null; return; }
+    const pos = { x: e.offsetX, y: e.offsetY };
+    if (!st.network.getNodeAt(pos)) {
+      const cp       = st.network.DOMtoCanvas(pos);
+      const anchorId = 'a' + Date.now();
+      st.nodes.add({
+        id: anchorId, label: '', shapeType: 'anchor', colorKey: 'c-gray',
+        nodeWidth: 8, nodeHeight: 8, fontSize: null, rotation: 0, labelRotation: 0,
+        x: cp.x, y: cp.y,
+        ...visNodeProps('anchor', 'c-gray', 8, 8, null, null, null),
+      });
+      st.edges.add({
+        id: 'e' + Date.now(), from: _addEdgeFromId, to: anchorId,
+        arrowDir: 'to', dashes: false,
+        smooth: { enabled: false },
+        ...visEdgeProps('to', false),
+      });
+      markDirty();
+      setTimeout(() => st.network.addEdgeMode(), 0);
+    }
+    _addEdgeFromId = null;
+  });
+
   document.getElementById('emptyState').classList.add('hidden');
   updateZoomDisplay();
 }
@@ -184,8 +302,10 @@ function pickAndCreateImageNode(canvasX, canvasY) {
   input.onchange = async () => {
     const file = input.files && input.files[0];
     if (!file) return;
+    const name = await promptImageName();
+    if (name === null) return; // user cancelled
     try {
-      const src = await uploadImageFile(file);
+      const src = await uploadImageFile(file, name);
       createImageNode(src, canvasX, canvasY);
     } catch {
       showToast('Impossible d\'importer l\'image', 'error');
@@ -196,27 +316,96 @@ function pickAndCreateImageNode(canvasX, canvasY) {
 
 export function createImageNode(imageSrc, canvasX, canvasY) {
   if (!st.network) return;
-  const id = 'n' + Date.now();
-  const defaults = SHAPE_DEFAULTS['image'];
-  st.nodes.add({
-    id, label: '', imageSrc,
-    shapeType: 'image', colorKey: 'c-gray',
-    nodeWidth: defaults[0], nodeHeight: defaults[1],
-    fontSize: null, rotation: 0, labelRotation: 0,
-    x: canvasX, y: canvasY,
-    ...visNodeProps('image', 'c-gray', defaults[0], defaults[1], null, null, null),
+  const id      = 'n' + Date.now();
+  const captionId = id + 'c';
+
+  const addNode = (nW, nH) => {
+    const filename   = imageSrc.split('/').pop() || '';
+    const textDefs   = SHAPE_DEFAULTS['text-free'];
+    const captionH   = textDefs[1];
+    const GAP        = 8;
+
+    const groupId = 'g' + Date.now();
+    st.nodes.add({
+      id, label: '', imageSrc, groupId,
+      shapeType: 'image', colorKey: 'c-gray',
+      nodeWidth: nW, nodeHeight: nH,
+      fontSize: null, rotation: 0, labelRotation: 0,
+      x: canvasX, y: canvasY,
+      ...visNodeProps('image', 'c-gray', nW, nH, null, null, null),
+    });
+    st.nodes.add({
+      id: captionId, label: filename, groupId,
+      shapeType: 'text-free', colorKey: 'c-gray',
+      nodeWidth: nW, nodeHeight: captionH,
+      fontSize: null, rotation: 0, labelRotation: 0,
+      x: canvasX, y: canvasY + nH / 2 + GAP + captionH / 2,
+      ...visNodeProps('text-free', 'c-gray', nW, captionH, null, null, null),
+    });
+    markDirty();
+    setTimeout(() => {
+      st.network.selectNodes([id]);
+      st.selectedNodeIds = [id];
+      showNodePanel();
+    }, 50);
+  };
+
+  const img = new Image();
+  img.onload = () => {
+    const MAX = 300;
+    const ratio = img.naturalWidth / img.naturalHeight;
+    let nW = img.naturalWidth, nH = img.naturalHeight;
+    if (nW > MAX) { nW = MAX; nH = Math.round(MAX / ratio); }
+    addNode(nW, nH);
+  };
+  img.onerror = () => {
+    const d = SHAPE_DEFAULTS['image'];
+    addNode(d[0], d[1]);
+  };
+  img.src = imageSrc;
+}
+
+// ── Edge straight / curved toggle ────────────────────────────────────────────
+export function toggleEdgeStraight() {
+  if (!st.network) return;
+  st.edgesStraight = !st.edgesStraight;
+  const smooth = st.edgesStraight ? { enabled: false } : { type: 'continuous' };
+  // Update global network option first (overrides per-edge inherited defaults).
+  st.network.setOptions({ edges: { smooth } });
+  // Then update each edge individually, keeping anchor edges always straight.
+  const updates = st.edges.get().map((e) => {
+    const toData = st.nodes.get(e.to);
+    const s = (toData && toData.shapeType === 'anchor') ? { enabled: false } : smooth;
+    return { id: e.id, smooth: s };
   });
+  if (updates.length) st.edges.update(updates);
+  document.getElementById('btnEdgeStraight').classList.toggle('tool-active', st.edgesStraight);
   markDirty();
-  setTimeout(() => {
-    st.network.selectNodes([id]);
-    st.selectedNodeIds = [id];
-    showNodePanel();
-  }, 50);
 }
 
 function onClickNode(params) {
   if (params.nodes.length === 1 && params.event.srcEvent.shiftKey) {
     navigateNodeLink(params.nodes[0]);
+    return;
+  }
+  // Anchor nodes have nodeDimensions=0 so vis-network cannot detect clicks on
+  // them. Manually check proximity (8px threshold in canvas space).
+  if (params.nodes.length === 0 && params.edges.length === 0) {
+    const cp        = params.pointer.canvas;
+    const THRESHOLD = 8;
+    const anchors   = st.nodes.get({ filter: (n) => n.shapeType === 'anchor' });
+    const positions = st.network.getPositions(anchors.map((a) => a.id));
+    for (const anchor of anchors) {
+      const pos = positions[anchor.id];
+      if (!pos) continue;
+      const dx = cp.x - pos.x, dy = cp.y - pos.y;
+      if (Math.sqrt(dx * dx + dy * dy) <= THRESHOLD) {
+        st.network.selectNodes([anchor.id]);
+        st.selectedNodeIds = [anchor.id];
+        showNodePanel();
+        return;
+      }
+    }
   }
 }