npm - u2ui - Versions diffs - 1.5.2 → 1.5.4 - Mend

u2ui 1.5.2 → 1.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/el/ico/ico.js +5 -5
package/el/rte/README.md +53 -13
package/el/rte/manifest.json +19 -4
package/el/rte/rte.css +31 -6
package/el/rte/rte.js +174 -44
package/el/rte0/README.md +37 -0
package/el/rte0/manifest.json +33 -0
package/el/rte0/rte0.css +9 -0
package/el/rte0/rte0.js +56 -0
package/el/system/styler.js +2 -0
package/el/tooltip/tooltip.css +2 -2
package/js/Placer/Placer.js +2 -1
package/js/rte/AGENTS.md +142 -0
package/js/rte/PLAN.md +488 -0
package/js/rte/README.md +319 -25
package/js/rte/blocks.js +7 -0
package/js/rte/breaks.js +6 -0
package/js/rte/classes.js +7 -0
package/js/rte/docs/usage.md +845 -0
package/js/rte/images.js +7 -0
package/js/rte/link.js +8 -0
package/js/rte/playground/README.md +95 -0
package/js/rte/playground/hosts.html +518 -0
package/js/rte/playground/index.html +824 -0
package/js/rte/rte.js +56 -5
package/js/rte/source.js +12 -0
package/js/rte/src/browser/README.md +40 -0
package/js/rte/src/browser/range-rect.js +82 -0
package/js/rte/src/client/README.md +378 -0
package/js/rte/src/client/blocks.js +38 -0
package/js/rte/src/client/breaks.js +212 -0
package/js/rte/src/client/classes.js +48 -0
package/js/rte/src/client/editor.js +461 -0
package/js/rte/src/client/external-input.js +47 -0
package/js/rte/src/client/history.js +13 -0
package/js/rte/src/client/images.js +275 -0
package/js/rte/src/client/link.js +572 -0
package/js/rte/src/client/marks.js +25 -0
package/js/rte/src/client/source.js +182 -0
package/js/rte/src/client/structure.js +27 -0
package/js/rte/src/client/tables.js +162 -0
package/js/rte/src/client/unstyle.js +32 -0
package/js/rte/src/command/README.md +517 -0
package/js/rte/src/command/block-boundary.js +43 -0
package/js/rte/src/command/block-style.js +120 -0
package/js/rte/src/command/commands.js +158 -0
package/js/rte/src/command/delete.js +112 -0
package/js/rte/src/command/edit.js +72 -0
package/js/rte/src/command/element.js +45 -0
package/js/rte/src/command/enter.js +175 -0
package/js/rte/src/command/fragment.js +76 -0
package/js/rte/src/command/insert.js +52 -0
package/js/rte/src/command/list.js +284 -0
package/js/rte/src/command/mark.js +583 -0
package/js/rte/src/command/pending-marks.js +216 -0
package/js/rte/src/command/table.js +207 -0
package/js/rte/src/command/unstyle.js +248 -0
package/js/rte/src/config/README.md +96 -0
package/js/rte/src/config/config.js +127 -0
package/js/rte/src/core/README.md +41 -0
package/js/rte/src/core/core.js +156 -0
package/js/rte/src/history/README.md +83 -0
package/js/rte/src/history/history.js +283 -0
package/js/rte/src/input/README.md +155 -0
package/js/rte/src/input/external-input.js +130 -0
package/js/rte/src/input/input-pipeline.js +414 -0
package/js/rte/src/mark/README.md +219 -0
package/js/rte/src/mark/dom-adapter.js +100 -0
package/js/rte/src/mark/mark.js +133 -0
package/js/rte/src/mark/standard.js +76 -0
package/js/rte/src/model/README.md +71 -0
package/js/rte/src/model/content-model.js +213 -0
package/js/rte/src/model/html/README.md +51 -0
package/js/rte/src/model/html/html-model.js +90 -0
package/js/rte/src/normalize/execute/README.md +33 -0
package/js/rte/src/normalize/execute/repair-executor.js +129 -0
package/js/rte/src/normalize/normalizer/README.md +48 -0
package/js/rte/src/normalize/normalizer/normalizer.js +141 -0
package/js/rte/src/normalize/repair/README.md +70 -0
package/js/rte/src/normalize/repair/repair-planner.js +208 -0
package/js/rte/src/sanitize/README.md +105 -0
package/js/rte/src/sanitize/native.js +43 -0
package/js/rte/src/sanitize/policy.js +202 -0
package/js/rte/src/selection/README.md +39 -0
package/js/rte/src/selection/map/README.md +53 -0
package/js/rte/src/selection/map/point-map.js +307 -0
package/js/rte/src/selection/ownership/README.md +32 -0
package/js/rte/src/selection/ownership/ownership.js +42 -0
package/js/rte/src/selection/point/README.md +34 -0
package/js/rte/src/selection/point/point.js +83 -0
package/js/rte/src/selection/range/README.md +38 -0
package/js/rte/src/selection/range/edit-range.js +223 -0
package/js/rte/src/selection/snapshot.js +64 -0
package/js/rte/src/source/README.md +64 -0
package/js/rte/src/source/source.js +193 -0
package/js/rte/src/surface/README.md +36 -0
package/js/rte/src/surface/content.js +16 -0
package/js/rte/src/surface/surface.js +87 -0
package/js/rte/src/transaction/README.md +35 -0
package/js/rte/src/transaction/transaction.js +56 -0
package/js/rte/src/ui/README.md +255 -0
package/js/rte/src/ui/chrome.js +214 -0
package/js/rte/src/ui/handles.js +179 -0
package/js/rte/src/ui/place.js +25 -0
package/js/rte/src/ui/toolbar.js +283 -0
package/js/rte/src/unstyle/README.md +103 -0
package/js/rte/src/unstyle/unstyle.js +140 -0
package/js/rte/tables.js +7 -0
package/js/rte/unstyle.js +8 -0
package/js/rte0/README.md +37 -0
package/js/rte0/rte.js +7 -0
package/js/{rte → rte0}/src/behavior.js +0 -1
package/js/{rte → rte0}/src/events.js +0 -1
package/js/{rte → rte0}/src/range.js +0 -2
package/js/{rte → rte0}/src/ui.items.js +0 -2
package/js/{rte → rte0}/src/ui.js +0 -1
package/package.json +1 -1
package/u2/Element.js +16 -4
package/u2/enhance.js +2 -1
package/u2/plan-scoped-refactoring.md +133 -304
package/u2/projects.json +18 -2
package/u2/tools/update.repos.json.js +1 -1
package/u2/utils.js +0 -16
package/el/qrcode/package.json +0 -22
/package/js/{rte → rte0}/old/NodeCleaner.js +0 -0
/package/js/{rte → rte0}/old/Rte/Rte.mjs +0 -0
/package/js/{rte → rte0}/old/Rte/Rte.ui.items.mjs +0 -0
/package/js/{rte → rte0}/old/Rte/Rte.ui.mjs +0 -0
/package/js/{rte → rte0}/old/Rte/crossbrowser.mjs +0 -0
/package/js/{rte → rte0}/old/Rte/font/tinymce.svg +0 -0
/package/js/{rte → rte0}/old/Rte/font/tinymce.woff +0 -0
/package/js/{rte → rte0}/old/Rte/helpers.mjs +0 -0
/package/js/{rte → rte0}/old/Rte/htmlparser.mjs +0 -0
/package/js/{rte → rte0}/old/Rte/index.mjs +0 -0
/package/js/{rte → rte0}/old/Rte/main.css +0 -0
/package/js/{rte → rte0}/old/old.rte.js +0 -0
/package/js/{rte → rte0}/old/range-selection.old.js +0 -0
/package/js/{rte → rte0}/src/fixes.js +0 -0
/package/js/{rte → rte0}/src/rte.js +0 -0
/package/js/{rte → rte0}/src/ui/items/ai.js +0 -0
/package/js/{rte → rte0}/src/ui/items/code.js +0 -0
/package/js/{rte → rte0}/src/ui/items/undo.js +0 -0
/package/js/{rte → rte0}/src/util/htmlparser.js +0 -0
/package/js/{rte → rte0}/src/util/indentHtml.js +0 -0

package/js/rte/playground/index.html ADDED Viewed

@@ -0,0 +1,824 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>RTE playground</title>
+  <style>
+    :root {
+      color-scheme: light dark;
+      font: 13px/1.35 system-ui, sans-serif;
+      --border: color-mix(in srgb, CanvasText 24%, transparent);
+      --panel: color-mix(in srgb, CanvasText 5%, Canvas);
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; padding: .8rem; }
+    h1 { font-size: 1.25rem; margin-block: 0 .65rem; }
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: .5rem;
+      margin-block-end: .65rem;
+      & fieldset {
+        align-items: end;
+        border: 1px solid var(--border);
+        display: flex;
+        flex-wrap: wrap;
+        gap: .4rem;
+        margin: 0;
+        min-width: 0;
+        padding: .35rem .5rem .5rem;
+      }
+      & legend { padding-inline: .2rem; }
+      & label { display: grid; gap: .15rem; }
+      & button, & input, & select { font: inherit; min-height: 1.8rem; }
+      & button { padding-inline: .55rem; }
+    }
+    .grid {
+      display: grid;
+      gap: .65rem;
+      grid-template-columns: minmax(20rem, 1.2fr) minmax(18rem, 1fr);
+      @media (width < 800px) { grid-template-columns: 1fr; }
+    }
+    .panel {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: .35rem;
+      min-width: 0;
+      padding: .65rem;
+      & h2 { font-size: .9rem; margin-block: 0 .4rem; }
+      & textarea { inline-size: 100%; min-block-size: 6rem; resize: vertical; }
+      & pre, & textarea {
+        font: 11px/1.35 ui-monospace, monospace;
+        tab-size: 2;
+      }
+      & pre {
+        margin: 0;
+        max-block-size: 18rem;
+        overflow: auto;
+        white-space: pre-wrap;
+      }
+    }
+    #tree {
+      & [data-position="anchor"] { color: #16833b; }
+      & [data-position="focus"] { color: #1672c4; }
+      & [data-position] { font-weight: 900; }
+    }
+    #stage { background: Canvas; padding: .5rem; }
+    /* The configuration stands beside what it configures, so a change and its
+       effect are in view at once. */
+    .prototype {
+      align-items: start;
+      display: flex;
+      flex-wrap: wrap;
+      gap: .8rem;
+    }
+    .prototype > #editor-prototype {
+      flex: 1 1 22rem;
+      min-inline-size: 0;
+    }
+    #host-settings {
+      display: flex;
+      flex: 0 1 19rem;
+      flex-direction: column;
+      gap: .5rem;
+    }
+    #host-settings fieldset {
+      border: 1px solid var(--border);
+      display: flex;
+      flex-wrap: wrap;
+      gap: .1rem .7rem;
+      margin: 0;
+    }
+    #host-settings #host-properties {
+      display: flex;
+      flex-direction: column;
+      gap: .35rem;
+    }
+    #host-settings #host-properties label {
+      display: flex;
+      flex-direction: column;
+    }
+    #host-settings :is(select, input[type=text]) { inline-size: 100%; }
+    #host-settings fieldset label { white-space: nowrap; }
+    #editor, #editor-prototype {
+      border: 2px solid color-mix(in srgb, Highlight 55%, var(--border));
+      min-block-size: 6rem;
+      outline: none;
+      padding: .5rem;
+      &:focus { border-color: Highlight; }
+      & [contenteditable] { outline: 1px dashed orange; }
+      /* The demo content classes need a visible effect to be inspectable. */
+      & table { border-collapse: collapse; }
+      & :is(td, th) { border: 1px solid color-mix(in srgb, CanvasText 30%, transparent); padding: .2rem .4rem; }
+      & .lead { font-size: 1.15em; }
+      & .caption { font-size: .85em; opacity: .7; }
+      & .brandColor { color: color-mix(in srgb, Highlight 70%, CanvasText); }
+      & .x {
+        background: color-mix(in srgb, #ffbf00 36%, transparent);
+        border-radius: .2em;
+        box-decoration-break: clone;
+        padding-inline: .12em;
+      }
+    }
+    #mark-toggle {
+      border-color: color-mix(in srgb, #ffbf00 70%, var(--border));
+      &[aria-pressed="true"] { background: color-mix(in srgb, #ffbf00 36%, ButtonFace); }
+      &[aria-pressed="mixed"] {
+        background: linear-gradient(135deg, color-mix(in srgb, #ffbf00 36%, ButtonFace) 50%, ButtonFace 50%);
+      }
+    }
+    #toolbar {
+      align-items: center;
+      backdrop-filter: blur(.5rem);
+      background: color-mix(in srgb, Canvas 88%, transparent);
+      border: 1px solid color-mix(in srgb, Highlight 55%, var(--border));
+      border-radius: .55rem;
+      box-shadow: 0 .35rem 1.2rem #0004;
+      display: flex;
+      gap: .2rem;
+      padding: .25rem;
+      position: fixed;
+      z-index: 10;
+      &[hidden] { display: none; }
+      & button {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: .35rem;
+        display: inline-flex;
+        font: inherit;
+        gap: .25rem;
+        min-block-size: 2rem;
+        padding-inline: .55rem;
+      }
+      & button:hover:not(:disabled) { background: color-mix(in srgb, Highlight 16%, transparent); }
+      & button:disabled { opacity: .38; }
+      & button[aria-pressed="true"] { background: color-mix(in srgb, #ffbf00 36%, transparent); }
+      & button[aria-pressed="mixed"] {
+        background: linear-gradient(135deg, color-mix(in srgb, #ffbf00 36%, transparent) 50%, transparent 50%);
+      }
+      & .symbol { font-size: 1.15em; font-weight: 700; }
+    }
+    #status { margin-block: .4rem 0; }
+    details { font-size: .9em; }
+    details > summary { cursor: pointer; }
+    .wide { grid-column: 1 / -1; }
+  </style>
+</head>
+<body>
+  <h1>RTE playground</h1>
+  <p><a href=hosts.html>Open the editing-host matrix</a></p>
+  <div class="controls">
+    <fieldset>
+      <legend>Scenario</legend>
+      <label>Example
+        <select id="scenario">
+          <option value="combined">Nested p/div regression</option>
+          <option value="inline">Inline root run</option>
+          <option value="generic">Generic text block</option>
+          <option value="blocks">Redundant block wrapper</option>
+          <option value="list">List with stray blocks</option>
+          <option value="lift">Meaningful invalid block</option>
+          <option value="nested">Nested editable boundary</option>
+          <option value="marks">CSS class across inline elements</option>
+        </select>
+      </label>
+      <button id="reset" type="button">Reset</button>
+    </fieldset>
+    <fieldset>
+      <legend>CSS policy</legend>
+      <label>Cleanup
+        <select id="level">
+          <option>none</option>
+          <option>minimal</option>
+          <option selected>structural</option>
+          <option>canonical</option>
+        </select>
+      </label>
+      <label>Block
+        <input id="block" value="auto" size="6">
+      </label>
+      <label>Clean on
+        <input id="clean-on" value="input paste drop command" size="20">
+      </label>
+    </fieldset>
+    <fieldset>
+      <legend>Normalize</legend>
+      <button id="analyze" type="button">Analyze</button>
+      <button id="step" type="button">One step</button>
+      <button id="normalize" type="button">All</button>
+    </fieldset>
+    <fieldset>
+      <legend>Input pipeline</legend>
+      <label>Input type
+        <select id="input-type">
+          <option>insertText</option>
+          <option>insertParagraph</option>
+          <option>insertLineBreak</option>
+          <option>deleteContentBackward</option>
+          <option>deleteContentForward</option>
+          <option>insertFromPaste</option>
+          <option>insertFromDrop</option>
+        </select>
+      </label>
+      <button id="dispatch-input" type="button">Dispatch</button>
+    </fieldset>
+  </div>
+  <div id="toolbar" aria-label="Explicit editor formatting">
+    <button id="bold-toggle" type="button" data-command="bold" data-state data-shortcut="b" aria-label="Bold">
+      <span class="symbol" aria-hidden="true">B</span>
+    </button>
+    <button id="mark-toggle" type="button" data-command="toggleX" data-state data-shortcut="x" aria-label="Toggle .x mark">
+      <span class="symbol" aria-hidden="true">x</span> Toggle
+    </button>
+    <button id="mark-apply" type="button" data-command="applyX" aria-label="Apply .x mark">
+      <span class="symbol" aria-hidden="true">+</span> Apply
+    </button>
+    <button id="mark-remove" type="button" data-command="removeX" aria-label="Remove .x mark">
+      <span class="symbol" aria-hidden="true">−</span> Remove
+    </button>
+  </div>
+  <div class="grid">
+    <section class="panel">
+      <h2>Editable DOM — explicit integration</h2>
+      <div id="stage"></div>
+      <p id="status" aria-live="polite"></p>
+    </section>
+    <section class="panel">
+      <h2>DOM tree and selection</h2>
+      <pre id="tree"></pre>
+    </section>
+    <section class="panel">
+      <h2>Serialized inner HTML</h2>
+      <textarea id="html" spellcheck="false"></textarea>
+      <button id="apply-html" type="button">Parse and apply HTML</button>
+    </section>
+    <section class="panel">
+      <h2>Plans and executed actions</h2>
+      <pre id="log">Load a scenario, then analyze or normalize it.</pre>
+    </section>
+    <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">
+        <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>
+        <p>Select this text and link it, or put the caret in <a href="/existing">this link</a> to edit it.</p>
+        <p>Select a few words and give them a <span class=brandColor>content class</span> from the style list.</p>
+        <p><img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Crect width='160' height='90' fill='%23bcd'/%3E%3C/svg%3E" width="160" height="90" alt="Click the image and drag a corner"></p>
+        <table><tbody><tr><th>Head</th><th>Head</th></tr><tr><td>Put the caret in a cell</td><td>and add or drop rows and columns</td></tr></tbody></table>
+        <p><span class="pasted" style="color:#b30"><strong>Select this paste-like formatting</strong></span> and click T× repeatedly.</p>
+        <p>The faint arrow after this line is a visible break.<br>It is not part of the editable HTML.</p>
+      </div>
+      <form id="host-settings" aria-label="Host configuration">
+        <fieldset id="toolbar-controls"><legend><code>--u2-rte-toolbar</code></legend></fieldset>
+        <div id="host-properties"></div>
+      </form>
+      </div>
+      <p><small id="history-state">History: focus the surface to start recording.</small></p>
+      <p><small>This surface is wired by <code>rte.js</code>, optional <code>blocks.js</code>/<code>classes.js</code>/<code>unstyle.js</code>/<code>breaks.js</code>/<code>link.js</code>/<code>tables.js</code>/<code>images.js</code>/<code>source.js</code>, and CSS variables.</small></p>
+    </section>
+    <details class="panel wide">
+      <summary>Notes</summary>
+      <p>
+        The first surface is the explicit integration: its commands and toolbar
+        markup are listed in this page for inspection, while their behavior
+        comes from the production modules. The lower prototype is the
+        convention integration and wires itself from one import plus CSS.
+        Invalid nested structures are built with DOM methods because the HTML
+        parser repairs some of them immediately. “Parse and apply HTML” is
+        deliberately available to compare parser behavior with RTE behavior.
+        Place a selection inside the editor before stepping to observe mapped
+        range boundaries. Dispatch sends a cancelable <code>beforeinput</code>
+        and, unless a command replaced it, the following <code>input</code>.
+        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
+        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,
+        paste, and drop is its own step. List controls consult the content
+        model, so they disable themselves in a host that does not allow them.
+        The <code>&lt;/&gt;</code> control opens the HTML source of this surface
+        in a modal dialog, positioned at the caret. Applying it parses the text
+        through the sanitizer, never through <code>innerHTML</code>, and lands
+        as one undo step. Its text area is wrapped in <code>&lt;u2-code&gt;</code>,
+        so the source is syntax highlighted once that element has loaded.
+        The link control opens a contextual form at the selection: a caret
+        inside a link edits that whole link, a selection creates one. Its
+        address is a plain text field, so relative paths, fragments, and
+        application schemes are accepted and the sanitizer decides what
+        survives.
+        Clicking the image selects it and frames it with corner handles. The
+        drag moves the frame only and the size is written once when it is
+        released, so a resize is one undo step rather than a trail of them; the
+        corners keep the proportion. Putting the caret in a table cell brings up handles on the table itself:
+        rows down its left edge, columns along its top, lined up with the cell
+        you are in. They name no tag — sections, rows and cells come from the
+        content model's default child — and a cell spanning several columns
+        makes the counted actions unavailable rather than shifting the wrong
+        cells. Inserting a table stays a toolbar action, because it applies
+        where no table is.
+        Remove formatting walks a ladder that never runs out: foreign styles,
+        presentational attributes and classes, then the declared content
+        classes, the remaining semantic inline elements, and finally the
+        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.
+        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;
+        otherwise they create a <code>&lt;span class="x"&gt;</code>.
+      </p>
+    </details>
+  </div>
+  <script type="module">
+    import {editor as conventionEditor} from '../rte.js';
+    import '../blocks.js';
+    import '../classes.js';
+    import '../link.js';
+    import '../images.js';
+    import '../tables.js';
+    import '../source.js';
+    import '../breaks.js';
+    import '../unstyle.js';
+    import {rangeRect} from '../src/browser/range-rect.js';
+    import {Commands} from '../src/command/commands.js';
+    import {deleteBackward, deleteForward} from '../src/command/delete.js';
+    import {enter, lineBreak} from '../src/command/enter.js';
+    import {applyMark, removeMark} from '../src/command/mark.js';
+    import {PendingMarks} from '../src/command/pending-marks.js';
+    import {config} from '../src/config/config.js';
+    import {Rte} from '../src/core/core.js';
+    import {InputPipeline} from '../src/input/input-pipeline.js';
+    import {boldHtml} from '../src/mark/standard.js';
+    import {MarkAdapter} from '../src/mark/dom-adapter.js';
+    import {MarkType} from '../src/mark/mark.js';
+    import {htmlModel} from '../src/model/html/html-model.js';
+    import {Normalizer} from '../src/normalize/normalizer/normalizer.js';
+    import {RepairPlanner} from '../src/normalize/repair/repair-planner.js';
+    import {EditRange} from '../src/selection/range/edit-range.js';
+    import {isEditingBoundary} from '../src/selection/ownership/ownership.js';
+    import {Point} from '../src/selection/point/point.js';
+    import {SelectionSnapshot} from '../src/selection/snapshot.js';
+    import {Toolbar} from '../src/ui/toolbar.js';
+    const controls = {
+      scenario: document.querySelector('#scenario'),
+      level: document.querySelector('#level'),
+      block: document.querySelector('#block'),
+      cleanOn: document.querySelector('#clean-on'),
+      analyze: document.querySelector('#analyze'),
+      step: document.querySelector('#step'),
+      normalize: document.querySelector('#normalize'),
+      inputType: document.querySelector('#input-type'),
+      dispatchInput: document.querySelector('#dispatch-input'),
+      toolbar: document.querySelector('#toolbar'),
+      reset: document.querySelector('#reset'),
+      html: document.querySelector('#html'),
+      applyHtml: document.querySelector('#apply-html'),
+      stage: document.querySelector('#stage'),
+      status: document.querySelector('#status'),
+      tree: document.querySelector('#tree'),
+      log: document.querySelector('#log'),
+    };
+    const core = new Rte(document, {auto: false});
+    const classMark = new MarkType('x');
+    const classHtml = new MarkAdapter(classMark, {
+      selector: '.x',
+      tag: 'span',
+      reuse: true,
+      write: element => element.classList.add('x'),
+      clear: element => element.classList.remove('x'),
+    });
+    const scenarios = {
+      combined: {
+        tag: 'div',
+        block: 'auto',
+        build(host) {
+          const paragraph = document.createElement('p');
+          const nested = document.createElement('div');
+          const following = document.createElement('div');
+          nested.textContent = 'test';
+          following.textContent = 'hallo';
+          paragraph.append(nested, ' abc');
+          host.append(paragraph, following);
+        },
+      },
+      inline: {tag: 'div', block: 'auto', html: 'one <strong>two</strong> three'},
+      generic: {tag: 'section', block: 'auto', html: '<div>hello <em>world</em></div>'},
+      blocks: {tag: 'section', block: 'auto', html: '<div><p>one</p><p>two</p></div>'},
+      list: {tag: 'ul', block: 'auto', html: '<p>one</p><p>two</p>'},
+      lift: {
+        tag: 'div',
+        block: 'auto',
+        build(host) {
+          const paragraph = document.createElement('p');
+          const section = document.createElement('section');
+          section.className = 'meaningful';
+          section.textContent = 'block';
+          paragraph.append('before ', section, ' after');
+          host.append(paragraph);
+        },
+      },
+      nested: {tag: 'div', block: 'auto', html: '<div contenteditable><div>nested</div></div><div>outer</div>'},
+      marks: {
+        tag: 'ul',
+        block: 'auto',
+        html: '<li>hello</li><li><b>dear</b> world</li>',
+        select(host) {
+          getSelection().setBaseAndExtent(host.children[0].firstChild, 2, host.querySelector('b').firstChild, 4);
+        },
+      },
+    };
+    let editor;
+    let observer;
+    let surface;
+    let commands;
+    let pipeline;
+    let command;
+    let commandMessage;
+    const toolbar = new Toolbar(core, controls.toolbar, {
+      commands: target => target === surface ? commands : null,
+      place: placeToolbar,
+    });
+    controls.scenario.addEventListener('change', load);
+    controls.reset.addEventListener('click', load);
+    controls.analyze.addEventListener('click', analyze);
+    controls.step.addEventListener('click', () => execute('step'));
+    controls.normalize.addEventListener('click', () => execute('normalize'));
+    controls.dispatchInput.addEventListener('click', dispatchInput);
+    for (const control of [controls.level, controls.block, controls.cleanOn]) {
+      control.addEventListener('input', () => editor && options());
+    }
+    controls.applyHtml.addEventListener('click', () => {
+      editor.innerHTML = controls.html.value;
+      show('HTML parsed by the browser.');
+    });
+    document.addEventListener('selectionchange', refreshTree);
+    function load() {
+      const scenario = scenarios[controls.scenario.value];
+      observer?.disconnect();
+      pipeline?.dispose();
+      surface?.dispose();
+      editor = document.createElement(scenario.tag);
+      editor.id = 'editor';
+      editor.contentEditable = 'true';
+      controls.block.value = scenario.block;
+      controls.stage.replaceChildren(editor);
+      if (scenario.build) scenario.build(editor);
+      else editor.innerHTML = scenario.html;
+      options();
+      surface = core.add(editor);
+      const pending = new PendingMarks(surface);
+      commands = new Commands(surface, {commands: {
+        deleteBackward,
+        deleteForward,
+        enter,
+        lineBreak,
+        insertText: pending.insertText,
+        bold: {...pending.toggle(boldHtml), shortcut: 'ctrl+b'},
+        toggleX: {...pending.toggle(classHtml), shortcut: 'ctrl+x'},
+        applyX: applyMark(classHtml),
+        removeX: removeMark(classHtml),
+      }});
+      pipeline = new InputPipeline(surface, {commands});
+      editor.addEventListener('u2-rte-normalize', inputNormalized);
+      editor.addEventListener('u2-rte-command', commandExecuted);
+      editor.addEventListener('u2-rte-change', changeExecuted);
+      observer = new MutationObserver(refresh);
+      observer.observe(editor, {subtree: true, childList: true, characterData: true, attributes: true});
+      scenario.select?.(editor);
+      if (scenario.select) core.sync();
+      toolbar.refresh();
+      controls.log.textContent = 'Scenario loaded.';
+      show(`Loaded ${controls.scenario.selectedOptions[0].text}.`);
+    }
+    function options() {
+      editor.style.setProperty('--u2-rte-block', controls.block.value.trim() || 'none');
+      editor.style.setProperty('--u2-rte-cleanup', controls.level.value);
+      editor.style.setProperty('--u2-rte-clean-on', controls.cleanOn.value.trim());
+      const settings = config(editor);
+      return {
+        block: settings.block,
+        level: settings.cleanup,
+      };
+    }
+    function execute(method) {
+      const selection = trackedSelection();
+      try {
+        const result = new Normalizer(editor, options())[method]({points: selection.points});
+        selection.restore(result.map);
+        logResult(result);
+        show(`${method === 'step' ? 'Step' : 'Normalization'}: ${result.actions.length} action(s), stable: ${result.stable}.`);
+      } catch (error) {
+        controls.log.textContent = error.stack || String(error);
+        show(`${error.name}: ${error.message}`);
+      }
+    }
+    function dispatchInput() {
+      options();
+      const inputType = controls.inputType.value;
+      command = null;
+      controls.status.textContent = `Dispatched ${inputType}; no cleanup ran for this trigger.`;
+      const before = new InputEvent('beforeinput', {bubbles: true, cancelable: true, inputType});
+      editor.dispatchEvent(before);
+      if (!before.defaultPrevented) editor.dispatchEvent(new InputEvent('input', {bubbles: true, inputType}));
+      refresh();
+      if (command) controls.status.textContent = `${inputType} ran command ${command}.`;
+    }
+    function commandExecuted(event) {
+      const name = command = event.detail.name;
+      const action = {applyX: 'Applied', removeX: 'Removed', toggleX: 'Toggled', bold: 'Toggled bold'}[name];
+      if (!action) return;
+      const changed = event.detail.result;
+      controls.log.textContent = `${name}: ${Array.isArray(changed) ? changed.length : 0} element(s) changed.`;
+      commandMessage = name === 'bold' ? `${action} on the selected text.` : `${action} .x on the selected text.`;
+    }
+    function changeExecuted() {
+      if (!commandMessage) return;
+      const message = commandMessage;
+      commandMessage = null;
+      show(message);
+    }
+    function placeToolbar(element, target) {
+      const range = target.selection?.range();
+      if (!range) return;
+      const anchor = rangeRect(range, {root: target.element});
+      const box = element.getBoundingClientRect();
+      const gap = 8;
+      const left = Math.max(gap, Math.min(innerWidth - box.width - gap, anchor.left + anchor.width / 2 - box.width / 2));
+      const above = anchor.top - box.height - gap;
+      const top = above >= gap ? above : Math.min(innerHeight - box.height - gap, anchor.bottom + gap);
+      element.style.left = `${left}px`;
+      element.style.top = `${top}px`;
+    }
+    function inputNormalized(event) {
+      logResult(event.detail.result);
+      show(`${event.detail.inputType || event.detail.trigger}: ${event.detail.result.actions.length} action(s), stable: ${event.detail.result.stable}.`);
+    }
+    function logResult(result) {
+      const actions = result.actions.map((action, index) => `${index + 1}. ${describeAction(action)}`);
+      const issues = result.issues.map(issue => `! reject ${path(issue.node)}`);
+      controls.log.textContent = [...actions, ...issues].join('\n') || 'No repair required.';
+    }
+    function analyze() {
+      const planner = new RepairPlanner(editor, options());
+      const rows = [];
+      for (const parent of parentElements(editor)) {
+        for (const child of parent.childNodes) {
+          const plan = planner.plan(parent, child);
+          if (plan.type === 'keep') continue;
+          rows.push(`${path(child)} → ${describeAction(plan)}`);
+        }
+      }
+      controls.log.textContent = rows.join('\n') || 'No repair required.';
+      show(`${rows.length} non-keep plan(s).`);
+    }
+    function parentElements(scope) {
+      const result = [];
+      const visit = element => {
+        if (element !== scope && (isEditingBoundary(element) || htmlModel.atomic(element))) return;
+        for (const child of element.children) visit(child);
+        result.push(element);
+      };
+      visit(scope);
+      return result;
+    }
+    function trackedSelection() {
+      const snapshot = SelectionSnapshot.capture(getSelection(), editor);
+      if (!snapshot) return {points: [], restore() {}};
+      const range = snapshot.range();
+      const start = Point.fromRange(range, 'start');
+      const points = range.collapsed ? [start] : [start, Point.fromRange(range, 'end')];
+      return {
+        points,
+        restore(map) {
+          try {
+            EditRange.fromPoints(map.get(points[0]), map.get(points.at(-1)), editor).select(getSelection(), snapshot.backward);
+          } catch (error) {
+            controls.log.append(`\n! Selection restore failed: ${error.message}`);
+          }
+        },
+      };
+    }
+    function refresh() {
+      controls.html.value = editor.innerHTML;
+      refreshTree();
+    }
+    function refreshTree() {
+      if (!editor) return;
+      const selection = getSelection();
+      const owned = selection.rangeCount && editor.contains(selection.anchorNode) && editor.contains(selection.focusNode);
+      const positions = owned ? [
+        {name: 'anchor', node: selection.anchorNode, offset: selection.anchorOffset},
+        {name: 'focus', node: selection.focusNode, offset: selection.focusOffset},
+      ] : [];
+      const output = document.createDocumentFragment();
+      tree(editor, positions, 0, output);
+      if (owned) {
+        line(output, '');
+        line(output, `anchor: ${path(selection.anchorNode)} @ ${selection.anchorOffset}`);
+        line(output, `focus:  ${path(selection.focusNode)} @ ${selection.focusOffset}`);
+      }
+      controls.tree.replaceChildren(output);
+    }
+    function tree(node, positions, depth, output) {
+      const pad = '  '.repeat(depth);
+      if (node.nodeType === Node.TEXT_NODE) {
+        const points = positions.filter(point => point.node === node).sort((a, b) => a.offset - b.offset);
+        const parts = [`${pad}#text "`];
+        let offset = 0;
+        for (const point of points) {
+          parts.push(escaped(node.data.slice(offset, point.offset)), marker(point));
+          offset = point.offset;
+        }
+        parts.push(`${escaped(node.data.slice(offset))}"`);
+        line(output, ...parts);
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const attrs = [...node.attributes].map(attribute => ` ${attribute.name}=${JSON.stringify(attribute.value)}`).join('');
+        line(output, `${pad}<${node.localName}${attrs}>`);
+        for (let offset = 0; offset <= node.childNodes.length; offset++) {
+          const points = positions.filter(point => point.node === node && point.offset === offset);
+          if (points.length) line(output, '  '.repeat(depth + 1), ...points.map(marker));
+          if (node.childNodes[offset]) tree(node.childNodes[offset], positions, depth + 1, output);
+        }
+      } else {
+        line(output, `${pad}${node.nodeName}`);
+      }
+    }
+    function marker({name, offset}) {
+      const element = document.createElement('span');
+      element.dataset.position = name;
+      element.title = `${name} @ ${offset}`;
+      element.textContent = '┃';
+      return element;
+    }
+    function escaped(value) {
+      return JSON.stringify(value).slice(1, -1);
+    }
+    function line(output, ...parts) {
+      if (output.childNodes.length) output.append('\n');
+      output.append(...parts);
+    }
+    function path(node) {
+      if (node === editor) return editor.localName;
+      const parts = [];
+      for (let current = node; current && current !== editor; current = current.parentNode) {
+        const parent = current.parentNode;
+        if (!parent) break;
+        const index = Array.prototype.indexOf.call(parent.childNodes, current);
+        parts.unshift(`${current.nodeType === Node.TEXT_NODE ? '#text' : current.localName}[${index}]`);
+      }
+      return `${editor.localName}/${parts.join('/')}`;
+    }
+    function describeAction(action) {
+      const details = [];
+      if (action.tag) details.push(`<${action.tag}>`);
+      if (action.count) details.push(`${action.count} nodes`);
+      if (action.breaks) details.push('preserve breaks');
+      if (action.target) details.push(`to ${path(action.target)}`);
+      return `${action.type}${details.length ? ` (${details.join(', ')})` : ''}`;
+    }
+    function show(message) {
+      controls.status.textContent = message;
+      refresh();
+    }
+    /* Everything a host configures, configurable here: the panel writes the
+       custom properties onto the surface and asks the client to refresh. */
+    const HOST_PROPERTIES = [
+      ['toolbar-when', ['always', 'selection']],
+      ['toolbar-unavailable', ['disable', 'hide']],
+      ['cleanup', ['structural', 'none', 'minimal', 'canonical']],
+      ['elements', ['all', '@basic', '@content', '@article', '@document']],
+      ['import-elements', ['@content', '@basic', '@article', '@document', 'all']],
+      ['import-unstyle', ['classes', 'none', 'styles', 'attributes', 'formatting', 'contentClasses', 'inline']],
+      ['import-sanitize', ['policy', 'none']],
+    ];
+    /* The convention prototype reports its own history so grouping is visible. */
+    const prototype = document.querySelector('#editor-prototype');
+    const historyState = document.querySelector('#history-state');
+    function showHistory() {
+      const surface = conventionEditor.core.get(prototype);
+      const history = surface && conventionEditor.history(surface);
+      if (!history) {
+        historyState.textContent = 'History: focus the surface to start recording.';
+        return;
+      }
+      const moves = [history.canUndo && 'undo', history.canRedo && 'redo'].filter(Boolean);
+      historyState.textContent = `History: ${history.length} entries, at ${history.index + 1}`
+        + `. Available: ${moves.join(' and ') || 'nothing yet'}.`;
+    }
+    prototype.addEventListener('u2-rte-history', showHistory);
+    prototype.addEventListener('u2-rte-selectionchange', showHistory);
+    prototype.addEventListener('focusin', showHistory);
+    buildSettings();
+    function buildSettings() {
+      const listed = new Set(prototype.style.getPropertyValue('--u2-rte-toolbar').split(/[\s,]+/).filter(Boolean));
+      const controls = document.querySelector('#toolbar-controls');
+      /* The names come from the modules themselves, so the panel cannot drift. */
+      for (const control of conventionEditor.controls) {
+        const label = document.createElement('label');
+        const box = document.createElement('input');
+        box.type = 'checkbox';
+        box.value = control.name;
+        box.checked = listed.has(control.name);
+        box.addEventListener('change', writeToolbar);
+        label.append(box, ` ${control.name}`);
+        label.title = `${control.label} (${control.module})`;
+        controls.append(label);
+      }
+      const properties = document.querySelector('#host-properties');
+      for (const [name, values] of HOST_PROPERTIES) {
+        const label = document.createElement('label');
+        const select = document.createElement('select');
+        for (const value of values) select.append(new Option(value, value));
+        select.value = prototype.style.getPropertyValue(`--u2-rte-${name}`).trim() || values[0];
+        select.addEventListener('change', () => write(name, select.value));
+        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);
+    }
+    function writeToolbar() {
+      const names = [...document.querySelectorAll('#toolbar-controls input:checked')].map(box => box.value);
+      write('toolbar', names.join(' '));
+    }
+    function write(name, value) {
+      prototype.style.setProperty(`--u2-rte-${name}`, value);
+      conventionEditor.refresh();
+    }
+    load();
+    showHistory();
+  </script>
+</body>
+</html>