From 58fd1612a1d917d4d48df0a33a011b415876c638 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Thu, 9 Jul 2026 10:52:45 -0500
Subject: [PATCH 1/3] Add plan document for converting Talking Book tool to
 React

A design/hand-off document (Steps 0-5) describing how to convert the last
non-React toolbox tool to React: move the AudioRecording engine to the page
iframe, turn the button-state machine and controls into a React component in
the toolbox, and stop audioRecording.ts from being duplicated into the page
bundle. Step 6 (retiring the legacy non-React toolbox framework) is documented
as a deferred follow-up.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../TalkingBook-React-Conversion-Plan.md      | 327 ++++++++++++++++++
 1 file changed, 327 insertions(+)
 create mode 100644 src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md

diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md
new file mode 100644
index 000000000000..478afac598f7
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md
@@ -0,0 +1,327 @@
+# Plan: Convert the Talking Book tool to React
+
+**Status:** proposed / not yet started.
+**Scope of this document:** Steps 0–5 (the conversion). Step 6 (retiring the old
+non-React toolbox framework) is deferred to a separate follow-up PR and is described
+briefly at the end so it isn't lost.
+
+Talking Book is the **last** non-React toolbox tool. Converting it lets us later delete
+the entire legacy non-React tool framework (Step 6).
+
+---
+
+## 1. Current architecture (as of this writing)
+
+### 1.1 `talkingBook.ts`
+`TalkingBookTool implements ITool` directly (not via `ToolboxToolReactAdaptor`). Its
+`makeRootElement()` **throws** — the tool's UI is the pug file
+`talkingBookToolboxTool.pug`, routed in through two legacy hard-coded maps:
+
+- `subpath` in `toolbox.ts` (~line 1273): `talkingBookTool: "talkingBook/talkingBookToolboxTool.html"`
+- `legacyToolSubPathByToolId` in `ToolboxRoot.tsx` (~line 71): `talkingBook: "talkingBook/talkingBookToolboxTool.html"`
+
+`talkingBook.ts` is a thin lifecycle shim that forwards to the `AudioRecording`
+singleton: `showTool` (async: `initializeTalkingBookToolAsync` + `setupForRecordingAsync`),
+`newPageReady` (async), `hideTool`, `detachFromPage`, and async markup
+(`isUpdateMarkupAsync() === true`; `updateMarkupAsync()` returns
+`getAudioRecorder().getUpdateMarkupAction()`).
+
+### 1.2 `audioRecording.ts` (~4,900 lines) — engine **and** tool UI, running in the toolbox iframe
+This is the important, counter-intuitive fact: **the `AudioRecording` object currently
+runs in the _toolbox_ iframe, not the page iframe.** Evidence:
+
+- The constructor reads toolbox controls via its own `document`:
+  `document.getElementById("audio-split")`, `#audio-meter`, `#player`.
+- `initializeTalkingBookToolAsync` wires jQuery handlers to the toolbox buttons
+  (`$("#audio-record").mousedown(...).mouseup(...)`, `$("#audio-next").click(...)`, etc.).
+- It reaches _into_ the page iframe for content via
+  `getPageFrame()` → `parent.window.document.getElementById("page")` and `getPageDocBody()`.
+
+So the object owns two very different kinds of responsibility:
+
+1. **Tool UI** (toolbox side): the 7 main buttons, their counters, the level meter,
+   device selection, the `<audio>` player, the "disabling overlay", and the
+   button-state machine.
+2. **Content engine** (conceptually page side): sentence markup / `audio-sentence`
+   spans, highlighting, playback + timings, recording (via C# API), splitting, image
+   descriptions, and playback order.
+
+It already renders one React fragment: `updateDisplay()` renders
+`TalkingBookAdvancedSection` (`talkingBookAdvancedSection.tsx`) into
+`#advanced-talking-book-controls-react-container` via `renderRoot`, using a props object
+the engine computes.
+
+### 1.3 The button-state machine (the part that changes most)
+- `Status` enum: `Disabled | DisabledUnlessHover | Enabled | Expected | Active`, applied
+  today as **CSS classes on the 7 `<button>` elements** by `setStatus`/`getStatus`.
+- Event wiring lives in `initializeTalkingBookToolAsync` (jQuery).
+- **Decision logic:** `changeStateAndSetExpectedAsync` → `updateButtonStateAsync` →
+  `updateButtonStateHelper` (+ `updateListenButtonStateAsync`) query the recording API
+  and compute the correct status for each button. **This logic is valuable and must be
+  preserved** — only its _output_ (poke the DOM) should change to (drive React state).
+- Related helpers: `setEnabledOrExpecting`, `isEnabledOrExpected`,
+  `removeExpectedStatusFromAll`, `disableInteraction`, `setDisableEverythingMode`.
+
+### 1.4 Cross-bundle duplication hazard
+`audioRecording.ts` is **also pulled into the page bundle** by static-only imports:
+
+| Importer (page bundle) | What it uses |
+|---|---|
+| `bloomField/BloomField.ts` | `AudioRecording.createValidXhtmlUniqueId()` |
+| `js/canvasElementManager/CanvasElementDuplication.ts` | `AudioRecording.createValidXhtmlUniqueId()` |
+| `js/canvasElementManager/CanvasElementContextControls.tsx` | `AudioRecording.audioExistsForIdsAsync()` |
+| `toolbox/canvas/canvasControlRegistry.ts` | `AudioRecording.showTalkingBookTool()` |
+| `js/bloomImages.ts` | constant `kPlaybackOrderContainerClass` |
+
+That creates a **second copy** of the class and of the module-level `theOneAudioRecorder`
+in the page iframe. Today it's masked because `getAudioRecorder()` deliberately routes
+through `getToolboxBundleExports().getTheOneAudioRecorderForExportOnly()` to reach the
+real (toolbox) singleton. This is the "accidental duplicate singleton across iframes"
+hazard; Step 0 removes it.
+
+### 1.5 The iframe framework (context for the move)
+Cross-iframe calls always go through `bookEdit/js/workspaceFrames.ts`:
+`getEditablePageBundleExports()` (the `#page` frame's `window.editablePageBundle`),
+`getToolboxBundleExports()` (the `#toolbox` frame's `window.toolboxBundle`), and
+`getWorkspaceBundleExports()` (root). You must **never `import`** across the boundary —
+that pulls a file into the wrong bundle. Bundles are Vite/Rollup entry points in
+`src/BloomBrowserUI/vite.config.mts` (`editablePageBundle` = `bookEdit/editablePage.ts`;
+`toolboxBundle` = `bookEdit/toolbox/toolboxBootstrap.ts`).
+
+The toolbox iframe is expected to be **merged into the root document eventually** (the
+workspace root was already de-iframed). This plan moves us toward that: the UI becomes
+iframe-agnostic React, and the engine lives with the content it manipulates.
+
+### 1.6 The React tool pattern to follow (Motion / Music / LeveledReader)
+- A tool extends `ToolboxToolReactAdaptor` (`toolboxToolReactAdaptor.tsx`) and implements
+  `makeRootElement(): HTMLDivElement` + `id(): string`. The base class provides no-op
+  lifecycle defaults (all overridable, may be async) and `adaptReactElement(element)`
+  which mounts React into a wrapper div via `renderRoot`.
+- Registration is already done: `ToolBox.registerTool(new TalkingBookTool())` in
+  `toolboxBootstrap.ts`; `talkingBook` is in `alwaysOnToolIds` and has an icon entry in
+  `ToolboxRoot.tsx`.
+- Styling: MUI (`@mui/material`) + Emotion `css` prop, wrapped in
+  `<ThemeProvider theme={toolboxTheme}>` (from `bloomMaterialUITheme`), using Bloom's
+  `react_components` (`BloomButton`, `BloomSwitch`, `BloomTooltip`, the l10n components
+  `Div`/`Span`/`LocalizedString`/`useL10n`, `ToolBottomHelpLink`).
+
+---
+
+## 2. Target architecture
+
+```
+┌─ Toolbox/root iframe ────────────┐        ┌─ Page iframe ─────────────────────┐
+│ TalkingBookControls (React)      │        │ AudioRecording engine (the object)│
+│  • 7 main buttons + counters     │        │  • sentence markup / audio-sentence│
+│  • record/play/split/next/prev/  │──────► │  • highlight + playback + timings  │
+│    clear/listen handlers         │ calls  │  • recording (C# API) + split      │
+│  • level meter + device display  │ via    │  • image descriptions, playback    │
+│  • advanced section (existing)   │exports │    order, fixHighlighting          │
+│  • disabling overlay             │◄────── │  • owns <audio> player             │
+│  • holds button-state model      │notify  │                                    │
+│    as React state                │        │  document === the page document    │
+└──────────────────────────────────┘        └────────────────────────────────────┘
+        TalkingBookTool extends ToolboxToolReactAdaptor
+```
+
+- **Toolbox/root side** owns everything the user sees and clicks, as a normal React tool.
+- **Page side** owns the DOM engine. Because it now runs _in_ the page, every
+  `getPageDocBody()` / `getPageFrame()` collapses to the local `document`.
+
+---
+
+## 3. Communication design across the boundary
+
+Use the existing `workspaceFrames` framework; no new global plumbing.
+
+1. **UI → engine (commands).** Add `getTheOneAudioRecorder()` to `IPageFrameExports` /
+   `window.editablePageBundle` in `editablePage.ts`. Flip `getAudioRecorder()` to pull
+   from `getEditablePageBundleExports()` instead of the toolbox exports. The React
+   component invokes engine methods through this reference:
+   `startRecordCurrentAsync`, `endRecordCurrentAsync`, `togglePlayCurrentAsync`,
+   `listenAsync`, `clearRecordingAsync`, `moveToNextAudioElement`,
+   `moveToPrevAudioElementAsync`, `setRecordingModeAsync`, `setShowPlaybackOrderMode`,
+   `setShowingImageDescriptions`, `insertSegmentMarker`, import/split, device selection.
+
+2. **Engine → UI (state).** Extend `IAudioRecorder` with
+   `registerStateListener(cb: (state: TalkingBookUiState) => void)`. The engine computes
+   a single immutable `TalkingBookUiState` and pushes it to the listener whenever it
+   changes:
+
+   ```ts
+   interface TalkingBookUiState {
+       buttons: Record<
+           "record" | "play" | "split" | "next" | "prev" | "clear" | "listen",
+           Status
+       >;
+       recordingMode: RecordingMode;
+       hasAudio: boolean;
+       hasRecordableDivs: boolean;
+       haveACurrentTextboxModeRecording: boolean;
+       inShowPlaybackOrderMode: boolean;
+       showingImageDescriptions: boolean;
+       currentInputDevice?: { name: string; iconSrc: string };
+       disableEverything: boolean;
+       isPlaying: boolean; // drives the Play/Pause label
+   }
+   ```
+
+   This subsumes both the existing `TalkingBookAdvancedSection` props flow and the
+   `Status`-class DOM poking into one channel. `setStatus`/`getStatus`/
+   `updateButtonStateHelper` are rewritten to read/write this in-memory model instead of
+   the DOM; **the decision logic in `changeStateAndSetExpectedAsync` and
+   `updateButtonState*` stays as close to byte-for-byte as possible.**
+
+`IAudioRecorder` (`IAudioRecorder.ts`) is the deliberately implementation-free interface
+other iframes use; extend it, don't bypass it.
+
+---
+
+## 4. Decomposition — what moves where
+
+| Concern | Today (`audioRecording.ts`, toolbox) | Target |
+|---|---|---|
+| 7 buttons + counters + expected/active look | `<button>` + `setStatus` CSS classes | React in `TalkingBookControls` (MUI/emotion), driven by `state.buttons` |
+| Event handlers | jQuery `.click/.mousedown` in `initializeTalkingBookToolAsync` | React `onClick`/`onMouseDown/Up` → engine methods via exports |
+| Button-state **decision logic** | `changeStateAndSetExpectedAsync`, `updateButtonState*`, `updateListenButtonState`, `disableInteraction` | **Stays in engine**, retargeted to emit `TalkingBookUiState` |
+| `Status`/`setStatus`/`getStatus`/`removeExpectedStatusFromAll`/`setEnabledOrExpecting`/`isEnabledOrExpected` | DOM class manipulation | small in-memory model getters/setters, or folded into React |
+| Level meter canvas + `addAudioLevelListener` | `#audio-meter` fed by websocket | React (toolbox); engine forwards peak levels (via state field or a small websocket subscription in the component) |
+| Device selection (`selectInputDevice`, `updateInputDeviceDisplay`) | `#audio-devlist`, `#audio-input-dev` | React (toolbox); engine keeps `audio/devices` API calls and returns data |
+| `<audio id="player">` + play-label swap (`Common.Pause`) | toolbox pug element | player element **moves to page iframe** with the engine; "Play/Pause" label is UI → React (`state.isPlaying`) |
+| Disabling overlay (`setDisableEverythingMode`, `#disablingOverlay`) | toolbox pug + class toggling | React conditional styling from `state.disableEverything` |
+| Advanced section | already React, re-rendered via `renderRoot` | becomes a child of `TalkingBookControls`; `updateDisplay`'s `renderRoot` call deleted |
+| Page markup / highlight / split / timings / image-desc / playback-order | engine, reaching across via `getPageDocBody()` | **stays engine, now runs page-side**; `getPageDocBody()`→`document.body`, `getPageFrame()` retired |
+| Help link | pug `a.help-link` | `ToolBottomHelpLink` React component |
+| l10n (`data-i18n`) | pug + `insertLangAttributesIntoToolboxElements` | `Div`/`LocalizedString`/`useL10n`; drop the legacy lang-attr path for this tool |
+
+### Churn-minimizing trick (please follow)
+Moving the engine into the page iframe would otherwise change hundreds of call sites
+(`getPageDocBody()` → `document.body`, etc.). Instead, **keep the helper names**
+`getPageDocBody()` / `getPageFrame()` and reimplement only their _bodies_ to return the
+local `document` now that the engine runs page-side. That leaves the bulk of the engine
+untouched so the diff shows only genuine changes. Reviewers strongly prefer that
+`audioRecording.ts` change as little as possible.
+
+---
+
+## 5. Step-by-step
+
+### Step 0 — De-duplicate across bundles (prerequisite + iframe hygiene)
+Extract the page-side-consumed statics/constants into small, dependency-light modules so
+the page bundle stops importing the whole engine:
+
+- `createValidXhtmlUniqueId` → a shared id util (BloomField, CanvasElementDuplication).
+- `audioExistsForIdsAsync` + `kAnyRecordingApiUrl` → a shared audio-query util
+  (CanvasElementContextControls).
+- `kPlaybackOrderContainerClass`, `kAudioSentence`, `kAudioCurrent`, `AudioMode` → a
+  shared constants file (bloomImages, etc.).
+- `showTalkingBookTool` → a toolbox-activation helper (canvasControlRegistry).
+
+Then confirm via the Vite manifest / chunk output that `audioRecording.ts` is in exactly
+**one** bundle. Do this first — a clean single-iframe home for the engine is the whole
+point of the move.
+
+### Step 1 — Build `TalkingBookControls` (toolbox React component)
+New `TalkingBookControls.tsx`: renders the check/meter row, the 7 main buttons with
+counter labels, the disabling overlay, `<TalkingBookAdvancedSection>` (reused as-is), and
+the help link — under `<ThemeProvider theme={toolboxTheme}>`, MUI + Emotion,
+`BloomButton`/`BloomSwitch`/`BloomTooltip`/l10n components, matching Motion/Music styling.
+It takes a `TalkingBookUiState` and an engine reference (or a callbacks bundle). Prefer a
+functional component holding `useState` fed by `registerStateListener`. Control styling
+may shift toward the MUI look used by other tools (pixel-identical is not required).
+
+### Step 2 — Refactor the engine's UI layer into a state model
+In `audioRecording.ts`: replace the DOM work in `setStatus`/`getStatus`/
+`removeExpectedStatusFromAll`/`updateDisplay` with reads/writes of an in-memory
+`TalkingBookUiState` + a `notifyStateChanged()` that calls the registered listener.
+Delete the jQuery event wiring in `initializeTalkingBookToolAsync` (React owns events).
+Keep `changeStateAndSetExpectedAsync` and the `updateButtonState*` decision logic intact.
+Repoint `getMediaPlayer`, the level meter, and the device code at their new homes.
+
+### Step 3 — Move the engine to the page iframe & flip the wiring
+- Ensure `theOneAudioRecorder` is constructed page-side; export
+  `getTheOneAudioRecorder()` from `editablePage.ts`. Flip `getAudioRecorder()` to
+  `getEditablePageBundleExports()`.
+- Reimplement `getPageFrame()`/`getPageDocBody()` bodies to return the local document
+  (the churn-minimizer in §4).
+- **Motion/Music narration-player dependency:** both do `new AudioRecording()` in the
+  toolbox purely for playback (`motionTool.tsx`, `musicToolControls.tsx`). Decide during
+  implementation between: (a) keep a slim playback-only path available toolbox-side, or
+  (b) have them obtain the page-side engine for playback via exports. Pick based on how
+  much playback logic they actually touch.
+
+### Step 4 — Convert `TalkingBookTool` to the React adaptor
+- `TalkingBookTool extends ToolboxToolReactAdaptor`; implement `makeRootElement()` →
+  `adaptReactElement(<TalkingBookControls .../>)`. Keep the async lifecycle
+  (`showTool`, `newPageReady`, `updateMarkupAsync` returning the commit fn,
+  `detachFromPage`, `hideTool`). The `updateMarkupAsync` contract (see
+  `toolbox.ts` ~line 1529) must be preserved: it must not mutate the DOM except via the
+  synchronous function it returns.
+- Remove the two legacy routings (`subpath` in `toolbox.ts`, `legacyToolSubPathByToolId`
+  in `ToolboxRoot.tsx`) so the tool flows through `makeRootElement`. Delete the pug file
+  `talkingBookToolboxTool.pug` and its `.html` output reference.
+- Keep the `talkingBook` icon / `alwaysOn` entries in `ToolboxRoot.tsx`.
+
+### Step 5 — Verify iframe hygiene
+- Confirm `TalkingBookControls`/`talkingBook.ts` do **not** leak into the page bundle,
+  and the engine does **not** leak into the toolbox bundle.
+- Confirm exactly one `theOneAudioRecorder` exists (page side).
+- Confirm dialogs (`showAdjustTimingsDialogFromWorkspaceRoot`, the confirm-replace
+  dialog) still render in the **root** document via `getWorkspaceBundleExports()`.
+
+---
+
+## 6. Watch-outs
+
+- **Async / race hazards to respect (and, where cheap, fix):**
+  - `newPageReady` is deliberately re-fired ~600ms later; it must stay idempotent.
+  - The `ensureHighlight` 4-second polling loop is a workaround for BL-10471; the
+    `currentAudioSessionNum` counter guards against stale playback callbacks. Preserve
+    both.
+  - `updateMarkupAsync` must not mutate the DOM except via the returned commit function
+    (BL-10133). Do not regress this when wiring it through React.
+  - Moving the engine page-side removes a class of cross-iframe timing bugs (no more
+    reaching through `parent.window` while frames swap) — a genuine simplification — but
+    re-validate the `showTool` → `setupForRecordingAsync` and page-switch sequences.
+- **Singleton discipline:** after the flip, page-side code uses the local
+  `theOneAudioRecorder`; toolbox/root code always goes through
+  `getEditablePageBundleExports()`. Leave no path that `new`s a second engine in the
+  wrong frame.
+- **Meter websocket** (`audio-recording` context, peak levels): decide whether the React
+  meter subscribes directly or the engine relays; avoid double-subscription.
+- **CSS:** `audioRecording.less`/`.css` is currently loaded into **both** iframes
+  (`editablePage.ts` loads it too). Split into engine-side styles (highlighting on page
+  content) vs UI-side styles (buttons/meter → Emotion in the component) so each iframe
+  gets only what it needs.
+
+---
+
+## 7. Testing
+
+- Keep the existing specs green: `audioRecordingSpec.ts` (~2,400 lines) and
+  `talkingBookSpec.ts` exercise the engine and decision logic we are preserving. Specs
+  that assert on DOM classes / `getStatus` will need porting to the new state model.
+- Manual matrix (from the lifecycle comment at the top of `talkingBook.ts`): open toolbox
+  → tool shows; create/switch page while open; type in a text box; switch tools; close
+  toolbox; Origami "Change Layout" then off. Plus the full **record → check → split
+  (adjust timings) → next** flow, sentence vs whole-text-box modes, import recording,
+  show-playback-order, image descriptions, and input-device switching.
+- Use the `run-bloom` skill to drive the desktop app for manual verification.
+
+---
+
+## 8. Deferred: Step 6 — retire the old non-React toolbox framework (separate PR)
+
+Once Steps 0–5 land and are verified, Talking Book is no longer non-React, so the legacy
+framework can be deleted. This is **intentionally a separate follow-up PR** — it touches
+shared toolbox machinery used by all tools and would swamp the conversion diff; it is not
+meaningfully easier to do in the same change, and the conversion must be proven first.
+
+Candidate deletions for that PR:
+- The `subpath` map and `beginAddTool`'s premade-HTML branch in `toolbox.ts`.
+- `legacyToolSubPathByToolId` and the `LiveToolBodyHost` / legacy jQuery-accordion bridge
+  in `ToolboxRoot.tsx`.
+- `insertLangAttributesIntoToolboxElements` and its `data-i18n` scan.
+- Related pug/HTML build wiring.
+
+Rough size: comparable to the conversion itself.

From ea4e001f5dd4192f274c11c37deff1dd610d0050 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Fri, 10 Jul 2026 14:02:32 -0500
Subject: [PATCH 2/3] Update plan following a Fable review

---
 .../TalkingBook-React-Conversion-Plan.md      | 607 ++++++++++++------
 1 file changed, 406 insertions(+), 201 deletions(-)

diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md
index 478afac598f7..86395fd1f9a6 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBook-React-Conversion-Plan.md
@@ -1,16 +1,36 @@
 # Plan: Convert the Talking Book tool to React
 
 **Status:** proposed / not yet started.
-**Scope of this document:** Steps 0–5 (the conversion). Step 6 (retiring the old
-non-React toolbox framework) is deferred to a separate follow-up PR and is described
-briefly at the end so it isn't lost.
+**Scope of this document:** Phase A (the React conversion, one PR) and Phase B (moving the
+engine into the page iframe, a separate follow-up PR). Step 6 (retiring the old non-React
+toolbox framework) is a third PR, described briefly at the end so it isn't lost.
 
 Talking Book is the **last** non-React toolbox tool. Converting it lets us later delete
 the entire legacy non-React tool framework (Step 6).
 
+## 0. Sequencing rationale — why the engine move is a separate PR
+
+An earlier draft of this plan did the React conversion and the engine move in one PR.
+They are now split, for two reasons:
+
+1. **The engine move is not needed for the goal.** Deleting the legacy framework only
+   requires the tool *UI* to be React. The engine can keep living in the toolbox iframe,
+   reaching into the page exactly as it does today.
+2. **The page iframe reloads on every page switch.** `switchContentPage` in
+   `workspaceRoot.ts` (~line 134) sets `iframe.src = newSource`, destroying the page
+   iframe's whole JS realm. Today `theOneAudioRecorder` lives in the toolbox iframe and
+   **survives for the whole editing session**; moved page-side, it would be torn down and
+   reconstructed on *every page switch*. That is a real architectural change (see §6), not
+   the mechanical "flip the wiring" the earlier draft implied — it needs its own design
+   and its own PR.
+
+The split is also what makes Phase B safe: after Phase A the engine no longer touches any
+toolbox DOM (it talks to the UI only through a state object and a couple of registered
+element refs), so Phase B becomes a pure relocation-and-lifetime problem.
+
 ---
 
-## 1. Current architecture (as of this writing)
+## 1. Current architecture (verified against source, 2026-07)
 
 ### 1.1 `talkingBook.ts`
 `TalkingBookTool implements ITool` directly (not via `ToolboxToolReactAdaptor`). Its
@@ -20,77 +40,134 @@ the entire legacy non-React tool framework (Step 6).
 - `subpath` in `toolbox.ts` (~line 1273): `talkingBookTool: "talkingBook/talkingBookToolboxTool.html"`
 - `legacyToolSubPathByToolId` in `ToolboxRoot.tsx` (~line 71): `talkingBook: "talkingBook/talkingBookToolboxTool.html"`
 
-`talkingBook.ts` is a thin lifecycle shim that forwards to the `AudioRecording`
-singleton: `showTool` (async: `initializeTalkingBookToolAsync` + `setupForRecordingAsync`),
-`newPageReady` (async), `hideTool`, `detachFromPage`, and async markup
-(`isUpdateMarkupAsync() === true`; `updateMarkupAsync()` returns
-`getAudioRecorder().getUpdateMarkupAction()`).
+It is a thin lifecycle shim over the `AudioRecording` singleton, but note the exact
+forwards (the conversion must preserve all of them):
+
+- `showTool()` → module-level `initializeTalkingBookToolAsync()` (lazily constructs the
+  singleton) then `getAudioRecorder().setupForRecordingAsync()`.
+- `newPageReady()` → `showImageDescriptionsIfAny()` (its own page-DOM logic, BL-8515)
+  then `getAudioRecorder().handleNewPageReady(TalkingBookTool.deshroudPhraseDelimiters)`.
+- `hideTool()` → `handleToolHiding()`.
+- `detachFromPage()` → `removeRecordingSetup()`, then `hideImageDescriptions(page)` and
+  `TalkingBookTool.enshroudPhraseDelimiters(page)`.
+- `updateMarkupAsync()` → `getAudioRecorder().getUpdateMarkupAction()`;
+  `isUpdateMarkupAsync()` returns `true`.
+- `beginRestoreSettings()` → `beginLoadSynphonySettings()` (shares sentence-ending
+  punctuation settings with the Leveled Reader tool — easy to lose in conversion, since
+  the adaptor's default `beginRestoreSettings` is a no-op).
+- `isAlwaysEnabled()` returns `true` (adaptor default is `false` — must override).
+- The static `enshroudPhraseDelimiters`/`deshroudPhraseDelimiters` helpers operate on the
+  *page* DOM and stay with the tool.
+
+The lifecycle comment at the top of the file (lines ~38–48) enumerates when
+showTool/newPageReady/updateMarkup fire — it is the manual-test matrix (§8).
 
 ### 1.2 `audioRecording.ts` (~4,900 lines) — engine **and** tool UI, running in the toolbox iframe
-This is the important, counter-intuitive fact: **the `AudioRecording` object currently
-runs in the _toolbox_ iframe, not the page iframe.** Evidence:
-
-- The constructor reads toolbox controls via its own `document`:
-  `document.getElementById("audio-split")`, `#audio-meter`, `#player`.
-- `initializeTalkingBookToolAsync` wires jQuery handlers to the toolbox buttons
-  (`$("#audio-record").mousedown(...).mouseup(...)`, `$("#audio-next").click(...)`, etc.).
-- It reaches _into_ the page iframe for content via
-  `getPageFrame()` → `parent.window.document.getElementById("page")` and `getPageDocBody()`.
+The important, counter-intuitive fact: **the `AudioRecording` object runs in the
+_toolbox_ iframe, not the page iframe.** Evidence:
+
+- The constructor reads toolbox controls via its own `document`: `#audio-split`
+  (→ `this.audioSplitButton`) and `#audio-meter` (→ `this.levelCanvas`), and calls
+  `updateDisplay()` which touches `#audio-split-wrapper` and
+  `#advanced-talking-book-controls-react-container`. (It does *not* touch `#player`;
+  that is wired in `initializeTalkingBookToolAsync`, and `#disablingOverlay` is grabbed
+  in `setupForRecordingAsync`.)
+- `initializeTalkingBookToolAsync` (the class method, ~line 229) wires jQuery handlers to
+  the toolbox buttons: `#audio-record` mousedown/mouseup, click handlers on
+  `#audio-play` (with a **ctrl-click eSpeak-preview easter egg** — preserve it),
+  `#audio-split` (opens the Adjust Timings dialog via `getWorkspaceBundleExports()`),
+  `#audio-next`, `#audio-prev`, `#audio-clear`, `#audio-listen`, `#audio-input-dev`;
+  plus `#player` events (`onended`, `onerror`, `ondurationchange`), `toastr.options`
+  (position `toast-toolbox-bottom`), a `WholeTextBoxAudio` feature-status fetch, and
+  `pullDefaultRecordingModeAsync()`.
+- It reaches _into_ the page iframe for content via `getPageFrame()`
+  (`parent.window.document.getElementById("page")`, ~line 2366) and `getPageDocBody()`
+  — ~26 direct call sites plus ~9 via `getPageDocBodyJQuery()`.
+- It also installs listeners **in the page document**: a capture-phase `mousedown` on the
+  page body (`moveRecordingHighlightToClick`) and a `MutationObserver` watching
+  visibility-affecting class changes (`watchElementsThatMightChangeAffectingVisibility`).
+  These already run cross-iframe today and are re-installed in `handleNewPageReady`.
 
 So the object owns two very different kinds of responsibility:
 
-1. **Tool UI** (toolbox side): the 7 main buttons, their counters, the level meter,
-   device selection, the `<audio>` player, the "disabling overlay", and the
-   button-state machine.
-2. **Content engine** (conceptually page side): sentence markup / `audio-sentence`
+1. **Tool UI** (toolbox side): the 7 main buttons, their counters, the level meter
+   canvas, device selection (`#audio-input-dev` icon + `#audio-devlist` jQuery menu),
+   the `<audio id="player">` element, the disabling overlay, the button-state machine,
+   busy cursors (`showBusy`/`endBusy` — which also touch the *root* document), and
+   toastr error toasts.
+2. **Content engine** (page-DOM side, conceptually): sentence markup / `audio-sentence`
    spans, highlighting, playback + timings, recording (via C# API), splitting, image
    descriptions, and playback order.
 
 It already renders one React fragment: `updateDisplay()` renders
 `TalkingBookAdvancedSection` (`talkingBookAdvancedSection.tsx`) into
-`#advanced-talking-book-controls-react-container` via `renderRoot`, using a props object
-the engine computes.
+`#advanced-talking-book-controls-react-container` via `renderRoot`, passing a props
+object the engine computes (recordingMode, hasAudio, hasRecordableDivs,
+haveACurrentTextboxModeRecording, inShowPlaybackOrderMode, showingImageDescriptions,
+plus command callbacks). The "checkboxes" for playback order and image descriptions are
+already React `BloomSwitch`es in that section; the pug's `checkboxWithHiddenClickHandler`
+mixin is **dead code**.
 
 ### 1.3 The button-state machine (the part that changes most)
 - `Status` enum: `Disabled | DisabledUnlessHover | Enabled | Expected | Active`, applied
-  today as **CSS classes on the 7 `<button>` elements** by `setStatus`/`getStatus`.
-- Event wiring lives in `initializeTalkingBookToolAsync` (jQuery).
+  today as **camelCase CSS classes** on the 7 buttons (`audio-record`, `audio-play`,
+  `audio-split`, `audio-next`, `audio-prev`, `audio-clear`, `audio-listen`) by
+  `setStatus`/`getStatus`.
+- `setStatus` also: toggles `expected` on the matching `#audio-<verb>-label`; swaps the
+  play label to localized "Pause" (`Common.Pause`) while `Active` and restores
+  `originalPlayLabel` after; and has a branch for `#audio-<verb>-list-item` ids that
+  **do not exist in the pug — dead code, do not port**.
+- **The DOM classes are also read back as state**: `getStatus`, `isEnabledOrExpected`,
+  `doesRecordingExistForCurrentSelection` (reads `#audio-play`'s `enabled` class), and
+  `split()` all consult button classes. The new in-memory model must become the single
+  source of truth for these reads, not just a render target.
 - **Decision logic:** `changeStateAndSetExpectedAsync` → `updateButtonStateAsync` →
-  `updateButtonStateHelper` (+ `updateListenButtonStateAsync`) query the recording API
-  and compute the correct status for each button. **This logic is valuable and must be
-  preserved** — only its _output_ (poke the DOM) should change to (drive React state).
+  `updateButtonStateHelper` (+ `updateListenButtonStateAsync`) query
+  `/bloom/api/audio/checkForAnyRecording?ids=` and compute the correct status for each
+  button. **This logic is valuable and must be preserved** — only its _output_ changes
+  (from poking the DOM to updating the state model).
 - Related helpers: `setEnabledOrExpecting`, `isEnabledOrExpected`,
-  `removeExpectedStatusFromAll`, `disableInteraction`, `setDisableEverythingMode`.
+  `removeExpectedStatusFromAll`, `disableInteraction`, `setDisableEverythingMode`,
+  `updateSplitButton` (toggles the split wrapper's counter/visibility classes).
 
 ### 1.4 Cross-bundle duplication hazard
-`audioRecording.ts` is **also pulled into the page bundle** by static-only imports:
-
-| Importer (page bundle) | What it uses |
-|---|---|
-| `bloomField/BloomField.ts` | `AudioRecording.createValidXhtmlUniqueId()` |
-| `js/canvasElementManager/CanvasElementDuplication.ts` | `AudioRecording.createValidXhtmlUniqueId()` |
-| `js/canvasElementManager/CanvasElementContextControls.tsx` | `AudioRecording.audioExistsForIdsAsync()` |
-| `toolbox/canvas/canvasControlRegistry.ts` | `AudioRecording.showTalkingBookTool()` |
-| `js/bloomImages.ts` | constant `kPlaybackOrderContainerClass` |
-
-That creates a **second copy** of the class and of the module-level `theOneAudioRecorder`
-in the page iframe. Today it's masked because `getAudioRecorder()` deliberately routes
-through `getToolboxBundleExports().getTheOneAudioRecorderForExportOnly()` to reach the
-real (toolbox) singleton. This is the "accidental duplicate singleton across iframes"
-hazard; Step 0 removes it.
-
-### 1.5 The iframe framework (context for the move)
-Cross-iframe calls always go through `bookEdit/js/workspaceFrames.ts`:
-`getEditablePageBundleExports()` (the `#page` frame's `window.editablePageBundle`),
-`getToolboxBundleExports()` (the `#toolbox` frame's `window.toolboxBundle`), and
-`getWorkspaceBundleExports()` (root). You must **never `import`** across the boundary —
-that pulls a file into the wrong bundle. Bundles are Vite/Rollup entry points in
-`src/BloomBrowserUI/vite.config.mts` (`editablePageBundle` = `bookEdit/editablePage.ts`;
-`toolboxBundle` = `bookEdit/toolbox/toolboxBootstrap.ts`).
+`audioRecording.ts` is pulled into **three** bundles by static imports:
 
-The toolbox iframe is expected to be **merged into the root document eventually** (the
-workspace root was already de-iframed). This plan moves us toward that: the UI becomes
-iframe-agnostic React, and the engine lives with the content it manipulates.
+| Importer | What it uses | Bundle |
+|---|---|---|
+| `bloomField/BloomField.ts` | `AudioRecording.createValidXhtmlUniqueId()` | page |
+| `js/canvasElementManager/CanvasElementDuplication.ts` | `createValidXhtmlUniqueId()` | page |
+| `js/canvasElementManager/CanvasElementContextControls.tsx` | `AudioRecording.audioExistsForIdsAsync()` | page |
+| `toolbox/canvas/canvasControlRegistry.ts` | `AudioRecording.showTalkingBookTool()` | page (+ toolbox) |
+| `js/bloomImages.ts` | constant `kPlaybackOrderContainerClass` | page |
+| `spreadsheet/spreadsheetBundleRoot.ts` | `AudioRecording.getChecksum()` | spreadsheet |
+
+(Plus legitimate toolbox-bundle importers: `toolboxBootstrap.ts`, `talkingBook.ts`,
+`recordable.ts`, `AdjustTimingsDialog.tsx`, `musicToolControls.tsx`, `motionTool.tsx`.)
+
+Note the mechanism precisely: Rollup emits shared chunks (one copy of the *code*), but
+each iframe is a separate JS realm, so the page iframe gets its **own module instance**
+and its own (never-initialized) `theOneAudioRecorder`. Today this is masked because
+`getAudioRecorder()` routes through
+`getToolboxBundleExports().getTheOneAudioRecorderForExportOnly()` to reach the real
+toolbox singleton. Nothing in the build flags a module landing in multiple entry graphs —
+verification in Step 0 has to be done by inspecting the import graph / built output.
+
+### 1.5 The iframe framework (context)
+Cross-iframe calls always go through `bookEdit/js/workspaceFrames.ts`:
+`getEditablePageBundleExports()` (the `#page` frame's `window.editablePageBundle`, whose
+curated surface `IPageFrameExports` is defined in `editablePage.ts` — currently nothing
+audio-related), `getToolboxBundleExports()`, and `getWorkspaceBundleExports()` (root).
+You must **never `import`** across the boundary — that pulls a file into the wrong
+bundle. Bundle entry points are in `vite.config.mts` (`editablePageBundle` =
+`bookEdit/editablePage.ts`; `toolboxBundle` = `bookEdit/toolbox/toolboxBootstrap.ts`).
+
+Two lifecycle facts that shape everything:
+- **The page iframe reloads on every page switch** (`switchContentPage` sets
+  `iframe.src`); the toolbox iframe persists for the session.
+- The toolbox iframe is expected to be merged into the root document eventually (the
+  workspace root was already de-iframed). Phase A moves toward that: the UI becomes
+  iframe-agnostic React.
 
 ### 1.6 The React tool pattern to follow (Motion / Music / LeveledReader)
 - A tool extends `ToolboxToolReactAdaptor` (`toolboxToolReactAdaptor.tsx`) and implements
@@ -100,53 +177,94 @@ iframe-agnostic React, and the engine lives with the content it manipulates.
 - Registration is already done: `ToolBox.registerTool(new TalkingBookTool())` in
   `toolboxBootstrap.ts`; `talkingBook` is in `alwaysOnToolIds` and has an icon entry in
   `ToolboxRoot.tsx`.
+- `IReactTool.featureName` exists for subscription-badged tools; Talking Book doesn't
+  need it.
 - Styling: MUI (`@mui/material`) + Emotion `css` prop, wrapped in
   `<ThemeProvider theme={toolboxTheme}>` (from `bloomMaterialUITheme`), using Bloom's
   `react_components` (`BloomButton`, `BloomSwitch`, `BloomTooltip`, the l10n components
   `Div`/`Span`/`LocalizedString`/`useL10n`, `ToolBottomHelpLink`).
+- Follow `.github/skills/react-useeffect/SKILL.md` when writing the component (it exists
+  precisely for conversions like this).
+
+### 1.7 UI inventory to reproduce (from the pug + engine code)
+Controls, top to bottom (`talkingBookToolboxTool.pug`):
+- `#disablingOverlay` (shown during show-playback-order mode via
+  `setDisableEverythingMode`; the advanced section's playback-order switch deliberately
+  z-indexes above it).
+- "Check your recording setup" label (`...CheckSettingsLabel`) — a numbered step.
+- Input-device icon `#audio-input-dev` (device-type SVG chosen by
+  `updateInputDeviceDisplay` from `audio/devices` API; `title` = product name) +
+  `#audio-devlist` popup menu (`selectInputDevice`: 2 devices toggle directly, >2 shows
+  the menu; selection POSTs `audio/currentRecordingDevice`).
+- Level meter `<canvas id="audio-meter" width=80 height=15>` — drawn imperatively by
+  `setStaticPeakLevel`, fed by WebSocket context `"audio-recording"`, event id
+  `peakAudioLevel` (`addAudioLevelListener`). `stopListeningForLevels()` POSTs
+  `audio/stopMonitoring` and closes the socket. There is also `addMicErrorListener`
+  (`recordingStartError`/`monitoringStartError` → toastr + disable record button).
+- "Look at each sentence…" label (`...LookAtSentenceLabel`) — numbered step.
+- The 7 button groups (button + optional counter label): record ("Speak", starts
+  `expected`), play ("Check"), split ("Split", `AdjustTimings`, wrapper starts hidden /
+  `initial-state`), next ("Next"), prev ("Back", no counter), clear ("Clear"),
+  listen ("Listen to the whole page"). The numbered-circle counters come from CSS
+  counters over `talking-book-counter` elements in `audioRecording.less`.
+- `#advanced-talking-book-controls-react-container` → `TalkingBookAdvancedSection`
+  (already React; reuse).
+- Help link (`Common.Help` → `ToolBottomHelpLink`).
+- `<audio id="player" preload="none">` — invisible; **belongs to the engine, not the
+  UI** (see §4).
+
+l10n keys the React version must keep emitting (verify against
+`.github/skills/xlf-strings/SKILL.md` rules — no new strings should be needed):
+`EditTab.Toolbox.TalkingBookTool` (heading, supplied by the React toolbox shell),
+`.CheckSettingsLabel`, `.LookAtSentenceLabel`, `.SpeakLabel`, `.CheckLabel`,
+`.AdjustTimings`, `.NextLabel`, `.Back`, `.Clear`, `.Listen`, `Common.Help`,
+`Common.Pause` (dynamic play/pause swap). The advanced section and the import-recording
+confirm dialog already have their keys in React code.
 
 ---
 
 ## 2. Target architecture
 
+### Phase A (this PR): React UI, engine stays put
+
 ```
-┌─ Toolbox/root iframe ────────────┐        ┌─ Page iframe ─────────────────────┐
-│ TalkingBookControls (React)      │        │ AudioRecording engine (the object)│
-│  • 7 main buttons + counters     │        │  • sentence markup / audio-sentence│
-│  • record/play/split/next/prev/  │──────► │  • highlight + playback + timings  │
-│    clear/listen handlers         │ calls  │  • recording (C# API) + split      │
-│  • level meter + device display  │ via    │  • image descriptions, playback    │
-│  • advanced section (existing)   │exports │    order, fixHighlighting          │
-│  • disabling overlay             │◄────── │  • owns <audio> player             │
-│  • holds button-state model      │notify  │                                    │
-│    as React state                │        │  document === the page document    │
-└──────────────────────────────────┘        └────────────────────────────────────┘
-        TalkingBookTool extends ToolboxToolReactAdaptor
+┌─ Toolbox iframe ──────────────────────────────────────────────┐
+│  TalkingBookControls (React)          AudioRecording engine   │
+│   • 7 buttons + counters + overlay      (same window)         │
+│   • meter canvas + device menu        • state machine logic   │
+│   • advanced section (existing)       • markup/highlight/     │
+│   • help link                           playback/record/split │
+│        │  direct method calls  ▲      • owns <audio> element  │
+│        ▼                       │      • reaches page iframe   │
+│      engine.commandX()   state listener   as today            │
+└───────────────────────────────────────────────────────────────┘
 ```
 
-- **Toolbox/root side** owns everything the user sees and clicks, as a normal React tool.
-- **Page side** owns the DOM engine. Because it now runs _in_ the page, every
-  `getPageDocBody()` / `getPageFrame()` collapses to the local `document`.
+Because UI and engine share a window in Phase A, the listener/command wiring is plain
+same-realm JavaScript — no new cross-iframe plumbing at all. `getAudioRecorder()` and
+the toolbox exports are untouched. Motion and Music keep working unchanged.
 
----
+### Phase B (separate PR): engine moves to the page iframe
+
+The engine relocates to live with the DOM it manipulates; the UI talks to it via
+`getEditablePageBundleExports()`. §6 covers what that actually requires — chiefly a
+deliberate answer to the per-page-lifetime problem from §1.5.
 
-## 3. Communication design across the boundary
+---
 
-Use the existing `workspaceFrames` framework; no new global plumbing.
+## 3. UI ↔ engine contract
 
-1. **UI → engine (commands).** Add `getTheOneAudioRecorder()` to `IPageFrameExports` /
-   `window.editablePageBundle` in `editablePage.ts`. Flip `getAudioRecorder()` to pull
-   from `getEditablePageBundleExports()` instead of the toolbox exports. The React
-   component invokes engine methods through this reference:
-   `startRecordCurrentAsync`, `endRecordCurrentAsync`, `togglePlayCurrentAsync`,
-   `listenAsync`, `clearRecordingAsync`, `moveToNextAudioElement`,
-   `moveToPrevAudioElementAsync`, `setRecordingModeAsync`, `setShowPlaybackOrderMode`,
-   `setShowingImageDescriptions`, `insertSegmentMarker`, import/split, device selection.
+1. **UI → engine (commands).** The React component calls engine methods directly (Phase
+   A: same window via `getAudioRecorder()`): `startRecordCurrentAsync`,
+   `endRecordCurrentAsync`, `togglePlayCurrentAsync` (and the ctrl-click
+   `playESpeakPreview`), the split-dialog opener, `listenAsync`, `clearRecordingAsync`,
+   `moveToNextAudioElement`, `moveToPrevAudioElementAsync`, `setRecordingModeAsync`,
+   `setShowPlaybackOrderMode`, `setShowingImageDescriptions`, `insertSegmentMarker`,
+   import recording, and device selection (see below).
 
-2. **Engine → UI (state).** Extend `IAudioRecorder` with
-   `registerStateListener(cb: (state: TalkingBookUiState) => void)`. The engine computes
-   a single immutable `TalkingBookUiState` and pushes it to the listener whenever it
-   changes:
+2. **Engine → UI (state).** Add `registerStateListener(cb: (state: TalkingBookUiState)
+   => void)` (and an unregister). The engine computes a single immutable
+   `TalkingBookUiState` and pushes it whenever anything changes:
 
    ```ts
    interface TalkingBookUiState {
@@ -154,168 +272,255 @@ Use the existing `workspaceFrames` framework; no new global plumbing.
            "record" | "play" | "split" | "next" | "prev" | "clear" | "listen",
            Status
        >;
+       isPlaying: boolean; // drives the Check/Pause label swap
+       splitButtonVisible: boolean; // today: updateSplitButton's wrapper classes
        recordingMode: RecordingMode;
        hasAudio: boolean;
        hasRecordableDivs: boolean;
        haveACurrentTextboxModeRecording: boolean;
        inShowPlaybackOrderMode: boolean;
        showingImageDescriptions: boolean;
-       currentInputDevice?: { name: string; iconSrc: string };
-       disableEverything: boolean;
-       isPlaying: boolean; // drives the Play/Pause label
+       inputDevice?: { iconSrc: string; title: string };
+       disableEverything: boolean; // the overlay
    }
    ```
 
    This subsumes both the existing `TalkingBookAdvancedSection` props flow and the
    `Status`-class DOM poking into one channel. `setStatus`/`getStatus`/
-   `updateButtonStateHelper` are rewritten to read/write this in-memory model instead of
-   the DOM; **the decision logic in `changeStateAndSetExpectedAsync` and
-   `updateButtonState*` stays as close to byte-for-byte as possible.**
-
-`IAudioRecorder` (`IAudioRecorder.ts`) is the deliberately implementation-free interface
-other iframes use; extend it, don't bypass it.
+   `updateButtonStateHelper` are rewritten to read/write this in-memory model (which is
+   now the *single source of truth* — remember §1.3's DOM-reads-as-state);
+   **the decision logic in `changeStateAndSetExpectedAsync` and `updateButtonState*`
+   stays as close to byte-for-byte as possible.**
+
+3. **Imperative escape hatches (deliberately not in state):**
+   - **Level meter:** 60fps-ish peak levels shouldn't round-trip through React state.
+     The component renders `<canvas ref>` and registers the element with the engine
+     (`setLevelCanvas(el | null)` on mount/unmount); `setStaticPeakLevel` keeps drawing
+     exactly as today.
+   - **`<audio>` player:** the engine creates its own element
+     (`document.createElement("audio")`) lazily in `getMediaPlayer()` instead of finding
+     `#player` in the pug. This removes the engine's last dependency on tool markup and
+     keeps Motion/Music's `setupForListen()` working. (Being element-based, it needs no
+     DOM attachment to play.)
+   - **Device menu data:** UI state carries the current-device icon/title; on click the
+     component asks the engine (`getInputDevicesAsync()` wrapping `audio/devices`,
+     `setInputDeviceAsync(name)` wrapping the POST) and renders an MUI `Menu` — the
+     jQuery `#audio-devlist` menu goes away, the engine keeps the API logic and the
+     two-devices-toggle behavior.
+   - **Toasts (mic errors, split errors):** stay engine-side via toastr, unchanged in
+     Phase A.
+
+`IAudioRecorder` (`IAudioRecorder.ts`) remains the implementation-free interface other
+iframes use. Phase A doesn't need to extend it (same-window callers can use the class
+type); Phase B moves the whole UI-facing surface into it.
 
 ---
 
-## 4. Decomposition — what moves where
+## 4. Decomposition — what moves where (Phase A)
 
-| Concern | Today (`audioRecording.ts`, toolbox) | Target |
+| Concern | Today (`audioRecording.ts` + pug) | Target |
 |---|---|---|
-| 7 buttons + counters + expected/active look | `<button>` + `setStatus` CSS classes | React in `TalkingBookControls` (MUI/emotion), driven by `state.buttons` |
-| Event handlers | jQuery `.click/.mousedown` in `initializeTalkingBookToolAsync` | React `onClick`/`onMouseDown/Up` → engine methods via exports |
-| Button-state **decision logic** | `changeStateAndSetExpectedAsync`, `updateButtonState*`, `updateListenButtonState`, `disableInteraction` | **Stays in engine**, retargeted to emit `TalkingBookUiState` |
-| `Status`/`setStatus`/`getStatus`/`removeExpectedStatusFromAll`/`setEnabledOrExpecting`/`isEnabledOrExpected` | DOM class manipulation | small in-memory model getters/setters, or folded into React |
-| Level meter canvas + `addAudioLevelListener` | `#audio-meter` fed by websocket | React (toolbox); engine forwards peak levels (via state field or a small websocket subscription in the component) |
-| Device selection (`selectInputDevice`, `updateInputDeviceDisplay`) | `#audio-devlist`, `#audio-input-dev` | React (toolbox); engine keeps `audio/devices` API calls and returns data |
-| `<audio id="player">` + play-label swap (`Common.Pause`) | toolbox pug element | player element **moves to page iframe** with the engine; "Play/Pause" label is UI → React (`state.isPlaying`) |
-| Disabling overlay (`setDisableEverythingMode`, `#disablingOverlay`) | toolbox pug + class toggling | React conditional styling from `state.disableEverything` |
-| Advanced section | already React, re-rendered via `renderRoot` | becomes a child of `TalkingBookControls`; `updateDisplay`'s `renderRoot` call deleted |
-| Page markup / highlight / split / timings / image-desc / playback-order | engine, reaching across via `getPageDocBody()` | **stays engine, now runs page-side**; `getPageDocBody()`→`document.body`, `getPageFrame()` retired |
-| Help link | pug `a.help-link` | `ToolBottomHelpLink` React component |
-| l10n (`data-i18n`) | pug + `insertLangAttributesIntoToolboxElements` | `Div`/`LocalizedString`/`useL10n`; drop the legacy lang-attr path for this tool |
-
-### Churn-minimizing trick (please follow)
-Moving the engine into the page iframe would otherwise change hundreds of call sites
-(`getPageDocBody()` → `document.body`, etc.). Instead, **keep the helper names**
-`getPageDocBody()` / `getPageFrame()` and reimplement only their _bodies_ to return the
-local `document` now that the engine runs page-side. That leaves the bulk of the engine
-untouched so the diff shows only genuine changes. Reviewers strongly prefer that
-`audioRecording.ts` change as little as possible.
+| 7 buttons + counters + expected/active look | `<button>` + `setStatus` CSS classes | React in `TalkingBookControls`, driven by `state.buttons`; keep/port the CSS-counter numbering |
+| Event handlers | jQuery wiring in `initializeTalkingBookToolAsync` | React `onClick`/`onMouseDown/Up` → engine methods (incl. ctrl-click eSpeak preview) |
+| Button-state **decision logic** | `changeStateAndSetExpectedAsync`, `updateButtonState*`, `updateListenButtonStateAsync`, `disableInteraction` | **Stays in engine**, retargeted to emit `TalkingBookUiState` |
+| `setStatus`/`getStatus`/`removeExpectedStatusFromAll`/`setEnabledOrExpecting`/`isEnabledOrExpected` + class *reads* (`doesRecordingExistForCurrentSelection`, `split`) | DOM class manipulation/inspection | in-memory model getters/setters; the `-list-item` branch is dead — drop it |
+| Play-label "Pause" swap (`Common.Pause`, `originalPlayLabel`) | `setStatus` special case | `state.isPlaying` → label in React |
+| Split-button show/hide (`updateSplitButton`) | wrapper class toggling | `state.splitButtonVisible` |
+| Level meter canvas | `#audio-meter` + `setStaticPeakLevel` | React `<canvas ref>` registered with engine; drawing code unchanged |
+| Device selection | `#audio-devlist` jQuery menu, `#audio-input-dev` | React MUI menu; engine keeps `audio/devices` + POST logic |
+| `<audio id="player">` | pug element in toolbox doc | engine-created element (`getMediaPlayer` creates lazily); **not part of the React UI** |
+| Disabling overlay | pug `#disablingOverlay` + class toggle | React conditional styling from `state.disableEverything` |
+| Advanced section | React, re-rendered via `renderRoot` from `updateDisplay` | child of `TalkingBookControls`; `updateDisplay` becomes "recompute state + notify" |
+| Busy cursors (`showBusy`/`endBusy`) | classes on `#toolbox`, page editables, root dialog | unchanged in Phase A (revisit in Phase B) |
+| Page markup / highlight / split / timings / image-desc / playback-order / page listeners | engine, cross-iframe via `getPageDocBody()` | **unchanged in Phase A** |
+| Help link | pug `a.help-link` | `ToolBottomHelpLink` |
+| l10n (`data-i18n`) | pug + `insertLangAttributesIntoToolboxElements` | `Div`/`LocalizedString`/`useL10n`; same keys (§1.7); drop the legacy lang-attr path for this tool |
 
 ---
 
-## 5. Step-by-step
+## 5. Phase A step-by-step
 
 ### Step 0 — De-duplicate across bundles (prerequisite + iframe hygiene)
-Extract the page-side-consumed statics/constants into small, dependency-light modules so
-the page bundle stops importing the whole engine:
+Extract the statics/constants consumed outside the toolbox into small, dependency-light
+modules so the page and spreadsheet bundles stop importing the whole engine:
 
 - `createValidXhtmlUniqueId` → a shared id util (BloomField, CanvasElementDuplication).
 - `audioExistsForIdsAsync` + `kAnyRecordingApiUrl` → a shared audio-query util
-  (CanvasElementContextControls).
+  (CanvasElementContextControls; `recordable.ts` can use it too).
+- `getChecksum` → shared util (spreadsheetBundleRoot).
 - `kPlaybackOrderContainerClass`, `kAudioSentence`, `kAudioCurrent`, `AudioMode` → a
-  shared constants file (bloomImages, etc.).
-- `showTalkingBookTool` → a toolbox-activation helper (canvasControlRegistry).
+  shared constants file (bloomImages, AdjustTimingsDialog, etc.).
+- `showTalkingBookTool` → a toolbox-activation helper (canvasControlRegistry) — it
+  already just calls `getToolboxBundleExports().activateToolFromId(...)`.
 
-Then confirm via the Vite manifest / chunk output that `audioRecording.ts` is in exactly
-**one** bundle. Do this first — a clean single-iframe home for the engine is the whole
-point of the move.
+Then confirm `audioRecording.ts` is reachable from exactly **one** entry graph
+(toolbox). Nothing in the build flags multi-bundle modules, so check the built output —
+e.g. that no chunk imported by `editablePageBundle.js` or `spreadsheetBundle.js`
+contains a distinctive engine symbol (`initializeTalkingBookToolAsync`). This step is
+independently landable.
 
 ### Step 1 — Build `TalkingBookControls` (toolbox React component)
-New `TalkingBookControls.tsx`: renders the check/meter row, the 7 main buttons with
-counter labels, the disabling overlay, `<TalkingBookAdvancedSection>` (reused as-is), and
-the help link — under `<ThemeProvider theme={toolboxTheme}>`, MUI + Emotion,
-`BloomButton`/`BloomSwitch`/`BloomTooltip`/l10n components, matching Motion/Music styling.
-It takes a `TalkingBookUiState` and an engine reference (or a callbacks bundle). Prefer a
-functional component holding `useState` fed by `registerStateListener`. Control styling
-may shift toward the MUI look used by other tools (pixel-identical is not required).
-
-### Step 2 — Refactor the engine's UI layer into a state model
-In `audioRecording.ts`: replace the DOM work in `setStatus`/`getStatus`/
-`removeExpectedStatusFromAll`/`updateDisplay` with reads/writes of an in-memory
-`TalkingBookUiState` + a `notifyStateChanged()` that calls the registered listener.
-Delete the jQuery event wiring in `initializeTalkingBookToolAsync` (React owns events).
-Keep `changeStateAndSetExpectedAsync` and the `updateButtonState*` decision logic intact.
-Repoint `getMediaPlayer`, the level meter, and the device code at their new homes.
-
-### Step 3 — Move the engine to the page iframe & flip the wiring
-- Ensure `theOneAudioRecorder` is constructed page-side; export
-  `getTheOneAudioRecorder()` from `editablePage.ts`. Flip `getAudioRecorder()` to
-  `getEditablePageBundleExports()`.
-- Reimplement `getPageFrame()`/`getPageDocBody()` bodies to return the local document
-  (the churn-minimizer in §4).
-- **Motion/Music narration-player dependency:** both do `new AudioRecording()` in the
-  toolbox purely for playback (`motionTool.tsx`, `musicToolControls.tsx`). Decide during
-  implementation between: (a) keep a slim playback-only path available toolbox-side, or
-  (b) have them obtain the page-side engine for playback via exports. Pick based on how
-  much playback logic they actually touch.
-
-### Step 4 — Convert `TalkingBookTool` to the React adaptor
-- `TalkingBookTool extends ToolboxToolReactAdaptor`; implement `makeRootElement()` →
-  `adaptReactElement(<TalkingBookControls .../>)`. Keep the async lifecycle
-  (`showTool`, `newPageReady`, `updateMarkupAsync` returning the commit fn,
-  `detachFromPage`, `hideTool`). The `updateMarkupAsync` contract (see
-  `toolbox.ts` ~line 1529) must be preserved: it must not mutate the DOM except via the
-  synchronous function it returns.
+New `TalkingBookControls.tsx` rendering the full §1.7 inventory (minus the player, which
+the engine now owns) under `<ThemeProvider theme={toolboxTheme}>`, matching Motion/Music
+styling conventions. It takes the engine reference, holds `TalkingBookUiState` in
+`useState` fed by `registerStateListener` (registered in an effect with cleanup —
+follow the react-useeffect skill). Reuse `<TalkingBookAdvancedSection>` as-is, now fed
+from the same state object. Control styling may shift toward the MUI look used by other
+tools (pixel-identical is not required), but keep the numbered-circle counters and the
+overall layout.
+
+### Step 2 — Refactor the engine's UI layer into the state model
+In `audioRecording.ts`:
+- Replace the DOM work in `setStatus`/`getStatus`/`removeExpectedStatusFromAll`/
+  `updateSplitButton`/`setDisableEverythingMode`/`updateInputDeviceDisplay` with the
+  in-memory `TalkingBookUiState` + `notifyStateChanged()`. All class *reads* (§1.3) now
+  read the model.
+- `updateDisplay()` becomes "recompute state, notify" (its `renderRoot` call is deleted).
+- Delete the jQuery event wiring in `initializeTalkingBookToolAsync` (React owns
+  events); keep everything else that method does (player setup, toastr options, feature
+  status, default recording mode).
+- `getMediaPlayer()` creates the engine-owned `<audio>` element; `selectInputDevice`
+  splits into data/command methods for the React menu; the meter targets the registered
+  canvas.
+- Keep `changeStateAndSetExpectedAsync` and the `updateButtonState*` decision logic
+  intact, and don't disturb `setupForListen`/`listenAsync` (Motion/Music call them on
+  their own `new AudioRecording(...)` instances, which after this step no longer need
+  any tool DOM to exist).
+
+### Step 3 — Convert `TalkingBookTool` to the React adaptor
+- `TalkingBookTool extends ToolboxToolReactAdaptor`; `makeRootElement()` →
+  `adaptReactElement(<TalkingBookControls .../>)`. Keep every override from §1.1:
+  the async lifecycle, `isUpdateMarkupAsync() === true`, `updateMarkupAsync` returning
+  the commit function, `isAlwaysEnabled() === true`, `beginRestoreSettings` →
+  `beginLoadSynphonySettings()`, and the phrase-delimiter/image-description page work.
+  The `updateMarkupAsync` contract (`toolbox.ts` ~line 1529, BL-10133) must be
+  preserved: no DOM mutation except via the returned synchronous function.
 - Remove the two legacy routings (`subpath` in `toolbox.ts`, `legacyToolSubPathByToolId`
-  in `ToolboxRoot.tsx`) so the tool flows through `makeRootElement`. Delete the pug file
-  `talkingBookToolboxTool.pug` and its `.html` output reference.
+  in `ToolboxRoot.tsx`) so the tool flows through `makeRootElement`. Delete
+  `talkingBookToolboxTool.pug` and its `.html` build output wiring. Confirm the React
+  toolbox shell supplies the header label and ordering that the pug's `h3`
+  (`data-order='30'`, `data-i18n`) used to provide.
 - Keep the `talkingBook` icon / `alwaysOn` entries in `ToolboxRoot.tsx`.
-
-### Step 5 — Verify iframe hygiene
-- Confirm `TalkingBookControls`/`talkingBook.ts` do **not** leak into the page bundle,
-  and the engine does **not** leak into the toolbox bundle.
-- Confirm exactly one `theOneAudioRecorder` exists (page side).
-- Confirm dialogs (`showAdjustTimingsDialogFromWorkspaceRoot`, the confirm-replace
+- Split the stylesheet: page-side highlighting/markup styles stay in
+  `audioRecording.less`/`.css` (still listed in `editablePage.ts`'s `styleSheets` array
+  and loaded by `toolbox.pug`); toolbox-only button/meter rules migrate into Emotion in
+  the component or a component-scoped stylesheet, and the toolbox `<link>` can drop once
+  nothing toolbox-side needs the file. (Note: both iframes load the *compiled css* via
+  link tags, not JS imports.)
+
+### Step 4 — Verify
+- Bundle hygiene: `TalkingBookControls`/`talkingBook.ts` don't leak into the page
+  bundle; Step 0's single-graph property still holds.
+- Dialogs (`showAdjustTimingsDialogFromWorkspaceRoot`, the import-recording confirm
   dialog) still render in the **root** document via `getWorkspaceBundleExports()`.
+- The manual matrix in §8.
+
+---
+
+## 6. Phase B (separate PR): move the engine to the page iframe
+
+Goal: the engine lives with the content it manipulates; every `getPageDocBody()` /
+`getPageFrame()` collapses to the local `document`, removing the class of cross-iframe
+timing bugs where the engine reaches through `parent.window` while frames swap.
+
+**The core design problem — engine lifetime.** The page iframe reloads on every page
+switch, so page-side `theOneAudioRecorder` is destroyed/recreated per page. Design
+explicitly for that:
+
+- Enumerate fields that today outlive a page and decide a home for each:
+  `inShowPlaybackOrderMode` (deliberately persists), `showingImageDescriptions`
+  (recomputed by the tool each page, but cached), `cachedCollectionDefaultRecordingMode`,
+  `wholeTextBoxAudioFeatureStatus`, `sentenceToIdListMap`, `previousRecordMode`,
+  `isShowing`. Natural home: the persistent toolbox-side React component (or tool
+  object) re-seeds each fresh engine in `newPageReady`; per-page things just die with
+  the page.
+- The UI must treat its engine reference and listener registration as per-page: re-fetch
+  and re-register on every `newPageReady`, and tolerate a missing engine between pages.
+  Cross-frame function refs (including the commit function returned by
+  `getUpdateMarkupAction`) go stale if the page navigates mid-flight.
+- One-time init (`initializeTalkingBookToolAsync`) becomes per-page init; the websocket
+  subscription (`audio-recording` context) is torn down and re-created per page —
+  verify the C# side tolerates that, and avoid double-subscription.
+- Playback/recording that spans a page switch dies with the iframe (probably acceptable
+  — it is already suspect today — but state it and test it).
+- Toasts and busy-cursor UI would now originate in the page iframe; make sure they still
+  present correctly (toastr renders in the engine's document).
+
+Mechanics (mostly as previously planned):
+- Construct `theOneAudioRecorder` page-side; expose `getTheOneAudioRecorder()` on
+  `IPageFrameExports` / `window.editablePageBundle` in `editablePage.ts` (where that
+  interface actually lives). Flip `getAudioRecorder()` to
+  `getEditablePageBundleExports()`. Extend `IAudioRecorder` to cover the full UI-facing
+  surface, including `registerStateListener`.
+- **Churn-minimizing trick:** keep the helper names `getPageDocBody()`/`getPageFrame()`
+  and reimplement only their bodies to return the local document. That leaves the ~35
+  call sites untouched so the diff shows only genuine changes. (Watch the two spots
+  that use `getPageFrame().src` — e.g. `urlPrefix()` — which need `window.location`
+  instead.)
+- **Motion/Music narration playback:** they use only `new AudioRecording(false)` +
+  `setupForListen()` + `listenAsync()`. Extract that trio into a slim toolbox-usable
+  narration-player module, or route them to the page-side engine via exports — the tiny
+  surface makes either cheap; decide during implementation.
+- Singleton discipline: after the flip, page-side code uses the local singleton;
+  toolbox/root code always goes through `getEditablePageBundleExports()`. Leave no path
+  that `new`s a second engine in the wrong frame (except the sanctioned narration
+  player, if kept).
 
 ---
 
-## 6. Watch-outs
+## 7. Watch-outs
 
 - **Async / race hazards to respect (and, where cheap, fix):**
-  - `newPageReady` is deliberately re-fired ~600ms later; it must stay idempotent.
-  - The `ensureHighlight` 4-second polling loop is a workaround for BL-10471; the
-    `currentAudioSessionNum` counter guards against stale playback callbacks. Preserve
-    both.
+  - `newPageReady` is deliberately re-fired ~600ms later by
+    `scheduleDelayedNewPageReady` in `toolbox.ts` (~line 890); it must stay idempotent.
+  - `ensureHighlight(20)` polls every 200ms (~4s total) as a workaround for BL-10471;
+    the `currentAudioSessionNum` counter guards against stale playback callbacks (it is
+    bumped in six places). Preserve both; `clearTimeouts()` must keep working.
   - `updateMarkupAsync` must not mutate the DOM except via the returned commit function
-    (BL-10133). Do not regress this when wiring it through React.
-  - Moving the engine page-side removes a class of cross-iframe timing bugs (no more
-    reaching through `parent.window` while frames swap) — a genuine simplification — but
-    re-validate the `showTool` → `setupForRecordingAsync` and page-switch sequences.
-- **Singleton discipline:** after the flip, page-side code uses the local
-  `theOneAudioRecorder`; toolbox/root code always goes through
-  `getEditablePageBundleExports()`. Leave no path that `new`s a second engine in the
-  wrong frame.
-- **Meter websocket** (`audio-recording` context, peak levels): decide whether the React
-  meter subscribes directly or the engine relays; avoid double-subscription.
-- **CSS:** `audioRecording.less`/`.css` is currently loaded into **both** iframes
-  (`editablePage.ts` loads it too). Split into engine-side styles (highlighting on page
-  content) vs UI-side styles (buttons/meter → Emotion in the component) so each iframe
-  gets only what it needs.
+    (BL-10133). Do not regress this when wiring through React.
+  - The page-document listeners (capture mousedown, visibility MutationObserver) are
+    added in `handleNewPageReady` and removed in `handleToolHiding` /
+    `removeVisibilityObserver` — keep that pairing intact through the refactor.
+- **State-model fidelity:** everything that used to *read* button classes (§1.3) must
+  read the model, and the model must be updated before any code path that reads it —
+  the old code had read-your-own-write consistency via the DOM.
+- **Meter websocket:** keep exactly one subscription (`addAudioLevelListener` +
+  `addMicErrorListener` on context `audio-recording`); the React meter registers a
+  canvas, it does not subscribe itself.
+- **CSS:** the split in Step 3 must keep the page-side highlighting styles loading in
+  the page iframe (via `editablePage.ts`'s `styleSheets` list) — they are unrelated to
+  the tool UI.
 
 ---
 
-## 7. Testing
+## 8. Testing
 
 - Keep the existing specs green: `audioRecordingSpec.ts` (~2,400 lines) and
-  `talkingBookSpec.ts` exercise the engine and decision logic we are preserving. Specs
-  that assert on DOM classes / `getStatus` will need porting to the new state model.
-- Manual matrix (from the lifecycle comment at the top of `talkingBook.ts`): open toolbox
-  → tool shows; create/switch page while open; type in a text box; switch tools; close
-  toolbox; Origami "Change Layout" then off. Plus the full **record → check → split
-  (adjust timings) → next** flow, sentence vs whole-text-box modes, import recording,
-  show-playback-order, image descriptions, and input-device switching.
+  `talkingBookSpec.ts` exercise the engine and decision logic we are preserving.
+  Expect real porting work: the specs' DOM fixtures include the toolbox button ids, and
+  there are ~144 assertions touching classes/`getStatus`/`ui-audioCurrent` in
+  audioRecordingSpec alone. Assertions about *page* markup (`ui-audioCurrent`,
+  `MakeAudioSentenceElements`, next/prev navigation) stay as-is; assertions about
+  *button* classes port to the state model (arguably becoming simpler and less brittle).
+- Manual matrix (from the lifecycle comment at the top of `talkingBook.ts`): open
+  toolbox → tool shows; create/switch page while open; type in a text box; switch tools;
+  close toolbox; Origami "Change Layout" then off. Plus the full **record → check →
+  split (adjust timings) → next** flow, sentence vs whole-text-box modes, phrase markers
+  (`|` / segment marker), import recording (confirm-replace dialog), show-playback-order
+  (overlay + bump up/down), image descriptions, input-device switching (0, 1, 2, and >2
+  devices), mic-error toast (unplug device mid-record), ctrl-click eSpeak preview, and
+  Motion/Music "Preview with narration" (their playback path shares this engine).
 - Use the `run-bloom` skill to drive the desktop app for manual verification.
 
 ---
 
-## 8. Deferred: Step 6 — retire the old non-React toolbox framework (separate PR)
+## 9. Deferred: Step 6 — retire the old non-React toolbox framework (separate PR)
 
-Once Steps 0–5 land and are verified, Talking Book is no longer non-React, so the legacy
+Once Phase A lands and is verified, Talking Book is no longer non-React, so the legacy
 framework can be deleted. This is **intentionally a separate follow-up PR** — it touches
-shared toolbox machinery used by all tools and would swamp the conversion diff; it is not
-meaningfully easier to do in the same change, and the conversion must be proven first.
+shared toolbox machinery used by all tools and would swamp the conversion diff; it is
+not meaningfully easier to do in the same change, and the conversion must be proven
+first. (It does not need to wait for Phase B.)
 
 Candidate deletions for that PR:
 - The `subpath` map and `beginAddTool`'s premade-HTML branch in `toolbox.ts`.

From 5191780308e4090833b3392a3535f13ce17426f9 Mon Sep 17 00:00:00 2001
From: josiahwall <josiah_wall@taylor.edu>
Date: Mon, 13 Jul 2026 16:44:35 -0700
Subject: [PATCH 3/3] Converted Talking Book Tool to React (BL-16410)

---
 .../bookEdit/bloomField/BloomField.ts         |   4 +-
 src/BloomBrowserUI/bookEdit/js/audioUtils.ts  |  24 +
 src/BloomBrowserUI/bookEdit/js/bloomImages.ts |   2 +-
 .../CanvasElementContextControls.tsx          |   4 +-
 .../CanvasElementDuplication.ts               |   4 +-
 .../bookEdit/js/talkingBookChecksum.ts        |  26 +
 .../bookEdit/js/talkingBookMarkupConstants.ts |   8 +
 .../bookEdit/js/xhtmlIdUtils.ts               |  14 +
 .../bookEdit/toolbox/ToolboxRoot.tsx          |  42 +-
 .../toolbox/canvas/canvasControlRegistry.ts   |   4 +-
 .../talkingBook/AdjustTimingsDialog.tsx       |   2 +-
 .../toolbox/talkingBook/IAudioRecorder.ts     |  22 +
 .../talkingBook/TalkingBookToolControls.tsx   | 469 +++++++++++++
 .../toolbox/talkingBook/TalkingBookUiState.ts |  28 +
 .../toolbox/talkingBook/audioRecording.less   | 316 ---------
 .../toolbox/talkingBook/audioRecording.ts     | 649 ++++++------------
 .../toolbox/talkingBook/audioRecordingSpec.ts |  44 +-
 .../toolbox/talkingBook/recordable.ts         |   9 +-
 .../talkingBook/showTalkingBookTool.ts        |  13 +
 .../toolbox/talkingBook/talkingBookSpec.ts    |   9 +-
 .../{talkingBook.ts => talkingBookTool.tsx}   |  31 +-
 .../talkingBook/talkingBookToolboxTool.pug    |  53 --
 .../bookEdit/toolbox/toolbox.ts               | 170 ++---
 .../bookEdit/toolbox/toolboxBootstrap.ts      |   2 +-
 .../toolbox-root-react.uitest.ts              |  84 +--
 .../spreadsheet/spreadsheetBundleRoot.ts      |   5 +-
 26 files changed, 955 insertions(+), 1083 deletions(-)
 create mode 100644 src/BloomBrowserUI/bookEdit/js/audioUtils.ts
 create mode 100644 src/BloomBrowserUI/bookEdit/js/talkingBookChecksum.ts
 create mode 100644 src/BloomBrowserUI/bookEdit/js/talkingBookMarkupConstants.ts
 create mode 100644 src/BloomBrowserUI/bookEdit/js/xhtmlIdUtils.ts
 create mode 100644 src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookToolControls.tsx
 create mode 100644 src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookUiState.ts
 create mode 100644 src/BloomBrowserUI/bookEdit/toolbox/talkingBook/showTalkingBookTool.ts
 rename src/BloomBrowserUI/bookEdit/toolbox/talkingBook/{talkingBook.ts => talkingBookTool.tsx} (89%)
 delete mode 100644 src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookToolboxTool.pug

diff --git a/src/BloomBrowserUI/bookEdit/bloomField/BloomField.ts b/src/BloomBrowserUI/bookEdit/bloomField/BloomField.ts
index c2d5fb8d4014..13f5448897fe 100644
--- a/src/BloomBrowserUI/bookEdit/bloomField/BloomField.ts
+++ b/src/BloomBrowserUI/bookEdit/bloomField/BloomField.ts
@@ -1,7 +1,7 @@
 /// <reference path="../../typings/jquery/jquery.d.ts" />
 /// <reference path="../../typings/ckeditor/ckeditor.d.ts" />
 
-import AudioRecording from "../toolbox/talkingBook/audioRecording";
+import { createValidXhtmlUniqueId } from "../js/xhtmlIdUtils";
 import { get, post } from "../../utils/bloomApi";
 import BloomMessageBoxSupport from "../../utils/bloomMessageBoxSupport";
 import { tryProcessHyperlink } from "./hyperlinks";
@@ -520,7 +520,7 @@ export default class BloomField {
             nodelist.forEach(
                 (span: Element, key: number, parent: NodeListOf<Element>) => {
                     const oldId = span.getAttribute("id");
-                    const newId = AudioRecording.createValidXhtmlUniqueId();
+                    const newId = createValidXhtmlUniqueId();
                     span.setAttribute("id", newId);
                     post(`audio/copyAudioFile?oldId=${oldId}&newId=${newId}`);
                 },
diff --git a/src/BloomBrowserUI/bookEdit/js/audioUtils.ts b/src/BloomBrowserUI/bookEdit/js/audioUtils.ts
new file mode 100644
index 000000000000..ab2325e9c72d
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/js/audioUtils.ts
@@ -0,0 +1,24 @@
+// taken out of audioRecording.ts to avoid the need for other
+// files to import that big file just to use a little bit of
+// code.
+
+import axios, { AxiosResponse } from "axios";
+
+export const kAnyRecordingApiUrl = "/bloom/api/audio/checkForAnyRecording?ids=";
+
+export async function audioExistsForIdsAsync(ids: string[]): Promise<boolean> {
+    try {
+        const response: AxiosResponse<any> = await axios.get(
+            `${kAnyRecordingApiUrl}${ids}`,
+        );
+        return doesNarrationExist(response);
+    } catch {
+        return false;
+    }
+}
+
+// Given a response from kAnyRecordingApiUrl, determines whether narration audio exists
+// for any of the specified IDs.
+export function doesNarrationExist(response: AxiosResponse<any>): boolean {
+    return response && response.data === true;
+}
diff --git a/src/BloomBrowserUI/bookEdit/js/bloomImages.ts b/src/BloomBrowserUI/bookEdit/js/bloomImages.ts
index 9a0cd0579a6b..7165d4d90e86 100644
--- a/src/BloomBrowserUI/bookEdit/js/bloomImages.ts
+++ b/src/BloomBrowserUI/bookEdit/js/bloomImages.ts
@@ -21,7 +21,7 @@ import { updateCanvasElementClass } from "../toolbox/canvas/canvasElementDomUtil
 import { farthest } from "../../utils/elementUtils";
 import { EditableDivUtils } from "./editableDivUtils";
 import { playingBloomGame } from "../toolbox/games/DragActivityTabControl";
-import { kPlaybackOrderContainerClass } from "../toolbox/talkingBook/audioRecording";
+import { kPlaybackOrderContainerClass } from "./talkingBookMarkupConstants";
 import { getWorkspaceBundleExports } from "./workspaceFrames";
 import {
     changeImage,
diff --git a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx
index ec60a37290df..03f3f908a2a6 100644
--- a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx
+++ b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx
@@ -21,7 +21,7 @@ import { BloomTooltip } from "../../../react_components/BloomToolTip";
 import { useL10n } from "../../../react_components/l10nHooks";
 import { kBloomDisabledOpacity } from "../../../utils/colorUtils";
 import { getAsync, useApiObject } from "../../../utils/bloomApi";
-import AudioRecording from "../../toolbox/talkingBook/audioRecording";
+import { audioExistsForIdsAsync } from "../audioUtils";
 import { getAudioSentencesOfVisibleEditables } from "bloom-player";
 import { canvasElementControlRegistry } from "../../toolbox/canvas/canvasElementControlRegistry";
 import { buildCanvasElementControlRegistryContext } from "../../toolbox/canvas/buildCanvasElementControlRegistryContext";
@@ -156,7 +156,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
             props.canvasElement,
         );
         const ids = audioSentences.map((sentence) => sentence.id);
-        AudioRecording.audioExistsForIdsAsync(ids)
+        audioExistsForIdsAsync(ids)
             .then((audioExists) => {
                 setTextHasAudio(audioExists);
             })
diff --git a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementDuplication.ts b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementDuplication.ts
index 35848ef349cb..343ca6816adf 100644
--- a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementDuplication.ts
+++ b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementDuplication.ts
@@ -5,7 +5,7 @@ import {
     kBloomButtonClass,
     kImageFitModeAttribute,
 } from "../../toolbox/canvas/canvasElementConstants";
-import AudioRecording from "../../toolbox/talkingBook/audioRecording";
+import { createValidXhtmlUniqueId } from "../xhtmlIdUtils";
 import { postData, postJson } from "../../../utils/bloomApi";
 import { cloneCanvasElementHtmlStructure } from "./canvasElementCloneCleanup";
 
@@ -369,7 +369,7 @@ export class CanvasElementDuplication {
         sourceId: string,
         copiedElement: Element,
     ): void {
-        const newId = AudioRecording.createValidXhtmlUniqueId();
+        const newId = createValidXhtmlUniqueId();
         copiedElement.setAttribute("id", newId);
         void copyAudioFileAsync(sourceId, newId); // we don't need to wait for this to finish
         const duration = sourceElement.getAttribute("data-duration");
diff --git a/src/BloomBrowserUI/bookEdit/js/talkingBookChecksum.ts b/src/BloomBrowserUI/bookEdit/js/talkingBookChecksum.ts
new file mode 100644
index 000000000000..b0fdc4258623
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/js/talkingBookChecksum.ts
@@ -0,0 +1,26 @@
+// taken out of audioRecording.ts to avoid the need for other
+// files to import that big file just to use a little bit of
+// code.
+
+import { getMd5 } from "../toolbox/talkingBook/md5Util";
+
+export function getChecksum(message: string): string {
+    if (message === null || message === undefined) {
+        // should not normally happen, but seems to in tests.
+        // The function is supposed to return a string, and I don't want to change
+        // all the callers, so making it return a string that's a bit unique so if
+        // we ever see it in production we can search for it.
+        return "undefind";
+    }
+    // Vertical line character ("|") acts as a phrase delimiter in Talking Books.
+    // To perform phrase-level recording, the user can insert a temporary "|" character where he wants a phrase split to happen.
+    // This is now recognized in the list of sentence delimiters, so it will be broken up as an audio-sentence.
+    // Then the user records the audio.
+    // Then the user deletes the vertical line characters.
+    // Now the text should be the desired final state, and audio recordings are possible at a sub-sentence level.
+    // However, we don't want the sentence markup to be updated because the checksums differ (since a character was deleted).
+    //
+    // Thus, our checksum function needs to ignore the vertical line character when computing the checksum.
+    const adjustedMessage = message.replace("|", "");
+    return getMd5(adjustedMessage);
+}
diff --git a/src/BloomBrowserUI/bookEdit/js/talkingBookMarkupConstants.ts b/src/BloomBrowserUI/bookEdit/js/talkingBookMarkupConstants.ts
new file mode 100644
index 000000000000..89660b3e6a0a
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/js/talkingBookMarkupConstants.ts
@@ -0,0 +1,8 @@
+// taken out of audioRecording.ts to avoid the need for other
+// files to import that big file just to use a little bit of
+// code.
+
+export const kPlaybackOrderContainerClass: string =
+    "bloom-playbackOrderControlsContainer";
+
+export const kAudioCurrent = "ui-audioCurrent";
diff --git a/src/BloomBrowserUI/bookEdit/js/xhtmlIdUtils.ts b/src/BloomBrowserUI/bookEdit/js/xhtmlIdUtils.ts
new file mode 100644
index 000000000000..c7b7e14a9fd1
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/js/xhtmlIdUtils.ts
@@ -0,0 +1,14 @@
+// taken out of audioRecording.ts to avoid the need for other
+// files to import that big file just to use a little bit of
+// code.
+
+import { EditableDivUtils } from "./editableDivUtils";
+
+export function createValidXhtmlUniqueId(): string {
+    let newId = EditableDivUtils.createUuid();
+    if (/^\d/.test(newId)) {
+        newId = "i" + newId; // valid ID in XHTML can't start with digit
+    }
+
+    return newId;
+}
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/ToolboxRoot.tsx b/src/BloomBrowserUI/bookEdit/toolbox/ToolboxRoot.tsx
index 5b0cc5975668..69ffae4b0990 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/ToolboxRoot.tsx
+++ b/src/BloomBrowserUI/bookEdit/toolbox/ToolboxRoot.tsx
@@ -69,10 +69,6 @@ const toolIconPathByToolId: Record<string, string> = {
         "/bloom/bookEdit/toolbox/impairmentVisualizer/blind-eye-white.svg",
 };
 
-const legacyToolSubPathByToolId: Record<string, string> = {
-    talkingBook: "talkingBook/talkingBookToolboxTool.html",
-};
-
 const toolboxHeaderIconStyles = css`
     width: 16px;
     height: 16px;
@@ -154,7 +150,6 @@ const makeSectionFromToolId = (toolId: string): ToolboxSection => {
         id: toolId,
         englishLabel: labelInfo.englishLabel,
         l10nKey: labelInfo.l10nKey,
-        legacyToolHtmlSubPath: legacyToolSubPathByToolId[toolId],
     };
 };
 
@@ -261,12 +256,7 @@ const ensureReactToolBodyElement = (
     }
 
     const normalizedToolId = normalizeToolId(toolId);
-    // Do not create elements for legacy tools; they load their content from
-    // legacyToolHtmlSubPath and their makeRootElement() implementations throw
-    // "Method not implemented." if called directly.
-    if (legacyToolSubPathByToolId[normalizedToolId]) {
-        return undefined;
-    }
+
     const tool = getMasterToolList().find((candidate) => {
         return candidate.id() === normalizedToolId;
     });
@@ -457,36 +447,6 @@ export const ToolboxRoot: React.FunctionComponent = () => {
             return;
         }
 
-        const legacyToolHtmlSubPath = legacyToolSubPathByToolId[toolId];
-        if (legacyToolHtmlSubPath) {
-            try {
-                const legacyToolBodyHtml = await loadLegacyToolBodyHtml({
-                    id: toolId,
-                    englishLabel: "",
-                    l10nKey: "",
-                    legacyToolHtmlSubPath,
-                });
-                setSections((previousSections) =>
-                    previousSections.map((section) => {
-                        if (section.id !== toolId) {
-                            return section;
-                        }
-                        return {
-                            ...section,
-                            legacyToolBodyHtml,
-                        };
-                    }),
-                );
-            } catch (error) {
-                hydratedToolIds.current.delete(toolId);
-                console.error(
-                    `Failed to load legacy toolbox HTML for ${toolId}.`,
-                    error,
-                );
-            }
-            return;
-        }
-
         hydratedToolIds.current.delete(toolId);
     }, []);
 
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts
index 070f04e7fbe2..0801848597cc 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts
@@ -73,7 +73,7 @@ import {
     playSound,
     showDialogToChooseSoundFileAsync,
 } from "../games/GameTool";
-import AudioRecording from "../talkingBook/audioRecording";
+import { showTalkingBookTool } from "../talkingBook/showTalkingBookTool";
 import { showLinkTargetChooserDialog } from "../../../react_components/LinkTargetChooser/LinkTargetChooserDialogLauncher";
 import { kBloomBlue } from "../../../bloomMaterialUITheme";
 import {
@@ -334,7 +334,7 @@ const makeChooseAudioMenuItemForText = (
                 englishLabel: "Use Talking Book Tool",
                 onSelect: () => {
                     runtime.closeMenu(false);
-                    AudioRecording.showTalkingBookTool();
+                    showTalkingBookTool();
                 },
             },
         ],
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/AdjustTimingsDialog.tsx b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/AdjustTimingsDialog.tsx
index b5a5d5794f39..4880e11540cb 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/AdjustTimingsDialog.tsx
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/AdjustTimingsDialog.tsx
@@ -20,7 +20,7 @@ import {
 } from "../../../react_components/BloomDialog/commonDialogComponents";
 import { useL10n } from "../../../react_components/l10nHooks";
 import { getAsync, postBoolean, postJsonAsync } from "../../../utils/bloomApi";
-import { kAudioCurrent } from "./audioRecording";
+import { kAudioCurrent } from "../../js/talkingBookMarkupConstants";
 import { AdjustTimingsControl, TimedTextSegment } from "./AdjustTimingsControl";
 import {
     getUrlPrefixFromWindowHref,
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/IAudioRecorder.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/IAudioRecorder.ts
index 3d7979f2ca91..341595c94fc4 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/IAudioRecorder.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/IAudioRecorder.ts
@@ -3,11 +3,16 @@
 // anything implementation-specific.
 
 import { RecordingMode } from "./recordingMode"; // only holds the RecordingMode enum
+import { TalkingBookUiState } from "./TalkingBookUiState";
 
 export interface IAudioRecorder {
     autoSegmentBasedOnTextLength: () => number[];
     markAudioSplit: () => void;
+    insertSegmentMarker(): void;
+    setShowPlaybackOrder(isOn: boolean): Promise<void>;
     setShowingImageDescriptions: (boolean) => void;
+    setRecordingMode(recordingMode: RecordingMode): Promise<void>;
+    handleImportRecordingClick(): void;
     removeRecordingSetup: () => void;
     getUpdateMarkupAction: () => Promise<() => void>;
     setupForRecordingAsync: () => Promise<void>;
@@ -22,4 +27,21 @@ export interface IAudioRecorder {
     getPageDocBody: () => HTMLElement | null;
     getCurrentTextBox: () => HTMLElement | null;
     recordingMode: RecordingMode;
+    setLevelCanvas(canvas: HTMLCanvasElement | null): void;
+    closeDeviceSelectMenu(): void;
+    changeInputDevice(): void;
+    setInputDevice(device: any): void;
+    startRecordCurrentAsync(): Promise<void>;
+    endRecordCurrentAsync(): Promise<void>;
+    togglePlayCurrentAsync(): Promise<void>;
+    playESpeakPreview(): void;
+    showAdjustTimingsDialog(): Promise<void>;
+    moveToNextAudioElement(): Promise<void>;
+    moveToPrevAudioElementAsync(): Promise<void>;
+    clearRecordingAsync(): Promise<void>;
+    listenAsync(canvasToExclude?: HTMLElement): Promise<void>;
+    getTalkingBookUiState(): TalkingBookUiState;
+    registerStateListener(
+        listener: (state: TalkingBookUiState) => void,
+    ): () => void;
 }
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookToolControls.tsx b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookToolControls.tsx
new file mode 100644
index 000000000000..61200d8a8349
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookToolControls.tsx
@@ -0,0 +1,469 @@
+import { css, ThemeProvider } from "@emotion/react";
+import { FunctionComponent, useEffect, useRef, useState } from "react";
+import {
+    toolboxMenuPopupTheme,
+    toolboxTheme,
+} from "../../../bloomMaterialUITheme";
+import { Span } from "../../../react_components/l10nComponents";
+import BloomButton from "../../../react_components/bloomButton";
+import { Link } from "../../../react_components/link";
+import { IAudioRecorder } from "./IAudioRecorder";
+import { Status, TalkingBookUiState } from "./TalkingBookUiState";
+import {
+    kBloomBuff,
+    kBloomPanelBackground,
+    kBloomYellow,
+} from "../../../utils/colorUtils";
+import { RecordingMode } from "./recordingMode";
+import { TalkingBookAdvancedSection } from "./talkingBookAdvancedSection";
+import { BloomTooltip } from "../../../react_components/BloomToolTip";
+import { Menu } from "@mui/material";
+import { LocalizableMenuItem } from "../../../react_components/localizableMenuItem";
+import { useMountEffect } from "../../../utils/useMountEffect";
+import { useWatchApiData } from "../../../utils/bloomApi";
+
+const RecordingMeterAndText: FunctionComponent<{
+    inputDevice: { iconSrc: string; title: string } | undefined;
+    shouldDisplay: boolean;
+    audioDevices: string[];
+    audioRecorder: IAudioRecorder;
+    uiLanguage: string;
+}> = (props) => {
+    // this useRef and useMountEffect deal with setting the engine's
+    // level canvas to be the canvas element provided in this component.
+    // Since the logic for drawing to the canvas exists in the engine,
+    // it needs access to the canvas, so on mount we pass the canvas element
+    // to the engine, and on unmount we remove it from the engine.
+    const meterCanvasRef = useRef<HTMLCanvasElement>(null);
+
+    useMountEffect(() => {
+        props.audioRecorder.setLevelCanvas(meterCanvasRef.current);
+
+        return () => props.audioRecorder.setLevelCanvas(null);
+    });
+
+    // anchors the MUI menu to the audio device image, so that it appears
+    // beneath the image when opened.
+    const [menuAnchor, setMenuAnchor] = useState<HTMLElement>();
+
+    return (
+        <>
+            <div
+                css={css`
+                    color: ${kBloomBuff};
+                `}
+            >
+                <span>{`${new Intl.NumberFormat(props.uiLanguage).format(1)}) `}</span>
+                <Span l10nKey="EditTab.Toolbox.TalkingBookTool.CheckSettingsLabel">
+                    Check that you are recording into the correct device and
+                    that these levels are showing blue:
+                </Span>
+            </div>
+            <div
+                css={css`
+                    display: flex;
+                    align-items: flex-end;
+                    margin-top: 5px;
+                    margin-bottom: 12px;
+                `}
+            >
+                <BloomTooltip
+                    tip={props.inputDevice ? props.inputDevice.title : ""}
+                    placement="bottom-end"
+                    slotProps={{
+                        tooltip: {
+                            sx: { width: "auto", maxWidth: "165px" },
+                        },
+                    }}
+                >
+                    <BloomButton
+                        l10nKey=""
+                        variant="text"
+                        hasText={false}
+                        enabledImageFile={
+                            props.inputDevice
+                                ? props.inputDevice.iconSrc
+                                : "/bloom/bookEdit/toolbox/talkingBook/microphone.svg"
+                        }
+                        css={css`
+                            min-width: 0;
+                            width: 30px;
+                            height: 30px;
+                            img {
+                                width: 30px;
+                                height: 30px;
+                            }
+                            &:hover {
+                                background-color: transparent;
+                            }
+                        `}
+                        onClickCapture={(event) => {
+                            setMenuAnchor(event.currentTarget);
+                            props.audioRecorder.changeInputDevice();
+                        }} // BloomButton doesn't allow an event to be passed into the onClick property, so onClickCapture is used here to allow for the anchoring logic to work
+                        disableRipple
+                        enabled
+                    ></BloomButton>
+                </BloomTooltip>
+                <canvas ref={meterCanvasRef} width={80} height={15}></canvas>
+            </div>
+            <ThemeProvider theme={toolboxMenuPopupTheme}>
+                <Menu
+                    anchorEl={menuAnchor}
+                    open={props.shouldDisplay}
+                    css={css`
+                        margin-top: 1px;
+                        margin-left: -2px;
+                        margin-right: -13px;
+                    `}
+                    slotProps={{
+                        paper: {
+                            sx: {
+                                width: "180px",
+                                overflowX: "hidden",
+                            },
+                        },
+                    }}
+                    onClose={() => props.audioRecorder.closeDeviceSelectMenu()}
+                >
+                    {props.audioDevices.map((item, index) => (
+                        <LocalizableMenuItem
+                            key={index}
+                            onClick={() =>
+                                props.audioRecorder.setInputDevice(item)
+                            }
+                            // convert "Microphone (xxxx)" --> xxxx, where the final ')' is often missing (cut off somewhere upstream)
+                            english={item.replace(
+                                /Microphone \(([^\)]*)\)?/,
+                                "$1",
+                            )}
+                            l10nId={null}
+                            hasLeadingIconSpace={false}
+                            labelCss={css`
+                                font-size: 12px;
+                                white-space: nowrap;
+                            `}
+                            css={css`
+                                min-height: 20px;
+                                padding-left: 5px;
+                                padding-top: 3px;
+                                padding-bottom: 3px;
+                                margin-top: 0;
+                            `}
+                        />
+                    ))}
+                </Menu>
+            </ThemeProvider>
+        </>
+    );
+};
+
+const TalkingBookButton: FunctionComponent<{
+    status: Status;
+    enabledImgFile: string;
+    expectedImgFile?: string;
+    activeImgFile?: string;
+    size?: number;
+    stepNum?: number;
+    uiLanguage?: string;
+    hideStepNum?: boolean;
+    l10nKey: string;
+    l10nText: string;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+    onClickCapture?: (event) => void; // BloomButton's onClick doesn't allow for passing in an event, so this is used by the play button to handle the ctrl + click functionality
+    onClick?: () => void;
+}> = (props) => {
+    const {
+        status,
+        enabledImgFile,
+        expectedImgFile,
+        activeImgFile,
+        size,
+        stepNum,
+        uiLanguage,
+        hideStepNum,
+        l10nKey,
+        l10nText,
+        ...possibleEventHandlers // since the buttons have different kinds of clicking/mouse event handlers, just use whatever is given
+    } = props;
+    let imgFile = props.enabledImgFile;
+    switch (props.status) {
+        case Status.Active:
+            imgFile = props.activeImgFile ?? props.enabledImgFile;
+            break;
+        case Status.Expected:
+            imgFile = props.expectedImgFile ?? props.enabledImgFile;
+            break;
+        default:
+            imgFile = props.enabledImgFile;
+            break;
+    }
+    return (
+        <div
+            css={css`
+                display: flex;
+                align-items: center;
+                margin-top: 10px;
+                margin-bottom: 5px;
+            `}
+        >
+            <BloomButton
+                l10nKey=""
+                variant="text"
+                enabled={props.status !== Status.Disabled}
+                hasText={false}
+                enabledImageFile={imgFile}
+                disabledImageFile={imgFile}
+                disableRipple
+                css={css`
+                    width: ${props.size ?? 40}px;
+                    height: ${props.size ?? 40}px;
+                    pointer-events: none; // this makes it so that you can't interact with the button when you hover over/click on the padding surrounding the button image
+                    opacity: ${props.status !== Status.Disabled ? 1 : 0.4};
+                    img {
+                        height: ${props.size ?? 40}px;
+                        width: ${props.size ?? 40}px;
+                        margin-left: -20px;
+                        pointer-events: auto; // make the button image the thing you can interact with
+                    }
+                    &:hover {
+                        background-color: transparent;
+                    }
+                `}
+                {...possibleEventHandlers}
+            ></BloomButton>
+            <div
+                css={css`
+                    color: ${props.status === Status.Expected
+                        ? kBloomYellow
+                        : kBloomBuff};
+                `}
+            >
+                {!props.hideStepNum && props.stepNum && props.uiLanguage && (
+                    <span>{`${new Intl.NumberFormat(props.uiLanguage).format(props.stepNum)}) `}</span>
+                )}
+                <Span l10nKey={props.l10nKey}>{props.l10nText}</Span>
+            </div>
+        </div>
+    );
+};
+
+export const TalkingBookToolControls: FunctionComponent<{
+    audioRecorder: IAudioRecorder;
+}> = (props) => {
+    // this grabs the current locale that the entire app is using, so that the step
+    // numbers can be properly translated using Intl.NumberFormat
+    const uiLanguage = useWatchApiData(
+        "currentUiLanguage",
+        "en",
+        "app",
+        "uiLanguageChanged",
+    );
+
+    // set the state for the entire talking book tool to be the ui state
+    // interface from TalkingBookUiState.ts. Note that the engine
+    // implements the interface.
+    const [uiState, setUiState] = useState<TalkingBookUiState>(() =>
+        props.audioRecorder.getTalkingBookUiState(),
+    );
+
+    // this useEffect is needed to pass our state setter function to the engine,
+    // so that it can update the ui state and cause a rerender whenever relevant
+    // data/state changes, such as the status of the buttons.
+    useEffect(() => {
+        return props.audioRecorder.registerStateListener((newState) => {
+            setUiState(newState);
+        });
+    }, [props.audioRecorder]);
+
+    return (
+        <ThemeProvider theme={toolboxTheme}>
+            {uiState.inShowPlaybackOrderMode && (
+                <div
+                    css={css`
+                        z-index: 1001;
+                        opacity: 0.7;
+                        position: fixed;
+                        top: inherit;
+                        background-color: ${kBloomPanelBackground};
+                        height: 100%;
+                        width: calc(100% - 15px);
+                    `}
+                ></div>
+            )}
+            <div
+                css={css`
+                    display: flex;
+                    flex-direction: column;
+                    height: calc(100% - 2 * 15px);
+                    padding: 15px;
+                `}
+            >
+                <RecordingMeterAndText
+                    inputDevice={uiState.inputDevice}
+                    shouldDisplay={uiState.shouldShowDeviceMenu}
+                    audioDevices={uiState.audioDevices}
+                    audioRecorder={props.audioRecorder}
+                    uiLanguage={uiLanguage}
+                />
+                <div
+                    css={css`
+                        color: ${kBloomBuff};
+                    `}
+                >
+                    <span>{`${new Intl.NumberFormat(uiLanguage).format(2)}) `}</span>
+                    <Span l10nKey="EditTab.Toolbox.TalkingBookTool.LookAtSentenceLabel">
+                        Look at the highlighted text
+                    </Span>
+                </div>
+                {/* record/speak button */}
+                <TalkingBookButton
+                    status={uiState.buttons.record}
+                    enabledImgFile="/bloom/bookEdit/toolbox/talkingBook/record_enabled.svg"
+                    expectedImgFile="/bloom/bookEdit/toolbox/talkingBook/record_expected.svg"
+                    activeImgFile="/bloom/bookEdit/toolbox/talkingBook/record_active.svg"
+                    stepNum={3}
+                    uiLanguage={uiLanguage}
+                    l10nKey="EditTab.Toolbox.TalkingBookTool.SpeakLabel"
+                    l10nText="Speak"
+                    onMouseDown={() => {
+                        props.audioRecorder.startRecordCurrentAsync();
+                    }}
+                    onMouseUp={() => {
+                        props.audioRecorder.endRecordCurrentAsync();
+                    }}
+                />
+                {/* play/check button */}
+                <TalkingBookButton
+                    status={uiState.buttons.play}
+                    enabledImgFile="/bloom/images/play_enabled.svg"
+                    expectedImgFile="/bloom/bookEdit/toolbox/talkingBook/play_expected.svg"
+                    activeImgFile="/bloom/bookEdit/toolbox/talkingBook/pause_yellow.svg"
+                    size={45}
+                    stepNum={4}
+                    uiLanguage={uiLanguage}
+                    hideStepNum={uiState.buttons.play === Status.Active}
+                    l10nKey={
+                        uiState.buttons.play === Status.Active
+                            ? "Common.Pause"
+                            : "EditTab.Toolbox.TalkingBookTool.CheckLabel"
+                    }
+                    l10nText={
+                        uiState.buttons.play === Status.Active
+                            ? "Pause"
+                            : "Check"
+                    }
+                    onClickCapture={(event) => {
+                        if (event.ctrlKey) {
+                            props.audioRecorder.playESpeakPreview();
+                        } else {
+                            props.audioRecorder.togglePlayCurrentAsync();
+                        }
+                    }}
+                />
+                {/* adjust timings button, displayed only when recording the whole textbox */}
+                {uiState.recordingMode === RecordingMode.TextBox && (
+                    <TalkingBookButton
+                        status={uiState.buttons.split}
+                        enabledImgFile="/bloom/bookEdit/toolbox/talkingBook/adjustTimings.svg"
+                        size={45}
+                        stepNum={5}
+                        uiLanguage={uiLanguage}
+                        l10nKey="EditTab.Toolbox.TalkingBookTool.AdjustTimings"
+                        l10nText="Adjust Timings..."
+                        onClick={() => {
+                            props.audioRecorder.showAdjustTimingsDialog();
+                        }}
+                    />
+                )}
+                {/* next button */}
+                <TalkingBookButton
+                    status={uiState.buttons.next}
+                    enabledImgFile="/bloom/bookEdit/toolbox/talkingBook/next_enabled.svg"
+                    expectedImgFile="/bloom/bookEdit/toolbox/talkingBook/next_expected.svg"
+                    stepNum={
+                        uiState.recordingMode === RecordingMode.TextBox ? 6 : 5
+                    }
+                    uiLanguage={uiLanguage}
+                    l10nKey="EditTab.Toolbox.TalkingBookTool.NextLabel"
+                    l10nText="Next"
+                    onClick={() => {
+                        props.audioRecorder.moveToNextAudioElement();
+                    }}
+                />
+                {/* back/prev button */}
+                <TalkingBookButton
+                    status={uiState.buttons.prev}
+                    enabledImgFile="/bloom/bookEdit/toolbox/talkingBook/prev_enabled.svg"
+                    size={20}
+                    l10nKey="EditTab.Toolbox.TalkingBookTool.Back"
+                    l10nText="Back"
+                    onClick={() => {
+                        props.audioRecorder.moveToPrevAudioElementAsync();
+                    }}
+                />
+                {/* clear button */}
+                <TalkingBookButton
+                    status={uiState.buttons.clear}
+                    enabledImgFile="/bloom/bookEdit/toolbox/talkingBook/clear_enabled.svg"
+                    size={20}
+                    l10nKey="EditTab.Toolbox.TalkingBookTool.Clear"
+                    l10nText="Clear"
+                    onClick={() => {
+                        props.audioRecorder.clearRecordingAsync();
+                    }}
+                />
+                {/* listen to whole page button */}
+                <TalkingBookButton
+                    status={uiState.buttons.listen}
+                    enabledImgFile="/bloom/bookEdit/toolbox/talkingBook/listen_enabled.svg"
+                    activeImgFile="/bloom/bookEdit/toolbox/talkingBook/listen_active.svg"
+                    l10nKey="EditTab.Toolbox.TalkingBookTool.Listen"
+                    l10nText="Listen to the whole page"
+                    onClick={() => {
+                        props.audioRecorder.listenAsync();
+                    }}
+                />
+                <TalkingBookAdvancedSection
+                    recordingMode={uiState.recordingMode}
+                    haveACurrentTextboxModeRecording={
+                        uiState.haveACurrentTextboxModeRecording
+                    }
+                    setRecordingMode={(recordingMode) =>
+                        props.audioRecorder.setRecordingMode(recordingMode)
+                    }
+                    hasAudio={uiState.hasAudio}
+                    hasRecordableDivs={uiState.hasRecordableDivs}
+                    handleImportRecordingClick={() =>
+                        props.audioRecorder.handleImportRecordingClick()
+                    }
+                    insertSegmentMarker={() =>
+                        props.audioRecorder.insertSegmentMarker()
+                    }
+                    inShowPlaybackOrderMode={uiState.inShowPlaybackOrderMode}
+                    setShowPlaybackOrder={(isOn) =>
+                        props.audioRecorder.setShowPlaybackOrder(isOn)
+                    }
+                    showingImageDescriptions={uiState.showingImageDescriptions}
+                    setShowingImageDescriptions={(isOn) =>
+                        props.audioRecorder.setShowingImageDescriptions(isOn)
+                    }
+                />
+                <div
+                    css={css`
+                        margin-top: auto;
+                        z-index: 1002;
+                    `}
+                >
+                    <Link
+                        l10nKey="Common.Help"
+                        href="/bloom/api/help?topic=Tasks/Edit_tasks/Record_Audio/Talking_Book_Tool_overview.htm"
+                    >
+                        Help
+                    </Link>
+                </div>
+            </div>
+        </ThemeProvider>
+    );
+};
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookUiState.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookUiState.ts
new file mode 100644
index 000000000000..945832509133
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookUiState.ts
@@ -0,0 +1,28 @@
+import { RecordingMode } from "./recordingMode";
+
+export enum Status {
+    Disabled, // Can't use button now (e.g., Play when there is no recording)
+    Enabled, // Can use now, not the most likely thing to do next
+    Expected, // The most likely/appropriate button to use next (e.g., Play right after recording)
+    Active, // Button now active (Play while playing; Record while held down)
+}
+
+// ui state used by the React talking book tool. The engine (audioRecording.ts)
+// manipulates this state and then calls a set state function provided by the React
+// tool, so that the tool rerenders and updates its copy of the state to match what's
+// been changed.
+export interface TalkingBookUiState {
+    buttons: Record<
+        "record" | "play" | "split" | "next" | "prev" | "clear" | "listen",
+        Status
+    >;
+    recordingMode: RecordingMode;
+    hasAudio: boolean;
+    hasRecordableDivs: boolean;
+    haveACurrentTextboxModeRecording: boolean;
+    inShowPlaybackOrderMode: boolean;
+    showingImageDescriptions: boolean;
+    inputDevice?: { iconSrc: string; title: string };
+    shouldShowDeviceMenu: boolean;
+    audioDevices: string[];
+}
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less
index b87d9d5ec44e..48e8086b441b 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less
@@ -1,14 +1,7 @@
 @import "../../../bloomUI.less";
 
-@textColor: @bloom-buff;
-@hoverBackgroundColor: @bloom-buff;
 @highlightColor: @bloom-yellow;
-@toolboxBackgroundColor: @bloom-panelBackground;
-@sectionVerticalGap: 25px;
-@buttonColumnWidth: 40px;
 @splitAnimationTime: 300ms;
-@textOnLightBackground: black;
-@disablingOverlayZindex: 1001; // higher than #audio-devlist
 
 // See BL-7442: When low line height causes lines to overlap, the highlighting overlaps and
 // can over up the bottom of the characters in the line above. For Chrome/Safari we have
@@ -105,293 +98,6 @@ div.ui-audioCurrent p {
     }
 }
 
-.ui-audioBody {
-    display: flex;
-    flex-direction: column;
-    height: @toolboxContentHeight;
-    padding: @toolboxContentPadding;
-
-    .ui-audioJqueryStuff {
-        *,
-        a {
-            color: @textColor;
-        }
-
-        background-color: @toolboxBackgroundColor;
-
-        background-position: center;
-
-        .ui-audioTitle {
-            font-size: larger;
-            margin-top: 5px;
-            font-size: large;
-        }
-
-        .ui-audio-button {
-            height: @buttonColumnWidth;
-            width: @buttonColumnWidth;
-            border: none;
-            background-size: contain;
-            background-color: transparent;
-            background-repeat: no-repeat;
-            display: inline-block;
-            border: solid thin transparent; // just be a little responsive to indicate that it is clickable
-
-            &:hover {
-                border: none; // makes it grow a little on mouse hover
-            }
-        }
-
-        #audio-prev,
-        #audio-clear {
-            height: 20px;
-            //width:20px;
-            //margin-left: 10px;
-            background-position: center;
-        }
-
-        .disabled {
-            // Note: There is a similar rule in signLanguage.less which actually does have the scope to affect this talking book code.
-            opacity: 0.4;
-            pointer-events: none;
-        }
-
-        // This is kind of like disabled, except that pointer-events are still allowed. This allows it to look visually enabled when hovered.
-        .disabledUnlessHover {
-            opacity: 0.4;
-
-            // No need to actually disable clicks unless hovered because you are more or less probably going to be hovering it if you're going to click it
-            &:hover {
-                opacity: 1;
-            }
-        }
-
-        #audio-record {
-            background-image: url("record_enabled.svg");
-
-            &.expected {
-                background-image: url("record_expected.svg");
-            }
-
-            &.active {
-                background-image: url("record_active.svg");
-            }
-        }
-
-        #audio-play {
-            // We need a path here because this image is in a shared folder, not at the same
-            // location as the generated audioRecording.css itself like the others.
-            background-image: url(/bloom/images/play_enabled.svg);
-            height: 45px;
-            width: 45px; // visually same width as record button
-
-            &.expected {
-                background-image: url(play_expected.svg);
-            }
-
-            &.active {
-                // we want to switch to a yellow square. This is a cheap way to get it.
-                // If we want some other special shape when play is active, we have a currently-unused
-                // svg we can use/edit at url("play-active.svg")
-                background-image: url(pause_yellow.svg);
-                //background-color: @bloom-yellow;
-            }
-        }
-
-        #audio-split {
-            background-image: url(adjustTimings.svg);
-            height: 45px;
-            width: 45px; // visually same width as record button
-
-            // &.expected {
-            //     background-image: url(adjustTimings_expected.svg);
-            // }
-        }
-
-        .audio-about {
-            margin-top: @sectionVerticalGap;
-        }
-
-        #audio-look-at,
-        #audio-check {
-            max-width: none;
-        }
-
-        #audio-listen-label {
-            position: relative;
-            width: 80px;
-        }
-
-        a {
-            display: block; //start on a new line
-            margin-top: 10px;
-            text-decoration: underline;
-            cursor: pointer;
-        }
-
-        .ui-audioFooter {
-            margin-top: 30px;
-            margin-bottom: 5px;
-        }
-
-        .ui-audioInput,
-        .ui-audioMeter {
-            display: inline-block;
-            background-color: @bloom-panelBackground;
-        }
-
-        .ui-audioInputGroup {
-            margin-top: 5px;
-            margin-bottom: 12px;
-        }
-
-        img#audio-input-dev {
-            height: 30px;
-            width: 30px;
-            box-sizing: border-box;
-            border: solid thin transparent; // just be a little responsive to indicate that it is clickable
-
-            &:hover {
-                border: none; // makes it grow a little on mouse hover
-            }
-        }
-
-        // hidden unless we need to choose between three or more input devices.
-        #audio-devlist {
-            display: none;
-            position: absolute;
-            background-color: white;
-            width: 180px;
-            padding-left: 0;
-            list-style: none;
-            cursor: pointer;
-            z-index: 1000;
-            overflow-x: hidden;
-
-            li {
-                min-height: 20px;
-                font-size: 12px;
-                color: @textOnLightBackground;
-                padding-left: 5px;
-                white-space: nowrap;
-
-                &:hover {
-                    background-color: @hoverBackgroundColor;
-                }
-            }
-
-            #audio-input-dev {
-                margin-top: 2px;
-                width: 15px;
-            }
-        }
-
-        #audio-next {
-            background-image: url(next_enabled.svg);
-
-            &.expected {
-                background-image: url(next_expected.svg);
-            }
-        }
-
-        #audio-prev {
-            background-image: url(prev_enabled.svg);
-        }
-
-        #audio-listen {
-            margin-left: 2px; // visually centered
-            background-image: url(listen_enabled.svg);
-
-            &.active {
-                background-image: url(listen_active.svg);
-            }
-        }
-
-        #audio-clear {
-            background-image: url(clear_enabled.svg);
-        }
-
-        .button-label-wrapper {
-            margin-top: 10px;
-            margin-bottom: 5px; // Was originally part of the button. Note that vertical margins will auto-collapse with the next element's margin-top. You can switch this to padding-bottom if this is undesirable.
-        }
-
-        @buttonWidth: 60px;
-        @uiAudioBodyMinWidth: 149px; // The minimum width of the container, which occurs if the scroll bar is present. It is 17 pixels larger otherwise. Could be 150 or 149.67 pixels, so round down to 149
-        @whitespaceFillerWidth: 3px; // Caused by the whitespace in the PUG code I think.
-
-        .button-wrapper {
-            display: inline-block;
-            min-width: @buttonWidth;
-            vertical-align: middle; // Align the button with the label in case the label is really long.
-        }
-
-        .audio-label {
-            display: inline-block;
-            max-width: (
-                @uiAudioBodyMinWidth - @buttonWidth - @whitespaceFillerWidth
-            );
-            vertical-align: middle;
-
-            &.expected {
-                color: @highlightColor;
-                //font-weight: bold;
-                //font-size: 11pt;
-            }
-        }
-
-        .audio-advanced {
-            padding-top: 35px;
-        }
-    }
-
-    .help-link {
-        z-index: @disablingOverlayZindex + 1;
-        margin-top: auto; //push to the bottom
-        text-decoration: none;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-
-// Automatic numbering of the elements
-// Uses CSS counter instead of an ordered list (which is more awkward structurally and doesn't offer formatting flexibility)
-// You could use display: none instead of the not() pseudo-selector, but display: none is not compatible with CSS transitions.
-.ui-audioBody {
-    counter-reset: talkingBookListCounter;
-}
-
-*:not(.hide-countable) > .audio-label.talking-book-counter {
-    counter-increment: talkingBookListCounter;
-}
-
-// Intuitively, one would expect this to be prefixed by "*:not(.hide-countable) > "
-// However, this would cause the counter to be removed, which may change the number of lines the text takes
-// That changes the vertical height needed, which affects the vertical centering, which affects the position of the top of the button.
-// Thus, we keep the counter there regardless of whether it's hide-countable or not.
-// Instead, we rely on counter-increment to check .hide-countable in order to make sure the next one gets the right number.
-// This will keep a (wrongly-numbered) counter in the text, making text length and thus vertical top more consistent
-// (Still could be corner case if we switch from a 2-digit number to a 1-digit number, but we'll live with that)
-.audio-label.talking-book-counter:before {
-    content: counter(talkingBookListCounter) ") ";
-}
-
-// This rule supports hiding the count but not changing the counts of subsequent buttons.
-// The one current instance is hiding the '4' when "Check" changes to "Stop" during playback.
-.audio-label.talking-book-counter.hide-counter-still-count:before {
-    display: none;
-}
-
-// Customized number styles for UI languages which need it:
-*:not(.hide-countable) > .audio-label.talking-book-counter[lang="bn"]:before {
-    // bn = Bangla also known as Bengali
-
-    // Note: If some of the items are in lang="bn", but some fallback to lang="en", we want the "en" ones to use the default numbering (for now)
-    //       (If in the future, you want all of them to use bengali numbers, you can include lang="bn" on the fallback ones too if they have class talking-book-counter)
-    content: counter(talkingBookListCounter, bengali) ") ";
-}
-
 //////////////////////////////////////////
 // Animation of hiding/showing a button //
 //////////////////////////////////////////
@@ -471,14 +177,6 @@ body .cursor-progress {
     bottom: 46px;
 }
 
-#audio-playbackOrderControl-wrapper {
-    z-index: @disablingOverlayZindex + 1;
-
-    label.checked {
-        color: @highlightColor;
-    }
-}
-
 // This is for a div added to a visible bloom-translationGroup
 // that needs to display playback order controls.
 .bloom-playbackOrderControlsContainer {
@@ -491,17 +189,3 @@ body .cursor-progress {
     justify-content: center;
     z-index: 2001; // canvas element is 1001
 }
-
-.hiddenOverlay {
-    display: none;
-}
-
-#disablingOverlay {
-    z-index: @disablingOverlayZindex;
-    opacity: 0.7;
-    position: fixed;
-    top: inherit;
-    background-color: @toolboxBackgroundColor;
-    height: 100%;
-    width: calc(100% - 20px);
-}
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.ts
index 365fa9c4fba3..68e797a4d74e 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.ts
@@ -54,10 +54,15 @@ import {
 } from "../../js/workspaceFrames";
 import PlaybackOrderControls from "../../../react_components/playbackOrderControls";
 import Recordable from "./recordable";
-import { getMd5 } from "./md5Util";
+import { getChecksum } from "../../js/talkingBookChecksum";
 import { setupImageDescriptions } from "../imageDescription/imageDescription";
-import { TalkingBookAdvancedSection } from "./talkingBookAdvancedSection";
 import { EditableDivUtils } from "../../js/editableDivUtils";
+import { createValidXhtmlUniqueId } from "../../js/xhtmlIdUtils";
+import { doesNarrationExist, kAnyRecordingApiUrl } from "../../js/audioUtils";
+import {
+    kAudioCurrent,
+    kPlaybackOrderContainerClass,
+} from "../../js/talkingBookMarkupConstants";
 import {
     hideImageDescriptions,
     showImageDescriptions,
@@ -71,14 +76,7 @@ import {
 } from "../../../react_components/featureStatus";
 import { animateStyleName } from "../../../utils/shared";
 import jQuery from "jquery";
-
-enum Status {
-    Disabled, // Can't use button now (e.g., Play when there is no recording)
-    DisabledUnlessHover, // Same as disabled, except it will become enabled if the user hovers over it.
-    Enabled, // Can use now, not the most likely thing to do next
-    Expected, // The most likely/appropriate button to use next (e.g., Play right after recording)
-    Active, // Button now active (Play while playing; Record while held down)
-}
+import { TalkingBookUiState, Status } from "./TalkingBookUiState";
 
 // ENHANCE: Replace AudioRecordingMode with this?
 export enum AudioMode {
@@ -99,8 +97,6 @@ export function getAllAudioModes(): AudioMode[] {
     ];
 }
 
-export const kAnyRecordingApiUrl = "/bloom/api/audio/checkForAnyRecording?ids=";
-
 const kWebsocketContext = "audio-recording";
 const kSegmentClass = "bloom-highlightSegment";
 // Indicates that the element should be highlighted.
@@ -115,20 +111,12 @@ const kDisableHighlightClass = "ui-disableHighlight";
 const kSuppressHighlightClass = "ui-suppressHighlight";
 const kAudioSentence = "audio-sentence"; // Even though these can now encompass more than strict sentences, we continue to use this class name for backwards compatability reasons
 const kAudioSentenceClassSelector = "." + kAudioSentence;
-export const kAudioCurrent = "ui-audioCurrent";
 const kAudioCurrentClassSelector = "." + kAudioCurrent;
 const kBloomEditableTextBoxClass = "bloom-editable";
 const kBloomEditableTextBoxSelector = "div.bloom-editable";
 const kBloomTranslationGroupClass = "bloom-translationGroup";
 const kBloomVisibleClass = "bloom-visibility-code-on";
 
-const kAudioSplitId = "audio-split";
-
-export const kTalkingBookToolId = "talkingBook";
-
-export const kPlaybackOrderContainerClass: string =
-    "bloom-playbackOrderControlsContainer";
-
 const kEndTimeAttributeName: string = "data-audioRecordingEndTimes";
 
 interface IPlaybackOrderInfo {
@@ -170,9 +158,8 @@ export function getAudioRecorder(): IAudioRecorder {
 
 // TODO: Maybe a lot of this code should move to TalkingBook.ts (regarding the tool) instead of AudioRecording.ts (regarding recording/playing the audio files)
 export default class AudioRecording implements IAudioRecorder {
-    private readonly delegatedEventsNamespace = ".audioRecorder";
     private recording: boolean;
-    private levelCanvas: HTMLCanvasElement;
+    private levelCanvas: HTMLCanvasElement | null = null;
     private currentAudioId: string;
     // When we are playing audio, this holds the segments we haven't yet finished playing, including the one currently playing.
     // Thus, when it's empty we are not playing audio at all
@@ -184,8 +171,6 @@ export default class AudioRecording implements IAudioRecorder {
     private currentAudioSessionNum: number = 0;
     private awaitingNewRecording: boolean;
 
-    private audioSplitButton: HTMLButtonElement;
-
     private showingImageDescriptions: boolean;
     public recordingMode: RecordingMode;
     private previousRecordMode: RecordingMode;
@@ -209,21 +194,13 @@ export default class AudioRecording implements IAudioRecorder {
     public __testonly__sentenceToIdListMap = this.sentenceToIdListMap; // Exposing it for unit tests. Not meant for public use.
 
     private playbackOrderCache: IPlaybackOrderInfo[] = [];
-    private disablingOverlay: HTMLDivElement;
 
     constructor(maySetHighlight: boolean = true) {
-        this.audioSplitButton = <HTMLButtonElement>(
-            document.getElementById(kAudioSplitId)!
-        );
-
         // Initialize to Unknown (as opposed to setting to the default Sentence) so we can identify
         // when we need to fetch from Collection Settings vs. when it's already set.
         this.recordingMode = RecordingMode.Unknown;
 
-        this.levelCanvas = <HTMLCanvasElement>(
-            document.getElementById("audio-meter")!
-        );
-
+        this.updateInputDeviceDisplay();
         this.updateDisplay(maySetHighlight); // review is the the best time?
     }
 
@@ -240,102 +217,63 @@ export default class AudioRecording implements IAudioRecorder {
         return this.pullDefaultRecordingModeAsync();
     }
 
-    private bindDocumentDelegatedHandlers(): void {
-        // Bind the toolbar buttons using delegated handlers on a stable root
-        // ($(document)) rather than directly on the button elements. The toolbox
-        // re-hydrates the tool body (ToolboxRoot's LiveToolBodyHost does
-        // host.innerHTML = "" and re-inserts the markup), which destroys the
-        // button nodes these handlers were attached to and replaces them with
-        // fresh nodes that have no handlers. The result is buttons that look
-        // enabled but do nothing, because direct (non-delegated) handlers live on
-        // the specific DOM node, which no longer exists. Delegating from $(document)
-        // with a namespaced event survives that re-creation, and the namespaced
-        // .off() prevents handlers being added twice if the tool is reopened.
-        // (This matches the delegation pattern in readers/readerTools.ts.)
-        const delegationRoot = $(document);
-        const ns = this.delegatedEventsNamespace;
-
-        delegationRoot
-            .off("click" + ns, "#audio-next")
-            .on("click" + ns, "#audio-next", () =>
-                this.moveToNextAudioElement(),
-            );
-        delegationRoot
-            .off("click" + ns, "#audio-prev")
-            .on("click" + ns, "#audio-prev", () =>
-                this.moveToPrevAudioElementAsync(),
-            );
-        delegationRoot
-            .off("mousedown" + ns + " mouseup" + ns, "#audio-record")
-            .on("mousedown" + ns, "#audio-record", () =>
-                this.startRecordCurrentAsync(),
-            )
-            .on("mouseup" + ns, "#audio-record", () =>
-                this.endRecordCurrentAsync(),
-            );
-        delegationRoot
-            .off("click" + ns, "#audio-play")
-            .on("click" + ns, "#audio-play", (e) => {
-                if (!e.ctrlKey) {
-                    // Normal case
-                    this.togglePlayCurrentAsync();
-                } else {
-                    // Control + Click case: Special debug mode
-                    this.playESpeakPreview();
-                }
-            });
-        delegationRoot
-            .off("click" + ns, "#audio-split")
-            .on("click" + ns, "#audio-split", async () => {
-                const mediaPlayer = this.getMediaPlayer();
-                mediaPlayer.pause();
-                getWorkspaceBundleExports().showAdjustTimingsDialogFromWorkspaceRoot(
-                    this.split,
-                    this.editTimingsFileAsync,
-                    this.applyTimingsFileAsync,
-                    (canceled) => {
-                        if (!canceled) {
-                            this.changeStateAndSetExpectedAsync("next");
-                            this.updatePlayerStatus();
-                        }
-                    },
-                );
-            });
-        delegationRoot
-            .off("click" + ns, "#audio-listen")
-            .on("click" + ns, "#audio-listen", () => this.listenAsync());
-        delegationRoot
-            .off("click" + ns, "#audio-clear")
-            .on("click" + ns, "#audio-clear", () => this.clearRecordingAsync());
-
-        // Wire the media player's event handlers. They are (re)applied lazily in
-        // getMediaPlayer() so they survive the toolbox re-hydrating and replacing
-        // the #player element. Media events (ended/durationchange/error) don't
-        // bubble, so unlike the buttons they can't be delegated; instead we detect
-        // a replaced node and re-attach. Calling getMediaPlayer() here forces the
-        // initial wiring.
-        this.getMediaPlayer();
+    // holds the state setter function provided by the React talking book
+    // tool controls, so that state is updated and the talking book component
+    // rerenders whenever this is called
+    private stateListener?: (state: TalkingBookUiState) => void;
+
+    // the engine's version of the uiState for the talking book tool,
+    // to be modified and used by the engine. The React tool's version
+    // is set to match this one whenever stateListener is called
+    public uiState: TalkingBookUiState = {
+        buttons: {
+            record: Status.Enabled,
+            play: Status.Disabled,
+            split: Status.Disabled,
+            next: Status.Disabled,
+            prev: Status.Disabled,
+            clear: Status.Disabled,
+            listen: Status.Disabled,
+        },
+        recordingMode: RecordingMode.Unknown,
+        hasAudio: false,
+        hasRecordableDivs: false,
+        haveACurrentTextboxModeRecording: false,
+        inShowPlaybackOrderMode: false,
+        showingImageDescriptions: false,
+        shouldShowDeviceMenu: false,
+        audioDevices: [],
+    };
 
-        delegationRoot
-            .off("click" + ns, "#audio-input-dev")
-            .on("click" + ns, "#audio-input-dev", () =>
-                this.selectInputDevice(),
-            );
+    // this is where the state setter gets put into stateListener
+    public registerStateListener(
+        listener: (state: TalkingBookUiState) => void,
+    ): () => void {
+        this.stateListener = listener;
+        listener(this.getTalkingBookUiState());
+        return () => {
+            if (this.stateListener === listener) {
+                this.stateListener = undefined;
+            }
+        };
     }
 
-    private unbindDocumentDelegatedHandlers(): void {
-        const delegationRoot = $(document);
-        const ns = this.delegatedEventsNamespace;
+    // whenever the engine has changed its version of the uiState,
+    // we need to update the React tool's state accordingly and rerender
+    // it. So, call this function.
+    private notifyStateChanged(): void {
+        this.stateListener?.(this.getTalkingBookUiState());
+    }
 
-        delegationRoot
-            .off("click" + ns, "#audio-next")
-            .off("click" + ns, "#audio-prev")
-            .off("mousedown" + ns + " mouseup" + ns, "#audio-record")
-            .off("click" + ns, "#audio-play")
-            .off("click" + ns, "#audio-split")
-            .off("click" + ns, "#audio-listen")
-            .off("click" + ns, "#audio-clear")
-            .off("click" + ns, "#audio-input-dev");
+    public getTalkingBookUiState(): TalkingBookUiState {
+        return {
+            ...this.uiState,
+            buttons: { ...this.uiState.buttons },
+            inputDevice: this.uiState.inputDevice
+                ? { ...this.uiState.inputDevice }
+                : undefined,
+            audioDevices: [...this.uiState.audioDevices],
+        };
     }
 
     // The DOM node we last attached media-event handlers to. Used to detect when
@@ -343,12 +281,16 @@ export default class AudioRecording implements IAudioRecorder {
     private wiredPlayer: HTMLMediaElement | null = null;
 
     private getMediaPlayer(): HTMLMediaElement {
-        const player = document.getElementById(
+        let player = document.getElementById(
             "player",
         ) as HTMLMediaElement | null;
 
         if (!player) {
-            throw new Error(`HTMLMediaElement #player was not found.`);
+            player = document.createElement("audio");
+            player.id = "player";
+            player.preload = "none";
+            player.style.display = "none";
+            document.body.appendChild(player);
         }
 
         // If the element was replaced (e.g. by toolbox re-hydration), its media-event
@@ -525,12 +467,8 @@ export default class AudioRecording implements IAudioRecorder {
     // Initialization that happens for a new page should happen in newPageReady instead.
     public async setupForRecordingAsync(): Promise<void> {
         this.isShowing = true;
-        this.bindDocumentDelegatedHandlers();
 
         this.updateInputDeviceDisplay();
-        this.disablingOverlay = document.getElementById(
-            "disablingOverlay",
-        ) as HTMLDivElement;
 
         // Add these listeners even if there's currently no editables.
         // It's possible that your page starts with no editables, then you open the Talking Book Tool (and this method runs),
@@ -788,7 +726,7 @@ export default class AudioRecording implements IAudioRecorder {
         this.currentAudioSessionNum++;
     }
 
-    private async moveToNextAudioElement(): Promise<void> {
+    public async moveToNextAudioElement(): Promise<void> {
         toastr.clear();
 
         const next = this.getNextAudioElement();
@@ -803,7 +741,7 @@ export default class AudioRecording implements IAudioRecorder {
         return this.changeStateAndSetExpectedAsync("record");
     }
 
-    private async moveToPrevAudioElementAsync(): Promise<void> {
+    public async moveToPrevAudioElementAsync(): Promise<void> {
         toastr.clear();
         const prev = this.getPreviousAudioElement();
         if (prev == null) return;
@@ -1301,7 +1239,7 @@ export default class AudioRecording implements IAudioRecorder {
             if (currentElement.hasAttribute("id")) {
                 id = currentElement.getAttribute("id")!;
             } else {
-                id = AudioRecording.createValidXhtmlUniqueId();
+                id = createValidXhtmlUniqueId();
                 currentElement.setAttribute("id", id);
             }
         }
@@ -1458,7 +1396,7 @@ export default class AudioRecording implements IAudioRecorder {
     }
 
     // The method called when the 'play' button is clicked. If we are already playing, it stops play.
-    private async togglePlayCurrentAsync(): Promise<void> {
+    public async togglePlayCurrentAsync(): Promise<void> {
         toastr.clear();
 
         if (this.getStatus("play") === Status.Active) {
@@ -1644,6 +1582,25 @@ export default class AudioRecording implements IAudioRecorder {
         }
     }
 
+    // displays the popup dialog to adjust the timings of the
+    // audio recordings for the page, whenever the adjust timing
+    // button in the talking book tool is pressed.
+    public async showAdjustTimingsDialog(): Promise<void> {
+        const mediaPlayer = this.getMediaPlayer();
+        mediaPlayer.pause();
+        getWorkspaceBundleExports().showAdjustTimingsDialogFromWorkspaceRoot(
+            this.split,
+            this.editTimingsFileAsync,
+            this.applyTimingsFileAsync,
+            (canceled) => {
+                if (!canceled) {
+                    this.changeStateAndSetExpectedAsync("next");
+                    this.updatePlayerStatus();
+                }
+            },
+        );
+    }
+
     // Moves the highlight to the next sub-element
     // Note: May kick off some async work, but it's fairly inconsequential and no need to await it currently.
     // originalSessionNum: The value of this.currentAudioSessionNum at the time when the audio file started playing.
@@ -1870,75 +1827,59 @@ export default class AudioRecording implements IAudioRecorder {
         return this.changeStateAndSetExpectedAsync("split");
     }
 
-    private selectInputDevice(): void {
+    // makes the audio devices menu disappear by setting the uiState
+    // that determines whether it should be shown or not.
+    public closeDeviceSelectMenu(): void {
+        if (this.uiState.shouldShowDeviceMenu) {
+            this.uiState.shouldShowDeviceMenu = false;
+            this.notifyStateChanged();
+        }
+    }
+
+    // make the selected audio device be the current audio device
+    public setInputDevice(device: any): void {
+        this.closeDeviceSelectMenu();
+        axios
+            .post("/bloom/api/audio/currentRecordingDevice", device, {
+                headers: { "Content-Type": "text/plain" },
+            })
+            .then((result) => {
+                this.updateInputDeviceDisplay();
+            })
+            .catch((error) => {
+                toastr.error(error.statusText);
+            });
+    }
+
+    public changeInputDevice(): void {
         // REVIEW: this may in fact be unneeded but I'm just trying to get eslint set up and conceivably it is intentional
         // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const thisClass = this;
         get("audio/devices", (result) => {
             const data = result.data; // Axios apparently recognizes the JSON and parses it automatically.
             // Retrieves JSON generated by AudioRecording.AudioDevicesJson
             // Something like {"devices":["microphone", "Logitech Headset"], "productName":"Logitech Headset", "genericName":"Headset" },
             // except that in practice currrently the generic and product names are the same and not as helpful as the above.
             if (data.devices.length <= 1) return; // no change is possible.
+
             if (data.devices.length == 2) {
                 // Just toggle between them
                 const device =
                     data.devices[0] == data.productName
                         ? data.devices[1]
                         : data.devices[0];
-                axios
-                    .post("/bloom/api/audio/currentRecordingDevice", device, {
-                        headers: { "Content-Type": "text/plain" },
-                    })
-                    .then((result) => {
-                        this.updateInputDeviceDisplay();
-                    })
-                    .catch((error) => {
-                        toastr.error(error.statusText);
-                    });
+                this.setInputDevice(device);
                 return;
             }
-            const devList = $("#audio-devlist");
-            devList.empty();
+
+            // pass a list of the available audio devices to
+            // the talking book tool via state, so that it can
+            // display them in its Mui menu
+            this.uiState.audioDevices = [];
             for (let i = 0; i < data.devices.length; i++) {
-                // convert "Microphone (xxxx)" --> xxxx, where the final ')' is often missing (cut off somewhere upstream)
-                let label = data.devices[i].replace(
-                    /Microphone \(([^\)]*)\)?/,
-                    "$1",
-                );
-                //make what's left safe for html
-                label = $("<div>").text(label).html();
-                // preserve the product name, which is the id we will send back if they choose it
-                const menuItem = devList.append(
-                    '<li data-choice="' + i + '">' + label + "</li>",
-                );
+                this.uiState.audioDevices.push(data.devices[i]);
             }
-            (<any>devList)
-                .one(
-                    "click",
-                    function (event) {
-                        devList.hide();
-                        const choice = $(event.target).data("choice");
-                        axios
-                            .post(
-                                "/bloom/api/audio/currentRecordingDevice",
-                                data.devices[choice],
-                                { headers: { "Content-Type": "text/plain" } },
-                            )
-                            .then((result) => {
-                                this.updateInputDeviceDisplay();
-                            })
-                            .catch((error) => {
-                                toastr.error(error.statusText);
-                            });
-                    }.bind(this),
-                )
-                .show()
-                .position({
-                    my: "left top",
-                    at: "left bottom",
-                    of: $("#audio-input-dev"),
-                });
+            this.uiState.shouldShowDeviceMenu = true;
+            this.notifyStateChanged();
         });
     }
 
@@ -1984,9 +1925,18 @@ export default class AudioRecording implements IAudioRecorder {
             if (!data.genericName && !data.productName)
                 imageSrc = "/bloom/images/Attention.svg";
 
-            const devButton = $("#audio-input-dev");
-            devButton.attr("src", imageSrc);
-            devButton.attr("title", productName);
+            // create the inputDevice state variable if it doesn't exist,
+            // otherwise just change its values
+            if (!this.uiState.inputDevice) {
+                this.uiState.inputDevice = {
+                    iconSrc: imageSrc,
+                    title: productName,
+                };
+            } else {
+                this.uiState.inputDevice.iconSrc = imageSrc;
+                this.uiState.inputDevice.title = productName;
+            }
+            this.notifyStateChanged();
         });
     }
 
@@ -2065,9 +2015,7 @@ export default class AudioRecording implements IAudioRecorder {
     }
 
     private doesRecordingExistForCurrentSelection(): boolean {
-        return document
-            .getElementById("audio-play")!
-            .classList.contains("enabled");
+        return this.getStatus("play") === Status.Enabled;
     }
 
     // Update the input element (checkbox) and turn on the playback order controls on the visible
@@ -2171,7 +2119,8 @@ export default class AudioRecording implements IAudioRecorder {
         }
         this.sortOutTabindexValues();
         this.renderPlaybackControls();
-        this.setDisableEverythingMode(true);
+        this.uiState.inShowPlaybackOrderMode = true;
+        this.notifyStateChanged();
         this.inShowPlaybackOrderMode = true;
     }
 
@@ -2270,7 +2219,8 @@ export default class AudioRecording implements IAudioRecorder {
         Array.from(elementsToRemove).forEach((element) => {
             element.parentElement!.removeChild(element);
         });
-        this.setDisableEverythingMode(false);
+        this.uiState.inShowPlaybackOrderMode = false;
+        this.notifyStateChanged();
         if (!leaveChecked) {
             // If we're staying on the same page, update the display to show the highlighted
             // audio element.  If we're leaving the page, don't try to update the display.
@@ -2303,36 +2253,6 @@ export default class AudioRecording implements IAudioRecorder {
         return result;
     }
 
-    private setDisableEverythingMode(doDisable: boolean) {
-        if (!this.disablingOverlay) {
-            return; // should have been setup by now
-        }
-        const hiddenClass = "hiddenOverlay";
-        if (doDisable) {
-            this.disablingOverlay.classList.remove(hiddenClass);
-        } else {
-            this.disablingOverlay.classList.add(hiddenClass);
-        }
-    }
-
-    // With css, the presence/absence of the checked class on the checkbox label determines its color.
-    private setCheckboxLabelClass(
-        addClass: boolean,
-        clickHandlerElementId: string,
-    ) {
-        const checkedClass = "checked";
-        const checkboxLabel = (<HTMLLabelElement>(
-            document.getElementById(clickHandlerElementId)
-        )).nextElementSibling;
-        if (checkboxLabel != null) {
-            if (addClass) {
-                checkboxLabel.classList.add(checkedClass);
-            } else {
-                checkboxLabel.classList.remove(checkedClass);
-            }
-        }
-    }
-
     // Update the input element (e.g. checkbox) which visually represents the recording mode and updates the textbox markup to reflect the new mode.
     public async setRecordingModeAsync(
         recordingMode: RecordingMode,
@@ -2404,19 +2324,6 @@ export default class AudioRecording implements IAudioRecorder {
         return result;
     }
 
-    public updateSplitButton(): void {
-        const element = document.getElementById("audio-split-wrapper");
-        if (element) {
-            if (this.recordingMode == RecordingMode.TextBox) {
-                element.classList.remove("hide-countable"); // When we make this button visible we have to adjust classes so that it starts to participate in the CSS that numbers the steps
-                element.classList.add("talking-book-counter");
-            } else {
-                element.classList.add("hide-countable");
-                element.classList.remove("talking-book-counter");
-            }
-        }
-    }
-
     public persistRecordingMode(
         element: Element,
         recordingMode: RecordingMode = this.recordingMode,
@@ -2863,7 +2770,6 @@ export default class AudioRecording implements IAudioRecorder {
     // Should be called when whatever tool uses this is about to be hidden (e.g., changing tools or closing toolbox)
     public handleToolHiding() {
         this.isShowing = false;
-        this.unbindDocumentDelegatedHandlers();
         this.wiredPlayer = null;
         // This ensures that no in-progress playback gets resumed by a timeout or end-play handler
         // after the tool closes.
@@ -2884,6 +2790,7 @@ export default class AudioRecording implements IAudioRecorder {
                 capture: true,
             },
         );
+        this.uiState.shouldShowDeviceMenu = false;
     }
 
     // Called upon handleNewPageReady(). Calls updateMarkup
@@ -3289,22 +3196,21 @@ export default class AudioRecording implements IAudioRecorder {
         return firstSentence;
     }
 
+    public setLevelCanvas(canvas: HTMLCanvasElement | null) {
+        this.levelCanvas = canvas;
+    }
+
     // This gets invoked via websocket message. It draws a series of bars
     // (reminiscent of leds in a hardware level meter) within the canvas in the
     //  top right of the bubble to indicate the current peak level.
     public setStaticPeakLevel(level: string): void {
-        if (!this.levelCanvas) return; // just in case C# calls this unexpectedly
+        if (!this.levelCanvas) return;
         const ctx = this.levelCanvas.getContext("2d");
         if (!ctx) return;
-        // Erase the whole canvas
         const height = 15;
         const width = 80;
 
-        ctx.fillStyle = window.getComputedStyle(
-            this.levelCanvas.parentElement!,
-        ).backgroundColor!;
-
-        ctx.fillRect(0, 0, width, height);
+        ctx.clearRect(0, 0, width, height);
 
         // Draw the appropriate number and color of bars
         const gap = 2;
@@ -3324,27 +3230,6 @@ export default class AudioRecording implements IAudioRecorder {
         }
     }
 
-    public static getChecksum(message: string): string {
-        if (message === null || message === undefined) {
-            // should not normally happen, but seems to in tests.
-            // The function is supposed to return a string, and I don't want to change
-            // all the callers, so making it return a string that's a bit unique so if
-            // we ever see it in production we can search for it.
-            return "undefind";
-        }
-        // Vertical line character ("|") acts as a phrase delimiter in Talking Books.
-        // To perform phrase-level recording, the user can insert a temporary "|" character where he wants a phrase split to happen.
-        // This is now recognized in the list of sentence delimiters, so it will be broken up as an audio-sentence.
-        // Then the user records the audio.
-        // Then the user deletes the vertical line characters.
-        // Now the text should be the desired final state, and audio recordings are possible at a sub-sentence level.
-        // However, we don't want the sentence markup to be updated because the checksums differ (since a character was deleted).
-        //
-        // Thus, our checksum function needs to ignore the vertical line character when computing the checksum.
-        const adjustedMessage = message.replace("|", "");
-        return getMd5(adjustedMessage);
-    }
-
     // Currently only used in testing, this just calls getActionToMakeAudioSentenceElements
     // and then executes the action.
     public makeAudioSentenceElementsTest(
@@ -3434,7 +3319,7 @@ export default class AudioRecording implements IAudioRecorder {
                             root.id == null ||
                             root.id == ""
                         ) {
-                            root.id = AudioRecording.createValidXhtmlUniqueId();
+                            root.id = createValidXhtmlUniqueId();
                         }
 
                         // All done, no need to process any of the remaining children
@@ -3579,7 +3464,7 @@ export default class AudioRecording implements IAudioRecorder {
             const fragment = htmlFragments[i];
             (<any>fragment).matchingAudioSpan = null; // remove obsolete audio info from possibly cached value (BL-9221)
             if (this.isRecordable(fragment)) {
-                const currentMd5 = AudioRecording.getChecksum(fragment.text);
+                const currentMd5 = getChecksum(fragment.text);
                 for (let j = 0; j < reuse.length; j++) {
                     if (currentMd5 === reuse[j].md5) {
                         // It's convenient here (very locally) to add a field to fragment which is not part
@@ -3642,7 +3527,7 @@ export default class AudioRecording implements IAudioRecorder {
                     }
 
                     if (!newId) {
-                        newId = AudioRecording.createValidXhtmlUniqueId();
+                        newId = createValidXhtmlUniqueId();
                     }
                 }
 
@@ -3722,13 +3607,6 @@ export default class AudioRecording implements IAudioRecorder {
         return text;
     }
 
-    public static createValidXhtmlUniqueId(): string {
-        let newId = EditableDivUtils.createUuid();
-        if (/^\d/.test(newId)) newId = "i" + newId; // valid ID in XHTML can't start with digit
-
-        return newId;
-    }
-
     private deleteElementAndPushChildNodesIntoParent(element) {
         if (element == null) {
             return;
@@ -3869,24 +3747,6 @@ export default class AudioRecording implements IAudioRecorder {
         this.updateButtonStateHelper(expectedVerb, response);
     }
 
-    public static async audioExistsForIdsAsync(
-        ids: string[],
-    ): Promise<boolean> {
-        try {
-            const response: AxiosResponse<any> = await axios.get(
-                `${kAnyRecordingApiUrl}${ids}`,
-            );
-            return this.DoesNarrationExist(response);
-        } catch {
-            return false;
-        }
-    }
-
-    // Given a response (from "${kAnyRecordingApiUrl}..."), determines whether the response indicates that narration audio exists for any of the specified IDs
-    private static DoesNarrationExist(response: AxiosResponse<any>): boolean {
-        return response && response.data === true;
-    }
-
     private updateButtonStateHelper(
         expectedVerb: string, // e.g. "record", "play", "check", etc.
         elementResponse: AxiosResponse<any>,
@@ -3894,7 +3754,7 @@ export default class AudioRecording implements IAudioRecorder {
         // This var is true if the Currently Highlighted Element contains audio
         // (If RecordingMode=TextBox but PlaybackMode=Sentence, this means if any of the sentences of the currently highlighted element contain audio)
         const doesElementAudioExist: boolean =
-            AudioRecording.DoesNarrationExist(elementResponse);
+            doesNarrationExist(elementResponse);
 
         // Clear and Play (Check) buttons
         if (doesElementAudioExist) {
@@ -3992,128 +3852,35 @@ export default class AudioRecording implements IAudioRecorder {
 
     private isEnabledOrExpected(verb: string): boolean {
         return (
-            $("#audio-" + verb).hasClass("enabled") ||
-            $("#audio-" + verb).hasClass("expected")
+            this.uiState.buttons[verb] === Status.Enabled ||
+            this.uiState.buttons[verb] === Status.Expected
         );
     }
 
     private getStatus(which: string): Status {
-        const buttonElement = document.getElementById(`audio-${which}`);
-        if (!buttonElement) {
-            return Status.Disabled;
-        }
-
-        if (buttonElement.classList.contains("enabled")) {
-            return Status.Enabled;
-        } else if (buttonElement.classList.contains("expected")) {
-            return Status.Expected;
-        } else if (buttonElement.classList.contains("active")) {
-            return Status.Active;
-        } else {
-            return Status.Disabled;
-        }
+        return this.uiState.buttons[which];
     }
 
     private setStatus(which: string, to: Status): void {
-        const buttonElement = document.getElementById(`audio-${which}`);
-        if (buttonElement) {
-            buttonElement.classList.remove("expected");
-            buttonElement.classList.remove("disabled");
-            buttonElement.classList.remove("disabledUnlessHover");
-            buttonElement.classList.remove("enabled");
-            buttonElement.classList.remove("active");
-
-            // Convert names from PascalCase to camelCase.
-            // The enum uses PascalCase, but the CSS uses camelCase
-            const statusString: string = Status[to];
-            const className: string =
-                AudioRecording.ToCamelCaseFromPascalCase(statusString);
-            buttonElement.classList.add(className);
-        }
-
-        const labelElement = document.getElementById(`audio-${which}-label`);
-        if (labelElement) {
-            if (to === Status.Expected) {
-                labelElement.classList.add("expected");
-            } else {
-                labelElement.classList.remove("expected");
-            }
-        }
-
-        // Also set expected on the list item, which provides the number e.g. "1)" or "2)" or "3)".
-        // This provides the yellow highlight color on that part of the text too
-        const listItemElement = document.getElementById(
-            `audio-${which}-list-item`,
-        ); // Note: It is very much a normal case that this may return null for some inputs.
-        if (listItemElement) {
-            if (to === Status.Expected) {
-                listItemElement.classList.add("expected");
-            } else {
-                listItemElement.classList.remove("expected");
-            }
-        }
-
+        this.uiState.buttons[which] = to;
         if (to === Status.Active) {
             // Doesn't make sense to expect something while something else is active.
             this.removeExpectedStatusFromAll();
-            if (which === "play") {
-                // We need a different label.
-                const label = document.getElementById("audio-play-label")!;
-                if (!this.originalPlayLabel) {
-                    this.originalPlayLabel = label.innerText;
-                }
-                label.classList.add("hide-counter-still-count");
-                theOneLocalizationManager
-                    .asyncGetText("Common.Pause", "Pause", "")
-                    .done((pause) => {
-                        label.innerText = pause;
-                    });
-            }
-        } else {
-            if (this.originalPlayLabel) {
-                // we've been in the playing active state at some point, make sure we no longer are.
-                // Note: we could clear originalPlayLabel here, which would save us executing this
-                // block more than we really need to. However, there's a lot of async stuff
-                // happening in this class. The very first time we hit play, we can be entirely
-                // confident of capturing the original (localized) label. If we start clearing
-                // the variable, I'm concerned that there may be some small chance that at some
-                // point we will capture "Pause" and then we will be stuck there.
-                const label = document.getElementById("audio-play-label")!;
-                label.innerText = this.originalPlayLabel;
-                label.classList.remove("hide-counter-still-count");
-            }
         }
+        this.notifyStateChanged();
     }
 
-    private originalPlayLabel: string;
-
     // Review: Where is the best place to put this function?
     public static ToCamelCaseFromPascalCase(text: string) {
         return text[0].toLowerCase() + text.slice(1);
     }
 
-    public static showTalkingBookTool() {
-        getToolboxBundleExports()
-            ?.getTheOneToolbox()
-            .activateToolFromId(kTalkingBookToolId);
-    }
-
     private removeExpectedStatusFromAll(): void {
         const expectableButtonNames = ["record", "play", "split", "next"]; // only the buttons which have a possibility of being in Expected state.
         for (let i = 0; i < expectableButtonNames.length; ++i) {
             const buttonName = expectableButtonNames[i];
-            const buttonElement = document.getElementById(
-                `audio-${buttonName}`,
-            );
-            if (buttonElement) {
-                buttonElement.classList.remove("expected");
-            }
-
-            const labelElement = document.getElementById(
-                `audio-${buttonName}-label`,
-            );
-            if (labelElement) {
-                labelElement.classList.remove("expected");
+            if (this.getStatus(buttonName) === Status.Expected) {
+                this.setStatus(buttonName, Status.Enabled);
             }
         }
     }
@@ -4134,11 +3901,7 @@ export default class AudioRecording implements IAudioRecorder {
     ): Promise<string | undefined> => {
         // First, check if there's even an audio recorded yet. (Not sure if we could ever get called in this
         // situation; I think the adjust timings dialog couldn't even be launched.)
-        const playButtonElement = document.getElementById("audio-play");
-        if (
-            playButtonElement &&
-            playButtonElement.classList.contains("disabled")
-        ) {
+        if (this.getStatus("play") === Status.Disabled) {
             this.displaySplitError();
             this.setStatus("split", Status.Disabled); // Remove active/expected highlights
             return undefined;
@@ -4217,7 +3980,7 @@ export default class AudioRecording implements IAudioRecorder {
         for (let i = 0; i < textFragments.length; ++i) {
             const fragment = textFragments[i];
             if (this.isRecordable(fragment)) {
-                const newId = AudioRecording.createValidXhtmlUniqueId();
+                const newId = createValidXhtmlUniqueId();
 
                 // Sometimes extraneous newlines can be injected (by CKEditor?). They may get removed later (maybe after the CKEditor reloads when the text box's underlying HTML is modified???)
                 // However, some processing needs the text immediately, and others are after the text is cleaned.
@@ -4517,7 +4280,7 @@ export default class AudioRecording implements IAudioRecorder {
         return elementsToUpdate;
     }
 
-    private playESpeakPreview(): void {
+    public playESpeakPreview(): void {
         const current = this.getCurrentHighlight();
         if (current) {
             const textToSpeak = current.innerText;
@@ -4573,16 +4336,23 @@ export default class AudioRecording implements IAudioRecorder {
         }
     }
 
-    private updateDisplay(maySetHighlight = true): void {
-        this.updateSplitButton();
+    public async setRecordingMode(recordingMode: RecordingMode): Promise<void> {
+        await this.setRecordingModeAsync(recordingMode);
+        this.updateDisplay();
+    }
 
-        const container = document.getElementById(
-            "advanced-talking-book-controls-react-container",
-        );
-        if (!container) {
-            // Won't exist for unit tests
-            return;
-        }
+    public insertSegmentMarker(): void {
+        const selection = this.getPageFrame()!.contentWindow!.getSelection();
+        const range = selection!.getRangeAt(0);
+        const marker = document.createTextNode("|");
+        range.insertNode(marker);
+    }
+
+    public async setShowPlaybackOrder(isOn: boolean): Promise<void> {
+        await this.setShowPlaybackOrderMode(isOn);
+    }
+
+    private updateDisplay(maySetHighlight = true): void {
         // It's a bit expensive to do the test for text present, but without it,
         // Import Recording will be improperly enabled on an empty page.
         const hasRecordableDivs =
@@ -4603,38 +4373,16 @@ export default class AudioRecording implements IAudioRecorder {
                 haveACurrentTextboxModeRecording = false;
             }
         }
-        renderRoot(
-            React.createElement(TalkingBookAdvancedSection, {
-                recordingMode: this.recordingMode,
-                haveACurrentTextboxModeRecording:
-                    haveACurrentTextboxModeRecording,
-                setRecordingMode: async (recordingMode: RecordingMode) => {
-                    this.setRecordingModeAsync(recordingMode);
-                    this.updateDisplay();
-                },
-                //hasAudio: this.getStatus("clear") === Status.Enabled, // plausibly, we could instead require that we have *all* the audio
-                hasAudio: this.haveAudio,
-                hasRecordableDivs: hasRecordableDivs,
-                handleImportRecordingClick: () =>
-                    this.handleImportRecordingClick(),
-                insertSegmentMarker: () => {
-                    const selection =
-                        this.getPageFrame()!.contentWindow!.getSelection();
-                    const range = selection!.getRangeAt(0);
-                    const marker = document.createTextNode("|");
-                    range.insertNode(marker);
-                },
-                inShowPlaybackOrderMode: this.inShowPlaybackOrderMode,
-                setShowPlaybackOrder: async (isOn: boolean) => {
-                    await this.setShowPlaybackOrderMode(isOn);
-                },
-                showingImageDescriptions: this.showingImageDescriptions,
-                setShowingImageDescriptions: (isOn: boolean) => {
-                    this.setShowingImageDescriptions(isOn);
-                },
-            }),
-            container,
-        );
+
+        // update uiState and rerender the React talking book tool controls
+        this.uiState.haveACurrentTextboxModeRecording =
+            haveACurrentTextboxModeRecording;
+        this.uiState.hasAudio = this.haveAudio;
+        this.uiState.hasRecordableDivs = hasRecordableDivs;
+        this.uiState.inShowPlaybackOrderMode = this.inShowPlaybackOrderMode;
+        this.uiState.showingImageDescriptions = this.showingImageDescriptions;
+        this.uiState.recordingMode = this.recordingMode;
+        this.notifyStateChanged();
     }
 
     private editTimingsFileAsync = async (timingsFilePath?: string) => {
@@ -4684,7 +4432,8 @@ export default class AudioRecording implements IAudioRecorder {
             }
         },
     };
-    private handleImportRecordingClick(): void {
+
+    public handleImportRecordingClick(): void {
         if (this.doesRecordingExistForCurrentSelection()) {
             getWorkspaceBundleExports().showConfirmDialog(
                 this.confirmReplaceProps,
@@ -4954,12 +4703,18 @@ export class AudioTextFragment {
 // Generally, use getAudioRecorder() instead to make sure you get the one in the right iframe
 export let theOneAudioRecorder: AudioRecording;
 
-// Used by talkingBook when initially showing the tool.
-export async function initializeTalkingBookToolAsync(): Promise<void> {
+export function getOrCreateAudioRecorder(): AudioRecording {
     if (!theOneAudioRecorder) {
         theOneAudioRecorder = new AudioRecording();
-        await theOneAudioRecorder.initializeTalkingBookToolAsync();
     }
+
+    return theOneAudioRecorder;
+}
+
+// Used by talkingBook when initially showing the tool.
+export async function initializeTalkingBookToolAsync(): Promise<void> {
+    const audioRecorder = getOrCreateAudioRecorder();
+    await audioRecorder.initializeTalkingBookToolAsync();
 }
 
 export function bumpUp(whichPositionToBump: number) {
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecordingSpec.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecordingSpec.ts
index 6e7dbe83a6ac..6567db0d6ba3 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecordingSpec.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecordingSpec.ts
@@ -12,13 +12,14 @@ import AudioRecording, {
     initializeTalkingBookToolAsync,
     AudioMode,
     getAllAudioModes,
-    kAnyRecordingApiUrl,
     theOneAudioRecorder,
 } from "./audioRecording";
+import { kAnyRecordingApiUrl } from "../../js/audioUtils";
 import { RecordingMode } from "./recordingMode";
 import axios from "axios";
 import $ from "jquery";
 import { mockReplies } from "../../../utils/bloomApi";
+import { Status } from "./TalkingBookUiState";
 
 // Notes:
 // For any async tests:
@@ -321,7 +322,7 @@ describe("audio recording tests", () => {
 
             const recording = new AudioRecording();
             expect(recording.playingAudio()).toBe(false);
-
+            recording.setupForListen();
             const player: Element = document.getElementById("player")!;
             player.setAttribute("preload", "auto");
             const nonExistentFilePath = "`[];'/.,<>?;.mp3";
@@ -1307,9 +1308,7 @@ describe("audio recording tests", () => {
             await recording.endRecordCurrentAsync();
             await vi.advanceTimersByTimeAsync(300);
 
-            expect(document.getElementById("audio-record")).not.toHaveClass(
-                "active",
-            );
+            expect(recording.uiState.buttons.record).not.toBe(Status.Active);
 
             recording.clearTimeouts();
         });
@@ -1338,9 +1337,7 @@ describe("audio recording tests", () => {
             await startRecordCall;
             await vi.advanceTimersByTimeAsync(300);
 
-            expect(document.getElementById("audio-record")).not.toHaveClass(
-                "active",
-            );
+            expect(recording.uiState.buttons.record).not.toBe(Status.Active);
 
             recording.clearTimeouts();
         });
@@ -1355,9 +1352,6 @@ describe("audio recording tests", () => {
             SetupIFrameFromHtml(`<div id="page1">${divHtml}</div>`);
 
             addRecordingChecksums(scenario);
-
-            const clearButton = document.getElementById("audio-clear")!;
-            clearButton.classList.add("enabled");
         }
 
         function addRecordingChecksums(scenario: AudioMode) {
@@ -1373,13 +1367,13 @@ describe("audio recording tests", () => {
             });
         }
 
-        const runClearRecordingAsync = async (scenario) => {
-            const recording = new AudioRecording();
+        const runClearRecordingAsync = async (recording, scenario) => {
             if (scenario === AudioMode.PureSentence) {
                 recording.recordingMode = RecordingMode.Sentence;
             } else {
                 recording.recordingMode = RecordingMode.TextBox;
             }
+            recording.uiState.buttons.clear = Status.Enabled;
             recording.setSoundFrom(getFrameElementById("page", "div1")!);
             await recording.clearRecordingAsync();
         };
@@ -1392,8 +1386,9 @@ describe("audio recording tests", () => {
         });
 
         async function runClearRecordingMd5TestAsync(scenario: AudioMode) {
+            const recording = new AudioRecording();
             setupClearRecordingTest(scenario);
-            await runClearRecordingAsync(scenario);
+            await runClearRecordingAsync(recording, scenario);
 
             // Verification
             if (scenario === AudioMode.PureSentence) {
@@ -1421,13 +1416,13 @@ describe("audio recording tests", () => {
         }
 
         it("clearRecording() disables button", async () => {
+            const recording = new AudioRecording();
             setupClearRecordingTest();
 
-            await runClearRecordingAsync(AudioMode.PureSentence);
+            await runClearRecordingAsync(recording, AudioMode.PureSentence);
 
-            const clearButton = document.getElementById("audio-clear")!;
-            expect(clearButton).not.toHaveClass("enabled");
-            expect(clearButton).toHaveClass("disabled");
+            expect(recording.uiState.buttons.clear).not.toBe(Status.Enabled);
+            expect(recording.uiState.buttons.clear).toBe(Status.Disabled);
         });
 
         getAllAudioModes().forEach((scenario) => {
@@ -1438,6 +1433,7 @@ describe("audio recording tests", () => {
         });
 
         async function runClearRecordingDeleteTest(scenario: AudioMode) {
+            const recording = new AudioRecording();
             vi.restoreAllMocks();
             vi.spyOn(axios, "post").mockImplementation((url: string) => {
                 if (url.includes("/bloom/api/audio/deleteSegment?id")) {
@@ -1453,7 +1449,7 @@ describe("audio recording tests", () => {
             };
 
             const run = async () => {
-                return runClearRecordingAsync(scenario);
+                return runClearRecordingAsync(recording, scenario);
             };
 
             const verify = () => {
@@ -2300,7 +2296,6 @@ function applyPolyfillsToIframe(iframe: HTMLIFrameElement) {
 }
 
 export async function setupForAudioRecordingTests() {
-    SetupTalkingBookUIElements();
     const iframe = await SetupIFrameAsync();
 
     // Keep iframe src as about:blank to avoid jsdom trying to load a file
@@ -2328,15 +2323,6 @@ export async function setupForAudioRecordingTests() {
     );
 }
 
-// Just sets up some dummy elements so that they're non-null.
-function SetupTalkingBookUIElements() {
-    document.body.appendChild(document.createElement("div")); // Ensures there is always an element.
-
-    const html =
-        '<button id="audio-record" ></button><button id="audio-play"></button><div id="audio-split-wrapper"><button id="audio-split"></button></div><button id="audio-next"></button><button id="audio-prev"></button><button id="audio-clear"></button><input id="audio-recordingModeControl"><div id="audio-recordingModeControl-clickHandler" /></input><div id="audio-playbackOrderControl"></div><input id="audio-showImageDescription"><div id="audio-showImageDescription-clickHandler" /></input><audio id="player" ></audio>';
-    document.body.firstElementChild!.insertAdjacentHTML("afterend", html);
-}
-
 export function StripPlayerSrcNoCacheSuffix(url: string): string {
     const index = url.lastIndexOf("&");
     if (index < 0) {
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/recordable.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/recordable.ts
index 58fded36e475..dbc8545cc59a 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/recordable.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/recordable.ts
@@ -1,5 +1,6 @@
 import XRegExp from "xregexp";
-import AudioRecording, { kAnyRecordingApiUrl } from "./audioRecording";
+import { getChecksum } from "../../js/talkingBookChecksum";
+import { kAnyRecordingApiUrl } from "../../js/audioUtils";
 import { RecordingMode } from "./recordingMode";
 import axios, { AxiosResponse } from "axios";
 
@@ -143,7 +144,7 @@ export default class Recordable {
     public setChecksum(): void {
         const sentences = this.getAudioSentences();
         sentences.forEach((sentence) => {
-            const md5 = AudioRecording.getChecksum(sentence.innerText);
+            const md5 = getChecksum(sentence.innerText);
             sentence.setAttribute("recordingmd5", md5);
         });
     }
@@ -169,7 +170,7 @@ export default class Recordable {
         if (this.isMissingRecordingChecksum(sentence)) {
             // We only want to update ones that have a recording associated with them.
             if (await Recordable.isSentenceRecordedAsync(sentence)) {
-                const md5 = AudioRecording.getChecksum(sentence.innerText);
+                const md5 = getChecksum(sentence.innerText);
                 sentence.setAttribute("recordingmd5", md5);
             }
         }
@@ -270,7 +271,7 @@ export default class Recordable {
         }
 
         const previousChecksum = sentence.getAttribute("recordingmd5");
-        const currentChecksum = AudioRecording.getChecksum(sentence.innerText);
+        const currentChecksum = getChecksum(sentence.innerText);
         return previousChecksum !== currentChecksum;
     }
 }
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/showTalkingBookTool.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/showTalkingBookTool.ts
new file mode 100644
index 000000000000..8924d30e3489
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/showTalkingBookTool.ts
@@ -0,0 +1,13 @@
+// taken out of audioRecording.ts to avoid the need for other
+// files to import that big file just to use a little bit of
+// code.
+
+import { getToolboxBundleExports } from "../../js/workspaceFrames";
+
+const kTalkingBookToolId = "talkingBook";
+
+export function showTalkingBookTool() {
+    getToolboxBundleExports()
+        ?.getTheOneToolbox()
+        .activateToolFromId(kTalkingBookToolId);
+}
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookSpec.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookSpec.ts
index bb8e8c0e7311..57cfbc9be1ee 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookSpec.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookSpec.ts
@@ -7,13 +7,13 @@ import {
     afterEach,
     vi,
 } from "vitest";
-import TalkingBookTool from "./talkingBook";
+import TalkingBookTool from "./talkingBookTool";
 import AudioRecording, {
     theOneAudioRecorder,
     AudioMode,
     getAllAudioModes,
-    kAnyRecordingApiUrl,
 } from "./audioRecording";
+import { kAnyRecordingApiUrl } from "../../js/audioUtils";
 import { RecordingMode } from "./recordingMode";
 import {
     SetupIFrameFromHtml,
@@ -26,6 +26,7 @@ import XRegExp from "xregexp";
 import axios from "axios";
 import { setSentenceEndingPunctuationForBloom } from "../readers/libSynphony/bloom_xregexp_categories";
 import $ from "jquery";
+import { Status } from "./TalkingBookUiState";
 
 describe("talking book tests", () => {
     beforeAll(async () => {
@@ -823,7 +824,9 @@ function getAudioSentenceSpans(divId: string): HTMLSpanElement[] {
 }
 
 function verifyRecordButtonEnabled() {
-    expect(document.getElementById("audio-record")).not.toHaveClass("disabled");
+    expect(theOneAudioRecorder.uiState.buttons.record).not.toBe(
+        Status.Disabled,
+    );
 }
 
 function setAllAudioFilesPresent() {
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBook.ts b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookTool.tsx
similarity index 89%
rename from src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBook.ts
rename to src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookTool.tsx
index b1397a3fb267..18d48657b367 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBook.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookTool.tsx
@@ -1,17 +1,30 @@
 import { hideImageDescriptions } from "../imageDescription/imageDescriptionUtils";
 import { kBloomCanvasClass } from "../canvas/canvasElementConstants";
 import { beginLoadSynphonySettings } from "../readers/readerTools";
-import { getTheOneToolbox, ITool } from "../toolbox";
+import { getTheOneToolbox } from "../toolbox";
 import { ToolBox } from "../toolbox";
-import { getAudioRecorder } from "./audioRecording";
+import { getAudioRecorder, getOrCreateAudioRecorder } from "./audioRecording";
 import * as AudioRecorder from "./audioRecording";
-
-export default class TalkingBookTool implements ITool {
+import ToolboxToolReactAdaptor from "../toolboxToolReactAdaptor";
+import { TalkingBookToolControls } from "./TalkingBookToolControls";
+
+// This class renders the TalkingBookToolControls React component
+// in the toolbox, and passes into it an instance of the audioRecorder.
+// Also, this class handles logic such as page markup, loading necessary
+// settings, detaching and reattaching the tool to a page, showing and
+// hiding the talking book tool, switching between plain "|"'s and
+// "bloom-audio-split-marker" spans that appear in the page, and showing
+// any existing image descriptions.
+export default class TalkingBookTool extends ToolboxToolReactAdaptor {
     imageUpdated(img: HTMLImageElement | undefined): void {
         // No action needed for this tool
     }
     public makeRootElement(): HTMLDivElement {
-        throw new Error("Method not implemented.");
+        return this.adaptReactElement(
+            <TalkingBookToolControls
+                audioRecorder={getOrCreateAudioRecorder()}
+            />,
+        );
     }
     public beginRestoreSettings(settings: string): JQueryPromise<void> {
         // Nothing to do except that we need the sentence ending punctuation settings
@@ -23,14 +36,6 @@ export default class TalkingBookTool implements ITool {
         return true;
     }
 
-    public isExperimental(): boolean {
-        return false;
-    }
-
-    public requiresToolId(): boolean {
-        return false;
-    }
-
     public configureElements(container: HTMLElement) {
         // one-time setup whether or not the tool is open.
     }
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookToolboxTool.pug b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookToolboxTool.pug
deleted file mode 100644
index e306b04d0472..000000000000
--- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookToolboxTool.pug
+++ /dev/null
@@ -1,53 +0,0 @@
-mixin buttonGroup(buttonId, initialStatusClass, counterClass, wrapperClasses, buttonLabel, i18nId)
-	div.button-label-wrapper(id='audio-'+buttonId + '-wrapper' class=wrapperClasses)
-		.button-wrapper
-			button(id='audio-'+buttonId class='ui-audio-button ui-button ' + initialStatusClass)
-		div.audio-label(id='audio-'+buttonId+'-label' class=counterClass data-i18n='EditTab.Toolbox.TalkingBookTool.'+i18nId)=buttonLabel
-
-mixin checkboxWithHiddenClickHandler(buttonId, i18nKey, englishLabel, isChecked, additionalStyles)
-	// The click handler can be used to handle events on the checkbox even while the checkbox is disabled (which would suppress events on the checkbox itself)
-	div(id='audio-' + buttonId + '-wrapper', style='display:inline-block; position:relative;' + additionalStyles)
-		table
-			tr
-				td(style='vertical-align: top')
-					input(id='audio-'+buttonId type='checkbox', name=buttonId, value=theValue, checked=isChecked)
-				td
-					div(id='audio-' + buttonId + '-clickHandler', style='position:absolute; left:0; right:0; top:0; bottom:0;')
-					label(data-i18n=i18nKey)
-						=englishLabel
-
-html
-	head
-
-	body
-		h3(data-toolId='talkingBookTool', data-order='30', data-i18n='EditTab.Toolbox.TalkingBookTool') Talking Book Tool
-		div(data-toolId='talkingBookTool')
-			div.hiddenOverlay(id='disablingOverlay')
-			div.ui-audioBody
-				div.ui-audioJqueryStuff
-					div
-						// preload=none prevents the audio element from asking for the audio as soon as it gets a new src value,
-						// which in BL-3153 was faster than the c# thread writing the file could finish with it.
-						// As an alternative, a settimeout() in the javascript also worked, button
-						// this seems more durable. By the time the user can click Play, we'll be done.
-						audio(id='player', preload='none')
-
-					div.audio-label.talking-book-counter(id='audio-check' data-i18n='EditTab.Toolbox.TalkingBookTool.CheckSettingsLabel') Check that you are recording into the correct device and that these levels are showing blue:
-					div.ui-audioInputGroup
-						div.ui-audioInput
-							img(id='audio-input-dev' src='/bloom/bookEdit/toolbox/talkingBook/microphone.svg' height='15' width='15' alt='mic')
-							ul(id='audio-devlist')
-						div.ui-audioMeter
-							canvas(id='audio-meter' width='80' height='15')
-					div.audio-label.talking-book-counter(id='audio-look-at' data-i18n='EditTab.Toolbox.TalkingBookTool.LookAtSentenceLabel') Look at the highlighted text
-					+buttonGroup('record', 'expected', 'talking-book-counter', '', 'Speak', 'SpeakLabel')
-					+buttonGroup('play', 'disabled', 'talking-book-counter', '', 'Check', 'CheckLabel')
-					+buttonGroup('split', 'disabled', 'talking-book-counter', 'initial-state', 'Split', 'AdjustTimings')
-					+buttonGroup('next', 'disabled', 'talking-book-counter', '', 'Next', 'NextLabel')
-
-					+buttonGroup('prev', 'disabled', '', '', 'Back', 'Back')
-					+buttonGroup('clear', 'disabled', '', '', 'Clear', 'Clear')
-					+buttonGroup('listen', 'disabled', '', '', 'Listen to the whole page', 'Listen')
-				#advanced-talking-book-controls-react-container
-
-				a.help-link(href='/bloom/api/help?topic=Tasks/Edit_tasks/Record_Audio/Talking_Book_Tool_overview.htm', data-i18n='Common.Help') Help
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/toolbox.ts b/src/BloomBrowserUI/bookEdit/toolbox/toolbox.ts
index ee409ad717f1..e848508eca35 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/toolbox.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/toolbox.ts
@@ -1225,114 +1225,88 @@ function beginAddTool(
     openTool: boolean,
     whenLoaded?: () => void,
 ): void {
-    const subpath = {
-        talkingBookTool: "talkingBook/talkingBookToolboxTool.html",
-        // none for music: done in React
-    };
-    const subPathToPremadeHtml = subpath[toolId];
-    if (subPathToPremadeHtml) {
-        // old-style tool implemented in pug and typescript
-        // Using axios because this is retrieving a file, not invoking an api,
-        // so the required path does not start with /bloom/api/
-        wrapAxios(
-            axios
-                .get("/bloom/bookEdit/toolbox/" + subPathToPremadeHtml)
-                .then((result) => {
-                    loadToolboxToolText(result.data, toolId, openTool);
-                    if (whenLoaded) {
-                        whenLoaded();
-                    }
-                }),
+    // new-style tool implemented in React
+    const tool = getITool(toolId);
+    if (!tool) {
+        console.error(
+            `Tool ${toolId} not found, assuming that was from a different version of Bloom.`,
         );
-    } else {
-        // new-style tool implemented in React
-        const tool = getITool(toolId);
-        if (!tool) {
-            console.error(
-                `Tool ${toolId} not found, assuming that was from a different version of Bloom.`,
-            );
-            return;
-        }
+        return;
+    }
 
-        if (isToolInitialized(tool)) {
-            if (openTool && toolbox.toolboxIsShowing()) {
-                const toolName = ToolBox.addToolToString(tool.id());
-                const adapter = getToolboxReactAdapter();
-                if (adapter) {
-                    adapter.setActiveToolByToolId(toolName);
-                }
+    if (isToolInitialized(tool)) {
+        if (openTool && toolbox.toolboxIsShowing()) {
+            const toolName = ToolBox.addToolToString(tool.id());
+            const adapter = getToolboxReactAdapter();
+            if (adapter) {
+                adapter.setActiveToolByToolId(toolName);
             }
+        }
 
-            if (whenLoaded) {
-                whenLoaded();
-            }
-            return;
+        if (whenLoaded) {
+            whenLoaded();
         }
+        return;
+    }
 
-        const content = $(tool.makeRootElement());
+    const content = $(tool.makeRootElement());
+
+    // the settings for the toolbox is React, but
+    // its localization works a little differently
+    // than the other toolbox tools. So, special-case
+    // handling is needed for the settings
+    const isSettingsTool = tool.id() === "settings";
+
+    const toolName = ToolBox.addToolToString(tool.id());
+    // const parts = $("<h3 data-toolId='musicTool' data-i18n='EditTab.Toolbox.MusicTool'>"
+    //     + "Music Tool</h3><div data-toolId='musicTool' class='musicBody'/>");
+
+    const toolIdUpper =
+        tool.id()[0].toUpperCase() + tool.id().substring(1, tool.id().length);
+    const i18Id = isSettingsTool
+        ? "EditTab.Toolbox.More"
+        : "EditTab.Toolbox." +
+          toolIdUpper +
+          (toolName.indexOf(checkLeaveOffTool) === -1 ? "Tool" : "");
+    // Not sure this will always work, but we can do something more complicated...maybe a new method
+    // on ITool...if we need it. Note that this is just a way to come up with the English,
+    // we don't do it to localizations. But in English, the code value beats the xlf one.
+    const toolLabel = isSettingsTool
+        ? "More..."
+        : ToolBox.addToolToString(
+              toolIdUpper.replace(/([A-Z])/g, " $1").trim(),
+              true,
+          );
+
+    const reactTool = tool as unknown as IReactTool;
+
+    // Currently, all subscription tools are React, so we haven't implemented a way to add the subscription badge to old-style tools
+    const possibleSubscriptionBadge = reactTool.featureName
+        ? `<span class="subscription-badge"></span>`
+        : "";
+    const header = $(
+        `<h3><div class="toolbox-accordion-header-text" data-i18n=${i18Id}>${toolLabel}</div>${possibleSubscriptionBadge}</span></h3>`,
+    );
+    header.attr("data-toolId", toolName);
+    content.attr("data-toolId", toolName);
 
-        // the settings for the toolbox is React, but
-        // its localization works a little differently
-        // than the other toolbox tools. So, special-case
-        // handling is needed for the settings
-        const isSettingsTool = tool.id() === "settings";
+    // Check feature status asynchronously and apply subscription requirements if needed
+    if (reactTool.featureName) {
+        header.attr("data-feature", reactTool.featureName);
+        addFeatureStatusMessageTitlesToSubscriptionBadges(header);
 
-        const toolName = ToolBox.addToolToString(tool.id());
-        // const parts = $("<h3 data-toolId='musicTool' data-i18n='EditTab.Toolbox.MusicTool'>"
-        //     + "Music Tool</h3><div data-toolId='musicTool' class='musicBody'/>");
-
-        const toolIdUpper =
-            tool.id()[0].toUpperCase() +
-            tool.id().substring(1, tool.id().length);
-        const i18Id = isSettingsTool
-            ? "EditTab.Toolbox.More"
-            : "EditTab.Toolbox." +
-              toolIdUpper +
-              (toolName.indexOf(checkLeaveOffTool) === -1 ? "Tool" : "");
-        // Not sure this will always work, but we can do something more complicated...maybe a new method
-        // on ITool...if we need it. Note that this is just a way to come up with the English,
-        // we don't do it to localizations. But in English, the code value beats the xlf one.
-        const toolLabel = isSettingsTool
-            ? "More..."
-            : ToolBox.addToolToString(
-                  toolIdUpper.replace(/([A-Z])/g, " $1").trim(),
-                  true,
-              );
-
-        const reactTool = tool as unknown as IReactTool;
-
-        // Currently, all subscription tools are React, so we haven't implemented a way to add the subscription badge to old-style tools
-        const possibleSubscriptionBadge = reactTool.featureName
-            ? `<span class="subscription-badge"></span>`
-            : "";
-        const header = $(
-            `<h3><div class="toolbox-accordion-header-text" data-i18n=${i18Id}>${toolLabel}</div>${possibleSubscriptionBadge}</span></h3>`,
-        );
-        header.attr("data-toolId", toolName);
-        content.attr("data-toolId", toolName);
-
-        // Check feature status asynchronously and apply subscription requirements if needed
-        if (reactTool.featureName) {
-            header.attr("data-feature", reactTool.featureName);
-            addFeatureStatusMessageTitlesToSubscriptionBadges(header);
-
-            getFeatureStatusAsync(reactTool.featureName).then(
-                (featureStatus) => {
-                    if (
-                        featureStatus &&
-                        featureStatus.subscriptionTier !== "Basic"
-                    ) {
-                        header.addClass("requiresSubscription");
-                    }
-                },
-            );
-        }
+        getFeatureStatusAsync(reactTool.featureName).then((featureStatus) => {
+            if (featureStatus && featureStatus.subscriptionTier !== "Basic") {
+                header.addClass("requiresSubscription");
+            }
+        });
+    }
 
-        loadToolboxTool(header, content, toolId, openTool);
-        if (whenLoaded) {
-            whenLoaded();
-        }
+    loadToolboxTool(header, content, toolId, openTool);
+    if (whenLoaded) {
+        whenLoaded();
     }
+    //}
 }
 
 let keydownEventCounter = 0;
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/toolboxBootstrap.ts b/src/BloomBrowserUI/bookEdit/toolbox/toolboxBootstrap.ts
index 752111b27c73..9fb1578f1e49 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/toolboxBootstrap.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/toolboxBootstrap.ts
@@ -14,7 +14,7 @@ import { LeveledReaderTool } from "./readers/leveledReader/leveledReaderTool";
 import { MusicToolAdaptor } from "./music/musicToolControls";
 import { ImpairmentVisualizerAdaptor } from "./impairmentVisualizer/impairmentVisualizer";
 import { MotionTool } from "./motion/motionTool";
-import TalkingBookTool from "./talkingBook/talkingBook";
+import TalkingBookTool from "./talkingBook/talkingBookTool";
 import { SignLanguageTool } from "./signLanguage/signLanguageTool";
 import { ImageDescriptionAdapter } from "./imageDescription/imageDescription";
 import "errorHandler";
diff --git a/src/BloomBrowserUI/react_components/ToolboxRootTestHarness/component-tests/toolbox-root-react.uitest.ts b/src/BloomBrowserUI/react_components/ToolboxRootTestHarness/component-tests/toolbox-root-react.uitest.ts
index 1b193d63a474..2a6f16f3d81e 100644
--- a/src/BloomBrowserUI/react_components/ToolboxRootTestHarness/component-tests/toolbox-root-react.uitest.ts
+++ b/src/BloomBrowserUI/react_components/ToolboxRootTestHarness/component-tests/toolbox-root-react.uitest.ts
@@ -1,5 +1,8 @@
 import { expect, test } from "../../component-tester/playwrightTest";
 
+const getToolHeader = (page: import("@playwright/test").Page, label: string) =>
+    page.locator(".MuiAccordionSummary-root", { hasText: label });
+
 const getToolHeaderTexts = async (
     page: import("@playwright/test").Page,
 ): Promise<string[]> => {
@@ -16,71 +19,26 @@ const routeToolboxApis = async (page: import("@playwright/test").Page) => {
             body: "talkingBook,settings",
         });
     });
-
-    await page.route(
-        "**/bloom/bookEdit/toolbox/talkingBook/talkingBookToolboxTool.html",
-        async (route) => {
-            await route.fulfill({
-                status: 200,
-                contentType: "text/html",
-                body: "<h3 data-toolId='talkingBookTool'>Talking Book</h3><div><div>Talking tool content injected</div></div>",
-            });
-        },
-    );
-
-    await page.route(
-        "**/bloom/bookEdit/toolbox/settings/Settings.html",
-        async (route) => {
-            await route.fulfill({
-                status: 200,
-                contentType: "text/html",
-                body: "<h3 data-toolId='settingsTool'>More...</h3><div><div>Settings tool content injected</div></div>",
-            });
-        },
-    );
-
-    await page.route(
-        "**/bloom/bookEdit/toolbox/readers/decodableReader/decodableReaderToolboxTool.html",
-        async (route) => {
-            await route.fulfill({
-                status: 200,
-                contentType: "text/html",
-                body: "<h3 data-toolId='decodableReaderTool'>Decodable Reader</h3><div><div>Decodable controls injected</div></div>",
-            });
-        },
-    );
 };
 
 test.describe("ToolboxRoot React mode", () => {
-    test("renders legacy HTML sections and switches active section", async ({
-        page,
-    }) => {
+    test("switches active React section", async ({ page }) => {
         await routeToolboxApis(page);
 
         await page.goto("/?component=ToolboxRootTestHarness");
 
-        await expect(page.getByText("Loading component…")).toHaveCount(0, {
-            timeout: 15000,
-        });
-
-        await expect(page.getByText("Talking Book Tool").first()).toBeVisible({
-            timeout: 10000,
-        });
-        await expect(page.getByText("More...").first()).toBeVisible({
-            timeout: 10000,
-        });
-
-        await page.getByText("Talking Book Tool").first().click();
+        const talkingBook = getToolHeader(page, "Talking Book Tool");
+        const more = getToolHeader(page, "More...");
 
-        await expect(
-            page.getByText("Talking tool content injected"),
-        ).toBeVisible();
+        await expect(talkingBook).toBeVisible({ timeout: 10000 });
+        await expect(more).toBeVisible();
 
-        await page.getByText("More...").first().click();
+        await talkingBook.click();
+        await expect(talkingBook).toHaveAttribute("aria-expanded", "true");
 
-        await expect(
-            page.getByText("Settings tool content injected"),
-        ).toBeVisible();
+        await more.click();
+        await expect(more).toHaveAttribute("aria-expanded", "true");
+        await expect(talkingBook).toHaveAttribute("aria-expanded", "false");
     });
 
     test("initial selection follows restored current tool", async ({
@@ -113,11 +71,9 @@ test.describe("ToolboxRoot React mode", () => {
             timeout: 15000,
         });
 
-        await expect(page.getByText("Decodable controls injected")).toBeVisible(
-            {
-                timeout: 10000,
-            },
-        );
+        await expect(
+            getToolHeader(page, "Decodable Reader Tool"),
+        ).toHaveAttribute("aria-expanded", "true");
     });
 
     test("dynamically added decodable reader can be activated", async ({
@@ -149,11 +105,9 @@ test.describe("ToolboxRoot React mode", () => {
         ).toBeVisible({
             timeout: 10000,
         });
-        await expect(page.getByText("Decodable controls injected")).toBeVisible(
-            {
-                timeout: 10000,
-            },
-        );
+        await expect(
+            getToolHeader(page, "Decodable Reader Tool"),
+        ).toHaveAttribute("aria-expanded", "true");
     });
 
     test("tools are alphabetical on initial render with More last", async ({
diff --git a/src/BloomBrowserUI/spreadsheet/spreadsheetBundleRoot.ts b/src/BloomBrowserUI/spreadsheet/spreadsheetBundleRoot.ts
index 96d2f215b030..dec96396108e 100644
--- a/src/BloomBrowserUI/spreadsheet/spreadsheetBundleRoot.ts
+++ b/src/BloomBrowserUI/spreadsheet/spreadsheetBundleRoot.ts
@@ -7,8 +7,7 @@ import {
     TextFragment,
     addBloomSynphonyExtensions,
 } from "../bookEdit/toolbox/readers/libSynphony/bloomSynphonyExtensions";
-import AudioRecording from "../bookEdit/toolbox/talkingBook/audioRecording";
-
+import { getChecksum } from "../bookEdit/js/talkingBookChecksum";
 // If a string only contains | and whitespace, it is a "segment" with no text
 // and should be skipped when matching to audio segments
 function isEmptySegment(s: string): boolean {
@@ -24,7 +23,7 @@ export function split(text: string): string {
 }
 
 export function getMd5(input: string): string {
-    return AudioRecording.getChecksum(input);
+    return getChecksum(input);
 }
 
 // In some contexts, this seems to happen automatically when bloomSynphonyExtensions is loaded, since