@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/i18n/use-t.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createIntl, IntlContext, type IntlShape } from 'react-intl';
+import { EN_MESSAGES, type MessageId } from './messages';
+
+export type Translate = (id: MessageId, values?: Record<string, string | number>) => string;
+
+let fallback: IntlShape | undefined;
+
+function english(): IntlShape {
+    fallback ??= createIntl({ locale: 'en-US', messages: EN_MESSAGES });
+    return fallback;
+}
+
+/**
+ * The messages of the language chosen in the settings (`IntlContext` of @celljs/react/lib/browser/intl provides it);
+ * English where there is none, also outside the application, as in tests.
+ */
+export function useT(): Translate {
+    const intl = React.useContext(IntlContext as unknown as React.Context<IntlShape | null>) ?? english();
+    return React.useCallback<Translate>((id, values) => intl.formatMessage({ id, defaultMessage: EN_MESSAGES[id] }, values) as string, [intl]);
+}

package/src/browser/index.ts

@@ -0,0 +1,52 @@
+export * from './assistant/assistant';
+export * from './assistant/assistant-extension';
+export * from './assistant/assistant-protocol';
+export * from './assistant/assistant-view';
+export * from './assistant/voice';
+export * from './avatar/dino-avatar';
+export * from './chat/chat';
+export * from './chat/chat-protocol';
+export * from './chat/chat-view';
+export * from './components/account-menu';
+export * from './components/app-view';
+export * from './components/callout';
+export * from './components/chat-list';
+export * from './components/editor-area';
+export * from './components/icon';
+export * from './components/link';
+export * from './components/manage-menu';
+export * from './components/settings-controls';
+export * from './components/settings-view';
+export * from './components/split-pane';
+export * from './components/ta-avatar';
+export * from './components/workbench-view';
+export * from './extension/extension-view';
+export * from './extension/icons';
+export * from './extension/web-extension-api';
+export * from './extension/web-extension-protocol';
+export * from './extension/web-extensions';
+export * from './hooks';
+export * from './i18n/locales';
+export * from './i18n/messages';
+export * from './i18n/use-t';
+export * from './links/links';
+export * from './links/links-protocol';
+export * from './notices/notices';
+export * from './notices/notices-protocol';
+export * from './pwa/pwa';
+export * from './pwa/pwa-protocol';
+export * from './settings/agent-settings';
+export * from './settings/settings';
+export * from './settings/settings-protocol';
+export * from './state/state';
+export * from './state/state-protocol';
+export * from './util/composer';
+export * from './util/diff';
+export * from './util/layout';
+export * from './util/link';
+export * from './util/markdown';
+export * from './util/message';
+export * from './util/process';
+export * from './view';
+export * from './workbench';
+export * from './workbench-protocol';

package/src/browser/links/links-protocol.ts

@@ -0,0 +1,41 @@
+import type { LinkTarget } from '../util/link';
+
+export const TaLinks = Symbol('TaLinks');
+
+/** A page of the web to open outside of Ta, waiting for the user to say so. */
+export interface ExternalLinkRequest {
+    id: number;
+    /** As the browser reads it: a host of other scripts shows as punycode (`xn--`), not as a look-alike. */
+    url: string;
+    /** The host the user may trust, with its port when it has one. */
+    host: string;
+}
+
+export type ExternalLinkAnswer = 'open' | 'trust' | 'copy' | 'cancel';
+
+export interface LinksState {
+    /** The question shown; one at a time, a new link replaces it. */
+    external?: ExternalLinkRequest;
+}
+
+export interface OpenLinkOptions {
+    /** The directory of the conversation the link is in; that of ta serve when none. */
+    cwd?: string;
+    /** In the browser outside of Ta (Cmd or Ctrl + click), not in the browser of the workbench. */
+    external?: boolean;
+}
+
+/**
+ * What a click on a link of a reply does, as VS Code does in its chat. A file opens in the workbench, at the
+ * lines it names; a directory in the explorer; a page in the browser of the workbench, or with `external`
+ * in the browser of the system, after the user said so unless its host is trusted (this machine, and the
+ * domains of the settings). Web extensions open them (WebExtensionAPI.registerOpener); with none, a page
+ * opens outside, after the same question.
+ */
+export interface TaLinks {
+    readonly state: LinksState;
+    subscribe(listener: (state: LinksState) => void): () => void;
+    open(target: LinkTarget, options?: OpenLinkOptions): Promise<void>;
+    /** The answer to the question shown. */
+    answer(id: number, answer: ExternalLinkAnswer): void;
+}

package/src/browser/links/links.spec.ts

@@ -0,0 +1,132 @@
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test';
+import type { TaDirEntry } from '@celljs/ta-protocol';
+import type { WebLink } from '../extension/web-extension-api';
+import { TaNoticesImpl } from '../notices/notices';
+import { LinkUtil } from '../util/link';
+import { TaLinksImpl } from './links';
+
+function setup(options: { openers?: number; trusted?: string[] } = {}) {
+    const dirs: Record<string, TaDirEntry[]> = {
+        '/repo:src': [{ name: 'a.ts', path: 'src/a.ts', kind: 'file' }],
+        '/repo:': [{ name: 'src', path: 'src', kind: 'directory' }],
+    };
+    const listed: string[] = [];
+    const server = {
+        listDirectory: async (path: string, cwd: string) => {
+            listed.push(`${cwd}:${path}`);
+            return dirs[`${cwd}:${path}`] ?? [];
+        },
+    };
+    const opened: WebLink[] = [];
+    const openers = Array.from({ length: options.openers ?? 1 }, () => (link: WebLink) => {
+        opened.push(link);
+        return true;
+    });
+    let trustedDomains = options.trusted ?? [];
+    const settings = {
+        state: {
+            language: 'en-US',
+            get settings() {
+                return { trustedDomains };
+            },
+        },
+        update: (change: { trustedDomains: string[] }) => {
+            trustedDomains = change.trustedDomains;
+        },
+    };
+    const notices = new TaNoticesImpl();
+    const links = new TaLinksImpl();
+    Object.assign(links, {
+        workbench: { workspace: server, state: { server: { cwd: '/repo' } } },
+        extensions: { state: { openers } },
+        settings,
+        notices,
+    });
+    return { links, opened, listed, notices, trusted: () => trustedDomains };
+}
+
+const windows: string[] = [];
+const originals = { open: globalThis.window, location: globalThis.location };
+
+beforeEach(() => {
+    windows.length = 0;
+    Object.assign(globalThis, {
+        window: { open: (url: string, target: string, features: string) => void windows.push(`${url} ${target} ${features}`) },
+        location: { hostname: 'ta.local' },
+    });
+});
+
+afterEach(() => {
+    Object.assign(globalThis, { window: originals.open, location: originals.location });
+});
+
+describe('TaLinksImpl', () => {
+    it('opens a file at its lines, and a directory, in the directory of the conversation', async () => {
+        const { links, opened, listed } = setup();
+        await links.open(LinkUtil.parse('src/a.ts#L3-L5')!, { cwd: '/repo' });
+        await links.open(LinkUtil.parse('/repo/src')!, { cwd: '/repo' });
+        await links.open(LinkUtil.parse('./')!, { cwd: '/repo' });
+        expect(opened).toEqual([
+            { type: 'file', cwd: '/repo', path: 'src/a.ts', selection: { startLine: 3, endLine: 5 } },
+            { type: 'directory', cwd: '/repo', path: 'src' },
+            { type: 'directory', cwd: '/repo', path: '' },
+        ]);
+        expect(listed).toEqual(['/repo:src', '/repo:']);
+    });
+
+    it('says when a path is not there, or nothing opens files', async () => {
+        const missing = setup();
+        await missing.links.open(LinkUtil.parse('src/b.ts:3')!, { cwd: '/repo' });
+        expect(missing.opened).toEqual([]);
+        expect(missing.notices.state.notices[0]).toMatchObject({ level: 'warning', message: 'src/b.ts:3 is not there.' });
+
+        const none = setup({ openers: 0 });
+        await none.links.open(LinkUtil.parse('src/a.ts')!, { cwd: '/repo' });
+        expect(none.notices.state.notices[0].message).toContain('@celljs/ta-workspace');
+    });
+
+    it('opens a page in the browser of the workbench, and outside only when the user says so', async () => {
+        const { links, opened } = setup();
+        await links.open({ type: 'url', url: 'https://x.dev/' });
+        expect(opened).toEqual([{ type: 'url', url: 'https://x.dev/' }]);
+        expect(windows).toEqual([]);
+
+        await links.open({ type: 'url', url: 'https://x.dev/' }, { external: true });
+        expect(windows).toEqual([]);
+        const request = links.state.external!;
+        expect(request).toMatchObject({ url: 'https://x.dev/', host: 'x.dev' });
+        links.answer(request.id, 'cancel');
+        expect(links.state.external).toBeUndefined();
+        expect(windows).toEqual([]);
+
+        await links.open({ type: 'url', url: 'https://x.dev/b' }, { external: true });
+        links.answer(links.state.external!.id, 'open');
+        // Without a way back to this page, nor where it came from.
+        expect(windows).toEqual(['https://x.dev/b _blank noopener,noreferrer']);
+    });
+
+    it('opens pages of this machine and of trusted domains outside without asking, and trusts a host when told', async () => {
+        const { links, trusted } = setup({ openers: 0, trusted: ['*.github.com'] });
+        await links.open({ type: 'url', url: 'http://localhost:5173/' }, { external: true });
+        await links.open({ type: 'url', url: 'https://gist.github.com/a' }, { external: true });
+        expect(windows).toHaveLength(2);
+        expect(links.state.external).toBeUndefined();
+
+        // No opener: a page asks before it opens outside, external or not.
+        await links.open({ type: 'url', url: 'https://x.dev:8443/a' });
+        links.answer(links.state.external!.id, 'trust');
+        expect(trusted()).toEqual(['*.github.com', 'x.dev:8443']);
+        await links.open({ type: 'url', url: 'https://x.dev:8443/b' }, { external: true });
+        expect(windows).toHaveLength(4);
+    });
+
+    it('answers only the question shown', async () => {
+        const { links } = setup();
+        await links.open({ type: 'url', url: 'https://a.dev/' }, { external: true });
+        const first = links.state.external!.id;
+        await links.open({ type: 'url', url: 'https://b.dev/' }, { external: true });
+        links.answer(first, 'open');
+        expect(windows).toEqual([]);
+        expect(links.state.external?.url).toBe('https://b.dev/');
+    });
+});

package/src/browser/links/links.ts

@@ -0,0 +1,127 @@
+import { Autowired, Component } from '@celljs/core';
+import type { TaDirEntry } from '@celljs/ta-protocol';
+import type { WebLink } from '../extension/web-extension-api';
+import { TaWebExtensions } from '../extension/web-extension-protocol';
+import { message } from '../i18n/messages';
+import { TaNotices } from '../notices/notices-protocol';
+import { TaSettings } from '../settings/settings-protocol';
+import { type LinkTarget, LinkUtil } from '../util/link';
+import { TaWorkbench } from '../workbench-protocol';
+import { type ExternalLinkAnswer, type LinksState, type OpenLinkOptions, TaLinks } from './links-protocol';
+
+@Component(TaLinks)
+export class TaLinksImpl implements TaLinks {
+    @Autowired(TaWorkbench)
+    protected readonly workbench: TaWorkbench;
+
+    @Autowired(TaWebExtensions)
+    protected readonly extensions: TaWebExtensions;
+
+    @Autowired(TaSettings)
+    protected readonly settings: TaSettings;
+
+    @Autowired(TaNotices)
+    protected readonly notices: TaNotices;
+
+    protected current: LinksState = {};
+    protected nextId = 0;
+    protected readonly listeners = new Set<(state: LinksState) => void>();
+
+    get state(): LinksState {
+        return this.current;
+    }
+
+    subscribe(listener: (state: LinksState) => void): () => void {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+
+    async open(target: LinkTarget, { cwd, external = false }: OpenLinkOptions = {}): Promise<void> {
+        try {
+            if (target.type === 'mail') {
+                this.openExternal(target.url);
+            } else if (target.type === 'url') {
+                if (external || !(await this.dispatch({ type: 'url', url: target.url }))) {
+                    this.askExternal(target.url);
+                }
+            } else {
+                const link = await this.locate(target, cwd || this.workbench.state.server?.cwd || '/');
+                if (link && !(await this.dispatch(link))) {
+                    this.notices.notify(this.text('ta.link.noOpener'), { level: 'warning' });
+                }
+            }
+        } catch (error) {
+            this.notices.error(error);
+        }
+    }
+
+    answer(id: number, answer: ExternalLinkAnswer): void {
+        const request = this.current.external;
+        if (request?.id !== id) {
+            return;
+        }
+        this.update({ external: undefined });
+        if (answer === 'copy') {
+            void navigator.clipboard?.writeText(request.url).then(() => this.notices.notify(this.text('ta.link.copied'), { level: 'success' }));
+        } else if (answer === 'trust') {
+            const domains = this.settings.state.settings.trustedDomains;
+            if (!domains.includes(request.host)) {
+                this.settings.update({ trustedDomains: [...domains, request.host] });
+            }
+            this.openExternal(request.url);
+        } else if (answer === 'open') {
+            this.openExternal(request.url);
+        }
+    }
+
+    /** A file or a directory as the openers take it: whether it is either, read from its directory. */
+    protected async locate(target: Extract<LinkTarget, { type: 'path' }>, conversationCwd: string): Promise<WebLink | undefined> {
+        const { cwd, path } = LinkUtil.resolve(conversationCwd, target.path);
+        if (!path) {
+            return { type: 'directory', cwd, path };
+        }
+        const name = LinkUtil.basename(path);
+        const entries = await this.workbench.workspace.listDirectory(LinkUtil.dirname(path), cwd).catch((): TaDirEntry[] => []);
+        const entry = entries.find(candidate => candidate.name === name);
+        if (!entry) {
+            this.notices.notify(this.text('ta.link.notFound', LinkUtil.label(target)), { level: 'warning' });
+            return undefined;
+        }
+        return entry.kind === 'directory' ? { type: 'directory', cwd, path } : { type: 'file', cwd, path, selection: target.selection };
+    }
+
+    /** The first opener of the web extensions that opens it. */
+    protected async dispatch(link: WebLink): Promise<boolean> {
+        for (const opener of this.extensions.state.openers) {
+            if (await opener(link)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /** Without asking for a host the user trusts; else the question, which a later link replaces. */
+    protected askExternal(url: string): void {
+        if (LinkUtil.trusted(url, this.settings.state.settings.trustedDomains, location.hostname)) {
+            this.openExternal(url);
+        } else {
+            this.update({ external: { id: ++this.nextId, url, host: new URL(url).host } });
+        }
+    }
+
+    /** A tab of its own, which cannot reach this page (no opener) nor learn where it came from. */
+    protected openExternal(url: string): void {
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+
+    protected text(id: 'ta.link.noOpener' | 'ta.link.copied' | 'ta.link.notFound', path = ''): string {
+        return message(this.settings.state.language, id).replace('{path}', path);
+    }
+
+    protected update(change: Partial<LinksState>): void {
+        this.current = { ...this.current, ...change };
+        for (const listener of this.listeners) {
+            listener(this.current);
+        }
+    }
+}

package/src/browser/markdown/hooks.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { Theme } from '../settings/settings-protocol';
+import type { Lazy } from './lazy';
+
+function subscribeTheme(listener: () => void): () => void {
+    const observer = new MutationObserver(listener);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    return () => observer.disconnect();
+}
+
+/** The theme the page shows (TaSettings sets it on the root), for what draws in it, as diagrams. */
+export function usePageTheme(): Theme {
+    return React.useSyncExternalStore(
+        subscribeTheme,
+        () => (document.documentElement.dataset.theme === 'light' ? 'light' : 'dark'),
+        () => 'dark',
+    );
+}
+
+/** A module loaded at the first component that needs it; undefined until then. */
+export function useLazy<T>(lazy: Lazy<T>): T | undefined {
+    const [value, setValue] = React.useState(lazy.value);
+    React.useEffect(() => {
+        if (value === undefined) {
+            lazy.load().then(
+                loaded => setValue(() => loaded),
+                () => undefined,
+            );
+        }
+    }, [lazy, value]);
+    return value ?? lazy.value;
+}

package/src/browser/markdown/lazy.spec.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'bun:test';
+import { Lazy, Recent } from './lazy';
+
+describe('Lazy', () => {
+    it('loads once, and again after a load that failed', async () => {
+        let calls = 0;
+        const lazy = new Lazy(async () => {
+            calls++;
+            if (calls === 1) {
+                throw new Error('offline');
+            }
+            return 'module';
+        });
+        await expect(lazy.load()).rejects.toThrow('offline');
+        expect(lazy.value).toBeUndefined();
+        expect(await lazy.load()).toBe('module');
+        expect(await lazy.load()).toBe('module');
+        expect(lazy.value).toBe('module');
+        expect(calls).toBe(2);
+    });
+});
+
+describe('Recent', () => {
+    it('forgets what it was told first, and keeps what it was told again', () => {
+        const recent = new Recent<number>(2);
+        recent.set('a', 1);
+        recent.set('b', 2);
+        recent.set('a', 3);
+        recent.set('c', 4);
+        expect(recent.has('b')).toBe(false);
+        expect(recent.get('a')).toBe(3);
+        expect(recent.get('c')).toBe(4);
+    });
+});

package/src/browser/markdown/lazy.ts

@@ -0,0 +1,46 @@
+/**
+ * A module loaded the first time it is needed, not with the page: formulas and diagrams bring large
+ * libraries that most conversations never use. A load that failed is tried again the next time.
+ */
+export class Lazy<T> {
+    /** Once loaded. */
+    value?: T;
+    protected loading?: Promise<T>;
+
+    constructor(protected readonly start: () => Promise<T>) {}
+
+    load(): Promise<T> {
+        this.loading ??= this.start().then(
+            value => (this.value = value),
+            error => {
+                this.loading = undefined;
+                throw error;
+            },
+        );
+        return this.loading;
+    }
+}
+
+/** A map that forgets what it was told first once it holds `limit` entries. */
+export class Recent<V> {
+    protected readonly entries = new Map<string, V>();
+
+    constructor(protected readonly limit: number) {}
+
+    get(key: string): V | undefined {
+        return this.entries.get(key);
+    }
+
+    has(key: string): boolean {
+        return this.entries.has(key);
+    }
+
+    set(key: string, value: V): V {
+        this.entries.delete(key);
+        this.entries.set(key, value);
+        if (this.entries.size > this.limit) {
+            this.entries.delete(this.entries.keys().next().value as string);
+        }
+        return value;
+    }
+}

package/src/browser/markdown/math.spec.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'bun:test';
+import katex from 'katex';
+import { MathRenderer } from './math';
+
+describe('MathRenderer', () => {
+    it('typesets TeX inline and on a line of its own', () => {
+        expect(MathRenderer.render(katex, 'x^2', false)).toContain('class="katex"');
+        expect(MathRenderer.render(katex, '\\frac{a}{b}', true)).toContain('katex-display');
+    });
+
+    it('answers null for TeX that is not valid yet, as while it streams', () => {
+        expect(MathRenderer.render(katex, '\\frac{1}{', true)).toBeNull();
+    });
+
+    it('makes no links to scripts', () => {
+        const html = MathRenderer.render(katex, '\\href{javascript:alert(1)}{x}', false) ?? '';
+        expect(html).toContain('katex');
+        expect(html).not.toMatch(/<a\b|href=/);
+    });
+});

package/src/browser/markdown/math.ts

@@ -0,0 +1,33 @@
+import type Katex from 'katex';
+import { Lazy, Recent } from './lazy';
+
+type KatexApi = typeof Katex;
+
+/** Formulas of the conversations, typeset by KaTeX, which is loaded with its fonts at the first one. */
+export namespace MathRenderer {
+    export const katex = new Lazy<KatexApi>(async () => {
+        const [module] = await Promise.all([import('katex'), import('katex/dist/katex.min.css')]);
+        return (module as { default?: KatexApi }).default ?? (module as unknown as KatexApi);
+    });
+
+    const html = new Recent<string | null>(256);
+
+    /**
+     * The markup of a formula; null when it is not valid TeX, as while a reply streams it. Nothing in it
+     * runs: `trust` stays off, so `\\href` and the like take no `javascript:` targets.
+     */
+    export function render(api: KatexApi, tex: string, display: boolean): string | null {
+        const key = `${display ? 1 : 0}${tex}`;
+        if (html.has(key)) {
+            return html.get(key) ?? null;
+        }
+        try {
+            return html.set(
+                key,
+                api.renderToString(tex, { displayMode: display, throwOnError: true, strict: 'ignore', trust: false, maxSize: 50, maxExpand: 1000 }),
+            );
+        } catch {
+            return html.set(key, null);
+        }
+    }
+}

package/src/browser/markdown/mermaid.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'bun:test';
+import { MermaidUtil } from './mermaid';
+
+describe('MermaidUtil', () => {
+    it('takes mermaid fences with a source for diagrams', () => {
+        expect(MermaidUtil.isDiagram('mermaid', 'graph TD; A-->B')).toBe(true);
+        expect(MermaidUtil.isDiagram(' Mermaid ', 'graph TD')).toBe(true);
+        expect(MermaidUtil.isDiagram('mermaid', '  ')).toBe(false);
+        expect(MermaidUtil.isDiagram('ts', 'graph TD')).toBe(false);
+    });
+
+    it('names a downloaded diagram by its time', () => {
+        expect(MermaidUtil.fileName(new Date(2026, 10, 9, 8, 7, 6))).toBe('diagram-20261109-080706.svg');
+    });
+
+    it('puts a background behind a downloaded diagram, only of a colour', () => {
+        const svg = '<svg viewBox="0 0 1 1"><g/></svg>';
+        expect(MermaidUtil.withBackground(svg, '#161618')).toBe('<svg viewBox="0 0 1 1"><rect width="100%" height="100%" fill="#161618"/><g/></svg>');
+        expect(MermaidUtil.withBackground(svg, 'red"/><script>')).toBe(svg);
+    });
+});

package/src/browser/markdown/mermaid.ts

@@ -0,0 +1,89 @@
+import type { Theme } from '../settings/settings-protocol';
+import { Lazy, Recent } from './lazy';
+
+/** What is used of the library. */
+interface Mermaid {
+    initialize(config: { startOnLoad: boolean; securityLevel: 'strict'; theme: 'dark' | 'default'; fontFamily: string }): void;
+    parse(code: string, options: { suppressErrors: true }): Promise<unknown>;
+    render(id: string, code: string): Promise<{ svg: string }>;
+}
+
+/** What does not need the library: which code blocks are diagrams, and what a downloaded diagram is. */
+export namespace MermaidUtil {
+    export function isDiagram(language: string | undefined, code: string): boolean {
+        return language?.trim().toLowerCase() === 'mermaid' && code.trim().length > 0;
+    }
+
+    export function key(theme: Theme, code: string): string {
+        return `${theme}\u0000${code}`;
+    }
+
+    /** `diagram-<yyyyMMdd-HHmmss>.svg`. */
+    export function fileName(now = new Date()): string {
+        const pad = (value: number) => String(value).padStart(2, '0');
+        const date = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}`;
+        return `diagram-${date}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}.svg`;
+    }
+
+    /** The diagram on a background of `color`: a dark diagram has light lines only, unseen on white. */
+    export function withBackground(svg: string, color: string): string {
+        if (!/^#[\da-f]{3,8}$|^rgba?\([\d\s.,%]+\)$/i.test(color)) {
+            return svg;
+        }
+        return svg.replace(/<svg\b[^>]*>/, open => `${open}<rect width="100%" height="100%" fill="${color}"/>`);
+    }
+}
+
+/**
+ * Mermaid diagrams, drawn by the library loaded at the first one. A source that does not parse, as
+ * while a reply streams it, draws nothing; what was drawn is kept per theme and source, so that a
+ * diagram is not drawn again on each change of the conversation. Drawings run one at a time: the
+ * library has one configuration.
+ */
+export namespace MermaidRenderer {
+    const mermaid = new Lazy<Mermaid>(async () => (await import('mermaid')).default as unknown as Mermaid);
+    const drawn = new Recent<string>(32);
+    let queue: Promise<unknown> = Promise.resolve();
+    let configured: Theme | undefined;
+    let count = 0;
+
+    export function cached(theme: Theme, code: string): string | undefined {
+        return drawn.get(MermaidUtil.key(theme, code));
+    }
+
+    export function render(theme: Theme, code: string): Promise<string | undefined> {
+        const hit = cached(theme, code);
+        if (hit) {
+            return Promise.resolve(hit);
+        }
+        const next = queue.then(() => draw(theme, code)).catch(() => undefined);
+        queue = next;
+        return next;
+    }
+
+    async function draw(theme: Theme, code: string): Promise<string | undefined> {
+        const api = await mermaid.load();
+        if (configured !== theme) {
+            api.initialize({
+                startOnLoad: false,
+                securityLevel: 'strict',
+                theme: theme === 'dark' ? 'dark' : 'default',
+                fontFamily: getComputedStyle(document.documentElement).getPropertyValue('--ta-sans').trim() || 'sans-serif',
+            });
+            configured = theme;
+        }
+        if (!(await api.parse(code, { suppressErrors: true }))) {
+            return undefined;
+        }
+        const id = `ta-mermaid-${++count}`;
+        try {
+            const { svg } = await api.render(id, code);
+            return svg ? drawn.set(MermaidUtil.key(theme, code), svg) : undefined;
+        } finally {
+            // What the library leaves in the page when a drawing fails.
+            for (const left of [id, `d${id}`]) {
+                document.getElementById(left)?.remove();
+            }
+        }
+    }
+}

package/src/browser/markdown/style-modules.d.ts

@@ -0,0 +1,2 @@
+/** A style sheet that Vite bundles and adds to the page: `import('katex/dist/katex.min.css')`. */
+declare module '*.css' {}

package/src/browser/module.ts

@@ -0,0 +1,6 @@
+import { autoBind } from '@celljs/core';
+// The IntlProvider of react-intl around the application, with the messages of the language of the settings.
+import '@celljs/react/lib/browser/intl';
+import './index';
+
+export default autoBind();