living-ai-documentation 1.8.0 → 1.10.0

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

@@ -269,6 +269,28 @@
   "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.picker_search_placeholder": "Search a snippet…",
+  "snippet.picker_back": "Back",
+  "snippet.picker_no_results": "No matching snippet.",
+  "snippet.picker_cat_structure": "Structure",
+  "snippet.picker_cat_lists": "Lists",
+  "snippet.picker_cat_lists_code_data": "Lists, code & data",
+  "snippet.picker_cat_rich_text": "Rich text",
+  "snippet.picker_cat_code_data": "Code & data",
+  "snippet.picker_cat_links_media": "Links & media",
+  "snippet.picker_cat_advanced": "Advanced",
   "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,28 @@
   "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.picker_search_placeholder": "Rechercher un snippet…",
+  "snippet.picker_back": "Retour",
+  "snippet.picker_no_results": "Aucun snippet ne correspond.",
+  "snippet.picker_cat_structure": "Structure",
+  "snippet.picker_cat_lists": "Listes",
+  "snippet.picker_cat_lists_code_data": "Listes, code & données",
+  "snippet.picker_cat_rich_text": "Texte enrichi",
+  "snippet.picker_cat_code_data": "Code & données",
+  "snippet.picker_cat_links_media": "Liens & médias",
+  "snippet.picker_cat_advanced": "Avancés",
   "snippet.link_text_label": "Texte du lien",
   "snippet.link_text_placeholder": "Mon lien",
   "snippet.link_url_label": "URL",

package/dist/src/frontend/index.html

@@ -1429,7 +1429,7 @@
       >
       <div
         id="snippet-modal-card"
-        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"
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-full max-w-6xl 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 id="snippet-modal-title" data-i18n="snippet.modal_title">🧩 Insert a snippet</span>
@@ -1440,8 +1440,38 @@
           class="hidden rounded-lg px-3 py-2 text-xs"
         ></div>
 
-        <!-- Snippet type selector -->
-        <div class="space-y-1.5">
+        <!-- Snippet picker (insertion mode) -->
+        <div id="snippet-picker" class="hidden space-y-4">
+          <input
+            id="snippet-picker-search"
+            type="text"
+            data-i18n-placeholder="snippet.picker_search_placeholder"
+            placeholder="Search a snippet…"
+            oninput="snippetPickerSearchChanged()"
+            onkeydown="snippetPickerSearchKeydown(event)"
+            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 id="snippet-picker-categories" class="space-y-4 max-h-[60vh] overflow-y-auto pr-1"></div>
+          <div
+            id="snippet-picker-no-results"
+            data-i18n="snippet.picker_no_results"
+            class="hidden text-center text-sm text-gray-500 dark:text-gray-400 py-4"
+          >No matching snippet.</div>
+        </div>
+
+        <!-- Back to picker (panel mode after picker selection) -->
+        <button
+          type="button"
+          id="snippet-picker-back"
+          onclick="snippetPickerBack()"
+          class="hidden inline-flex items-center gap-2 text-xs font-medium text-blue-700 dark:text-blue-300 hover:underline"
+        >
+          <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
+          <span data-i18n="snippet.picker_back">Back</span>
+        </button>
+
+        <!-- Snippet type selector (hidden in picker UX, kept for state binding) -->
+        <div id="snippet-type-wrapper" class="hidden space-y-1.5">
           <label
             data-i18n="snippet.type_label"
             class="block text-xs font-medium text-gray-500 dark:text-gray-400"
@@ -1453,6 +1483,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 +1510,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 +1546,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,356 @@ 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;
+}
+
+const _SNIPPET_PICKER_ICONS = {
+  "heading-1": "fa-solid fa-heading",
+  "heading-2": "fa-solid fa-heading",
+  "heading-3": "fa-solid fa-heading",
+  "heading-4": "fa-solid fa-heading",
+  separator: "fa-solid fa-minus",
+  collapsible: "fa-solid fa-caret-right",
+  "unordered-list": "fa-solid fa-list-ul",
+  "ordered-list": "fa-solid fa-list-ol",
+  tree: "fa-solid fa-folder-tree",
+  "colored-text": "fa-solid fa-highlighter",
+  "colored-section": "fa-solid fa-fill-drip",
+  blockquote: "fa-solid fa-quote-right",
+  "code-block": "fa-solid fa-code",
+  table: "fa-solid fa-table-cells",
+  link: "fa-solid fa-link",
+  "doc-link": "fa-solid fa-file-lines",
+  "anchor-link": "fa-solid fa-anchor",
+  "anchor-doc-link": "fa-solid fa-anchor",
+  image: "fa-solid fa-image",
+  diagram: "fa-solid fa-diagram-project",
+  emojis: "fa-solid fa-face-smile",
+  attachment: "fa-solid fa-paperclip",
+  "local-search": "fa-solid fa-magnifying-glass",
+};
+
+const _SNIPPET_PICKER_CATEGORIES = [
+  {
+    key: "structure",
+    labelKey: "snippet.picker_cat_structure",
+    types: ["heading-1", "heading-2", "heading-3", "heading-4", "separator", "collapsible"],
+  },
+  {
+    key: "lists-code-data",
+    labelKey: "snippet.picker_cat_lists_code_data",
+    types: ["unordered-list", "ordered-list", "tree", "code-block", "table", "diagram"],
+  },
+  {
+    key: "rich-text",
+    labelKey: "snippet.picker_cat_rich_text",
+    types: ["colored-text", "colored-section", "blockquote", "emojis", "local-search"],
+  },
+  {
+    key: "links-media",
+    labelKey: "snippet.picker_cat_links_media",
+    types: ["link", "doc-link", "anchor-link", "anchor-doc-link", "image", "attachment"],
+  },
+];
+
+const _SNIPPET_PICKER_PALETTE = {
+  blueLight: {
+    card:
+      "border-sky-200 dark:border-sky-800 bg-sky-50 dark:bg-sky-950/40 hover:bg-sky-100 dark:hover:bg-sky-900/50 hover:border-sky-300 dark:hover:border-sky-700",
+    icon: "text-sky-700 dark:text-sky-300",
+  },
+  blue: {
+    card:
+      "border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/40 hover:bg-blue-100 dark:hover:bg-blue-900/50 hover:border-blue-300 dark:hover:border-blue-700",
+    icon: "text-blue-700 dark:text-blue-300",
+  },
+  blueDark: {
+    card:
+      "border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-950/40 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 hover:border-indigo-300 dark:hover:border-indigo-700",
+    icon: "text-indigo-700 dark:text-indigo-300",
+  },
+  blueDarker: {
+    card:
+      "border-blue-300 dark:border-blue-700 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-800/60 hover:border-blue-400 dark:hover:border-blue-600",
+    icon: "text-blue-900 dark:text-blue-100",
+  },
+  gray: {
+    card:
+      "border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600",
+    icon: "text-gray-700 dark:text-gray-200",
+  },
+  violet: {
+    card:
+      "border-violet-200 dark:border-violet-800 bg-violet-50 dark:bg-violet-950/40 hover:bg-violet-100 dark:hover:bg-violet-900/50 hover:border-violet-300 dark:hover:border-violet-700",
+    icon: "text-violet-700 dark:text-violet-300",
+  },
+  green: {
+    card:
+      "border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950/40 hover:bg-emerald-100 dark:hover:bg-emerald-900/50 hover:border-emerald-300 dark:hover:border-emerald-700",
+    icon: "text-emerald-700 dark:text-emerald-300",
+  },
+  greenDark: {
+    card:
+      "border-green-300 dark:border-green-700 bg-green-100 dark:bg-green-900/50 hover:bg-green-200 dark:hover:bg-green-800/60 hover:border-green-400 dark:hover:border-green-600",
+    icon: "text-green-900 dark:text-green-100",
+  },
+  teal: {
+    card:
+      "border-teal-200 dark:border-teal-800 bg-teal-50 dark:bg-teal-950/40 hover:bg-teal-100 dark:hover:bg-teal-900/50 hover:border-teal-300 dark:hover:border-teal-700",
+    icon: "text-teal-700 dark:text-teal-300",
+  },
+  dark: {
+    card:
+      "border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 hover:border-slate-400 dark:hover:border-slate-500",
+    icon: "text-slate-900 dark:text-slate-100",
+  },
+  orange: {
+    card:
+      "border-orange-200 dark:border-orange-800 bg-orange-50 dark:bg-orange-950/40 hover:bg-orange-100 dark:hover:bg-orange-900/50 hover:border-orange-300 dark:hover:border-orange-700",
+    icon: "text-orange-700 dark:text-orange-300",
+  },
+  orangeLight: {
+    card:
+      "border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/40 hover:bg-amber-100 dark:hover:bg-amber-900/50 hover:border-amber-300 dark:hover:border-amber-700",
+    icon: "text-amber-700 dark:text-amber-300",
+  },
+  orangeDark: {
+    card:
+      "border-orange-300 dark:border-orange-700 bg-orange-100 dark:bg-orange-900/50 hover:bg-orange-200 dark:hover:bg-orange-800/60 hover:border-orange-400 dark:hover:border-orange-600",
+    icon: "text-orange-900 dark:text-orange-100",
+  },
+  red: {
+    card:
+      "border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950/40 hover:bg-red-100 dark:hover:bg-red-900/50 hover:border-red-300 dark:hover:border-red-700",
+    icon: "text-red-700 dark:text-red-300",
+  },
+  pink: {
+    card:
+      "border-pink-200 dark:border-pink-800 bg-pink-50 dark:bg-pink-950/40 hover:bg-pink-100 dark:hover:bg-pink-900/50 hover:border-pink-300 dark:hover:border-pink-700",
+    icon: "text-pink-700 dark:text-pink-300",
+  },
+  amber: {
+    card:
+      "border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/40 hover:bg-amber-100 dark:hover:bg-amber-900/50 hover:border-amber-300 dark:hover:border-amber-700",
+    icon: "text-amber-700 dark:text-amber-300",
+  },
+  yellow: {
+    card:
+      "border-yellow-300 dark:border-yellow-700 bg-yellow-100 dark:bg-yellow-900/50 hover:bg-yellow-200 dark:hover:bg-yellow-800/60 hover:border-yellow-400 dark:hover:border-yellow-600",
+    icon: "text-yellow-700 dark:text-yellow-200",
+  },
+  indigo: {
+    card:
+      "border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-950/40 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 hover:border-indigo-300 dark:hover:border-indigo-700",
+    icon: "text-indigo-700 dark:text-indigo-300",
+  },
+  cyan: {
+    card:
+      "border-cyan-200 dark:border-cyan-800 bg-cyan-50 dark:bg-cyan-950/40 hover:bg-cyan-100 dark:hover:bg-cyan-900/50 hover:border-cyan-300 dark:hover:border-cyan-700",
+    icon: "text-cyan-700 dark:text-cyan-300",
+  },
+};
+
+const _SNIPPET_PICKER_TYPE_PALETTE = {
+  "heading-1": "blueLight",
+  "heading-2": "blue",
+  "heading-3": "blueDark",
+  "heading-4": "blueDarker",
+  separator: "gray",
+  collapsible: "dark",
+  "unordered-list": "green",
+  "ordered-list": "greenDark",
+  tree: "cyan",
+  "code-block": "dark",
+  table: "orange",
+  diagram: "red",
+  "colored-text": "pink",
+  "colored-section": "violet",
+  blockquote: "gray",
+  link: "orangeLight",
+  "doc-link": "orange",
+  "anchor-link": "orangeDark",
+  "anchor-doc-link": "orangeDark",
+  image: "amber",
+  attachment: "orange",
+  emojis: "yellow",
+  "local-search": "cyan",
+};
+
+const _SNIPPET_TYPE_I18N_KEY = {
+  "heading-1": "snippet.heading_1",
+  "heading-2": "snippet.heading_2",
+  "heading-3": "snippet.heading_3",
+  "heading-4": "snippet.heading_4",
+  separator: "snippet.separator",
+  collapsible: "snippet.collapsible",
+  "unordered-list": "snippet.bullet_list",
+  "ordered-list": "snippet.numbered_list",
+  tree: "snippet.tree",
+  "colored-text": "snippet.colored_text",
+  "colored-section": "snippet.colored_section",
+  blockquote: "snippet.blockquote",
+  "code-block": "snippet.code_block",
+  table: "snippet.table",
+  link: "snippet.link",
+  "doc-link": "snippet.link_doc",
+  "anchor-link": "snippet.link_anchor",
+  "anchor-doc-link": "snippet.link_doc_anchor",
+  image: "snippet.image",
+  diagram: "snippet.diagram",
+  emojis: "snippet.emojis",
+  attachment: "snippet.attachment",
+  "local-search": "snippet.local_search",
+};
+
+function _snippetPickerCleanLabel(raw) {
+  if (!raw) return "";
+  const parts = raw.split(/\s+/);
+  if (parts.length > 1 && !/^[\p{L}\p{N}]/u.test(parts[0])) {
+    return parts.slice(1).join(" ");
+  }
+  return raw;
+}
+
+function _snippetPickerLabel(type) {
+  const key = _SNIPPET_TYPE_I18N_KEY[type];
+  const raw = key ? window.t(key) : type;
+  return _snippetPickerCleanLabel(raw);
+}
+
+function _renderSnippetPicker() {
+  const container = document.getElementById("snippet-picker-categories");
+  if (!container) return;
+  container.innerHTML = "";
+  for (const cat of _SNIPPET_PICKER_CATEGORIES) {
+    const section = document.createElement("section");
+    section.dataset.snippetCategory = cat.key;
+    section.className = "space-y-2";
+
+    const h3 = document.createElement("h3");
+    h3.className =
+      "text-[11px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400";
+    h3.textContent = window.t(cat.labelKey);
+    section.appendChild(h3);
+
+    const grid = document.createElement("div");
+    grid.className =
+      "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8 gap-2";
+
+    for (const type of cat.types) {
+      const paletteName = _SNIPPET_PICKER_TYPE_PALETTE[type] || "indigo";
+      const colorClasses =
+        _SNIPPET_PICKER_PALETTE[paletteName] ||
+        _SNIPPET_PICKER_PALETTE.indigo;
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.dataset.snippetType = type;
+      btn.className =
+        "snippet-card min-h-[76px] flex flex-col items-center justify-center gap-2 p-2 rounded-lg border text-gray-800 dark:text-gray-100 transition-colors " +
+        colorClasses.card;
+      btn.onclick = () => snippetPickerSelect(type);
+
+      const i = document.createElement("i");
+      i.className =
+        (_SNIPPET_PICKER_ICONS[type] || "fa-solid fa-puzzle-piece") +
+        " text-xl " +
+        colorClasses.icon;
+      i.setAttribute("aria-hidden", "true");
+      btn.appendChild(i);
+
+      const label = document.createElement("span");
+      label.className = "text-xs font-medium text-center leading-tight";
+      label.textContent = _snippetPickerLabel(type);
+      btn.appendChild(label);
+
+      grid.appendChild(btn);
+    }
+    section.appendChild(grid);
+    container.appendChild(section);
+  }
+}
+
+function _showSnippetPicker() {
+  _renderSnippetPicker();
+  document.getElementById("snippet-picker").classList.remove("hidden");
+  document.getElementById("snippet-picker-back").classList.add("hidden");
+  document.getElementById("snippet-submit-btn").classList.add("hidden");
+  _SNIPPET_PANELS.forEach((p) => {
+    const panel = document.getElementById("snip-panel-" + p);
+    if (panel) panel.classList.add("hidden");
+  });
+  const previewWrap = document.getElementById("snippet-preview-wrap");
+  if (previewWrap) previewWrap.classList.add("hidden");
+  const search = document.getElementById("snippet-picker-search");
+  if (search) {
+    search.value = "";
+    _snippetPickerFilter("");
+    setTimeout(() => search.focus(), 50);
+  }
+}
+
+function _showSnippetPanelOnly() {
+  document.getElementById("snippet-picker").classList.add("hidden");
+  document.getElementById("snippet-submit-btn").classList.remove("hidden");
+  const back = document.getElementById("snippet-picker-back");
+  if (back) back.classList.toggle("hidden", _snippetInlineEdit);
+}
+
+function _snippetPickerFilter(query) {
+  const container = document.getElementById("snippet-picker-categories");
+  if (!container) return;
+  const q = (query || "").toLowerCase().trim();
+  let totalVisible = 0;
+  container.querySelectorAll("[data-snippet-category]").forEach((section) => {
+    let visibleCount = 0;
+    section.querySelectorAll("[data-snippet-type]").forEach((card) => {
+      const label = (card.querySelector("span")?.textContent || "").toLowerCase();
+      const match = !q || label.includes(q);
+      card.classList.toggle("hidden", !match);
+      if (match) visibleCount += 1;
+    });
+    section.classList.toggle("hidden", visibleCount === 0);
+    totalVisible += visibleCount;
+  });
+  const noResults = document.getElementById("snippet-picker-no-results");
+  if (noResults) noResults.classList.toggle("hidden", totalVisible > 0);
+}
+
+function snippetPickerSearchChanged() {
+  const input = document.getElementById("snippet-picker-search");
+  _snippetPickerFilter(input ? input.value : "");
+}
+
+function snippetPickerSearchKeydown(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    const firstVisible = document.querySelector(
+      "#snippet-picker-categories [data-snippet-type]:not(.hidden)",
+    );
+    if (firstVisible) snippetPickerSelect(firstVisible.dataset.snippetType);
+  }
+}
+
+function snippetPickerSelect(type) {
+  document.getElementById("snippet-type").value = type;
+  snippetTypeChanged();
+  _showSnippetPanelOnly();
+}
+
+function snippetPickerBack() {
+  const msgEl = document.getElementById("snippet-detect-msg");
+  if (msgEl) msgEl.classList.add("hidden");
+  _showSnippetPicker();
+}
+
 // 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 = [
@@ -664,8 +1015,8 @@ function _setSnippetModalMode(mode) {
   }
   const card = document.getElementById("snippet-modal-card");
   if (card) {
-    card.classList.toggle("max-w-lg", !isInline);
-    card.classList.toggle("max-w-5xl", isInline);
+    card.classList.toggle("max-w-6xl", !isInlineEdit);
+    card.classList.toggle("max-w-5xl", isInlineEdit);
   }
 }
 
@@ -679,45 +1030,22 @@ function _openSnippetsModalForText(selectedText, detectedOverride = null) {
   snippetAnchorDocChanged();
 
   const msgEl = document.getElementById("snippet-detect-msg");
+  if (msgEl) msgEl.classList.add("hidden");
+  const detected = selectedText
+    ? detectedOverride || detectSnippetType(selectedText)
+    : null;
 
-  if (selectedText) {
-    const detected = detectedOverride || detectSnippetType(selectedText);
-    if (detected) {
-      document.getElementById("snippet-type").value = detected;
-      snippetTypeChanged();
-      parseAndFillSnippet(selectedText, detected);
-      const labels = {
-        collapsible: window.t('snippet.collapsible'),
-        link: window.t('snippet.link'),
-        "doc-link": window.t('snippet.link_doc'),
-        "anchor-link": window.t('snippet.link_anchor'),
-        "anchor-doc-link": window.t('snippet.link_doc_anchor'),
-        "ordered-list": window.t('snippet.numbered_list'),
-        "unordered-list": window.t('snippet.bullet_list'),
-        "code-block": window.t('snippet.code_block'),
-        blockquote: window.t('snippet.blockquote'),
-        separator: window.t('snippet.separator'),
-        image: window.t('snippet.image'),
-        table: window.t('snippet.table'),
-        tree: window.t('snippet.tree'),
-        "colored-section": window.t('snippet.colored_section'),
-        "colored-text": window.t('snippet.colored_text'),
-      };
-      msgEl.textContent = window.t('snippet.detected_msg').replace('{type}', labels[detected] ?? detected);
-      msgEl.className =
-        "rounded-lg px-3 py-2 text-xs bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800";
-    } else {
-      document.getElementById("snippet-type").value = "diagram";
-      snippetTypeChanged();
-      msgEl.textContent = window.t('snippet.unknown_type_msg');
-      msgEl.className =
-        "rounded-lg px-3 py-2 text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800";
-    }
-    msgEl.classList.remove("hidden");
-  } else {
-    msgEl.classList.add("hidden");
-    document.getElementById("snippet-type").value = "diagram";
+  if (_snippetInlineInsert) {
+    _showSnippetPicker();
+  } else if (detected) {
+    document.getElementById("snippet-type").value = detected;
     snippetTypeChanged();
+    parseAndFillSnippet(selectedText, detected);
+    _showSnippetPanelOnly();
+  } else if (selectedText) {
+    _showSnippetPicker();
+  } else {
+    _showSnippetPicker();
   }
 
   document.getElementById("snippets-modal").classList.remove("hidden");
@@ -760,9 +1088,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 +1105,9 @@ function snippetTypeChanged() {
         type === "unordered-list" ||
         type === "colored-section" ||
         type === "colored-text" ||
-        type === "tree",
+        type === "tree" ||
+        type === "collapsible" ||
+        type.startsWith("heading-"),
     );
   }
 
@@ -861,7 +1192,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 +1308,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 +1544,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 +1678,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.10.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": {