living-ai-documentation 2.0.0 → 2.3.0

package/dist/src/frontend/agents.js

@@ -0,0 +1,288 @@
+// ── Workspace AI agents launcher ────────────────────────────────────────────
+// Depends on i18n.js, documents.js, and the workspace API.
+(function () {
+  let workspaceAgents = [];
+  let selectedAgentId = null;
+  let createdDocumentId = null;
+
+  function tr(key) {
+    return typeof window.t === "function" ? window.t(key) : key;
+  }
+
+  function esc(value) {
+    return String(value ?? "")
+      .replaceAll("&", "&")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#039;");
+  }
+
+  function agentElements() {
+    return {
+      button: document.getElementById("ai-agents-btn"),
+      modal: document.getElementById("ai-agents-modal"),
+      grid: document.getElementById("ai-agents-grid"),
+      inputModal: document.getElementById("ai-agent-input-modal"),
+      inputTitle: document.getElementById("ai-agent-input-title"),
+      inputHint: document.getElementById("ai-agent-input-hint"),
+      input: document.getElementById("ai-agent-user-input"),
+      runInputButton: document.getElementById("ai-agent-input-run"),
+      toast: document.getElementById("ai-agent-toast"),
+      toastIcon: document.getElementById("ai-agent-toast-icon"),
+      toastTitle: document.getElementById("ai-agent-toast-title"),
+      toastMessage: document.getElementById("ai-agent-toast-message"),
+      toastOpen: document.getElementById("ai-agent-toast-open"),
+      toastClose: document.getElementById("ai-agent-toast-close"),
+    };
+  }
+
+  async function loadWorkspaceAgents() {
+    const response = await fetch("/api/workspace", {
+      headers: { Accept: "application/json" },
+    });
+    if (!response.ok) {
+      throw new Error(`Workspace load failed (${response.status})`);
+    }
+
+    const workspace = await response.json();
+    const entities = Array.isArray(workspace.entities) ? workspace.entities : [];
+    const byId = new Map(entities.map((entity) => [entity.id, entity]));
+    workspaceAgents = entities
+      .filter((entity) => entity.kind === "agent")
+      .map((agent) => ({
+        ...agent,
+        provider: byId.get(agent.parentId),
+      }));
+    return workspaceAgents;
+  }
+
+  function renderAgents() {
+    const { grid } = agentElements();
+    if (!grid) return;
+
+    if (!workspaceAgents.length) {
+      grid.className = "p-5";
+      grid.innerHTML = `<p class="text-sm text-gray-500 dark:text-gray-400">${esc(tr("agents.empty"))}</p>`;
+      return;
+    }
+
+    grid.className =
+      "p-5 overflow-y-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3";
+    grid.innerHTML = workspaceAgents.map(agentCardHtml).join("");
+    grid.querySelectorAll("[data-agent-id]").forEach((button) => {
+      button.addEventListener("click", () => selectAgent(button.dataset.agentId));
+    });
+  }
+
+  function agentCardHtml(agent) {
+    const provider = agent.provider;
+    const disabled =
+      !provider ||
+      provider.kind !== "llm" ||
+      !provider.config?.model ||
+      !agent.config?.systemPrompt ||
+      (agent.config?.requiresUserInput &&
+        !agent.config?.userInputDescription?.trim());
+    const status = disabled
+      ? tr("agents.not_ready")
+      : agent.config?.requiresUserInput
+        ? tr("agents.requires_input")
+        : tr("agents.ready");
+
+    return `
+      <button
+        type="button"
+        data-agent-id="${esc(agent.id)}"
+        ${disabled ? "disabled" : ""}
+        class="text-left rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950 px-4 py-3 transition-colors ${disabled ? "opacity-55 cursor-not-allowed" : "hover:border-blue-500 hover:shadow-sm"}"
+      >
+        <span class="block text-sm font-bold text-gray-900 dark:text-gray-100">${esc(agent.label)}</span>
+        <span class="block text-xs text-gray-500 dark:text-gray-400 mt-1">${esc(provider?.label ?? tr("agents.no_provider"))}</span>
+        <span class="inline-flex mt-3 text-[11px] font-semibold rounded-full px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300">${esc(status)}</span>
+      </button>
+    `;
+  }
+
+  async function openAiAgentsModal() {
+    const { modal, grid } = agentElements();
+    if (!modal || !grid) return;
+
+    modal.classList.remove("hidden");
+    grid.className = "p-5";
+    grid.innerHTML = `<p class="text-sm text-gray-400">${esc(tr("common.loading"))}</p>`;
+
+    try {
+      await loadWorkspaceAgents();
+      renderAgents();
+    } catch (error) {
+      grid.innerHTML = `<p class="text-sm text-red-500">${esc(error instanceof Error ? error.message : tr("agents.load_failed"))}</p>`;
+    }
+  }
+
+  function closeAiAgentsModal() {
+    const { modal } = agentElements();
+    modal?.classList.add("hidden");
+  }
+
+  function selectAgent(agentId) {
+    const agent = workspaceAgents.find((item) => item.id === agentId);
+    if (!agent) return;
+
+    closeAiAgentsModal();
+    if (agent.config?.requiresUserInput) {
+      openAiAgentInputModal(agent);
+      return;
+    }
+
+    void executeAgent(agent.id, "");
+  }
+
+  function openAiAgentInputModal(agent) {
+    const { inputModal, inputTitle, inputHint, input, runInputButton } =
+      agentElements();
+    selectedAgentId = agent.id;
+    if (inputTitle) inputTitle.textContent = agent.label;
+    if (inputHint) {
+      inputHint.textContent =
+        agent.config?.userInputDescription?.trim() || tr("agents.input_hint");
+    }
+    if (input) {
+      input.value = "";
+      window.setTimeout(() => input.focus(), 0);
+    }
+    runInputButton?.removeAttribute("disabled");
+    inputModal?.classList.remove("hidden");
+  }
+
+  function closeAiAgentInputModal() {
+    const { inputModal } = agentElements();
+    inputModal?.classList.add("hidden");
+    selectedAgentId = null;
+  }
+
+  async function executeAgent(agentId, userInput) {
+    const agent = workspaceAgents.find((item) => item.id === agentId);
+    createdDocumentId = null;
+    showAgentToast("loading", tr("agents.loading"), agent?.label ?? "");
+
+    try {
+      const response = await fetch("/api/workspace/run-agent-document", {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ agentId, userInput }),
+      });
+      const result = await response.json();
+      if (result.document?.id) {
+        createdDocumentId = result.document.id;
+      }
+
+      if (response.ok && result.ok) {
+        showAgentToast(
+          "success",
+          tr("agents.success"),
+          result.document?.filename ?? "",
+          createdDocumentId,
+        );
+      } else {
+        showAgentToast(
+          "error",
+          tr("agents.failure"),
+          result.error ?? tr("agents.run_failed"),
+          createdDocumentId,
+        );
+      }
+
+      if (createdDocumentId && typeof loadDocuments === "function") {
+        await loadDocuments();
+      }
+    } catch (error) {
+      showAgentToast(
+        "error",
+        tr("agents.failure"),
+        error instanceof Error ? error.message : tr("agents.run_failed"),
+      );
+    }
+  }
+
+  function showAgentToast(state, title, message, documentId) {
+    const { toast, toastIcon, toastTitle, toastMessage, toastOpen } =
+      agentElements();
+    if (!toast || !toastIcon || !toastTitle || !toastMessage || !toastOpen) {
+      return;
+    }
+
+    toast.classList.remove("hidden");
+    toastTitle.textContent = title;
+    toastMessage.textContent = message;
+    toastOpen.classList.toggle("hidden", !documentId);
+
+    toastIcon.className = "mt-0.5 h-5 w-5 rounded-full shrink-0";
+    if (state === "loading") {
+      toastIcon.className +=
+        " border-2 border-blue-500 border-t-transparent animate-spin";
+      toastIcon.textContent = "";
+    } else if (state === "success") {
+      toastIcon.className +=
+        " bg-green-500 text-white text-xs flex items-center justify-center";
+      toastIcon.textContent = "✓";
+    } else {
+      toastIcon.className +=
+        " bg-red-500 text-white text-xs flex items-center justify-center";
+      toastIcon.textContent = "!";
+    }
+  }
+
+  function closeAgentToast() {
+    const { toast } = agentElements();
+    toast?.classList.add("hidden");
+  }
+
+  async function openCreatedAgentDocument() {
+    if (!createdDocumentId) return;
+    if (typeof loadDocuments === "function") {
+      await loadDocuments();
+    }
+    if (typeof openDocument === "function") {
+      await openDocument(createdDocumentId, false);
+      closeAgentToast();
+    } else {
+      closeAgentToast();
+      location.href = `/?doc=${encodeURIComponent(createdDocumentId)}`;
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const {
+      button,
+      runInputButton,
+      input,
+      toastOpen,
+      toastClose,
+    } = agentElements();
+
+    button?.addEventListener("click", () => {
+      void openAiAgentsModal();
+    });
+    runInputButton?.addEventListener("click", () => {
+      if (!selectedAgentId) return;
+      const agentId = selectedAgentId;
+      const value = input?.value ?? "";
+      closeAiAgentInputModal();
+      void executeAgent(agentId, value);
+    });
+    toastOpen?.addEventListener("click", () => {
+      void openCreatedAgentDocument();
+    });
+    toastClose?.addEventListener("click", () => {
+      closeAgentToast();
+    });
+  });
+
+  window.openAiAgentsModal = openAiAgentsModal;
+  window.closeAiAgentsModal = closeAiAgentsModal;
+  window.closeAiAgentInputModal = closeAiAgentInputModal;
+})();

package/dist/src/frontend/config.js

@@ -6,8 +6,9 @@ async function loadConfig() {
     await window.initI18n(cfg.language || 'en');
     window.applyI18n();
     if (cfg.title) document.title = cfg.title;
-    document.getElementById("app-title").textContent =
-      cfg.title || "Living Documentation";
+    document.getElementById("app-title").textContent = "Living AI Documentation";
+    const subtitle = document.getElementById("app-subtitle");
+    if (subtitle) subtitle.textContent = cfg.title || "";
     if (cfg.filenamePattern) {
       document.getElementById("welcome-pattern").textContent =
         cfg.filenamePattern + ".md";

package/dist/src/frontend/diagram/color-picker.js

@@ -0,0 +1,72 @@
+// ── Shared color picker popup ─────────────────────────────────────────────────
+// Opens a mini popup with rectangular swatches anchored below a trigger element.
+// Used by node-panel, edge-panel and defaults-modal.
+
+export function closeAllColorPickerPopups() {
+  document.querySelectorAll('.ld-color-popup').forEach((p) => p.remove());
+}
+
+/**
+ * @param {HTMLElement} trigger  — the swatch button that was clicked
+ * @param {Array<{bg: string, border: string, value: string, label?: string}>} entries
+ * @param {string} selectedValue — currently selected value (matched against entry.value)
+ * @param {function(entry): void} onSelect — called when user picks a color
+ * @param {{ columns?: number }} [opts]
+ */
+export function openColorPickerPopup(trigger, entries, selectedValue, onSelect, opts = {}) {
+  closeAllColorPickerPopups();
+
+  const cols = opts.columns || 5;
+  const isDark = document.documentElement.classList.contains('dark');
+
+  const popup = document.createElement('div');
+  popup.className = 'ld-color-popup';
+  popup.style.cssText = `
+    position:fixed;
+    z-index:2000;
+    background:${isDark ? '#1f2937' : 'white'};
+    border:1px solid ${isDark ? '#4b5563' : '#e5e7eb'};
+    border-radius:0.5rem;
+    padding:0.5rem;
+    box-shadow:0 8px 24px rgba(0,0,0,0.2);
+    display:grid;
+    grid-template-columns:repeat(${cols},1.5rem);
+    gap:0.3rem;
+  `;
+
+  entries.forEach((entry) => {
+    const isSelected = entry.value === selectedValue;
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.title = entry.label || entry.value;
+    btn.style.cssText = `
+      width:1.5rem;height:1.5rem;border-radius:0.25rem;
+      background:${entry.bg};border:2px solid ${entry.border};
+      cursor:pointer;
+      ${isSelected ? 'outline:2px solid #f97316;outline-offset:1px;' : ''}
+    `;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      popup.remove();
+      onSelect(entry);
+    });
+    popup.appendChild(btn);
+  });
+
+  // Position below trigger, shift left if near right edge
+  const rect = trigger.getBoundingClientRect();
+  const popupW = cols * (24 + 4.8); // approx
+  const left = Math.min(rect.left, window.innerWidth - popupW - 8);
+  popup.style.top  = (rect.bottom + 4) + 'px';
+  popup.style.left = Math.max(4, left) + 'px';
+
+  document.body.appendChild(popup);
+
+  const onOutside = (e) => {
+    if (!popup.contains(e.target) && e.target !== trigger) {
+      popup.remove();
+      document.removeEventListener('click', onOutside, true);
+    }
+  };
+  setTimeout(() => document.addEventListener('click', onOutside, true), 0);
+}

package/dist/src/frontend/diagram/defaults-modal.js

@@ -0,0 +1,302 @@
+// ── Diagram Defaults Modal ─────────────────────────────────────────────────────
+// Manages project-level creation defaults stored in .living-doc.json under
+// the `diagramDefaults` key. Provides fallback values for node-panel and
+// edge-panel when no last-used localStorage style exists.
+
+import { t } from './t.js';
+import { NODE_COLORS, DEFAULT_NODE_PALETTE } from './constants.js';
+import { openColorPickerPopup, closeAllColorPickerPopups } from './color-picker.js';
+import { st } from './state.js';
+
+function effectiveNodeColor(key) {
+  return st.nodeColorOverrides[key] || NODE_COLORS[key] || NODE_COLORS['c-gray'];
+}
+
+const SHAPE_KEYS = ['box', 'ellipse', 'circle', 'database', 'actor', 'post-it', 'text-free'];
+
+const SHAPE_SYSTEM_DEFAULTS = {
+  box:        { width: 100, height: 40,  colorKey: 'c-gray',  fontSize: 13 },
+  ellipse:    { width: 110, height: 50,  colorKey: 'c-gray',  fontSize: 13 },
+  circle:     { width: 55,  height: 55,  colorKey: 'c-gray',  fontSize: 13 },
+  database:   { width: 50,  height: 70,  colorKey: 'c-gray',  fontSize: 13 },
+  actor:      { width: 30,  height: 52,  colorKey: 'c-gray',  fontSize: 13 },
+  'post-it':  { width: 120, height: 100, colorKey: 'c-amber', fontSize: 13 },
+  'text-free':{ width: 80,  height: 30,  colorKey: 'c-gray',  fontSize: 13 },
+};
+
+const ARROW_SYSTEM_DEFAULTS = { fontSize: 11, arrowDir: 'to', dashes: false };
+
+let _cache = null; // null = not yet loaded from config
+
+export function initDiagramDefaults(cfg) {
+  _cache = cfg.diagramDefaults || null;
+}
+
+export function getDiagramDefaults() {
+  return _cache;
+}
+
+// Returns the effective defaults for a shape, merging project defaults over system defaults.
+export function getShapeDefaults(shapeType) {
+  const system = SHAPE_SYSTEM_DEFAULTS[shapeType] || SHAPE_SYSTEM_DEFAULTS.box;
+  const project = _cache?.shapes?.[shapeType] || {};
+  return { ...system, ...project };
+}
+
+// Returns the effective defaults for arrows.
+export function getArrowDefaults() {
+  const project = _cache?.arrows || {};
+  return { ...ARROW_SYSTEM_DEFAULTS, ...project };
+}
+
+// ── Modal ─────────────────────────────────────────────────────────────────────
+
+function buildNodeColorEntries() {
+  return DEFAULT_NODE_PALETTE.map((key) => {
+    const c = effectiveNodeColor(key);
+    return { value: key, bg: c.bg, border: c.border, label: key.replace('c-', '') };
+  });
+}
+
+function buildColorSwatch(selectedKey, shape) {
+  const c = effectiveNodeColor(selectedKey);
+  return `
+    <button type="button" class="ld-color-swatch-trigger" data-shape="${shape}"
+      style="width:2rem;height:1.4rem;border-radius:0.25rem;border:2px solid ${c.border};background:${c.bg};cursor:pointer;flex-shrink:0;"
+      title="${selectedKey.replace('c-', '')}">
+    </button>`;
+}
+
+function renderModal() {
+  const existing = document.getElementById('diagramDefaultsModal');
+  if (existing) existing.remove();
+
+  const effective = {
+    arrows: getArrowDefaults(),
+    shapes: Object.fromEntries(SHAPE_KEYS.map((k) => [k, getShapeDefaults(k)])),
+  };
+
+  const shapeLabels = {
+    box: t('diagram.defaults.shape.box'),
+    ellipse: t('diagram.defaults.shape.ellipse'),
+    circle: t('diagram.defaults.shape.circle'),
+    database: t('diagram.defaults.shape.database'),
+    actor: t('diagram.defaults.shape.actor'),
+    'post-it': t('diagram.defaults.shape.postit'),
+    'text-free': t('diagram.defaults.shape.text_free'),
+  };
+
+  const arrowDirOptions = ['none', 'from', 'to', 'both'].map((d) => {
+    const labels = { none: '—', from: '←', to: '→', both: '←→' };
+    const sel = d === effective.arrows.arrowDir ? 'selected' : '';
+    return `<option value="${d}" ${sel}>${labels[d]}</option>`;
+  }).join('');
+
+  const inputStyle = 'width:3.5rem;font-size:0.75rem;border:1px solid #d1d5db;border-radius:0.375rem;padding:0.2rem 0.4rem;background:inherit;color:inherit;text-align:center;';
+
+  const shapeRows = SHAPE_KEYS.map((key) => {
+    const sd = effective.shapes[key];
+    return `
+    <tr data-shape="${key}" style="border-top:1px solid var(--ld-modal-sep,#f3f4f6);">
+      <td style="padding:0.45rem 0.5rem 0.45rem 0;font-size:0.8rem;font-weight:500;white-space:nowrap;">${shapeLabels[key]}</td>
+      <td style="padding:0.45rem 0.25rem;text-align:center;">
+        <input type="number" class="ld-defaults-input ld-defaults-width" data-shape="${key}" min="10" max="800" value="${sd.width}" style="${inputStyle}" />
+      </td>
+      <td style="padding:0.45rem 0.25rem;text-align:center;">
+        <input type="number" class="ld-defaults-input ld-defaults-height" data-shape="${key}" min="10" max="800" value="${sd.height}" style="${inputStyle}" />
+      </td>
+      <td style="padding:0.45rem 0.25rem;text-align:center;">
+        <input type="number" class="ld-defaults-input ld-defaults-font" data-shape="${key}" min="6" max="72" value="${sd.fontSize}" style="${inputStyle}" />
+      </td>
+      <td style="padding:0.45rem 0.25rem;text-align:center;">
+        ${buildColorSwatch(sd.colorKey, key)}
+        <input type="hidden" class="ld-defaults-color-key" data-shape="${key}" value="${sd.colorKey}" />
+      </td>
+    </tr>`;
+  }).join('');
+
+  const modal = document.createElement('div');
+  modal.id = 'diagramDefaultsModal';
+  modal.style.cssText = 'position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;';
+  modal.innerHTML = `
+    <div class="ld-defaults-panel" style="
+      background:var(--ld-modal-bg,white);
+      border-radius:0.75rem;
+      box-shadow:0 8px 32px rgba(0,0,0,0.22);
+      width:min(560px,95vw);
+      max-height:85vh;
+      display:flex;flex-direction:column;
+      overflow:hidden;
+      color:var(--ld-modal-color,#111827);
+    ">
+      <!-- Header -->
+      <div style="display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1rem;border-bottom:1px solid var(--ld-modal-sep,#e5e7eb);flex-shrink:0;">
+        <span style="font-size:0.875rem;font-weight:600;">${t('diagram.defaults.title')}</span>
+        <button id="btnDefaultsClose" style="background:none;border:none;cursor:pointer;font-size:1rem;color:currentColor;padding:0.25rem;">✕</button>
+      </div>
+
+      <!-- Body -->
+      <div style="overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1.25rem;">
+
+        <!-- Arrows section -->
+        <section>
+          <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:0.5rem;">${t('diagram.defaults.section.arrows')}</div>
+          <div style="display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;">
+            <div style="display:flex;align-items:center;gap:0.375rem;">
+              <label style="font-size:0.75rem;">${t('diagram.defaults.field.direction')}</label>
+              <select id="defaultArrowDir" style="font-size:0.75rem;border:1px solid #d1d5db;border-radius:0.375rem;padding:0.2rem 0.4rem;background:inherit;color:inherit;">
+                ${arrowDirOptions}
+              </select>
+            </div>
+            <div style="display:flex;align-items:center;gap:0.375rem;">
+              <label style="font-size:0.75rem;">${t('diagram.defaults.field.style')}</label>
+              <select id="defaultArrowDashes" style="font-size:0.75rem;border:1px solid #d1d5db;border-radius:0.375rem;padding:0.2rem 0.4rem;background:inherit;color:inherit;">
+                <option value="false" ${!effective.arrows.dashes ? 'selected' : ''}>${t('diagram.defaults.style.solid')}</option>
+                <option value="true"  ${effective.arrows.dashes  ? 'selected' : ''}>${t('diagram.defaults.style.dashed')}</option>
+              </select>
+            </div>
+            <div style="display:flex;align-items:center;gap:0.375rem;">
+              <label style="font-size:0.75rem;">${t('diagram.defaults.field.font_size')}</label>
+              <input id="defaultArrowFontSize" type="number" min="6" max="72" value="${effective.arrows.fontSize}"
+                style="width:3.5rem;font-size:0.75rem;border:1px solid #d1d5db;border-radius:0.375rem;padding:0.2rem 0.4rem;background:inherit;color:inherit;" />
+            </div>
+          </div>
+        </section>
+
+        <!-- Shapes section -->
+        <section>
+          <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:0.5rem;">${t('diagram.defaults.section.shapes')}</div>
+          <table style="width:100%;border-collapse:collapse;">
+            <thead>
+              <tr>
+                <th style="font-size:0.7rem;font-weight:500;color:#9ca3af;text-align:left;padding:0 0.5rem 0.4rem 0;"></th>
+                <th style="font-size:0.7rem;font-weight:500;color:#9ca3af;text-align:center;padding:0 0.25rem 0.4rem;">${t('diagram.defaults.field.width')}</th>
+                <th style="font-size:0.7rem;font-weight:500;color:#9ca3af;text-align:center;padding:0 0.25rem 0.4rem;">${t('diagram.defaults.field.height')}</th>
+                <th style="font-size:0.7rem;font-weight:500;color:#9ca3af;text-align:center;padding:0 0.25rem 0.4rem;">${t('diagram.defaults.field.font_size')}</th>
+                <th style="font-size:0.7rem;font-weight:500;color:#9ca3af;text-align:center;padding:0 0.25rem 0.4rem;">${t('diagram.defaults.field.color')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${shapeRows}
+            </tbody>
+          </table>
+        </section>
+      </div>
+
+      <!-- Footer -->
+      <div style="display:flex;justify-content:flex-end;gap:0.5rem;padding:0.75rem 1rem;border-top:1px solid var(--ld-modal-sep,#e5e7eb);flex-shrink:0;">
+        <button id="btnDefaultsReset" style="font-size:0.75rem;padding:0.375rem 0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;background:none;cursor:pointer;color:currentColor;">${t('common.reset')}</button>
+        <button id="btnDefaultsSave" style="font-size:0.75rem;padding:0.375rem 0.875rem;border-radius:0.5rem;background:#3b82f6;color:white;border:none;cursor:pointer;font-weight:600;">${t('common.save')}</button>
+      </div>
+    </div>
+  `;
+
+  // Adapt to dark mode
+  const isDark = document.documentElement.classList.contains('dark');
+  if (isDark) {
+    const panel = modal.querySelector('.ld-defaults-panel');
+    panel.style.setProperty('--ld-modal-bg', '#1f2937');
+    panel.style.setProperty('--ld-modal-color', '#f3f4f6');
+    panel.style.setProperty('--ld-modal-sep', '#374151');
+    panel.style.background = '#1f2937';
+    panel.style.color = '#f3f4f6';
+    modal.querySelectorAll('input,select').forEach((el) => {
+      el.style.background = '#111827';
+      el.style.color = '#f3f4f6';
+      el.style.borderColor = '#4b5563';
+    });
+  }
+
+  document.body.appendChild(modal);
+
+  // Wire color swatch triggers
+  modal.querySelectorAll('.ld-color-swatch-trigger').forEach((trigger) => {
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const shape = trigger.dataset.shape;
+      const currentKey = modal.querySelector(`.ld-defaults-color-key[data-shape="${shape}"]`).value;
+      openColorPickerPopup(trigger, buildNodeColorEntries(), currentKey, (entry) => {
+        const c = effectiveNodeColor(entry.value);
+        modal.querySelector(`.ld-defaults-color-key[data-shape="${shape}"]`).value = entry.value;
+        trigger.style.background = c.bg;
+        trigger.style.borderColor = c.border;
+        trigger.title = entry.label;
+      });
+    });
+  });
+
+  // Close
+  const closeModal = () => { closeAllColorPickerPopups(); modal.remove(); };
+  modal.querySelector('#btnDefaultsClose').addEventListener('click', closeModal);
+  modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
+
+  // Reset to system defaults
+  modal.querySelector('#btnDefaultsReset').addEventListener('click', async () => {
+    try {
+      await fetch('/api/config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ diagramDefaults: null }),
+      });
+      _cache = null;
+      // Vider les clés localStorage pour revenir aux valeurs système
+      SHAPE_KEYS.forEach((key) => localStorage.removeItem('ld-node-style-' + key));
+      localStorage.removeItem('ld-free-arrow-style');
+      modal.remove();
+    } catch (err) {
+      console.error('Failed to reset diagram defaults', err);
+    }
+  });
+
+  // Save
+  modal.querySelector('#btnDefaultsSave').addEventListener('click', async () => {
+    const arrows = {
+      fontSize: parseInt(modal.querySelector('#defaultArrowFontSize').value, 10) || 11,
+      arrowDir: modal.querySelector('#defaultArrowDir').value,
+      dashes: modal.querySelector('#defaultArrowDashes').value === 'true',
+    };
+    const shapes = {};
+    SHAPE_KEYS.forEach((key) => {
+      shapes[key] = {
+        width:    parseInt(modal.querySelector(`.ld-defaults-width[data-shape="${key}"]`).value, 10)   || SHAPE_SYSTEM_DEFAULTS[key].width,
+        height:   parseInt(modal.querySelector(`.ld-defaults-height[data-shape="${key}"]`).value, 10)  || SHAPE_SYSTEM_DEFAULTS[key].height,
+        fontSize: parseInt(modal.querySelector(`.ld-defaults-font[data-shape="${key}"]`).value, 10)    || SHAPE_SYSTEM_DEFAULTS[key].fontSize,
+        colorKey: modal.querySelector(`.ld-defaults-color-key[data-shape="${key}"]`).value             || SHAPE_SYSTEM_DEFAULTS[key].colorKey,
+      };
+    });
+    try {
+      const res = await fetch('/api/config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ diagramDefaults: { arrows, shapes } }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      _cache = { arrows, shapes };
+      // Sync localStorage: chaque clé de forme + flèches
+      SHAPE_KEYS.forEach((key) => {
+        localStorage.setItem('ld-node-style-' + key, JSON.stringify({
+          colorKey:   shapes[key].colorKey,
+          fontSize:   shapes[key].fontSize,
+          width:      shapes[key].width,
+          height:     shapes[key].height,
+          textAlign:  null,
+          textValign: null,
+        }));
+      });
+      localStorage.setItem('ld-free-arrow-style', JSON.stringify({
+        arrowDir:  arrows.arrowDir,
+        dashes:    arrows.dashes,
+        fontSize:  arrows.fontSize,
+        edgeColor: null,
+        edgeWidth: null,
+      }));
+      modal.remove();
+    } catch (err) {
+      console.error('Failed to save diagram defaults', err);
+    }
+  });
+}
+
+export function openDefaultsModal() {
+  renderModal();
+}