living-ai-documentation 1.8.0 → 1.9.0

package/dist/src/frontend/i18n/en.json

@@ -269,6 +269,18 @@
   "snippet.collapsible_summary_label": "Summary title",
   "snippet.collapsible_details_placeholder": "Details",
   "snippet.collapsible_summary_value": "Details",
+  "snippet.collapsible_body_label": "Body Markdown",
+  "snippet.collapsible_body_placeholder": "## Title\n\nText",
+  "snippet.heading_1": "🇭1 Heading level 1",
+  "snippet.heading_2": "🇭2 Heading level 2",
+  "snippet.heading_3": "🇭3 Heading level 3",
+  "snippet.heading_4": "🇭4 Heading level 4",
+  "snippet.heading_text_label": "Heading text",
+  "snippet.heading_text_placeholder": "My heading",
+  "snippet.inline_edit_btn_heading_1": "Edit heading level 1",
+  "snippet.inline_edit_btn_heading_2": "Edit heading level 2",
+  "snippet.inline_edit_btn_heading_3": "Edit heading level 3",
+  "snippet.inline_edit_btn_heading_4": "Edit heading level 4",
   "snippet.link_text_label": "Link text",
   "snippet.link_text_placeholder": "My link",
   "snippet.link_url_label": "URL",

package/dist/src/frontend/i18n/fr.json

@@ -269,6 +269,18 @@
   "snippet.collapsible_summary_label": "Titre du résumé",
   "snippet.collapsible_details_placeholder": "Détails",
   "snippet.collapsible_summary_value": "Détails",
+  "snippet.collapsible_body_label": "Contenu du bloc (Markdown)",
+  "snippet.collapsible_body_placeholder": "## Titre\n\nTexte",
+  "snippet.heading_1": "🇭1 Titre niveau 1",
+  "snippet.heading_2": "🇭2 Titre niveau 2",
+  "snippet.heading_3": "🇭3 Titre niveau 3",
+  "snippet.heading_4": "🇭4 Titre niveau 4",
+  "snippet.heading_text_label": "Texte du titre",
+  "snippet.heading_text_placeholder": "Mon titre",
+  "snippet.inline_edit_btn_heading_1": "Éditer le titre niveau 1",
+  "snippet.inline_edit_btn_heading_2": "Éditer le titre niveau 2",
+  "snippet.inline_edit_btn_heading_3": "Éditer le titre niveau 3",
+  "snippet.inline_edit_btn_heading_4": "Éditer le titre niveau 4",
   "snippet.link_text_label": "Texte du lien",
   "snippet.link_text_placeholder": "Mon lien",
   "snippet.link_url_label": "URL",

package/dist/src/frontend/index.html

@@ -1453,6 +1453,10 @@
             class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
             <option data-i18n="snippet.diagram" value="diagram" selected>Diagram</option>
+            <option data-i18n="snippet.heading_1" value="heading-1">Title level 1</option>
+            <option data-i18n="snippet.heading_2" value="heading-2">Title level 2</option>
+            <option data-i18n="snippet.heading_3" value="heading-3">Title level 3</option>
+            <option data-i18n="snippet.heading_4" value="heading-4">Title level 4</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>
@@ -1476,6 +1480,26 @@
           </select>
         </div>
 
+        <!-- Panel: heading (shared by heading-1..heading-4) -->
+        <div id="snip-panel-heading" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.heading_text_label"
+              for="snip-heading-content"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Title text</label
+            >
+            <input
+              id="snip-heading-content"
+              type="text"
+              oninput="snippetUpdatePreview()"
+              data-i18n-placeholder="snippet.heading_text_placeholder"
+              placeholder="My title"
+              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: collapsible -->
         <div id="snip-panel-collapsible" class="space-y-3">
           <div class="space-y-1.5">
@@ -1492,6 +1516,22 @@
               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.collapsible_body_label"
+              for="snip-collapsible-body"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Body Markdown</label
+            >
+            <textarea
+              id="snip-collapsible-body"
+              rows="6"
+              oninput="snippetUpdatePreview()"
+              data-i18n-placeholder="snippet.collapsible_body_placeholder"
+              placeholder="## Titre&#10;&#10;Texte"
+              class="w-full px-3 py-2 text-sm font-mono 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"
+            ></textarea>
+          </div>
         </div>
 
         <!-- Panel: link -->

package/dist/src/frontend/inline-snippet-edit.js

@@ -19,6 +19,10 @@ const _INLINE_SNIPPET_TYPES = new Set([
   "separator",
   "ordered-list",
   "unordered-list",
+  "heading-1",
+  "heading-2",
+  "heading-3",
+  "heading-4",
 ]);
 
 const _INLINE_EDIT_AFFORDANCE_BY_TYPE = {
@@ -37,6 +41,10 @@ const _INLINE_EDIT_AFFORDANCE_BY_TYPE = {
   "anchor-doc-link": { labelKey: "snippet.inline_edit_btn_anchor_doc_link", iconClass: "fa-solid fa-anchor" },
   image: { labelKey: "snippet.inline_edit_btn_image", iconClass: "fa-solid fa-image" },
   separator: { labelKey: "snippet.inline_edit_btn_separator", iconClass: "fa-solid fa-minus" },
+  "heading-1": { labelKey: "snippet.inline_edit_btn_heading_1", iconClass: "fa-solid fa-heading" },
+  "heading-2": { labelKey: "snippet.inline_edit_btn_heading_2", iconClass: "fa-solid fa-heading" },
+  "heading-3": { labelKey: "snippet.inline_edit_btn_heading_3", iconClass: "fa-solid fa-heading" },
+  "heading-4": { labelKey: "snippet.inline_edit_btn_heading_4", iconClass: "fa-solid fa-heading" },
 };
 
 function _inlineEditAffordance(type) {
@@ -55,6 +63,10 @@ const _INLINE_TYPE_SELECTORS = [
   { types: ["separator"], selector: "hr" },
   { types: ["ordered-list"], selector: "ol" },
   { types: ["unordered-list"], selector: "ul" },
+  { types: ["heading-1"], selector: "h1" },
+  { types: ["heading-2"], selector: "h2" },
+  { types: ["heading-3"], selector: "h3" },
+  { types: ["heading-4"], selector: "h4" },
   { types: ["image"], selector: "img" },
   {
     types: ["anchor-doc-link", "doc-link", "anchor-link", "link"],
@@ -65,6 +77,12 @@ const _INLINE_TYPE_SELECTORS = [
 let _inlineSnippetPopup = null;
 
 function _inlineRangesOverlap(a, b) {
+  // Reject only same-position duplicates (different regex matched the same span)
+  // and partial overlaps. Allow strict nesting so a container can coexist with
+  // its inner snippets (the deepest-mapped DOM ancestor wins at click time).
+  if (a.start === b.start && a.end === b.end) return true;
+  if (a.start >= b.start && a.end <= b.end) return false;
+  if (b.start >= a.start && b.end <= a.end) return false;
   return a.start < b.end && b.start < a.end;
 }
 
@@ -123,13 +141,21 @@ function _inlineAddCodeBlockRanges(ranges, content) {
 function _inlineCollectSnippetRanges(content) {
   const ranges = [];
 
-  _inlineAddCodeBlockRanges(ranges, content);
+  // Container ranges first so inner snippets (code, lists, links…) that overlap
+  // with a container get skipped — the user edits the container as a whole.
   _inlineAddRegexRanges(ranges, content, /<details[\s\S]*?<\/details>/gi);
   _inlineAddRegexRanges(
     ranges,
     content,
     /<div\b[^>]*border-left[^>]*>[\s\S]*?<\/div>/gi,
   );
+  _inlineAddCodeBlockRanges(ranges, content);
+  _inlineAddRegexRanges(
+    ranges,
+    content,
+    /(?:^|\n\n)(#{1,4} [^\n]+)/g,
+    1,
+  );
   _inlineAddRegexRanges(
     ranges,
     content,

package/dist/src/frontend/snippet-detect.js

@@ -18,6 +18,8 @@ function detectSnippetType(text) {
   if (/^```/.test(t)) return "code-block";
   if (/^(\| *.*? *\|)+\n(\| *-+.*\|)+/.test(t)) return "table";
   if (/^> /.test(t)) return "blockquote";
+  const headingMatch = /^(#{1,4}) [^\n]+$/.exec(t);
+  if (headingMatch) return `heading-${headingMatch[1].length}`;
   if (/^(---|\n---\n)$/.test(t)) return "separator";
   if (/^1\. /.test(t)) return "ordered-list";
   if (/^- /.test(t)) return "unordered-list";

package/dist/src/frontend/snippets.js

@@ -10,6 +10,7 @@ let _snippetInlineEdit = false;
 let _snippetInlineInsert = false;
 let _snippetInlineIndent = "";
 const _SNIPPET_PANELS = [
+  "heading",
   "collapsible",
   "link",
   "doc-link",
@@ -29,6 +30,17 @@ const _SNIPPET_PANELS = [
   "attachment",
 ];
 
+const _SNIPPET_TYPE_TO_PANEL = {
+  "heading-1": "heading",
+  "heading-2": "heading",
+  "heading-3": "heading",
+  "heading-4": "heading",
+};
+
+function _snippetPanelForType(type) {
+  return _SNIPPET_TYPE_TO_PANEL[type] || type;
+}
+
 // Each emoji has search tags (bilingual FR/EN, space-separated, lowercase).
 // Filter matches a 2+ char query against any tag prefix or substring.
 const _EMOJI_CATEGORIES = [
@@ -700,6 +712,10 @@ function _openSnippetsModalForText(selectedText, detectedOverride = null) {
         image: window.t('snippet.image'),
         table: window.t('snippet.table'),
         tree: window.t('snippet.tree'),
+        "heading-1": window.t('snippet.heading_1'),
+        "heading-2": window.t('snippet.heading_2'),
+        "heading-3": window.t('snippet.heading_3'),
+        "heading-4": window.t('snippet.heading_4'),
         "colored-section": window.t('snippet.colored_section'),
         "colored-text": window.t('snippet.colored_text'),
       };
@@ -760,9 +776,10 @@ function closeSnippetsModal() {
 
 function snippetTypeChanged() {
   const type = document.getElementById("snippet-type").value;
+  const activePanel = _snippetPanelForType(type);
   _SNIPPET_PANELS.forEach((p) => {
     const panel = document.getElementById("snip-panel-" + p);
-    if (panel) panel.classList.toggle("hidden", p !== type);
+    if (panel) panel.classList.toggle("hidden", p !== activePanel);
   });
   const previewWrap = document.getElementById("snippet-preview-wrap");
   if (previewWrap) {
@@ -776,7 +793,9 @@ function snippetTypeChanged() {
         type === "unordered-list" ||
         type === "colored-section" ||
         type === "colored-text" ||
-        type === "tree",
+        type === "tree" ||
+        type === "collapsible" ||
+        type.startsWith("heading-"),
     );
   }
 
@@ -861,7 +880,11 @@ function buildSnippetMarkdown() {
       const summary =
         document.getElementById("snip-collapsible-summary").value ||
         window.t('snippet.collapsible_summary_value');
-      return `<details>\n<summary>${summary}</summary>\n\n## Titre\n\nTexte\n\n</details>`;
+      const bodyEl = document.getElementById("snip-collapsible-body");
+      const body = bodyEl && bodyEl.value.trim() !== ""
+        ? bodyEl.value
+        : "## Titre\n\nTexte";
+      return `<details>\n<summary>${summary}</summary>\n\n${body}\n\n</details>`;
     }
     case "link": {
       const text =
@@ -973,6 +996,17 @@ function buildSnippetMarkdown() {
     }
     case "separator":
       return `\n---\n`;
+    case "heading-1":
+    case "heading-2":
+    case "heading-3":
+    case "heading-4": {
+      const level = Number(type.slice(-1));
+      const text =
+        document.getElementById("snip-heading-content").value.trim() ||
+        (window.t && window.t("snippet.heading_text_placeholder")) ||
+        "Titre";
+      return `${"#".repeat(level)} ${text}`;
+    }
     case "image": {
       const alt =
         document.getElementById("snip-image-alt").value || "image";
@@ -1198,10 +1232,16 @@ function parseAndFillSnippet(text, type) {
   const t = text.trim();
   switch (type) {
     case "collapsible": {
-      const m = t.match(/<summary>([\s\S]*?)<\/summary>/i);
-      if (m)
+      const summaryMatch = t.match(/<summary>([\s\S]*?)<\/summary>/i);
+      if (summaryMatch) {
         document.getElementById("snip-collapsible-summary").value =
-          m[1].trim();
+          summaryMatch[1].trim();
+      }
+      const bodyMatch = t.match(
+        /<details\b[^>]*>[\s\S]*?<\/summary>\s*\n?([\s\S]*?)\s*<\/details>\s*$/i,
+      );
+      const bodyEl = document.getElementById("snip-collapsible-body");
+      if (bodyEl) bodyEl.value = bodyMatch ? bodyMatch[1].trim() : "";
       break;
     }
     case "link": {
@@ -1326,6 +1366,17 @@ function parseAndFillSnippet(text, type) {
       }
       break;
     }
+    case "heading-1":
+    case "heading-2":
+    case "heading-3":
+    case "heading-4": {
+      const level = Number(type.slice(-1));
+      const re = new RegExp(`^#{${level}}\\s+(.+)$`);
+      const m = t.match(re);
+      const headingEl = document.getElementById("snip-heading-content");
+      if (headingEl) headingEl.value = m ? m[1].trim() : "";
+      break;
+    }
     case "table": {
       const allLines = t
         .split("\n")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "living-ai-documentation",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Local Markdown documentation hub with a built-in MCP server — coding agents create ADRs, draw diagrams and detect drift while you code.",
   "main": "dist/src/server.js",
   "bin": {