npm - living-ai-documentation - Versions diffs - 1.0.0 - Mend

living-ai-documentation 1.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 (203) hide show

package/LICENSE +661 -0
package/README.fr.md +344 -0
package/README.md +344 -0
package/dist/bin/cli.d.ts +3 -0
package/dist/bin/cli.d.ts.map +1 -0
package/dist/bin/cli.js +262 -0
package/dist/bin/cli.js.map +1 -0
package/dist/src/frontend/accuracy-gauge.js +70 -0
package/dist/src/frontend/admin.html +1532 -0
package/dist/src/frontend/annotations.js +585 -0
package/dist/src/frontend/boot.js +101 -0
package/dist/src/frontend/config.js +29 -0
package/dist/src/frontend/confirm-modal.js +82 -0
package/dist/src/frontend/context.html +1252 -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 +187 -0
package/dist/src/frontend/diagram/constants.js +109 -0
package/dist/src/frontend/diagram/custom-shapes.js +104 -0
package/dist/src/frontend/diagram/debug.js +43 -0
package/dist/src/frontend/diagram/drawio-export.js +649 -0
package/dist/src/frontend/diagram/edge-panel.js +293 -0
package/dist/src/frontend/diagram/edge-rendering.js +12 -0
package/dist/src/frontend/diagram/evidence.js +146 -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 +157 -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 +364 -0
package/dist/src/frontend/diagram/network.js +2214 -0
package/dist/src/frontend/diagram/node-panel.js +389 -0
package/dist/src/frontend/diagram/node-rendering.js +964 -0
package/dist/src/frontend/diagram/persistence.js +168 -0
package/dist/src/frontend/diagram/ports.js +421 -0
package/dist/src/frontend/diagram/selection-overlay.js +387 -0
package/dist/src/frontend/diagram/state.js +43 -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 +206 -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 +1494 -0
package/dist/src/frontend/documents.js +479 -0
package/dist/src/frontend/export.js +338 -0
package/dist/src/frontend/file-attach.js +178 -0
package/dist/src/frontend/files-modal.js +243 -0
package/dist/src/frontend/i18n/en.json +624 -0
package/dist/src/frontend/i18n/fr.json +624 -0
package/dist/src/frontend/i18n.js +32 -0
package/dist/src/frontend/image-paste.js +126 -0
package/dist/src/frontend/index.html +2806 -0
package/dist/src/frontend/local-search.js +476 -0
package/dist/src/frontend/metadata.js +318 -0
package/dist/src/frontend/misc.js +92 -0
package/dist/src/frontend/new-doc-modal.js +285 -0
package/dist/src/frontend/new-folder-modal.js +169 -0
package/dist/src/frontend/search.js +194 -0
package/dist/src/frontend/shape-editor.html +685 -0
package/dist/src/frontend/sidebar-helpers.js +96 -0
package/dist/src/frontend/sidebar-resize.js +98 -0
package/dist/src/frontend/sidebar.js +351 -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 +1146 -0
package/dist/src/frontend/state.js +46 -0
package/dist/src/frontend/utils.js +21 -0
package/dist/src/frontend/validate.js +107 -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 +26 -0
package/dist/src/lib/config.d.ts.map +1 -0
package/dist/src/lib/config.js +195 -0
package/dist/src/lib/config.js.map +1 -0
package/dist/src/lib/hash.d.ts +2 -0
package/dist/src/lib/hash.d.ts.map +1 -0
package/dist/src/lib/hash.js +18 -0
package/dist/src/lib/hash.js.map +1 -0
package/dist/src/lib/metadata.d.ts +31 -0
package/dist/src/lib/metadata.d.ts.map +1 -0
package/dist/src/lib/metadata.js +128 -0
package/dist/src/lib/metadata.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/lib/status.d.ts +9 -0
package/dist/src/lib/status.d.ts.map +1 -0
package/dist/src/lib/status.js +72 -0
package/dist/src/lib/status.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 +2046 -0
package/dist/src/mcp/server.js.map +1 -0
package/dist/src/mcp/tools/diagrams.d.ts +82 -0
package/dist/src/mcp/tools/diagrams.d.ts.map +1 -0
package/dist/src/mcp/tools/diagrams.js +594 -0
package/dist/src/mcp/tools/diagrams.js.map +1 -0
package/dist/src/mcp/tools/documents.d.ts +44 -0
package/dist/src/mcp/tools/documents.d.ts.map +1 -0
package/dist/src/mcp/tools/documents.js +186 -0
package/dist/src/mcp/tools/documents.js.map +1 -0
package/dist/src/mcp/tools/git.d.ts +10 -0
package/dist/src/mcp/tools/git.d.ts.map +1 -0
package/dist/src/mcp/tools/git.js +217 -0
package/dist/src/mcp/tools/git.js.map +1 -0
package/dist/src/mcp/tools/metadata.d.ts +57 -0
package/dist/src/mcp/tools/metadata.d.ts.map +1 -0
package/dist/src/mcp/tools/metadata.js +222 -0
package/dist/src/mcp/tools/metadata.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 +196 -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-source.d.ts +3 -0
package/dist/src/routes/browse-source.d.ts.map +1 -0
package/dist/src/routes/browse-source.js +79 -0
package/dist/src/routes/browse-source.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 +91 -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 +145 -0
package/dist/src/routes/config.js.map +1 -0
package/dist/src/routes/context.d.ts +3 -0
package/dist/src/routes/context.d.ts.map +1 -0
package/dist/src/routes/context.js +287 -0
package/dist/src/routes/context.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 +11 -0
package/dist/src/routes/documents.d.ts.map +1 -0
package/dist/src/routes/documents.js +450 -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 +280 -0
package/dist/src/routes/export.js.map +1 -0
package/dist/src/routes/files.d.ts +3 -0
package/dist/src/routes/files.d.ts.map +1 -0
package/dist/src/routes/files.js +180 -0
package/dist/src/routes/files.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/metadata.d.ts +3 -0
package/dist/src/routes/metadata.d.ts.map +1 -0
package/dist/src/routes/metadata.js +131 -0
package/dist/src/routes/metadata.js.map +1 -0
package/dist/src/routes/shape-libraries.d.ts +3 -0
package/dist/src/routes/shape-libraries.d.ts.map +1 -0
package/dist/src/routes/shape-libraries.js +118 -0
package/dist/src/routes/shape-libraries.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 +93 -0
package/dist/src/server.js.map +1 -0
package/dist/starter-doc/.living-doc.json +52 -0
package/dist/starter-doc/ADRS/2026_01_01_[ADR]_example_architecture_decision.md +59 -0
package/dist/starter-doc/AI/2026_01_01_how_to.md +112 -0
package/dist/starter-doc/AI/PROJECT-INSTRUCTIONS.md +172 -0
package/dist/starter-doc/AI/PROJECT-STACK.md +77 -0
package/dist/starter-doc/AI/PROJECT-USEFUL-COMMANDS.md +80 -0
package/dist/starter-doc/AI/default/AGENTS.md +31 -0
package/dist/starter-doc/AI/default/CLAUDE.md +31 -0
package/dist/starter-doc/AI/default/MEMORY.md +24 -0
package/dist/starter-doc/AI/rules/no-magic-numbers.md +18 -0
package/dist/starter-doc/AI/rules/track-current-work.md +23 -0
package/dist/starter-doc/WORKLOG/current-task.md +57 -0
package/dist/starter-doc-fr/.living-doc.json +52 -0
package/dist/starter-doc-fr/ADRS/2026_01_01_[ADR]_example_architecture_decision.md +59 -0
package/dist/starter-doc-fr/AI/2026_01_01_how_to.md +100 -0
package/dist/starter-doc-fr/AI/PROJECT-INSTRUCTIONS.md +172 -0
package/dist/starter-doc-fr/AI/PROJECT-STACK.md +77 -0
package/dist/starter-doc-fr/AI/PROJECT-USEFUL-COMMANDS.md +80 -0
package/dist/starter-doc-fr/AI/default/AGENTS.md +31 -0
package/dist/starter-doc-fr/AI/default/CLAUDE.md +31 -0
package/dist/starter-doc-fr/AI/default/MEMORY.md +24 -0
package/dist/starter-doc-fr/AI/rules/no-magic-numbers.md +18 -0
package/dist/starter-doc-fr/AI/rules/track-current-work.md +23 -0
package/dist/starter-doc-fr/WORKLOG/current-task.md +57 -0
package/images/living_documentation.jpg +0 -0
package/images/readme-extra-files.png +0 -0
package/images/readme-filename-pattern.png +0 -0
package/images/readme-intelligent-search-demo.jpg +0 -0
package/images/readme-sidebar.png +0 -0
package/package.json +72 -0

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

@@ -0,0 +1,1532 @@
+<!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="sticky top-0 z-40 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="pb-10">
+      <form id="config-form" novalidate>
+        <!-- Sticky sub-header: Configuration title + Save button -->
+        <div
+          class="sticky top-14 z-30 border-b border-gray-200 dark:border-gray-800 bg-gray-50/90 dark:bg-gray-950/90 backdrop-blur"
+        >
+          <div
+            class="max-w-3xl mx-auto px-6 py-4 flex items-center justify-between gap-4"
+          >
+            <div class="min-w-0">
+              <h2
+                class="text-lg font-bold text-gray-900 dark:text-gray-50 truncate"
+                data-i18n="admin.config.title"
+              >
+                Configuration
+              </h2>
+              <p
+                class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 truncate"
+                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>
+        <div class="max-w-3xl mx-auto px-6 pt-8 space-y-8">
+          <!-- ── 🌐 General ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">🌐</span>
+                <span data-i18n="admin.section.general.title">General</span>
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n="admin.section.general.desc"
+              >
+                Site identity, theme, and interface language.
+              </p>
+            </header>
+            <div class="divide-y divide-gray-100 dark:divide-gray-800">
+              <div class="px-6 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-6 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-6 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>
+          </section>
+          <!-- ── 📝 Filename convention ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">📝</span>
+                <span data-i18n="admin.section.filename.title"
+                  >Filename convention</span
+                >
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n="admin.section.filename.desc"
+              >
+                How new documents are named, and how the viewer parses them.
+              </p>
+            </header>
+            <div class="divide-y divide-gray-100 dark:divide-gray-800">
+              <div class="px-6 py-4 grid grid-cols-[1fr_auto] gap-x-6 gap-y-2">
+                <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>
+              <div class="px-6 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"
+                  data-i18n-placeholder="admin.pattern.placeholder"
+                />
+                <p class="text-xs text-gray-400 dark:text-gray-500">
+                  <span data-i18n="admin.pattern.hint"
+                    >Parsed for date, category, and title.</span
+                  >
+                  <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 id="pattern-preview" class="px-6 py-4">
+                <h4
+                  class="text-xs font-semibold text-blue-700 dark:text-blue-400 mb-2 uppercase tracking-wide"
+                >
+                  <span data-i18n="admin.pattern.preview_title"
+                    >Pattern Preview</span
+                  >
+                </h4>
+                <p
+                  class="text-xs text-gray-500 dark:text-gray-400 mb-3"
+                  data-i18n="admin.pattern.preview_desc"
+                >
+                  How your pattern parses example filenames:
+                </p>
+                <div id="preview-rows" class="space-y-2 text-sm"></div>
+              </div>
+            </div>
+          </section>
+          <!-- ── 📂 Source & extra files ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">📂</span>
+                <span data-i18n="admin.section.source.title"
+                  >Source &amp; extra files</span
+                >
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n="admin.section.source.desc"
+              >
+                Code source root (for MCP tools) and Markdown files pulled from
+                outside the docs folder.
+              </p>
+            </header>
+            <div class="divide-y divide-gray-100 dark:divide-gray-800">
+              <div class="px-6 py-4 space-y-1.5">
+                <label
+                  class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  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=".."
+                />
+                <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>
+              <div class="px-6 py-4 space-y-4">
+                <div>
+                  <p
+                    class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                    data-i18n="admin.extra_files.title"
+                  >
+                    General — Extra Files
+                  </p>
+                  <p
+                    class="mt-0.5 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>
+                <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>
+                <div>
+                  <p
+                    class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2"
+                    data-i18n="admin.section.added_files_label"
+                  >
+                    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>
+          </section>
+          <!-- ── 🌳 Sidebar behaviour ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">🗂️</span>
+                <span data-i18n="admin.section.sidebar.title"
+                  >Sidebar behaviour</span
+                >
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n="admin.section.sidebar.desc"
+              >
+                How folders and categories expand in the left drawer.
+              </p>
+            </header>
+            <div class="divide-y divide-gray-100 dark:divide-gray-800">
+              <div class="px-6 py-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    id="field-exclusive-folder"
+                    name="exclusiveFolderExpansion"
+                    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.exclusive_folder_label"
+                    >Exclusive folder expansion in sidebar</span
+                  >
+                </label>
+                <p
+                  class="mt-1 text-xs text-gray-400 dark:text-gray-500 ml-7"
+                  data-i18n="admin.appearance.exclusive_folder_hint"
+                >
+                  When enabled, opening a folder in the sidebar automatically
+                  closes any other open folder at the same level (and its
+                  children).
+                </p>
+              </div>
+              <div class="px-6 py-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    id="field-exclusive-category"
+                    name="exclusiveCategoryExpansion"
+                    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.exclusive_category_label"
+                    >Exclusive category expansion in sidebar</span
+                  >
+                </label>
+                <p
+                  class="mt-1 text-xs text-gray-400 dark:text-gray-500 ml-7"
+                  data-i18n="admin.appearance.exclusive_category_hint"
+                >
+                  When enabled, opening a category automatically closes any
+                  other open category under the same parent folder.
+                </p>
+              </div>
+            </div>
+          </section>
+          <!-- ── ✍️ Markdown rendering ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">✍️</span>
+                <span data-i18n="admin.section.markdown.title"
+                  >Markdown rendering</span
+                >
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n="admin.section.markdown.desc"
+              >
+                How the viewer renders newlines and long code blocks.
+              </p>
+            </header>
+            <div class="divide-y divide-gray-100 dark:divide-gray-800">
+              <div class="px-6 py-4 space-y-1.5">
+                <label
+                  class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  for="field-code-max-height"
+                  data-i18n="admin.appearance.code_max_height_label"
+                  >Code block max height (px)</label
+                >
+                <input
+                  id="field-code-max-height"
+                  name="codeBlockMaxHeight"
+                  type="number"
+                  min="0"
+                  max="5000"
+                  step="10"
+                  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="400"
+                />
+                <p
+                  class="text-xs text-gray-400 dark:text-gray-500"
+                  data-i18n="admin.appearance.code_max_height_hint"
+                >
+                  Longer code blocks get a collapse/expand button. Set to 0 to
+                  disable.
+                </p>
+              </div>
+              <div class="px-6 py-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    id="field-soft-breaks"
+                    name="markdownSoftBreaks"
+                    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.soft_breaks_label"
+                    >Treat every newline as a line break</span
+                  >
+                </label>
+                <p
+                  class="mt-1 text-xs text-gray-400 dark:text-gray-500 ml-7"
+                  data-i18n-html="admin.appearance.soft_breaks_hint"
+                >
+                  <strong>Unchecked (CommonMark, default):</strong> a single
+                  newline in the source is rendered as a space — two adjacent
+                  lines merge into one paragraph. To force a line break without
+                  leaving a blank line, end the previous line with
+                  <code>two spaces</code> then newline, or use
+                  <code>&lt;br/&gt;</code>.<br />
+                  <strong>Checked (GitHub-flavoured):</strong> every single
+                  newline becomes a real line break in the rendered output.
+                  Convenient for chat-style writing, but you can no longer
+                  hard-wrap long paragraphs in the source file without visible
+                  breaks.
+                </p>
+              </div>
+            </div>
+          </section>
+          <!-- ── 📎 File attachments ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">📎</span>
+                <span data-i18n="admin.section.files.title"
+                  >File attachments</span
+                >
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n-html="admin.files.description"
+              >
+                Extensions that are rejected by the
+                <code>/api/files/upload</code> endpoint. One extension per line
+                (or comma/space separated), without the leading dot.
+              </p>
+            </header>
+            <div class="px-6 py-4 space-y-1.5">
+              <label
+                class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+                for="field-blocked-extensions"
+                data-i18n="admin.files.blocked_label"
+                >Blocked extensions</label
+              >
+              <textarea
+                id="field-blocked-extensions"
+                name="blockedFileExtensions"
+                rows="3"
+                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-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="exe sh bat cmd com scr ps1 msi"
+              ></textarea>
+              <p
+                class="text-xs text-gray-400 dark:text-gray-500"
+                data-i18n="admin.files.hint"
+              >
+                Defaults to common executable formats. Max upload size is 19 MB
+                per file.
+              </p>
+            </div>
+          </section>
+          <!-- ── 🎨 Diagram palettes ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">🎨</span>
+                <span data-i18n="admin.section.diagram.title"
+                  >Diagram palettes</span
+                >
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n="admin.section.diagram.desc"
+              >
+                Customize the colors available in the diagram editor.
+              </p>
+            </header>
+            <div class="divide-y divide-gray-100 dark:divide-gray-800">
+              <div class="px-6 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"
+                    data-i18n="admin.palette.shapes_title"
+                  >
+                    Shape colors
+                  </h4>
+                  <button
+                    type="button"
+                    onclick="resetNodePalette()"
+                    class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                    data-i18n="common.reset"
+                  >
+                    Reset
+                  </button>
+                </div>
+                <p
+                  class="text-xs text-gray-400 dark:text-gray-500"
+                  data-i18n="admin.palette.shapes_hint"
+                >
+                  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>
+              <div class="px-6 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"
+                    data-i18n="admin.palette.arrows_title"
+                  >
+                    Arrow colors
+                  </h4>
+                  <button
+                    type="button"
+                    onclick="resetEdgePalette()"
+                    class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                    data-i18n="common.reset"
+                  >
+                    Reset
+                  </button>
+                </div>
+                <p
+                  class="text-xs text-gray-400 dark:text-gray-500"
+                  data-i18n="admin.palette.arrows_hint"
+                >
+                  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"
+                    data-i18n="admin.palette.add_color_btn"
+                  >
+                    Add color
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+          <!-- ── 🛠️ Developer ── -->
+          <section
+            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden"
+          >
+            <header
+              class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
+            >
+              <h3
+                class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2"
+              >
+                <span class="text-xl" aria-hidden="true">🛠️</span>
+                <span data-i18n="admin.section.developer.title">Developer</span>
+              </h3>
+              <p
+                class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8"
+                data-i18n="admin.section.developer.desc"
+              >
+                Advanced options for power users.
+              </p>
+            </header>
+            <div class="px-6 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>
+          </section>
+        </div>
+      </form>
+      <!-- ── AGPL-3.0 License ── -->
+      <div class="max-w-3xl mx-auto px-6">
+        <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-ai-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-ai-documentation on npm</span
+                >
+              </a>
+            </div>
+          </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();
+          window._ldCurrentLanguage = cfg.language || "en";
+          document.getElementById("info-folder").textContent =
+            cfg.docsFolder || "—";
+          document.getElementById("info-port").textContent = cfg.port || "—";
+          document.getElementById("field-source-root").value =
+            cfg.docsFolder && cfg.sourceRoot
+              ? pathRelative(cfg.docsFolder, 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;
+          document.getElementById("field-exclusive-folder").checked =
+            !!cfg.exclusiveFolderExpansion;
+          document.getElementById("field-exclusive-category").checked =
+            !!cfg.exclusiveCategoryExpansion;
+          document.getElementById("field-code-max-height").value =
+            typeof cfg.codeBlockMaxHeight === "number"
+              ? cfg.codeBlockMaxHeight
+              : 400;
+          document.getElementById("field-soft-breaks").checked =
+            !!cfg.markdownSoftBreaks;
+          document.getElementById("field-blocked-extensions").value = (
+            cfg.blockedFileExtensions || []
+          ).join(" ");
+          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();
+        if (sourceRootRaw !== "" && isAbsolutePath(sourceRootRaw)) {
+          showMsg(window.t("admin.msg.source_root_absolute"), "error");
+          return;
+        }
+        const blockedExtensions = document
+          .getElementById("field-blocked-extensions")
+          .value.split(/[\s,]+/)
+          .map((e) => e.trim().replace(/^\.+/, "").toLowerCase())
+          .filter((e) => /^[a-z0-9]+$/.test(e));
+        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,
+          exclusiveFolderExpansion: document.getElementById(
+            "field-exclusive-folder",
+          ).checked,
+          exclusiveCategoryExpansion: document.getElementById(
+            "field-exclusive-category",
+          ).checked,
+          codeBlockMaxHeight: Math.max(
+            0,
+            Math.min(
+              5000,
+              parseInt(
+                document.getElementById("field-code-max-height").value,
+                10,
+              ) || 0,
+            ),
+          ),
+          markdownSoftBreaks:
+            document.getElementById("field-soft-breaks").checked,
+          diagramNodePalette: [...nodePalette],
+          diagramEdgePalette: [...edgePalette],
+          sourceRoot: sourceRootRaw === "" ? null : sourceRootRaw,
+          blockedFileExtensions: blockedExtensions,
+        };
+        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());
+          if (
+            payload.language &&
+            payload.language !== window._ldCurrentLanguage
+          ) {
+            await window.initI18n(payload.language);
+            window.applyI18n();
+            window._ldCurrentLanguage = payload.language;
+            updatePreview();
+          }
+          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");
+        const tr = (k, fb) =>
+          (typeof window.t === "function" && window.t(k)) || fb;
+        const labelDate = tr("admin.pattern.col_date", "Date");
+        const labelCat = tr("admin.pattern.col_category", "Category");
+        const labelTitle = tr("admin.pattern.col_title", "Title");
+        const labelNone = tr("admin.pattern.col_none", "none");
+        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">${labelDate}</span>
+            <span class="${p.date ? "text-green-600 dark:text-green-400" : "text-gray-400"}">${p.date || labelNone}</span>
+          </div>
+          <div>
+            <span class="text-gray-400 block mb-0.5">${labelCat}</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">${labelTitle}</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 ──────────────────────────────────
+      // extraFiles is stored internally as absolute paths (matching what GET /api/config returns
+      // and what /api/browse emits). On save, paths are converted to relative before PUT.
+      let extraFiles = [];
+      let browseParent = null;
+      let browseCurrent = "";
+      let docsFolder = "";
+      function initExtraFiles(cfg) {
+        extraFiles = cfg.extraFiles || [];
+        docsFolder = cfg.docsFolder || "";
+        renderExtraFiles();
+        loadBrowse(cfg.docsFolder || "/");
+      }
+      // Returns true if the path looks absolute (unix, Windows, or tilde-home).
+      function isAbsolutePath(p) {
+        if (!p) return false;
+        return /^([/\\]|[a-zA-Z]:[\\/]|~)/.test(p);
+      }
+      // Posix-style path.relative(from, to). Returns "." when equal, "../x" etc.
+      function pathRelative(from, to) {
+        if (!from) return to;
+        const norm = (s) => s.replace(/\\/g, "/");
+        const fromParts = norm(from).split("/").filter(Boolean);
+        const toParts = norm(to).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("/");
+        let rel = "../".repeat(ups) + downs;
+        if (rel.endsWith("/")) rel = rel.slice(0, -1);
+        return rel === "" ? "." : rel;
+      }
+      function relativeDisplay(filePath) {
+        if (!docsFolder) return filePath;
+        return "$DOCS_FOLDER/" + pathRelative(docsFolder, filePath);
+      }
+      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 relativeEntries = extraFiles.map((abs) =>
+            pathRelative(docsFolder, abs),
+          );
+          const res = await fetch("/api/config", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ extraFiles: relativeEntries }),
+          });
+          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>