diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01fdd4d..f580a50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,61 @@ Changelog ist die Upgrade-Anleitung für die Tools.
 
 ## [Unreleased]
 
+### @basicbar/ui (→ wird `ui/v0.7.0`)
+
+**TipTap raus aus den Bundles, die keinen Editor rendern** (Framework-Review):
+`RichTextEditor` liegt jetzt in einem eigenen Entry
+`@basicbar/ui/rich-text-editor`; das Paket ist `sideEffects: false` und wird
+mit Code-Splitting gebaut. Der Haupt-Entry `@basicbar/ui` importiert kein
+`@tiptap/*` mehr. Nagelprobe am gerenderten Template (kein Editor): Bundle
+575 kB → 280 kB (gzip 185 → 91 kB). Die `@tiptap/*`-Pakete bleiben bewusst
+`dependencies` (nicht optionale Peers): sie kosten nur Installationszeit, und
+die eine Pin-Stelle für alle Tools bleibt erhalten.
+
+Außerdem:
+
+- `stripHtml(html)` und `isEmptyHtml(html)` sind exportiert (abstimmbar
+  hatte vier Kopien). `isEmptyHtml` zählt ein Editor-Leer-`<p></p>` als
+  leer, einen reinen Bild-Inhalt aber als gefüllt; `TranslatableField` mit
+  `format="html"` nutzt das für seine Ausgefüllt-Punkte (vorher galt ein
+  Bild ohne Text als „nicht übersetzt“).
+- `richTextClass` (der Prosa-Default von `RichText`) ist exportiert, damit
+  Aufrufer ihn ergänzen können statt zu kopieren; `className` ersetzt
+  weiterhin.
+- `RichTextEditor` hat `editable?: boolean` (Default `true`): schreibgeschützt
+  ohne Toolbar und Cursor, Drop/Paste ignoriert; Umschalten zur Laufzeit via
+  `setEditable`.
+- `TranslationFormProvider` hat `controlsClassName?` für die Position der
+  Floating-Controls (Default `fixed bottom-6 right-6 z-40`) — ersetzt den
+  CSS-Override auf die Utility-Klassen in abstimmbar.
+- `renderInput` von `TranslatableField` bekommt `onBlur` durchgereicht.
+- Performance: `TranslatableField` berechnet die Sprachreihenfolge und den
+  Ausgefüllt-Status pro Render nur noch einmal (vorher pro Tab/Lookup, bei
+  HTML jeweils mit DOM-Parse); `targets` im Provider memoisiert.
+- A11y: die Sprach-Tabs tragen den Status („translated“ …) zusätzlich als
+  `sr-only`-Text (der Punkt war farb-only, WCAG 1.4.1); `PreferencesMenu`
+  fokussiert beim Öffnen die erste Zeile und unterstützt Pfeiltasten,
+  Home/End (WAI-ARIA-Menü-Pattern), `role="menu"` hat einen Namen.
+- README: Abschnitt „Übersetzungs-Keys“ mit allen Keys des Pakets.
+
+**Migration:**
+
+1. `package.json`: Tarball auf `ui/v0.7.0`.
+2. Jeden `RichTextEditor`-Import auf den neuen Pfad umstellen:
+   `import { RichTextEditor } from "@basicbar/ui/rich-text-editor";`
+   (`RichText`, `RichTextEditorProps`-Typ: `RichText` bleibt in
+   `@basicbar/ui`, der Props-Typ kommt aus dem Editor-Entry). Betroffen:
+   ausleihbar (`AdminWelcomePage`, `AdminPagesPage`, `AdminPoolsPage`),
+   abstimmbar (`components/TranslatableField.tsx`). Tools ohne Editor
+   (erkennbar, modulierbar) ändern nichts.
+3. Optional, empfohlen: lokale `stripHtml`-Kopien durch den Export ersetzen
+   (abstimmbar: `RoomsPage`, `ResultsPage`, `SetPage`, `QuestionPage` — dort
+   `!stripHtml(x) && !/<img/.test(x)` → `isEmptyHtml(x)`); abstimmbars
+   `.fixed.bottom-6.right-6.z-40`-Override in `index.css` durch
+   `controlsClassName="fixed bottom-6 right-6 z-40 max-md:bottom-[5.5rem]"` am
+   Provider ersetzen.
+4. Katalog: keine neuen Keys.
+
 ### basicbar-lti (→ wird `lti/v0.1.4`)
 
 **Sicherheit: Reflected XSS im LTI-Login behoben.** Die 400er-Antworten von
diff --git a/packages/ui/README.md b/packages/ui/README.md
index e345465..c8c8b0d 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -28,6 +28,12 @@ Tools identisch aussehen, übergeben sie dieselbe Ramp.
   `<html lang>`-Sync nach WCAG 3.1.1). Die Kataloge bleiben im Tool.
 - **`contentLang`** — `localizedText`/`localizedMap`/`setLocalizedLang` & Co.
   für `{ lang: text }`-Inhalte (Spiegel des Backend-`resolve_translated_text`).
+- **`TranslatableField` / `TranslationFormProvider`** — Sprach-Tabs pro
+  Feld plus „alle Felder übersetzen“ (siehe `TranslatableField.tsx`).
+- **`RichText` / `stripHtml` / `isEmptyHtml`** — Rendern und Prüfen des
+  gespeicherten Rich-HTML; **`RichTextEditor`** (TipTap) als **eigener Entry**
+  `@basicbar/ui/rich-text-editor`, damit TipTap/ProseMirror nur in Bundles
+  landet, die den Editor wirklich rendern (siehe „Rich text“).
 
 ## Einbinden
 
@@ -68,6 +74,19 @@ Link, Überschriften H2/H3, optional Bilder) und die passende Renderkomponente
 für das gespeicherte HTML. Aus AbstimmBAR in die Basis verschoben
 (modulierbar#5), damit alle -bar-Tools eine Implementierung teilen.
 
+**Import-Pfade:** der Editor kommt aus dem eigenen Entry
+`@basicbar/ui/rich-text-editor`; `RichText`, `stripHtml` und `isEmptyHtml`
+aus `@basicbar/ui`. Grund: TipTap + ProseMirror sind ~300 kB (≈95 kB gzip)
+und sollen nur in Bundles landen, die den Editor rendern — ein Tool, das nur
+`RichText` anzeigt oder gar kein Rich-Text hat, zahlt sonst mit. Wer den
+Editor nur auf Admin-Seiten braucht, lädt ihn zusätzlich per `React.lazy`
+nach, dann liegt er in einem eigenen Chunk.
+
+```tsx
+import { RichText, stripHtml, isEmptyHtml } from "@basicbar/ui";
+import { RichTextEditor } from "@basicbar/ui/rich-text-editor";
+```
+
 **Sanitizing-Vertrag:** die Komponenten selbst sanitizen nichts — die
 Sicherheitsgrenze ist das Backend. Jedes Rich-Text-Feld muss beim Speichern
 (und beim Import) durch einen Allowlist-Sanitizer laufen, z. B.
@@ -90,7 +109,7 @@ Drag&Drop/Einfügen aus der Zwischenablage werden ignoriert; bestehende
 `<img>`-Inhalte bleiben trotzdem sichtbar):
 
 ```tsx
-import { RichTextEditor } from "@basicbar/ui";
+import { RichTextEditor } from "@basicbar/ui/rich-text-editor";
 
 <RichTextEditor
   value={description}
@@ -99,6 +118,11 @@ import { RichTextEditor } from "@basicbar/ui";
 />
 ```
 
+**Schreibgeschützt** mit `editable={false}`: kein Toolbar, kein Cursor,
+Dateien per Drop/Paste werden ignoriert — z. B. während ein Formular
+speichert oder für Nutzer ohne Schreibrecht. Für die reine Anzeige
+gespeicherten HTMLs ist `RichText` das richtige Werkzeug (kostet kein TipTap).
+
 **Editor mit Bildern** — `onUploadImage` lädt hoch und liefert die relative
 URL als String; scheitert der Upload, zeigt der Editor
 `t("Image upload failed")` (plus die Fehlermeldung, falls vorhanden) per
@@ -143,20 +167,31 @@ unangetastet.
 **Rendern** des serverseitig sanitisierten HTML:
 
 ```tsx
-import { RichText } from "@basicbar/ui";
+import { RichText, richTextClass } from "@basicbar/ui";
 
 <RichText html={product.description} />
 // eigene Klassen statt des Prosa-Defaults (ersetzt, nicht ergänzt):
 <RichText html={product.description} className="text-3xl [&_img]:max-h-64" />
+// Prosa-Default ergänzen statt kopieren:
+<RichText html={product.description} className={`${richTextClass} mt-4`} />
 ```
 
+**Prüfen** des gespeicherten HTML — `stripHtml(html)` liefert den sichtbaren
+Text (für Listen, Suchtreffer, Platzhalter „kein Fragetext“), `isEmptyHtml(html)`
+ist `true` für leere Werte und das `<p></p>`, das ein geöffneter Editor
+hinterlässt, aber `false` für reine Bild-Inhalte. Beide parsen per DOM (keine
+Regex), ohne etwas auszuführen. `TranslatableField` mit `format="html"`
+benutzt `isEmptyHtml` für seine Ausgefüllt-Punkte.
+
 **Integration in `TranslatableField`** über `renderInput` (pro Sprache ein
 Editor, mit `format="html"` bleiben die Ausgefüllt-Punkte markup-blind und
 die Maschinenübersetzung erhält die Tags). `renderInput` bekommt neben `id`
 auch `labelId` — die Id von `TranslatableField`s eigenem sichtbaren `<label>`
 (nur gesetzt, wenn die `label`-Prop übergeben wurde); durchgereicht als
 `labelledBy` bindet der Editor sich per `aria-labelledby` an dieses Label,
-statt ein zweites, redundantes `ariaLabel` zu brauchen:
+statt ein zweites, redundantes `ariaLabel` zu brauchen. Auch `onBlur` wird
+durchgereicht (die `onBlur`-Prop des Feldes), falls der eigene Editor ein
+Blur-Speichern verdrahten will:
 
 ```tsx
 <TranslatableField
@@ -176,12 +211,38 @@ statt ein zweites, redundantes `ariaLabel` zu brauchen:
 />
 ```
 
-**Übersetzungs-Keys**, die das Tool bereitstellen muss (Englisch als Key,
-siehe `initI18n`): `"Bold"`, `"Italic"`, `"Heading (large)"`,
-`"Heading (small)"`, `"Bulleted list"`, `"Numbered list"`, `"Link"`,
-`"Enter URL"`, `"Insert image (or drag and drop)"`,
-`"Image upload failed"`, `"Image description (alt text)"`,
-`"Image description"`.
+**Floating-Controls von `TranslationFormProvider`** (Sprachumschalter +
+„alle Felder übersetzen“) sitzen per Default `fixed bottom-6 right-6 z-40`.
+Kollidiert das mit einer eigenen Sticky-Leiste (z. B. Speichern/Abbrechen am
+unteren Rand auf schmalen Screens), setzt das Tool die Position per
+`controlsClassName` statt per CSS-Override auf die Utility-Klassen:
+
+```tsx
+<TranslationFormProvider translate={…} controlsClassName="fixed bottom-6 right-6 z-40 max-md:bottom-[5.5rem]">
+```
+
+## Übersetzungs-Keys
+
+Alle Strings des Pakets laufen über `t()` mit Englisch als Key (siehe
+`initI18n`); das Tool stellt die deutschen (und weiteren) Übersetzungen in
+seinem Katalog bereit. Fehlende Keys fallen auf den englischen Text zurück.
+
+- Rich-Text-Editor: `"Bold"`, `"Italic"`, `"Heading (large)"`,
+  `"Heading (small)"`, `"Bulleted list"`, `"Numbered list"`, `"Link"`,
+  `"Enter URL"`, `"Insert image (or drag and drop)"`,
+  `"Image upload failed"`, `"Image description (alt text)"`,
+  `"Image description"`.
+- TranslatableField: `"translated"`, `"not translated"`,
+  `"translation may be outdated"`,
+  `"The other language was changed since this translation."`,
+  `"Mark as up to date"`, `"Translate from {{language}}"`,
+  `"Translating…"`, `"Translation failed."`,
+  `"A value in {{language}} is required."`.
+- TranslationFormProvider: `"Show all fields in one language"`,
+  `"Show all fields in {{language}}"`, `"Translate all fields"`,
+  `"Translating…"`, `"Some fields could not be translated."`.
+- Preferences: `"Preferences"`, `"Language"`, `"Appearance"`, `"Auto"`,
+  `"(follows your system)"`, `"Light"`, `"Dark"`.
 
 ## Preferences (language & appearance)
 
@@ -210,8 +271,10 @@ follows the system and the shown language is the marked one; a pick calls
 `i18n.changeLanguage`, which the detector caches, so it is binding from then
 on. Use `onChange` / `onLanguageChange` to persist the choice server-side.
 
-Translation keys (English source strings): `Appearance`, `Auto`,
-`(follows your system)`, `Light`, `Dark`, `Language`, `Preferences`.
+Keyboard: `PreferencesMenu` follows the WAI-ARIA menu pattern — opening
+focuses the first row, Up/Down cycle through the rows, Home/End jump,
+Escape closes and returns focus to the button. Translation keys: see
+"Übersetzungs-Keys" above.
 
 ## CSP
 
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
index be8005e..627386c 100644
--- a/packages/ui/package-lock.json
+++ b/packages/ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@basicbar/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@basicbar/ui",
-      "version": "0.6.0",
+      "version": "0.7.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@tiptap/extension-bold": "^3.27.2",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 693dd92..bafacdb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,10 +1,11 @@
 {
   "name": "@basicbar/ui",
-  "version": "0.6.0",
-  "description": "Design-System-Basis der virtUOS -bar-Tools: Tailwind-Preset, Basis-Styles, Theme (Dark Mode), i18n-Bootstrap, contentLang, RichTextEditor/RichText (TipTap)",
+  "version": "0.7.0",
+  "description": "Design-System-Basis der virtUOS -bar-Tools: Tailwind-Preset, Basis-Styles, Theme (Dark Mode), i18n-Bootstrap, contentLang, TranslatableField, Preferences, RichText; RichTextEditor (TipTap) als eigener Entry",
   "license": "Apache-2.0",
   "author": "Universität Osnabrück (virtUOS)",
   "type": "module",
+  "sideEffects": false,
   "files": [
     "dist",
     "base.css",
@@ -16,6 +17,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./rich-text-editor": {
+      "types": "./dist/rich-text-editor.d.ts",
+      "import": "./dist/rich-text-editor.js"
+    },
     "./tailwind-preset": "./tailwind-preset.js",
     "./base.css": "./base.css"
   },
@@ -25,14 +30,16 @@
   },
   "tsup": {
     "entry": [
-      "src/index.ts"
+      "src/index.ts",
+      "src/rich-text-editor.ts"
     ],
     "format": [
       "esm"
     ],
     "dts": true,
     "sourcemap": true,
-    "clean": true
+    "clean": true,
+    "splitting": true
   },
   "peerDependencies": {
     "i18next": ">=23",
diff --git a/packages/ui/src/Preferences.tsx b/packages/ui/src/Preferences.tsx
index 1fce71d..891325b 100644
--- a/packages/ui/src/Preferences.tsx
+++ b/packages/ui/src/Preferences.tsx
@@ -132,9 +132,18 @@ export function PreferencesMenu({
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!open) return;
+    // A `role="menu"` promises arrow-key navigation (WAI-ARIA menu pattern):
+    // focus moves to the first item on open, Up/Down cycle through the
+    // menuitemradio rows, Home/End jump, Escape closes and restores focus.
+    const items = () =>
+      Array.from(
+        menuRef.current?.querySelectorAll<HTMLElement>('[role^="menuitem"]') ?? [],
+      );
+    items()[0]?.focus();
     function onPointerDown(event: PointerEvent) {
       if (ref.current && !ref.current.contains(event.target as Node)) {
         setOpen(false);
@@ -144,7 +153,19 @@ export function PreferencesMenu({
       if (event.key === "Escape") {
         setOpen(false);
         triggerRef.current?.focus();
+        return;
       }
+      if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+      const list = items();
+      if (!list.length) return;
+      const current = list.indexOf(document.activeElement as HTMLElement);
+      let next: number;
+      if (event.key === "Home") next = 0;
+      else if (event.key === "End") next = list.length - 1;
+      else if (event.key === "ArrowDown") next = (current + 1) % list.length;
+      else next = (current - 1 + list.length) % list.length;
+      event.preventDefault();
+      list[next]?.focus();
     }
     document.addEventListener("pointerdown", onPointerDown);
     document.addEventListener("keydown", onKeyDown);
@@ -174,7 +195,9 @@ export function PreferencesMenu({
       </button>
       {open && (
         <div
+          ref={menuRef}
           role="menu"
+          aria-label={t("Preferences")}
           className="absolute right-0 z-30 mt-2 w-56 animate-fade-up overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg shadow-slate-900/5 dark:border-slate-700 dark:bg-slate-800"
         >
           <LanguageOptions onChange={onLanguageChange} onPicked={closeAndFocus} />
diff --git a/packages/ui/src/RichText.tsx b/packages/ui/src/RichText.tsx
index 58eabe5..d4dd1fa 100644
--- a/packages/ui/src/RichText.tsx
+++ b/packages/ui/src/RichText.tsx
@@ -6,24 +6,28 @@
  * security boundary: every rich field is cleaned on save/import, so the
  * stored HTML is safe to inject here. Pairs with `RichTextEditor`. */
 
+/** The default prose styling of `RichText`. Exported so a call site can build
+ *  on it (`className={\`${richTextClass} mt-4\`}`) instead of copying it. */
+export const richTextClass =
+  "text-slate-700 dark:text-slate-300 [&_img]:max-w-full [&_img]:h-auto [&_p]:my-2 " +
+  "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5 " +
+  "[&_h2]:mt-4 [&_h2]:mb-1 [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-slate-900 dark:[&_h2]:text-slate-100 " +
+  "[&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-slate-900 dark:[&_h3]:text-slate-100 " +
+  "[&_a]:font-medium [&_a]:text-brand-700 [&_a]:underline dark:[&_a]:text-brand-300 " +
+  "[&_strong]:font-semibold [&_em]:italic";
+
 export interface RichTextProps {
   html: string;
+  /** Fully REPLACES the default styling (`richTextClass`) — it is not
+   *  appended — so a migrated call site can render byte-identically to its
+   *  previous markup; some sites use large-display classes (text-3xl,
+   *  [&_img]:max-h-64, [&_ul]:pl-8) that would clash with the prose default.
+   *  To extend the default instead, compose it: `${richTextClass} mt-4`. */
   className?: string;
 }
 
 export function RichText({ html, className }: RichTextProps) {
-  // A caller-supplied className fully REPLACES the default styling (it is not
-  // appended), so a migrated call site can render byte-identically to its
-  // previous markup — some sites use large-display classes (text-3xl,
-  // [&_img]:max-h-64, [&_ul]:pl-8) that would clash with the prose default.
-  // Sites that pass nothing get a sane prose default.
-  const cls =
-    className ??
-    "text-slate-700 dark:text-slate-300 [&_img]:max-w-full [&_img]:h-auto [&_p]:my-2 " +
-    "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5 " +
-    "[&_h2]:mt-4 [&_h2]:mb-1 [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-slate-900 dark:[&_h2]:text-slate-100 " +
-    "[&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-slate-900 dark:[&_h3]:text-slate-100 " +
-    "[&_a]:font-medium [&_a]:text-brand-700 [&_a]:underline dark:[&_a]:text-brand-300 " +
-    "[&_strong]:font-semibold [&_em]:italic";
-  return <div className={cls} dangerouslySetInnerHTML={{ __html: html }} />;
+  return (
+    <div className={className ?? richTextClass} dangerouslySetInnerHTML={{ __html: html }} />
+  );
 }
diff --git a/packages/ui/src/RichTextEditor.tsx b/packages/ui/src/RichTextEditor.tsx
index 91bc28c..1cfeca1 100644
--- a/packages/ui/src/RichTextEditor.tsx
+++ b/packages/ui/src/RichTextEditor.tsx
@@ -59,6 +59,11 @@ export interface RichTextEditorProps {
    *  label already exists (e.g. `TranslatableField`'s `labelId`). */
   labelledBy?: string;
   id?: string;
+  /** `false` renders the content read-only in the editor's own frame — no
+   *  toolbar, no caret, pasted/dropped files ignored — e.g. while a form is
+   *  saving or for a viewer without edit rights. Default `true`. (Pure
+   *  display of stored HTML is `RichText`, which costs no TipTap.) */
+  editable?: boolean;
 }
 
 function ToolbarButton({
@@ -105,11 +110,12 @@ export function RichTextEditor({
   ariaLabel,
   labelledBy,
   id,
+  editable = true,
 }: RichTextEditorProps) {
   const { t } = useTranslation();
 
   async function insertImageFile(editor: Editor, file: File, pos?: number) {
-    if (!onUploadImage) return;
+    if (!onUploadImage || !editor.isEditable) return;
     let url: string;
     try {
       url = await onUploadImage(file);
@@ -142,6 +148,7 @@ export function RichTextEditor({
     // blocks (ausleihbar#44/#45, basicbar#9). The same ProseMirror base rules
     // ship in base.css instead.
     injectCSS: false,
+    editable,
     extensions: [
       StarterKit.configure({
         heading: { levels: [2, 3] },
@@ -189,7 +196,7 @@ export function RichTextEditor({
           // :focus-visible ring (base.css) would bulge out past the border and
           // look wider than the toolbar. Suppress it — the container's
           // focus-within:border-brand-600 already signals focus.
-          "min-h-28 max-h-[420px] overflow-y-auto rounded-b-lg px-3 py-2 " +
+          "min-h-28 max-h-[420px] overflow-y-auto rounded-lg px-3 py-2 " +
           "focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 " +
           "[&_img]:max-w-full [&_img]:h-auto [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 " +
           "[&_p]:my-1 [&_li]:my-0.5 [&_h2]:mt-2 [&_h2]:mb-1 [&_h2]:text-xl [&_h2]:font-bold " +
@@ -253,6 +260,12 @@ export function RichTextEditor({
     }
   }, [editor, value]);
 
+  // `editable` in useEditor only seeds the initial state; flips afterwards
+  // (e.g. a form toggling into "saving") go through setEditable.
+  useEffect(() => {
+    if (editor && editor.isEditable !== editable) editor.setEditable(editable);
+  }, [editor, editable]);
+
   if (!editor) return null;
 
   function setLink() {
@@ -276,86 +289,92 @@ export function RichTextEditor({
   }
 
   return (
-    <div className="rounded-lg border border-slate-300 dark:border-slate-700 focus-within:ring-2 focus-within:ring-brand-600 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-slate-950">
-      <div className="flex flex-nowrap gap-1 overflow-x-auto border-b border-slate-200 dark:border-slate-800 px-2 py-1">
-        <ToolbarButton
-          label={t("Bold")}
-          active={editor.isActive("bold")}
-          onClick={() => editor.chain().focus().toggleBold().run()}
-        >
-          <BoldIcon aria-hidden className="h-4 w-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          label={t("Italic")}
-          active={editor.isActive("italic")}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-        >
-          <ItalicIcon aria-hidden className="h-4 w-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          label={t("Heading (large)")}
-          active={editor.isActive("heading", { level: 2 })}
-          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        >
-          <Heading2 aria-hidden className="h-4 w-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          label={t("Heading (small)")}
-          active={editor.isActive("heading", { level: 3 })}
-          onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        >
-          <Heading3 aria-hidden className="h-4 w-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          label={t("Bulleted list")}
-          active={editor.isActive("bulletList")}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-        >
-          <List aria-hidden className="h-4 w-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          label={t("Numbered list")}
-          active={editor.isActive("orderedList")}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        >
-          <ListOrdered aria-hidden className="h-4 w-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          label={t("Link")}
-          active={editor.isActive("link")}
-          onClick={setLink}
-        >
-          <LinkIcon aria-hidden className="h-4 w-4" />
-        </ToolbarButton>
-        {onUploadImage && (
-          <label
-            className="flex cursor-pointer items-center rounded px-2 py-1 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus-within:ring-2 focus-within:ring-brand-600 focus-within:ring-offset-1"
-            title={t("Insert image (or drag and drop)")}
+    <div
+      className={`rounded-lg border border-slate-300 dark:border-slate-700 focus-within:ring-2 focus-within:ring-brand-600 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-slate-950 ${
+        editable ? "" : "bg-slate-50 dark:bg-slate-900"
+      }`}
+    >
+      {editable && (
+        <div className="flex flex-nowrap gap-1 overflow-x-auto border-b border-slate-200 dark:border-slate-800 px-2 py-1">
+          <ToolbarButton
+            label={t("Bold")}
+            active={editor.isActive("bold")}
+            onClick={() => editor.chain().focus().toggleBold().run()}
+          >
+            <BoldIcon aria-hidden className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            label={t("Italic")}
+            active={editor.isActive("italic")}
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+          >
+            <ItalicIcon aria-hidden className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            label={t("Heading (large)")}
+            active={editor.isActive("heading", { level: 2 })}
+            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
           >
-            <ImagePlus aria-hidden className="h-4 w-4" />
-            <input
-              type="file"
-              accept="image/*"
-              aria-label={t("Insert image (or drag and drop)")}
-              className="sr-only"
-              onChange={(event) => {
-                const file = event.target.files?.[0];
-                if (file) void insertImageFile(editor, file);
-                event.target.value = "";
-              }}
-            />
-          </label>
-        )}
-        {onUploadImage && (
+            <Heading2 aria-hidden className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            label={t("Heading (small)")}
+            active={editor.isActive("heading", { level: 3 })}
+            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+          >
+            <Heading3 aria-hidden className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            label={t("Bulleted list")}
+            active={editor.isActive("bulletList")}
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+          >
+            <List aria-hidden className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            label={t("Numbered list")}
+            active={editor.isActive("orderedList")}
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          >
+            <ListOrdered aria-hidden className="h-4 w-4" />
+          </ToolbarButton>
           <ToolbarButton
-            label={t("Image description")}
-            disabled={!editor.isActive("image")}
-            onClick={setImageAlt}
+            label={t("Link")}
+            active={editor.isActive("link")}
+            onClick={setLink}
           >
-            <Captions aria-hidden className="h-4 w-4" />
+            <LinkIcon aria-hidden className="h-4 w-4" />
           </ToolbarButton>
-        )}
-      </div>
+          {onUploadImage && (
+            <label
+              className="flex cursor-pointer items-center rounded px-2 py-1 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus-within:ring-2 focus-within:ring-brand-600 focus-within:ring-offset-1"
+              title={t("Insert image (or drag and drop)")}
+            >
+              <ImagePlus aria-hidden className="h-4 w-4" />
+              <input
+                type="file"
+                accept="image/*"
+                aria-label={t("Insert image (or drag and drop)")}
+                className="sr-only"
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  if (file) void insertImageFile(editor, file);
+                  event.target.value = "";
+                }}
+              />
+            </label>
+          )}
+          {onUploadImage && (
+            <ToolbarButton
+              label={t("Image description")}
+              disabled={!editor.isActive("image")}
+              onClick={setImageAlt}
+            >
+              <Captions aria-hidden className="h-4 w-4" />
+            </ToolbarButton>
+          )}
+        </div>
+      )}
       <EditorContent editor={editor} />
     </div>
   );
diff --git a/packages/ui/src/TranslatableField.tsx b/packages/ui/src/TranslatableField.tsx
index d583ffd..a57e4a6 100644
--- a/packages/ui/src/TranslatableField.tsx
+++ b/packages/ui/src/TranslatableField.tsx
@@ -11,16 +11,17 @@
  * columns (`title_de`/`title_en`) as well as `{ lang: text }` maps (bridge
  * with `localizedMap`/`setLocalizedLang`). Custom editors (rich text,
  * Markdown, …) plug in via `renderInput`; they stay in the tool. */
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Languages } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import i18n, { SUPPORTED_LANGUAGES } from "./i18n";
+import { SUPPORTED_LANGUAGES } from "./i18n";
 import {
   defaultContentLangLabel,
   getDefaultContentLang,
   isTranslationEnabled,
 } from "./contentLang";
+import { isEmptyHtml } from "./html";
 import {
   MAX_TRANSLATE_LENGTH,
   useTranslationForm,
@@ -30,26 +31,23 @@ import {
 
 /** Language tabs ordered with the current UI language first, so the primary
  *  entry happens in the editor's own language. */
-function orderedLangs(): { code: string; label: string }[] {
-  const ui = (i18n.resolvedLanguage ?? "en").split("-")[0];
+function orderedLangs(uiLang: string): { code: string; label: string }[] {
+  const ui = uiLang.split("-")[0];
   const langs = SUPPORTED_LANGUAGES.map((l) => ({ code: l.code, label: l.label }));
-  return [...langs].sort((a, b) => {
+  return langs.sort((a, b) => {
     if (a.code === ui) return -1;
     if (b.code === ui) return 1;
     return 0;
   });
 }
 
-function stripHtml(html: string): string {
-  const div = document.createElement("div");
-  div.innerHTML = html;
-  return div.textContent?.trim() ?? "";
-}
-
 export interface RenderInputArgs {
   lang: string;
   value: string;
   onChange: (value: string) => void;
+  /** The field's `onBlur` prop, passed through so a custom editor can wire
+   *  the same blur-save the default input gets. */
+  onBlur?: () => void;
   id: string;
   /** Id of the visible `<label>` element, when there is one (omitted for a
    *  labelless/compact field) — pass through as e.g. `aria-labelledby` on a
@@ -86,8 +84,8 @@ export interface TranslatableFieldProps {
   placeholder?: string;
   /** Helper text shown under the field (applies to every language). */
   hint?: string;
-  /** Fires when the active-language input loses focus (e.g. onBlur-save);
-   *  not wired for `renderInput` editors. */
+  /** Fires when the active-language input loses focus (e.g. onBlur-save).
+   *  A `renderInput` editor receives it as `args.onBlur` and wires it itself. */
   onBlur?: () => void;
   /** Fires with the currently-edited language on mount and on every tab
    *  switch — lets a parent-rendered live preview follow the tab. */
@@ -95,8 +93,9 @@ export interface TranslatableFieldProps {
   /** Single-language authoring (e.g. an "easy mode"): no tabs, no translate
    *  button, no "translate all" registration; edits the canonical language. */
   singleLanguage?: boolean;
-  /** "html" marks values as rich HTML: status dots ignore markup and the
-   *  translate call preserves it (`format=html`). */
+  /** "html" marks values as rich HTML: status dots ignore markup (an empty
+   *  `<p></p>` counts as empty, an image-only value as filled — see
+   *  `isEmptyHtml`) and the translate call preserves it (`format=html`). */
   format?: TranslateFormat;
   /** Languages whose translation is potentially outdated (another language
    *  changed since the last recorded sync — computed by the backend via
@@ -139,9 +138,10 @@ export function TranslatableField({
   onTranslated,
   renderInput,
 }: TranslatableFieldProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const defaultLang = getDefaultContentLang();
-  const langs = orderedLangs();
+  const uiLang = i18n.resolvedLanguage ?? "en";
+  const langs = useMemo(() => orderedLangs(uiLang), [uiLang]);
   const [active, setActive] = useState(
     singleLanguage ? defaultLang : (langs[0]?.code ?? defaultLang),
   );
@@ -156,11 +156,18 @@ export function TranslatableField({
   const value = values[active] ?? "";
   const set = (v: string) => onChange(active, v);
 
-  /** Filled-state per language; rich HTML counts markup-only as empty. */
-  const plainOf = (lang: string) => {
-    const text = values[lang] ?? "";
-    return format === "html" ? stripHtml(text) : text.trim();
-  };
+  // Filled-state per language. For rich HTML this parses the value via the
+  // DOM, so it is computed once per render of the values, not once per
+  // tab/lookup — a form with many rich fields re-renders on every keystroke.
+  const filledByLang = useMemo(() => {
+    const out: Record<string, boolean> = {};
+    for (const l of SUPPORTED_LANGUAGES) {
+      const text = values[l.code] ?? "";
+      out[l.code] = format === "html" ? !isEmptyHtml(text) : !!text.trim();
+    }
+    return out;
+  }, [values, format]);
+  const filledIn = (lang: string) => filledByLang[lang] ?? false;
 
   // Register with the form-wide "translate all" controller (if present) and
   // keep a live snapshot it can read/write. Follow the language it switches to.
@@ -181,7 +188,7 @@ export function TranslatableField({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [forcedNonce]);
 
-  const canonicalEmpty = required && !plainOf(defaultLang);
+  const canonicalEmpty = required && !filledIn(defaultLang);
 
   const activeStale = !singleLanguage && stale.includes(active);
 
@@ -191,9 +198,9 @@ export function TranslatableField({
   // from whichever other language already has text — so the missing language
   // is filled regardless of which one was entered first.
   const sourceLang =
-    defaultLang !== active && plainOf(defaultLang)
+    defaultLang !== active && filledIn(defaultLang)
       ? defaultLang
-      : langs.find((l) => l.code !== active && plainOf(l.code))?.code;
+      : langs.find((l) => l.code !== active && filledIn(l.code))?.code;
   const source = sourceLang ? (values[sourceLang] ?? "").trim() : "";
   const sourceLabel =
     langs.find((l) => l.code === sourceLang)?.label ?? sourceLang ?? "";
@@ -203,7 +210,7 @@ export function TranslatableField({
     !singleLanguage &&
     !!form &&
     isTranslationEnabled() &&
-    (!plainOf(active) || activeStale) &&
+    (!filledIn(active) || activeStale) &&
     !!source &&
     sourceLang !== active;
 
@@ -251,9 +258,15 @@ export function TranslatableField({
           {showTabs && (
             <div className="flex gap-1" role="tablist" aria-label={tabsLabel}>
               {langs.map((lang) => {
-                const filled = !!plainOf(lang.code);
+                const filled = filledIn(lang.code);
                 const isActive = lang.code === active;
                 const isStale = stale.includes(lang.code);
+                const status =
+                  filled && isStale
+                    ? t("translation may be outdated")
+                    : filled
+                      ? t("translated")
+                      : t("not translated");
                 // A filled language gets a solid dot; an empty one a hollow dot,
                 // so you can tell at a glance whether the language you're *not*
                 // viewing has text. A missing required default language and a
@@ -280,19 +293,19 @@ export function TranslatableField({
                         ? "bg-brand-400 text-slate-900"
                         : "bg-slate-100 text-slate-500 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
                     }`}
-                    title={`${lang.label} — ${
-                      filled && isStale
-                        ? t("translation may be outdated")
-                        : filled
-                          ? t("translated")
-                          : t("not translated")
-                    }`}
+                    title={`${lang.label} — ${status}`}
                   >
                     <span
                       aria-hidden="true"
                       className={`inline-block h-1.5 w-1.5 rounded-full border ${dotClass}`}
                     />
                     {lang.code}
+                    {/* The dot is colour-only; give screen readers the same
+                        status the title shows on hover (WCAG 1.4.1). */}
+                    <span className="sr-only">
+                      {" "}
+                      — {status}
+                    </span>
                   </button>
                 );
               })}
@@ -302,7 +315,7 @@ export function TranslatableField({
       )}
       <div className="mt-1">
         {renderInput ? (
-          renderInput({ lang: active, value, onChange: set, id: inputId, labelId })
+          renderInput({ lang: active, value, onChange: set, onBlur, id: inputId, labelId })
         ) : multiline ? (
           <textarea
             id={inputId}
diff --git a/packages/ui/src/TranslationForm.tsx b/packages/ui/src/TranslationForm.tsx
index 3e0ab22..db127c6 100644
--- a/packages/ui/src/TranslationForm.tsx
+++ b/packages/ui/src/TranslationForm.tsx
@@ -71,9 +71,15 @@ export const MAX_TRANSLATE_LENGTH = 5000;
 export function TranslationFormProvider({
   children,
   translate,
+  controlsClassName = "fixed bottom-6 right-6 z-40",
 }: {
   children: ReactNode;
   translate: TranslateFn;
+  /** Positioning of the floating controls (replaces the default
+   *  `fixed bottom-6 right-6 z-40`) — e.g. to lift them above a tool's own
+   *  sticky action bar on narrow screens: `fixed bottom-6 right-6 z-40
+   *  max-md:bottom-[5.5rem]`. The pill's own layout is not affected. */
+  controlsClassName?: string;
 }) {
   const { t } = useTranslation();
   const registry = useRef(
@@ -102,8 +108,9 @@ export function TranslationFormProvider({
   }, []);
 
   const defaultLang = getDefaultContentLang();
-  const targets = SUPPORTED_LANGUAGES.map((l) => l.code).filter(
-    (c) => c !== defaultLang,
+  const targets = useMemo(
+    () => SUPPORTED_LANGUAGES.map((l) => l.code).filter((c) => c !== defaultLang),
+    [defaultLang],
   );
 
   async function translateAll() {
@@ -167,7 +174,7 @@ export function TranslationFormProvider({
     <TranslationFormContext.Provider value={contextValue}>
       {children}
       {showControls && (
-        <div className="fixed bottom-6 right-6 z-40 flex flex-col items-end gap-1">
+        <div className={`${controlsClassName} flex flex-col items-end gap-1`}>
           {error && (
             <span className="rounded-md bg-white px-2 py-1 text-xs text-rose-600 shadow dark:bg-slate-800 dark:text-rose-400">
               {error}
diff --git a/packages/ui/src/html.ts b/packages/ui/src/html.ts
new file mode 100644
index 0000000..78e8e81
--- /dev/null
+++ b/packages/ui/src/html.ts
@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2026 Universität Osnabrück (virtUOS)
+
+/** Small helpers for the HTML that rich-text fields store. They parse via the
+ * DOM (not a regex), so entities and nested markup are handled like the
+ * browser handles them; nothing is executed — `innerHTML` on a detached
+ * element never runs scripts or loads resources synchronously. */
+
+/** The visible text of an HTML fragment, whitespace-trimmed. */
+export function stripHtml(html: string): string {
+  if (!html) return "";
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div.textContent?.trim() ?? "";
+}
+
+/** True when a stored rich-text value carries no content: no visible text and
+ * no image. An editor that was opened and closed again leaves `<p></p>`
+ * behind — that is empty; an image-only caption is not. */
+export function isEmptyHtml(html: string | null | undefined): boolean {
+  if (!html) return true;
+  if (stripHtml(html)) return false;
+  return !/<img[\s>]/i.test(html);
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index c95698b..0c38973 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -23,10 +23,11 @@ export type { RenderInputArgs, TranslatableFieldProps } from "./TranslatableFiel
 
 export { AppearanceControl, LanguageOptions, PreferencesMenu } from "./Preferences";
 
-export { RichTextEditor } from "./RichTextEditor";
-export type { RichTextEditorProps } from "./RichTextEditor";
-export { RichText } from "./RichText";
+// RichTextEditor (TipTap) deliberately lives in its own entry,
+// "@basicbar/ui/rich-text-editor" — see src/rich-text-editor.ts.
+export { RichText, richTextClass } from "./RichText";
 export type { RichTextProps } from "./RichText";
+export { isEmptyHtml, stripHtml } from "./html";
 
 export {
   defaultContentLangLabel,
diff --git a/packages/ui/src/rich-text-editor.ts b/packages/ui/src/rich-text-editor.ts
new file mode 100644
index 0000000..c086986
--- /dev/null
+++ b/packages/ui/src/rich-text-editor.ts
@@ -0,0 +1,9 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2026 Universität Osnabrück (virtUOS)
+
+/** Separate entry (`@basicbar/ui/rich-text-editor`) so the TipTap/ProseMirror
+ * dependency only lands in bundles that actually render the editor — the main
+ * entry stays free of it. `RichText` (the renderer) has no such dependency
+ * and lives in the main entry. */
+export { RichTextEditor } from "./RichTextEditor";
+export type { RichTextEditorProps } from "./RichTextEditor";