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

@@ -0,0 +1,2314 @@
+<!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>Living Documentation</title>
+    <!-- i18n -->
+    <script src="/i18n.js"></script>
+    <!-- Tailwind CSS + Typography plugin via CDN -->
+    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <!-- Highlight.js — syntax highlighting (always dark) -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <!-- Font Awesome — icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+    />
+    <!-- WordCloud2.js — vendored from npm, no CDN dependency -->
+    <script src="/vendor/wordcloud2.js"></script>
+    <!-- Word Cloud logic — stop words, browser, rendering -->
+    <script src="/wordcloud.js"></script>
+    <!-- Extracted modules (classic scripts, global symbols).
+         Use `defer` so they execute in order AFTER the DOM is parsed. -->
+    <script defer src="/utils.js"></script>
+    <script defer src="/state.js"></script>
+    <script defer src="/sidebar-helpers.js"></script>
+    <script defer src="/snippet-detect.js"></script>
+    <script defer src="/snippet-table.js"></script>
+    <script defer src="/snippet-tree.js"></script>
+    <script defer src="/dark-mode.js"></script>
+    <script defer src="/config.js"></script>
+    <script defer src="/sidebar.js"></script>
+    <script defer src="/search.js"></script>
+    <script defer src="/image-paste.js"></script>
+    <script defer src="/documents.js"></script>
+    <script defer src="/misc.js"></script>
+    <script defer src="/snippets.js"></script>
+    <script defer src="/annotations.js"></script>
+    <script defer src="/export.js"></script>
+    <script defer src="/diagram-link-modal.js"></script>
+    <script defer src="/new-folder-modal.js"></script>
+    <script defer src="/new-doc-modal.js"></script>
+    <script defer src="/boot.js"></script>
+    <script>
+      tailwind.config = {
+        darkMode: "class",
+        theme: { extend: {} },
+      };
+    </script>
+    <style>
+      /* Smooth sidebar transitions */
+      .category-docs {
+        transition:
+          max-height 0.2s ease,
+          opacity 0.2s ease;
+      }
+      .category-docs.collapsed {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+      .category-docs.expanded {
+        max-height: 9999px;
+        opacity: 1;
+      }
+      /* Color swatch selection ring */
+      .color-swatch-btn.selected-swatch,
+      .color-text-swatch-btn.selected-text-swatch {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
+      }
+      /* Active doc highlight */
+      .doc-item.active {
+        background-color: rgba(59, 130, 246, 0.12);
+        color: rgb(59, 130, 246);
+        font-weight: 600;
+      }
+      .dark .doc-item.active {
+        background-color: rgba(96, 165, 250, 0.15);
+        color: rgb(96, 165, 250);
+      }
+      /* Prose overrides for correct dark mode */
+      .dark .prose {
+        color: #d1d5db;
+      }
+      .dark .prose h1,
+      .dark .prose h2,
+      .dark .prose h3,
+      .dark .prose h4,
+      .dark .prose h5,
+      .dark .prose h6 {
+        color: #f9fafb;
+      }
+      .dark .prose a {
+        color: #60a5fa;
+      }
+      .dark .prose strong {
+        color: #f3f4f6;
+      }
+      .prose code:not(pre code) {
+        background: #e5e7eb;
+        color: #111827;
+        padding: 0.1em 0.35em;
+        border-radius: 0.25em;
+        font-size: 0.875em;
+        font-weight: 400;
+      }
+      .dark .prose code:not(pre code) {
+        background: #4b5563;
+        color: #f87171;
+        padding: 0.1em 0.35em;
+        border-radius: 0.25em;
+        font-size: 0.875em;
+        font-weight: 400;
+      }
+      .dark .prose blockquote {
+        border-color: #4b5563;
+        color: #9ca3af;
+      }
+      .dark .prose hr {
+        border-color: #374151;
+      }
+      .dark .prose table th {
+        background: #1f2937;
+        color: #f9fafb;
+      }
+      .dark .prose table td {
+        border-color: #374151;
+      }
+      .dark .prose table tr:nth-child(even) {
+        background: #111827;
+      }
+      /* Print / Export PDF */
+      @media print {
+        #sidebar,
+        #header {
+          display: none !important;
+        }
+        #content-area {
+          margin: 0 !important;
+        }
+        .no-print {
+          display: none !important;
+        }
+        .prose {
+          max-width: 100% !important;
+        }
+      }
+      /* Scrollbar thin */
+      ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #d1d5db;
+        border-radius: 3px;
+      }
+      .dark ::-webkit-scrollbar-thumb {
+        background: #4b5563;
+      }
+      /* Search highlight */
+      mark {
+        background: #fef08a;
+        color: inherit;
+        border-radius: 2px;
+        padding: 0 2px;
+      }
+      mark.match-active {
+        background: #f97316;
+        color: #fff;
+      }
+      .dark mark {
+        background: #713f12;
+        color: #fef9c3;
+      }
+      .dark mark.match-active {
+        background: #ea580c;
+        color: #fff;
+      }
+    </style>
+  </head>
+  <body
+    class="h-full bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-200"
+  >
+    <div class="h-full flex flex-col">
+      <!-- ── Header ── -->
+      <header
+        id="header"
+        class="no-print flex items-center justify-between px-4 h-14 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shrink-0 z-10 shadow-sm"
+      >
+        <div class="flex items-center gap-3">
+          <span
+            onclick="toggleSidebar()"
+            data-i18n-title="nav.toggle_sidebar"
+            title="Toggle sidebar"
+            class="text-blue-600 dark:text-blue-400 text-xl select-none cursor-pointer hover:opacity-70 transition-opacity"
+            >&#128218;</span
+          >
+          <span id="app-title" class="font-semibold text-base tracking-tight"
+            >Living Documentation</span
+          >
+        </div>
+        <div class="flex items-center gap-2">
+          <!-- Search (desktop — mirrors sidebar search) -->
+          <div class="relative hidden sm:block">
+            <input
+              id="header-search"
+              type="search"
+              data-i18n-placeholder="nav.search_placeholder"
+              placeholder="Search docs…"
+              class="w-56 pl-8 pr-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <span
+              class="absolute left-2.5 top-2 text-gray-400 text-sm pointer-events-none"
+              >&#128269;</span
+            >
+          </div>
+          <!-- Dark mode toggle -->
+          <button
+            id="dark-toggle"
+            data-i18n-title="nav.toggle_dark"
+            title="Toggle dark mode"
+            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">&#9790;</span>
+          </button>
+          <!-- Word Cloud -->
+          <button
+            onclick="openWordCloud()"
+            data-i18n="nav.word_cloud"
+            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+          >
+            &#9729; Word Cloud
+          </button>
+          <!-- Diagram link -->
+          <a
+            href="/diagram"
+            data-i18n="nav.diagram"
+            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+          >
+            &#9671; Diagram
+          </a>
+          <!-- Admin link -->
+          <a
+            href="/admin"
+            data-i18n="nav.admin"
+            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+          >
+            &#9881; Admin
+          </a>
+        </div>
+      </header>
+      <!-- ── Body ── -->
+      <div class="flex flex-1 overflow-hidden">
+        <!-- ── Sidebar ── -->
+        <aside
+          id="sidebar"
+          class="no-print w-72 shrink-0 flex flex-col border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-y-auto"
+        >
+          <!-- Mobile / sidebar search -->
+          <div class="p-3 border-b border-gray-100 dark:border-gray-800">
+            <div class="relative sm:hidden">
+              <input
+                id="sidebar-search"
+                type="search"
+                data-i18n-placeholder="nav.search_mobile_placeholder"
+                placeholder="Search…"
+                class="w-full pl-8 pr-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <span
+                class="absolute left-2.5 top-2 text-gray-400 text-sm pointer-events-none"
+                >&#128269;</span
+              >
+            </div>
+            <!-- Stats -->
+            <div class="flex items-center justify-between mt-2 sm:mt-0">
+              <p
+                id="doc-count"
+                class="text-xs text-gray-400 dark:text-gray-500"
+              ></p>
+              <div class="flex items-center gap-2">
+                <button
+                  onclick="openExportModal()"
+                  data-i18n-title="nav.export"
+                  title="Export"
+                  class="text-gray-400 hover:text-blue-500 dark:text-gray-500 dark:hover:text-blue-400 transition-colors leading-none"
+                >
+                  <i class="fa-solid fa-file-export"></i>
+                </button>
+                <button
+                  onclick="openNewFolderModal()"
+                  data-i18n-title="nav.new_folder"
+                  title="New folder"
+                  class="text-gray-400 hover:text-blue-500 dark:text-gray-500 dark:hover:text-blue-400 transition-colors leading-none"
+                >
+                  <i class="fa-solid fa-folder-plus"></i>
+                </button>
+                <button
+                  onclick="openNewDocModal()"
+                  data-i18n-title="nav.new_document"
+                  title="New document"
+                  class="text-gray-400 hover:text-blue-500 dark:text-gray-500 dark:hover:text-blue-400 transition-colors leading-none"
+                >
+                  <i class="fa-solid fa-file-circle-plus"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+          <!-- Category tree -->
+          <nav id="category-tree" class="flex-1 py-2 space-y-0.5">
+            <p class="px-4 py-8 text-sm text-gray-400 text-center" data-i18n="common.loading">Loading…</p>
+          </nav>
+        </aside>
+        <!-- ── Main content ── -->
+        <main id="content-area" class="flex-1 overflow-y-auto">
+          <!-- Welcome / empty state -->
+          <div id="welcome" class="h-full flex items-center justify-center p-8">
+            <div class="max-w-md text-center">
+              <div class="text-5xl mb-4 select-none" aria-hidden="true">
+                &#128218;
+              </div>
+              <h2
+                data-i18n="welcome.title"
+                class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2"
+              >
+                Select a document
+              </h2>
+              <p data-i18n="welcome.hint" class="text-sm text-gray-500 dark:text-gray-500">
+                Choose a document from the sidebar to start reading.
+              </p>
+              <p
+                id="welcome-pattern"
+                class="mt-4 text-xs text-gray-400 dark:text-gray-600 font-mono bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 inline-block"
+              >
+                YYYY_MM_DD_HH_mm_[Category]_title.md
+              </p>
+              <p data-i18n="welcome.pattern_hint" class="mt-2 text-xs text-gray-400">
+                Expected filename pattern
+              </p>
+            </div>
+          </div>
+          <!-- Document viewer -->
+          <article id="doc-view" class="hidden max-w-4xl mx-auto px-6 py-8">
+            <!-- Doc header -->
+            <header
+              class="sticky top-0 z-10 bg-gray-50 dark:bg-gray-950 -mx-6 px-6 pt-8 mb-8 pb-6 border-b border-gray-300 dark:border-gray-800"
+            >
+              <div class="flex items-start gap-4 flex-wrap">
+                <div class="shrink min-w-0">
+                  <div class="flex items-center gap-2 mb-2 flex-wrap">
+                    <span
+                      id="doc-breadcrumbs"
+                      class="flex items-center gap-2 flex-wrap"
+                    ></span>
+                    <span
+                      id="doc-date"
+                      class="text-xs text-gray-400 dark:text-gray-500"
+                    ></span>
+                  </div>
+                  <h1
+                    id="doc-title"
+                    class="text-2xl font-bold text-gray-900 dark:text-gray-50 leading-tight"
+                  ></h1>
+                </div>
+                <!-- Actions -->
+                <div class="flex items-center gap-2 flex-wrap ml-auto">
+                  <!-- View mode actions -->
+                  <div id="view-actions" class="flex items-center gap-2">
+                    <button
+                      onclick="toggleMarker()"
+                      id="stabilo-btn"
+                      data-i18n-title="doc.marker_mode"
+                      title="Mode Marker — surligner pour annoter"
+                      class="no-print text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <svg
+                        id="stabilo-icon"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="18"
+                        height="18"
+                        viewBox="0 0 100 100"
+                        fill="none"
+                        style="
+                          display: inline-block;
+                          vertical-align: middle;
+                          margin-right: 4px;
+                        "
+                      >
+                        <!-- body -->
+                        <rect
+                          x="28"
+                          y="10"
+                          width="44"
+                          height="52"
+                          rx="6"
+                          transform="rotate(40 50 50)"
+                          fill="#bfdbfe"
+                          stroke="currentColor"
+                          stroke-width="6"
+                        />
+                        <!-- cap -->
+                        <rect
+                          x="52"
+                          y="8"
+                          width="22"
+                          height="30"
+                          rx="6"
+                          transform="rotate(40 50 50)"
+                          fill="#93c5fd"
+                          stroke="currentColor"
+                          stroke-width="6"
+                        />
+                        <!-- nib -->
+                        <polygon
+                          points="28,60 10,80 30,80 38,72"
+                          fill="#93c5fd"
+                          stroke="currentColor"
+                          stroke-width="5"
+                          stroke-linejoin="round"
+                        />
+                        <polygon
+                          points="28,48 19,70 36,75 55,70"
+                          fill="#93c5fd"
+                          stroke="currentColor"
+                          stroke-width="5"
+                          stroke-linejoin="round"
+                        />
+                        <!-- underline stroke -->
+                        <line
+                          x1="10"
+                          y1="90"
+                          x2="72"
+                          y2="90"
+                          stroke="currentColor"
+                          stroke-width="6"
+                          stroke-linecap="round"
+                        />
+                        <!-- hidden cross (two diagonal bars) -->
+                        <g id="stabilo-cross" style="display: none">
+                          <line
+                            x1="8"
+                            y1="8"
+                            x2="92"
+                            y2="92"
+                            stroke="currentColor"
+                            stroke-width="8"
+                            stroke-linecap="round"
+                          />
+                          <line
+                            x1="92"
+                            y1="8"
+                            x2="8"
+                            y2="92"
+                            stroke="currentColor"
+                            stroke-width="8"
+                            stroke-linecap="round"
+                          />
+                        </g></svg
+                      ><span data-i18n="doc.marker_btn">Marker</span>
+                    </button>
+                    <button
+                      onclick="toggleFullWidth()"
+                      id="full-width-btn"
+                      data-i18n-title="doc.toggle_width"
+                      title="Toggle full width"
+                      class="no-print text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <span data-i18n="doc.full_width_btn">&#8596; Full width</span>
+                    </button>
+                    <button
+                      onclick="exportPDF()"
+                      data-i18n-title="doc.export_pdf"
+                      title="Export as PDF"
+                      class="no-print text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      &#128196; <span data-i18n="doc.export_pdf_btn">Export PDF</span>
+                    </button>
+                    <button
+                      onclick="copyLink()"
+                      id="copy-link-btn"
+                      data-i18n-title="doc.copy_link"
+                      title="Copy link"
+                      class="no-print text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <i class="fa-solid fa-link"></i> <span data-i18n="doc.copy_link_btn">Copy link</span>
+                    </button>
+                    <button
+                      onclick="enterEditMode()"
+                      data-i18n-title="doc.edit"
+                      title="Edit document"
+                      class="no-print text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <i class="fa-solid fa-file-pen"></i> <span data-i18n="doc.edit_btn">Edit</span>
+                    </button>
+                    <button
+                      onclick="askDeleteDocument()"
+                      data-i18n-title="doc.delete"
+                      title="Delete document"
+                      class="no-print text-sm px-3 py-1.5 rounded-lg border border-red-200 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
+                    >
+                      <i class="fa-solid fa-trash"></i> <span data-i18n="doc.delete_btn">Delete</span>
+                    </button>
+                  </div>
+                  <!-- Edit mode actions -->
+                  <div id="edit-actions" class="hidden flex items-center gap-2">
+                    <span id="edit-save-msg" class="text-xs"></span>
+                    <button
+                      onclick="exitEditMode()"
+                      data-i18n-title="doc.cancel_edit"
+                      title="Cancel editing"
+                      class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <span data-i18n="common.cancel">Cancel</span>
+                    </button>
+                    <button
+                      onclick="openSnippetsModal()"
+                      data-i18n-title="doc.snippets"
+                      title="Insert a snippet"
+                      class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <span data-i18n="doc.snippets_btn">🧩 Snippets</span>
+                    </button>
+                    <button
+                      onclick="saveDocument()"
+                      data-i18n-title="doc.save"
+                      title="Save document"
+                      class="text-sm px-4 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+                    >
+                      <span data-i18n="common.save">Save</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <!-- Navigation history back-links -->
+              <div
+                id="doc-back"
+                class="hidden mt-2 flex flex-wrap gap-1 text-xs"
+              ></div>
+              <!-- Search match notice (inside sticky header) -->
+              <div
+                id="search-notice"
+                class="hidden mt-4 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-sm text-yellow-800 dark:text-yellow-300 overflow-hidden"
+              >
+                <div
+                  id="search-notice-title"
+                  class="px-3 py-2 font-medium border-b border-yellow-200 dark:border-yellow-800"
+                ></div>
+                <ol
+                  id="search-notice-list"
+                  class="max-h-40 overflow-y-auto divide-y divide-yellow-100 dark:divide-yellow-900/40 list-none m-0 p-0"
+                ></ol>
+              </div>
+            </header>
+            <!-- Rendered markdown -->
+            <div
+              id="doc-content"
+              class="prose prose-gray dark:prose-invert max-w-none prose-headings:scroll-mt-4 prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-[#0d1117] prose-pre:border prose-pre:border-gray-700"
+            ></div>
+            <!-- Markdown editor -->
+            <textarea
+              id="doc-editor"
+              class="hidden w-full min-h-[70vh] px-4 py-3 text-sm font-mono leading-relaxed rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y"
+              spellcheck="false"
+            ></textarea>
+          </article>
+        </main>
+      </div>
+      <!-- end body row -->
+    </div>
+    <!-- end root -->
+    <!-- ── New Folder modal ── -->
+    <div
+      id="new-folder-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    >
+      <div
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-md mx-4 p-6 space-y-4"
+      >
+        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-50">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="inline-block mr-1 align-text-bottom"
+          >
+            <path
+              d="M2 5a2 2 0 012-2h3.586a1 1 0 01.707.293L9.707 4.707A1 1 0 0010.414 5H16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V5z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              fill="none"
+            />
+            <line
+              x1="10"
+              y1="8"
+              x2="10"
+              y2="14"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+            />
+            <line
+              x1="7"
+              y1="11"
+              x2="13"
+              y2="11"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+            />
+          </svg>
+          <span data-i18n="modal.new_folder.title">New Folder</span>
+        </h3>
+        <!-- Folder name -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="modal.new_folder.name_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Folder name</label
+          >
+          <input
+            id="new-folder-name"
+            type="text"
+            data-i18n-placeholder="modal.new_folder.name_placeholder"
+            placeholder="my-folder"
+            oninput="newFolderUpdatePreview()"
+            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"
+          />
+        </div>
+        <!-- Location -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="modal.new_folder.location_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Location</label
+          >
+          <div class="flex items-center gap-2">
+            <span
+              id="new-folder-location-display"
+              class="flex-1 text-sm text-gray-600 dark:text-gray-300 font-mono truncate"
+              >/ (root)</span
+            >
+            <button
+              onclick="newFolderToggleBrowser()"
+              data-i18n="modal.new_folder.browse_btn"
+              class="text-xs px-2 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shrink-0"
+            >
+              Browse…
+            </button>
+          </div>
+          <!-- Inline browser -->
+          <div
+            id="new-folder-browser"
+            class="hidden border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden text-sm"
+          >
+            <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="new-folder-browse-up"
+                onclick="newFolderBrowseUp()"
+                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 disabled:opacity-30"
+              >
+                ↑
+              </button>
+              <span
+                id="new-folder-browse-path"
+                class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate flex-1"
+              ></span>
+              <button
+                onclick="newFolderSelectCurrentLocation()"
+                data-i18n="modal.new_folder.select_btn"
+                class="text-xs text-blue-600 dark:text-blue-400 hover:underline shrink-0"
+              >
+                Select this folder
+              </button>
+            </div>
+            <div
+              id="new-folder-browse-list"
+              class="max-h-40 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800"
+            ></div>
+          </div>
+        </div>
+        <!-- Preview -->
+        <div class="space-y-1">
+          <label
+            data-i18n="modal.new_folder.will_be_created"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Will be created at</label
+          >
+          <p
+            id="new-folder-preview"
+            data-i18n="modal.new_folder.enter_name"
+            class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 truncate"
+          >
+            (enter a name)
+          </p>
+        </div>
+        <p id="new-folder-error" class="hidden text-xs text-red-500"></p>
+        <div class="flex justify-end gap-3 pt-1">
+          <button
+            onclick="closeNewFolderModal()"
+            data-i18n="common.cancel"
+            class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onclick="createNewFolder()"
+            id="new-folder-create-btn"
+            data-i18n="modal.new_folder.create_btn"
+            class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+          >
+            Create
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- ── New Document modal ── -->
+    <div
+      id="new-doc-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    >
+      <div
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 space-y-4"
+      >
+        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-50">
+          &#10133; <span data-i18n="modal.new_doc.title">New Document</span>
+        </h3>
+        <!-- Title -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="modal.new_doc.title_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Title</label
+          >
+          <input
+            id="new-doc-title"
+            type="text"
+            data-i18n-placeholder="modal.new_doc.title_placeholder"
+            placeholder="My document"
+            oninput="newDocUpdatePreview()"
+            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"
+          />
+        </div>
+        <!-- Category -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="modal.new_doc.category_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Category</label
+          >
+          <input
+            id="new-doc-category"
+            type="text"
+            placeholder="General"
+            oninput="newDocUpdatePreview()"
+            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"
+          />
+        </div>
+        <!-- Location -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="modal.new_doc.location_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Location</label
+          >
+          <div class="flex items-center gap-2">
+            <span
+              id="new-doc-folder-display"
+              class="flex-1 px-3 py-2 text-xs rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 font-mono truncate"
+            >
+              / (root)
+            </span>
+            <button
+              onclick="newDocToggleBrowser()"
+              class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shrink-0"
+            >
+              &#128193; <span data-i18n="modal.new_doc.browse_btn">Browse</span>
+            </button>
+          </div>
+          <!-- Inline folder browser -->
+          <div
+            id="new-doc-browser"
+            class="hidden border border-gray-200 dark:border-gray-700 rounded-lg 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="new-doc-browse-up"
+                onclick="newDocBrowseUp()"
+                class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0"
+              >
+                &#8593; Up
+              </button>
+              <span
+                id="new-doc-browse-path"
+                class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"
+              ></span>
+            </div>
+            <div
+              id="new-doc-browse-list"
+              class="divide-y divide-gray-100 dark:divide-gray-800 max-h-40 overflow-y-auto"
+            ></div>
+            <!-- Create new folder row -->
+            <div
+              class="border-t border-gray-200 dark:border-gray-700 flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800/50"
+            >
+              <input
+                id="new-doc-new-folder-name"
+                type="text"
+                data-i18n-placeholder="modal.new_doc.new_folder_placeholder"
+                placeholder="New folder name…"
+                class="flex-1 px-2 py-1 text-xs rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-400"
+              />
+              <button
+                onclick="newDocCreateFolder()"
+                data-i18n="modal.new_doc.create_folder_btn"
+                class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shrink-0"
+              >
+                + Create
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Filename preview -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="modal.new_doc.filename_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Generated filename</label
+          >
+          <p
+            id="new-doc-filename-preview"
+            data-i18n="modal.new_doc.title_placeholder"
+            class="text-xs bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 font-mono text-gray-600 dark:text-gray-300 break-all"
+          >
+            (enter a title)
+          </p>
+        </div>
+        <!-- Error -->
+        <p id="new-doc-error" class="hidden text-xs text-red-500"></p>
+        <!-- Actions -->
+        <div class="flex justify-end gap-3 pt-1">
+          <button
+            onclick="closeNewDocModal()"
+            data-i18n="common.cancel"
+            class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onclick="createNewDocument()"
+            id="new-doc-create-btn"
+            data-i18n="common.create"
+            class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+          >
+            Create
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- ── Diagram link modal ── -->
+    <div
+      id="diag-link-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    >
+      <div
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 space-y-5"
+      >
+        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-50">
+          <span data-i18n="modal.diag_link.title">&#9671; Link a diagram</span>
+        </h3>
+        <!-- Mode toggle -->
+        <div class="flex gap-4 text-sm">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              type="radio"
+              name="diag-mode"
+              id="diag-mode-existing"
+              value="existing"
+              checked
+              onchange="diagModeChanged()"
+            />
+            <span data-i18n="modal.diag_link.existing_radio" class="text-gray-700 dark:text-gray-300"
+              >Existing diagram</span
+            >
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              type="radio"
+              name="diag-mode"
+              id="diag-mode-new"
+              value="new"
+              onchange="diagModeChanged()"
+            />
+            <span data-i18n="modal.diag_link.new_radio" class="text-gray-700 dark:text-gray-300">New diagram</span>
+          </label>
+        </div>
+        <!-- Existing diagram picker -->
+        <div id="diag-existing-section" class="space-y-1.5">
+          <label
+            data-i18n="modal.diag_link.select_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Select diagram</label
+          >
+          <select
+            id="diag-select"
+            onchange="diagUpdatePreview()"
+            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"
+          ></select>
+        </div>
+        <!-- New diagram name -->
+        <div id="diag-new-section" class="hidden space-y-1.5">
+          <label
+            data-i18n="modal.diag_link.name_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Diagram name</label
+          >
+          <input
+            id="diag-new-name"
+            type="text"
+            data-i18n-placeholder="modal.diag_link.name_placeholder"
+            placeholder="My diagram"
+            oninput="diagUpdatePreview()"
+            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"
+          />
+        </div>
+        <!-- Image filename -->
+        <div class="space-y-1.5">
+          <label
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            ><span data-i18n="modal.diag_link.img_label">Image filename</span>
+            <span data-i18n="modal.diag_link.img_hint" class="font-normal text-gray-400"
+              >(saved in ./images/)</span
+            ></label
+          >
+          <input
+            id="diag-img-name"
+            type="text"
+            placeholder="diagram.png"
+            oninput="diagUpdatePreview()"
+            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 font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <!-- Markdown preview -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="modal.diag_link.markdown_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Markdown that will be appended</label
+          >
+          <pre
+            id="diag-preview"
+            class="text-xs bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 overflow-x-auto text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
+          ></pre>
+        </div>
+        <!-- Actions -->
+        <div class="flex justify-end gap-3 pt-1">
+          <button
+            onclick="closeDiagramLinkModal()"
+            data-i18n="common.cancel"
+            class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onclick="insertDiagramLink()"
+            id="diag-insert-btn"
+            data-i18n="modal.diag_link.insert_btn"
+            class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+          >
+            Insert &amp; Open Diagram
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- ── Snippets modal ── -->
+    <div
+      id="snippets-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    >
+      <div
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 space-y-5 max-h-[90vh] overflow-y-auto"
+      >
+        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-50">
+          <span data-i18n="snippet.modal_title">🧩 Insert a snippet</span>
+        </h3>
+        <div
+          id="snippet-detect-msg"
+          class="hidden rounded-lg px-3 py-2 text-xs"
+        ></div>
+        <!-- Snippet type selector -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="snippet.type_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Snippet type</label
+          >
+          <select
+            id="snippet-type"
+            onchange="snippetTypeChanged()"
+            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 data-i18n="snippet.diagram" value="diagram" selected>Diagram</option>
+            <option data-i18n="snippet.collapsible" value="collapsible">Collapsible block (details)</option>
+            <option data-i18n="snippet.link" value="link">Link</option>
+            <option data-i18n="snippet.link_doc" value="doc-link">Link to document</option>
+            <option data-i18n="snippet.link_anchor" value="anchor-link">Link to anchor</option>
+            <option data-i18n="snippet.link_doc_anchor" value="anchor-doc-link">
+              Link to document with anchor
+            </option>
+            <option data-i18n="snippet.numbered_list" value="ordered-list">Numbered list</option>
+            <option data-i18n="snippet.bullet_list" value="unordered-list">Bullet list</option>
+            <option data-i18n="snippet.code_block" value="code-block">Code block</option>
+            <option data-i18n="snippet.blockquote" value="blockquote">Blockquote</option>
+            <option data-i18n="snippet.separator" value="separator">Horizontal rule</option>
+            <option data-i18n="snippet.image" value="image">Image</option>
+            <option data-i18n="snippet.table" value="table">Table</option>
+            <option data-i18n="snippet.tree" value="tree">Tree</option>
+            <option data-i18n="snippet.colored_section" value="colored-section">Colored section</option>
+            <option data-i18n="snippet.colored_text" value="colored-text">Colored text</option>
+          </select>
+        </div>
+        <!-- Panel: collapsible -->
+        <div id="snip-panel-collapsible" class="space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.collapsible_summary_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Summary title</label
+            >
+            <input
+              id="snip-collapsible-summary"
+              type="text"
+              value="Details"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Panel: link -->
+        <div id="snip-panel-link" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.link_text_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Link text</label
+            >
+            <input
+              id="snip-link-text"
+              type="text"
+              data-i18n-placeholder="snippet.link_text_placeholder"
+              placeholder="My link"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.link_url_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >URL</label
+            >
+            <input
+              id="snip-link-url"
+              type="text"
+              data-i18n-placeholder="snippet.link_url_placeholder"
+              placeholder="https://..."
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Panel: doc-link -->
+        <div id="snip-panel-doc-link" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.link_doc_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Document</label
+            >
+            <select
+              id="snip-doc-select"
+              onchange="snippetUpdatePreview()"
+              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"
+            ></select>
+          </div>
+          <div class="space-y-1.5">
+            <label
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              ><span data-i18n="snippet.link_text_label">Link text</span>
+              <span data-i18n="snippet.link_doc_text_hint" class="font-normal text-gray-400"
+                >(optional, uses default title)</span
+              ></label
+            >
+            <input
+              id="snip-doc-link-text"
+              type="text"
+              placeholder=""
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Panel: anchor-link -->
+        <div id="snip-panel-anchor-link" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.link_text_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Link text</label
+            >
+            <input
+              id="snip-anchor-text"
+              type="text"
+              data-i18n-placeholder="snippet.link_section_placeholder"
+              placeholder="View section"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+          <div class="space-y-1.5">
+            <label
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              ><span data-i18n="snippet.link_anchor_label">Anchor</span>
+              <span data-i18n="snippet.link_anchor_hint" class="font-normal text-gray-400"
+                >(without #, e.g. my-heading)</span
+              ></label
+            >
+            <input
+              id="snip-anchor-id"
+              type="text"
+              data-i18n-placeholder="snippet.link_anchor_placeholder"
+              placeholder="my-heading"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Panel: anchor-doc-link -->
+        <div id="snip-panel-anchor-doc-link" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.link_target_doc_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Target document</label
+            >
+            <select
+              id="snip-anchor-doc-select"
+              onchange="snippetUpdatePreview()"
+              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"
+            ></select>
+          </div>
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.link_text_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Link text</label
+            >
+            <input
+              id="snip-anchor-doc-text"
+              type="text"
+              data-i18n-placeholder="snippet.link_section_placeholder"
+              placeholder="View section"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+          <div class="space-y-1.5">
+            <label
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              ><span data-i18n="snippet.link_anchor_label">Anchor</span>
+              <span data-i18n="snippet.link_anchor_hint" class="font-normal text-gray-400"
+                >(without #, e.g. my-heading)</span
+              ></label
+            >
+            <input
+              id="snip-anchor-doc-id"
+              type="text"
+              data-i18n-placeholder="snippet.link_anchor_placeholder"
+              placeholder="my-heading"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Panel: code-block -->
+        <div id="snip-panel-code-block" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              ><span data-i18n="snippet.code_lang_label">Language</span>
+              <span data-i18n="snippet.code_lang_hint" class="font-normal text-gray-400"
+                >(e.g. javascript, python, bash…)</span
+              ></label
+            >
+            <input
+              id="snip-code-lang"
+              type="text"
+              placeholder="javascript"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Panel: image -->
+        <div id="snip-panel-image" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.image_alt_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Alt text</label
+            >
+            <input
+              id="snip-image-alt"
+              type="text"
+              data-i18n-placeholder="snippet.image_alt_placeholder"
+              placeholder="Image description"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.image_url_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Image URL</label
+            >
+            <input
+              id="snip-image-url"
+              type="text"
+              data-i18n-placeholder="snippet.image_src_placeholder"
+              placeholder="./images/my-image.png"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Panel: table -->
+        <div id="snip-panel-table" class="hidden space-y-3">
+          <div class="flex items-center gap-5">
+            <div class="flex items-center gap-2">
+              <span data-i18n="snippet.table_rows_label" class="text-xs text-gray-500 dark:text-gray-400"
+                >Rows</span
+              >
+              <button
+                onclick="tableChangeRows(-1)"
+                class="text-xs px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+              >
+                −
+              </button>
+              <span
+                id="snip-table-rows"
+                class="text-xs font-mono w-4 text-center"
+                >3</span
+              >
+              <button
+                onclick="tableChangeRows(1)"
+                class="text-xs px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+              >
+                +
+              </button>
+            </div>
+            <div class="flex items-center gap-2">
+              <span data-i18n="snippet.table_cols_label" class="text-xs text-gray-500 dark:text-gray-400"
+                >Columns</span
+              >
+              <button
+                onclick="tableChangeCols(-1)"
+                class="text-xs px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+              >
+                −
+              </button>
+              <span
+                id="snip-table-cols"
+                class="text-xs font-mono w-4 text-center"
+                >3</span
+              >
+              <button
+                onclick="tableChangeCols(1)"
+                class="text-xs px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+              >
+                +
+              </button>
+            </div>
+          </div>
+          <div id="snip-table-grid" class="overflow-x-auto"></div>
+        </div>
+        <!-- Panel: tree -->
+        <div id="snip-panel-tree" class="hidden space-y-2">
+          <p data-i18n="snippet.tree_hint" class="text-xs text-gray-400 dark:text-gray-500">
+            ← → to indent · names with / will be folders
+          </p>
+          <div id="snip-tree-list" class="space-y-1"></div>
+          <button
+            onclick="treeAddItem()"
+            data-i18n="snippet.tree_add_btn"
+            class="text-xs px-3 py-1.5 rounded-lg border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors w-full"
+          >
+            + Add item
+          </button>
+        </div>
+        <!-- Panel: diagram -->
+        <div id="snip-panel-diagram" class="hidden space-y-3">
+          <!-- Mode toggle -->
+          <div class="flex gap-4 text-sm">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="snip-diag-mode"
+                id="snip-diag-mode-existing"
+                value="existing"
+                checked
+                onchange="snippetDiagModeChanged()"
+              />
+              <span data-i18n="snippet.diagram_existing" class="text-gray-700 dark:text-gray-300"
+                >Existing diagram</span
+              >
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="snip-diag-mode"
+                id="snip-diag-mode-new"
+                value="new"
+                onchange="snippetDiagModeChanged()"
+              />
+              <span data-i18n="snippet.diagram_new" class="text-gray-700 dark:text-gray-300"
+                >New diagram</span
+              >
+            </label>
+          </div>
+          <!-- Existing picker -->
+          <div id="snip-diag-existing-section" class="space-y-1.5">
+            <label
+              data-i18n="snippet.diagram_select_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Select diagram</label
+            >
+            <select
+              id="snip-diag-select"
+              onchange="
+                snippetDiagSyncImgName();
+                snippetUpdatePreview();
+              "
+              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"
+            ></select>
+          </div>
+          <!-- New diagram name -->
+          <div id="snip-diag-new-section" class="hidden space-y-1.5">
+            <label
+              data-i18n="snippet.diagram_name_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Diagram name</label
+            >
+            <input
+              id="snip-diag-new-name"
+              type="text"
+              data-i18n-placeholder="snippet.diagram_name_placeholder"
+              placeholder="Diagram name…"
+              oninput="
+                snippetDiagSyncImgName();
+                snippetUpdatePreview();
+              "
+              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"
+            />
+          </div>
+          <!-- Image filename -->
+          <div class="space-y-1.5">
+            <label
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >
+              <span data-i18n="snippet.diag_img_label">Image filename</span>
+              <span data-i18n="snippet.diag_img_saved_hint" class="font-normal text-gray-400"
+                >(saved in ./images/)</span
+              >
+            </label>
+            <input
+              id="snip-diag-img-name"
+              type="text"
+              placeholder="diagram.png"
+              oninput="snippetUpdatePreview()"
+              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 font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+        <!-- Panel: colored-section -->
+        <div id="snip-panel-colored-section" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.colored_section_color_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Color</label
+            >
+            <div class="flex flex-wrap gap-2">
+              <button
+                type="button"
+                data-color-swatch="info"
+                onclick="colorSectionPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_info"
+                title="Info (blue)"
+                class="w-7 h-7 rounded-full border-2 border-blue-400 bg-blue-100 ring-2 ring-transparent hover:ring-blue-400 transition-all color-swatch-btn selected-swatch"
+              ></button>
+              <button
+                type="button"
+                data-color-swatch="success"
+                onclick="colorSectionPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_success"
+                title="Success (green)"
+                class="w-7 h-7 rounded-full border-2 border-green-400 bg-green-100 ring-2 ring-transparent hover:ring-green-400 transition-all color-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-swatch="warning"
+                onclick="colorSectionPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_warning"
+                title="Warning (amber)"
+                class="w-7 h-7 rounded-full border-2 border-amber-400 bg-amber-100 ring-2 ring-transparent hover:ring-amber-400 transition-all color-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-swatch="danger"
+                onclick="colorSectionPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_danger"
+                title="Danger (red)"
+                class="w-7 h-7 rounded-full border-2 border-red-400 bg-red-100 ring-2 ring-transparent hover:ring-red-400 transition-all color-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-swatch="note"
+                onclick="colorSectionPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_note"
+                title="Note (purple)"
+                class="w-7 h-7 rounded-full border-2 border-purple-400 bg-purple-100 ring-2 ring-transparent hover:ring-purple-400 transition-all color-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-swatch="neutral"
+                onclick="colorSectionPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_neutral"
+                title="Neutral (gray)"
+                class="w-7 h-7 rounded-full border-2 border-gray-400 bg-gray-100 ring-2 ring-transparent hover:ring-gray-400 transition-all color-swatch-btn"
+              ></button>
+            </div>
+          </div>
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.colored_section_content_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Content</label
+            >
+            <textarea
+              id="snip-colored-content"
+              rows="4"
+              data-i18n-placeholder="snippet.colored_section_content_placeholder"
+              placeholder="Your text here…"
+              oninput="snippetUpdatePreview()"
+              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 resize-y font-mono"
+            ></textarea>
+          </div>
+        </div>
+        <!-- Panel: colored-text -->
+        <div id="snip-panel-colored-text" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.colored_text_color_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Color</label
+            >
+            <div class="flex flex-wrap gap-2">
+              <button
+                type="button"
+                data-color-text-swatch="info"
+                onclick="colorTextPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_info"
+                title="Info (blue)"
+                class="w-7 h-7 rounded-full border-2 border-blue-500 bg-blue-500 ring-2 ring-transparent hover:ring-blue-400 transition-all color-text-swatch-btn selected-text-swatch"
+              ></button>
+              <button
+                type="button"
+                data-color-text-swatch="success"
+                onclick="colorTextPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_success"
+                title="Success (green)"
+                class="w-7 h-7 rounded-full border-2 border-green-500 bg-green-500 ring-2 ring-transparent hover:ring-green-400 transition-all color-text-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-text-swatch="warning"
+                onclick="colorTextPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_warning"
+                title="Warning (amber)"
+                class="w-7 h-7 rounded-full border-2 border-amber-500 bg-amber-500 ring-2 ring-transparent hover:ring-amber-400 transition-all color-text-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-text-swatch="danger"
+                onclick="colorTextPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_danger"
+                title="Danger (red)"
+                class="w-7 h-7 rounded-full border-2 border-red-500 bg-red-500 ring-2 ring-transparent hover:ring-red-400 transition-all color-text-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-text-swatch="note"
+                onclick="colorTextPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_note"
+                title="Note (purple)"
+                class="w-7 h-7 rounded-full border-2 border-purple-500 bg-purple-500 ring-2 ring-transparent hover:ring-purple-400 transition-all color-text-swatch-btn"
+              ></button>
+              <button
+                type="button"
+                data-color-text-swatch="neutral"
+                onclick="colorTextPickSwatch(this)"
+                data-i18n-title="snippet.colored_section_swatch_neutral"
+                title="Neutral (gray)"
+                class="w-7 h-7 rounded-full border-2 border-gray-500 bg-gray-500 ring-2 ring-transparent hover:ring-gray-400 transition-all color-text-swatch-btn"
+              ></button>
+            </div>
+          </div>
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.colored_text_content_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Text</label
+            >
+            <input
+              id="snip-colored-text-content"
+              type="text"
+              data-i18n-placeholder="snippet.colored_text_content_placeholder"
+              placeholder="Your text…"
+              oninput="snippetUpdatePreview()"
+              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"
+            />
+          </div>
+        </div>
+        <!-- Markdown preview -->
+        <div class="space-y-1.5">
+          <label
+            data-i18n="snippet.markdown_preview_label"
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+            >Markdown preview</label
+          >
+          <pre
+            id="snippet-preview"
+            class="text-xs bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 overflow-x-auto text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
+          ></pre>
+        </div>
+        <!-- Actions -->
+        <div class="flex justify-end gap-3 pt-1">
+          <button
+            onclick="closeSnippetsModal()"
+            data-i18n="common.cancel"
+            class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onclick="insertSnippet()"
+            data-i18n="snippet.insert_btn"
+            class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+          >
+            Insert
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- ── Image paste confirmation modal ── -->
+    <div
+      id="img-paste-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    >
+      <div
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-sm mx-4 p-6 space-y-5"
+      >
+        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-50">
+          🖼️ <span data-i18n="modal.img_paste.title">Paste clipboard image?</span>
+        </h3>
+        <div class="space-y-1.5">
+          <label
+            class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+          >
+            <span data-i18n="modal.img_paste.filename_label">Filename</span>
+            <span data-i18n="modal.img_paste.saved_hint" class="font-normal text-gray-400"
+              >(saved in images/)</span
+            >
+          </label>
+          <div class="flex items-center gap-2">
+            <input
+              id="img-paste-name"
+              type="text"
+              class="flex-1 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 font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <span
+              id="img-paste-ext"
+              class="text-xs text-gray-400 shrink-0"
+            ></span>
+          </div>
+        </div>
+        <div class="flex justify-end gap-3 pt-1">
+          <button
+            onclick="imgPasteCancel()"
+            data-i18n="common.cancel"
+            class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onclick="imgPasteConfirm()"
+            data-i18n="modal.img_paste.paste_btn"
+            class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+          >
+            Paste
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- ── Marker: post-it creation popup ── -->
+    <div
+      id="stabilo-popup"
+      class="hidden fixed z-50 w-80 bg-yellow-50 dark:bg-yellow-900/80 border-2 border-yellow-300 dark:border-yellow-600 rounded-xl shadow-2xl p-4 flex flex-col gap-3"
+      style="top: 0; left: 0"
+    >
+      <div
+        class="text-xs font-semibold text-yellow-700 dark:text-yellow-300 flex items-center gap-2"
+      >
+        <span>&#9999;</span> <span data-i18n="annotation.title">Annotation</span>
+      </div>
+      <div
+        id="stabilo-selected-preview"
+        class="text-xs text-yellow-800 dark:text-yellow-200 bg-yellow-100 dark:bg-yellow-800/50 rounded px-2 py-1 italic max-h-16 overflow-y-auto border border-yellow-200 dark:border-yellow-700"
+      ></div>
+      <textarea
+        id="stabilo-note-input"
+        rows="4"
+        data-i18n-placeholder="annotation.placeholder"
+        placeholder="Your comment or suggestion…"
+        class="w-full text-sm rounded-lg border border-yellow-300 dark:border-yellow-600 bg-white dark:bg-yellow-950 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-400 resize-none"
+      >
+      </textarea>
+      <div class="flex justify-end gap-2">
+        <button
+          onclick="cancelMarkerPopup()"
+          data-i18n="common.cancel"
+          class="text-sm px-3 py-1.5 rounded-lg border border-yellow-300 dark:border-yellow-600 text-yellow-700 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-800 transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          onclick="saveAnnotation()"
+          data-i18n="annotation.save_btn"
+          class="text-sm px-4 py-1.5 rounded-lg bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-500 text-yellow-900 dark:text-white font-semibold transition-colors"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+    <!-- ── Marker: read-only post-it hover popup ── -->
+    <div
+      id="stabilo-read-popup"
+      class="hidden fixed z-50 w-80 bg-yellow-50 dark:bg-yellow-900/80 border-2 border-yellow-300 dark:border-yellow-600 rounded-xl shadow-2xl p-4 flex flex-col gap-2 pointer-events-auto"
+      style="top: 0; left: 0"
+    >
+      <div
+        class="text-xs font-semibold text-yellow-700 dark:text-yellow-300 flex items-center gap-2"
+      >
+        <span>&#9999;</span>
+        <span
+          id="stabilo-read-date"
+          class="font-normal text-yellow-600 dark:text-yellow-400"
+        ></span>
+      </div>
+      <div
+        id="stabilo-read-orphan"
+        data-i18n="annotation.orphan"
+        class="hidden text-xs font-semibold text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 rounded px-2 py-1"
+      ></div>
+      <div
+        id="stabilo-read-text"
+        class="text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap max-h-48 overflow-y-auto"
+      ></div>
+      <div
+        class="flex justify-end pt-1 border-t border-yellow-200 dark:border-yellow-700"
+      >
+        <button
+          id="stabilo-delete-btn"
+          data-i18n="annotation.delete_btn"
+          class="text-xs px-3 py-1.5 rounded-lg border border-red-200 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors flex items-center gap-1"
+        >
+          🗑 Delete
+        </button>
+      </div>
+    </div>
+    <!-- ── Marker: delete confirmation ── -->
+    <div
+      id="stabilo-confirm-delete"
+      class="hidden fixed z-50 w-72 bg-white dark:bg-gray-900 border border-red-200 dark:border-red-700 rounded-xl shadow-2xl p-4 flex flex-col gap-3"
+      style="top: 0; left: 0"
+    >
+      <p data-i18n="annotation.confirm_delete" class="text-sm text-gray-700 dark:text-gray-200">
+        Delete this annotation?
+      </p>
+      <div class="flex justify-end gap-2">
+        <button
+          onclick="cancelDeleteAnnotation()"
+          data-i18n="common.cancel"
+          class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          onclick="confirmDeleteAnnotation()"
+          data-i18n="annotation.confirm_btn"
+          class="text-sm px-4 py-1.5 rounded-lg bg-red-500 hover:bg-red-600 text-white font-semibold transition-colors"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+    <!-- ── Document: delete confirmation ── -->
+    <div
+      id="doc-confirm-delete"
+      class="hidden fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
+      onclick="cancelDeleteDocument(event)"
+    >
+      <div
+        class="w-full max-w-sm bg-white dark:bg-gray-900 border border-red-200 dark:border-red-700 rounded-xl shadow-2xl p-5 flex flex-col gap-3"
+        onclick="event.stopPropagation()"
+      >
+        <p data-i18n="doc.confirm_delete" class="text-sm text-gray-700 dark:text-gray-200">
+          Permanently delete this document?
+        </p>
+        <p id="doc-confirm-delete-title" class="text-xs text-gray-500 dark:text-gray-400 italic truncate"></p>
+        <div class="flex justify-end gap-2 mt-2">
+          <button
+            onclick="cancelDeleteDocument()"
+            data-i18n="common.cancel"
+            class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onclick="confirmDeleteDocument()"
+            data-i18n="doc.confirm_delete_btn"
+            class="text-sm px-4 py-1.5 rounded-lg bg-red-500 hover:bg-red-600 text-white font-semibold transition-colors"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- ── Marker: right elevator ── -->
+    <div
+      id="stabilo-elevator"
+      class="hidden fixed top-14 right-0 w-10 flex flex-col items-center py-2 gap-2 z-40 overflow-y-auto"
+      style="max-height: calc(100vh - 3.5rem)"
+    ></div>
+    <!-- ── Image lightbox overlay ── -->
+    <div
+      id="img-lightbox"
+      class="hidden fixed inset-0 z-50 bg-black/90 flex items-center justify-center cursor-pointer"
+      onclick="closeLightbox()"
+    >
+      <img
+        id="img-lightbox-img"
+        src=""
+        alt=""
+        class="max-w-full max-h-full object-contain select-none"
+        onclick="event.stopPropagation()"
+      />
+      <button
+        onclick="closeLightbox()"
+        class="absolute top-4 right-4 text-white/70 hover:text-white text-2xl leading-none"
+      >
+        &times;
+      </button>
+    </div>
+    <!-- ── Word Cloud overlay ── -->
+    <div
+      id="wc-overlay"
+      class="hidden fixed inset-0 z-50 flex flex-col bg-white dark:bg-gray-950"
+    >
+      <div
+        class="flex items-center justify-between px-6 h-14 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shrink-0"
+      >
+        <h2 data-i18n="wc.title" class="font-semibold text-base">&#9729; Word Cloud</h2>
+        <button
+          onclick="closeWordCloud()"
+          data-i18n="wc.close_btn"
+          class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
+          ✕ Close
+        </button>
+      </div>
+      <!-- Search root toolbar -->
+      <div
+        class="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shrink-0"
+      >
+        <!-- Row 1: path + browse + launch -->
+        <div class="flex items-center gap-3 px-6 py-3">
+          <label
+            data-i18n="wc.search_root_label"
+            class="text-xs font-medium text-gray-500 dark:text-gray-400 shrink-0"
+            >Search root</label
+          >
+          <input
+            id="wc-root"
+            type="text"
+            readonly
+            spellcheck="false"
+            class="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono cursor-default focus:outline-none"
+          />
+          <button
+            onclick="wcToggleBrowser()"
+            class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shrink-0"
+          >
+            &#128193; <span data-i18n="wc.browse_btn">Browse</span>
+          </button>
+          <button
+            onclick="launchWordCloud()"
+            data-i18n="wc.launch_btn"
+            class="text-sm px-4 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors shrink-0"
+          >
+            &#9654; Launch
+          </button>
+        </div>
+        <!-- Row 1b: exclude folders -->
+        <div class="flex items-start gap-3 px-6 pb-2">
+          <label
+            data-i18n="wc.exclude_label"
+            class="text-xs font-medium text-gray-500 dark:text-gray-400 shrink-0 pt-1.5"
+            >Exclude</label
+          >
+          <textarea
+            id="wc-exclude"
+            rows="3"
+            spellcheck="false"
+            data-i18n-placeholder="wc.exclude_placeholder"
+            placeholder="components/ui, package-lock.json  (one per line or comma-separated)"
+            oninput="wcOnExcludeChange()"
+            class="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono focus:outline-none focus:ring-1 focus:ring-blue-400 resize-y"
+          ></textarea>
+          <button
+            onclick="wcToggleExcludeBrowser()"
+            class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shrink-0"
+          >
+            &#128193; <span data-i18n="wc.browse_btn">Browse</span>
+          </button>
+        </div>
+        <!-- Row 1c: exclude browser (collapsed by default) -->
+        <div
+          id="wc-exclude-browser"
+          class="hidden border-t border-gray-200 dark:border-gray-700"
+        >
+          <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="wc-excl-browse-up"
+              onclick="wcExclBrowseUp()"
+              class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0"
+            >
+              &#8593; Up
+            </button>
+            <span
+              id="wc-excl-browse-path"
+              class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"
+            ></span>
+          </div>
+          <div
+            id="wc-excl-browse-list"
+            class="divide-y divide-gray-100 dark:divide-gray-800 max-h-52 overflow-y-auto"
+          ></div>
+        </div>
+        <!-- Row 2: extension checkboxes -->
+        <div class="flex items-center gap-x-4 gap-y-2 px-6 pb-3 flex-wrap">
+          <span
+            data-i18n="wc.extensions_label"
+            class="text-xs font-medium text-gray-500 dark:text-gray-400 shrink-0"
+            >Extensions</span
+          >
+          <button
+            onclick="wcToggleAllExts()"
+            id="wcToggleAllBtn"
+            data-i18n="wc.all_btn"
+            class="text-xs text-blue-600 dark:text-blue-400 hover:underline shrink-0"
+          >
+            All
+          </button>
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="md" checked />
+            .md</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="mdx" /> .mdx</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="txt" /> .txt</label
+          >
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="ts" /> .ts</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="tsx" /> .tsx</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="js" /> .js</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="jsx" /> .jsx</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="mjs" /> .mjs</label
+          >
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="java" /> .java</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="kt" /> .kt</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="py" /> .py</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="go" /> .go</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="rs" /> .rs</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="cs" /> .cs</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="swift" />
+            .swift</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="rb" /> .rb</label
+          >
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="prisma" />
+            .prisma</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="graphql" />
+            .graphql</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="gql" /> .gql</label
+          >
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="html" /> .html</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="css" /> .css</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="scss" /> .scss</label
+          >
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="yml" /> .yml</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="yaml" /> .yaml</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="json" /> .json</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="xml" /> .xml</label
+          >
+          <label
+            class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"
+            ><input type="checkbox" class="wc-ext" value="toml" /> .toml</label
+          >
+        </div>
+        <!-- Row 3: inline folder browser (collapsed by default) -->
+        <div
+          id="wc-browser"
+          class="hidden border-t border-gray-200 dark:border-gray-700"
+        >
+          <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="wc-browse-up"
+              onclick="wcBrowseUp()"
+              class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0"
+            >
+              &#8593; Up
+            </button>
+            <span
+              id="wc-browse-path"
+              class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"
+            ></span>
+          </div>
+          <div
+            id="wc-browse-list"
+            class="divide-y divide-gray-100 dark:divide-gray-800 max-h-52 overflow-y-auto"
+          ></div>
+        </div>
+      </div>
+      <div id="wc-body" class="flex-1 overflow-hidden flex">
+        <!-- Left sidebar: stats + controls + top-50 words -->
+        <div
+          id="wc-sidebar"
+          class="hidden w-56 shrink-0 border-r border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-900 overflow-hidden"
+        >
+          <div
+            id="wc-stats"
+            class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400 space-y-0.5 border-b border-gray-100 dark:border-gray-800"
+          ></div>
+          <div
+            class="px-3 py-2 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2"
+          >
+            <span data-i18n="wc.min_files_label" class="text-xs text-gray-500 dark:text-gray-400 shrink-0"
+              >Min files</span
+            >
+            <input
+              id="wc-min-files"
+              type="number"
+              min="1"
+              max="20"
+              value="1"
+              class="w-12 px-1.5 py-0.5 text-xs rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none"
+            />
+            <button
+              onclick="wcApplyFilter()"
+              data-i18n="wc.apply_btn"
+              class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+            >
+              Apply
+            </button>
+          </div>
+          <p
+            data-i18n="wc.top_words"
+            class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 dark:text-gray-600 uppercase tracking-wider"
+          >
+            Top words
+          </p>
+          <div id="wc-top-list" class="flex-1 overflow-y-auto"></div>
+        </div>
+        <!-- Canvas / status area -->
+        <div id="wc-canvas-wrap" class="flex-1 relative overflow-hidden">
+          <p
+            id="wc-status"
+            class="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm animate-pulse"
+          ></p>
+          <canvas
+            id="wc-canvas"
+            class="hidden"
+            style="position: absolute; inset: 0"
+          ></canvas>
+        </div>
+        <!-- Right detail panel: shown on word click -->
+        <div
+          id="wc-detail"
+          class="hidden w-80 shrink-0 border-l border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-900 overflow-hidden"
+        >
+          <div
+            class="px-3 py-2 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between"
+          >
+            <span
+              id="wc-detail-word"
+              class="font-bold text-sm text-gray-900 dark:text-gray-100"
+            ></span>
+            <button
+              onclick="wcCloseDetail()"
+              class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xs leading-none"
+            >
+              ✕
+            </button>
+          </div>
+          <p
+            data-i18n="wc.found_in"
+            class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 dark:text-gray-600 uppercase tracking-wider"
+          >
+            Found in
+          </p>
+          <div
+            id="wc-detail-files"
+            class="flex-1 overflow-y-auto px-3 py-1 space-y-1 text-xs"
+          ></div>
+        </div>
+      </div>
+    </div>
+    <!-- All inline logic extracted to modules under src/frontend/*.js -->
+    <!-- ── Export modal (Markdown / HTML / PDF) ────────────────────────────── -->
+    <div
+      id="export-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    >
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-sm mx-4 p-6 space-y-4">
+        <!-- Title -->
+        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-50">
+          <i class="fa-solid fa-file-export mr-2 text-blue-500"></i>
+          <span data-i18n="modal.export.title">Export</span>
+        </h3>
+        <!-- Tabs -->
+        <div class="flex gap-0 border-b border-gray-200 dark:border-gray-700">
+          <button
+            id="export-tab-markdown"
+            onclick="switchExportTab('markdown')"
+            data-i18n="modal.export.tab_markdown"
+            class="px-4 py-2 text-sm border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 font-semibold transition-colors"
+          >Markdown</button>
+          <button
+            id="export-tab-html"
+            onclick="switchExportTab('html')"
+            data-i18n="modal.export.tab_html"
+            class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+          >HTML</button>
+          <button
+            id="export-tab-pdf"
+            onclick="switchExportTab('pdf')"
+            data-i18n="modal.export.tab_pdf"
+            class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+          >PDF</button>
+        </div>
+        <!-- Folder list (html tab only) -->
+        <div id="export-folder-section" class="hidden">
+          <div
+            id="export-folder-list"
+            class="max-h-48 overflow-y-auto space-y-0.5 border border-gray-200 dark:border-gray-700 rounded-lg p-2"
+          ></div>
+        </div>
+        <!-- Markdown tab content -->
+        <div id="export-content-markdown">
+          <p class="text-xs text-gray-500 dark:text-gray-400" data-i18n="modal.export.markdown_hint">
+            Export all documents and images as Markdown files, with internal links rewritten to relative paths.
+          </p>
+          <div class="flex justify-end gap-3 pt-2">
+            <button
+              onclick="closeExportModal()"
+              data-i18n="common.cancel"
+              class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >Cancel</button>
+            <button
+              id="export-md-btn"
+              onclick="exportMarkdown()"
+              data-i18n="modal.export.markdown_btn"
+              class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+            >Export Markdown</button>
+          </div>
+        </div>
+        <!-- HTML tab content -->
+        <div id="export-content-html" class="hidden">
+          <p class="text-xs text-gray-500 dark:text-gray-400" data-i18n="modal.export_html.hint">
+            Select the folders to include in the ZIP archive.
+          </p>
+          <div class="flex justify-end gap-3 pt-2">
+            <button
+              onclick="closeExportModal()"
+              data-i18n="common.cancel"
+              class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >Cancel</button>
+            <button
+              id="export-notion-btn"
+              onclick="exportHtml('notion')"
+              data-i18n="modal.export_html.notion_btn"
+              class="text-sm px-4 py-2 rounded-lg border border-blue-500 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 font-semibold transition-colors"
+            >Export Notion</button>
+            <button
+              id="export-confluence-btn"
+              onclick="exportHtml('confluence')"
+              data-i18n="modal.export_html.confluence_btn"
+              class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+            >Export Confluence</button>
+          </div>
+        </div>
+        <!-- PDF tab content -->
+        <div id="export-content-pdf" class="hidden">
+          <p class="text-xs text-gray-500 dark:text-gray-400" data-i18n="modal.export.pdf_hint">
+            Export all documents as a single PDF with table of contents.
+          </p>
+          <div class="flex justify-end gap-3 pt-2">
+            <button
+              onclick="closeExportModal()"
+              data-i18n="common.cancel"
+              class="text-sm px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >Cancel</button>
+            <button
+              id="export-pdf-btn"
+              onclick="exportAllPdfFromModal()"
+              data-i18n="modal.export.pdf_btn"
+              class="text-sm px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors"
+            >Export all PDF</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>