npm - living-documentation - Versions diffs - 7.0.0 - Mend

living-documentation 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/LICENSE +661 -0
package/README.md +329 -0
package/dist/bin/cli.d.ts +3 -0
package/dist/bin/cli.d.ts.map +1 -0
package/dist/bin/cli.js +62 -0
package/dist/bin/cli.js.map +1 -0
package/dist/src/frontend/admin.html +1073 -0
package/dist/src/frontend/annotations.js +546 -0
package/dist/src/frontend/boot.js +90 -0
package/dist/src/frontend/config.js +19 -0
package/dist/src/frontend/dark-mode.js +20 -0
package/dist/src/frontend/diagram/alignment.js +161 -0
package/dist/src/frontend/diagram/clipboard.js +172 -0
package/dist/src/frontend/diagram/constants.js +109 -0
package/dist/src/frontend/diagram/debug.js +43 -0
package/dist/src/frontend/diagram/edge-panel.js +260 -0
package/dist/src/frontend/diagram/edge-rendering.js +12 -0
package/dist/src/frontend/diagram/grid.js +78 -0
package/dist/src/frontend/diagram/groups.js +102 -0
package/dist/src/frontend/diagram/history.js +153 -0
package/dist/src/frontend/diagram/image-name-modal.js +48 -0
package/dist/src/frontend/diagram/image-upload.js +36 -0
package/dist/src/frontend/diagram/label-editor.js +115 -0
package/dist/src/frontend/diagram/link-panel.js +144 -0
package/dist/src/frontend/diagram/main.js +299 -0
package/dist/src/frontend/diagram/network.js +1473 -0
package/dist/src/frontend/diagram/node-panel.js +267 -0
package/dist/src/frontend/diagram/node-rendering.js +773 -0
package/dist/src/frontend/diagram/persistence.js +161 -0
package/dist/src/frontend/diagram/ports.js +386 -0
package/dist/src/frontend/diagram/selection-overlay.js +336 -0
package/dist/src/frontend/diagram/state.js +39 -0
package/dist/src/frontend/diagram/t.js +3 -0
package/dist/src/frontend/diagram/toast.js +21 -0
package/dist/src/frontend/diagram/unlock-hold.js +182 -0
package/dist/src/frontend/diagram/zoom.js +20 -0
package/dist/src/frontend/diagram-link-modal.js +137 -0
package/dist/src/frontend/diagram.html +1279 -0
package/dist/src/frontend/documents.js +373 -0
package/dist/src/frontend/export.js +338 -0
package/dist/src/frontend/i18n/en.json +406 -0
package/dist/src/frontend/i18n/fr.json +406 -0
package/dist/src/frontend/i18n.js +32 -0
package/dist/src/frontend/image-paste.js +101 -0
package/dist/src/frontend/index.html +2314 -0
package/dist/src/frontend/misc.js +25 -0
package/dist/src/frontend/new-doc-modal.js +260 -0
package/dist/src/frontend/new-folder-modal.js +174 -0
package/dist/src/frontend/search.js +157 -0
package/dist/src/frontend/sidebar-helpers.js +58 -0
package/dist/src/frontend/sidebar.js +182 -0
package/dist/src/frontend/snippet-detect.js +25 -0
package/dist/src/frontend/snippet-table.js +85 -0
package/dist/src/frontend/snippet-tree.js +94 -0
package/dist/src/frontend/snippets.js +534 -0
package/dist/src/frontend/state.js +28 -0
package/dist/src/frontend/utils.js +21 -0
package/dist/src/frontend/vendor/wordcloud2.js +1187 -0
package/dist/src/frontend/wordcloud.js +693 -0
package/dist/src/lib/config.d.ts +17 -0
package/dist/src/lib/config.d.ts.map +1 -0
package/dist/src/lib/config.js +79 -0
package/dist/src/lib/config.js.map +1 -0
package/dist/src/lib/parser.d.ts +11 -0
package/dist/src/lib/parser.d.ts.map +1 -0
package/dist/src/lib/parser.js +111 -0
package/dist/src/lib/parser.js.map +1 -0
package/dist/src/mcp/server.d.ts +3 -0
package/dist/src/mcp/server.d.ts.map +1 -0
package/dist/src/mcp/server.js +986 -0
package/dist/src/mcp/server.js.map +1 -0
package/dist/src/mcp/tools/diagrams.d.ts +44 -0
package/dist/src/mcp/tools/diagrams.d.ts.map +1 -0
package/dist/src/mcp/tools/diagrams.js +245 -0
package/dist/src/mcp/tools/diagrams.js.map +1 -0
package/dist/src/mcp/tools/documents.d.ts +26 -0
package/dist/src/mcp/tools/documents.d.ts.map +1 -0
package/dist/src/mcp/tools/documents.js +127 -0
package/dist/src/mcp/tools/documents.js.map +1 -0
package/dist/src/mcp/tools/source.d.ts +29 -0
package/dist/src/mcp/tools/source.d.ts.map +1 -0
package/dist/src/mcp/tools/source.js +200 -0
package/dist/src/mcp/tools/source.js.map +1 -0
package/dist/src/routes/annotations.d.ts +3 -0
package/dist/src/routes/annotations.d.ts.map +1 -0
package/dist/src/routes/annotations.js +83 -0
package/dist/src/routes/annotations.js.map +1 -0
package/dist/src/routes/browse.d.ts +3 -0
package/dist/src/routes/browse.d.ts.map +1 -0
package/dist/src/routes/browse.js +75 -0
package/dist/src/routes/browse.js.map +1 -0
package/dist/src/routes/config.d.ts +3 -0
package/dist/src/routes/config.d.ts.map +1 -0
package/dist/src/routes/config.js +97 -0
package/dist/src/routes/config.js.map +1 -0
package/dist/src/routes/diagrams.d.ts +3 -0
package/dist/src/routes/diagrams.d.ts.map +1 -0
package/dist/src/routes/diagrams.js +69 -0
package/dist/src/routes/diagrams.js.map +1 -0
package/dist/src/routes/documents.d.ts +8 -0
package/dist/src/routes/documents.d.ts.map +1 -0
package/dist/src/routes/documents.js +332 -0
package/dist/src/routes/documents.js.map +1 -0
package/dist/src/routes/export.d.ts +3 -0
package/dist/src/routes/export.d.ts.map +1 -0
package/dist/src/routes/export.js +277 -0
package/dist/src/routes/export.js.map +1 -0
package/dist/src/routes/images.d.ts +3 -0
package/dist/src/routes/images.d.ts.map +1 -0
package/dist/src/routes/images.js +49 -0
package/dist/src/routes/images.js.map +1 -0
package/dist/src/routes/wordcloud.d.ts +3 -0
package/dist/src/routes/wordcloud.d.ts.map +1 -0
package/dist/src/routes/wordcloud.js +95 -0
package/dist/src/routes/wordcloud.js.map +1 -0
package/dist/src/server.d.ts +7 -0
package/dist/src/server.d.ts.map +1 -0
package/dist/src/server.js +76 -0
package/dist/src/server.js.map +1 -0
package/dist/starting-doc/.annotations.json +3 -0
package/dist/starting-doc/.diagrams.json +1884 -0
package/dist/starting-doc/.living-doc.json +39 -0
package/dist/starting-doc/1_tutorial/2026_04_11_13_25_[General]_crer_vos_dossiers.md +16 -0
package/dist/starting-doc/1_tutorial/2026_04_11_18_58_[General]_creer_un_document_dans_un_dossier.md +9 -0
package/dist/starting-doc/1_tutorial/2026_04_12_09_00_[General]_editer_et_sauvegarder.md +39 -0
package/dist/starting-doc/1_tutorial/2026_04_12_10_00_[General]_utiliser_les_snippets.md +71 -0
package/dist/starting-doc/2026_04_08_20_52_[General]_welcome.md +17 -0
package/dist/starting-doc/2026_04_11_12_55_[General]_premiers_pas.md +271 -0
package/dist/starting-doc/2_guide/2026_04_08_00_04_[DOCUMENT]_utilisation_des_images_plein_ecran_lien_clickable.md +40 -0
package/dist/starting-doc/2_guide/2026_04_08_23_38_[Configuration]_demarrage_de_living_documentation.md +32 -0
package/dist/starting-doc/2_guide/2026_04_09_09_00_[NAVIGATION]_recherche_plein_texte.md +65 -0
package/dist/starting-doc/2_guide/2026_04_09_10_00_[EXPORT]_exporter_en_pdf.md +43 -0
package/dist/starting-doc/2_guide/2026_04_09_11_00_[Configuration]_configurer_le_panneau_admin.md +55 -0
package/dist/starting-doc/2_guide/2026_04_09_12_00_[Configuration]_extra_files.md +68 -0
package/dist/starting-doc/2_guide/2026_04_09_13_00_[WORDCLOUD]_word_cloud.md +54 -0
package/dist/starting-doc/2_guide/2026_04_09_14_00_[DIAGRAM]_creer_et_lier_un_diagramme.md +77 -0
package/dist/starting-doc/3_concept/2026_04_08_20_58_[DOCUMENTING]_ADRS.md +20 -0
package/dist/starting-doc/3_concept/2026_04_08_22_15_[DOCUMENTING]_living_documentation.md +17 -0
package/dist/starting-doc/3_concept/2026_04_08_22_46_[METHODOLOGY]_diataxis_architecture_du_contenu.md +16 -0
package/dist/starting-doc/4_reference/2026_04_08_23_14_[FUNDAMENTALS]_the_living_documentation_tool.md +41 -0
package/dist/starting-doc/4_reference/2026_04_09_01_00_[REFERENCE]_raccourcis_clavier.md +61 -0
package/dist/starting-doc/4_reference/2026_04_09_02_00_[REFERENCE]_tokens_pattern_nommage.md +75 -0
package/dist/starting-doc/4_reference/2026_04_09_03_00_[REFERENCE]_types_de_snippets.md +68 -0
package/dist/starting-doc/4_reference/2026_04_11_17_31_[FUNDAMENTALS]_architecturer_une_documentation.md +12 -0
package/dist/starting-doc/4_reference/2026_04_12_14_07_[FUNDAMENTALS]_dossiers_et_catgories.md +89 -0
package/dist/starting-doc/images/admin_screenshot.png +0 -0
package/dist/starting-doc/images/ajout-document.png +0 -0
package/dist/starting-doc/images/ajouter-document-categorie.png +0 -0
package/dist/starting-doc/images/ajouter_un_document_dans_un_dossier.png +0 -0
package/dist/starting-doc/images/architecturer_une_documentation_reference.png +0 -0
package/dist/starting-doc/images/cr_er_un_document.png +0 -0
package/dist/starting-doc/images/creation-nouveau-dossier.png +0 -0
package/dist/starting-doc/images/creer-document-context-engineering.png +0 -0
package/dist/starting-doc/images/creer-dossier-only-tutoriel.png +0 -0
package/dist/starting-doc/images/creer-dossier-tutoriel.png +0 -0
package/dist/starting-doc/images/creer-dossiers-done.png +0 -0
package/dist/starting-doc/images/creer-un-document.png +0 -0
package/dist/starting-doc/images/creer-vos-dossiers-tutoriel.png +0 -0
package/dist/starting-doc/images/creer-vos-dossiers.png +0 -0
package/dist/starting-doc/images/decouverte_adrs.png +0 -0
package/dist/starting-doc/images/diataxis.png +0 -0
package/dist/starting-doc/images/diataxis_callout.png +0 -0
package/dist/starting-doc/images/document-cree.png +0 -0
package/dist/starting-doc/images/liens_snippets.png +0 -0
package/dist/starting-doc/images/living_documentation.png +0 -0
package/dist/starting-doc/images/npm_logo.png +0 -0
package/dist/starting-doc/images/popup-creer-document.png +0 -0
package/dist/starting-doc/images/popup-creer-dossier.png +0 -0
package/dist/starting-doc/images/popup-dossier-cree.png +0 -0
package/dist/starting-doc/images/quatre-dossiers-crees.png +0 -0
package/dist/starting-doc/images/screenshot-living-doc.png +0 -0
package/dist/starting-doc/images/the_living_documentation_tool.png +0 -0
package/package.json +49 -0

package/dist/src/frontend/diagram.html ADDED Viewed

@@ -0,0 +1,1279 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Diagram — Living Documentation</title>
+    <script src="/i18n.js"></script>
+    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <script>
+      tailwind.config = { darkMode: "class", theme: { extend: {} } };
+    </script>
+    <script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script>
+    <style>
+      #vis-canvas > div {
+        border: none !important;
+      }
+      .tool-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        cursor: pointer;
+        flex-shrink: 0;
+        transition:
+          background-color 0.15s,
+          color 0.15s;
+        color: #4b5563;
+        background: none;
+        border: none;
+      }
+      .dark .tool-btn {
+        color: #9ca3af;
+      }
+      .tool-btn:hover {
+        background: #f3f4f6;
+      }
+      .dark .tool-btn:hover {
+        background: #1f2937;
+      }
+      .tool-active {
+        background: #fff7ed !important;
+        color: #ea580c !important;
+      }
+      .dark .tool-active {
+        background: rgba(124, 45, 18, 0.3) !important;
+        color: #fb923c !important;
+      }
+      #vis-canvas.cursor-crosshair canvas {
+        cursor: crosshair !important;
+      }
+      /* Floating panels */
+      .float-panel {
+        position: absolute;
+        top: 0.75rem;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.375rem 0.5rem;
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        z-index: 10;
+      }
+      .dark .float-panel {
+        background: #1f2937;
+        border-color: #374151;
+      }
+      .float-panel.hidden {
+        display: none !important;
+      }
+      .panel-sep {
+        width: 1px;
+        height: 1rem;
+        background: #e5e7eb;
+        margin: 0 0.125rem;
+        flex-shrink: 0;
+      }
+      .dark .panel-sep {
+        background: #374151;
+      }
+      .edge-btn-active {
+        background: #fff7ed !important;
+        color: #ea580c !important;
+      }
+      .dark .edge-btn-active {
+        background: rgba(124, 45, 18, 0.3) !important;
+        color: #fb923c !important;
+      }
+      /* Floating label textarea */
+      #labelInput {
+        position: absolute;
+        z-index: 20;
+        padding: 4px 8px;
+        font-size: 13px;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        font-weight: 500;
+        text-align: center;
+        background: rgba(255, 255, 255, 0.95);
+        color: #1f2937;
+        border: 2px solid #3b82f6;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+        outline: none;
+        resize: none;
+        overflow: hidden;
+        line-height: 1.4;
+        min-width: 80px;
+        min-height: 28px;
+      }
+      .dark #labelInput {
+        background: rgba(17, 24, 39, 0.95);
+        color: #f3f4f6;
+      }
+      #labelInput.hidden {
+        display: none;
+      }
+      /* Debug overlay layer */
+      #debugLayer {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 12;
+        overflow: hidden;
+      }
+      .debug-box {
+        position: absolute;
+        pointer-events: auto;
+        font: 10px/1.4 monospace;
+        white-space: pre;
+        user-select: text;
+        cursor: text;
+        padding: 3px 6px;
+        border: 1px solid #f97316;
+        border-radius: 3px;
+        color: #c2410c;
+        background: rgba(255, 255, 255, 0.9);
+      }
+      .dark .debug-box {
+        color: #fbbf24;
+        background: rgba(0, 0, 0, 0.78);
+      }
+      /* Resize / rotation / selection overlay */
+      #selectionOverlay {
+        position: absolute;
+        display: none;
+        border: 2px dashed #f97316;
+        border-radius: 3px;
+        pointer-events: none;
+        z-index: 15;
+        box-sizing: border-box;
+      }
+      .resize-handle {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background: white;
+        border: 2px solid #f97316;
+        border-radius: 2px;
+        pointer-events: all;
+        z-index: 1;
+      }
+      .dark .resize-handle {
+        background: #374151;
+      }
+      #rh-rotate {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: white;
+        border: 2px solid #f97316;
+        border-radius: 50%;
+        pointer-events: all;
+        z-index: 1;
+        cursor: grab;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        color: #f97316;
+      }
+      #rh-rotate:active { cursor: grabbing; }
+      .dark #rh-rotate { background: #374151; }
+      #rh-label-rotate {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: white;
+        border: 2px solid #6366f1;
+        border-radius: 50%;
+        pointer-events: all;
+        z-index: 1;
+        cursor: grab;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        color: #6366f1;
+      }
+      #rh-label-rotate:active { cursor: grabbing; }
+      .dark #rh-label-rotate { background: #374151; }
+      /* Toast notifications */
+      #toastContainer {
+        position: fixed;
+        bottom: 1.5rem;
+        right: 1.5rem;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0.5rem;
+        z-index: 1000;
+        pointer-events: none;
+      }
+      .ld-toast {
+        pointer-events: all;
+        padding: 0.6rem 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        font-weight: 500;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+        cursor: pointer;
+        opacity: 0;
+        transform: translateY(0.5rem);
+        transition: opacity 0.2s ease, transform 0.2s ease;
+        background: #1c1917;
+        color: #fafaf9;
+        border: 1px solid #292524;
+      }
+      .dark .ld-toast {
+        background: #fafaf9;
+        color: #1c1917;
+        border-color: #e7e5e4;
+      }
+      .ld-toast--error {
+        background: #7f1d1d;
+        color: #fef2f2;
+        border-color: #991b1b;
+      }
+      .ld-toast--visible {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    </style>
+  </head>
+  <body
+    class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 flex flex-col h-screen overflow-hidden"
+  >
+    <script>
+      const _d = localStorage.getItem("ld-dark") === "true";
+      document.documentElement.classList.toggle("dark", _d);
+    </script>
+    <!-- ── Top bar ── -->
+    <header
+      class="flex items-center gap-1 px-2 h-12 shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm z-10"
+    >
+      <button
+        onclick="history.back()"
+        class="tool-btn !w-auto px-2 text-xs font-medium text-gray-500 dark:text-gray-400"
+        data-i18n="diagram.back_btn">← Back</button
+      >
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button id="btnSidebar" class="tool-btn" data-i18n-title="diagram.diagrams_list_title">
+        ☰
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button
+        id="toolSelect"
+        class="tool-btn tool-active"
+        data-i18n-title="diagram.toolbar.select"
+      >
+        <svg
+          width="11"
+          height="13"
+          viewBox="0 0 11 13"
+          fill="currentColor"
+          stroke="none"
+        >
+          <path d="M1 1 L1 12 L4 9 L6.5 13 L8 12.2 L5.5 8.2 L10 8.2 Z" />
+        </svg>
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button
+        id="toolBox"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.box"
+      >
+        <svg
+          width="15"
+          height="10"
+          viewBox="0 0 15 10"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <rect x="1" y="1" width="13" height="8" rx="1" />
+        </svg>
+      </button>
+      <button
+        id="toolEllipse"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.ellipse"
+      >
+        <svg
+          width="16"
+          height="10"
+          viewBox="0 0 16 10"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <ellipse cx="8" cy="5" rx="7" ry="4" />
+        </svg>
+      </button>
+      <button
+        id="toolDatabase"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.database"
+      >
+        <svg
+          width="12"
+          height="16"
+          viewBox="0 0 12 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        >
+          <ellipse cx="6" cy="3" rx="5" ry="2" />
+          <path d="M1 3v10c0 1.1 2.2 2 5 2s5-.9 5-2V3" />
+          <path d="M11 7.5c0 1.1-2.2 2-5 2s-5-.9-5-2" />
+        </svg>
+      </button>
+      <button
+        id="toolCircle"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.circle"
+      >
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 13 13"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <circle cx="6.5" cy="6.5" r="5.5" />
+        </svg>
+      </button>
+      <button
+        id="toolActor"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.actor"
+      >
+        <svg
+          width="12"
+          height="17"
+          viewBox="0 0 12 17"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        >
+          <circle cx="6" cy="3" r="2.2" />
+          <line x1="6" y1="5.2" x2="6" y2="10" />
+          <line x1="1.5" y1="7.5" x2="10.5" y2="7.5" />
+          <line x1="6" y1="10" x2="2.5" y2="15" />
+          <line x1="6" y1="10" x2="9.5" y2="15" />
+        </svg>
+      </button>
+      <button
+        id="toolPostIt"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.postit"
+      >
+        <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.4">
+          <path d="M1 1 H9 L12 4 V12 H1 Z" />
+          <path d="M9 1 V4 H12" stroke-opacity="0.5"/>
+        </svg>
+      </button>
+      <button
+        id="toolTextFree"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.text_free"
+        style="font-size:11px; font-weight:600;"
+      >
+        T
+      </button>
+      <button
+        id="toolImage"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.image"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="1" y="1" width="12" height="12" rx="1.5"/>
+          <circle cx="4.5" cy="4.5" r="1.2"/>
+          <path d="M1 9.5 L4 6.5 L6.5 9 L9 7 L13 10.5"/>
+        </svg>
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button
+        id="toolArrow"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.arrow"
+      >
+        →
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button
+        id="btnDelete"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.delete"
+      >
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 11 11"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+        >
+          <line x1="1" y1="1" x2="10" y2="10" />
+          <line x1="10" y1="1" x2="1" y2="10" />
+        </svg>
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button
+        id="btnAlign"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.align_guides"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.4"
+        >
+          <line x1="0.5" y1="7.5" x2="13.5" y2="7.5" />
+          <line x1="3.5" y1="0.5" x2="3.5" y2="13.5" stroke-dasharray="1.5 1.5" />
+          <line x1="10.5" y1="0.5" x2="10.5" y2="13.5" stroke-dasharray="1.5 1.5" />
+        </svg>
+      </button>
+      <button
+        id="btnGrid"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.grid"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.2"
+        >
+          <line x1="5" y1="1" x2="5" y2="13" />
+          <line x1="9" y1="1" x2="9" y2="13" />
+          <line x1="1" y1="5" x2="13" y2="5" />
+          <line x1="1" y1="9" x2="13" y2="9" />
+          <rect x="1" y="1" width="12" height="12" rx="1" />
+        </svg>
+      </button>
+      <button
+        id="btnEdgeStraight"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.edge_style"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+          <line x1="2" y1="12" x2="12" y2="2" />
+          <polyline points="8,2 12,2 12,6" />
+        </svg>
+      </button>
+      <button
+        id="btnResizeMode"
+        class="tool-btn active-tool"
+        data-i18n-title="diagram.toolbar.resize_corner"
+      >
+        <!-- icon-resize-corner: dashed square + single arrow top-right → bottom-left -->
+        <svg id="icon-resize-corner" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="1" y="1" width="12" height="12" stroke-dasharray="2.5 2" />
+          <line x1="4" y1="4" x2="10" y2="10" />
+          <polyline points="7,10 10,10 10,7" />
+        </svg>
+        <!-- icon-resize-center: dashed square + two double-headed diagonal arrows -->
+        <svg id="icon-resize-center" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="hidden">
+          <rect x="1" y="1" width="12" height="12" stroke-dasharray="2.5 2" />
+          <line x1="4" y1="4" x2="10" y2="10" />
+          <polyline points="4,6.5 4,4 6.5,4" />
+          <polyline points="10,7.5 10,10 7.5,10" />
+          <line x1="10" y1="4" x2="4" y2="10" />
+          <polyline points="7.5,4 10,4 10,6.5" />
+          <polyline points="4,7.5 4,10 6.5,10" />
+        </svg>
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <input
+        id="diagramTitle"
+        type="text"
+        data-i18n-placeholder="diagram.toolbar.title_placeholder" placeholder="Diagram title"
+        class="flex-1 min-w-0 px-2 py-1 text-sm bg-transparent border-0 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded text-gray-700 dark:text-gray-300 placeholder:text-gray-400"
+      />
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button id="btnZoomOut" class="tool-btn" data-i18n-title="diagram.toolbar.zoom_out">
+        −
+      </button>
+      <span
+        id="zoomLevel"
+        class="text-xs text-gray-500 dark:text-gray-400 w-10 text-center tabular-nums select-none"
+        >100%</span
+      >
+      <button id="btnZoomIn" class="tool-btn" data-i18n-title="diagram.toolbar.zoom_in">
+        +
+      </button>
+      <button id="btnZoomReset" class="tool-btn" data-i18n-title="diagram.toolbar.fit">
+        ⊡
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button id="btnDark" class="tool-btn">
+        <span id="darkIcon">☽</span>
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+      <button
+        id="btnDebug"
+        class="hidden tool-btn text-xs font-mono"
+        data-i18n-title="diagram.toolbar.debug"
+      >
+        dbg
+      </button>
+      <div
+        id="sepDebug"
+        class="hidden w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"
+      ></div>
+      <button
+        id="btnSave"
+        disabled
+        class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40 disabled:cursor-not-allowed shrink-0 transition-colors"
+      >
+        <span data-i18n="diagram.toolbar.save">Save</span>
+      </button>
+    </header>
+    <!-- ── Body ── -->
+    <div class="flex flex-1 overflow-hidden">
+      <!-- Sidebar -->
+      <div
+        id="sidebar"
+        class="w-56 shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex flex-col overflow-hidden"
+        style="transition: width 0.2s ease"
+      >
+        <div
+          class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 shrink-0"
+        >
+          <span
+            class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+            data-i18n="diagram.sidebar.title">Diagrams</span
+          >
+          <button
+            id="btnNewDiagram"
+            class="text-xs font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+            data-i18n="diagram.sidebar.new_btn"
+          >
+            + New
+          </button>
+        </div>
+        <div id="diagramList" class="flex-1 overflow-y-auto py-1"></div>
+      </div>
+      <!-- Canvas area -->
+      <div class="relative flex-1 overflow-hidden bg-gray-50 dark:bg-gray-950">
+        <div id="vis-canvas" class="w-full h-full"></div>
+        <!-- Debug overlay layer -->
+        <div id="debugLayer"></div>
+        <!-- Stamp overlay: intercepts canvas clicks during stamp mode -->
+        <div id="stampOverlay" style="position:absolute;inset:0;display:none;z-index:11;cursor:crosshair;"></div>
+        <!-- Selection / resize overlay -->
+        <div id="selectionOverlay">
+          <div
+            id="rh-tl"
+            class="resize-handle"
+            style="top: -5px; left: -5px; cursor: nw-resize"
+          ></div>
+          <div
+            id="rh-tr"
+            class="resize-handle"
+            style="top: -5px; right: -5px; cursor: ne-resize"
+          ></div>
+          <div
+            id="rh-bl"
+            class="resize-handle"
+            style="bottom: -5px; left: -5px; cursor: sw-resize"
+          ></div>
+          <div
+            id="rh-br"
+            class="resize-handle"
+            style="bottom: -5px; right: -5px; cursor: se-resize"
+          ></div>
+          <div id="rh-rotate" data-i18n-title="diagram.selection.rotate_shape">↻</div>
+          <div id="rh-label-rotate" data-i18n-title="diagram.selection.rotate_text" style="left: 0; top: -28px;">
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <g transform="rotate(25,5,5)">
+                <line x1="2.5" y1="3" x2="7.5" y2="3"/>
+                <line x1="5" y1="3" x2="5" y2="8"/>
+              </g>
+            </svg>
+          </div>
+        </div>
+        <!-- Node panel -->
+        <div id="nodePanel" class="float-panel hidden">
+          <button
+            id="btnNodeLock"
+            class="tool-btn !w-6 !h-6 text-sm"
+            data-i18n-title="diagram.node_panel.lock"
+          >🔒</button>
+          <div class="panel-sep"></div>
+          <div id="nodePanelControls" class="contents">
+          <div id="nodePaletteContainer" class="contents"></div>
+          <div class="panel-sep"></div>
+          <input
+            id="nodeBgOpacity"
+            type="range"
+            min="0"
+            max="100"
+            step="5"
+            value="100"
+            class="w-16 h-1 accent-orange-500 cursor-pointer"
+            data-i18n-title="diagram.node_panel.bg_opacity"
+          />
+          <div class="panel-sep"></div>
+          <button
+            id="btnNodeLabelEdit"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.edit_label"
+          >
+            ✎
+          </button>
+          <button
+            id="btnNodeLink"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.edit_link"
+          >
+            <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M5 7.5a3.5 3.5 0 0 0 5 0l1.5-1.5a3.5 3.5 0 0 0-5-5L5 2.5"/>
+              <path d="M8 5.5a3.5 3.5 0 0 0-5 0L1.5 7a3.5 3.5 0 0 0 5 5L8 10.5"/>
+            </svg>
+          </button>
+          <div class="panel-sep"></div>
+          <button
+            id="btnNodeFontDecrease"
+            class="tool-btn !w-8 !h-6"
+            style="font-size: 10px"
+            data-i18n-title="diagram.node_panel.font_decrease"
+          >
+            Aa−
+          </button>
+          <button
+            id="btnNodeFontIncrease"
+            class="tool-btn !w-8 !h-6"
+            style="font-size: 10px"
+            data-i18n-title="diagram.node_panel.font_increase"
+          >
+            Aa+
+          </button>
+          <div class="panel-sep"></div>
+          <!-- Horizontal align -->
+          <button
+            id="btnAlignLeft"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.align_left"
+          >
+            <svg
+              width="12"
+              height="10"
+              viewBox="0 0 12 10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+            >
+              <line x1="1" y1="2" x2="11" y2="2" />
+              <line x1="1" y1="5" x2="7" y2="5" />
+              <line x1="1" y1="8" x2="9" y2="8" />
+            </svg>
+          </button>
+          <button
+            id="btnAlignCenter"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.align_center"
+          >
+            <svg
+              width="12"
+              height="10"
+              viewBox="0 0 12 10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+            >
+              <line x1="1" y1="2" x2="11" y2="2" />
+              <line x1="2.5" y1="5" x2="9.5" y2="5" />
+              <line x1="1.5" y1="8" x2="10.5" y2="8" />
+            </svg>
+          </button>
+          <button
+            id="btnAlignRight"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.align_right"
+          >
+            <svg
+              width="12"
+              height="10"
+              viewBox="0 0 12 10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+            >
+              <line x1="1" y1="2" x2="11" y2="2" />
+              <line x1="5" y1="5" x2="11" y2="5" />
+              <line x1="3" y1="8" x2="11" y2="8" />
+            </svg>
+          </button>
+          <div class="panel-sep"></div>
+          <!-- Vertical align -->
+          <button
+            id="btnValignTop"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.align_top"
+          >
+            <svg
+              width="10"
+              height="12"
+              viewBox="0 0 10 12"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+            >
+              <line x1="1" y1="1.5" x2="9" y2="1.5" stroke-width="2" />
+              <line x1="1" y1="5" x2="8" y2="5" stroke-width="1.3" />
+              <line x1="1" y1="8.5" x2="6" y2="8.5" stroke-width="1.3" />
+            </svg>
+          </button>
+          <button
+            id="btnValignMiddle"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.align_middle"
+          >
+            <svg
+              width="10"
+              height="12"
+              viewBox="0 0 10 12"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+            >
+              <line x1="1" y1="2.5" x2="8" y2="2.5" stroke-width="1.3" />
+              <line x1="1" y1="6" x2="9" y2="6" stroke-width="2" />
+              <line x1="1" y1="9.5" x2="6" y2="9.5" stroke-width="1.3" />
+            </svg>
+          </button>
+          <button
+            id="btnValignBottom"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.node_panel.align_bottom"
+          >
+            <svg
+              width="10"
+              height="12"
+              viewBox="0 0 10 12"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+            >
+              <line x1="1" y1="3.5" x2="8" y2="3.5" stroke-width="1.3" />
+              <line x1="1" y1="7" x2="6" y2="7" stroke-width="1.3" />
+              <line x1="1" y1="10.5" x2="9" y2="10.5" stroke-width="2" />
+            </svg>
+          </button>
+          <div class="panel-sep"></div>
+          <button
+            id="btnZOrderBack"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.node_panel.send_back"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <rect x="1" y="5" width="8" height="8" rx="1" />
+              <rect
+                x="5"
+                y="1"
+                width="8"
+                height="8"
+                rx="1"
+                stroke-opacity="0.35"
+              />
+            </svg>
+          </button>
+          <button
+            id="btnZOrderFront"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.node_panel.bring_front"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <rect
+                x="1"
+                y="5"
+                width="8"
+                height="8"
+                rx="1"
+                stroke-opacity="0.35"
+              />
+              <rect x="5" y="1" width="8" height="8" rx="1" />
+            </svg>
+          </button>
+          <div class="panel-sep"></div>
+          <!-- Stamp: copy color (goutte) -->
+          <button
+            id="btnStampColor"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.node_panel.stamp_color"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M7 2 C7 2 3 6.5 3 9 a4 4 0 0 0 8 0 C11 6.5 7 2 7 2 Z" fill="currentColor" fill-opacity="0.25"/>
+            </svg>
+          </button>
+          <!-- Stamp: copy font size -->
+          <button
+            id="btnStampFontSize"
+            class="tool-btn !w-7 !h-6 font-mono text-xs font-bold"
+            data-i18n-title="diagram.node_panel.stamp_font"
+          >Aa</button>
+          <!-- Stamp: copy size -->
+          <button
+            id="btnStampSize"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.node_panel.stamp_size"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="4" width="6" height="6" rx="0.8" fill="currentColor" fill-opacity="0.25"/>
+              <path d="M10 2 L12 2 L12 4"/>
+              <path d="M12 2 L9 5"/>
+              <path d="M10 12 L12 12 L12 10"/>
+              <path d="M12 12 L9 9"/>
+            </svg>
+          </button>
+          <div class="panel-sep"></div>
+          <!-- Rotation anti-horaire 10° -->
+          <button
+            id="btnRotateCCW"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.node_panel.rotate_ccw"
+            style="font-size:15px; line-height:1;"
+          >↺</button>
+          <!-- Rotation horaire 10° -->
+          <button
+            id="btnRotateCW"
+            class="tool-btn !w-7 !h-6"
+            data-i18n-title="diagram.node_panel.rotate_cw"
+            style="font-size:15px; line-height:1;"
+          >↻</button>
+          <div class="panel-sep"></div>
+          <!-- Copy as PNG -->
+          <button
+            id="btnCopyPng"
+            class="tool-btn !h-6 px-1.5 font-mono text-xs font-semibold flex items-center gap-0.5"
+            data-i18n-title="diagram.node_panel.copy_png"
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="5" y1="7" x2="5" y2="1"/>
+              <polyline points="2,4 5,1 8,4"/>
+              <line x1="1" y1="9" x2="9" y2="9"/>
+            </svg>
+            PNG
+          </button>
+          <div class="panel-sep"></div>
+          <!-- Group -->
+          <button
+            id="btnGroup"
+            class="tool-btn !w-8 !h-7"
+            data-i18n-title="diagram.node_panel.group"
+          >
+            <svg width="22" height="14" viewBox="0 0 22 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="0.7" y="1" width="20.6" height="12" rx="2" stroke-dasharray="2.5,1.5"/>
+              <rect x="4" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+              <rect x="15" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+            </svg>
+          </button>
+          <!-- Ungroup -->
+          <button
+            id="btnUngroup"
+            class="tool-btn !w-8 !h-7"
+            data-i18n-title="diagram.node_panel.ungroup"
+          >
+            <svg width="26" height="14" viewBox="0 0 26 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="0.7" y="1" width="9" height="12" rx="2" stroke-dasharray="2.5,1.5"/>
+              <rect x="3" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+              <rect x="16.3" y="1" width="9" height="12" rx="2" stroke-dasharray="2.5,1.5"/>
+              <rect x="19" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+            </svg>
+          </button>
+          </div><!-- /nodePanelControls -->
+        </div>
+        <!-- Link panel -->
+        <div id="linkPanel" class="float-panel hidden" style="min-width:260px; flex-direction:column; align-items:stretch; gap:0.5rem; padding:0.75rem;">
+          <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1" data-i18n="diagram.link_panel.title">Link on this shape</div>
+          <label class="flex items-center gap-2 text-xs cursor-pointer">
+            <input type="radio" name="linkType" id="linkTypeUrl" value="url" class="accent-orange-500"/>
+            <span data-i18n="diagram.link_panel.external">External URL</span>
+          </label>
+          <div id="linkUrlRow">
+            <input id="linkUrlInput" type="url" data-i18n-placeholder="diagram.link_panel.url_placeholder" placeholder="https://…"
+              class="w-full text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-orange-400"/>
+          </div>
+          <label class="flex items-center gap-2 text-xs cursor-pointer">
+            <input type="radio" name="linkType" id="linkTypeDiagram" value="diagram" class="accent-orange-500"/>
+            <span data-i18n="diagram.link_panel.existing_diagram">Existing diagram</span>
+          </label>
+          <div id="linkDiagramRow" class="hidden">
+            <select id="linkDiagramSelect"
+              class="w-full text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-orange-400">
+            </select>
+          </div>
+          <label class="flex items-center gap-2 text-xs cursor-pointer">
+            <input type="radio" name="linkType" id="linkTypeNew" value="new" class="accent-orange-500"/>
+            <span data-i18n="diagram.link_panel.new_diagram">New diagram</span>
+          </label>
+          <div id="linkNewRow" class="hidden">
+            <input id="linkNewName" type="text" data-i18n-placeholder="diagram.link_panel.diagram_name_placeholder" placeholder="Diagram name…"
+              class="w-full text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-orange-400"/>
+          </div>
+          <div class="flex gap-1 mt-1">
+            <button id="btnLinkSave"   class="flex-1 text-xs bg-orange-500 hover:bg-orange-600 text-white rounded px-2 py-1" data-i18n="diagram.link_panel.save_btn">Save</button>
+            <button id="btnLinkRemove" class="text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600" data-i18n="diagram.link_panel.remove_btn">Remove</button>
+            <button id="btnLinkCancel" class="text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700">✕</button>
+          </div>
+        </div>
+        <!-- Edge panel -->
+        <div id="edgePanel" class="float-panel hidden">
+          <button
+            id="btnEdgeLock"
+            class="tool-btn !w-6 !h-6 text-sm"
+            data-i18n-title="diagram.edge_panel.lock"
+          >🔒</button>
+          <div class="panel-sep"></div>
+          <div id="edgePanelControls" class="contents">
+          <button
+            id="edgeBtnNone"
+            class="tool-btn !w-7 !h-6 font-mono text-xs"
+            data-i18n-title="diagram.edge_panel.no_arrow"
+          >
+            —
+          </button>
+          <button
+            id="edgeBtnTo"
+            class="tool-btn !w-7 !h-6 text-xs"
+            data-i18n-title="diagram.edge_panel.arrow_to"
+          >
+            →
+          </button>
+          <button
+            id="edgeBtnBoth"
+            class="tool-btn !w-8 !h-6 text-xs"
+            data-i18n-title="diagram.edge_panel.arrow_both"
+          >
+            ←→
+          </button>
+          <div class="panel-sep"></div>
+          <button
+            id="edgeBtnSolid"
+            class="tool-btn !w-8 !h-6"
+            data-i18n-title="diagram.edge_panel.solid"
+          >
+            <svg width="22" height="4" viewBox="0 0 22 4">
+              <line
+                x1="1"
+                y1="2"
+                x2="21"
+                y2="2"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+          <button
+            id="edgeBtnDashed"
+            class="tool-btn !w-8 !h-6"
+            data-i18n-title="diagram.edge_panel.dashed"
+          >
+            <svg width="22" height="4" viewBox="0 0 22 4">
+              <line
+                x1="1"
+                y1="2"
+                x2="21"
+                y2="2"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-dasharray="4,3"
+              />
+            </svg>
+          </button>
+          <div class="panel-sep"></div>
+          <button
+            id="btnEdgeFontDecrease"
+            class="tool-btn !w-8 !h-6"
+            style="font-size: 10px"
+            data-i18n-title="diagram.edge_panel.font_decrease"
+          >
+            Aa−
+          </button>
+          <button
+            id="btnEdgeFontIncrease"
+            class="tool-btn !w-8 !h-6"
+            style="font-size: 10px"
+            data-i18n-title="diagram.edge_panel.font_increase"
+          >
+            Aa+
+          </button>
+          <div class="panel-sep"></div>
+          <button
+            id="btnEdgeLabelEdit"
+            class="tool-btn !w-6 !h-6"
+            data-i18n-title="diagram.edge_panel.edit_label"
+          >
+            ✎
+          </button>
+          <button
+            id="btnEdgeLabelWidthReset"
+            class="tool-btn !w-6 !h-6 text-xs"
+            data-i18n-title="diagram.edge_panel.reset_label_width"
+          >
+            ↔
+          </button>
+          <div class="panel-sep"></div>
+          <button
+            id="btnEdgeLabelRotateCCW"
+            class="tool-btn !w-7 !h-6 text-sm"
+            data-i18n-title="diagram.edge_panel.rotate_label_ccw"
+          >
+            ↺
+          </button>
+          <button
+            id="btnEdgeLabelRotateCW"
+            class="tool-btn !w-7 !h-6 text-sm"
+            data-i18n-title="diagram.edge_panel.rotate_label_cw"
+          >
+            ↻
+          </button>
+          <div class="panel-sep"></div>
+          <button
+            id="btnEdgeLabelOffsetLeft"
+            class="tool-btn !w-6 !h-6 text-sm"
+            data-i18n-title="diagram.edge_panel.offset_label_left"
+          >←</button>
+          <button
+            id="btnEdgeLabelOffsetRight"
+            class="tool-btn !w-6 !h-6 text-sm"
+            data-i18n-title="diagram.edge_panel.offset_label_right"
+          >→</button>
+          <button
+            id="btnEdgeLabelOffsetUp"
+            class="tool-btn !w-6 !h-6 text-sm"
+            data-i18n-title="diagram.edge_panel.offset_label_up"
+          >↑</button>
+          <button
+            id="btnEdgeLabelOffsetDown"
+            class="tool-btn !w-6 !h-6 text-sm"
+            data-i18n-title="diagram.edge_panel.offset_label_down"
+          >↓</button>
+          <button
+            id="btnEdgeLabelOffsetReset"
+            class="tool-btn !w-6 !h-6 text-xs"
+            data-i18n-title="diagram.edge_panel.offset_label_reset"
+          >⊙</button>
+          <div class="panel-sep"></div>
+          <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>
+          <div class="panel-sep"></div>
+          <button
+            id="btnEdgeClearPorts"
+            class="tool-btn !w-8 !h-6 text-xs"
+            data-i18n-title="diagram.edge_panel.clear_ports"
+          >
+            ⊗
+          </button>
+          </div><!-- /edgePanelControls -->
+        </div>
+        <!-- Floating label textarea -->
+        <textarea
+          id="labelInput"
+          class="hidden"
+          rows="1"
+          data-i18n-placeholder="diagram.label_input.placeholder" placeholder="Label…"
+        ></textarea>
+        <!-- Empty state -->
+        <div
+          id="emptyState"
+          class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 dark:text-gray-600 pointer-events-none select-none"
+        >
+          <svg
+            width="52"
+            height="44"
+            viewBox="0 0 52 44"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            class="mb-3 opacity-50"
+          >
+            <rect x="2" y="4" width="18" height="12" rx="2" />
+            <rect x="32" y="28" width="18" height="12" rx="2" />
+            <line x1="20" y1="10" x2="32" y2="34" stroke-dasharray="4,3" />
+            <rect x="17" y="16" width="18" height="12" rx="2" />
+            <line x1="26" y1="16" x2="26" y2="10" stroke-dasharray="4,3" />
+          </svg>
+          <p class="text-sm" data-i18n="diagram.empty_state">Select or create a diagram</p>
+        </div>
+      </div>
+    </div>
+    <div id="toastContainer"></div>
+    <!-- Image name modal -->
+    <div id="imageNameModal" style="display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.5);"
+         class="flex items-center justify-center">
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 w-80 flex flex-col gap-3">
+        <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" data-i18n="diagram.image_modal.title">Image filename</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500">
+          Lettres, chiffres, <code class="bg-gray-100 dark:bg-gray-700 px-0.5 rounded">_</code> et
+          <code class="bg-gray-100 dark:bg-gray-700 px-0.5 rounded">-</code> uniquement.
+          Laisser vide pour un nom automatique.
+        </p>
+        <div class="flex items-center gap-1">
+          <input id="imageNameInput" type="text" autocomplete="off" spellcheck="false"
+                 class="flex-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700
+                        text-gray-900 dark:text-gray-100 text-sm px-2 py-1 outline-none focus:ring-2 focus:ring-blue-400"
+                 data-i18n-placeholder="diagram.image_modal.placeholder" placeholder="image_name" />
+          <span class="text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">.png</span>
+        </div>
+        <p id="imageNameError" class="text-xs text-red-500 hidden" data-i18n="diagram.image_modal.error_chars">Allowed characters: letters, numbers, _ and -</p>
+        <div class="flex gap-2 justify-end">
+          <button id="imageNameCancel"
+                  class="px-3 py-1 text-xs rounded border border-gray-300 dark:border-gray-600
+                         text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                  data-i18n="diagram.image_modal.cancel_btn">
+            Cancel
+          </button>
+          <button id="imageNameConfirm"
+                  class="px-3 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600"
+                  data-i18n="diagram.image_modal.paste_btn">
+            Paste
+          </button>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/diagram/main.js"></script>
+    <script type="module">
+      import { NODE_COLORS, NODE_L_RATIOS, DEFAULT_NODE_PALETTE, DEFAULT_EDGE_PALETTE, deriveNodeColors } from '/diagram/constants.js';
+      import { st } from '/diagram/state.js';
+      (async () => {
+        // diagramNodePalette: array of 15 bg hex strings (positional, matching DEFAULT_NODE_PALETTE)
+        // diagramEdgePalette: array of hex strings
+        let nodeBgOverrides = null; // array of 15 hex | null
+        let edgePalette = DEFAULT_EDGE_PALETTE;
+        try {
+          const cfg = await fetch('/api/config').then((r) => r.json());
+          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;
+        } catch { await window.initI18n('en'); /* config unavailable — use defaults */ }
+        // Apply node color overrides to shared state so renderers pick them up.
+        DEFAULT_NODE_PALETTE.forEach((key, i) => {
+          const customBg = nodeBgOverrides && nodeBgOverrides[i];
+          if (customBg && customBg !== NODE_COLORS[key]?.bg) {
+            st.nodeColorOverrides[key] = deriveNodeColors(customBg, NODE_L_RATIOS[key] || 0.60);
+          }
+        });
+        // 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);
+        });
+        window.applyI18n();
+      })();
+    </script>
+  </body>
+</html>