anentrypoint-design 0.0.28 → 0.0.30

package/src/debug.js

@@ -0,0 +1,34 @@
+const registry = new Map();
+
+export function register(name, snapshot) {
+    if (typeof name !== 'string' || !name) throw new Error('debug.register: name required');
+    if (typeof snapshot !== 'function') throw new Error('debug.register: snapshot fn required');
+    registry.set(name, snapshot);
+    expose();
+}
+
+export function unregister(name) { registry.delete(name); expose(); }
+
+export function list() { return [...registry.keys()]; }
+
+export function snapshot(name) {
+    const fn = registry.get(name);
+    if (!fn) return null;
+    try { return fn(); } catch (e) { return { error: String(e && e.message || e) }; }
+}
+
+export function snapshotAll() {
+    const out = {};
+    for (const [k, fn] of registry) {
+        try { out[k] = fn(); } catch (e) { out[k] = { error: String(e && e.message || e) }; }
+    }
+    return out;
+}
+
+function expose() {
+    if (typeof window === 'undefined') return;
+    const api = { list, snapshot, snapshotAll, register, unregister };
+    Object.defineProperty(window, '__debug', { value: api, configurable: true, writable: false });
+}
+
+expose();

package/src/highlight.js

@@ -0,0 +1,60 @@
+import { register } from './debug.js';
+
+const PRISM_BASE = 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0';
+const LANGS = ['markup', 'css', 'clike', 'javascript', 'jsx', 'tsx', 'typescript', 'json', 'bash', 'python'];
+let _prism = null;
+let _stats = { highlights: 0, errors: 0 };
+
+function injectScript(src) {
+    return new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = src; s.async = false;
+        s.onload = () => resolve();
+        s.onerror = () => reject(new Error('script failed: ' + src));
+        document.head.appendChild(s);
+    });
+}
+
+let _loadPromise = null;
+export function ensurePrism() {
+    if (_prism) return Promise.resolve(_prism);
+    if (_loadPromise) return _loadPromise;
+    _loadPromise = (async () => {
+        if (!window.Prism) {
+            window.Prism = window.Prism || { manual: true, disableWorkerMessageHandler: true };
+            await injectScript(PRISM_BASE + '/prism.min.js');
+        }
+        for (const lang of LANGS) {
+            const has = window.Prism && window.Prism.languages && window.Prism.languages[lang];
+            if (has) continue;
+            try { await injectScript(`${PRISM_BASE}/components/prism-${lang}.min.js`); }
+            catch { _stats.errors += 1; }
+        }
+        _prism = window.Prism;
+        return _prism;
+    })();
+    return _loadPromise;
+}
+
+export async function highlightElement(el) {
+    const prism = await ensurePrism();
+    if (!el) return;
+    prism.highlightElement(el);
+    _stats.highlights += 1;
+}
+
+export async function highlightAllUnder(root) {
+    const prism = await ensurePrism();
+    const els = (root || document).querySelectorAll('pre code[class*="lang-"], pre code[class*="language-"]');
+    els.forEach((el) => {
+        const cls = el.className;
+        if (/lang-(\w+)/.test(cls) && !/language-/.test(cls)) {
+            const m = cls.match(/lang-(\w+)/);
+            if (m) el.classList.add('language-' + m[1]);
+        }
+        prism.highlightElement(el);
+        _stats.highlights += 1;
+    });
+}
+
+register('highlight', () => ({ loaded: !!_prism, langs: _prism ? Object.keys(_prism.languages || {}) : [], ...(_stats) }));

package/src/index.js

@@ -3,6 +3,11 @@ import { loadCss, scope } from './styles.js';
 import { registerDeckStage, getDeckStage } from './deck-stage.js';
 import * as components from './components.js';
 import * as motion from './motion.js';
+import * as debug from './debug.js';
+import { renderMarkdown, ensureReady as ensureMarkdownReady } from './markdown.js';
+import { ensurePrism, highlightAllUnder } from './highlight.js';
+import { mountKit } from './bootstrap.js';
+import { registerChatElement } from './web-components/ds-chat.js';
 
 let _installed = false;
 export async function installStyles(target) {
@@ -23,15 +28,27 @@ export function mount(rootEl, viewFn, { autoScope = true } = {}) {
     }
     const render = () => {
         webjsx.applyDiff(rootEl, viewFn(render));
-        requestAnimationFrame(() => {
-            motion.animateTree(rootEl);
-        });
+        requestAnimationFrame(() => motion.animateTree(rootEl));
     };
     render();
     return render;
 }
 
-export { webjsx, loadCss, scope, registerDeckStage, getDeckStage, components, motion };
+if (typeof window !== 'undefined' && typeof customElements !== 'undefined') {
+    registerChatElement();
+}
+
+export {
+    webjsx, loadCss, scope, registerDeckStage, getDeckStage,
+    components, motion, debug, mountKit,
+    renderMarkdown, ensureMarkdownReady,
+    ensurePrism, highlightAllUnder,
+    registerChatElement
+};
 export const h = webjsx.createElement;
 export const applyDiff = webjsx.applyDiff;
-export default { webjsx, loadCss, scope, installStyles, mount, h, applyDiff, registerDeckStage, getDeckStage, components, motion };
+export default {
+    webjsx, loadCss, scope, installStyles, mount, h, applyDiff,
+    registerDeckStage, getDeckStage, components, motion, debug, mountKit,
+    renderMarkdown, ensurePrism, registerChatElement
+};

package/src/markdown.js

@@ -0,0 +1,61 @@
+import { register } from './debug.js';
+
+let _marked = null;
+let _purify = null;
+let _stats = { renders: 0, sanitizedTags: 0 };
+
+async function loadMarked() {
+    if (_marked) return _marked;
+    const mod = await import('https://cdn.jsdelivr.net/npm/marked@15.0.7/lib/marked.esm.js');
+    _marked = mod.marked;
+    _marked.setOptions({ breaks: true, gfm: true });
+    return _marked;
+}
+
+async function loadPurify() {
+    if (_purify) return _purify;
+    const mod = await import('https://cdn.jsdelivr.net/npm/dompurify@3.4.1/+esm');
+    _purify = mod.default || mod;
+    if (!_purify.sanitize) throw new Error('dompurify did not load a sanitize fn');
+    _purify.addHook('uponSanitizeElement', (node, data) => {
+        if (data.tagName && data.allowedTags && !data.allowedTags[data.tagName]) _stats.sanitizedTags += 1;
+    });
+    return _purify;
+}
+
+let _ready = null;
+export function ensureReady() {
+    if (_ready) return _ready;
+    _ready = Promise.all([loadMarked(), loadPurify()]).then(() => true);
+    return _ready;
+}
+
+export async function renderMarkdown(text) {
+    const [marked, purify] = await Promise.all([loadMarked(), loadPurify()]);
+    const dirty = marked.parse(String(text || ''));
+    const clean = purify.sanitize(dirty, {
+        FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form'],
+        FORBID_ATTR: ['onerror', 'onclick', 'onload', 'onmouseover'],
+        ADD_ATTR: ['target', 'rel']
+    });
+    _stats.renders += 1;
+    return clean;
+}
+
+export function renderMarkdownSync(text) {
+    if (!_marked || !_purify) return null;
+    const dirty = _marked.parse(String(text || ''));
+    const clean = _purify.sanitize(dirty, {
+        FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form'],
+        FORBID_ATTR: ['onerror', 'onclick', 'onload', 'onmouseover'],
+        ADD_ATTR: ['target', 'rel']
+    });
+    _stats.renders += 1;
+    return clean;
+}
+
+register('markdown', () => ({
+    loaded: { marked: !!_marked, dompurify: !!_purify },
+    renders: _stats.renders,
+    sanitizedTags: _stats.sanitizedTags
+}));

package/src/web-components/ds-chat.js

@@ -0,0 +1,75 @@
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Chat, ChatComposer } from '../components/chat.js';
+import { register } from '../debug.js';
+
+let _stats = { mounts: 0, sends: 0 };
+
+class DsChat extends HTMLElement {
+    static get observedAttributes() { return ['title', 'sub', 'placeholder']; }
+
+    constructor() {
+        super();
+        this._messages = [];
+        this._draft = '';
+        this._title = 'chat';
+        this._sub = '';
+        this._placeholder = 'message…';
+    }
+
+    set messages(v) { this._messages = Array.isArray(v) ? v : []; this._render(); }
+    get messages() { return this._messages; }
+
+    connectedCallback() {
+        if (this.hasAttribute('messages')) {
+            try { this._messages = JSON.parse(this.getAttribute('messages')); } catch {}
+        }
+        this._title = this.getAttribute('title') || this._title;
+        this._sub = this.getAttribute('sub') || '';
+        this._placeholder = this.getAttribute('placeholder') || this._placeholder;
+        _stats.mounts += 1;
+        this._render();
+    }
+
+    attributeChangedCallback(name, _old, val) {
+        if (name === 'title') this._title = val || 'chat';
+        if (name === 'sub') this._sub = val || '';
+        if (name === 'placeholder') this._placeholder = val || 'message…';
+        this._render();
+    }
+
+    pushMessage(msg) {
+        this._messages = [...this._messages, msg];
+        this._render();
+    }
+
+    _render() {
+        const onSend = (text) => {
+            _stats.sends += 1;
+            this.dispatchEvent(new CustomEvent('send', { detail: { text }, bubbles: true, composed: true }));
+        };
+        const onInput = (v) => { this._draft = v; this._render(); };
+        const view = Chat({
+            title: this._title,
+            sub: this._sub,
+            messages: this._messages,
+            composer: ChatComposer({
+                value: this._draft,
+                placeholder: this._placeholder,
+                onInput,
+                onSend
+            })
+        });
+        webjsx.applyDiff(this, view);
+    }
+}
+
+let _registered = false;
+export function registerChatElement() {
+    if (_registered) return;
+    if (!customElements.get('ds-chat')) customElements.define('ds-chat', DsChat);
+    _registered = true;
+}
+
+register('ds-chat', () => ({ registered: _registered, ..._stats, instances: document.querySelectorAll('ds-chat').length }));
+
+export { DsChat };