beads-ui 0.1.2 → 0.3.0

package/app/utils/issue-id-renderer.js

@@ -0,0 +1,71 @@
+import { issueDisplayId } from './issue-id.js';
+
+/**
+ * Create a reusable, copy-to-clipboard issue ID renderer.
+ * Looks like the current inline ID (monospace `#123`) but acts as a button
+ * that copies the full, prefixed ID (e.g., `UI-123`) when activated.
+ * Shows transient "Copied" feedback and then restores the ID.
+ * @param {string} id - Full issue id including the prefix (e.g., "UI-123").
+ * @param {{ class_name?: string, duration_ms?: number }} [opts]
+ * @returns {HTMLButtonElement}
+ */
+export function createIssueIdRenderer(id, opts) {
+  /** @type {number} */
+  const duration =
+    typeof opts?.duration_ms === 'number' ? opts.duration_ms : 1200;
+  /** @type {HTMLButtonElement} */
+  const btn = document.createElement('button');
+  // Visual: match inline ID look; keep it neutral and text-like
+  btn.className =
+    (opts?.class_name ? opts.class_name + ' ' : '') + 'mono id-copy';
+  btn.type = 'button';
+  btn.setAttribute('aria-live', 'polite');
+  btn.setAttribute('title', 'Copy issue ID');
+  btn.setAttribute('aria-label', `Copy issue ID ${id}`);
+  const label = issueDisplayId(id);
+  btn.textContent = label;
+
+  /** Copy handler with feedback */
+  async function doCopy() {
+    // Prevent accidental row navigation and parent handlers
+    // (click/key handlers call this inside an event context)
+    try {
+      if (
+        navigator.clipboard &&
+        typeof navigator.clipboard.writeText === 'function'
+      ) {
+        await navigator.clipboard.writeText(String(id));
+      }
+      const prev = btn.textContent || label;
+      btn.textContent = 'Copied';
+      // Keep accessible label consistent with feedback
+      const oldAria = btn.getAttribute('aria-label') || '';
+      btn.setAttribute('aria-label', 'Copied');
+      setTimeout(
+        () => {
+          btn.textContent = prev;
+          btn.setAttribute('aria-label', oldAria);
+        },
+        Math.max(80, duration)
+      );
+    } catch {
+      // On failure, leave text as-is; no throw to avoid disruptive UX
+    }
+  }
+
+  btn.addEventListener('click', (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    void doCopy();
+  });
+  btn.addEventListener('keydown', (ev) => {
+    // Ensure keyboard activation works even in non-interactive test envs
+    if (ev.key === 'Enter' || ev.key === ' ') {
+      ev.preventDefault();
+      ev.stopPropagation();
+      void doCopy();
+    }
+  });
+
+  return btn;
+}

package/app/utils/issue-url.js

@@ -0,0 +1,9 @@
+/**
+ * Build a canonical issue hash that retains the view.
+ * @param {'issues'|'epics'|'board'} view
+ * @param {string} id
+ */
+export function issueHashFor(view, id) {
+  const v = view === 'epics' || view === 'board' ? view : 'issues';
+  return `#/${v}?issue=${encodeURIComponent(id)}`;
+}

package/app/utils/markdown.js

@@ -1,201 +1,22 @@
+import DOMPurify from 'dompurify';
+import { html } from 'lit-html';
+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.
+ * 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.
  * @function renderMarkdown
  * @param {string} src Markdown source text
- * @returns {DocumentFragment}
+ * @returns {import('lit-html').TemplateResult}
  */
 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)));
-    }
-  }
+  const markdown = String(src || '');
+  /** @type {string} */
+  const parsed = /** @type {string} */ (marked.parse(markdown));
+  /** @type {string} */
+  const html_string = DOMPurify.sanitize(parsed);
+  return html`${unsafeHTML(html_string)}`;
 }

package/app/utils/priority-badge.js

@@ -6,9 +6,7 @@ import { priority_levels } from './priority.js';
  * @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

@@ -4,7 +4,6 @@
  * @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/toast.js

@@ -0,0 +1,34 @@
+/**
+ * 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) {
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.textContent = text;
+  el.style.position = 'fixed';
+  el.style.right = '12px';
+  el.style.bottom = '12px';
+  el.style.zIndex = '1000';
+  el.style.color = '#fff';
+  el.style.padding = '8px 10px';
+  el.style.borderRadius = '4px';
+  el.style.fontSize = '12px';
+  if (variant === 'success') {
+    el.style.background = '#156d36';
+  } else if (variant === 'error') {
+    el.style.background = '#9f2011';
+  } else {
+    el.style.background = 'rgba(0,0,0,0.85)';
+  }
+  (document.body || document.documentElement).appendChild(el);
+  setTimeout(() => {
+    try {
+      el.remove();
+    } catch {
+      /* ignore */
+    }
+  }, duration_ms);
+}

package/app/utils/type-badge.js

@@ -4,13 +4,10 @@
  * @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}`);