beads-ui 0.2.0 → 0.3.1

package/app/utils/markdown.js

@@ -1,201 +1,16 @@
+import DOMPurify from 'dompurify';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { marked } from 'marked';
+
 /**
- * Minimal, safe Markdown renderer that builds a DOM fragment without innerHTML.
- * Supports headings, paragraphs, lists, code blocks, inline code, and links.
- * This is intentionally conservative to avoid XSS.
- * @function renderMarkdown
- * @param {string} src Markdown source text
- * @returns {DocumentFragment}
+ * Render Markdown safely as HTML using marked and DOMPurify.
+ * Returns a lit-html TemplateResult via the unsafeHTML directive so it can be
+ * embedded directly in templates.
+ *
+ * @param {string} markdown - Markdown source text
  */
-export function renderMarkdown(src) {
-  /** @type {DocumentFragment} */
-  const frag = document.createDocumentFragment();
-
-  /** @type {string[]} */
-  const lines = (src || '').replace(/\r\n?/g, '\n').split('\n');
-
-  /** @type {boolean} */
-  let in_code = false;
-  /** @type {string[]} */
-  let code_acc = [];
-
-  /** @type {HTMLElement|null} */
-  let list_el = null;
-  /** @type {string} */
-  let list_type = '';
-
-  /**
-   * Flush current paragraph buffer to <p> if any.
-   * @param {string[]} buf
-   */
-  function flushParagraph(buf) {
-    if (buf.length === 0) {
-      return;
-    }
-    const p = document.createElement('p');
-    appendInline(p, buf.join(' '));
-    frag.appendChild(p);
-    buf.length = 0;
-  }
-
-  /** @type {string[]} */
-  const para = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    const raw = lines[i];
-    const line = raw;
-
-    // fenced code blocks
-    if (/^```/.test(line)) {
-      if (!in_code) {
-        in_code = true;
-        code_acc = [];
-      } else {
-        // flush code block
-        const pre = document.createElement('pre');
-        const code = document.createElement('code');
-        code.textContent = code_acc.join('\n');
-        pre.appendChild(code);
-        frag.appendChild(pre);
-        in_code = false;
-        code_acc = [];
-      }
-      continue;
-    }
-    if (in_code) {
-      code_acc.push(raw);
-      continue;
-    }
-
-    // blank line -> paragraph / list break
-    if (/^\s*$/.test(line)) {
-      flushParagraph(para);
-      if (list_el !== null) {
-        frag.appendChild(list_el);
-        list_el = null;
-        list_type = '';
-      }
-      continue;
-    }
-
-    // heading
-    const hx = /^(#{1,6})\s+(.*)$/.exec(line);
-    if (hx) {
-      flushParagraph(para);
-      if (list_el !== null) {
-        frag.appendChild(list_el);
-        list_el = null;
-        list_type = '';
-      }
-      const level = Math.min(6, hx[1].length);
-      const h = /** @type {HTMLHeadingElement} */ (
-        document.createElement('h' + String(level))
-      );
-      appendInline(h, hx[2]);
-      frag.appendChild(h);
-      continue;
-    }
-
-    // list item
-    let m = /^\s*[-*]\s+(.*)$/.exec(line);
-    if (m) {
-      if (list_el === null || list_type !== 'ul') {
-        flushParagraph(para);
-        if (list_el !== null) {
-          frag.appendChild(list_el);
-        }
-        list_el = document.createElement('ul');
-        list_type = 'ul';
-      }
-      const li = document.createElement('li');
-      appendInline(li, m[1]);
-      list_el.appendChild(li);
-      continue;
-    }
-    m = /^\s*(\d+)\.\s+(.*)$/.exec(line);
-    if (m) {
-      if (list_el === null || list_type !== 'ol') {
-        flushParagraph(para);
-        if (list_el !== null) {
-          frag.appendChild(list_el);
-        }
-        list_el = document.createElement('ol');
-        list_type = 'ol';
-      }
-      const li = document.createElement('li');
-      appendInline(li, m[2]);
-      list_el.appendChild(li);
-      continue;
-    }
-
-    // otherwise: paragraph text; accumulate to join with spaces
-    para.push(line.trim());
-  }
-
-  // flush leftovers
-  if (in_code) {
-    const pre = document.createElement('pre');
-    const code = document.createElement('code');
-    code.textContent = code_acc.join('\n');
-    pre.appendChild(code);
-    frag.appendChild(pre);
-  }
-  flushParagraph(para);
-  if (list_el !== null) {
-    frag.appendChild(list_el);
-  }
-
-  return frag;
-
-  /**
-   * Append inline content parsing backticks and links safely.
-   * - Inline code: `text`
-   * - Links: [text](url) where url starts with http, https, or mailto
-   * @param {HTMLElement} el
-   * @param {string} text
-   */
-  function appendInline(el, text) {
-    /** @type {RegExp} */
-    const re = /(`[^`]+`)|(\[[^\]]+\]\([^)]+\))/g;
-    /** @type {number} */
-    let last = 0;
-    /** @type {any} */
-    let match = re.exec(text);
-    while (match) {
-      const idx = match.index;
-      if (idx > last) {
-        el.appendChild(document.createTextNode(text.slice(last, idx)));
-      }
-      const token = match[0];
-      if (token[0] === '\u0060') {
-        const code = document.createElement('code');
-        code.textContent = token.slice(1, -1);
-        el.appendChild(code);
-      } else if (token[0] === '[') {
-        // parse [text](url)
-        const m2 = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(token);
-        if (m2) {
-          const a = document.createElement('a');
-          const href = m2[2].trim();
-          const allowed = /^(https?:|mailto:)/i.test(href);
-          if (allowed) {
-            a.setAttribute('href', href);
-          } else {
-            // if not allowed, render as text to avoid XSS vectors
-            a.remove();
-            el.appendChild(document.createTextNode(m2[1] + ' (' + href + ')'));
-            last = re.lastIndex;
-            match = re.exec(text);
-            continue;
-          }
-          a.appendChild(document.createTextNode(m2[1]));
-          el.appendChild(a);
-        }
-      }
-      last = re.lastIndex;
-      match = re.exec(text);
-    }
-    if (last < text.length) {
-      el.appendChild(document.createTextNode(text.slice(last)));
-    }
-  }
+export function renderMarkdown(markdown) {
+  const parsed = /** @type {string} */ (marked.parse(markdown));
+  const html_string = DOMPurify.sanitize(parsed);
+  return unsafeHTML(html_string);
 }

package/app/utils/priority-badge.js

@@ -2,13 +2,12 @@ import { priority_levels } from './priority.js';
 
 /**
  * Create a colored badge for a priority value (0..4).
+ *
  * @param {number | null | undefined} priority
  * @returns {HTMLSpanElement}
  */
 export function createPriorityBadge(priority) {
-  /** @type {number} */
   const p = typeof priority === 'number' ? priority : 2;
-  /** @type {HTMLSpanElement} */
   const el = document.createElement('span');
   el.className = 'priority-badge';
   el.classList.add(`is-p${Math.max(0, Math.min(4, p))}`);

package/app/utils/status-badge.js

@@ -1,10 +1,10 @@
 /**
  * Create a colored badge for a status value.
+ *
  * @param {string | null | undefined} status - 'open' | 'in_progress' | 'closed'
  * @returns {HTMLSpanElement}
  */
 export function createStatusBadge(status) {
-  /** @type {HTMLSpanElement} */
   const el = document.createElement('span');
   el.className = 'status-badge';
   const s = String(status || 'open');

package/app/utils/status.js

@@ -1,11 +1,13 @@
 /**
  * Known status values in canonical order.
+ *
  * @type {Array<'open'|'in_progress'|'closed'>}
  */
 export const STATUSES = ['open', 'in_progress', 'closed'];
 
 /**
  * Map canonical status to display label.
+ *
  * @param {string | null | undefined} status
  * @returns {string}
  */

package/app/utils/toast.js

@@ -1,11 +1,11 @@
 /**
  * Show a transient global toast message anchored to the viewport.
+ *
  * @param {string} text - Message text.
  * @param {'info'|'success'|'error'} [variant] - Visual variant.
  * @param {number} [duration_ms] - Auto-dismiss delay in milliseconds.
  */
 export function showToast(text, variant = 'info', duration_ms = 2800) {
-  /** @type {HTMLDivElement} */
   const el = document.createElement('div');
   el.className = 'toast';
   el.textContent = text;

package/app/utils/type-badge.js

@@ -1,16 +1,14 @@
 /**
  * Create a compact, colored badge for an issue type.
+ *
  * @param {string | undefined | null} issue_type - One of: bug, feature, task, epic, chore
  * @returns {HTMLSpanElement}
  */
 export function createTypeBadge(issue_type) {
-  /** @type {HTMLSpanElement} */
   const el = document.createElement('span');
   el.className = 'type-badge';
 
-  /** @type {string} */
   const t = (issue_type || '').toString().toLowerCase();
-  /** @type {Set<string>} */
   const KNOWN = new Set(['bug', 'feature', 'task', 'epic', 'chore']);
   const kind = KNOWN.has(t) ? t : 'neutral';
   el.classList.add(`type-badge--${kind}`);