living-documentation 7.0.0

package/dist/src/frontend/sidebar.js

@@ -0,0 +1,182 @@
+// ── Sidebar rendering ────────────────────────────────────────────────────────
+// Depends on globals from state.js, utils.js, sidebar-helpers.js, and
+// `currentDocId` (updated by documents.js when a doc opens).
+
+function renderSidebar(docs) {
+  const tree = document.getElementById("category-tree");
+  const countEl = document.getElementById("doc-count");
+
+  if (!docs.length && !allFolderPaths.length) {
+    tree.innerHTML =
+      `<p class="px-4 py-8 text-sm text-gray-400 text-center">${window.t('sidebar.no_docs')}</p>`;
+    countEl.textContent = "";
+    return;
+  }
+
+  countEl.textContent = `${docs.length} document${docs.length !== 1 ? "s" : ""}`;
+
+  // Auto-expand only root General initially
+  if (expandedCategories.size === 0) expandedCategories.add("General");
+
+  tree.innerHTML = renderTreeNode(buildFolderTree(docs), []);
+}
+
+// Build a recursive tree: each node holds { categories: {cat: docs[]}, children: {label: node} }
+function buildFolderTree(docs) {
+  const root = { categories: {}, children: {} };
+  for (const doc of docs) {
+    let node = root;
+    for (const seg of doc.folder || []) {
+      if (!node.children[seg])
+        node.children[seg] = { categories: {}, children: {} };
+      node = node.children[seg];
+    }
+    if (!node.categories[doc.category])
+      node.categories[doc.category] = [];
+    node.categories[doc.category].push(doc);
+  }
+  // Ensure empty folders appear in the tree (only when no active filter)
+  if (searchQuery) return root;
+  for (const folderPath of allFolderPaths) {
+    const segments = folderPath.split("/").filter(Boolean);
+    let node = root;
+    for (const seg of segments) {
+      if (!node.children[seg])
+        node.children[seg] = { categories: {}, children: {} };
+      node = node.children[seg];
+    }
+  }
+  return root;
+}
+
+// Render a tree node at a given folder path (array of segment strings)
+function renderTreeNode(node, folderPath) {
+  let html = "";
+
+  // Helper to render one category group
+  const renderCat = (cat) => {
+    const catPathKey = [...folderPath, cat].join("|");
+    const catNodeId =
+      "cat-" +
+      [...folderPath, cat].map((s) => s.replace(/\W/g, "-")).join("-");
+    const isExpanded = expandedCategories.has(catPathKey);
+    const catAnnotatedDocs = node.categories[cat].reduce(
+      (s, d) => s + (annotationCounts[d.id] > 0 ? 1 : 0),
+      0,
+    );
+    return `
+<div class="mb-0.5">
+  <button onclick="toggleCategory('${esc(catPathKey)}')"
+          class="w-full flex items-center justify-between px-3 py-1.5 text-xs font-semibold
+                 text-gray-500 dark:text-gray-400 uppercase tracking-wider
+                 hover:bg-gray-50 dark:hover:bg-gray-800/60 rounded-md transition-colors">
+    <span class="flex items-center gap-2">
+      <span>${esc(cat)}</span>
+      ${annotatedDocsBadge(catAnnotatedDocs)}
+    </span>
+    <span class="flex items-center gap-1.5">
+      <span class="font-normal normal-case text-gray-400">${node.categories[cat].length}</span>
+      <span class="transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}" id="arrow-${catNodeId}">&#9656;</span>
+    </span>
+  </button>
+  <div id="${catNodeId}" class="category-docs pl-2 ${isExpanded ? "expanded" : "collapsed"}">
+    ${node.categories[cat].map((doc) => renderDocItem(doc)).join("")}
+  </div>
+</div>`;
+  };
+
+  // General always first
+  if (node.categories["General"]) html += renderCat("General");
+
+  // Subfolders (sorted alphabetically — numeric prefix like "1_" sorts naturally)
+  const childKeys = Object.keys(node.children).sort((a, b) =>
+    a.localeCompare(b),
+  );
+  for (const key of childKeys) {
+    const childPath = [...folderPath, key];
+    const pathKey = childPath.join("|");
+    const nodeId =
+      "folder-" + childPath.map((s) => s.replace(/\W/g, "-")).join("-");
+    const isExpanded = expandedFolders.has(pathKey);
+    const docCount = countTreeDocs(node.children[key]);
+    const folderAnnotatedDocs = countTreeAnnotatedDocs(node.children[key]);
+    html += `
+<div class="mb-1">
+  <button onclick="toggleFolder('${esc(pathKey)}')"
+          class="w-full flex items-center justify-between px-3 py-1.5 text-xs font-semibold
+                 text-violet-600 dark:text-violet-400 uppercase tracking-wider
+                 hover:bg-gray-50 dark:hover:bg-gray-800/60 rounded-md transition-colors">
+    <span class="flex items-center gap-2 min-w-0">
+      <span title="${esc(key)}" class="truncate">&#128193; ${esc(folderLabel(key))}</span>
+      ${annotatedDocsBadge(folderAnnotatedDocs)}
+    </span>
+    <span class="flex items-center gap-1.5">
+      <span class="font-normal normal-case text-gray-400">${docCount}</span>
+      <span class="transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}" id="arrow-${nodeId}">&#9656;</span>
+    </span>
+  </button>
+  <div id="${nodeId}" class="category-docs pl-3 ${isExpanded ? "expanded" : "collapsed"}">
+    ${renderTreeNode(node.children[key], childPath)}
+  </div>
+</div>`;
+  }
+
+  // Non-General category groups (sorted alphabetically)
+  const otherCats = Object.keys(node.categories)
+    .filter((c) => c !== "General")
+    .sort((a, b) => a.localeCompare(b));
+  for (const cat of otherCats) html += renderCat(cat);
+
+  return html;
+}
+
+function renderDocItem(doc) {
+  const isActive = doc.id === currentDocId;
+  const annCount = annotationCounts[doc.id] || 0;
+  return `
+<button onclick="openDocument('${esc(doc.id)}')"
+        id="item-${esc(doc.id)}"
+        class="doc-item w-full text-left px-3 py-1.5 rounded-md text-sm transition-colors
+               text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/60
+               ${isActive ? "active" : ""}">
+  <div class="leading-snug flex items-center justify-between gap-2">
+    <span class="truncate">${esc(doc.title)}</span>
+    ${annotationBadge(annCount)}
+  </div>
+  ${doc.formattedDate ? `<div class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">${esc(doc.formattedDate)}</div>` : ""}
+</button>`;
+}
+
+function toggleCategory(key) {
+  const parts = key.split("|");
+  const catNodeId =
+    "cat-" + parts.map((p) => p.replace(/\W/g, "-")).join("-");
+  const el = document.getElementById(catNodeId);
+  const arrow = document.getElementById("arrow-" + catNodeId);
+  if (!el) return;
+  const expanding = el.classList.contains("collapsed");
+  el.classList.toggle("collapsed", !expanding);
+  el.classList.toggle("expanded", expanding);
+  if (arrow) arrow.style.transform = expanding ? "rotate(90deg)" : "";
+  if (expanding) expandedCategories.add(key);
+  else expandedCategories.delete(key);
+}
+
+function toggleFolder(pathKey) {
+  const parts = pathKey.split("|");
+  const nodeId =
+    "folder-" + parts.map((p) => p.replace(/\W/g, "-")).join("-");
+  const el = document.getElementById(nodeId);
+  const arrow = document.getElementById("arrow-" + nodeId);
+  if (!el) return;
+  const expanding = el.classList.contains("collapsed");
+  el.classList.toggle("collapsed", !expanding);
+  el.classList.toggle("expanded", expanding);
+  if (arrow) arrow.style.transform = expanding ? "rotate(90deg)" : "";
+  if (expanding) expandedFolders.add(pathKey);
+  else expandedFolders.delete(pathKey);
+}
+
+function toggleSidebar() {
+  document.getElementById("sidebar").classList.toggle("hidden");
+}

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

@@ -0,0 +1,25 @@
+// ── Pure snippet format detection ────────────────────────────────────────────
+// Given a raw piece of Markdown/HTML text, returns the canonical snippet type
+// used by the snippets modal, or null if no format matches.
+// Loaded as a classic script; exposes `detectSnippetType` as a global.
+
+function detectSnippetType(text) {
+  const t = text.trim();
+  // anchor-doc-link before doc-link and anchor-link
+  if (/^\[.*?\]\(\?doc=.+#.+\)$/.test(t)) return "anchor-doc-link";
+  if (/^\[.*?\]\(\?doc=.+\)$/.test(t)) return "doc-link";
+  if (/^\[.*?\]\(#.+\)$/.test(t)) return "anchor-link";
+  if (/^!\[.*?\]\(.*?\)$/.test(t)) return "image";
+  if (/^\[.*?\]\(.*?\)$/.test(t)) return "link";
+  if (/^<details[\s>]/i.test(t)) return "collapsible";
+  if (/^<span\s[^>]*color:[^>]*>[\s\S]*<\/span>$/.test(t)) return "colored-text";
+  if (/^<div\s[^>]*border-left[^>]*>/.test(t)) return "colored-section";
+  if (/^```text\n/.test(t) && /[├└│]/.test(t)) return "tree";
+  if (/^```/.test(t)) return "code-block";
+  if (/^(\| *.*? *\|)+\n(\| *-+.*\|)+/.test(t)) return "table";
+  if (/^> /.test(t)) return "blockquote";
+  if (/^(---|\n---\n)$/.test(t)) return "separator";
+  if (/^1\. /.test(t)) return "ordered-list";
+  if (/^- /.test(t)) return "unordered-list";
+  return null;
+}

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

@@ -0,0 +1,85 @@
+// ── Snippets — Table builder ─────────────────────────────────────────────────
+// Loaded as a classic script; exposes the table-builder helpers and `_tableData`
+// state as globals. Depends on `esc` (utils.js) and `snippetUpdatePreview`
+// (defined inline in index.html).
+
+let _tableData = [];
+
+function tableInit() {
+  _tableData = [
+    ["En-tête 1", "En-tête 2", "En-tête 3"],
+    ["", "", ""],
+    ["", "", ""],
+  ];
+  tableRenderGrid();
+}
+
+function tableRenderGrid() {
+  const rows = _tableData.length;
+  const cols = _tableData[0]?.length ?? 0;
+  document.getElementById("snip-table-rows").textContent = rows;
+  document.getElementById("snip-table-cols").textContent = cols;
+
+  const inputBase =
+    "px-2 py-1 text-xs rounded border focus:outline-none focus:ring-1 focus:ring-blue-500 w-full min-w-[80px]";
+  const hdrCls = `${inputBase} font-semibold border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-gray-900 dark:text-gray-100`;
+  const cellCls = `${inputBase} border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100`;
+
+  let html = '<table class="border-collapse w-full"><tbody>';
+  for (let r = 0; r < rows; r++) {
+    html += "<tr>";
+    for (let c = 0; c < cols; c++) {
+      const cls = r === 0 ? hdrCls : cellCls;
+      html += `<td class="p-0.5"><input type="text" value="${esc(_tableData[r][c])}" oninput="tableUpdate(${r},${c},this.value)" class="${cls}" /></td>`;
+    }
+    html += "</tr>";
+  }
+  html += "</tbody></table>";
+  document.getElementById("snip-table-grid").innerHTML = html;
+  snippetUpdatePreview();
+}
+
+function tableUpdate(r, c, val) {
+  _tableData[r][c] = val;
+  snippetUpdatePreview();
+}
+
+function tableChangeRows(delta) {
+  const cols = _tableData[0]?.length ?? 3;
+  if (delta > 0) {
+    _tableData.push(Array(cols).fill(""));
+  } else if (_tableData.length > 2) {
+    _tableData.pop();
+  }
+  tableRenderGrid();
+}
+
+function tableChangeCols(delta) {
+  if (delta > 0) {
+    _tableData.forEach((row) => row.push(""));
+  } else if ((_tableData[0]?.length ?? 0) > 1) {
+    _tableData.forEach((row) => row.pop());
+  }
+  tableRenderGrid();
+}
+
+function buildTableMarkdown() {
+  if (!_tableData.length || !_tableData[0]?.length) return "";
+  const cols = _tableData[0].length;
+  const widths = Array(cols).fill(3);
+  _tableData.forEach((row) => {
+    row.forEach((cell, c) => {
+      widths[c] = Math.max(widths[c], cell.length);
+    });
+  });
+  const fmtRow = (row) =>
+    "| " +
+    row.map((cell, c) => cell.padEnd(widths[c])).join(" | ") +
+    " |";
+  const sep = "| " + widths.map((w) => "-".repeat(w)).join(" | ") + " |";
+  return [
+    fmtRow(_tableData[0]),
+    sep,
+    ..._tableData.slice(1).map(fmtRow),
+  ].join("\n");
+}

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

@@ -0,0 +1,94 @@
+// ── Snippets — Tree builder ──────────────────────────────────────────────────
+// Loaded as a classic script; exposes the tree-builder helpers and `_treeItems`
+// state as globals. Depends on `esc` (utils.js) and `snippetUpdatePreview`
+// (defined inline in index.html).
+
+let _treeItems = [];
+
+function treeInit() {
+  _treeItems = [
+    { name: "dossier/", depth: 0 },
+    { name: "fichier.md", depth: 1 },
+  ];
+  treeRenderList();
+}
+
+function treeRenderList() {
+  const btnCls =
+    "text-xs px-1.5 py-1 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 disabled:opacity-30 disabled:cursor-not-allowed transition-colors";
+  document.getElementById("snip-tree-list").innerHTML = _treeItems
+    .map(
+      (item, i) => `
+      <div class="flex items-center gap-1">
+        <button onclick="treeIndent(${i},-1)" ${item.depth === 0 ? "disabled" : ""} class="${btnCls}" title="Désindenter">←</button>
+        <button onclick="treeIndent(${i},1)" class="${btnCls}" title="Indenter">→</button>
+        <span class="text-xs text-gray-300 dark:text-gray-600 font-mono w-4 shrink-0 text-center">${item.depth > 0 ? item.depth : ""}</span>
+        <input type="text" value="${esc(item.name)}" oninput="treeUpdate(${i}, this.value)"
+          class="flex-1 px-2 py-1 text-xs rounded 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-1 focus:ring-blue-500 font-mono" />
+        <button onclick="treeRemoveItem(${i})" class="${btnCls}" title="Supprimer">×</button>
+      </div>`,
+    )
+    .join("");
+  snippetUpdatePreview();
+}
+
+function treeUpdate(i, val) {
+  _treeItems[i].name = val;
+  snippetUpdatePreview();
+}
+
+function treeIndent(i, delta) {
+  _treeItems[i].depth = Math.max(0, _treeItems[i].depth + delta);
+  treeRenderList();
+}
+
+function treeAddItem() {
+  const lastDepth = _treeItems.length
+    ? _treeItems[_treeItems.length - 1].depth
+    : 0;
+  _treeItems.push({ name: "", depth: lastDepth });
+  treeRenderList();
+}
+
+function treeRemoveItem(i) {
+  _treeItems.splice(i, 1);
+  treeRenderList();
+}
+
+function buildTreeMarkdown() {
+  if (!_treeItems.length) return "```text\n(vide)\n```";
+  const lines = [];
+  for (let i = 0; i < _treeItems.length; i++) {
+    const { name, depth } = _treeItems[i];
+    if (depth === 0) {
+      lines.push(name);
+      continue;
+    }
+
+    // Prefix: for each ancestor level a (0..depth-2),
+    // show │ if there's a sibling at depth a+1 after this item
+    let prefix = "";
+    for (let a = 0; a < depth - 1; a++) {
+      let continues = false;
+      for (let j = i + 1; j < _treeItems.length; j++) {
+        if (_treeItems[j].depth <= a + 1) {
+          continues = _treeItems[j].depth === a + 1;
+          break;
+        }
+      }
+      prefix += continues ? "│   " : "    ";
+    }
+
+    // Connector: └── if last sibling at this depth, ├── otherwise
+    let isLast = true;
+    for (let j = i + 1; j < _treeItems.length; j++) {
+      if (_treeItems[j].depth < depth) break;
+      if (_treeItems[j].depth === depth) {
+        isLast = false;
+        break;
+      }
+    }
+    lines.push(prefix + (isLast ? "└── " : "├── ") + name);
+  }
+  return "```text\n" + lines.join("\n") + "\n```";
+}