u2ui 1.5.13 → 1.5.15

package/el/ico/ico.js

@@ -131,13 +131,11 @@ async function loadSvgString(url) {
         }
     }
 
-    const svg = await loadCached(url);
-    // temporary cache svg
-    
     // external element
-    if (hash) { // todo, cache the svgDoc?
-        const parser = new DOMParser();
-        const svgDoc = parser.parseFromString(svg, "image/svg+xml");
+    if (hash) {
+        url.hash = '';
+        const svgDoc = await (cachedDocuments[url] ??= loadCached(url).then(svg =>
+            new DOMParser().parseFromString(svg, "image/svg+xml")));
         const element = svgDoc.getElementById(hash);
         if (element) {
             return element.outerHTML;
@@ -147,10 +145,11 @@ async function loadSvgString(url) {
     }
 
     // external document
-    return svg;
+    return loadCached(url);
 }
 
 const cachedRequests = {};
+const cachedDocuments = {};
 
 async function loadCached(url) {
     return cachedRequests[url] ??= fetch(url, {cache: "force-cache"}).then(res => {

package/js/rte/PLAN.md

@@ -79,17 +79,53 @@ without a single tag it is text, escaped and joined by breaks, which is all the
 structure such a paste has. A `text/plain` paste with no html flavor beside it
 stays native as before.
 
+A host is read once per burst of work. `Surface.config` kept resolving a computed
+style on every access, and an availability check asks for it several times — a
+toolbar refresh went down that path 65 times. It now holds its reading until
+`invalidate()`, which `refresh()` calls before anything looks: 65 style
+resolutions became 2. `Edit.model` and `Commands.model` stopped asking the
+platform a second question they already had the answer to, which is most of that
+difference. Measured in Firefox 155 on the playground: `unstyle` availability
+600 → 200 µs, the ordinary marks 150 → 100 µs. What is left in a refresh is a
+forced layout, which the placement of a toolbar that follows the caret cannot
+avoid, and one `Edit` per availability check — 21 controls, two questions each.
+Sharing one edit across a refresh is the next thing to try.
+
+What a field may carry is now declared where every other host decision is
+declared: `--u2-rte-elements`, `--u2-rte-attributes` and `--u2-rte-protocols`,
+one grammar for the element-specific ones — a bare list for every element,
+`name(…)` for one, and the attribute named inside for protocols. Each axis
+declared *is* that axis, so a site may name what the shipped default does not.
+That is not a hole: a client sanitizer protects the editing session — markup
+inserted into the author's own logged-in page — while what may be stored is
+decided where content is saved and served, and CSS is no less the application's
+than JavaScript is.
+
+Sanitizing now speaks the web Sanitizer API's vocabulary throughout — `elements`,
+`removeElements`, `replaceWithChildrenElements`, `attributes`, `comments`,
+`dataAttributes` — so browser, editor, and an application's own filter name the
+same things alike. `protocols` is the one addition, because `clean()` also runs on
+nodes a browser inserted, where no sink checked them. A configuration may not
+carry `elements` and `removeElements` at once: the api rejects that pair and
+`setHTML()` yields nothing, so an allowlist expresses removal by leaving out.
+
+Inline `style` is presentation, not execution, and moved to the stage that owns
+presentation. The security policy now allows the attribute — it runs no script —
+while Unstyle keeps removing it from imported content, which is where unwanted
+foreign styling actually comes from. Content a field owns therefore keeps what an
+editor set on it, and an application that must not carry style at all narrows the
+policy's `attributes`.
+
 Keeping the content of an unlisted element is right for almost all of them, and
 wrong for the few a browser never renders the children of: unwrapping a `<style>`
 from a word processor left its stylesheet standing in the text. `SanitizePolicy`
-now carries a `drop` list — `base head link meta noscript script style template
+now carries a `removeElements` list — `base head link meta noscript script style template
 title` — that `narrow()` removes with their content, while everything else keeps
 dissolving into what the author wrote.
 
 A native paste now meets the attribute policy. Nothing is parsed there — the
 browser inserts its own payload — so it was the one import path without an
-allowlist, and layout ids, tracking attributes and inline styles came straight
-through. The pipeline applies `SanitizePolicy.clean()` to the nodes that
+allowlist, and layout ids and tracking attributes came straight through. The pipeline applies `SanitizePolicy.clean()` to the nodes that
 arrived, before presentation cleanup and structural repair, so an id removed in
 the first stage is what lets the third dissolve the wrapper carrying it.
 `--u2-rte-import-sanitize: none` opts a host out.
@@ -458,6 +494,32 @@ absent, work for current and future surfaces, and release everything through
    editor and keyboard resizing remain open, as does a hook for regenerating the
    file server-side rather than letting the browser stretch it.
 
+6. **Assistant — implemented.** `aiView({request})` prompts over the whole field
+   and shows the answer beside the original, editable, with an optional third
+   pane for a diff the application supplies. Applying goes through `Source`, so
+   an answer is external input like every other and meets the sanitizer instead
+   of reaching `innerHTML`. The extension carries no provider, key, or prompt
+   text: `request({prompt, html})` is mandatory, which is why `rte.js` does not
+   install it and `ai.js` exports only the factory. Each request remembers the
+   run it belongs to, so an answer arriving after the next prompt or after the
+   dialog closed is dropped rather than filling a stale pane. The request also
+   carries the surface itself: what it allows — elements, content classes, default
+   block — because everything an answer uses beyond that is cleaned away when it
+   is applied, and a model that is not told promises what it then loses; and the
+   element behind it, because what else a field means is the application's to
+   read, not this module's to enumerate. Streaming a
+   growing answer, working on a selection rather than the whole field, and
+   keeping the prompt history remain open.
+
+7. **Declared block styles — implemented.** A block style was always a selector, a
+   tag and optional write/clear hooks, so `--u2-rte-blocks: Absatz(p),
+   Lead(p.lead), Notiz(p[data-note])` needed no new concept: the label names it,
+   the tag is what gets created, and every condition after it is written when the
+   style is applied and cleared when another replaces it. Recognition now takes
+   the most specific match instead of the last declared, so a plain tag and its
+   variants live side by side without `:not()` chains. What a control offers is a
+   host question again; which module registers it stays the application's.
+
 All roaming and contextual extension UI must be created in the core's
 `Document` or `ShadowRoot`, use the browser top layer through Popover or Dialog
 where appropriate, and share one placement policy.

package/js/rte/README.md

@@ -91,6 +91,7 @@ tests, and documentation.
 
 ```text
 rte/
+├── ai.js                  Optional assistant module factory (no default install)
 ├── blocks.js              Optional block-style module and public entry
 ├── classes.js             Optional content-class control module and entry
 ├── breaks.js              Optional visible-line-break extension and entry

package/js/rte/ai.js

@@ -0,0 +1,4 @@
+export {aiView} from './src/client/ai.js';
+
+// No `editor.add()` here: an assistant needs a request function, and which model answers is the
+// application's choice — `editor.add(aiView({request}))` is the whole setup.

package/js/rte/playground/index.html

@@ -179,6 +179,14 @@
     details { font-size: .9em; }
     details > summary { cursor: pointer; }
     .wide { grid-column: 1 / -1; }
+  /* what the declared block styles write: a class on one, an attribute on the other */
+  .Lead { font-size: 1.15em; font-weight: 600 }
+  [data-note] { border-inline-start: 3px solid; opacity: .75; padding-inline-start: .6em }
+  .Red { color: #c00 }
+  .Green { color: #0a0 }
+  .Left { text-align: left }
+  .Center { text-align: center }
+  .Right { text-align: right }
   </style>
 </head>
 <body>
@@ -283,7 +291,7 @@
     <section class="panel wide">
       <h2>One-import editor prototype</h2>
       <div class="prototype">
-      <div id="editor-prototype" contenteditable style="--u2-rte:true; --u2-rte-toolbar:undo redo block style bold italic underline strike code link bullets numbers outdent indent rule insertTable imageOriginal unstyle breaks source; --u2-rte-classes:lead, caption, brandColor; --u2-rte-show-breaks:true">
+      <div id="editor-prototype" contenteditable style="--u2-rte:true; --u2-rte-toolbar:undo redo block style bold italic underline strike code link bullets numbers outdent indent rule insertTable imageOriginal unstyle breaks source ai; --u2-rte-blocks:Absatz(p), Lead(p.Lead), Notiz(p[data-note]), Zitat(blockquote), Titel(h1), Untertitel(h2); --u2-rte-classes:lead, caption, brandColor, Red, Green, Left, Center, Right, Lead; --u2-rte-class-groups:color(Red Green), align(Left Center Right); --u2-rte-show-breaks:true">
         <p>Select text to format it, choose its block style, or press Enter inside this list:</p>
         <ul><li>List item</li><li>Put the caret here and press the indent control</li></ul>
         <p>Turn these paragraphs into a list, then lift them out again.</p>
@@ -319,7 +327,8 @@
         Input types without a command run cleanup policies only; they do not
         imitate the browser's native DOM mutation, so edit or apply HTML first.
         The prototype toolbar lists every ready control, so the order in
-        <code>--u2-rte-toolbar</code> is the order shown. Undo and redo also
+        <code>--u2-rte-toolbar</code> is the order shown — the list decides both which
+        controls appear and where. Undo and redo also
         work from Ctrl/Command+Z and +Y; the readout under the surface reports
         how many entries the history holds and where it stands, which makes the
         grouping visible: continuous typing coalesces, while each command,
@@ -351,11 +360,14 @@
         structure itself — lists, tables, quotes and headings all reduce to
         plain blocks. Every control's key works whether or not it is listed in
         <code>--u2-rte-toolbar</code>; hover a control to see its shortcut.
-        The style list offers exactly the names in
-        <code>--u2-rte-classes</code>. That one declaration is also what the
-        sanitizer keeps from pasted HTML and what remove-format leaves alone, so
-        a class the host knows is never offered without being allowed, and never
-        cleaned away as foreign.
+        <code>--u2-rte-classes</code> says which classes may exist: it is what the
+        sanitizer keeps from pasted HTML and what remove-format leaves alone.
+        What the style menu <em>offers</em> is
+        <code>--u2-rte-class-groups</code> — <code>color(Red Green)</code> is one
+        either-or set, and a field carries one class from each set at a time.
+        Block styles are declared the same way in <code>--u2-rte-blocks</code>:
+        <code>Lead(p.Lead)</code> creates a paragraph and writes the class with
+        it, <code>Notiz(p[data-note])</code> an attribute instead.
         Bold recognizes both <code>&lt;strong&gt;</code> and <code>&lt;b&gt;</code>,
         creates canonical <code>&lt;strong&gt;</code>, and unwraps either form on
         removal. The class-mark buttons reuse a fully selected inline element;
@@ -375,6 +387,7 @@
     import '../breaks.js';
     import '../unstyle.js';
     import {externalInputs, NativeSanitizer} from '../rte.js';
+    import {aiView} from '../ai.js';
     import {rangeRect} from '../src/browser/range-rect.js';
     import {Commands} from '../src/command/commands.js';
     import {deleteBackward, deleteForward} from '../src/command/delete.js';
@@ -406,6 +419,28 @@
         conventionEditor.add(externalInputs({sanitizer: new NativeSanitizer()}));
     }
 
+    // The assistant has no provider of its own, so the playground answers itself: the stub marks
+    // every word the prompt names and reports what it was asked, which is enough to see the dialog,
+    // the editable answer, the diff pane and what applying writes back.
+    //
+    // Comparing two html strings is a library question, so the diff is the application's to choose
+    // and is fetched on first use — a pane nobody opens costs nothing.
+    let htmlDiff = null;
+    globalThis.__client = conventionEditor; // measuring hook for the browser runner
+    conventionEditor.add(aiView({
+        prompts: ['Bold the keywords', 'Shorten', 'Continue'],
+        request: ({prompt, html}) => new Promise(resolve => setTimeout(() => resolve(
+            `<p><i>answered: ${prompt.replace(/[<&]/g, '')}</i></p>`
+            // Only the text between tags: bolding the whole string would edit attributes too.
+            + html.replace(/>([^<]+)</g, (all, text) => '>' + text.replace(/\b(\w{6,})\b/g, '<strong>$1</strong>') + '<'),
+        ), 400)),
+        diff: async (original, edited) => {
+            htmlDiff ??= import('https://cdn.jsdelivr.net/npm/htmldiff-js@1.0.5/+esm')
+                .then(module => module.default.default ?? module.default);
+            return (await htmlDiff).execute(original, edited);
+        },
+    }));
+
     const controls = {
       scenario: document.querySelector('#scenario'),
       level: document.querySelector('#level'),
@@ -809,13 +844,16 @@
         label.append(`--u2-rte-${name}`, select);
         properties.append(label);
       }
-      const classes = document.createElement('label');
-      const input = document.createElement('input');
-      input.type = 'text';
-      input.value = prototype.style.getPropertyValue('--u2-rte-classes').trim();
-      input.addEventListener('input', () => write('classes', input.value));
-      classes.append('--u2-rte-classes', input);
-      properties.append(classes);
+      // The text-valued host properties: what may exist, what the menus offer, and the block styles.
+      for (const name of ['classes', 'class-groups', 'blocks']) {
+        const label = document.createElement('label');
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = prototype.style.getPropertyValue(`--u2-rte-${name}`).trim();
+        input.addEventListener('input', () => write(name, input.value));
+        label.append(`--u2-rte-${name}`, input);
+        properties.append(label);
+      }
     }
 
     function writeToolbar() {

package/js/rte/src/client/README.md

@@ -22,6 +22,13 @@ when focus reaches it; the client then installs its standard command registry
 and input pipeline. A default roaming toolbar is allocated only when the first
 rich-text surface becomes active. `plaintext-only` hosts stay completely native.
 
+The optional `blocks.js` entry adds the block-style control. A host may name its
+own with `--u2-rte-blocks: Absatz(p), Lead(p.lead), Notiz(p[data-note])`:
+`declaredStyles()` turns each selector into a style whose tag is created and
+whose conditions are written and cleared with it, so a block class needs no code.
+Recognition takes the most specific match, which is why a plain tag and its
+variants can be declared side by side.
+
 The optional `classes.js` entry adds a content-class control. Its choices come
 from the host's `--u2-rte-classes`, so its toolbar select is filled per surface
 rather than at registration: a module control may declare `options` as a
@@ -29,6 +36,21 @@ function of the surface, and the client refills that select before the toolbar
 is shown. The same declaration is what the sanitizer keeps and what
 presentation cleanup leaves alone.
 
+One set of classes is one mark and therefore one either-or choice. A field that
+combines axes — a colour *and* an alignment — names them in
+`--u2-rte-class-groups: color(Red Green), align(Left Center Right)`, and each set
+becomes a section of the same menu: exclusive in itself, free of the others.
+
+The control is a menu rather than a select for that reason: a select carries one
+value, and the whole point is carrying one from each set. It is also why the
+sections can come from CSS at all — a toolbar builds its controls once, when a
+module is registered, so how many *controls* there are cannot depend on a host,
+while what one control *contains* is read per surface like every other choice.
+
+The names still have to be in `--u2-rte-classes`: what may exist and what is
+offered are separate questions, and a class foreign content may carry needs no
+control at all.
+
 The optional `images.js` entry frames a selected image, with handles on its
 trailing edges and its alt text in a field below it. Both come and go with the
 selection and neither takes the focus by appearing, so naming an image is one
@@ -94,8 +116,13 @@ arrow keys move through it, Enter takes the current entry, Escape closes the lis
 before it closes the form, and a pointer does the same. One question is in flight
 at a time, and a late answer to a word that has since changed is dropped.
 
-Contextual UI goes with the editing session and comes back with it. `follows()`
-owns that lifecycle for every module that draws one: selection, content, and the
+Contextual UI goes with the editing session and comes back with it, and it draws
+only while there is one. A selection is not a session: engines leave a selection
+inside an editable nobody focused — clicking beside one does that — and the core
+captures it before deciding that no session follows. Drawing on that capture
+would put a link form or a set of handles on a caret the keyboard cannot reach,
+which is what the toolbar already refuses. `follows()` owns that lifecycle for
+every module that draws one: selection, content, and the
 session's return, because coming back to the selection a module was already
 showing for is no selection change and would otherwise leave its handles or its
 form behind. A module that has more of its own to hear ends it with the same
@@ -169,7 +196,9 @@ Those defaults arrive as three ordinary modules — `history`, `marks`, and
 contract below and can be removed with `editor.delete('structure')`, so nothing
 about them is privileged. Every control they contribute is gated by
 `--u2-rte-toolbar`, so a host that lists only `bold` shows only Bold while the
-commands and their keyboard shortcuts stay available.
+commands and their keyboard shortcuts stay available. The list is also the order
+they appear in: what a toolbar looks like is the host's to say, and without a
+declaration the controls keep the order their modules were registered in.
 
 `add(module)` installs an optional extension into already registered and future
 rich-text surfaces. A module has one client-wide name and may provide a command
@@ -349,6 +378,39 @@ available through `[Symbol.dispose]()`; core disposal disposes the client. One
 core accepts only one convention client at a time, preventing duplicate input
 pipelines. Disposal releases that ownership so a new client can take over.
 
+### Optional assistant
+
+`aiView(options)` adds a prompt over the whole field, shown beside the original
+with the answer in an editable pane. Applying writes it back through the source
+path, so a model's output is external input like any other and meets the
+sanitizer. Which model answers is application policy, so `request` is mandatory
+and has no default:
+
+```js
+import {editor} from '../../rte.js';
+import {aiView} from '../../ai.js';
+
+editor.add(aiView({
+    request: ({prompt, html}) => ask(prompt, html),   // returns html
+    prompts: ['Shorten', 'Continue', 'Fix spelling'], // optional suggestions
+    diff: (original, edited) => mark(original, edited), // optional third pane
+}));
+```
+
+`request({prompt, html})` receives the field's serialized content and returns
+its replacement, as a promise or directly. `surface` comes along rather than a
+digest of it: `surface.config` says what the field allows — with `null` where
+nothing is restricted — because an answer using anything else is cleaned away on
+the way back in, and `surface.element` is where an application reads whatever
+else its own fields carry; a rejection is shown in the answer
+pane and leaves the field untouched. `prompts` fills a datalist beside the
+input. Without `diff` the dialog shows two panes — comparing two HTML strings is
+a library question, not an editor one, so none is pulled in. Answers that arrive
+after the next prompt, or after the dialog closed, are dropped.
+
+`rte.js` does not install it, and `ai.js` exports only the factory: an assistant
+without a configured request would be a button that cannot work.
+
 ## Invariants
 
 - Importing the convention client adds only core listeners. It scans no DOM,

package/js/rte/src/client/ai.js

@@ -0,0 +1,228 @@
+import {Source} from '../source/source.js';
+
+const STYLE = `
+#ai {
+    block-size: min(80vh, 50em);
+    border: 1px solid;
+    inline-size: min(95vw, 80em);
+    max-block-size: none;
+    max-inline-size: none;
+    overflow: hidden; /* only the text boxes scroll, never the dialog itself */
+    padding: 0;
+    pointer-events: auto;
+
+    & form {
+        block-size: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: .57em;
+        margin: 0;
+        padding: .57em;
+    }
+    & .prompt {
+        display: flex;
+        gap: .57em;
+
+        & input { flex: 1; min-inline-size: 0 }
+    }
+    & .panes {
+        display: flex;
+        flex: 1;
+        flex-wrap: wrap;
+        gap: .57em;
+        min-block-size: 0;
+        overflow: auto; /* wrapped panes stack: that column scrolls, the dialog stays put */
+    }
+    & .pane {
+        display: flex;
+        flex: 1 1 20em;
+        flex-direction: column;
+        min-block-size: 8em;
+
+        & > b { flex: 0 0 auto }
+        & > div { border: 1px solid; flex: 1; min-block-size: 0; overflow: auto; padding: .57em }
+    }
+    /* Added and removed read faster as colour than as underline and strike, and mixing into the
+       page's own background keeps them legible in a light and a dark chrome alike. */
+    & ins { background: color-mix(in srgb, green 30%, transparent); text-decoration: none }
+    & del { background: color-mix(in srgb, red 25%, transparent) }
+    & menu {
+        display: flex;
+        gap: .57em;
+        justify-content: flex-end;
+        margin: 0;
+        padding: 0;
+    }
+}
+`;
+
+// Optional assistant view: a prompt over the surface's content, the answer beside the original, and
+// an apply that writes it back through the source path — so an answer is external input like any
+// other and meets the sanitizer.
+//
+// What answers, in which language, at which cost is application policy, so `request` is required and
+// carries no default. `diff` is an enhancement: given one, the dialog shows a third pane comparing
+// the original with the answer, which is otherwise left out rather than pulled in.
+export function aiView({request, diff = null, prompts = [], label = 'Assistant', ...options} = {}) {
+    if (typeof request !== 'function') throw new TypeError('An assistant view requires a request function');
+    if (diff !== null && typeof diff !== 'function') throw new TypeError('An assistant diff must be a function');
+    if (!Array.isArray(prompts) || prompts.some(prompt => typeof prompt !== 'string')) {
+        throw new TypeError('Assistant prompts must be an array of strings');
+    }
+    if (typeof label !== 'string' || !label.trim()) throw new TypeError('An assistant label must be a non-empty string');
+    const suggestions = Object.freeze([...prompts]);
+    const editors = new WeakMap();
+    return Object.freeze({
+        name: 'ai',
+        setup({editor, root, chrome}) {
+            const state = {
+                chrome,
+                document: root.nodeType === Node.DOCUMENT_NODE ? root : root.ownerDocument,
+                options,
+                request,
+                diff,
+                suggestions,
+                label: label.trim(),
+                dialog: null,
+                pending: null,
+            };
+            editors.set(editor, state);
+            let connected = true;
+            return {dispose() {
+                if (!connected) return;
+                state.dialog?.remove();
+                editors.delete(editor);
+                connected = false;
+            }};
+        },
+        commands({editor, surface}) {
+            const state = editors.get(editor);
+            if (!state) throw new DOMException('The assistant extension is not set up', 'InvalidStateError');
+            return {ai: {
+                shortcut: 'ctrl+m',
+                // The dialog edits nothing by itself; applying runs as its own transaction.
+                transaction: false,
+                enabled: edit => !!edit.range,
+                run: () => show(state, surface),
+            }};
+        },
+        toolbar: Object.freeze([Object.freeze({command: 'ai', label, text: '✦', shortcut: 'ctrl+m'})]),
+    });
+}
+
+function show(state, surface) {
+    const view = new Source(surface, state.options);
+    const dialog = build(state);
+    const {html} = view.read();
+    const parts = state.parts;
+    parts.original.innerHTML = html;
+    parts.answer.innerHTML = '';
+    if (parts.diff) parts.diff.innerHTML = '';
+    parts.apply.disabled = true;
+    parts.prompt.value = '';
+    state.pending = {view, surface, html, run: 0};
+    dialog.showModal();
+    parts.prompt.focus();
+    return view;
+}
+
+
+// Every request carries the run it belongs to: an answer that arrives after the next prompt, or
+// after the dialog was closed, has nothing left to fill in.
+async function ask(state) {
+    const pending = state.pending;
+    const parts = state.parts;
+    if (!pending) return;
+    const run = ++pending.run;
+    const prompt = parts.prompt.value.trim();
+    if (!prompt) return;
+    parts.busy.disabled = true;
+    parts.apply.disabled = true;
+    try {
+        // The surface comes along, not a digest of it: what the field allows (`config`) decides what
+        // an answer may use, and what else it says about itself is the application's to read.
+        const answer = await state.request({prompt, html: pending.html, surface: pending.surface});
+        if (state.pending !== pending || pending.run !== run) return;
+        parts.answer.innerHTML = String(answer ?? '');
+        parts.apply.disabled = false;
+        await update(state, pending, run);
+    } catch (error) {
+        if (state.pending === pending && pending.run === run) parts.answer.textContent = String(error?.message ?? error);
+    } finally {
+        if (state.pending === pending && pending.run === run) parts.busy.disabled = false;
+    }
+}
+
+async function update(state, pending, run) {
+    if (!state.diff || !state.parts.diff) return;
+    const marked = await state.diff(pending.html, state.parts.answer.innerHTML);
+    if (state.pending === pending && pending.run === run) state.parts.diff.innerHTML = String(marked ?? '');
+}
+
+function build(state) {
+    if (state.dialog) return state.dialog;
+    const create = (tag, properties) => Object.assign(state.document.createElement(tag), properties);
+    const dialog = state.chrome.part('ai', STYLE, 'dialog');
+    dialog.setAttribute('aria-label', state.label);
+    const form = create('form', {method: 'dialog'});
+
+    const prompt = create('input', {name: 'prompt', autocomplete: 'off'});
+    prompt.setAttribute('aria-label', state.label);
+    const busy = create('fieldset', {className: 'prompt'});
+    busy.append(prompt, create('button', {type: 'button', textContent: 'Prompt', onclick: () => ask(state)}));
+    if (state.suggestions.length) {
+        const list = create('datalist', {id: 'ai-prompts'});
+        for (const value of state.suggestions) list.append(create('option', {value}));
+        prompt.setAttribute('list', list.id);
+        busy.append(list);
+    }
+    // Enter in the field asks rather than submitting the dialog, which would close it unanswered.
+    prompt.addEventListener('keydown', event => {
+        if (event.key !== 'Enter') return;
+        event.preventDefault();
+        ask(state);
+    });
+
+    const panes = create('div', {className: 'panes'});
+    const pane = name => {
+        const box = create('div', {className: 'pane'});
+        const body = create('div', {});
+        box.append(create('b', {textContent: name}), body);
+        panes.append(box);
+        return body;
+    };
+    const original = pane('Original');
+    const answer = pane('Answer');
+    answer.contentEditable = 'true';
+    const diff = state.diff ? pane('Changes') : null;
+    answer.addEventListener('input', () => {
+        const pending = state.pending;
+        if (pending) update(state, pending, pending.run);
+    });
+
+    const menu = state.document.createElement('menu');
+    const apply = create('button', {type: 'submit', value: 'apply', textContent: 'Apply'});
+    menu.append(create('button', {type: 'submit', value: 'cancel', textContent: 'Cancel'}), apply);
+
+    form.append(busy, panes, menu);
+    dialog.append(form);
+    dialog.addEventListener('close', () => finish(state, dialog.returnValue));
+    state.chrome.root.append(dialog);
+    state.dialog = dialog;
+    state.parts = {prompt, busy, original, answer, diff, apply};
+    return dialog;
+}
+
+function finish(state, result) {
+    const pending = state.pending;
+    state.pending = null;
+    if (!pending?.surface.connected) return;
+    // Focus returns before writing, so the surface owns the selection the transaction captures.
+    pending.surface.element.focus();
+    if (result !== 'apply') {
+        pending.surface.restore();
+        return;
+    }
+    pending.view.write(state.parts.answer.innerHTML);
+}

package/js/rte/src/client/blocks.js

@@ -7,6 +7,31 @@ export const defaultBlockStyles = Object.freeze([
     Object.freeze({name: 'h3', label: 'Heading 3', selector: 'h3', tag: 'h3'}),
 ]);
 
+// `Absatz(p), Lead(p.lead), Notiz(p[aria-label=note])` — the label names it, the selector says what
+// it is. What follows the tag is written when the style is applied and taken off when another one
+// replaces it, so a class or an attribute needs no code of its own.
+export function declaredStyles(declared) {
+    return Object.entries(declared).map(([label, selector]) => {
+        const [tag] = selector.match(/^[a-z][a-z\d-]*/) ?? [];
+        const classes = [...selector.matchAll(/\.([_a-zA-Z][\w-]*)/g)].map(match => match[1]);
+        const attributes = [...selector.matchAll(/\[([a-z][\w-]*)(?:=([^\]\s]+))?\]/g)]
+            .map(match => [match[1], (match[2] ?? '').replace(/^["']|["']$/g, '')]);
+        return {
+            name: selector, label, selector, tag,
+            write: element => {
+                if (classes.length) element.classList.add(...classes);
+                for (const [name, value] of attributes) element.setAttribute(name, value);
+            },
+            clear: element => {
+                for (const [name] of attributes) element.removeAttribute(name);
+                if (!classes.length) return;
+                element.classList.remove(...classes);
+                if (!element.classList.length) element.removeAttribute('class'); // rather than an empty one
+            },
+        };
+    });
+}
+
 export function blockStyles(styles = defaultBlockStyles, {
     name = 'blocks',
     control = 'block',
@@ -16,21 +41,24 @@ export function blockStyles(styles = defaultBlockStyles, {
     for (const [property, value] of Object.entries({name, control, command, label})) {
         if (typeof value !== 'string' || !value.trim()) throw new TypeError(`Block module ${property} must be a non-empty string`);
     }
-    const policy = new BlockStyles(styles);
-    const commands = Object.freeze({[command]: policy.command()});
-    const options = Object.freeze(policy.styles.map(style => Object.freeze({
-        value: style.name,
-        label: style.label,
-    })));
+    // A host may name its own styles; hosts that name the same ones share a policy, because reading
+    // a declaration is cheap and building the policy behind it is not.
+    const policies = new Map();
+    const resolve = surface => {
+        const declared = surface.config.blocks;
+        const key = declared ? JSON.stringify(declared) : '';
+        if (!policies.has(key)) policies.set(key, new BlockStyles(declared ? declaredStyles(declared) : styles));
+        return policies.get(key);
+    };
     return Object.freeze({
         name: name.trim(),
-        commands: () => commands,
+        commands: ({surface}) => ({[command]: resolve(surface).command()}),
         toolbar: Object.freeze([Object.freeze({
             type: 'select',
             name: control.trim(),
             command: command.trim(),
             label,
-            options,
+            options: surface => resolve(surface).styles.map(style => ({value: style.name, label: style.label})),
         })]),
     });
 }