anentrypoint-design 0.0.368 → 0.0.370

package/src/file-mention.js

@@ -0,0 +1,142 @@
+// Pure helpers for a chat input's "@" file-mention autocomplete: detecting an
+// in-progress @token before the caret, ranking a flat file/dir index against
+// the typed query, and building the replacement text on completion.
+// Framework-independent — no DOM, no webjsx — wire into any composer's
+// oninput/onkeydown handlers.
+
+/**
+ * Detect an "@" file token immediately before the cursor. The "@" must sit at
+ * the start of the text or be preceded by whitespace, so emails like
+ * foo@bar never trigger. Supports the quoted form @"my dir/fi so
+ * space-containing paths can be typed into.
+ * @param {string} textBeforeCursor
+ * @returns {{start:number, query:string, quoted:boolean}|null}
+ */
+export function extractAtQuery(textBeforeCursor) {
+    const quoted = /(?:^|\s)@"([^"\n]*)$/.exec(textBeforeCursor)
+    if (quoted) {
+        return { start: textBeforeCursor.length - (quoted[1].length + 2), query: quoted[1], quoted: true }
+    }
+    const plain = /(?:^|\s)@([^\s"]*)$/.exec(textBeforeCursor)
+    if (plain) {
+        return { start: textBeforeCursor.length - (plain[1].length + 1), query: plain[1], quoted: false }
+    }
+    return null
+}
+
+function pathDepth(p) {
+    let depth = 0
+    for (let i = 0; i < p.length; i++) if (p[i] === '/') depth++
+    return depth
+}
+
+/**
+ * Build a { path, isDir } entry list from a flat file-path list, deriving
+ * directory entries by walking each path's "/" segments. Base order is
+ * shallow-first then alphabetical (what an empty "@" query should show).
+ * @param {string[]} files
+ * @returns {{path:string, isDir:boolean}[]}
+ */
+export function buildEntriesFromFiles(files) {
+    const dirs = new Set()
+    for (const f of files) {
+        let idx = f.indexOf('/')
+        while (idx !== -1) {
+            dirs.add(f.slice(0, idx))
+            idx = f.indexOf('/', idx + 1)
+        }
+    }
+    const entries = []
+    for (const d of dirs) entries.push({ path: d, isDir: true })
+    for (const f of files) {
+        if (!f) continue
+        entries.push({ path: f, isDir: false })
+    }
+    entries.sort((a, b) => pathDepth(a.path) - pathDepth(b.path) || a.path.localeCompare(b.path))
+    return entries
+}
+
+function isSubsequence(needle, haystack) {
+    if (!needle) return true
+    let i = 0
+    for (let j = 0; j < haystack.length && i < needle.length; j++) {
+        if (haystack[j] === needle[i]) i++
+    }
+    return i === needle.length
+}
+
+/**
+ * Score ladder: exact 100 / prefix 80 / substring 50 / path-substring 30,
+ * directories get +10, plus a low-weight subsequence fallback (10) so a
+ * loose query like "chinp" still finds components/ChatInput.tsx. Queries
+ * containing "/" rank against the full relative path (drill-down support).
+ */
+function scoreEntry(entry, lowerQuery) {
+    const lowerPath = entry.path.toLowerCase()
+    let score = 0
+    if (lowerQuery.includes('/')) {
+        if (lowerPath === lowerQuery) score = 100
+        else if (lowerPath.startsWith(lowerQuery)) score = 80
+        else if (lowerPath.includes(lowerQuery)) score = 50
+        else if (isSubsequence(lowerQuery, lowerPath)) score = 10
+    } else {
+        const slash = lowerPath.lastIndexOf('/')
+        const lowerName = slash === -1 ? lowerPath : lowerPath.slice(slash + 1)
+        if (lowerName === lowerQuery) score = 100
+        else if (lowerName.startsWith(lowerQuery)) score = 80
+        else if (lowerName.includes(lowerQuery)) score = 50
+        else if (lowerPath.includes(lowerQuery)) score = 30
+        else if (isSubsequence(lowerQuery, lowerPath)) score = 10
+    }
+    if (entry.isDir && score > 0) score += 10
+    return score
+}
+
+export const AT_RESULT_LIMIT = 20
+
+/**
+ * Rank+filter a file index against a typed query, capped at `limit`.
+ * @param {{path:string, isDir:boolean}[]} entries
+ * @param {string} query
+ * @param {number} [limit]
+ */
+export function filterFileEntries(entries, query, limit = AT_RESULT_LIMIT) {
+    const lowerQuery = query.toLowerCase()
+    if (!lowerQuery) return entries.slice(0, limit)
+    const scored = []
+    for (const entry of entries) {
+        const score = scoreEntry(entry, lowerQuery)
+        if (score > 0) scored.push({ entry, score })
+    }
+    scored.sort((a, b) => b.score - a.score || pathDepth(a.entry.path) - pathDepth(b.entry.path) || a.entry.path.localeCompare(b.entry.path))
+    return scored.slice(0, limit).map(s => s.entry)
+}
+
+/**
+ * Replacement text for the @token when a suggestion is confirmed. Files
+ * close the token ("@path ", quoted if it has spaces), caret after the
+ * trailing space. Directories stay open for drill-down ("@dir/"), no
+ * trailing space — quoted directories close instead (@"my dir/") with the
+ * caret placed before the closing quote.
+ * @returns {{text:string, cursorOffset:number}}
+ */
+export function buildAtInsertText(entryPath, isDir, forceQuotes = false) {
+    const p = isDir ? `${entryPath}/` : entryPath
+    const needsQuotes = forceQuotes || p.includes(' ')
+    if (isDir) {
+        const text = needsQuotes ? `@"${p}"` : `@${p}`
+        return { text, cursorOffset: needsQuotes ? text.length - 1 : text.length }
+    }
+    const text = needsQuotes ? `@"${p}" ` : `@${p} `
+    return { text, cursorOffset: text.length }
+}
+
+/** Closed one-shot @mention (e.g. an explorer's "@" button) — directories close too. */
+export function buildAtMentionText(entryPath, isDir) {
+    const p = isDir ? `${entryPath}/` : entryPath
+    return p.includes(' ') ? `@"${p}" ` : `@${p} `
+}
+
+export function buildFileAtMentionsText(entryPaths) {
+    return entryPaths.map(entryPath => buildAtMentionText(entryPath, false)).join('')
+}

package/src/index.js

@@ -13,6 +13,8 @@ import { renderMarkdown, ensureReady as ensureMarkdownReady, sanitizeHtml, isDeg
 import { escapeHtml, escapeJson } from './html-escape.js';
 import { uid, shortUid } from './uid.js';
 import { ensurePrism, highlightAllUnder, configurePrismCdn, getPrismCdnConfig } from './highlight.js';
+import { ensureMermaid, renderMermaid, renderMermaidBlocksUnder, configureMermaidCdn, getMermaidCdnConfig } from './mermaid.js';
+import { ensureKatex, renderMathBlocksUnder, configureKatexCdn, getKatexCdnConfig } from './math.js';
 import { renderPageHtml } from './page-html.js';
 import { HeroFromPageData } from './components/content.js';
 import { ThemeToggle } from './components/theme-toggle.js';
@@ -85,6 +87,8 @@ export {
     renderMarkdown, ensureMarkdownReady, sanitizeHtml, isMarkdownDegraded,
     configureMarkdownCdn, getMarkdownCdnConfig,
     ensurePrism, highlightAllUnder, configurePrismCdn, getPrismCdnConfig,
+    ensureMermaid, renderMermaid, renderMermaidBlocksUnder, configureMermaidCdn, getMermaidCdnConfig,
+    ensureKatex, renderMathBlocksUnder, configureKatexCdn, getKatexCdnConfig,
     registerChatElement, DsChat,
     registerFreddieChatElement, FreddieChat,
     renderPageHtml, HeroFromPageData,
@@ -99,6 +103,8 @@ export {
 };
 export { applyTheme, getTheme, resolvedTheme, onThemeChange, initTheme,
          applyAccent, getAccent, applyDensity, getDensity } from './theme.js';
+export { extractAtQuery, buildEntriesFromFiles, filterFileEntries, buildAtInsertText,
+         buildAtMentionText, buildFileAtMentionsText } from './file-mention.js';
 export const h = webjsx.createElement;
 export const applyDiff = webjsx.applyDiff;
 

package/src/math.js

@@ -0,0 +1,158 @@
+// Inline/display math (KaTeX) rendering — lazy-loads KaTeX CSS+JS from CDN on
+// first call. No-op safe: absent/failed load leaves $...$ / $$...$$ as plain
+// literal text (already escaped by the markdown sanitizer), never broken markup.
+// Mirrors highlight.js/mermaid.js's lazy-CDN-module pattern.
+
+let _katex = null;
+let _ready = null;
+let _cssInjected = false;
+
+const DEFAULT_KATEX_JS_URL = 'https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.mjs';
+const DEFAULT_KATEX_CSS_URL = 'https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css';
+let _jsUrl = DEFAULT_KATEX_JS_URL;
+let _cssUrl = DEFAULT_KATEX_CSS_URL;
+
+export function configureKatexCdn({ jsUrl, cssUrl } = {}) {
+    _jsUrl = jsUrl || DEFAULT_KATEX_JS_URL;
+    _cssUrl = cssUrl || DEFAULT_KATEX_CSS_URL;
+    _katex = null;
+    _ready = null;
+    _cssInjected = false;
+}
+
+export function getKatexCdnConfig() {
+    return { jsUrl: _jsUrl, cssUrl: _cssUrl };
+}
+
+function injectCss() {
+    if (_cssInjected || typeof document === 'undefined') return;
+    if (document.querySelector('link[data-katex]')) { _cssInjected = true; return; }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = _cssUrl;
+    link.setAttribute('data-katex', '');
+    document.head.appendChild(link);
+    _cssInjected = true;
+}
+
+export async function ensureKatex() {
+    if (_katex) return _katex;
+    if (_ready) return _ready;
+    _ready = (async () => {
+        try {
+            injectCss();
+            const mod = await import(_jsUrl);
+            const katex = mod.default || mod;
+            if (!katex || typeof katex.renderToString !== 'function') throw new Error('katex module missing renderToString()');
+            _katex = katex;
+            return _katex;
+        } catch (err) {
+            console.warn('[247420] katex loader failed:', err);
+            _katex = null;
+            _ready = null;
+            return null;
+        }
+    })();
+    return _ready;
+}
+
+// Render one math source to sanitized-by-construction KaTeX HTML (katex
+// escapes its own output; throwOnError:false degrades a malformed expression
+// to KaTeX's own inline error span rather than throwing).
+async function renderOne(src, displayMode) {
+    const katex = await ensureKatex();
+    if (!katex) return null;
+    try {
+        return katex.renderToString(src, { throwOnError: false, strict: false, displayMode });
+    } catch (err) {
+        console.warn('[247420] katex render failed:', err);
+        return null;
+    }
+}
+
+// Replace $$...$$ (display) and $...$ (inline) math spans inside already-
+// rendered markdown HTML text nodes under `root`. Runs AFTER markdown/
+// DOMPurify have produced the DOM (never operates on raw markdown source, so
+// it cannot introduce unsanitized HTML — katex's own output is inserted via
+// innerHTML on a fresh span, same trust boundary as DOMPurify's own output).
+// Skips code/pre content so math delimiters inside fenced or inline code are
+// left alone. Idempotent (data-math-wired guard on root).
+export async function renderMathBlocksUnder(root) {
+    if (!root || root.dataset?.mathWired === '1') return;
+    if (!root || !root.querySelectorAll) return;
+    const text = root.innerHTML || '';
+    if (!text.includes('$')) return;
+    const katex = await ensureKatex();
+    if (!katex) return;
+    root.dataset.mathWired = '1';
+
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            const p = node.parentElement;
+            if (p && (p.closest('code') || p.closest('pre'))) return NodeFilter.FILTER_REJECT;
+            return /\$/.test(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        }
+    });
+    const nodes = [];
+    let n;
+    while ((n = walker.nextNode())) nodes.push(n);
+
+    const DISPLAY_RE = /\$\$([^$]+)\$\$/g;
+    const INLINE_RE = /\$([^$\n]+)\$/g;
+
+    for (const node of nodes) {
+        const src = node.nodeValue;
+        if (!DISPLAY_RE.test(src) && !INLINE_RE.test(src)) continue;
+        DISPLAY_RE.lastIndex = 0;
+        INLINE_RE.lastIndex = 0;
+        const frag = document.createDocumentFragment();
+        let cursor = 0;
+        // Two-pass: first split out display ($$..$$), each remaining plain
+        // segment is then split for inline ($..$).
+        const pieces = [];
+        let m;
+        while ((m = DISPLAY_RE.exec(src)) !== null) {
+            if (m.index > cursor) pieces.push({ text: src.slice(cursor, m.index) });
+            pieces.push({ math: m[1], display: true });
+            cursor = m.index + m[0].length;
+        }
+        if (cursor < src.length) pieces.push({ text: src.slice(cursor) });
+
+        for (const piece of pieces) {
+            if (piece.math != null) {
+                const html = await renderOne(piece.math.trim(), true);
+                if (html) {
+                    const span = document.createElement('span');
+                    span.className = 'ds-math-display';
+                    span.innerHTML = html;
+                    frag.appendChild(span);
+                } else {
+                    frag.appendChild(document.createTextNode('$$' + piece.math + '$$'));
+                }
+                continue;
+            }
+            let sub = piece.text;
+            let last = 0;
+            INLINE_RE.lastIndex = 0;
+            let im;
+            let any = false;
+            while ((im = INLINE_RE.exec(sub)) !== null) {
+                any = true;
+                if (im.index > last) frag.appendChild(document.createTextNode(sub.slice(last, im.index)));
+                const html = await renderOne(im[1].trim(), false);
+                if (html) {
+                    const span = document.createElement('span');
+                    span.className = 'ds-math-inline';
+                    span.innerHTML = html;
+                    frag.appendChild(span);
+                } else {
+                    frag.appendChild(document.createTextNode('$' + im[1] + '$'));
+                }
+                last = im.index + im[0].length;
+            }
+            if (!any) frag.appendChild(document.createTextNode(sub));
+            else if (last < sub.length) frag.appendChild(document.createTextNode(sub.slice(last)));
+        }
+        node.parentNode.replaceChild(frag, node);
+    }
+}

package/src/mermaid.js

@@ -0,0 +1,105 @@
+// Mermaid diagram rendering — lazy-loads mermaid.js from CDN on first call.
+// No-op safe: absent/failed load leaves the fenced ```mermaid block as plain
+// (already Prism-highlighted) code, never a blank or broken area.
+// Mirrors highlight.js's lazy-CDN-module pattern (module cache + configurable
+// base URL + fail-soft).
+
+let _mermaid = null;
+let _ready = null;
+
+const DEFAULT_MERMAID_URL = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+let _mermaidUrl = DEFAULT_MERMAID_URL;
+
+// Optional override (self-host / mirror / CSP-allowlisted proxy), same
+// contract as configurePrismCdn/configureMarkdownCdn: additive, forces a
+// fresh load on next use.
+export function configureMermaidCdn({ url } = {}) {
+    _mermaidUrl = url || DEFAULT_MERMAID_URL;
+    _mermaid = null;
+    _ready = null;
+}
+
+export function getMermaidCdnConfig() {
+    return { url: _mermaidUrl };
+}
+
+export async function ensureMermaid() {
+    if (_mermaid) return _mermaid;
+    if (_ready) return _ready;
+    _ready = (async () => {
+        try {
+            const mod = await import(_mermaidUrl);
+            const mermaid = mod.default || mod;
+            if (!mermaid || typeof mermaid.render !== 'function') throw new Error('mermaid module missing render()');
+            mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true });
+            _mermaid = mermaid;
+            return _mermaid;
+        } catch (err) {
+            console.warn('[247420] mermaid loader failed:', err);
+            _mermaid = null;
+            _ready = null;
+            return null;
+        }
+    })();
+    return _ready;
+}
+
+let _seq = 0;
+// Render one mermaid source string to sanitized-by-construction SVG markup
+// (mermaid's own securityLevel:'strict' escapes text nodes; no user HTML is
+// interpolated). Returns null on any failure so the caller can keep showing
+// the source block instead of an empty/broken pane.
+export async function renderMermaid(code) {
+    const mermaid = await ensureMermaid();
+    if (!mermaid) return null;
+    try {
+        const id = 'ds-mermaid-' + Date.now().toString(36) + '-' + (_seq++);
+        const ok = mermaid.parse ? await mermaid.parse(code, { suppressErrors: true }) : true;
+        if (!ok) return null;
+        const { svg } = await mermaid.render(id, code);
+        return svg;
+    } catch (err) {
+        console.warn('[247420] mermaid render failed:', err);
+        return null;
+    }
+}
+
+// Find every ```mermaid fenced block already rendered as
+// <pre><code class="language-mermaid">...</code></pre> (or lang-mermaid, the
+// alternate class chat-message-parts.js's CodeNode uses) inside `root`, and
+// replace its content with a rendered SVG + a source/preview toggle button.
+// Idempotent (data-mermaid-wired guard). Fail-soft per block: an individual
+// diagram that fails to parse/render is left as its original code block.
+export async function renderMermaidBlocksUnder(root) {
+    if (!root || !root.querySelectorAll) return;
+    const blocks = root.querySelectorAll('code.language-mermaid, code.lang-mermaid');
+    for (const codeEl of blocks) {
+        const pre = codeEl.closest('pre');
+        if (!pre || pre.dataset.mermaidWired === '1') continue;
+        pre.dataset.mermaidWired = '1';
+        const code = codeEl.textContent || '';
+        const svg = await renderMermaid(code);
+        if (!svg) { delete pre.dataset.mermaidWired; continue; }
+        const wrap = document.createElement('div');
+        wrap.className = 'ds-mermaid-block';
+        const toggle = document.createElement('button');
+        toggle.type = 'button';
+        toggle.className = 'ds-mermaid-toggle';
+        toggle.textContent = 'source';
+        const diagram = document.createElement('div');
+        diagram.className = 'ds-mermaid-diagram';
+        diagram.innerHTML = svg;
+        let showingSource = false;
+        toggle.addEventListener('click', () => {
+            showingSource = !showingSource;
+            diagram.style.display = showingSource ? 'none' : '';
+            pre.style.display = showingSource ? '' : 'none';
+            toggle.textContent = showingSource ? 'diagram' : 'source';
+        });
+        wrap.appendChild(diagram);
+        wrap.appendChild(toggle);
+        pre.style.display = 'none';
+        pre.parentNode.insertBefore(wrap, pre);
+        wrap.appendChild(pre);
+    }
+}