@octolearn/training-ui 0.0.0-stage → 0.1.0

package/dist/types/elements/question-parts.d.ts

@@ -0,0 +1,80 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { FrontendContent, MatchingRound } from '../content';
+import type { SpeakEventDetail } from '../events';
+import { type TrainingLanguage, type TrainingStrings } from '../i18n/strings';
+import { type SpeakOptions } from '../speech';
+import type { FlashcardRevealer } from './flashcard';
+/** The look shared by the question elements in design D. */
+export declare const questionStyles: import("lit").CSSResult;
+/**
+ * Base of the question elements. A new `content` is a new question: the answer field is emptied, and with
+ * `autofocusAnswer` the cursor goes into it. `speak()` reads text aloud through a cancelable `octolearn-speak` event, so a
+ * page with its own voice output can take over; otherwise the built-in SpeechController speaks and, if the browser
+ * blocks speech until the first tap, a "Abspielen" hint appears.
+ */
+export declare class QuestionElement extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The question as octolearn's API sends it. */
+    content?: FrontendContent;
+    /** Passed to the answer tiles: don't take the number keys. */
+    noKeys: boolean;
+    /** Fetches the answer of a Karteikarte (octolearn's web app), e.g. `content => session.revealFlashcard(content)`. */
+    revealFlashcard?: FlashcardRevealer;
+    protected needsGesture: boolean;
+    protected autofocusAnswer: boolean;
+    protected readonly speech: import("..").SpeechController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Reads text aloud, unless the page cancels the `octolearn-speak` event and speaks itself. */
+    protected speakText(text: string | null | undefined, reason: SpeakEventDetail['reason'], options?: SpeakOptions): void;
+    protected playPending(): void;
+    protected playHint(t: TrainingStrings): TemplateResult | typeof nothing;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Puts the focus on the answer: the field, the first tile or the first button (e.g. when an overlay opens). */
+    focusAnswer(): void;
+}
+export interface AnswerSectionOptions {
+    content: FrontendContent;
+    lang: TrainingLanguage;
+    strings?: Partial<TrainingStrings>;
+    t: TrainingStrings;
+    /** Accessible name of the text field. */
+    inputLabel: string;
+    /** Show the field's name above it (D: "Auf Englisch", "Schreib das Wort"). */
+    visibleLabel?: boolean;
+    /** Accessible name of the answer tiles. */
+    choiceLabel: string;
+    inputType?: 'text' | 'number';
+    /** Language of the typed answer. */
+    inputLang?: string;
+    noKeys?: boolean;
+    /** Arithmetic: the task left of a number box. */
+    before?: TemplateResult;
+    /** A picture left of the field. */
+    media?: TemplateResult;
+    /** Karteikarte: fetches the answer. */
+    reveal?: FlashcardRevealer;
+}
+/**
+ * The answer part every question shares: the tiles for a multiple-choice question, the field otherwise. An unknown format
+ * shows nothing, like octolearn.
+ */
+export declare function answerSection(options: AnswerSectionOptions): TemplateResult | typeof nothing;
+/** "en" → "Englisch" (in German texts), via the browser's language names; unknown codes stay as they are. */
+export declare function languageName(code: string | null | undefined, lang: TrainingLanguage): string | undefined;
+/**
+ * What the card around a question shows: the format label ("Diktat", "Wähle die richtige Antwort") and, for vocabulary,
+ * the direction as chip ("Deutsch → Englisch").
+ */
+export declare function describeQuestion(content: FrontendContent, language?: string, overrides?: Partial<TrainingStrings>): {
+    label: string;
+    chip?: string;
+};
+/** What the card around a round of "Paare finden" shows: the label and the folder as chip. */
+export declare function describeMatchingRound(round: MatchingRound, language?: string, overrides?: Partial<TrainingStrings>): {
+    label: string;
+    chip?: string;
+};
+/** "Wie heißt das auf Englisch?" when the target language is known, else octolearn's "Übersetze folgendes Wort:". */
+export declare function vocabularyPrompt(content: FrontendContent, lang: TrainingLanguage, t: TrainingStrings): string;

package/dist/types/elements/question.d.ts

@@ -0,0 +1,37 @@
+import { type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { FrontendContent } from '../content';
+import type { FlashcardRevealer } from './flashcard';
+/**
+ * `<octolearn-question>`: shows any question the API sends, picking the element by its answer format first, then by its
+ * learning mode, like octolearn's training page. The attributes of the specific elements (`settings`, `no-autospeak`,
+ * `no-autofocus`) are passed on.
+ *
+ * @fires octolearn-answer - `{ answer }`
+ * @fires octolearn-speak - see octolearn-dictation-question
+ * @fires octolearn-stop - see octolearn-dictation-question
+ * @fires octolearn-settings - see octolearn-dictation-question
+ */
+export declare class OctolearnQuestion extends OctolearnElement {
+    content?: FrontendContent;
+    settings: boolean;
+    noAutospeak: boolean;
+    noAutofocus: boolean;
+    /** Don't let the answer tiles take the number keys 1–9 (for a game that uses them itself). */
+    noKeys: boolean;
+    /** Fetches the answer of a Karteikarte (octolearn's web app), e.g. `content => session.revealFlashcard(content)`. */
+    revealFlashcard?: FlashcardRevealer;
+    /** The element showing the current question, if any. */
+    get questionElement(): HTMLElement | null;
+    /** Puts the focus on the answer of the current question. */
+    focusAnswer(): void;
+    /** For a dictation: puts the focus back on "Einstellungen" (after the page's voice settings close). */
+    focusSettings(): void;
+    render(): TemplateResult;
+    private renderQuestion;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-question': OctolearnQuestion;
+    }
+}

package/dist/types/elements/text-answer.d.ts

@@ -0,0 +1,50 @@
+import { type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+/**
+ * `<octolearn-text-answer>`: design D's typed answer. The big field, below it "Weiß ich nicht" and, on the right,
+ * "Enter drücken oder" + "Fertig". Enter (also a phone keyboard's Go key) sends; an empty answer is never sent and
+ * "Fertig" stays disabled until something is typed. "Weiß ich nicht" sends "?" with `dontKnow: true`, which the server
+ * grades wrong and answers with the solution. The field empties after sending.
+ *
+ * `variant="box"` is the arithmetic look: a square box for the number, with whatever is in the `before` slot (the task,
+ * "7 · 8 =") on its left.
+ *
+ * `variant="media"` puts whatever is in the `media` slot (a picture) left of the field, the buttons below both.
+ *
+ * With `hint` (a Wortfragment, OC-126: "S____e") the known letters stand big above the field, each missing one a dashed
+ * box (design D's Lückenwort look); screen readers hear "Hinweis: 6 Zeichen, beginnt mit „S“, endet mit „e“.".
+ *
+ * @slot before - only with variant="box": shown left of the box
+ * @slot media - only with variant="media": shown left of the field
+ * @fires octolearn-answer - `{ answer, dontKnow? }`
+ */
+export declare class OctolearnTextAnswer extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    type: 'text' | 'number';
+    /** Accessible name of the field (visually hidden unless `visible-label`). */
+    label: string;
+    /** Show the label above the field (D: "Auf Englisch", "Schreib das Wort"). */
+    visibleLabel: boolean;
+    placeholder: string;
+    /** Language of what is typed, e.g. "en" for a vocabulary answer (spell checkers and screen readers use it). */
+    inputLang?: string;
+    variant: 'field' | 'box' | 'media';
+    /** Hide "Weiß ich nicht". */
+    noDontKnow: boolean;
+    value: string;
+    /** Wortfragment: first and last letter, "_" for each letter between. */
+    hint?: string | null;
+    private input?;
+    /** Puts the cursor into the field. */
+    focus(options?: FocusOptions): void;
+    render(): TemplateResult;
+    private renderHint;
+    private onInput;
+    private onSubmit;
+    private onDontKnow;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-text-answer': OctolearnTextAnswer;
+    }
+}

package/dist/types/elements/tile-answer.d.ts

@@ -0,0 +1,43 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+/**
+ * `<octolearn-tile-answer>`: design D's "Buchstabensalat" (OC-121…124): the shuffled letters or words of the answer, tapped
+ * into the right order. Above, the answer slots (the next one highlighted, the free ones dashed); below a dashed line the
+ * tiles, each keeping its place when used. Tapping a placed tile takes it out again; "Nochmal von vorn" empties the slots;
+ * "Fertig" sends once every tile is placed. Every tile is a button (touch, mouse, keyboard, no dragging, WCAG 2.5.7);
+ * with the focus inside, typing a letter places the next fitting tile, Backspace takes the last one out, Enter sends.
+ *
+ * The answer is the tiles joined with `separator`: "" for letters, " " for words. The server checks it like a typed
+ * answer.
+ *
+ * @fires octolearn-answer - `{ answer }`
+ */
+export declare class OctolearnTileAnswer extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The shuffled tiles from the server (`content.tiles`). */
+    tiles: readonly string[] | null;
+    /** "" joins letters into a word, " " joins words into a sentence. */
+    separator: string;
+    private bank;
+    private placed;
+    private firstFreeTile?;
+    private get words();
+    get complete(): boolean;
+    /** The answer so far. */
+    get answer(): string;
+    /** Puts the focus on the first free tile, so typing works at once. */
+    focus(options?: FocusOptions): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+    private place;
+    private takeOut;
+    private reset;
+    private submit;
+    /** A character places the first free tile that starts with it (the same case first), Backspace undoes, Enter sends. */
+    private onKeydown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-tile-answer': OctolearnTileAnswer;
+    }
+}

package/dist/types/elements/today-stats.d.ts

@@ -0,0 +1,17 @@
+import { type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+/**
+ * `<octolearn-today-stats>`: today's right and wrong answers in design D: a small paper panel with the uppercase label
+ * and two counters, green with a check and red with a cross. Side by side when there is room, else stacked.
+ */
+export declare class OctolearnTodayStats extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    correct: number;
+    wrong: number;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-today-stats': OctolearnTodayStats;
+    }
+}

package/dist/types/elements/trainer-overlay.d.ts

@@ -0,0 +1,45 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { TrainingSession } from '../session/training-session';
+/**
+ * `<octolearn-trainer-overlay>`: design D's question over a paused game. While `open`, a modal dialog covers the page:
+ * the game stays visible behind a dark, blurred layer with the note "Spiel pausiert", the card sits in the middle. The
+ * page behind is inert, so the keyboard and screen readers stay in the dialog; when it closes, the focus goes back to
+ * where it was.
+ *
+ * With `.session` the overlay shows an `<octolearn-trainer>` driven by that session; without one, it shows its children
+ * (e.g. your own `<octolearn-card>`). Escape fires `octolearn-close` and leaves the overlay open: the game decides
+ * whether the learner may skip the question (set `open = false`).
+ *
+ * @slot - the content when no session is set
+ * @fires octolearn-close - the learner pressed Escape (or the system's back gesture)
+ * @cssprop --octolearn-overlay-width - width of the card (default 760px)
+ */
+export declare class OctolearnTrainerOverlay extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    open: boolean;
+    /** The session that drives the trainer inside. */
+    session?: TrainingSession;
+    /** The note over the game (default "Spiel pausiert"); `status=""` hides it. */
+    status?: string;
+    /** Passed to the trainer: don't read a new dictation aloud by itself. */
+    noAutospeak: boolean;
+    /** Passed to the trainer: don't take the number and arrow keys. */
+    noKeys: boolean;
+    private dialog?;
+    /** Opens the overlay (same as `open = true`). */
+    show(): void;
+    /** Closes the overlay (same as `open = false`). */
+    close(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+    private onKeydown;
+    private onCancel;
+    /** The browser closed the dialog anyway (it may, after repeated close requests): follow it. */
+    private onClose;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-trainer-overlay': OctolearnTrainerOverlay;
+    }
+}

package/dist/types/elements/trainer-panel.d.ts

@@ -0,0 +1,46 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { TrainingSession } from '../session/training-session';
+/**
+ * `<octolearn-trainer-panel>`: design D's side panel next to a game that keeps running. On top the octolearn logo, the
+ * label "Lernfrage" and a star counter; below the question card; then the game's reward (slot `reward`, e.g. "Richtig
+ * = 1 Extraleben"); at the bottom Inkie saying how many questions are left in the round.
+ *
+ * With `.session` everything follows that session (card, stars = today's right answers, questions left); without one
+ * the panel shows its children in place of the card, and `stars` / `message` say what to show. The panel is 400 px
+ * wide by default; size it like any block element.
+ *
+ * @slot - the card when no session is set
+ * @slot reward - what the game gives for a right answer
+ */
+export declare class OctolearnTrainerPanel extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The session that drives the panel. */
+    session?: TrainingSession;
+    /** The star counter; default: the session's right answers today. */
+    stars?: number;
+    /** Inkie's line; default: the questions left in the session's round ("Noch 2 Fragen in dieser Runde!"). */
+    message?: string;
+    /** Passed to the trainer: don't read a new dictation aloud by itself. */
+    noAutospeak: boolean;
+    /** Passed to the trainer: don't take the number and arrow keys (a running game usually needs them). */
+    noKeys: boolean;
+    /** Passed to the trainer: don't move the cursor into the answer field (the game keeps the keyboard). */
+    noAutofocus: boolean;
+    private hasReward;
+    private observed?;
+    private readonly onChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+    /** "Noch 2 Fragen in dieser Runde!" from the session's stars; nothing while no question is asked. */
+    private roundMessage;
+    private onRewardChange;
+    private observe;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-trainer-panel': OctolearnTrainerPanel;
+    }
+}

package/dist/types/elements/trainer.d.ts

@@ -0,0 +1,57 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { TrainingSession } from '../session/training-session';
+/**
+ * `<octolearn-trainer>`: a whole training in design D's card, driven by a TrainingSession. It shows what the session is
+ * at: the question (any format), the feedback after an answer with "Weiter", a round of "Paare finden", or a message
+ * while loading, after an error ("Erneut versuchen"), when everything due is done ("Freiwillig weiterüben") and when
+ * nothing is left. Answers, "Weiter" and the pairs go to the session; the stars follow its round.
+ *
+ * Create the session with `holdForFeedback: true` to see the feedback in the card. Don't call session.answer() yourself
+ * as well: the trainer does. The question's events (octolearn-answer, octolearn-speak, …) still bubble out.
+ *
+ * ```js
+ * const session = new TrainingSession(transport, { holdForFeedback: true });
+ * trainer.session = session;
+ * await session.start();
+ * ```
+ */
+export declare class OctolearnTrainer extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The session that drives the trainer. */
+    session?: TrainingSession;
+    /** Don't read a new dictation aloud by itself. */
+    noAutospeak: boolean;
+    /** Don't move the cursor into the answer field of a new question. */
+    noAutofocus: boolean;
+    /** Don't take the number and arrow keys (for a game that needs them itself). */
+    noKeys: boolean;
+    /** Show "Einstellungen" in a dictation (fires octolearn-settings). */
+    settings: boolean;
+    /** For the side panel: a card without header and Inkie, with a light shadow. */
+    compact: boolean;
+    /** A lighter shadow, for a trainer that sits on the page instead of over a game. */
+    flat: boolean;
+    private observed?;
+    private shownFeedback;
+    private readonly onChange;
+    private readonly reveal;
+    private readonly checkPair;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Puts the focus where the learner goes on: the answer, "Weiter" after an answer, or the first button. */
+    focusAnswer(): void;
+    /** For a dictation: puts the focus back on "Einstellungen" (after the page's voice settings close). */
+    focusSettings(): void;
+    protected updated(): void;
+    render(): TemplateResult | typeof nothing;
+    /** Loading, an error, everything due done, nothing left. */
+    private statusMessage;
+    private observe;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-trainer': OctolearnTrainer;
+    }
+}

package/dist/types/elements/true-false.d.ts

@@ -0,0 +1,37 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+/** What the server takes as the answer to a Richtig/Falsch question (OC-127). */
+export declare const TRUE_ANSWER = "true";
+export declare const FALSE_ANSWER = "false";
+/**
+ * `<octolearn-true-false>`: design D's "Stimmt das?" (OC-127). The server sends a statement, the question's answer or
+ * another answer of the folder; the learner says whether it fits. Which one it is, the client never knows. "Stimmt" sends
+ * "true", "Stimmt nicht" "false"; ← and → choose too (not while typing, not with `no-keys`). The buttons lock after the
+ * choice until a new statement arrives.
+ *
+ * @fires octolearn-answer - `{ answer: 'true' | 'false' }`
+ */
+export declare class OctolearnTrueFalse extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The answer to judge (`content.statement`); without one nothing is shown. */
+    statement?: string | null;
+    /** Language of the statement (the target language of a vocabulary). */
+    statementLang?: string;
+    /** Accessible name of the two buttons (default "Passt diese Antwort zur Frage?"). */
+    label?: string;
+    /** Don't react to ← and →. */
+    noKeys: boolean;
+    private chosen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private get choices();
+    render(): TemplateResult | typeof nothing;
+    private choose;
+    private readonly onKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-true-false': OctolearnTrueFalse;
+    }
+}

package/dist/types/events.d.ts

@@ -0,0 +1,53 @@
+import type { MatchingRoundItem } from './content';
+/** Fired by every element that takes an answer; bubbles out of shadow roots. */
+export interface AnswerEventDetail {
+    /** What the learner typed (trimmed) or chose. Correctness is decided by the server, never here. */
+    answer: string;
+    /** "Weiß ich nicht": `answer` is then "?", which the server grades wrong and answers with the solution. */
+    dontKnow?: boolean;
+}
+export type AnswerEvent = CustomEvent<AnswerEventDetail>;
+export declare const ANSWER_EVENT = "octolearn-answer";
+/** What "Weiß ich nicht" sends: never a real answer, so the server grades it wrong and returns the solution. */
+export declare const DONT_KNOW_ANSWER = "?";
+/** Fired before anything is read aloud; cancel it to speak with your own voice output. */
+export interface SpeakEventDetail {
+    /** The text to read aloud. */
+    text: string;
+    /**
+     * `auto`: a new dictation question arrived; `repeat`: the listen button; `slow`: "Langsam anhören"; `read`: the
+     * read-aloud button of a word, question or task.
+     */
+    reason: 'auto' | 'repeat' | 'slow' | 'read';
+    /** A speed for this request (0.7 for `slow`). */
+    rate?: number;
+    /** The language of the text, when it is not the page's (a vocabulary word). */
+    lang?: string;
+}
+export type SpeakEvent = CustomEvent<SpeakEventDetail>;
+/** Fired by `<octolearn-matching-round>` after the server checked a pair. */
+export interface PairCheckedDetail {
+    item: MatchingRoundItem;
+    /** The answer the learner paired the question with. */
+    answer: string;
+    correct: boolean;
+    /** After a wrong pair: the question's real answer. */
+    correctAnswer?: string | null;
+}
+interface OctolearnEventMap {
+    'octolearn-answer': AnswerEvent;
+    'octolearn-speak': SpeakEvent;
+    'octolearn-stop': CustomEvent<Record<string, never>>;
+    'octolearn-settings': CustomEvent<Record<string, never>>;
+    'octolearn-continue': CustomEvent<Record<string, never>>;
+    'octolearn-pair': CustomEvent<PairCheckedDetail>;
+    'octolearn-round-done': CustomEvent<Record<string, never>>;
+    'octolearn-close': CustomEvent<Record<string, never>>;
+}
+declare global {
+    interface HTMLElementEventMap extends OctolearnEventMap {
+    }
+    interface DocumentEventMap extends OctolearnEventMap {
+    }
+}
+export {};

package/dist/types/feedback-message.d.ts

@@ -0,0 +1,34 @@
+import type { QueryFormat } from './content';
+/** How a question of the round went (design D's stars). */
+export type QuestionResult = 'right' | 'wrong';
+export type FeedbackResult = 'correct' | 'wrong';
+/** Everything the feedback shows about one evaluated answer; `TrainingSession` builds it (AnswerOutcome.feedback). */
+export interface FeedbackMessage {
+    result: FeedbackResult;
+    /** What the learner answered. */
+    answer: string;
+    /** The solution, sent by the server after a wrong answer. */
+    correctAnswer?: string | null;
+    /** Accepted with a small typo. */
+    typo?: boolean;
+    /** Shown in brackets after "Richtig!" text instead of the typo note, e.g. the server's message. */
+    note?: string | null;
+    /** The learner pressed "Weiß ich nicht". */
+    dontKnow?: boolean;
+    /** The answer could not be sent or checked. */
+    unchecked?: boolean;
+    /** Learning points this answer earned (shown only after a right answer). */
+    points?: number;
+    /** Right answers in a row, this one included. */
+    streak?: number;
+    /** For a multiple-choice question: the options, shown again with the right one marked. */
+    options?: readonly string[] | null;
+    /** The question was a word (dictation, vocabulary): "das Wort kommt bald wieder", listen again. */
+    word?: boolean;
+    /** A dictation: the solution can be listened to again. */
+    listenable?: boolean;
+    /** How the question was answered; Richtig/Falsch and the Karteikarte show "Stimmt" / "Gewusst" instead of the token. */
+    queryFormat?: QueryFormat | null;
+    /** Toast only: how long the card stays, in ms. */
+    life?: number;
+}

package/dist/types/font-data.d.ts

@@ -0,0 +1,2 @@
+export declare const montserratLatinVariable: string;
+export declare const nothingYouCouldDoLatin400: string;

package/dist/types/fonts.d.ts

@@ -0,0 +1,9 @@
+/** Font family names of our own, so that a page's own "Montserrat" (other weights, other files) can't get mixed in. */
+export declare const FONT_FAMILY_BODY = "Octolearn Montserrat";
+export declare const FONT_FAMILY_HEADLINE = "Octolearn Headline";
+/**
+ * Adds the fonts to the document. Font faces declared inside a shadow root are ignored by browsers, so they have to be
+ * added to the document; the FontFace API needs no <style> element (and so no 'unsafe-inline' in a page's CSP). A page
+ * whose CSP forbids data: fonts keeps the fallback fonts (Montserrat if the page has it, else sans-serif).
+ */
+export declare function loadFonts(): Promise<void>;