tosijs-ui 1.6.21 → 1.7.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,137 @@
 # Changelog
 
+## 1.7.0-beta.1
+
+**A beta, published under npm's `beta` tag** — `latest` stays on 1.6.x. A prerelease is not
+matched by `^1.6.x` (or by `^1.7.0`), so nobody is auto-upgraded into the editor swap; you get
+this only by asking for it:
+
+```
+npm i tosijs-ui@beta        # or tosijs-ui@1.7.0-beta.1
+```
+
+The code editor moved from **ACE to [CodeMirror 6](https://codemirror.net/)**, `tjs`
+became a first-class editing mode with runtime-value autocomplete, and the doc-site
+builder gained the hooks that unblock the tosijs 2.0 TJS port.
+
+**Known cost, deliberate for now.** `dist/iife.js` carries CodeMirror (bun's IIFE format cannot
+code-split), and generated doc pages hide the body until hydration — so on a cheap phone the
+blank-screen window is ~4.5s vs ~3.7s without the editor. The fix is to pre-render the page
+chrome so hydration is additive and the gate can go (then the bundle gates *editing*, not
+*reading*); that's the next doc-system release, not this one. Measurements in `TODO.md`.
+
+### Breaking
+
+`<tosi-code>` (ACE → CodeMirror 6). Each removed member now **warns once and no-ops**
+rather than failing silently, but they are gone:
+
+| removed | replacement |
+| --- | --- |
+| `theme` attribute | style the editor with `--code-bg` / `--text-color` |
+| `options` property (ACE-shaped) | configure via `editor` (a CodeMirror `EditorView`) |
+| `ace` getter | there is no ACE global; use `editor` |
+| `editor.session.getUndoManager()` | `undo()` / `redo()` / `canUndo()` / `canRedo()` |
+
+**`editor` changed type in place** — it was an ACE `Editor`, it is now a CodeMirror
+[`EditorView`](https://codemirror.net/docs/ref/#view.EditorView). A grep for the
+removed names will not catch this; any code reaching into `editor` needs revisiting.
+
+Unchanged: `value`, `original` / `showDiff()`, `mode`, `disabled`.
+
+**Semver stance (deliberate, not an oversight).** This library breaks in minors before 2.0 —
+**`2.0` is reserved for the tjs-native rewrite**, not for this. So `^1.6.x` resolves `1.7.0` and
+existing consumers pick this up on their next install.
+
+**If you use `<tosi-code>`, pin `~1.6` and upgrade deliberately.** Everything else in the library
+is untouched, so a consumer of (say) `<tosi-rating>` can take 1.7 without changes — but note it
+now installs 12 `@codemirror/*` runtime dependencies where the library previously had none.
+
+The trap to know about: **`editor` changed type in place** and no shim can catch it. The removed
+`theme` / `options` / `ace` members warn once and no-op, but `el.editor` still exists — it is
+simply a CodeMirror `EditorView` now, so `el.editor.session.*` is a runtime `TypeError`. A grep
+for the removed names will not find it.
+
+### Added
+
+- `<tosi-code>` gained a `change` event (`event.detail.value`), `undo()` / `redo()` /
+  `canUndo()` / `canRedo()`, and `tjs` / `ajs` modes.
+- **Runtime-value autocomplete** in `tjs` mode: set `tjsAutocomplete` and completion
+  suggests the *real members of live values* — including tosijs proxy members that no
+  static analysis can see. Live examples wire their own executed scope into it, so
+  `const { app } = tosi(…)` gives real `app.` / `app.items.` completions.
+- Inline **WebAssembly** live examples (tjs `wasm {}` blocks).
+- `buildSite`: `libraryBuild` and `generateCssPreload` hooks, for projects whose
+  library sources are native `.tjs` (this is what the tosijs 2.0 TJS port needs).
+  **These actually shipped in 1.6.21** — they are listed here only because they landed on this
+  branch first. Nothing needs 1.7 to use them.
+
+### Changed
+
+- **`dist/iife.js` is ~384KB gzipped, up from ~120KB.** Bun's IIFE format cannot
+  code-split, so CodeMirror is inlined there. (Under a bundler/ESM it stays a lazy
+  chunk — a page with no `<tosi-code>` doesn't load it.) This is deliberate: the
+  in-page editor and its save-to-source flow are the point of the doc-system, so the
+  IIFE carries the editor.
+- The library now has runtime `dependencies` (12 `@codemirror/*` packages) where it
+  previously had none. They can't be optional peers: the tjs CodeMirror extension must
+  share this exact `@codemirror/state` instance or it silently no-ops.
+- `tjs-lang` peer: `^0.8.7` → `^0.9.1`.
+
+### Fixed
+
+- `showDiff()` rendered nothing. Giving `<tosi-code>` its own `content` displaced the
+  default `<slot>` that used to project the light-DOM diff overlay, so the overlay was
+  invisible (0×0) while `showingDiff` still reported `true`. It now renders inside the
+  shadow root. This is the review step of the doc-system's edit-and-save-to-source
+  flow, so a blank diff meant saving changes you never saw.
+
+## 1.6.22
+
+### Fixed
+
+- **The dev server no longer leaks memory on every rebuild — update as a priority if
+  you use `tosijs-ui/site`.** `buildSite()` called `Bun.build()` in-process, and Bun's
+  bundler never returns its native arena: RSS grows monotonically per call with no
+  plateau (40 sequential builds of one entry = **+367MB**, still climbing ~5MB/build at
+  the end), while the JS heap stays flat — so it is invisible to `Bun.gc()` and to any
+  heap profiler. `devServer()` calls it once per rebuild in a process that runs for
+  days, so it compounds: a ~2-day watch session reached **136GB RSS** and took the
+  machine down with it. Filed upstream as
+  [oven-sh/bun#34053](https://github.com/oven-sh/bun/issues/34053).
+
+  The bundle now builds in a **child process** (`bun build`), whose memory the OS
+  reclaims on exit — the same 15 bundles leave the parent **+0.5MB** instead of +192MB.
+  `buildEpub()` moved to a child too (happy-dom + `@resvg/resvg-js` are both native and
+  retaining, and it runs on every rebuild), with a 120s timeout kill so a hung or failed
+  ePub warns instead of wedging the rebuild. Measured on this repo's own dev server:
+  **baseline RSS 503MB → 150MB, and per-rebuild growth 26–59MB → ~2.7MB.**
+
+  Bundle output is byte-for-byte identical; this is purely where the work runs.
+
+### Added
+
+- **Dev-server memory watchdog.** `devServer()` now samples RSS after each rebuild and,
+  past a ceiling (`memoryLimitMb` in the site config, or `DEV_MEMORY_LIMIT_MB`; default
+  4096), prints the growth-per-rebuild and exits rather than let a leak thrash the
+  machine. It distinguishes real growth (a leak — report it) from a build whose baseline
+  simply exceeds the ceiling (raise the ceiling).
+
+## 1.6.21
+
+### Fixed
+
+- Doc-system nav-toggle in `routing: 'memory'` mode drove the *outer* doc-browser
+  instance instead of its own (now scoped per-instance).
+
+### Added
+
+- `buildSite` `libraryBuild` + `generateCssPreload` hooks (also in 1.7.0 above), so a
+  project whose library source is native `.tjs` can build through the doc-site pipeline.
+
+### Changed
+
+- `tjs-lang` peer: `^0.8.7` → `^0.9.0`.
+
 ## 1.6.20
 
 ### Fixed

package/dist/code-editor-cm.js

@@ -10,11 +10,11 @@ Languages here are the always-available set (js/ts/css/html/markdown). First-cla
 tjs (highlighting + runtime-value autocomplete via tjs-lang's editors/codemirror) is
 layered in separately and only when tjs-lang is installed.
 */
-import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from '@codemirror/view';
+import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
-import { indentWithTab, history, defaultKeymap, historyKeymap, undo, redo, undoDepth, redoDepth } from '@codemirror/commands';
-import { indentUnit, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching } from '@codemirror/language';
-import { closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { indentWithTab, history, defaultKeymap, historyKeymap, undo, redo, undoDepth, redoDepth, } from '@codemirror/commands';
+import { indentUnit, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, } from '@codemirror/language';
+import { closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap, } from '@codemirror/autocomplete';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
 import { lintKeymap } from '@codemirror/lint';
 import { javascript } from '@codemirror/lang-javascript';
@@ -32,7 +32,6 @@ const isDarkMode = () => typeof document !== 'undefined' &&
 const highlightFor = (dark) => dark
     ? syntaxHighlighting(oneDarkHighlightStyle)
     : syntaxHighlighting(defaultHighlightStyle, { fallback: true });
-const isTjsMode = (mode) => mode === 'tjs' || mode === 'ajs';
 /** Map a `<tosi-code mode>` value to a CodeMirror language extension. */
 export function languageForMode(mode) {
     switch (mode) {
@@ -45,6 +44,7 @@ export function languageForMode(mode) {
         // tjs-lang language + autocomplete — is layered on asynchronously via
         // `loadTjsExtension()` + `setLanguageExtension()`, since it lazy-loads the
         // (optional) tjs-lang editor build; this keeps `mode="tjs"` readable meanwhile.
+        // falls through
         case 'tjs':
         case 'ajs':
             return javascript({ typescript: true });
@@ -147,6 +147,31 @@ function baseExtensions() {
         ]),
     ];
 }
+const darkListeners = new Set();
+let darkObserver;
+function watchDarkMode(listener) {
+    darkListeners.add(listener);
+    if (darkObserver === undefined &&
+        typeof MutationObserver !== 'undefined' &&
+        typeof document !== 'undefined' &&
+        document.body) {
+        darkObserver = new MutationObserver(() => {
+            for (const l of darkListeners)
+                l();
+        });
+        darkObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    return () => {
+        darkListeners.delete(listener);
+        if (darkListeners.size === 0) {
+            darkObserver?.disconnect();
+            darkObserver = undefined;
+        }
+    };
+}
 /** Create a CodeMirror editor mounted in `parent`, returning an editor-agnostic handle. */
 export function createCmEditor(parent, opts = {}) {
     const language = new Compartment();
@@ -173,16 +198,13 @@ export function createCmEditor(parent, opts = {}) {
     // Re-apply the right highlight palette when the doc-system toggles dark mode
     // (it flips the `darkmode` class on <body>).
     let dark = isDarkMode();
-    const darkObserver = typeof MutationObserver !== 'undefined' && typeof document !== 'undefined'
-        ? new MutationObserver(() => {
-            const nowDark = isDarkMode();
-            if (nowDark !== dark) {
-                dark = nowDark;
-                view.dispatch({ effects: highlight.reconfigure(highlightFor(dark)) });
-            }
-        })
-        : null;
-    darkObserver?.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    const unwatchDark = watchDarkMode(() => {
+        const nowDark = isDarkMode();
+        if (nowDark !== dark) {
+            dark = nowDark;
+            view.dispatch({ effects: highlight.reconfigure(highlightFor(dark)) });
+        }
+    });
     const handle = {
         view,
         getValue: () => view.state.doc.toString(),
@@ -194,7 +216,9 @@ export function createCmEditor(parent, opts = {}) {
             });
         },
         setMode(mode) {
-            view.dispatch({ effects: language.reconfigure(standardLanguageBundle(mode)) });
+            view.dispatch({
+                effects: language.reconfigure(standardLanguageBundle(mode)),
+            });
         },
         setLanguageExtension(ext) {
             view.dispatch({ effects: language.reconfigure(ext) });
@@ -211,7 +235,7 @@ export function createCmEditor(parent, opts = {}) {
         focus: () => view.focus(),
         refresh: () => view.requestMeasure(),
         destroy: () => {
-            darkObserver?.disconnect();
+            unwatchDark();
             view.destroy();
         },
     };

package/dist/code-editor.d.ts

@@ -1,21 +1,36 @@
 import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
-import type { CmHandle } from './code-editor-cm';
+import type { CmHandle, TjsAutocompleteConfig } from './code-editor-cm';
+export type { TjsAutocompleteConfig } from './code-editor-cm';
 interface CodeEditorParts extends PartsMap {
     host: HTMLDivElement;
+    diffHost: HTMLDivElement;
 }
 export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     static preferredTagName: string;
     private source;
     private _handle;
     private _loadPromise;
+    private _loadGeneration;
     private _appliedMode;
     private _appliedDisabled;
+    private _tjsAutocomplete;
+    /**
+     * Runtime-introspection hooks for tjs autocomplete (`getLiveBindings` /
+     * `getMembers`) — lets completion suggest the REAL members of live values (e.g.
+     * a tosijs proxy or a DOM element) that static analysis can't see. Only used in
+     * tjs mode; setting it re-applies the tjs extension so it takes effect live.
+     */
+    get tjsAutocomplete(): TjsAutocompleteConfig | undefined;
+    set tjsAutocomplete(config: TjsAutocompleteConfig | undefined);
     get value(): string;
     set value(text: string);
     private _original;
     get original(): string;
     set original(text: string);
     private diffOverlay;
+    private _partsHydrated;
+    private _pendingDiff;
+    private get partsReady();
     get showingDiff(): boolean;
     showDiff(on: boolean): void;
     static initAttributes: {
@@ -25,6 +40,14 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     role: string;
     /** The underlying CodeMirror EditorView (undefined until loaded). */
     get editor(): CmHandle['view'] | undefined;
+    /** @deprecated Removed in 1.7 — CodeMirror themes via `--code-bg`/`--text-color`. */
+    get theme(): string;
+    set theme(_: string);
+    /** @deprecated Removed in 1.7 — ACE-shaped options have no CodeMirror equivalent. */
+    get options(): Record<string, unknown>;
+    set options(_: Record<string, unknown>);
+    /** @deprecated Removed in 1.7 — there is no ACE global; use `editor` (an EditorView). */
+    get ace(): undefined;
     undo(): void;
     redo(): void;
     canUndo(): boolean;
@@ -40,6 +63,13 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
         '[part="host"]': {
             height: string;
         };
+        '[part="diffHost"]': {
+            position: string;
+            inset: string;
+            zIndex: string;
+            overflow: string;
+            background: string;
+        };
         '.cm-editor': {
             height: string;
         };
@@ -50,6 +80,7 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     };
     onResize(): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     private isTjsMode;
     /**
      * When in tjs mode, lazily upgrade the editor to tjs-lang's CodeMirror language +
@@ -60,4 +91,3 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     render(): void;
 }
 export declare const codeEditor: ElementCreator<CodeEditor>;
-export {};

package/dist/code-editor.js

@@ -16,24 +16,92 @@ body {
 </tosi-code>
 ```
 
-The `<tosi-code>` element has an `editor` property that gives you its CodeMirror
-[`EditorView`](https://codemirror.net/docs/ref/#view.EditorView), and
-`undo()` / `redo()` / `canUndo()` / `canRedo()` methods for history control.
+## Properties & events
 
-CodeMirror is loaded lazily on first use — a page with no `<tosi-code>` bundles
-none of it.
+| member | what it does |
+| --- | --- |
+| `value` | the code in the editor (get/set) |
+| `mode` | `javascript`, `typescript`, `tjs`, `ajs`, `css`, `html`, `markdown` |
+| `disabled` | makes the editor read-only |
+| `original` + `showDiff(on)` | diff the current `value` against a baseline, as an overlay |
+| `editor` | the underlying CodeMirror [`EditorView`](https://codemirror.net/docs/ref/#view.EditorView) (`undefined` until loaded) |
+| `undo()` / `redo()` / `canUndo()` / `canRedo()` | history control |
+| `tjsAutocomplete` | runtime-value autocomplete hooks (tjs mode) — see below |
+| `change` event | fires when the text changes; `event.detail.value` is the new text |
+
+In `tjs`/`ajs` mode the editor loads tjs-lang's CodeMirror language and completion
+source (if `tjs-lang` is installed — it's an optional peer). Set `tjsAutocomplete`
+to a `TjsAutocompleteConfig` and completion will suggest the **real members of live
+runtime values** — including proxy members no static analysis can see:
+
+```typescript
+codeEl.tjsAutocomplete = { getLiveBindings: () => ({ app, elements }) }
+```
+
+## Bundling
+
+CodeMirror is a **lazy chunk**: with a bundler (ESM), a page that never uses
+`<tosi-code>` doesn't load it. **This is not true of the IIFE** (`dist/iife.js`) —
+bun's IIFE format cannot code-split, so CodeMirror is inlined there. That is a
+deliberate trade: the doc-system's editor (and its save-to-source flow) is the
+point of the IIFE, so it carries the editor. It costs ~376KB gzipped, up from
+~118KB in 1.6.x.
+
+## Migrating from the ACE editor (pre-1.7)
+
+1.7 replaced ACE with CodeMirror 6. `value`, `original`/`showDiff()`, `mode` and
+`disabled` are unchanged. Removed (each warns once, then no-ops):
+
+| removed | replacement |
+| --- | --- |
+| `theme` | style with `--code-bg` / `--text-color` |
+| `options` (ACE-shaped) | configure via `editor` (an `EditorView`) |
+| `ace` | there is no ACE global; use `editor` |
+| `editor.session.getUndoManager()` | `undo()` / `redo()` / `canUndo()` / `canRedo()` |
+
+`editor` **changed type in place** — it was an ACE `Editor`, it is now a CodeMirror
+`EditorView`. Code that reached into it needs revisiting; a grep for removed names
+won't catch this one.
 */
 /*{ "parent": "Components" }*/
-import { Component as WebComponent, elements } from 'tosijs';
+import { Component as WebComponent, elements, varDefault, } from 'tosijs';
 import { tosiDiff } from './diff';
 const { div } = elements;
+// Warn once per removed member, not once per access — a live-example page holds
+// dozens of editors and a render-loop read would otherwise flood the console.
+const warned = new Set();
+const warnRemoved = (member, advice) => {
+    if (warned.has(member))
+        return;
+    warned.add(member);
+    console.warn(`<tosi-code>.${member} was removed in tosijs-ui 1.7 (the editor is now CodeMirror 6, not ACE) — ${advice}. See CHANGELOG 1.7.0.`);
+};
 export class CodeEditor extends WebComponent {
     static preferredTagName = 'tosi-code';
     source = '';
     _handle;
     _loadPromise;
+    // Bumped on every connect. The lazy chunk resolves asynchronously, so by the time it
+    // does, this element may have been removed — or removed and re-added, starting a newer
+    // load. Mounting a stale load would build an EditorView nothing ever destroys.
+    _loadGeneration = 0;
     _appliedMode = '';
     _appliedDisabled;
+    _tjsAutocomplete;
+    /**
+     * Runtime-introspection hooks for tjs autocomplete (`getLiveBindings` /
+     * `getMembers`) — lets completion suggest the REAL members of live values (e.g.
+     * a tosijs proxy or a DOM element) that static analysis can't see. Only used in
+     * tjs mode; setting it re-applies the tjs extension so it takes effect live.
+     */
+    get tjsAutocomplete() {
+        return this._tjsAutocomplete;
+    }
+    set tjsAutocomplete(config) {
+        this._tjsAutocomplete = config;
+        if (this._handle && this.isTjsMode())
+            this.applyTjsExtension();
+    }
     get value() {
         return this._handle ? this._handle.getValue() : this.source;
     }
@@ -55,33 +123,53 @@ export class CodeEditor extends WebComponent {
         this._original = text;
     }
     // Diff overlay — built only on the editor's public surface (`value` + `original`)
-    // and the tosi-diff component, never the underlying editor's API, so it is
-    // editor-agnostic (this is why it survived the Ace → CodeMirror swap untouched).
+    // and the tosi-diff component, never the underlying editor's API, so it stays
+    // editor-agnostic.
+    //
+    // It lives in the SHADOW root (the `diffHost` part), not the light DOM. Under the
+    // old Ace editor this component had no `content`, so tosijs's default `slot()`
+    // filled the shadow root and Ace mounted into the light DOM — a light-DOM overlay
+    // projected through that slot. CodeMirror mounts into `[part=host]` inside the
+    // shadow root, and this component now declares its own `content`, so there is no
+    // slot: `this.append(overlay)` would put it in the light DOM where nothing renders
+    // it. (Re-adding a slot is NOT the fix — it would also project the element's
+    // textContent, i.e. the initial code, and double-render it under the editor.)
     diffOverlay;
+    // Set once hydration has actually happened (end of connectedCallback).
+    //
+    // This CANNOT be a `try { this.parts.x } catch` probe, which is what it used to be.
+    // tosijs's `parts` proxy caches its query root on FIRST access — so touching it before
+    // hydration permanently roots the proxy at the light-DOM element, and every later
+    // `this.parts.*` throws, including the `this.parts.host` that mounts CodeMirror. The
+    // editor then never mounts at all. Merely reading `el.showingDiff` on a constructed,
+    // not-yet-inserted element was enough to brick it — silently, and unrecoverably.
+    _partsHydrated = false;
+    // A showDiff() call made before hydration, replayed once we're ready (rather than
+    // silently dropped, which is what used to happen).
+    _pendingDiff;
+    get partsReady() {
+        return this._partsHydrated;
+    }
     get showingDiff() {
-        return this.diffOverlay !== undefined && !this.diffOverlay.hidden;
+        if (!this.partsReady)
+            return this._pendingDiff ?? false;
+        return !this.parts.diffHost.hidden;
     }
     showDiff(on) {
+        if (!this.partsReady) {
+            this._pendingDiff = on;
+            return;
+        }
+        const { diffHost } = this.parts;
         if (on) {
             if (this.diffOverlay === undefined) {
-                this.diffOverlay = tosiDiff({
-                    style: {
-                        position: 'absolute',
-                        inset: '0',
-                        zIndex: '5',
-                        overflow: 'auto',
-                        background: 'var(--tosi-diff-bg, var(--background, #fff))',
-                    },
-                });
-                this.append(this.diffOverlay);
+                this.diffOverlay = tosiDiff();
+                diffHost.append(this.diffOverlay);
             }
             this.diffOverlay.original = this.original;
             this.diffOverlay.modified = this.value;
-            this.diffOverlay.hidden = false;
-        }
-        else if (this.diffOverlay !== undefined) {
-            this.diffOverlay.hidden = true;
         }
+        diffHost.hidden = !on;
     }
     static initAttributes = {
         mode: 'javascript',
@@ -92,6 +180,32 @@ export class CodeEditor extends WebComponent {
     get editor() {
         return this._handle?.view;
     }
+    // ── Removed in 1.7 (ACE → CodeMirror 6) ────────────────────────────────────
+    // `^1.6.x` resolves 1.7.0, so existing consumers auto-upgrade into this. Left as
+    // warn-once no-ops rather than simply deleted, so `theme`/`options`/`ace` fail
+    // with an actionable message instead of silently doing nothing (or, for `ace`,
+    // a bare `TypeError` on undefined). See CHANGELOG 1.7.0 → Breaking.
+    /** @deprecated Removed in 1.7 — CodeMirror themes via `--code-bg`/`--text-color`. */
+    get theme() {
+        warnRemoved('theme', 'style the editor with --code-bg / --text-color instead');
+        return '';
+    }
+    set theme(_) {
+        warnRemoved('theme', 'style the editor with --code-bg / --text-color instead');
+    }
+    /** @deprecated Removed in 1.7 — ACE-shaped options have no CodeMirror equivalent. */
+    get options() {
+        warnRemoved('options', 'configure CodeMirror via the `editor` (EditorView) instead');
+        return {};
+    }
+    set options(_) {
+        warnRemoved('options', 'configure CodeMirror via the `editor` (EditorView) instead');
+    }
+    /** @deprecated Removed in 1.7 — there is no ACE global; use `editor` (an EditorView). */
+    get ace() {
+        warnRemoved('ace', 'use `editor`, which is now a CodeMirror EditorView');
+        return undefined;
+    }
     // History control — so consumers use these instead of reaching into `editor`.
     undo() {
         this._handle?.undo();
@@ -105,7 +219,12 @@ export class CodeEditor extends WebComponent {
     canRedo() {
         return this._handle?.canRedo() ?? false;
     }
-    content = () => [div({ part: 'host' })];
+    // `diffHost` starts hidden — an always-present absolutely-positioned overlay would
+    // otherwise sit on top of the editor and swallow every click.
+    content = () => [
+        div({ part: 'host' }),
+        div({ part: 'diffHost', hidden: true }),
+    ];
     static shadowStyleSpec = {
         ':host': {
             display: 'block',
@@ -114,6 +233,13 @@ export class CodeEditor extends WebComponent {
             height: '100%',
         },
         '[part="host"]': { height: '100%' },
+        '[part="diffHost"]': {
+            position: 'absolute',
+            inset: '0',
+            zIndex: '5',
+            overflow: 'auto',
+            background: varDefault.tosiDiffBg(varDefault.background('#fff')),
+        },
         '.cm-editor': { height: '100%' },
         '.cm-scroller': {
             outline: 'none',
@@ -125,12 +251,33 @@ export class CodeEditor extends WebComponent {
     }
     connectedCallback() {
         super.connectedCallback();
+        // super.connectedCallback() hydrates, so `this.parts` is safe from here on.
+        this._partsHydrated = true;
         if (this.source === '') {
             this.value = this.textContent !== null ? this.textContent.trim() : '';
         }
+        // Replay a showDiff() that arrived before we were hydrated.
+        if (this._pendingDiff !== undefined) {
+            const pending = this._pendingDiff;
+            this._pendingDiff = undefined;
+            this.showDiff(pending);
+        }
         if (this._loadPromise === undefined) {
             // Lazy chunk — CodeMirror only enters the bundle here, on first editor use.
+            const generation = ++this._loadGeneration;
             this._loadPromise = import('./code-editor-cm').then(({ createCmEditor }) => {
+                // The chunk fetch is async, and the pre-load window is WIDE on a cold fetch —
+                // doc-browser navigation and closeEditor() both remove editors mid-flight. If we
+                // mounted regardless:
+                //   append → remove          → an EditorView built into a detached shadow root,
+                //                              with no disconnectedCallback left to destroy it.
+                //   append → remove → append → TWO views in the host; `_handle` points only at
+                //                              the second, so the first (and its darkmode
+                //                              listener) is retained forever.
+                // That is precisely the leak disconnectedCallback exists to prevent, relocated
+                // into the load window. Bail if a newer connect superseded us, or we're detached.
+                if (generation !== this._loadGeneration || !this.isConnected)
+                    return undefined;
                 const handle = createCmEditor(this.parts.host, {
                     value: this.source,
                     mode: this.mode,
@@ -146,6 +293,26 @@ export class CodeEditor extends WebComponent {
             });
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Without this, `CmHandle.destroy()` has no call sites: the EditorView (and its
+        // darkmode listener) outlive the element, so every doc-page navigation leaked all
+        // ~20 editors on the page.
+        if (this._handle) {
+            // Preserve the live text first — `value` falls back to `source` once the handle
+            // is gone, and `source` would otherwise hold a stale pre-edit value.
+            this.source = this._handle.getValue();
+            this._handle.destroy();
+            this._handle = undefined;
+        }
+        // Re-connecting rebuilds the editor (a destroyed view can't be reused).
+        this._loadPromise = undefined;
+        this._appliedMode = '';
+        this._appliedDisabled = undefined;
+        // NB: do NOT clear `diffOverlay` — hydrate() runs once, so the shadow DOM (and the
+        // overlay inside `diffHost`) survives disconnect. Clearing it would append a second
+        // overlay on reconnect.
+    }
     isTjsMode() {
         return this.mode === 'tjs' || this.mode === 'ajs';
     }
@@ -159,7 +326,7 @@ export class CodeEditor extends WebComponent {
         if (!handle || !this.isTjsMode())
             return;
         import('./code-editor-cm')
-            .then(({ loadTjsExtension }) => loadTjsExtension())
+            .then(({ loadTjsExtension }) => loadTjsExtension(this._tjsAutocomplete ?? {}))
             .then((ext) => {
             if (ext && this._handle === handle && this.isTjsMode()) {
                 handle.setLanguageExtension(ext);