living-ai-documentation 1.0.0

package/dist/src/frontend/sidebar-helpers.js

@@ -0,0 +1,96 @@
+// ── Sidebar helpers — tree traversal + annotation badges ─────────────────────
+// Loaded as a classic script; all symbols are global.
+// Depends on globals defined elsewhere: `annotationCounts` (index.html),
+// `esc` (utils.js), `window.t` (i18n.js).
+
+function countTreeDocs(node) {
+  let n = Object.values(node.categories).reduce(
+    (s, arr) => s + arr.length,
+    0,
+  );
+  for (const child of Object.values(node.children))
+    n += countTreeDocs(child);
+  return n;
+}
+
+function countTreeAnnotations(node) {
+  let n = 0;
+  for (const arr of Object.values(node.categories)) {
+    for (const doc of arr) n += annotationCounts[doc.id] || 0;
+  }
+  for (const child of Object.values(node.children))
+    n += countTreeAnnotations(child);
+  return n;
+}
+
+function countTreeAnnotatedDocs(node) {
+  let n = 0;
+  for (const arr of Object.values(node.categories)) {
+    for (const doc of arr) if (annotationCounts[doc.id] > 0) n += 1;
+  }
+  for (const child of Object.values(node.children))
+    n += countTreeAnnotatedDocs(child);
+  return n;
+}
+
+function annotationBadge(count) {
+  if (!count) return "";
+  if (typeof stabiloHidden !== "undefined" && stabiloHidden) return "";
+  const label = window.t
+    ? window.t("sidebar.annotation_badge")
+    : "annotation";
+  return `<span title="${count} ${esc(label)}${count > 1 ? "s" : ""}"
+                 class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5
+                        rounded-full bg-yellow-300 dark:bg-yellow-400
+                        text-[10px] font-bold text-yellow-900
+                        border border-yellow-500 shadow-sm">${count}</span>`;
+}
+
+function annotatedDocsBadge(count) {
+  if (!count) return "";
+  if (typeof stabiloHidden !== "undefined" && stabiloHidden) return "";
+  const label = window.t
+    ? window.t("sidebar.annotated_docs_badge")
+    : "document with annotations";
+  return `<span title="${count} ${esc(label)}${count > 1 ? "s" : ""}"
+                 class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5
+                        rounded-full bg-orange-400 dark:bg-orange-500
+                        text-[10px] font-bold text-white
+                        border border-orange-600 shadow-sm">${count}</span>`;
+}
+
+function countTreeFileAttachedDocs(node) {
+  let n = 0;
+  for (const arr of Object.values(node.categories)) {
+    for (const doc of arr) if (fileAttachmentCounts[doc.id] > 0) n += 1;
+  }
+  for (const child of Object.values(node.children))
+    n += countTreeFileAttachedDocs(child);
+  return n;
+}
+
+function fileAttachmentBadge(count) {
+  if (!count) return "";
+  if (typeof hideAttachments !== "undefined" && hideAttachments) return "";
+  const label = window.t
+    ? window.t("sidebar.file_attachment_badge")
+    : "attachment";
+  return `<span title="${count} ${esc(label)}${count > 1 ? "s" : ""}"
+                 class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5
+                        rounded-full bg-sky-200 dark:bg-sky-300
+                        text-[10px] font-bold text-sky-900
+                        border border-sky-500 shadow-sm">${count}</span>`;
+}
+
+function fileAttachedDocsBadge(count) {
+  if (!count) return "";
+  if (typeof hideAttachments !== "undefined" && hideAttachments) return "";
+  const label = window.t
+    ? window.t("sidebar.file_attached_docs_badge")
+    : "document with attachments";
+  return `<span title="${count} ${esc(label)}${count > 1 ? "s" : ""}"
+                 class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5
+                        rounded-full bg-slate-400 dark:bg-slate-500
+                        text-[10px] font-bold text-white
+                        border border-slate-600 shadow-sm">${count}</span>`;
+}

package/dist/src/frontend/sidebar-resize.js

@@ -0,0 +1,98 @@
+// ── Sidebar horizontal resize ───────────────────────────────────────────────
+// Drag a handle on the sidebar's right edge to resize it.
+// Width is persisted in localStorage (`ld-sidebar-w`) across reloads.
+// The toggle (toggleSidebar) keeps working because it only flips the `hidden`
+// class — width stays intact on the element.
+
+(function () {
+  const STORAGE_KEY = "ld-sidebar-w";
+  const MIN_W = 200;
+  const MAX_W = 600;
+
+  function applyStoredWidth() {
+    const sidebar = document.getElementById("sidebar");
+    if (!sidebar) return;
+    let w = parseInt(localStorage.getItem(STORAGE_KEY) || "", 10);
+    if (!Number.isFinite(w)) return;
+    w = Math.max(MIN_W, Math.min(MAX_W, w));
+    sidebar.classList.remove("w-72");
+    sidebar.style.width = w + "px";
+  }
+
+  function initSidebarResize() {
+    const sidebar = document.getElementById("sidebar");
+    if (!sidebar) return;
+
+    applyStoredWidth();
+
+    const handle = document.createElement("div");
+    handle.id = "sidebar-resize-handle";
+    handle.setAttribute("aria-hidden", "true");
+    handle.style.cssText = [
+      "position:absolute",
+      "top:0",
+      "right:-2px",
+      "width:6px",
+      "height:100%",
+      "cursor:col-resize",
+      "z-index:20",
+      "user-select:none",
+      "background:transparent",
+      "transition:background 0.15s ease",
+    ].join(";");
+    handle.addEventListener("mouseenter", () => {
+      handle.style.background = "rgba(59,130,246,0.35)";
+    });
+    handle.addEventListener("mouseleave", () => {
+      if (!handle.dataset.dragging) handle.style.background = "transparent";
+    });
+
+    // Sidebar needs `relative` so the absolutely-positioned handle anchors to it.
+    sidebar.style.position = "relative";
+    sidebar.appendChild(handle);
+
+    let startX = 0;
+    let startW = 0;
+
+    function onMove(e) {
+      const dx = e.clientX - startX;
+      let w = startW + dx;
+      w = Math.max(MIN_W, Math.min(MAX_W, w));
+      sidebar.style.width = w + "px";
+    }
+
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      delete handle.dataset.dragging;
+      handle.style.background = "transparent";
+      const finalW = parseInt(sidebar.style.width, 10);
+      if (Number.isFinite(finalW)) {
+        try {
+          localStorage.setItem(STORAGE_KEY, String(finalW));
+        } catch {
+          /* ignore */
+        }
+      }
+    }
+
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      startX = e.clientX;
+      startW = sidebar.getBoundingClientRect().width;
+      // Drop the Tailwind width class so inline width takes over for good.
+      sidebar.classList.remove("w-72");
+      sidebar.style.width = startW + "px";
+      handle.dataset.dragging = "1";
+      handle.style.background = "rgba(59,130,246,0.55)";
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    });
+  }
+
+  window.initSidebarResize = initSidebarResize;
+})();

package/dist/src/frontend/sidebar.js

@@ -0,0 +1,351 @@
+// ── 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 = "";
+
+  // Flat mode: categories are hidden — merge all docs in this node and sort by filename
+  if (hideCategories) {
+    const flatDocs = Object.values(node.categories)
+      .flat()
+      .sort((a, b) => (a.filename || "").localeCompare(b.filename || ""));
+    html += flatDocs.map((doc) => renderDocItem(doc)).join("");
+
+    // Subfolders (recursive) — folders are still shown
+    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]);
+      const folderFileDocs = countTreeFileAttachedDocs(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)}
+      ${fileAttachedDocsBadge(folderFileDocs)}
+    </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>`;
+    }
+    return 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,
+    );
+    const catFileDocs = node.categories[cat].reduce(
+      (s, d) => s + (fileAttachmentCounts[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)}
+      ${fileAttachedDocsBadge(catFileDocs)}
+    </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]);
+    const folderFileDocs = countTreeFileAttachedDocs(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)}
+      ${fileAttachedDocsBadge(folderFileDocs)}
+    </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;
+  const fileCount = fileAttachmentCounts[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>
+    <span class="flex items-center gap-1 shrink-0">
+      ${annotationBadge(annCount)}
+      ${fileAttachmentBadge(fileCount)}
+    </span>
+  </div>
+  ${doc.formattedDate ? `<div class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">${esc(doc.formattedDate)}</div>` : ""}
+</button>`;
+}
+
+function setInstantCollapse(el) {
+  el.classList.add("no-transition");
+  el.classList.add("collapsed");
+  el.classList.remove("expanded");
+  // Force reflow so the collapsed state is committed while transitions are off
+  void el.offsetHeight;
+  requestAnimationFrame(() => el.classList.remove("no-transition"));
+}
+
+function collapseCategoryByKey(key, instant = false) {
+  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) {
+    if (instant) setInstantCollapse(el);
+    else {
+      el.classList.add("collapsed");
+      el.classList.remove("expanded");
+    }
+  }
+  if (arrow) arrow.style.transform = "";
+  expandedCategories.delete(key);
+}
+
+function collapseFolderAndDescendants(pathKey, instant = false) {
+  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) {
+    if (instant) setInstantCollapse(el);
+    else {
+      el.classList.add("collapsed");
+      el.classList.remove("expanded");
+    }
+  }
+  if (arrow) arrow.style.transform = "";
+  expandedFolders.delete(pathKey);
+
+  const prefix = pathKey + "|";
+  for (const key of [...expandedFolders]) {
+    if (key.startsWith(prefix)) collapseFolderAndDescendants(key, instant);
+  }
+  for (const key of [...expandedCategories]) {
+    if (key.startsWith(prefix)) collapseCategoryByKey(key, instant);
+  }
+}
+
+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");
+
+  if (expanding && exclusiveCategoryExpansion) {
+    const parentPath = parts.slice(0, -1).join("|");
+    for (const otherKey of [...expandedCategories]) {
+      if (otherKey === key) continue;
+      const otherParts = otherKey.split("|");
+      const otherParent = otherParts.slice(0, -1).join("|");
+      if (otherParent === parentPath) collapseCategoryByKey(otherKey, true);
+    }
+  }
+
+  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");
+
+  if (expanding && exclusiveFolderExpansion) {
+    const parentPath = parts.slice(0, -1).join("|");
+    for (const otherKey of [...expandedFolders]) {
+      if (otherKey === pathKey) continue;
+      const otherParts = otherKey.split("|");
+      const otherParent = otherParts.slice(0, -1).join("|");
+      if (otherParent === parentPath)
+        collapseFolderAndDescendants(otherKey, true);
+    }
+  }
+
+  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");
+}
+
+function toggleHideCategories() {
+  hideCategories = !hideCategories;
+  try {
+    localStorage.setItem("ld-hide-categories", hideCategories ? "1" : "0");
+  } catch {
+    /* ignore */
+  }
+  applyHideCategoriesButtonState();
+  refreshSidebar();
+}
+
+function applyHideCategoriesButtonState() {
+  const btn = document.getElementById("toggle-categories-btn");
+  if (!btn) return;
+  btn.classList.toggle("text-blue-500", !hideCategories);
+  btn.classList.toggle("dark:text-blue-400", !hideCategories);
+  btn.classList.toggle("text-gray-400", hideCategories);
+  btn.classList.toggle("dark:text-gray-500", hideCategories);
+}
+
+function toggleHideAttachments() {
+  hideAttachments = !hideAttachments;
+  try {
+    localStorage.setItem("ld-hide-attachments", hideAttachments ? "1" : "0");
+  } catch {
+    /* ignore */
+  }
+  applyHideAttachmentsButtonState();
+  refreshSidebar();
+}
+
+function applyHideAttachmentsButtonState() {
+  const btn = document.getElementById("toggle-attachments-btn");
+  if (!btn) return;
+  btn.classList.toggle("text-blue-500", !hideAttachments);
+  btn.classList.toggle("dark:text-blue-400", !hideAttachments);
+  btn.classList.toggle("text-gray-400", hideAttachments);
+  btn.classList.toggle("dark:text-gray-500", hideAttachments);
+}

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");
+}