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/admin.html ADDED Viewed

@@ -0,0 +1,1073 @@
+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin — Living Documentation</title>
+    <script src="/i18n.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = { darkMode: "class", theme: { extend: {} } };
+    </script>
+  </head>
+  <body
+    class="h-full bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100"
+  >
+    <!-- ── Header ── -->
+    <header
+      class="flex items-center justify-between px-4 h-14 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm"
+    >
+      <div class="flex items-center gap-3">
+        <span
+          class="text-blue-600 dark:text-blue-400 text-xl select-none"
+          aria-hidden="true"
+          >&#128218;</span
+        >
+        <h1 class="text-base font-semibold tracking-tight" data-i18n="admin.title">Admin Panel</h1>
+      </div>
+      <div class="flex items-center gap-3">
+        <button
+          id="dark-toggle"
+          data-i18n-title="admin.toggle_dark"
+          class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
+          <span id="dark-icon" class="text-lg leading-none">☾</span>
+        </button>
+        <span class="text-gray-300 dark:text-gray-700">|</span>
+        <a
+          href="/"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
+        >
+          <span data-i18n="admin.back_to_docs">Back to docs →</span>
+        </a>
+      </div>
+    </header>
+    <!-- ── Page ── -->
+    <main class="max-w-6xl mx-auto px-6 py-10">
+      <!-- ── Two-column layout ── -->
+      <form id="config-form" novalidate>
+        <!-- Title + Save on same row -->
+        <div class="flex items-center justify-between mb-8">
+          <div>
+            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-50" data-i18n="admin.config.title">
+              Configuration
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400" data-i18n="admin.config.description">
+              Settings are saved to .living-doc.json in your docs folder.
+            </p>
+          </div>
+          <div class="flex items-center gap-4 shrink-0">
+            <div id="save-msg" class="text-sm"></div>
+            <button
+              type="submit"
+              class="px-5 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-950"
+            >
+              <span data-i18n="admin.config.save_btn">Save changes</span>
+            </button>
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-8 items-start">
+          <!-- ── Left column ── -->
+          <div class="space-y-6">
+            <!-- Server Info -->
+            <div
+              class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5"
+            >
+              <h3
+                class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4"
+              >
+                <span data-i18n="admin.server_info.title">Server Info</span>
+              </h3>
+              <dl class="grid grid-cols-[1fr_auto] gap-x-6 gap-y-3 text-sm">
+                <div>
+                  <dt
+                    class="text-xs text-gray-400 uppercase tracking-wide mb-0.5"
+                  >
+                    <span data-i18n="admin.server_info.docs_folder">Docs Folder</span>
+                  </dt>
+                  <dd
+                    id="info-folder"
+                    class="font-mono text-xs text-gray-700 dark:text-gray-300 break-all"
+                  >
+                    —
+                  </dd>
+                </div>
+                <div>
+                  <dt
+                    class="text-xs text-gray-400 uppercase tracking-wide mb-0.5"
+                  >
+                    <span data-i18n="admin.server_info.port">Port</span>
+                  </dt>
+                  <dd
+                    id="info-port"
+                    class="font-mono text-xs text-gray-700 dark:text-gray-300"
+                  >
+                    —
+                  </dd>
+                </div>
+                <div class="col-span-2 space-y-1.5">
+                  <label
+                    class="block text-xs text-gray-400 uppercase tracking-wide mb-0.5"
+                    for="field-source-root"
+                    data-i18n="admin.server_info.source_root"
+                    >Source Root</label
+                  >
+                  <input
+                    id="field-source-root"
+                    name="sourceRoot"
+                    type="text"
+                    class="w-full px-3 py-2 font-mono text-xs rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 break-all"
+                    placeholder="/absolute/path"
+                  />
+                  <p
+                    class="text-xs text-gray-400 dark:text-gray-500"
+                    data-i18n="admin.server_info.source_root_hint"
+                  >
+                    Absolute path used by MCP source tools. Defaults to the parent of Docs Folder when empty.
+                  </p>
+                </div>
+              </dl>
+            </div>
+            <!-- Extra Files -->
+            <div
+              class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 space-y-4"
+            >
+              <div>
+                <h3
+                  class="text-sm font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  <span data-i18n="admin.extra_files.title">General — Extra Files</span>
+                </h3>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" data-i18n="admin.extra_files.description">
+                  Add Markdown files from outside the docs folder to the General section.
+                </p>
+              </div>
+              <!-- File browser -->
+              <div
+                class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
+              >
+                <div
+                  class="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+                >
+                  <button
+                    id="browse-up"
+                    onclick="browseUp()"
+                    class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0"
+                  >
+                    <span data-i18n="common.up">↑ Up</span>
+                  </button>
+                  <span
+                    id="browse-path"
+                    class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"
+                  ></span>
+                </div>
+                <div
+                  id="browse-list"
+                  class="divide-y divide-gray-100 dark:divide-gray-800 max-h-52 overflow-y-auto"
+                ></div>
+              </div>
+              <!-- Added files -->
+              <div>
+                <p
+                  class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2"
+                >
+                  Added files
+                </p>
+                <div id="extra-files-list" class="space-y-1"></div>
+                <p id="extra-files-empty" class="text-xs text-gray-400 italic">
+                  <span data-i18n="admin.extra_files.empty">No extra files added yet.</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <!-- ── Right column ── -->
+          <div class="space-y-6">
+            <!-- Appearance & Metadata -->
+            <div
+              class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800"
+            >
+              <div class="px-5 py-4">
+                <h3
+                  class="text-sm font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  Appearance & Metadata
+                </h3>
+              </div>
+              <div class="px-5 py-4 space-y-1.5">
+                <label
+                  class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  for="field-title"
+                  data-i18n="admin.appearance.site_title_label">Site Title</label
+                >
+                <input
+                  id="field-title"
+                  name="title"
+                  type="text"
+                  class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Living Documentation"
+                />
+                <p class="text-xs text-gray-400 dark:text-gray-500" data-i18n="admin.appearance.site_title_hint">
+                  Displayed in the browser tab and sidebar header.
+                </p>
+              </div>
+              <div class="px-5 py-4 space-y-1.5">
+                <label
+                  class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  for="field-theme"
+                  data-i18n="admin.appearance.theme_label">Default Theme</label
+                >
+                <select
+                  id="field-theme"
+                  name="theme"
+                  class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="system" data-i18n="admin.appearance.theme_system">System (follow OS preference)</option>
+                  <option value="light" data-i18n="admin.appearance.theme_light">Light</option>
+                  <option value="dark" data-i18n="admin.appearance.theme_dark">Dark</option>
+                </select>
+                <p class="text-xs text-gray-400 dark:text-gray-500" data-i18n="admin.appearance.theme_hint">
+                  Users can always override with the toggle button.
+                </p>
+              </div>
+              <div class="px-5 py-4 space-y-1.5">
+                <label
+                  class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  for="field-language"
+                  data-i18n="admin.appearance.language_label">Language</label>
+                <select
+                  id="field-language"
+                  name="language"
+                  class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="en" data-i18n="admin.appearance.language_en">English</option>
+                  <option value="fr" data-i18n="admin.appearance.language_fr">Français</option>
+                </select>
+                <p class="text-xs text-gray-400 dark:text-gray-500" data-i18n="admin.appearance.language_hint">
+                  Interface language for all pages.
+                </p>
+              </div>
+              <div class="px-5 py-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    id="field-debug"
+                    name="showDiagramDebug"
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+                  />
+                  <span
+                    class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                    data-i18n="admin.appearance.debug_label">Show debug button in diagram editor</span
+                  >
+                </label>
+                <p class="mt-1 text-xs text-gray-400 dark:text-gray-500 ml-7">
+                  Displays a Debug button that overlays raw position and size
+                  info on each node — useful for diagnosing snap-to-grid issues.
+                </p>
+              </div>
+              <div class="px-5 py-4 space-y-1.5">
+                <label
+                  class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  for="field-pattern"
+                  data-i18n="admin.pattern.label">Filename Pattern</label
+                >
+                <input
+                  id="field-pattern"
+                  name="filenamePattern"
+                  type="text"
+                  class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="YYYY_MM_DD_HH_mm_[Category]_title"
+                />
+                <p class="text-xs text-gray-400 dark:text-gray-500">
+                  Parsed for date, category, and title.
+                  <span
+                    id="pattern-desc-example"
+                    class="font-mono bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-1 rounded"
+                    >YYYY_MM_DD_HH_mm_[Category]_title.md</span
+                  >
+                </p>
+              </div>
+            </div>
+            <!-- Pattern Preview -->
+            <div
+              id="pattern-preview"
+              class="rounded-xl border border-blue-100 dark:border-blue-900 bg-blue-50 dark:bg-blue-950/30 p-5"
+            >
+              <h3
+                class="text-sm font-semibold text-blue-700 dark:text-blue-400 mb-3"
+              >
+                Pattern Preview
+              </h3>
+              <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                How your pattern parses example filenames:
+              </p>
+              <div id="preview-rows" class="space-y-2 text-sm"></div>
+            </div>
+          </div>
+        </div>
+        <!-- ── Diagram Palettes (full width) ── -->
+        <div
+          class="mt-8 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800"
+        >
+          <div class="px-5 py-4">
+            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
+              Diagram Color Palettes
+            </h3>
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              Customize the colors available in the diagram editor. Changes take
+              effect immediately.
+            </p>
+          </div>
+          <div
+            class="grid grid-cols-2 divide-x divide-gray-100 dark:divide-gray-800"
+          >
+            <!-- Node palette -->
+            <div class="px-5 py-4 space-y-3">
+              <div class="flex items-center justify-between">
+                <h4
+                  class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide"
+                >
+                  Shape colors
+                </h4>
+                <button
+                  type="button"
+                  onclick="resetNodePalette()"
+                  class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                >
+                  Reset
+                </button>
+              </div>
+              <p class="text-xs text-gray-400 dark:text-gray-500">
+                Click a color to show or hide it in the node panel. Dimmed =
+                hidden.
+              </p>
+              <div id="nodeSwatches" class="flex flex-wrap gap-2"></div>
+            </div>
+            <!-- Edge palette -->
+            <div class="px-5 py-4 space-y-3">
+              <div class="flex items-center justify-between">
+                <h4
+                  class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide"
+                >
+                  Arrow colors
+                </h4>
+                <button
+                  type="button"
+                  onclick="resetEdgePalette()"
+                  class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                >
+                  Reset
+                </button>
+              </div>
+              <p class="text-xs text-gray-400 dark:text-gray-500">
+                Add or remove colors available for arrows. Click ✕ to remove.
+              </p>
+              <div
+                id="edgeSwatches"
+                class="flex flex-wrap gap-3 items-end"
+              ></div>
+              <div class="flex items-center gap-2 pt-1">
+                <input
+                  type="color"
+                  id="newEdgeColor"
+                  value="#3b82f6"
+                  class="w-8 h-8 rounded cursor-pointer border border-gray-300 dark:border-gray-600 bg-transparent"
+                />
+                <button
+                  type="button"
+                  onclick="addEdgeColor()"
+                  class="px-3 py-1.5 text-xs rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors"
+                >
+                  Add color
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+      <!-- ── AGPL-3.0 License ── -->
+      <div class="mt-12 rounded-2xl overflow-hidden border border-blue-100 dark:border-blue-900/40 shadow-sm">
+        <!-- Gradient banner -->
+        <div class="bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-500 px-6 py-5 flex items-center gap-4">
+          <div class="text-white text-3xl select-none" aria-hidden="true">📖</div>
+          <div>
+            <h3 class="text-white font-bold text-base tracking-tight" data-i18n="admin.license.title">
+              AGPL-3.0 License — Open Source
+            </h3>
+            <p class="text-blue-100 text-xs mt-0.5" data-i18n="admin.license.subtitle">
+              Free to use, fork, and build upon — derivatives and network-hosted services must remain under AGPL (copyleft + SaaS clause).
+            </p>
+          </div>
+        </div>
+        <!-- Body -->
+        <div class="bg-white dark:bg-gray-900 px-6 py-5 space-y-4">
+          <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed" data-i18n-html="admin.license.body">
+            This open source project is gracefully provided to you by its conceptors
+            <strong>Youssef MEDAGHRI-ALAOUI</strong> &amp; <strong>Claude Code</strong>.
+          </p>
+          <div class="flex flex-wrap gap-3 pt-1">
+            <a
+              href="https://www.linkedin.com/in/youssef-medaghri-alaoui-93b2922/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#0A66C2] hover:bg-[#0958a8] text-white text-sm font-semibold transition-colors shadow-sm"
+            >
+              <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.44-2.13 2.93v5.68H9.37V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.35-1.85 3.58 0 4.24 2.36 4.24 5.43v6.31ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.56V9h3.56v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.2 24 24 23.23 24 22.28V1.72C24 .77 23.2 0 22.22 0Z"/>
+              </svg>
+              <span data-i18n="admin.license.linkedin_btn">Youssef on LinkedIn</span>
+            </a>
+            <a
+              href="https://www.npmjs.com/package/living-documentation"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#CB3837] hover:bg-[#a82d2d] text-white text-sm font-semibold transition-colors shadow-sm"
+            >
+              <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M0 0v24h24V0H0Zm19.2 19.2H13.6V8h-3.2v11.2H4.8V4.8h14.4v14.4Z"/>
+              </svg>
+              <span data-i18n="admin.license.npm_btn">living-documentation on npm</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </main>
+    <script>
+      // ── Boot ───────────────────────────────────────────────────
+      document.addEventListener("DOMContentLoaded", async () => {
+        applyDarkMode(loadDarkPref());
+        setupDarkToggle();
+        await loadConfig();
+        setupPatternPreview();
+        document
+          .getElementById("config-form")
+          .addEventListener("submit", saveConfig);
+      });
+      // ── Dark mode ──────────────────────────────────────────────
+      function loadDarkPref() {
+        const saved = localStorage.getItem("ld-dark");
+        if (saved !== null) return saved === "true";
+        return window.matchMedia("(prefers-color-scheme: dark)").matches;
+      }
+      function applyDarkMode(dark) {
+        document.documentElement.classList.toggle("dark", dark);
+        document.getElementById("dark-icon").textContent = dark ? "☀" : "☾";
+      }
+      function setupDarkToggle() {
+        document.getElementById("dark-toggle").addEventListener("click", () => {
+          const isDark = document.documentElement.classList.toggle("dark");
+          localStorage.setItem("ld-dark", isDark);
+          document.getElementById("dark-icon").textContent = isDark ? "☀" : "☾";
+        });
+      }
+      // ── Config ─────────────────────────────────────────────────
+      async function loadConfig() {
+        try {
+          const cfg = await fetch("/api/config").then((r) => r.json());
+          await window.initI18n(cfg.language || 'en');
+          window.applyI18n();
+          document.getElementById("info-folder").textContent =
+            cfg.docsFolder || "—";
+          document.getElementById("info-port").textContent = cfg.port || "—";
+          document.getElementById("field-source-root").value =
+            cfg.sourceRoot || "";
+          document.getElementById("field-title").value = cfg.title || "";
+          document.getElementById("field-theme").value = cfg.theme || "system";
+          document.getElementById("field-language").value = cfg.language || "en";
+          document.getElementById("field-pattern").value =
+            cfg.filenamePattern || "";
+          document.getElementById("field-debug").checked =
+            !!cfg.showDiagramDebug;
+          updatePreview(cfg.filenamePattern);
+          initExtraFiles(cfg);
+          initPalettes(cfg);
+        } catch {
+          showMsg(window.t('admin.msg.load_failed'), "error");
+        }
+      }
+      async function saveConfig(e) {
+        e.preventDefault();
+        const filenamePattern = document
+          .getElementById("field-pattern")
+          .value.trim();
+        if (filenamePattern) {
+          const catCount = (filenamePattern.match(/\[Category\]/gi) || [])
+            .length;
+          if (catCount === 0) {
+            showMsg(window.t('admin.msg.pattern_no_category'), "error");
+            return;
+          }
+          if (catCount > 1) {
+            showMsg(window.t('admin.msg.pattern_one_category'), "error");
+            return;
+          }
+        }
+        const sourceRootRaw = document
+          .getElementById("field-source-root")
+          .value.trim();
+        const payload = {
+          title: document.getElementById("field-title").value.trim(),
+          theme: document.getElementById("field-theme").value,
+          language: document.getElementById("field-language").value,
+          filenamePattern,
+          showDiagramDebug: document.getElementById("field-debug").checked,
+          diagramNodePalette: [...nodePalette],
+          diagramEdgePalette: [...edgePalette],
+          sourceRoot: sourceRootRaw === "" ? null : sourceRootRaw,
+        };
+        try {
+          const res = await fetch("/api/config", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          });
+          if (!res.ok) throw new Error(await res.text());
+          showMsg(window.t('admin.msg.saved'), "ok");
+        } catch (err) {
+          showMsg(window.t('admin.msg.save_failed') + err.message, "error");
+        }
+      }
+      function showMsg(text, type) {
+        const el = document.getElementById("save-msg");
+        el.textContent = text;
+        el.className =
+          "text-sm " +
+          (type === "ok"
+            ? "text-green-600 dark:text-green-400"
+            : "text-red-600 dark:text-red-400");
+        if (type === "ok")
+          setTimeout(() => {
+            el.textContent = "";
+          }, 3000);
+      }
+      // ── Pattern preview ────────────────────────────────────────
+      const EXAMPLES = [
+        "2024_01_15_09_30_[DevOps]_deploy_pipeline.md",
+        "2023_11_03_14_45_[Frontend]_react_hooks_guide.md",
+        "2025_06_20_08_00_meeting_notes.md",
+        "readme.md",
+      ];
+      function dateStrToISO(s) {
+        const p = s.split("_");
+        return p.length === 5
+          ? p[0] + "-" + p[1] + "-" + p[2] + "T" + p[3] + ":" + p[4]
+          : p[0] + "-" + p[1] + "-" + p[2];
+      }
+      function buildPatternsFromFormat(patternStr) {
+        if (!patternStr) patternStr = "YYYY_MM_DD_HH_mm_[Category]_title";
+        const hasDate = /YYYY.*MM.*DD/.test(patternStr);
+        const hasTime = hasDate && /HH.*mm/.test(patternStr);
+        const hasCategory = /\[Category\]/i.test(patternStr);
+        const dateGroup = hasTime
+          ? "(\\d{4}_\\d{2}_\\d{2}(?:_\\d{2}_\\d{2})?)"
+          : "(\\d{4}_\\d{2}_\\d{2})";
+        const catGroup = "\\[([^\\]]+)\\]";
+        const catBeforeDate =
+          hasDate &&
+          hasCategory &&
+          patternStr.search(/\[Category\]/i) < patternStr.search(/YYYY/i);
+        let full = null,
+          dateOnly = null;
+        if (hasDate && hasCategory) {
+          const ordered = catBeforeDate
+            ? catGroup + "_" + dateGroup
+            : dateGroup + "_" + catGroup;
+          full = new RegExp("^" + ordered + "_(.+)\\.md$", "i");
+          dateOnly = new RegExp("^" + dateGroup + "_(.+)\\.md$", "i");
+        } else if (hasDate) {
+          dateOnly = new RegExp("^" + dateGroup + "_(.+)\\.md$", "i");
+        } else if (hasCategory) {
+          full = new RegExp("^" + catGroup + "_(.+)\\.md$", "i");
+        }
+        return { full, dateOnly, hasDate, hasCategory, catBeforeDate };
+      }
+      function parsePreview(filename, patterns) {
+        if (patterns.full) {
+          const m = filename.match(patterns.full);
+          if (m) {
+            if (patterns.hasDate && patterns.hasCategory) {
+              const dateStr = patterns.catBeforeDate ? m[2] : m[1];
+              const category = patterns.catBeforeDate ? m[1] : m[2];
+              return {
+                date: dateStrToISO(dateStr),
+                category,
+                title: titleCase(m[3]),
+                match: true,
+              };
+            } else if (patterns.hasCategory) {
+              return {
+                date: null,
+                category: m[1],
+                title: titleCase(m[2]),
+                match: true,
+              };
+            }
+          }
+        }
+        if (patterns.dateOnly) {
+          const m = filename.match(patterns.dateOnly);
+          if (m) {
+            return {
+              date: dateStrToISO(m[1]),
+              category: "General",
+              title: titleCase(m[2]),
+              match: true,
+            };
+          }
+        }
+        return {
+          date: null,
+          category: "General",
+          title: filename.replace(".md", ""),
+          match: false,
+        };
+      }
+      function titleCase(s) {
+        return s
+          .split("_")
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+          .join(" ");
+      }
+      function updatePreview() {
+        const patternVal = document
+          .getElementById("field-pattern")
+          .value.trim();
+        const descSpan = document.getElementById("pattern-desc-example");
+        descSpan.textContent =
+          (patternVal || "YYYY_MM_DD_HH_mm_[Category]_title") + ".md";
+        const patterns = buildPatternsFromFormat(patternVal);
+        const rows = document.getElementById("preview-rows");
+        rows.innerHTML = EXAMPLES.map((f) => {
+          const p = parsePreview(f, patterns);
+          return `
+      <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3">
+        <p class="font-mono text-xs text-gray-500 dark:text-gray-400 mb-2 break-all">${esc(f)}</p>
+        <div class="grid grid-cols-3 gap-2 text-xs">
+          <div>
+            <span class="text-gray-400 block mb-0.5">Date</span>
+            <span class="${p.date ? "text-green-600 dark:text-green-400" : "text-gray-400"}">${p.date || "none"}</span>
+          </div>
+          <div>
+            <span class="text-gray-400 block mb-0.5">Category</span>
+            <span class="text-blue-600 dark:text-blue-400">${esc(p.category)}</span>
+          </div>
+          <div>
+            <span class="text-gray-400 block mb-0.5">Title</span>
+            <span class="text-gray-700 dark:text-gray-300 truncate block">${esc(p.title)}</span>
+          </div>
+        </div>
+      </div>`;
+        }).join("");
+      }
+      function setupPatternPreview() {
+        document
+          .getElementById("field-pattern")
+          .addEventListener("input", updatePreview);
+      }
+      function esc(s) {
+        return String(s)
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#39;");
+      }
+      // ── Extra Files / Browser ──────────────────────────────────
+      let extraFiles = [];
+      let browseParent = null;
+      let browseCurrent = "";
+      let docsFolder = "";
+      function initExtraFiles(cfg) {
+        extraFiles = cfg.extraFiles || [];
+        docsFolder = cfg.docsFolder || "";
+        renderExtraFiles();
+        loadBrowse(cfg.docsFolder || "/");
+      }
+      function relativeDisplay(filePath) {
+        if (!docsFolder) return filePath;
+        const fromParts = docsFolder.split("/").filter(Boolean);
+        const toParts = filePath.split("/").filter(Boolean);
+        let common = 0;
+        while (
+          common < fromParts.length &&
+          common < toParts.length &&
+          fromParts[common] === toParts[common]
+        )
+          common++;
+        const ups = fromParts.length - common;
+        const downs = toParts.slice(common).join("/");
+        const rel = "../".repeat(ups) + downs;
+        return "$DOCS_FOLDER/" + rel;
+      }
+      async function loadBrowse(dirPath) {
+        const list = document.getElementById("browse-list");
+        list.innerHTML =
+          '<p class="px-3 py-4 text-xs text-gray-400 text-center">Loading…</p>';
+        try {
+          const data = await fetch(
+            "/api/browse?path=" + encodeURIComponent(dirPath),
+          ).then((r) => r.json());
+          browseCurrent = data.current;
+          browseParent = data.parent;
+          document.getElementById("browse-path").textContent = relativeDisplay(
+            data.current,
+          );
+          document.getElementById("browse-up").disabled = !data.parent;
+          const rows = [];
+          for (const dir of data.dirs) {
+            rows.push(`
+        <button data-path="${esc(dir.path)}" onclick="loadBrowse(this.dataset.path)"
+                class="w-full flex items-center gap-2 px-3 py-2 text-sm text-left
+                       hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+          <span class="text-gray-400 shrink-0">📁</span>
+          <span class="text-gray-700 dark:text-gray-300 truncate">${esc(dir.name)}</span>
+        </button>`);
+          }
+          for (const file of data.files) {
+            const added = extraFiles.includes(file.path);
+            rows.push(`
+        <div class="flex items-center justify-between gap-2 px-3 py-2 text-sm
+                    hover:bg-gray-50 dark:hover:bg-gray-800">
+          <span class="flex items-center gap-2 text-gray-700 dark:text-gray-300 min-w-0">
+            <span class="text-gray-400 shrink-0">📄</span>
+            <span class="truncate">${esc(file.name)}</span>
+          </span>
+          ${
+            added
+              ? '<span class="text-xs text-green-600 dark:text-green-400 shrink-0">Added</span>'
+              : `<button data-path="${esc(file.path)}" onclick="addExtraFile(this.dataset.path)"
+                       class="text-xs text-blue-600 dark:text-blue-400 hover:underline shrink-0">+ Add</button>`
+          }
+        </div>`);
+          }
+          if (rows.length === 0) {
+            list.innerHTML =
+              '<p class="px-3 py-4 text-xs text-gray-400 text-center">Empty directory</p>';
+          } else {
+            list.innerHTML = rows.join("");
+          }
+        } catch {
+          list.innerHTML =
+            '<p class="px-3 py-4 text-xs text-red-400 text-center">Cannot read directory</p>';
+        }
+      }
+      function browseUp() {
+        if (browseParent) loadBrowse(browseParent);
+      }
+      async function addExtraFile(filePath) {
+        if (extraFiles.includes(filePath)) return;
+        extraFiles = [...extraFiles, filePath];
+        await saveExtraFiles();
+        renderExtraFiles();
+        loadBrowse(browseCurrent);
+      }
+      async function removeExtraFile(filePath) {
+        extraFiles = extraFiles.filter((f) => f !== filePath);
+        await saveExtraFiles();
+        renderExtraFiles();
+        loadBrowse(browseCurrent);
+      }
+      async function saveExtraFiles() {
+        try {
+          const res = await fetch("/api/config", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ extraFiles }),
+          });
+          if (!res.ok) throw new Error(await res.text());
+        } catch (err) {
+          showMsg("Failed to save: " + err.message, "error");
+        }
+      }
+      function moveExtraFile(index, direction) {
+        const target = index + direction;
+        if (target < 0 || target >= extraFiles.length) return;
+        const next = [...extraFiles];
+        [next[index], next[target]] = [next[target], next[index]];
+        extraFiles = next;
+        saveExtraFiles();
+        renderExtraFiles();
+      }
+      // ── Diagram Palettes ───────────────────────────────────────
+      // NODE_COLORS_ADMIN mirrors constants.js NODE_COLORS (default bg values).
+      // Mirrors NODE_COLORS from constants.js (bg + original border).
+      const NODE_COLORS_ADMIN = {
+        "c-white": { bg: "#ffffff", border: "#dbd5d1", label: "White" },
+        "c-gray": { bg: "#f5f5f4", border: "#a8a29e", label: "Gris" },
+        "c-slate": { bg: "#f1f5f9", border: "#64748b", label: "Ardoise" },
+        "c-blue": { bg: "#dbeafe", border: "#3b82f6", label: "Bleu" },
+        "c-sky": { bg: "#e0f2fe", border: "#0ea5e9", label: "Ciel" },
+        "c-cyan": { bg: "#cffafe", border: "#06b6d4", label: "Cyan" },
+        "c-teal": { bg: "#ccfbf1", border: "#14b8a6", label: "Teal" },
+        "c-green": { bg: "#dcfce7", border: "#22c55e", label: "Vert" },
+        "c-lime": { bg: "#ecfccb", border: "#84cc16", label: "Lime" },
+        "c-amber": { bg: "#fef9c3", border: "#f59e0b", label: "Ambre" },
+        "c-orange": { bg: "#ffedd5", border: "#f97316", label: "Orange" },
+        "c-red": { bg: "#fee2e2", border: "#ef4444", label: "Rouge" },
+        "c-rose": { bg: "#ffe4e6", border: "#f43f5e", label: "Rose" },
+        "c-pink": { bg: "#fce7f3", border: "#ec4899", label: "Fuschia" },
+        "c-purple": { bg: "#ede9fe", border: "#8b5cf6", label: "Violet" },
+      };
+      const NODE_PALETTE_KEYS = Object.keys(NODE_COLORS_ADMIN); // fixed order of 15 slots
+      const DEFAULT_EDGE_PALETTE_ADMIN = [
+        "#ffffff",
+        "#a8a29e",
+        "#374151",
+        "#3b82f6",
+        "#14b8a6",
+        "#22c55e",
+        "#f97316",
+        "#ef4444",
+        "#a855f7",
+      ];
+      // nodePalette: array of 15 bg hex strings, one per slot (positional).
+      let nodePalette = NODE_PALETTE_KEYS.map((k) => NODE_COLORS_ADMIN[k].bg);
+      let edgePalette = [...DEFAULT_EDGE_PALETTE_ADMIN];
+      // Per-slot lightness ratio (border_L / bg_L) — mirrors NODE_L_RATIOS from constants.js.
+      const NODE_L_RATIOS_ADMIN = {
+        "c-gray": 0.667,
+        "c-slate": 0.488,
+        "c-blue": 0.645,
+        "c-sky": 0.518,
+        "c-cyan": 0.473,
+        "c-teal": 0.448,
+        "c-green": 0.489,
+        "c-lime": 0.496,
+        "c-amber": 0.57,
+        "c-orange": 0.578,
+        "c-red": 0.64,
+        "c-rose": 0.636,
+        "c-pink": 0.638,
+        "c-purple": 0.694,
+        "c-indigo": 0.71,
+      };
+      // Mirrors deriveNodeColors from constants.js (no ES module in admin.html).
+      function deriveNodeColors(bgHex, lRatio = 0.6) {
+        const r = parseInt(bgHex.slice(1, 3), 16) / 255;
+        const g = parseInt(bgHex.slice(3, 5), 16) / 255;
+        const b = parseInt(bgHex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b),
+          min = Math.min(r, g, b);
+        const l = (max + min) / 2;
+        const d = max - min;
+        let h = 0,
+          s = 0;
+        if (d > 0) {
+          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+          if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          else if (max === g) h = ((b - r) / d + 2) / 6;
+          else h = ((r - g) / d + 4) / 6;
+        }
+        function hslToHex(hh, ss, ll) {
+          let rr, gg, bb;
+          if (ss === 0) {
+            rr = gg = bb = ll;
+          } else {
+            const hue2rgb = (p, q, t) => {
+              if (t < 0) t += 1;
+              if (t > 1) t -= 1;
+              if (t < 1 / 6) return p + (q - p) * 6 * t;
+              if (t < 1 / 2) return q;
+              if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+              return p;
+            };
+            const q = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
+            const p = 2 * ll - q;
+            rr = hue2rgb(p, q, hh + 1 / 3);
+            gg = hue2rgb(p, q, hh);
+            bb = hue2rgb(p, q, hh - 1 / 3);
+          }
+          return (
+            "#" +
+            [rr, gg, bb]
+              .map((v) =>
+                Math.max(0, Math.min(255, Math.round(v * 255)))
+                  .toString(16)
+                  .padStart(2, "0"),
+              )
+              .join("")
+          );
+        }
+        const border = hslToHex(h, s, l * lRatio);
+        return { bg: bgHex, border };
+      }
+      function initPalettes(cfg) {
+        // nodePalette: positional array of 15 bg hex strings
+        if (
+          Array.isArray(cfg.diagramNodePalette) &&
+          cfg.diagramNodePalette.length
+        ) {
+          nodePalette = NODE_PALETTE_KEYS.map(
+            (k, i) => cfg.diagramNodePalette[i] || NODE_COLORS_ADMIN[k].bg,
+          );
+        } else {
+          nodePalette = NODE_PALETTE_KEYS.map((k) => NODE_COLORS_ADMIN[k].bg);
+        }
+        edgePalette =
+          Array.isArray(cfg.diagramEdgePalette) && cfg.diagramEdgePalette.length
+            ? [...cfg.diagramEdgePalette]
+            : [...DEFAULT_EDGE_PALETTE_ADMIN];
+        renderNodePalette();
+        renderEdgePalette();
+      }
+      function swatchBorder(key, bg) {
+        // Use original hand-crafted border if bg is unchanged; derive for custom colours.
+        const def = NODE_COLORS_ADMIN[key];
+        return bg === def.bg
+          ? def.border
+          : deriveNodeColors(bg, NODE_L_RATIOS_ADMIN[key] || 0.6).border;
+      }
+      function renderNodePalette() {
+        const container = document.getElementById("nodeSwatches");
+        container.innerHTML = NODE_PALETTE_KEYS.map((key, i) => {
+          const bg = nodePalette[i] || NODE_COLORS_ADMIN[key].bg;
+          const border = swatchBorder(key, bg);
+          return `<div style="position:relative;width:32px;height:32px" title="${esc(NODE_COLORS_ADMIN[key].label)}">
+            <div style="width:32px;height:32px;border-radius:50%;background:${bg};border:3px solid ${border};pointer-events:none"></div>
+            <input type="color" value="${bg}" data-i="${i}"
+              oninput="previewNodeColor(${i},this.value)"
+              onchange="commitNodeColor(${i},this.value)"
+              style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0" />
+          </div>`;
+        }).join("");
+      }
+      function previewNodeColor(i, hex) {
+        nodePalette[i] = hex.toLowerCase();
+        const key = NODE_PALETTE_KEYS[i];
+        const border = swatchBorder(key, hex.toLowerCase());
+        const wrapper = document.getElementById("nodeSwatches").children[i];
+        if (wrapper) {
+          const swatch = wrapper.querySelector("div");
+          if (swatch) {
+            swatch.style.background = hex;
+            swatch.style.borderColor = border;
+          }
+        }
+      }
+      function commitNodeColor(i, hex) {
+        previewNodeColor(i, hex);
+      }
+      function resetNodePalette() {
+        nodePalette = NODE_PALETTE_KEYS.map((k) => NODE_COLORS_ADMIN[k].bg);
+        renderNodePalette();
+      }
+      function renderEdgePalette() {
+        const container = document.getElementById("edgeSwatches");
+        container.innerHTML = edgePalette
+          .map(
+            (hex, i) => `
+          <div style="display:flex;flex-direction:column;align-items:center;gap:3px">
+            <div style="width:26px;height:26px;border-radius:50%;background:${hex};border:2px solid rgba(0,0,0,0.15)"></div>
+            <button type="button" data-i="${i}" onclick="removeEdgeColor(+this.dataset.i)"
+              style="font-size:10px;color:#ef4444;cursor:pointer;line-height:1;background:none;border:none"
+              title="Supprimer">✕</button>
+          </div>`,
+          )
+          .join("");
+      }
+      function addEdgeColor() {
+        const hex = document.getElementById("newEdgeColor").value.toLowerCase();
+        if (edgePalette.includes(hex)) return;
+        edgePalette = [...edgePalette, hex];
+        renderEdgePalette();
+      }
+      function removeEdgeColor(index) {
+        if (edgePalette.length <= 1) return;
+        edgePalette = edgePalette.filter((_, i) => i !== index);
+        renderEdgePalette();
+      }
+      function resetEdgePalette() {
+        edgePalette = [...DEFAULT_EDGE_PALETTE_ADMIN];
+        renderEdgePalette();
+      }
+      function renderExtraFiles() {
+        const list = document.getElementById("extra-files-list");
+        const empty = document.getElementById("extra-files-empty");
+        if (extraFiles.length === 0) {
+          list.innerHTML = "";
+          empty.style.display = "";
+          return;
+        }
+        empty.style.display = "none";
+        list.innerHTML = extraFiles
+          .map(
+            (f, i) => `
+    <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-800">
+      <div class="flex flex-col shrink-0">
+        <button data-i="${i}" data-d="-1" onclick="moveExtraFile(+this.dataset.i, +this.dataset.d)"
+                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 leading-none disabled:opacity-20"
+                ${i === 0 ? "disabled" : ""}>&#8593;</button>
+        <button data-i="${i}" data-d="1" onclick="moveExtraFile(+this.dataset.i, +this.dataset.d)"
+                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 leading-none disabled:opacity-20"
+                ${i === extraFiles.length - 1 ? "disabled" : ""}>&#8595;</button>
+      </div>
+      <div class="overflow-x-auto flex-1 min-w-0">
+        <span class="font-mono text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap" title="${esc(f)}">${esc(relativeDisplay(f))}</span>
+      </div>
+      <button data-path="${esc(f)}" onclick="removeExtraFile(this.dataset.path)"
+              class="text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400 shrink-0">Remove</button>
+    </div>`,
+          )
+          .join("");
+      }
+    </script>
+  </body>
+</html>