@adecore/agents-react 0.23.1 → 0.24.1

package/src/chat/ui/composer/use-prompt-history.ts

@@ -0,0 +1,76 @@
+import { useMemo, useState } from 'react';
+import { useChatRow } from '../../../state/chats';
+
+// How many sent prompts the arrow keys walk back through, per chat.
+const PROMPT_HISTORY = 50;
+
+export interface PromptHistory {
+    /* Whether a prompt was recalled and the box still holds it unedited. */
+    recalled(text: string): boolean;
+    /* Walks one prompt back (-1) or forward (1); false when there is nothing to walk through. */
+    recall(direction: -1 | 1): boolean;
+    /* Leaves a recalled prompt in the box as a draft of its own. */
+    forget(): void;
+    /* Leaves the walk and empties the box; false when no prompt was recalled. */
+    leave(): boolean;
+    /* Forgets the walk once the text no longer is the recalled prompt. */
+    edited(text: string): void;
+}
+
+/* The prompts sent in this chat, for the arrow keys to put back in an empty box. */
+export function usePromptHistory(chatId: string, setText: (next: string, mentions?: string[], skills?: string[]) => void): PromptHistory {
+    const order = useChatRow(chatId, (row) => row?.order);
+    const items = useChatRow(chatId, (row) => row?.structure);
+    const [index, setIndex] = useState<number | null>(null);
+
+    const history = useMemo(() => {
+        const prompts: Array<{ text: string; mentions: string[] }> = [];
+        for (const id of order ?? []) {
+            const item = items?.[id];
+            if (item?.kind === 'user') {
+                prompts.push({ text: item.text, mentions: item.mentions ?? [] });
+            }
+        }
+        // Walking back further than this is faster with the timeline than with the arrow key.
+        return prompts.slice(-PROMPT_HISTORY);
+    }, [order, items]);
+
+    const recall = (direction: -1 | 1): boolean => {
+        if (history.length === 0) {
+            return false;
+        }
+        const next = index === null ? (direction === -1 ? history.length - 1 : null) : index + direction;
+        if (next === null || next >= history.length) {
+            setIndex(null);
+            setText('', [], []);
+            return true;
+        }
+        if (next < 0) {
+            return true;
+        }
+        setIndex(next);
+        setText(history[next]!.text, history[next]!.mentions);
+        return true;
+    };
+
+    const leave = (): boolean => {
+        if (index === null) {
+            return false;
+        }
+        setIndex(null);
+        setText('', [], []);
+        return true;
+    };
+
+    return {
+        recalled: (text) => index !== null && text === history[index]?.text,
+        recall,
+        forget: () => setIndex(null),
+        leave,
+        edited: (text) => {
+            if (index !== null && text !== history[index]?.text) {
+                setIndex(null);
+            }
+        }
+    };
+}

package/src/chat/ui/composer/use-prompt-hold.ts

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from 'react';
+import { holdLiftsIn, type HoldRelease } from '../../prompt-hold';
+import type { PromptHold } from '../PromptComposer';
+
+export type ComposerPromptHold = PromptHold & { noteInput(): void; setComposing(composing: boolean): void };
+
+/*
+ * Keeps a waiting prompt card behind the draft while the person types. Typing, pasting and dictating
+ * all change the draft, so `noteInput` is called from its change handler; the hold lifts after a pause.
+ */
+export function usePromptHold(): ComposerPromptHold {
+    const typedAt = useRef<number | null>(null);
+    const composing = useRef(false);
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const [state, setState] = useState<{ held: boolean; releasedBy: HoldRelease | null }>({ held: false, releasedBy: null });
+
+    const clearTimer = (): void => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+
+    const release = (reason: HoldRelease): void => {
+        clearTimer();
+        typedAt.current = null;
+        composing.current = false;
+        setState((current) => (current.held ? { held: false, releasedBy: reason } : current));
+    };
+
+    const schedule = (): void => {
+        clearTimer();
+        const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
+        if (wait !== null) {
+            timer.current = setTimeout(() => release('pause'), wait);
+        }
+    };
+
+    const noteInput = (): void => {
+        typedAt.current = Date.now();
+        setState({ held: true, releasedBy: null });
+        schedule();
+    };
+
+    const setComposing = (next: boolean): void => {
+        composing.current = next;
+        if (next) {
+            setState({ held: true, releasedBy: null });
+        } else {
+            typedAt.current = Date.now();
+        }
+        schedule();
+    };
+
+    useEffect(() => clearTimer, []);
+
+    return { held: state.held, releasedBy: state.releasedBy, release, noteInput, setComposing };
+}

package/src/chat/ui/composer/use-take-back.ts

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ChatAttachmentUpload, ChatQueuedMessage } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { errorCode } from '../../../transport';
+import { useChatActions } from '../../actions';
+import { readStoredAttachments } from '../../attachments';
+import { takeBackIntoDraft, type ChatDraft } from '../../drafts';
+import type { ComposerDraft } from './use-composer-draft';
+
+interface TakeBackInput {
+    chatId: string;
+    draft: ComposerDraft;
+    setNotice(notice: string): void;
+    /* The message is back in the draft. */
+    onTaken(): void;
+}
+
+/* Takes a queued message out of the queue and back into the draft, to be edited before it goes. */
+export function useTakeBack({ chatId, draft: { latest, setDraft }, setNotice, onTaken }: TakeBackInput) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const scope = useChatScope();
+    const actions = useChatActions();
+    const [takingBack, setTakingBack] = useState<string | null>(null);
+
+    /*
+     * The files come back from the machine before the message leaves the queue, since the machine only
+     * serves a file some message still holds. The machine's refusal is what says it already went out.
+     */
+    const takeBack = async (message: ChatQueuedMessage): Promise<void> => {
+        if (takingBack !== null) {
+            return;
+        }
+        const failed = (e: unknown): void => {
+            host.notify({ kind: 'error', title: t('composer.queue.editFailed'), description: e instanceof Error ? e.message : String(e) });
+        };
+        const readFiles = async (): Promise<ChatAttachmentUpload[]> => {
+            const stored = message.attachments ?? [];
+            if (stored.length === 0) {
+                return [];
+            }
+            const files = host.attachments;
+            return readStoredAttachments((attachment) => files.read(scope.id, chatId, attachment.id), stored);
+        };
+        setTakingBack(message.id);
+        try {
+            let uploads: ChatAttachmentUpload[];
+            try {
+                uploads = await readFiles();
+            } catch (e) {
+                failed(e);
+                return;
+            }
+            const taken: Omit<ChatDraft, 'quote' | 'quoteSource'> = {
+                text: message.text,
+                mentions: message.mentions ?? [],
+                skills: message.skills ?? [],
+                chats: message.chats ?? [],
+                attachments: uploads
+            };
+            // A file that would not fit is refused here, while the message still holds it on the machine.
+            const wouldReject = takeBackIntoDraft(latest.current, taken).rejected[0];
+            if (wouldReject) {
+                setNotice(t('composer.notice.queuedDoesNotFit', { name: wouldReject.name || t('composer.notice.thatFile'), reason: wouldReject.reason }));
+                return;
+            }
+            try {
+                await actions.unqueue(chatId, message.id);
+            } catch (e) {
+                if (errorCode(e) === 'request-not-found') {
+                    host.notify({ kind: 'error', title: t('composer.queue.alreadySent') });
+                } else {
+                    failed(e);
+                }
+                return;
+            }
+            const merged = takeBackIntoDraft(latest.current, taken);
+            setDraft(merged.draft);
+            if (merged.rejected[0]) {
+                setNotice(t('composer.notice.rejected', { name: merged.rejected[0].name, reason: merged.rejected[0].reason }));
+            }
+            onTaken();
+        } finally {
+            setTakingBack(null);
+        }
+    };
+
+    return { takingBack, takeBack };
+}

package/src/chat/ui/diff/DiffFallbackBoundary.tsx

@@ -13,7 +13,7 @@ interface State {
 
 /* A failed view or lazy chunk must leave the containing review card usable. */
 export class DiffFallbackBoundary extends Component<Props, State> {
-    state: State = { failed: false, resetKeys: this.props.resetKeys };
+    override state: State = { failed: false, resetKeys: this.props.resetKeys };
 
     static getDerivedStateFromError(): Partial<State> {
         return { failed: true };
@@ -26,7 +26,7 @@ export class DiffFallbackBoundary extends Component<Props, State> {
         return null;
     }
 
-    render(): ReactNode {
+    override render(): ReactNode {
         return this.state.failed ? this.props.fallback : this.props.children;
     }
 }

package/src/chat/ui/diff/EditorEditDiff.tsx

@@ -5,7 +5,7 @@ import { getFiletypeFromFileName } from '@pierre/diffs';
 import type { EditorEngine } from '@adecore/editor';
 import { DiffView } from '@adecore/editor-react';
 import { diffDocument, patchOf, type DiffDocument } from '@adecore/merge';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import type { FileChange } from '../../logic/tools';
 import { useDiffSourceTokens } from '../use-diff-source-tokens';
 import { diffSourceBudget } from './diff-source-budget';
@@ -34,10 +34,11 @@ function ReadyDiff({
     layout: 'unified' | 'split';
     maxHeight: number;
 }) {
+    const host = useChatHost();
     useReviewSettled();
     const { t } = useTranslation('agent-chat');
-    const mode = chatHost().code.useMode();
-    const theme = chatHost().code.useThemes()[mode];
+    const mode = host.code.useMode();
+    const theme = host.code.useThemes()[mode];
     const language = getFiletypeFromFileName(path);
     const tokens = useDiffSourceTokens(document, language, theme);
     return (

package/src/chat/ui/diff/LegacyDiffPool.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
 import { useWorkerPool } from '@pierre/diffs/react';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import DiffPool from '../DiffPool';
 
 export function LegacyDiffPool({ children }: { children: ReactNode }) {
+    const host = useChatHost();
     const outer = useWorkerPool();
-    const workerFactory = chatHost().code.legacyDiffWorker;
+    const workerFactory = host.code.legacyDiffWorker;
     if (outer !== undefined || workerFactory === undefined) {
         return children;
     }

package/src/chat/ui/diff/LegacyEditDiff.tsx

@@ -2,13 +2,14 @@ import { LegacyDiffPool } from './LegacyDiffPool';
 import { useReviewSettled } from './review-settle';
 import { useMemo } from 'react';
 import { MultiFileDiff } from '@pierre/diffs/react';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import type { FileChange } from '../../logic/tools';
 
 export default function LegacyEditDiff({ change, maxHeight }: { change: FileChange; maxHeight?: number }) {
+    const host = useChatHost();
     useReviewSettled();
-    const resolved = chatHost().code.useMode();
+    const resolved = host.code.useMode();
     const theme = useDiffTheme();
     const oldFile = useMemo(() => ({ name: change.path, contents: change.before }), [change.path, change.before]);
     const newFile = useMemo(() => ({ name: change.path, contents: change.after }), [change.path, change.after]);

package/src/chat/ui/diff/LegacyUnifiedDiff.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import clsx from 'clsx';
 import { FileDiff, PatchDiff } from '@pierre/diffs/react';
 import type { ChatFileChange } from '@adecore/agent-contracts';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import { fullFileDiff } from '../full-diff';
 import type { UnifiedDiffProps } from './diff-props';
@@ -45,8 +45,9 @@ function lineClass(line: string): string {
 }
 
 export default function LegacyUnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents, maxHeight }: UnifiedDiffProps) {
+    const host = useChatHost();
     useReviewSettled();
-    const resolved = chatHost().code.useMode();
+    const resolved = host.code.useMode();
     const theme = useDiffTheme();
     const patch = useMemo(() => asPatch(change), [change]);
     const oldText = contents?.old;

package/src/chat/ui/diff/syntax-runtime.ts

@@ -7,7 +7,7 @@ import {
     type DiffSyntaxService,
     type DiffSyntaxTokens
 } from '@adecore/editor/shiki-worker';
-import { chatHost } from '../../../host';
+import type { ChatHost } from '../../../host';
 
 interface Pending {
     promise: Promise<DiffSyntaxTokens | null>;
@@ -39,11 +39,16 @@ export interface DiffSyntaxRuntimeOptions {
 }
 
 let nextGeneration = 0;
-let shared: DiffSyntaxRuntime | undefined;
+const shared = new WeakMap<ChatHost['code'], DiffSyntaxRuntime>();
 
-export function diffSyntaxRuntime(): DiffSyntaxRuntime {
-    const code = chatHost().code;
-    return (shared ??= createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter }));
+/* The runtime of a host's `code`, made on first use and shared by every diff under that host. */
+export function diffSyntaxRuntime(code: ChatHost['code']): DiffSyntaxRuntime {
+    let runtime = shared.get(code);
+    if (runtime === undefined) {
+        runtime = createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter });
+        shared.set(code, runtime);
+    }
+    return runtime;
 }
 
 export function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): DiffSyntaxRuntime {

package/src/chat/ui/diff-syntax.ts

@@ -1,7 +1,7 @@
 import type { LineToken } from '@adecore/editor';
 import { lineTokensOf, type DiffSyntaxDocument } from '@adecore/editor/shiki-worker';
 import type { DiffDocument } from '@adecore/merge';
-import { diffSyntaxRuntime, type DiffSyntaxRuntime } from './diff/syntax-runtime';
+import type { DiffSyntaxRuntime } from './diff/syntax-runtime';
 
 export { createDiffSyntaxRuntime, diffSyntaxRuntime } from './diff/syntax-runtime';
 export type { DiffSyntaxRuntime, DiffSyntaxRuntimeOptions, DiffSyntaxSession } from './diff/syntax-runtime';
@@ -18,7 +18,7 @@ export interface DiffSourceTokenSession {
 }
 
 /* Structurally accepts the editor's source mapping without depending on its React renderer. */
-export function diffSourceTokens(document: DiffDocument, mapping: DiffSyntaxMapping, runtime: DiffSyntaxRuntime = diffSyntaxRuntime()): DiffSourceTokenSession {
+export function diffSourceTokens(document: DiffDocument, mapping: DiffSyntaxMapping, runtime: DiffSyntaxRuntime): DiffSourceTokenSession {
     const sides = { old: runtime.open(mapping.documents.old), new: runtime.open(mapping.documents.new) };
     const cache = { old: new Map<number, ReadonlyArray<readonly LineToken[] | null>>(), new: new Map<number, ReadonlyArray<readonly LineToken[] | null>>() };
     const pending = { old: new Set<number>(), new: new Set<number>() };

package/src/chat/ui/diff-theme.ts

@@ -1,23 +1,24 @@
 import { useMemo } from 'react';
 import { registerCustomTheme, type ThemesType } from '@pierre/diffs';
-import { chatHost } from '../../host';
+import { useChatHost, type ChatHost } from '../../host';
 
-let registered = false;
+const registered = new WeakSet<ChatHost['code']['custom']>();
 
-/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once the host is set. */
-function registerThemes(): void {
-    if (registered) {
+/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once per host. */
+function registerThemes(custom: ChatHost['code']['custom']): void {
+    if (registered.has(custom)) {
         return;
     }
-    registered = true;
-    for (const theme of chatHost().code.custom) {
+    registered.add(custom);
+    for (const theme of custom) {
         registerCustomTheme(theme.name, () => Promise.resolve(theme));
     }
 }
 
 /* The code themes a diff is drawn in, the same pair a chat's code blocks use. */
 export function useDiffTheme(): ThemesType {
-    registerThemes();
-    const { light, dark } = chatHost().code.useThemes();
+    const { code } = useChatHost();
+    registerThemes(code.custom);
+    const { light, dark } = code.useThemes();
     return useMemo(() => ({ light, dark }), [light, dark]);
 }

package/src/chat/ui/file-links.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext, useMemo } from 'react';
-import { chatHost, type FileRef } from '../../host';
+import { useChatHost, type FileRef } from '../../host';
 import { ChatScopeContext } from '../../scope';
 
 /*
@@ -21,10 +21,12 @@ export function useFileLinkScopeId(): string | null {
 export function useFileLinkTarget(text: string): FileRef | null {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
-    return useMemo(() => chatHost().fileLinks?.target(text, cwd, scopeId) ?? null, [text, cwd, scopeId]);
+    const { fileLinks } = useChatHost();
+    return useMemo(() => fileLinks?.target(text, cwd, scopeId) ?? null, [fileLinks, text, cwd, scopeId]);
 }
 
-/* A reference followed, the way the app opens a file or a folder. */
-export function openFileLink(cwd: string | null, ref: FileRef, scopeId: string | null = null): void {
-    chatHost().fileLinks?.open(cwd, ref, scopeId);
+/* Follows a reference the way the app opens a file or a folder. */
+export function useOpenFileLink(): (cwd: string | null, ref: FileRef, scopeId?: string | null) => void {
+    const { fileLinks } = useChatHost();
+    return (cwd, ref, scopeId = null) => fileLinks?.open(cwd, ref, scopeId);
 }

package/src/chat/ui/highlighter.ts

@@ -0,0 +1,185 @@
+import type { CSSProperties } from 'react';
+import type { BundledLanguage, BundledTheme, Highlighter, ThemeRegistration } from 'shiki';
+import type { CodeToken, Tokenize } from './code-lines';
+import { useChatHost, type ChatHost } from '../../host';
+import { shikiThemeOf } from './code-theme';
+
+export type { Highlighter };
+export type GrammarState = ReturnType<Highlighter['getLastGrammarState']>;
+// A plain language needs no grammar; shiki draws it in the theme's own foreground.
+const PLAIN = 'text';
+
+/* One highlighter with the grammars and themes asked of it, each loaded once. */
+export interface CodeHighlighter {
+    loadLanguage(lang: string): Promise<void>;
+    /* Loads a theme: one of `custom` by its name, or a bundled one by its id. */
+    loadTheme(theme: string, custom: ChatHost['code']['custom']): Promise<void>;
+    /* The highlighter once every one of `langs` and `theme` is in, or null while one is still on its way. */
+    ready(langs: Iterable<string>, theme: string): Highlighter | null;
+    /* The language shiki draws `lang` in: its own grammar, or plain text. Only meaningful once a load settled. */
+    language(lang: string): string;
+    /* The tokenizer for a language in a theme, or null while shiki, the grammar or the theme is still on its way. */
+    tokenizer(lang: string, theme: string): { tokenize: Tokenize<GrammarState>; fg: string | undefined } | null;
+}
+
+/* Plain text when the highlighter has no grammar for `lang`, as a bundle without that language answers. */
+async function grammarOf(loaded: Highlighter, lang: string): Promise<string> {
+    if (lang === PLAIN || loaded.getLoadedLanguages().includes(lang)) {
+        return lang;
+    }
+    try {
+        await loaded.loadLanguage(lang as BundledLanguage);
+        return lang;
+    } catch {
+        return PLAIN;
+    }
+}
+
+function createCodeHighlighter(source: () => Promise<Highlighter>): CodeHighlighter {
+    let highlighter: Highlighter | null = null;
+    let highlighterLoad: Promise<Highlighter> | null = null;
+    const languages = new Map<string, string>();
+    const languageLoads = new Map<string, Promise<void>>();
+    const themes = new Set<string>();
+    const themeLoads = new Map<string, Promise<void>>();
+    const tokenizers = new Map<string, { tokenize: Tokenize<GrammarState>; fg: string | undefined }>();
+
+    const load = (): Promise<Highlighter> => {
+        highlighterLoad ??= source().then((loaded) => {
+            highlighter = loaded;
+            return loaded;
+        });
+        return highlighterLoad;
+    };
+
+    const ready = (langs: Iterable<string>, theme: string): Highlighter | null => {
+        if (highlighter === null || !themes.has(theme)) {
+            return null;
+        }
+        for (const lang of langs) {
+            if (!languages.has(lang)) {
+                return null;
+            }
+        }
+        return highlighter;
+    };
+
+    const language = (lang: string): string => languages.get(lang) ?? PLAIN;
+
+    return {
+        loadLanguage(lang) {
+            let pending = languageLoads.get(lang);
+            if (!pending) {
+                pending = load().then(async (loaded) => {
+                    languages.set(lang, await grammarOf(loaded, lang));
+                });
+                languageLoads.set(lang, pending);
+            }
+            return pending;
+        },
+        loadTheme(theme, custom) {
+            let pending = themeLoads.get(theme);
+            if (!pending) {
+                pending = load().then(async (loaded) => {
+                    // Loading a theme the highlighter already has replaces it, under whatever else of the host draws with it.
+                    if (!loaded.getLoadedThemes().includes(theme)) {
+                        await loaded.loadTheme(shikiThemeOf(theme, custom) as BundledTheme | ThemeRegistration);
+                    }
+                    themes.add(theme);
+                });
+                themeLoads.set(theme, pending);
+            }
+            return pending;
+        },
+        ready,
+        language,
+        tokenizer(lang, theme) {
+            const loaded = ready([lang], theme);
+            if (loaded === null) {
+                return null;
+            }
+            const resolved = language(lang);
+            const key = `${resolved}:${theme}`;
+            let entry = tokenizers.get(key);
+            if (!entry) {
+                const options = { lang: resolved as BundledLanguage, theme };
+                entry = {
+                    tokenize: (code, state) => {
+                        const result = loaded.codeToTokens(code, state ? { ...options, grammarState: state } : options);
+                        return { lines: result.tokens, state: result.grammarState };
+                    },
+                    fg: loaded.getTheme(theme).fg
+                };
+                tokenizers.set(key, entry);
+            }
+            return entry;
+        }
+    };
+}
+
+// Shiki loads on the first code it draws, not with the app; the web bundle covers the languages a coding agent writes.
+function loadBundled(): Promise<Highlighter> {
+    return import('shiki/bundle/web').then(({ createHighlighter }) => createHighlighter({ themes: [], langs: [] }) as Promise<Highlighter>);
+}
+
+let bundled: CodeHighlighter | null = null;
+const borrowed = new WeakMap<() => Promise<Highlighter>, CodeHighlighter>();
+
+/* The highlighter a host lends, which stays the host's, or without one the web bundle's of this package. */
+export function codeHighlighter(source?: () => Promise<Highlighter>): CodeHighlighter {
+    if (source === undefined) {
+        bundled ??= createCodeHighlighter(loadBundled);
+        return bundled;
+    }
+    let highlighter = borrowed.get(source);
+    if (highlighter === undefined) {
+        highlighter = createCodeHighlighter(source);
+        borrowed.set(source, highlighter);
+    }
+    return highlighter;
+}
+
+/* The code highlighter of the host this is rendered under. */
+export function useCodeHighlighter(): CodeHighlighter {
+    return codeHighlighter(useChatHost().code.highlighter);
+}
+
+/* Loads the grammar of one language into the web bundle's highlighter, once. */
+export function loadLanguage(lang: string): Promise<void> {
+    return codeHighlighter().loadLanguage(lang);
+}
+
+/* Loads a theme into the web bundle's highlighter, once: one of `custom` by its name, or a bundled one by its id. */
+export function loadTheme(theme: string, custom: ChatHost['code']['custom']): Promise<void> {
+    return codeHighlighter().loadTheme(theme, custom);
+}
+
+/* The web bundle's highlighter once every one of `langs` and `theme` is in, or null while one is still on its way. */
+export function readyHighlighter(langs: Iterable<string>, theme: string): Highlighter | null {
+    return codeHighlighter().ready(langs, theme);
+}
+
+/* The language the web bundle draws `lang` in: the bundled grammar, or plain text. Only meaningful once a load settled. */
+export function loadedLanguage(lang: string): string {
+    return codeHighlighter().language(lang);
+}
+
+/* The web bundle's tokenizer for a language in a theme, or null while shiki, the grammar or the theme is still on its way. */
+export function tokenizerFor(lang: string, theme: string): { tokenize: Tokenize<GrammarState>; fg: string | undefined } | null {
+    return codeHighlighter().tokenizer(lang, theme);
+}
+
+/* The inline style of one token; undefined when it only has the surrounding color. */
+export function tokenStyle(token: CodeToken): CSSProperties | undefined {
+    const style = token.fontStyle ?? 0;
+    if (token.color === undefined && style <= 0) {
+        return undefined;
+    }
+    const decorations = [style & 4 ? 'underline' : '', style & 8 ? 'line-through' : ''].filter(Boolean).join(' ');
+    return {
+        color: token.color,
+        ...(style & 1 ? { fontStyle: 'italic' } : {}),
+        ...(style & 2 ? { fontWeight: 'bold' } : {}),
+        ...(decorations ? { textDecoration: decorations } : {})
+    };
+}