living-ai-documentation 2.1.0 → 2.4.0

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

@@ -5,13 +5,55 @@ import { st, markDirty } from './state.js';
 import { visEdgeProps }  from './edge-rendering.js';
 import { pushSnapshot }  from './history.js';
 import { t }             from './t.js';
+import { getArrowDefaults } from './defaults-modal.js';
+import { openColorPickerPopup } from './color-picker.js';
 
 const DEFAULT_EDGE_COLOR = '#a8a29e';
 const FREE_ARROW_STYLE_KEY = 'ld-free-arrow-style';
 
+// Palette is injected at boot by diagram.html via initEdgeColorSwatch().
+let _edgePaletteEntries = [];
+
+function syncEdgeFontSizeValue() {
+  const el = document.getElementById('edgeFontSizeValue');
+  if (!el) return;
+  const sizes = (st.selectedEdgeIds || []).map((id) => {
+    const e = st.edges && st.edges.get(id);
+    return e ? (e.fontSize || 11) : null;
+  }).filter((s) => s !== null);
+  if (!sizes.length) { el.textContent = '–'; return; }
+  const first = sizes[0];
+  el.textContent = sizes.every((s) => s === first) ? String(first) : '–';
+}
+
+function syncEdgeColorSwatch(hexColor) {
+  const swatch = document.getElementById('edgeColorSwatch');
+  if (!swatch) return;
+  swatch.style.background = hexColor;
+  swatch.style.borderColor = hexColor;
+  swatch.dataset.currentColor = hexColor;
+}
+
+export function initEdgeColorSwatch(palette) {
+  _edgePaletteEntries = palette.map((hex) => ({
+    value: hex, bg: hex, border: hex, label: hex,
+  }));
+  const swatch = document.getElementById('edgeColorSwatch');
+  if (!swatch) return;
+  swatch.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const current = swatch.dataset.currentColor || DEFAULT_EDGE_COLOR;
+    openColorPickerPopup(swatch, _edgePaletteEntries, current, (entry) => {
+      setEdgeColor(entry.value);
+    }, { columns: _edgePaletteEntries.length });
+  });
+}
+
 // Persist the style of the first free arrow (anchor→anchor) in the current
 // selection so the next double-click creation reuses it.
 function persistFreeArrowStyle() {
+  // Persist from any selected edge — free arrows (anchor→anchor) take priority,
+  // but shape→shape edges also update the style memory.
   const freeId = st.selectedEdgeIds.find((id) => {
     const e = st.edges.get(id);
     if (!e) return false;
@@ -19,19 +61,30 @@ function persistFreeArrowStyle() {
     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);
+  const edgeId = freeId || st.selectedEdgeIds[0];
+  if (!edgeId) return;
+  const e = st.edges.get(edgeId);
+  if (!e) return;
   localStorage.setItem(FREE_ARROW_STYLE_KEY, JSON.stringify({
     arrowDir:  e.arrowDir  || 'to',
     dashes:    e.dashes    || false,
     edgeColor: e.edgeColor || null,
     edgeWidth: e.edgeWidth || null,
+    fontSize:  e.fontSize  || null,
   }));
 }
 
 export function getLastFreeArrowStyle() {
-  try { return JSON.parse(localStorage.getItem(FREE_ARROW_STYLE_KEY)) || {}; }
-  catch { return {}; }
+  try {
+    const stored = JSON.parse(localStorage.getItem(FREE_ARROW_STYLE_KEY));
+    if (stored) {
+      // Merge with defaults: stored values override defaults, but null/undefined
+      // values in stored fall back to defaults (handles legacy keys without fontSize).
+      const clean = Object.fromEntries(Object.entries(stored).filter(([, v]) => v != null));
+      return { ...getArrowDefaults(), ...clean };
+    }
+  } catch { /* ignore */ }
+  return getArrowDefaults();
 }
 
 function isEdgeLocked(edge) {
@@ -97,13 +150,10 @@ export function showEdgePanel() {
     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' : '';
-  });
+  // Sync edge color swatch and font size display.
+  const activeColor = (e.edgeColor || DEFAULT_EDGE_COLOR);
+  syncEdgeColorSwatch(activeColor);
+  syncEdgeFontSizeValue();
 
   // Show/hide the clear-ports button based on whether this edge has ports.
   const hasPorts = !!(e.fromPort || e.toPort);
@@ -180,6 +230,54 @@ export function setEdgeColor(hex) {
   markDirty();
 }
 
+export async function saveEdgeAsDefault() {
+  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';
+  });
+  const edgeId = freeId || st.selectedEdgeIds[0];
+  if (!edgeId) return;
+  const e = st.edges.get(edgeId);
+  if (!e) return;
+
+  const { getDiagramDefaults, initDiagramDefaults } = await import('./defaults-modal.js');
+  const current = getDiagramDefaults() || {};
+  const arrows = {
+    arrowDir: e.arrowDir  || 'to',
+    dashes:   e.dashes    || false,
+    fontSize: e.fontSize  || 11,
+  };
+  const updated = { arrows, shapes: current.shapes || null };
+
+  try {
+    const res = await fetch('/api/config', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ diagramDefaults: updated }),
+    });
+    if (!res.ok) throw new Error(await res.text());
+    initDiagramDefaults({ diagramDefaults: updated });
+    // Sync localStorage so the next arrow creation uses the new default immediately
+    localStorage.setItem(FREE_ARROW_STYLE_KEY, JSON.stringify({
+      arrowDir:  arrows.arrowDir,
+      dashes:    arrows.dashes,
+      fontSize:  arrows.fontSize,
+      edgeColor: null,
+      edgeWidth: null,
+    }));
+    const btn = document.getElementById('btnSaveEdgeDefault');
+    if (btn) {
+      btn.classList.add('tool-active');
+      setTimeout(() => btn.classList.remove('tool-active'), 800);
+    }
+  } catch (err) {
+    console.error('Failed to save edge default', err);
+  }
+}
+
 export function changeEdgeWidth(delta) {
   if (!st.selectedEdgeIds.length) return;
   pushSnapshot();
@@ -244,6 +342,7 @@ export function changeEdgeFontSize(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)' } });
   });
+  syncEdgeFontSizeValue();
   markDirty();
 }
 

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

@@ -3,10 +3,10 @@
 
 import { st, markDirty }      from './state.js';
 import { TOOL_BTN_MAP }       from './constants.js';
-import { showNodePanel, hideNodePanel, setNodeColor, setNodeBgOpacity, changeNodeFontSize, setTextAlign, setTextValign, setCustomShapeLabelPlacement, changeZOrder, activateStamp, cancelStamp, stepRotate, toggleNodeLock } from './node-panel.js';
+import { showNodePanel, hideNodePanel, setNodeColor, setNodeBgOpacity, changeNodeFontSize, setTextAlign, setTextValign, setCustomShapeLabelPlacement, changeZOrder, activateStamp, cancelStamp, stepRotate, toggleNodeLock, saveShapeAsDefault } from './node-panel.js';
 import { groupNodes, ungroupNodes } from './groups.js';
 import { showLinkPanel, hideLinkPanel } from './link-panel.js';
-import { hideEdgePanel, setEdgeArrow, setEdgeDashes, changeEdgeFontSize, stepEdgeLabelRotation, clearEdgePorts, setEdgeColor, changeEdgeWidth, toggleEdgeLock, resetEdgeLabelWidth, stepEdgeLabelOffset, resetEdgeLabelOffset } from './edge-panel.js';
+import { hideEdgePanel, setEdgeArrow, setEdgeDashes, changeEdgeFontSize, stepEdgeLabelRotation, clearEdgePorts, setEdgeColor, changeEdgeWidth, toggleEdgeLock, resetEdgeLabelWidth, stepEdgeLabelOffset, resetEdgeLabelOffset, saveEdgeAsDefault } from './edge-panel.js';
 import { startLabelEdit, startEdgeLabelEdit, hideLabelInput } from './label-editor.js';
 import { hideSelectionOverlay, toggleResizeMode } from './selection-overlay.js';
 import { toggleGrid }          from './grid.js';
@@ -207,8 +207,6 @@ initEvidenceMode();
 // ── Node panel wiring ─────────────────────────────────────────────────────────
 
 document.getElementById('nodePanel').addEventListener('click', (e) => {
-  const colorBtn = e.target.closest('[data-color]');
-  if (colorBtn) setNodeColor(colorBtn.dataset.color);
   const labelPlacementBtn = e.target.closest('[data-label-placement]');
   if (labelPlacementBtn) setCustomShapeLabelPlacement(labelPlacementBtn.dataset.labelPlacement);
 });
@@ -277,10 +275,9 @@ document.getElementById('btnEdgeLabelWidthReset').addEventListener('click', rese
 document.getElementById('btnEdgeLock').addEventListener('click', toggleEdgeLock);
 document.getElementById('btnEdgeWidthDecrease').addEventListener('click', () => changeEdgeWidth(-0.5));
 document.getElementById('btnEdgeWidthIncrease').addEventListener('click', () => changeEdgeWidth(0.5));
-document.getElementById('edgePanel').addEventListener('click', (e) => {
-  const colorBtn = e.target.closest('[data-edge-color]');
-  if (colorBtn) setEdgeColor(colorBtn.dataset.edgeColor);
-});
+// Edge color is handled by #edgeColorSwatch via initEdgeColorSwatch() in edge-panel.js
+document.getElementById('btnSaveShapeDefault').addEventListener('click', saveShapeAsDefault);
+document.getElementById('btnSaveEdgeDefault').addEventListener('click', saveEdgeAsDefault);
 
 // ── Keyboard shortcuts ────────────────────────────────────────────────────────
 

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

@@ -205,14 +205,19 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         }
         pushSnapshot();
         data.id = "e" + Date.now();
-        data.arrowDir = "to";
-        data.dashes = false;
+        const edgeStyle = getLastFreeArrowStyle();
+        data.arrowDir = edgeStyle.arrowDir || "to";
+        data.dashes   = edgeStyle.dashes   || false;
+        if (edgeStyle.fontSize) {
+          data.fontSize = edgeStyle.fontSize;
+          data.font = { size: edgeStyle.fontSize, align: 'middle', color: 'rgba(0,0,0,0)' };
+        }
         // Attach captured port selections — skip for anchor nodes.
         const fromIsAnchor = fromNode.shapeType === "anchor";
         const toIsAnchor = toNode.shapeType === "anchor";
         if (!fromIsAnchor) data.fromPort = _addEdgeFromPort || null;
         if (!toIsAnchor) data.toPort = _hoveredPortKey || null;
-        Object.assign(data, visEdgeProps("to", false));
+        Object.assign(data, visEdgeProps(data.arrowDir, data.dashes));
         // Port edges: make vis-network's ghost transparent so only drawPortEdge is visible.
         if (data.fromPort || data.toPort) {
           data.color = {
@@ -1142,6 +1147,7 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       const lastStyle = getLastFreeArrowStyle();
       const arrowDir = lastStyle.arrowDir || "to";
       const dashes = lastStyle.dashes || false;
+      const edgeFontSize = lastStyle.fontSize || null;
       st.edges.add({
         id: edgeId,
         from: fromId,
@@ -1150,6 +1156,7 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         dashes,
         edgeColor: lastStyle.edgeColor || null,
         edgeWidth: lastStyle.edgeWidth || null,
+        ...(edgeFontSize ? { fontSize: edgeFontSize, font: { size: edgeFontSize, align: 'middle', color: 'rgba(0,0,0,0)' } } : {}),
         smooth: { enabled: false },
         ...visEdgeProps(arrowDir, dashes),
         ...(lastStyle.edgeColor
@@ -1720,6 +1727,8 @@ function onDoubleClick(params) {
     const fontSize = lastStyle.fontSize || null;
     const textAlign = lastStyle.textAlign || null;
     const textValign = lastStyle.textValign || null;
+    const nodeWidth  = lastStyle.width  || defaults[0];
+    const nodeHeight = lastStyle.height || defaults[1];
     const rawPos = params.pointer.canvas;
     const pos = st.gridEnabled ? snapToGrid(rawPos.x, rawPos.y) : rawPos;
     st.nodes.add({
@@ -1733,8 +1742,8 @@ function onDoubleClick(params) {
       shapeType,
       customShapeId: customShapeId || null,
       colorKey,
-      nodeWidth: defaults[0],
-      nodeHeight: defaults[1],
+      nodeWidth,
+      nodeHeight,
       fontSize,
       textAlign,
       textValign,
@@ -1745,8 +1754,8 @@ function onDoubleClick(params) {
       ...visNodeProps(
         shapeType,
         colorKey,
-        defaults[0],
-        defaults[1],
+        nodeWidth,
+        nodeHeight,
         fontSize,
         textAlign,
         textValign,

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

@@ -6,6 +6,37 @@ import { SHAPE_DEFAULTS } from './node-rendering.js';
 import { CUSTOM_SHAPE_TYPE, getCustomShapeLabelPlacement } from './custom-shapes.js';
 import { pushSnapshot }   from './history.js';
 import { t }              from './t.js';
+import { getShapeDefaults } from './defaults-modal.js';
+import { NODE_COLORS, DEFAULT_NODE_PALETTE } from './constants.js';
+import { openColorPickerPopup } from './color-picker.js';
+
+// Reads the effective color for a key, respecting runtime overrides.
+function getEffectiveNodeColor(key) {
+  return st.nodeColorOverrides[key] || NODE_COLORS[key] || NODE_COLORS['c-gray'];
+}
+
+// Built dynamically so overrides applied at boot are reflected in the picker.
+function buildNodeColorEntries() {
+  return DEFAULT_NODE_PALETTE.map((key) => {
+    const c = getEffectiveNodeColor(key);
+    return { value: key, bg: c.bg, border: c.border, label: key.replace('c-', '') };
+  });
+}
+
+function syncNodeColorSwatch() {
+  const swatch = document.getElementById('nodeColorSwatch');
+  if (!swatch) return;
+  const firstId = (st.selectedNodeIds || []).find((id) => {
+    const n = st.nodes && st.nodes.get(id);
+    return n && n.shapeType !== 'anchor';
+  });
+  const n = firstId && st.nodes && st.nodes.get(firstId);
+  const key = (n && n.colorKey) || 'c-gray';
+  const c = getEffectiveNodeColor(key);
+  swatch.style.background = c.bg;
+  swatch.style.borderColor = c.border;
+  swatch.dataset.currentColor = key;
+}
 
 const CUSTOM_LABEL_PLACEMENTS = ['below', 'above', 'right', 'left', 'center'];
 
@@ -27,8 +58,16 @@ function persistNodeStyle() {
 }
 
 export function getLastNodeStyle(shapeType) {
-  try { return JSON.parse(localStorage.getItem('ld-node-style-' + shapeType)) || {}; }
-  catch { return {}; }
+  try {
+    const stored = JSON.parse(localStorage.getItem('ld-node-style-' + shapeType));
+    if (stored) {
+      // Merge with defaults: stored values override defaults, but null/undefined
+      // values in stored fall back to defaults (handles legacy keys without width/height).
+      const clean = Object.fromEntries(Object.entries(stored).filter(([, v]) => v != null));
+      return { ...getShapeDefaults(shapeType), ...clean };
+    }
+  } catch { /* ignore */ }
+  return getShapeDefaults(shapeType);
 }
 
 // All shapes are ctxRenderers — vis-network never re-reads the closure after
@@ -145,6 +184,7 @@ export function showNodePanel() {
   syncNodeLockButton();
   syncNodeFontSizeValue();
   syncCustomShapeLabelPlacementControls();
+  syncNodeColorSwatch();
   // Sync the opacity slider with the first selected node's current value so the
   // slider reflects the live state rather than whatever position it was left at.
   const slider = document.getElementById('nodeBgOpacity');
@@ -159,6 +199,67 @@ export function hideNodePanel() {
   document.getElementById('nodePanel').classList.add('hidden');
 }
 
+export function initNodeColorSwatch() {
+  const swatch = document.getElementById('nodeColorSwatch');
+  if (!swatch) return;
+  swatch.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const current = swatch.dataset.currentColor || 'c-gray';
+    openColorPickerPopup(swatch, buildNodeColorEntries(), current, (entry) => {
+      setNodeColor(entry.value);
+    });
+  });
+}
+
+export async function saveShapeAsDefault() {
+  const firstId = (st.selectedNodeIds || []).find((id) => {
+    const n = st.nodes && st.nodes.get(id);
+    return n && n.shapeType !== 'anchor' && n.shapeType !== CUSTOM_SHAPE_TYPE;
+  });
+  if (!firstId) return;
+  const n = st.nodes.get(firstId);
+  if (!n || !n.shapeType) return;
+
+  const { getDiagramDefaults } = await import('./defaults-modal.js');
+  const current = getDiagramDefaults() || {};
+  const shapes = Object.assign({}, current.shapes || {});
+  shapes[n.shapeType] = {
+    width:    n.nodeWidth  || SHAPE_DEFAULTS[n.shapeType]?.[0] || 100,
+    height:   n.nodeHeight || SHAPE_DEFAULTS[n.shapeType]?.[1] || 40,
+    fontSize: n.fontSize   || 13,
+    colorKey: n.colorKey   || 'c-gray',
+  };
+  const updated = { arrows: current.arrows || null, shapes };
+
+  try {
+    const res = await fetch('/api/config', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ diagramDefaults: updated }),
+    });
+    if (!res.ok) throw new Error(await res.text());
+    const { initDiagramDefaults } = await import('./defaults-modal.js');
+    initDiagramDefaults({ diagramDefaults: updated });
+    // Sync localStorage so the next creation uses the new default immediately
+    localStorage.setItem('ld-node-style-' + n.shapeType, JSON.stringify({
+      colorKey:   shapes[n.shapeType].colorKey,
+      fontSize:   shapes[n.shapeType].fontSize,
+      width:      shapes[n.shapeType].width,
+      height:     shapes[n.shapeType].height,
+      textAlign:  null,
+      textValign: null,
+    }));
+    // Visual feedback: flash the button orange briefly
+    const btn = document.getElementById('btnSaveShapeDefault');
+    if (btn) {
+      btn.classList.add('tool-active');
+      setTimeout(() => btn.classList.remove('tool-active'), 800);
+    }
+  } catch (err) {
+    console.error('Failed to save shape default', err);
+  }
+}
+
 export function toggleNodeLock() {
   const { allLocked, nodeIds, edgeIds } = selectedLockState();
   if (!nodeIds.length && !edgeIds.length) return;
@@ -195,6 +296,7 @@ export function setNodeColor(colorKey) {
   persistNodeStyle();
   forceRedraw();
   markDirty();
+  syncNodeColorSwatch();
 }
 
 // The slider fires `input` on every step during a drag. The caller is expected

package/dist/src/frontend/diagram.html

@@ -559,6 +559,16 @@
       </button>
       <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
 
+      <button
+        id="btnDiagramDefaults"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.defaults"
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
+          <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.474l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
+        </svg>
+      </button>
       <button
         id="btnAlign"
         class="tool-btn"
@@ -812,7 +822,9 @@
           >🔒</button>
           <div class="panel-sep"></div>
           <div id="nodePanelControls" class="contents">
-          <div id="nodePaletteContainer" class="contents"></div>
+          <button id="nodeColorSwatch"
+            style="width:1.5rem;height:1.5rem;border-radius:0.25rem;border:2px solid #a8a29e;background:#f5f5f4;cursor:pointer;flex-shrink:0;"
+            data-i18n-title="diagram.node_panel.color"></button>
           <div class="panel-sep"></div>
           <input
             id="nodeBgOpacity"
@@ -1158,6 +1170,19 @@
               <rect x="19" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
             </svg>
           </button>
+          <div class="panel-sep"></div>
+
+          <!-- Save as default for this shape type -->
+          <button
+            id="btnSaveShapeDefault"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.node_panel.save_as_default"
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
+              <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.474l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
+            </svg>
+          </button>
           </div><!-- /nodePanelControls -->
         </div>
 
@@ -1282,6 +1307,11 @@
           >
             Aa−
           </button>
+          <span
+            id="edgeFontSizeValue"
+            class="inline-flex items-center justify-center min-w-[2.25rem] h-6 px-1 text-[11px] font-mono text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded bg-white/80 dark:bg-gray-800/80"
+            data-i18n-title="diagram.edge_panel.font_size_value"
+          >11</span>
           <button
             id="btnEdgeFontIncrease"
             class="tool-btn !w-8 !h-6"
@@ -1350,7 +1380,9 @@
           <button id="btnEdgeWidthDecrease" class="tool-btn !w-7 !h-6" style="font-size:10px" data-i18n-title="diagram.edge_panel.width_decrease">W−</button>
           <button id="btnEdgeWidthIncrease" class="tool-btn !w-7 !h-6" style="font-size:10px" data-i18n-title="diagram.edge_panel.width_increase">W+</button>
           <div class="panel-sep"></div>
-          <div id="edgePaletteContainer" class="contents"></div>
+          <button id="edgeColorSwatch"
+            style="width:1.5rem;height:1.5rem;border-radius:0.25rem;border:2px solid #a8a29e;background:#a8a29e;cursor:pointer;flex-shrink:0;"
+            data-i18n-title="diagram.edge_panel.color"></button>
           <div class="panel-sep"></div>
           <button
             id="btnEdgeClearPorts"
@@ -1359,6 +1391,17 @@
           >
             ⊗
           </button>
+          <div class="panel-sep"></div>
+          <button
+            id="btnSaveEdgeDefault"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.edge_panel.save_as_default"
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
+              <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.474l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
+            </svg>
+          </button>
           </div><!-- /edgePanelControls -->
         </div>
 
@@ -1437,6 +1480,9 @@
       import { st } from '/diagram/state.js';
       import { loadDiagramList } from '/diagram/persistence.js';
       import { loadCustomShapeLibraries, renderCustomShapeBar } from '/diagram/custom-shapes.js';
+      import { initDiagramDefaults, openDefaultsModal } from '/diagram/defaults-modal.js';
+      import { initNodeColorSwatch } from '/diagram/node-panel.js';
+      import { initEdgeColorSwatch } from '/diagram/edge-panel.js';
       (async () => {
         // diagramNodePalette: array of 15 bg hex strings (positional, matching DEFAULT_NODE_PALETTE)
         // diagramEdgePalette: array of hex strings
@@ -1447,6 +1493,7 @@
           await window.initI18n(cfg.language);
           if (Array.isArray(cfg.diagramNodePalette) && cfg.diagramNodePalette.length) nodeBgOverrides = cfg.diagramNodePalette;
           if (Array.isArray(cfg.diagramEdgePalette) && cfg.diagramEdgePalette.length) edgePalette = cfg.diagramEdgePalette;
+          initDiagramDefaults(cfg);
         } catch { await window.initI18n('en'); /* config unavailable — use defaults */ }
 
         // Apply node color overrides to shared state so renderers pick them up.
@@ -1457,36 +1504,12 @@
           }
         });
 
-        // Build node palette buttons.
-        const nc = document.getElementById('nodePaletteContainer');
-        DEFAULT_NODE_PALETTE.forEach((key, i) => {
-          if (!nc) return;
-          const customBg = nodeBgOverrides && nodeBgOverrides[i];
-          const c = (customBg ? deriveNodeColors(customBg, NODE_L_RATIOS[key] || 0.60) : null) || NODE_COLORS[key];
-          const btn = document.createElement('button');
-          btn.dataset.color = key;
-          btn.className = 'w-5 h-5 rounded-full border-2 hover:scale-125 transition-transform';
-          btn.style.background = c.bg;
-          btn.style.borderColor = c.border;
-          btn.title = key.replace('c-', '');
-          nc.appendChild(btn);
-        });
-
-        // Build edge palette buttons.
-        const ec = document.getElementById('edgePaletteContainer');
-        edgePalette.forEach((hex) => {
-          if (!ec) return;
-          const btn = document.createElement('button');
-          btn.dataset.edgeColor = hex;
-          btn.className = 'edge-color-btn w-4 h-4 rounded-full hover:scale-125 transition-transform';
-          btn.style.background = hex;
-          btn.style.border = '2px solid rgba(0,0,0,0.2)';
-          btn.title = hex;
-          ec.appendChild(btn);
-        });
+        initNodeColorSwatch();
+        initEdgeColorSwatch(edgePalette);
         await loadCustomShapeLibraries();
         renderCustomShapeBar();
         window.applyI18n();
+        document.getElementById('btnDiagramDefaults').addEventListener('click', openDefaultsModal);
         loadDiagramList();
       })();
     </script>

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

@@ -29,12 +29,30 @@
   "nav.export_all_pdf": "Export all documents as PDF",
   "nav.new_folder": "New folder",
   "nav.new_document": "New document",
+  "nav.ai_agents": "Agents IA",
   "nav.word_cloud": "☁ Word Cloud",
   "nav.diagram": "◇ Diagram",
   "nav.ai_context": "AI Context",
   "nav.files": "📁 Attached files",
   "nav.admin": "⚙ Admin",
 
+  "agents.title": "Agents IA",
+  "agents.subtitle": "Launch a configured workspace agent.",
+  "agents.empty": "No workspace agent is configured yet.",
+  "agents.ready": "Ready",
+  "agents.requires_input": "Requires input",
+  "agents.not_ready": "Configuration incomplete",
+  "agents.no_provider": "No LLM provider",
+  "agents.input_title": "Agent input",
+  "agents.input_hint": "Provide the input required for this run.",
+  "agents.run": "Run agent",
+  "agents.loading": "Running agent…",
+  "agents.success": "Agent run completed",
+  "agents.failure": "Agent run failed",
+  "agents.open_document": "Open document",
+  "agents.load_failed": "Failed to load workspace agents.",
+  "agents.run_failed": "Agent run failed.",
+
   "files.title": "📁 Attached files",
   "files.empty": "No files yet — upload one from a document editor (paperclip, drag & drop, or paste).",
   "files.replace": "Replace",
@@ -591,7 +609,26 @@
   "diagram.toolbar.shape_editor": "Custom shape editor",
   "diagram.toolbar.arrow": "Arrow (F)",
   "diagram.toolbar.delete": "Delete (Del)",
+  "diagram.toolbar.defaults": "Diagram defaults — configure default sizes, colors and styles",
   "diagram.toolbar.align_guides": "Alignment guides — highlights same-type shape alignment",
+  "diagram.defaults.title": "Diagram defaults",
+  "diagram.defaults.section.arrows": "Arrows",
+  "diagram.defaults.section.shapes": "Shapes",
+  "diagram.defaults.field.direction": "Direction",
+  "diagram.defaults.field.style": "Style",
+  "diagram.defaults.field.font_size": "Font size",
+  "diagram.defaults.field.width": "W",
+  "diagram.defaults.field.height": "H",
+  "diagram.defaults.field.color": "Color",
+  "diagram.defaults.style.solid": "Solid",
+  "diagram.defaults.style.dashed": "Dashed",
+  "diagram.defaults.shape.box": "Rectangle",
+  "diagram.defaults.shape.ellipse": "Ellipse",
+  "diagram.defaults.shape.circle": "Circle",
+  "diagram.defaults.shape.database": "Database",
+  "diagram.defaults.shape.actor": "Actor",
+  "diagram.defaults.shape.postit": "Post-it",
+  "diagram.defaults.shape.text_free": "Free text",
   "diagram.toolbar.grid": "Grid / Snap to grid (G)",
   "diagram.toolbar.edge_style": "Toggle curved / straight arrows",
   "diagram.toolbar.resize_corner": "Resize mode: fixed corner (click for fixed centre)",
@@ -609,6 +646,8 @@
   "diagram.sidebar.empty": "No diagrams",
   "diagram.sidebar.delete_title": "Delete",
 
+  "diagram.node_panel.color": "Shape color",
+  "diagram.node_panel.save_as_default": "Save as default for this shape type",
   "diagram.node_panel.lock": "Lock selection",
   "diagram.node_panel.unlock": "Unlock selection",
   "diagram.node_panel.edit_label": "Edit text (double-click)",
@@ -648,6 +687,9 @@
   "diagram.link_panel.save_btn": "Save",
   "diagram.link_panel.remove_btn": "Remove",
 
+  "diagram.edge_panel.font_size_value": "Font size",
+  "diagram.edge_panel.color": "Arrow color",
+  "diagram.edge_panel.save_as_default": "Save as default for arrows",
   "diagram.edge_panel.lock": "Lock arrow",
   "diagram.edge_panel.unlock": "Unlock arrow",
   "diagram.edge_panel.no_arrow": "Simple line",