living-ai-documentation 1.0.0

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

@@ -0,0 +1,293 @@
+// ── Edge panel ────────────────────────────────────────────────────────────────
+// Floating formatting toolbar for selected edges (arrow type, line style, font size).
+
+import { st, markDirty } from './state.js';
+import { visEdgeProps }  from './edge-rendering.js';
+import { pushSnapshot }  from './history.js';
+import { t }             from './t.js';
+
+const DEFAULT_EDGE_COLOR = '#a8a29e';
+const FREE_ARROW_STYLE_KEY = 'ld-free-arrow-style';
+
+// Persist the style of the first free arrow (anchor→anchor) in the current
+// selection so the next double-click creation reuses it.
+function persistFreeArrowStyle() {
+  const freeId = st.selectedEdgeIds.find((id) => {
+    const e = st.edges.get(id);
+    if (!e) return false;
+    const fromN = st.nodes && st.nodes.get(e.from);
+    const toN   = st.nodes && st.nodes.get(e.to);
+    return fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  });
+  if (!freeId) return;
+  const e = st.edges.get(freeId);
+  localStorage.setItem(FREE_ARROW_STYLE_KEY, JSON.stringify({
+    arrowDir:  e.arrowDir  || 'to',
+    dashes:    e.dashes    || false,
+    edgeColor: e.edgeColor || null,
+    edgeWidth: e.edgeWidth || null,
+  }));
+}
+
+export function getLastFreeArrowStyle() {
+  try { return JSON.parse(localStorage.getItem(FREE_ARROW_STYLE_KEY)) || {}; }
+  catch { return {}; }
+}
+
+function isEdgeLocked(edge) {
+  if (!edge) return false;
+  const fromN = st.nodes && st.nodes.get(edge.from);
+  const toN   = st.nodes && st.nodes.get(edge.to);
+  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  return isFreeArrow ? !!(fromN.locked && toN.locked) : !!edge.edgeLocked;
+}
+
+function selectedEdgeLockState() {
+  const edgeIds = (st.selectedEdgeIds || []).filter((id) => st.edges && st.edges.get(id));
+  if (!edgeIds.length) return { allLocked: false, edgeIds };
+  return {
+    allLocked: edgeIds.every((id) => isEdgeLocked(st.edges.get(id))),
+    edgeIds,
+  };
+}
+
+function syncEdgeLockButton() {
+  const btn = document.getElementById('btnEdgeLock');
+  if (!btn) return;
+  const { allLocked } = selectedEdgeLockState();
+  btn.textContent = allLocked ? '🔓' : '🔒';
+  btn.title = t(allLocked ? 'diagram.edge_panel.unlock' : 'diagram.edge_panel.lock');
+  btn.setAttribute('aria-label', btn.title);
+  btn.classList.toggle('tool-active', allLocked);
+}
+
+function setEdgeLocked(edge, locked) {
+  if (!edge) return;
+  const fromN = st.nodes && st.nodes.get(edge.from);
+  const toN   = st.nodes && st.nodes.get(edge.to);
+  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  if (isFreeArrow) {
+    [edge.from, edge.to].forEach((nodeId) => {
+      st.nodes.update({ id: nodeId, locked, fixed: locked ? { x: true, y: true } : false, draggable: !locked });
+      const bn = st.network && st.network.body.nodes[nodeId];
+      if (bn) bn.refreshNeeded = true;
+    });
+  } else {
+    st.edges.update({ id: edge.id, edgeLocked: locked });
+  }
+}
+
+export function showEdgePanel() {
+  if (!st.selectedEdgeIds.length) return;
+  const e = st.edges.get(st.selectedEdgeIds[0]);
+  if (!e) return;
+
+  syncEdgeLockButton();
+  document.getElementById('edgePanelControls').classList.remove('hidden');
+
+  const dir    = e.arrowDir ?? 'to';
+  const dashes = e.dashes   ?? false;
+
+  ['edgeBtnNone', 'edgeBtnFrom', 'edgeBtnTo', 'edgeBtnBoth'].forEach((id) =>
+    document.getElementById(id).classList.remove('edge-btn-active'));
+  document.getElementById({ none: 'edgeBtnNone', from: 'edgeBtnFrom', to: 'edgeBtnTo', both: 'edgeBtnBoth' }[dir] || 'edgeBtnTo')
+    .classList.add('edge-btn-active');
+
+  ['edgeBtnSolid', 'edgeBtnDashed'].forEach((id) =>
+    document.getElementById(id).classList.remove('edge-btn-active'));
+  document.getElementById(dashes ? 'edgeBtnDashed' : 'edgeBtnSolid').classList.add('edge-btn-active');
+
+  // Highlight active color dot.
+  const activeColor = (e.edgeColor || DEFAULT_EDGE_COLOR).toLowerCase();
+  document.querySelectorAll('#edgePanel [data-edge-color]').forEach((btn) => {
+    const isActive = btn.dataset.edgeColor.toLowerCase() === activeColor;
+    btn.style.outline       = isActive ? '2px solid #f97316' : '';
+    btn.style.outlineOffset = isActive ? '2px' : '';
+  });
+
+  // Show/hide the clear-ports button based on whether this edge has ports.
+  const hasPorts = !!(e.fromPort || e.toPort);
+  document.getElementById('btnEdgeClearPorts').classList.toggle('edge-btn-active', hasPorts);
+
+  document.getElementById('edgePanel').classList.remove('hidden');
+}
+
+export function toggleEdgeLock() {
+  const { allLocked, edgeIds } = selectedEdgeLockState();
+  if (!edgeIds.length) return;
+  const nextLocked = !allLocked;
+  pushSnapshot();
+  edgeIds.forEach((id) => setEdgeLocked(st.edges.get(id), nextLocked));
+  if (st.network) {
+    st.network.redraw();
+    if (nextLocked) st.network.unselectAll();
+  }
+  if (nextLocked) {
+    st.selectedNodeIds = [];
+    st.selectedEdgeIds = [];
+    hideEdgePanel();
+  } else {
+    syncEdgeLockButton();
+  }
+  markDirty();
+}
+
+export function resetEdgeLabelWidth() {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    st.edges.update({ id, edgeLabelWidth: null });
+  });
+  markDirty();
+}
+
+export function clearEdgePorts() {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const color = e.edgeColor || DEFAULT_EDGE_COLOR;
+    // Restore vis-network's default edge rendering, preserving custom color/width.
+    st.edges.update({
+      id,
+      fromPort: null,
+      toPort: null,
+      color: { color, highlight: '#f97316', hover: '#f97316' },
+      width: e.edgeWidth || 1.5,
+      ...visEdgeProps(e.arrowDir ?? 'to', e.dashes ?? false),
+    });
+  });
+  showEdgePanel();
+  markDirty();
+}
+
+export function setEdgeColor(hex) {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const update = { id, edgeColor: hex };
+    // For non-port edges, also update vis-network's native color property.
+    if (!(e.fromPort || e.toPort)) {
+      update.color = { color: hex, highlight: '#f97316', hover: '#f97316' };
+    }
+    st.edges.update(update);
+  });
+  persistFreeArrowStyle();
+  showEdgePanel();
+  markDirty();
+}
+
+export function changeEdgeWidth(delta) {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const newWidth = Math.max(1, Math.min(8, (e.edgeWidth || 1.5) + delta));
+    const update = { id, edgeWidth: newWidth };
+    // For non-port edges, also update vis-network's native width property.
+    if (!(e.fromPort || e.toPort)) {
+      update.width = newWidth;
+    }
+    st.edges.update(update);
+  });
+  persistFreeArrowStyle();
+  markDirty();
+}
+
+export function hideEdgePanel() {
+  document.getElementById('edgePanel').classList.add('hidden');
+}
+
+export function setEdgeArrow(dir) {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const update = { id, arrowDir: dir };
+    // For port edges, vis-network arrows stay disabled; drawPortEdge handles them.
+    if (!(e.fromPort || e.toPort)) Object.assign(update, visEdgeProps(dir, e.dashes ?? false));
+    st.edges.update(update);
+  });
+  persistFreeArrowStyle();
+  showEdgePanel();
+  markDirty();
+}
+
+export function setEdgeDashes(dashes) {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const update = { id, dashes };
+    // For port edges, vis-network arrows stay disabled; drawPortEdge handles them.
+    if (!(e.fromPort || e.toPort)) Object.assign(update, visEdgeProps(e.arrowDir ?? 'to', dashes));
+    st.edges.update(update);
+  });
+  persistFreeArrowStyle();
+  showEdgePanel();
+  markDirty();
+}
+
+export function changeEdgeFontSize(delta) {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const newSize = Math.max(8, Math.min(48, (e.fontSize || 11) + delta));
+    // Keep native label transparent — drawEdgeLabels() is the single render path.
+    st.edges.update({ id, fontSize: newSize, font: { size: newSize, align: 'middle', color: 'rgba(0,0,0,0)' } });
+  });
+  markDirty();
+}
+
+export function stepEdgeLabelRotation(delta) {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    const newRotation = (e.labelRotation || 0) + delta;
+    // Keep native label transparent — drawEdgeLabels() is the single render path.
+    st.edges.update({
+      id,
+      labelRotation: newRotation,
+      font: { size: e.fontSize || 11, align: 'middle', color: 'rgba(0,0,0,0)' },
+    });
+  });
+  markDirty();
+}
+
+const LABEL_OFFSET_STEP = 5;
+
+export function stepEdgeLabelOffset(dx, dy) {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    const e = st.edges.get(id);
+    if (!e) return;
+    st.edges.update({
+      id,
+      edgeLabelOffsetX: (e.edgeLabelOffsetX || 0) + dx * LABEL_OFFSET_STEP,
+      edgeLabelOffsetY: (e.edgeLabelOffsetY || 0) + dy * LABEL_OFFSET_STEP,
+    });
+  });
+  if (st.network) st.network.redraw();
+  markDirty();
+}
+
+export function resetEdgeLabelOffset() {
+  if (!st.selectedEdgeIds.length) return;
+  pushSnapshot();
+  st.selectedEdgeIds.forEach((id) => {
+    st.edges.update({ id, edgeLabelOffsetX: 0, edgeLabelOffsetY: 0 });
+  });
+  if (st.network) st.network.redraw();
+  markDirty();
+}

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

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

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/grid.js

@@ -0,0 +1,78 @@
+// ── Grid & snap ───────────────────────────────────────────────────────────────
+// Grid rendering (beforeDrawing), snap-to-grid (dragEnd).
+
+import { st, markDirty }    from './state.js';
+import { GRID_SIZE }         from './constants.js';
+import { t }                 from './t.js';
+import { pushSnapshot }      from './history.js';
+import { snapToAlignGuides } from './alignment.js';
+
+
+
+export function applyGridState(enabled) {
+  st.gridEnabled = enabled;
+  const btn = document.getElementById('btnGrid');
+  btn.classList.toggle('tool-active', enabled);
+  btn.title = t('diagram.toolbar.grid');
+}
+
+export function toggleGrid() {
+  applyGridState(!st.gridEnabled);
+  markDirty();
+  if (st.network) st.network.redraw();
+}
+
+// Called on network "beforeDrawing" — draws grid lines in physical pixel space.
+export function drawGrid(ctx) {
+  if (!st.gridEnabled || !st.network) return;
+  const isDark = document.documentElement.classList.contains('dark');
+  const color  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.15)';
+  const scale  = st.network.getScale();
+  const center = st.network.getViewPosition();
+  const canvas = ctx.canvas;
+  const W = canvas.width, H = canvas.height;
+
+  // vis.js coordinates (center.x, scale) are in CSS pixels; must multiply by DPR
+  // so the grid aligns correctly on Retina/HiDPI displays.
+  const dpr    = window.devicePixelRatio || 1;
+  const step   = GRID_SIZE * scale * dpr;
+  const offsetX = (((W / 2 - center.x * scale * dpr) % step) + step) % step;
+  const offsetY = (((H / 2 - center.y * scale * dpr) % step) + step) % step;
+
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0); // physical pixel space
+  ctx.strokeStyle = color;
+  ctx.lineWidth   = 1;
+  ctx.beginPath();
+  for (let x = offsetX; x < W; x += step) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
+  for (let y = offsetY; y < H; y += step) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
+  ctx.stroke();
+  ctx.restore();
+}
+
+// Snap a canvas position to the nearest grid intersection.
+export function snapToGrid(x, y) {
+  return {
+    x: Math.round(x / GRID_SIZE) * GRID_SIZE,
+    y: Math.round(y / GRID_SIZE) * GRID_SIZE,
+  };
+}
+
+// Called on network "dragEnd" — alignment snap, then grid snap.
+export function onDragEnd(params) {
+  if (!params.nodes || !params.nodes.length) return;
+  pushSnapshot();
+  snapToAlignGuides(params);
+  if (st.gridEnabled) {
+    params.nodes.forEach((id) => {
+      const bodyNode = st.network.body.nodes[id];
+      if (!bodyNode) return;
+      const cx = bodyNode.x, cy = bodyNode.y;
+      // Snap the center of the shape to grid intersections
+      const snappedX = Math.round(cx / GRID_SIZE) * GRID_SIZE;
+      const snappedY = Math.round(cy / GRID_SIZE) * GRID_SIZE;
+      st.network.moveNode(id, snappedX, snappedY);
+    });
+  }
+  markDirty();
+}

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

@@ -0,0 +1,102 @@
+// ── Group management ──────────────────────────────────────────────────────────
+
+import { st, markDirty } from './state.js';
+import { pushSnapshot }  from './history.js';
+import { SHAPE_DEFAULTS } from './node-rendering.js';
+
+// ── Create / destroy ──────────────────────────────────────────────────────────
+
+export function groupNodes() {
+  if (st.selectedNodeIds.length < 2) return;
+  pushSnapshot();
+  const groupId = 'g' + Date.now();
+  st.selectedNodeIds.forEach((id) => st.nodes.update({ id, groupId }));
+  markDirty();
+}
+
+export function ungroupNodes() {
+  if (!st.selectedNodeIds.length) return;
+  pushSnapshot();
+  // Collect all members of any group touched by the selection
+  const groupIds = new Set(
+    st.selectedNodeIds.map((id) => { const n = st.nodes.get(id); return n && n.groupId; }).filter(Boolean)
+  );
+  st.nodes.get().forEach((n) => {
+    if (n.groupId && groupIds.has(n.groupId)) st.nodes.update({ id: n.id, groupId: null });
+  });
+  markDirty();
+}
+
+// ── Selection expansion ───────────────────────────────────────────────────────
+// Called from onSelectNode — expands selection to all group members.
+
+export function expandSelectionToGroup(nodeIds) {
+  const groupIds = new Set();
+  nodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (n && n.groupId) groupIds.add(n.groupId);
+  });
+  if (!groupIds.size) return nodeIds;
+
+  const expanded = new Set(nodeIds);
+  st.nodes.get().forEach((n) => {
+    if (n.groupId && groupIds.has(n.groupId)) expanded.add(n.id);
+  });
+  return [...expanded];
+}
+
+// ── Group outline (drawn on canvas in afterDrawing) ───────────────────────────
+
+function nodeBounds(id) {
+  const n        = st.nodes.get(id);
+  const bodyNode = st.network.body.nodes[id];
+  if (!bodyNode) return null;
+  const shape    = (n && n.shapeType) || 'box';
+  const defaults = SHAPE_DEFAULTS[shape] || [100, 40];
+  const W   = (n && n.nodeWidth)  || defaults[0];
+  const H   = (n && n.nodeHeight) || defaults[1];
+  const rot = (n && n.rotation)   || 0;
+  const cx = bodyNode.x, cy = bodyNode.y;
+  if (rot === 0) {
+    return { minX: cx - W / 2, minY: cy - H / 2, maxX: cx + W / 2, maxY: cy + H / 2 };
+  }
+  const cos = Math.abs(Math.cos(rot)); const sin = Math.abs(Math.sin(rot));
+  const hw = (W * cos + H * sin) / 2;
+  const hh = (W * sin + H * cos) / 2;
+  return { minX: cx - hw, minY: cy - hh, maxX: cx + hw, maxY: cy + hh };
+}
+
+export function drawGroupOutlines(ctx) {
+  if (!st.network || !st.selectedNodeIds.length) return;
+
+  // Find groupIds that have at least one selected member
+  const selectedSet = new Set(st.selectedNodeIds);
+  const activeGroups = new Set();
+  st.selectedNodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (n && n.groupId) activeGroups.add(n.groupId);
+  });
+  if (!activeGroups.size) return;
+
+  // For each active group, compute bounding box over ALL members
+  activeGroups.forEach((groupId) => {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    st.nodes.get().forEach((n) => {
+      if (n.groupId !== groupId) return;
+      const b = nodeBounds(n.id);
+      if (!b) return;
+      minX = Math.min(minX, b.minX); minY = Math.min(minY, b.minY);
+      maxX = Math.max(maxX, b.maxX); maxY = Math.max(maxY, b.maxY);
+    });
+    if (minX === Infinity) return;
+
+    const PAD = 14;
+    ctx.save();
+    ctx.strokeStyle = '#6366f1';
+    ctx.lineWidth   = 1.5;
+    ctx.setLineDash([6, 4]);
+    ctx.strokeRect(minX - PAD, minY - PAD, maxX - minX + PAD * 2, maxY - minY + PAD * 2);
+    ctx.setLineDash([]);
+    ctx.restore();
+  });
+}