@coldsmirk/inkstone-react 0.30.0 → 0.32.0

package/README.md

@@ -1,6 +1,6 @@
 # @coldsmirk/inkstone-react
 
-Drop-in React code editors with the integration chores solved once: a preconfigured Monaco **`<MonacoEditor>`** (offline workers, Shiki catppuccin themes, dark switching, opt-in zh-CN UI) and a controlled CodeMirror 6 **`<CodeMirrorEditor>`** (catppuccin themes, restyled chrome, MiniJinja support, sizing) — plus **`<MonacoDiffEditor>`** and **`<CodeMirrorDiffEditor>`**, the same assemblies around each engine's side-by-side diff view. Drop in a component; the plumbing is already wired.
+Drop-in React code editors with the integration chores solved once: a preconfigured Monaco **`<MonacoEditor>`** (offline workers, Shiki catppuccin themes, dark switching, opt-in zh-CN UI) and a controlled CodeMirror 6 **`<CodeMirrorEditor>`** (catppuccin themes, restyled chrome, MiniJinja support, sizing) — plus **`<MonacoDiffEditor>`** and **`<CodeMirrorDiffEditor>`**, the same assemblies around each engine's side-by-side diff view, and **`<MonacoConsoleEditor>`**, the run-key surface inkstone's database editors stand on. Drop in a component; the plumbing is already wired.
 
 Part of [inkstone](https://github.com/coldsmirk/inkstone) — this package composes [`@coldsmirk/inkstone-core`](https://www.npmjs.com/package/@coldsmirk/inkstone-core) (shared Shiki highlighter), [`@coldsmirk/inkstone-monaco`](https://www.npmjs.com/package/@coldsmirk/inkstone-monaco) (offline Monaco host), and [`@coldsmirk/inkstone-codemirror`](https://www.npmjs.com/package/@coldsmirk/inkstone-codemirror) (controlled CM6 host + MiniJinja). See the [repository README](https://github.com/coldsmirk/inkstone#readme) for the full guide; the highlights below are what you touch daily.
 
@@ -31,7 +31,7 @@ import { MonacoEditor } from "@coldsmirk/inkstone-react/monaco";
 One component brings: the local `monaco-editor` instance (no CDN), bundled offline workers, Shiki catppuccin highlighting registered before first paint, light/dark switching via `dark`, and VS Code's auto-closing JSX tags on TypeScript/JavaScript models whose `path` ends in `.tsx` / `.jsx` (parser-backed via the bundled TS worker).
 
 - **Locale** — chrome speaks stock English; `locale="zh-cn"` switches to Monaco's official Simplified-Chinese catalog. Page-global and locked by the first editor to mount, so give every editor the same value.
-- **Type & metrics** — `fontSize` defaults to 14, `lineHeight` to 1.6 (Monaco's convention: values below 8 multiply the font size); `DEFAULT_MONACO_OPTIONS` is exported for hosts that need the same baseline.
+- **Type & metrics** — `fontSize` defaults to 14, `lineHeight` to 1.6 (Monaco's convention: values below 8 multiply the font size); `DEFAULT_MONACO_OPTIONS` is exported for hosts that need the same baseline. `lineWrapping` (opt-in) soft-wraps long lines and ends each wrapped line in Monaco's ↩ (`wordWrapIndicator`), so a soft wrap reads apart from a real line break — on `<MonacoDiffEditor>` too.
 - **Loading / failure** — the host, the highlighter, and the Monaco chunk each have a loading window; `loading` and `failure` render nodes for them. A host load failure is not cached — a fresh mount retries.
 - **Embedded-friendly** — `find.addExtraSpaceOnTop` is off by default and the find-widget tooltip geometry of [monaco-editor#5177](https://github.com/microsoft/monaco-editor/issues/5177) is worked around. `disableContextMenu` / `disableFind` / `disableCommandPalette` switch off Monaco's browsing chrome per editor.
 - **Escape hatches** — `options` (raw `IStandaloneEditorConstructionOptions`), `hostOptions` (e.g. a custom `getWorker`; first mount wins), `beforeMount` / `onMount` for language-service configuration.
@@ -83,6 +83,30 @@ Each component keeps its engine's conventions from the single-editor sibling:
 - **`<MonacoDiffEditor>`** — the `<MonacoEditor>` assembly (offline host, Shiki themes, `locale`, `loading` / `failure`, `hostOptions`) around `monaco.editor.createDiffEditor`. `options` takes raw `IDiffEditorConstructionOptions` over the same `DEFAULT_MONACO_OPTIONS` baseline — e.g. `renderSideBySide: false` for the inline view.
 - **`<CodeMirrorDiffEditor>`** — `@codemirror/merge`'s `MergeView` behind `<CodeMirrorEditor>`'s create-once discipline, with the catppuccin flavors extended to the diff chrome (red deletions / green insertions, themed collapse bars and revert controls). `revertControls` adds per-chunk arrows copying the original chunk into the modified document (flows through `onChange`); `language`, `extensions`, and `dynamicExtensions` apply to both sides; `onMount` hands you the `MergeView`.
 
+## `<MonacoConsoleEditor>`
+
+```tsx
+import { MonacoConsoleEditor } from "@coldsmirk/inkstone-react/monaco";
+
+<MonacoConsoleEditor
+  ariaLabel="Query"
+  language="kql"
+  namespace="app-kql"
+  extension="kql"
+  value={query}
+  onChange={setQuery}
+  onRun={caret => run(caret)}
+  context={{ assist }}
+  register={({ monaco, path, context }) => registerKql(monaco, path, { assist: () => context().assist })}
+/>;
+```
+
+The surface of a console — a document an operator writes and runs: `<MonacoEditor>` with line numbers and a model path of its own, the run key (Ctrl/Cmd-Enter) handing `onRun` the live caret (`{ text, from, to }`, the text and the offsets of one instant), `onCaret` as the caret moves, an `onReady` handle that inserts at the caret and focuses, and an optional mark on the span a run would send (`highlight`). The language editors of `@coldsmirk/inkstone-sql`, `-redis`, `-mongodb` and `-elasticsearch` are this component and their language's wiring.
+
+- **Your language's wiring** — `beforeMount` defines a grammar before the editor exists; `register` makes the language's registrations for this editor once, as it mounts, and returns their disposables, which go with the editor. Whatever a registration reads that can change between renders goes in `context` and is read at the moment it is needed through the registration's `context()` getter — never captured at mount, so a completion after a connection switch answers from the new connection.
+- **Names** — `namespace` names what the editor puts into Monaco: the model path `file:///<namespace>/<n>.<extension>`, the run action `<namespace>.run`, the inserts' source `<namespace>-insert`, and the mark's default class `<namespace>-runnable`.
+- **`options`** — merged under the editor's own (`ariaLabel`) on its identity: keep the object stable, since a new one is applied to the live editor again.
+
 ## License
 
 UNLICENSED — proprietary. All rights reserved; no use, copying, or redistribution without the author's permission.

package/dist/codemirror.js

@@ -1,2 +1 @@
-import { a as CodeMirrorDiffEditor, i as CodeMirrorEditor, n as normalizeContext, r as searchPhrasesZhCn, t as codeMirrorLanguages } from "./codemirror-bROXidfr.js";
-export { CodeMirrorDiffEditor, CodeMirrorEditor, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn };
+export { a as CodeMirrorDiffEditor, i as CodeMirrorEditor, t as codeMirrorLanguages, n as normalizeContext, r as searchPhrasesZhCn } from "./codemirror-bROXidfr.js";

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import { a as codeMirrorLanguages, c as CodeMirrorEditor, d as CodeMirrorDiffEditorProps, i as SqlSchema, l as CodeMirrorEditorProps, n as EditorContext, o as normalizeContext, r as MergeView, s as searchPhrasesZhCn, t as CodeMirrorLanguage, u as CodeMirrorDiffEditor } from "./codemirror-BW_zSOVE.js";
-import { a as MonacoEditorProps, i as MonacoEditor, n as MonacoLanguage, o as MonacoDiffEditor, r as monacoLanguages, s as MonacoDiffEditorProps, t as DEFAULT_MONACO_OPTIONS } from "./monaco-OhCg_705.js";
+import { a as MonacoEditorProps, c as ConsoleCaret, d as ConsoleRegistration, f as MonacoConsoleEditor, i as MonacoEditor, l as ConsoleEditorHandle, n as MonacoLanguage, o as MonacoDiffEditor, p as MonacoConsoleEditorProps, r as monacoLanguages, s as MonacoDiffEditorProps, t as DEFAULT_MONACO_OPTIONS, u as ConsoleEditorProps } from "./monaco-DTLlEEfk.js";
 import { n as useShikiHighlighter, t as ShikiState } from "./shiki-Ds-uZ7XH.js";
-export { CodeMirrorDiffEditor, type CodeMirrorDiffEditorProps, CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, DEFAULT_MONACO_OPTIONS, type EditorContext, type MergeView, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, type ShikiState, type SqlSchema, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };
+export { CodeMirrorDiffEditor, type CodeMirrorDiffEditorProps, CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, type ConsoleCaret, type ConsoleEditorHandle, type ConsoleEditorProps, type ConsoleRegistration, DEFAULT_MONACO_OPTIONS, type EditorContext, type MergeView, MonacoConsoleEditor, type MonacoConsoleEditorProps, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, type ShikiState, type SqlSchema, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { a as CodeMirrorDiffEditor, i as CodeMirrorEditor, n as normalizeContext, r as searchPhrasesZhCn, t as codeMirrorLanguages } from "./codemirror-bROXidfr.js";
-import { i as MonacoDiffEditor, n as monacoLanguages, r as MonacoEditor, t as DEFAULT_MONACO_OPTIONS } from "./monaco-FFb6p4ut.js";
+import { a as MonacoEditor, i as MonacoConsoleEditor, n as monacoLanguages, r as MonacoDiffEditor, t as DEFAULT_MONACO_OPTIONS } from "./monaco-CHi4aRfZ.js";
 import { t as useShikiHighlighter } from "./use-shiki-highlighter-CzSQcX2f.js";
 import "./shiki.js";
-export { CodeMirrorDiffEditor, CodeMirrorEditor, DEFAULT_MONACO_OPTIONS, MonacoDiffEditor, MonacoEditor, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };
+export { CodeMirrorDiffEditor, CodeMirrorEditor, DEFAULT_MONACO_OPTIONS, MonacoConsoleEditor, MonacoDiffEditor, MonacoEditor, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };

package/dist/{monaco-FFb6p4ut.js → monaco-CHi4aRfZ.js}

@@ -59,123 +59,12 @@ function useMonacoHost(locale, hostOptions) {
 	return state;
 }
 //#endregion
-//#region src/monaco-diff-editor.tsx
-function diffDocumentOptions({ lineWrapping, showLineNumbers, readOnly, collapseUnchanged, fontSize, lineHeight }) {
-	const resolved = {
-		wordWrap: lineWrapping ? "on" : "off",
-		lineNumbers: showLineNumbers ? "on" : "off",
-		readOnly,
-		hideUnchangedRegions: { enabled: collapseUnchanged }
-	};
-	if (fontSize !== void 0) resolved.fontSize = fontSize;
-	if (lineHeight !== void 0) resolved.lineHeight = lineHeight;
-	return resolved;
-}
-function reconcilePane(model, value, reconciling) {
-	if (!model) return;
-	reconciling.current = true;
-	try {
-		reconcileModelValue(model, value);
-	} finally {
-		reconciling.current = false;
-	}
-}
-function MonacoDiffEditor({ original, modified, onChange, language = "javascript", dark = false, locale, readOnly = false, collapseUnchanged = false, lineWrapping = false, showLineNumbers = true, fontSize, lineHeight, height = "100%", width, className, options, hostOptions, loading = "Loading editor…", failure = "Editor failed to load", beforeMount, onMount }) {
-	const hostState = useMonacoHost(locale, hostOptions);
-	const { state: shikiState, highlighterRef } = useShikiHighlighter();
-	const beforeMountRef = useLatest(beforeMount);
-	const onMountRef = useLatest(onMount);
-	const onChangeRef = useLatest(onChange);
-	const originalRef = useLatest(original);
-	const modifiedRef = useLatest(modified);
-	const diffEditorRef = useRef(null);
-	const reconcilingRef = useRef(false);
-	const modifiedTransitionRef = useRef(false);
-	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
-	const initialValuesRef = useRef({
-		original,
-		modified
-	});
-	const mergedOptions = useMemo(() => {
-		return {
-			...DEFAULT_MONACO_OPTIONS,
-			...diffDocumentOptions({
-				lineWrapping,
-				showLineNumbers,
-				readOnly,
-				collapseUnchanged,
-				fontSize,
-				lineHeight
-			}),
-			...options
-		};
-	}, [
-		lineWrapping,
-		showLineNumbers,
-		readOnly,
-		collapseUnchanged,
-		fontSize,
-		lineHeight,
-		options
-	]);
-	useLayoutEffect(() => {
-		reconcilePane(diffEditorRef.current?.getOriginalEditor().getModel() ?? null, original, reconcilingRef);
-	}, [original]);
-	useInsertionEffect(() => {
-		const model = diffEditorRef.current?.getModifiedEditor().getModel();
-		modifiedTransitionRef.current = model !== null && model !== void 0 && !modelValueMatches(model, modified);
-	}, [modified, reconcileRevision]);
-	useLayoutEffect(() => {
-		try {
-			reconcilePane(diffEditorRef.current?.getModifiedEditor().getModel() ?? null, modified, reconcilingRef);
-		} finally {
-			modifiedTransitionRef.current = false;
-		}
-	}, [modified, reconcileRevision]);
-	if (hostState === "failed") return /* @__PURE__ */ jsx(EditorFace, { children: failure });
-	if (hostState === "loading" || shikiState === "loading") return /* @__PURE__ */ jsx(EditorFace, { children: loading });
-	const handleBeforeMount = (monaco) => {
-		const highlighter = highlighterRef.current;
-		if (highlighter) registerShikiHighlighting(monaco, highlighter);
-		beforeMountRef.current?.(monaco);
-	};
-	const handleMount = (diffEditor, monaco) => {
-		initialValuesRef.current = {
-			original: originalRef.current,
-			modified: modifiedRef.current
-		};
-		diffEditorRef.current = diffEditor;
-		const modifiedEditor = diffEditor.getModifiedEditor();
-		modifiedEditor.onDidChangeModelContent(() => {
-			if (reconcilingRef.current || modifiedTransitionRef.current) return;
-			onChangeRef.current?.(modifiedEditor.getValue());
-			requestControlledReconcile();
-		});
-		reconcilePane(diffEditor.getOriginalEditor().getModel(), originalRef.current, reconcilingRef);
-		reconcilePane(modifiedEditor.getModel(), modifiedRef.current, reconcilingRef);
-		onMountRef.current?.(diffEditor, monaco);
-	};
-	const theme = shikiState === "ready" ? shikiThemeId(dark) : dark ? "vs-dark" : "vs";
-	return /* @__PURE__ */ jsx(DiffEditor, {
-		beforeMount: handleBeforeMount,
-		className,
-		height,
-		language,
-		loading,
-		modified: diffEditorRef.current ? initialValuesRef.current.modified : modified,
-		options: mergedOptions,
-		original: diffEditorRef.current ? initialValuesRef.current.original : original,
-		theme,
-		width,
-		onMount: handleMount
-	});
-}
-//#endregion
 //#region src/monaco-editor.tsx
 function documentOptions({ placeholder, lineWrapping, showLineNumbers, folding, disableContextMenu, fontSize, lineHeight, tabSize }) {
 	const resolved = {
 		placeholder,
 		wordWrap: lineWrapping ? "on" : "off",
+		wordWrapIndicator: lineWrapping,
 		lineNumbers: showLineNumbers ? "on" : "off",
 		folding,
 		contextmenu: !disableContextMenu
@@ -310,7 +199,7 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 	return /* @__PURE__ */ jsx(Editor, {
 		keepCurrentModel: true,
 		beforeMount: handleBeforeMount,
-		className,
+		className: className === void 0 ? "monaco-component" : `monaco-component ${className}`,
 		defaultValue: value,
 		height,
 		language,
@@ -324,4 +213,238 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 	});
 }
 //#endregion
-export { MonacoDiffEditor as i, monacoLanguages as n, MonacoEditor as r, DEFAULT_MONACO_OPTIONS$1 as t };
+//#region src/monaco-console-editor.tsx
+const EDITOR_ID_KEY = Symbol.for("coldsmirk.inkstone.react.consoleEditorId");
+function nextEditorId() {
+	const holder = globalThis;
+	const id = holder[EDITOR_ID_KEY] ?? 0;
+	holder[EDITOR_ID_KEY] = id + 1;
+	return id;
+}
+function caretOf(instance) {
+	const model = instance.getModel();
+	const selection = instance.getSelection();
+	if (model === null || selection === null) return {
+		text: "",
+		from: 0,
+		to: 0
+	};
+	return {
+		text: model.getValue(),
+		from: model.getOffsetAt(selection.getStartPosition()),
+		to: model.getOffsetAt(selection.getEndPosition())
+	};
+}
+function monacoRange(model, span) {
+	const from = model.getPositionAt(span.from);
+	const to = model.getPositionAt(span.to);
+	return {
+		startLineNumber: from.lineNumber,
+		startColumn: from.column,
+		endLineNumber: to.lineNumber,
+		endColumn: to.column
+	};
+}
+function markRunnable(instance, marked, span, className) {
+	const model = instance.getModel();
+	if (model === null) return;
+	const decorations = span === null ? [] : [{
+		range: monacoRange(model, span),
+		options: {
+			linesDecorationsClassName: className,
+			isWholeLine: true
+		}
+	}];
+	if (marked.current !== null) marked.current.set(decorations);
+	else if (decorations.length > 0) marked.current = instance.createDecorationsCollection(decorations);
+}
+function MonacoConsoleEditor({ value, onChange, dark = false, height = 200, fontSize, locale, placeholder, ariaLabel, loading, failure, onRun, runActionLabel = "Run", onCaret, onReady, onMount, options, language, namespace, extension, context, beforeMount, register, highlight = null, highlightClassName = `${namespace}-runnable` }) {
+	const [path] = useState(() => `file:///${namespace}/${String(nextEditorId())}.${extension}`);
+	const bindings = useRef([]);
+	const contextRef = useLatest(context);
+	const runRef = useLatest(onRun);
+	const caretRef = useLatest(onCaret);
+	const instance = useRef(null);
+	const marked = useRef(null);
+	useEffect(() => {
+		if (instance.current !== null) markRunnable(instance.current, marked, highlight, highlightClassName);
+	}, [highlight, highlightClassName]);
+	useEffect(() => () => {
+		for (const binding of bindings.current) binding.dispose();
+		bindings.current = [];
+	}, []);
+	const constructionOptions = useMemo(() => {
+		return {
+			...options,
+			ariaLabel
+		};
+	}, [options, ariaLabel]);
+	const fill = height === "fill";
+	return /* @__PURE__ */ jsx("div", {
+		style: fill ? {
+			height: "100%",
+			minHeight: 0
+		} : { height },
+		children: /* @__PURE__ */ jsx(MonacoEditor, {
+			showLineNumbers: true,
+			beforeMount,
+			dark,
+			failure,
+			fontSize,
+			height: fill ? "100%" : height,
+			language,
+			loading,
+			locale,
+			options: constructionOptions,
+			path,
+			placeholder,
+			value,
+			onChange,
+			onMount: (live, monaco) => {
+				instance.current = live;
+				bindings.current.push(live.onDidChangeCursorSelection(() => caretRef.current?.(caretOf(live))), live.addAction({
+					id: `${namespace}.run`,
+					label: runActionLabel,
+					keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+					run: (current) => runRef.current?.(caretOf(current))
+				}), ...register?.({
+					monaco,
+					editor: live,
+					path,
+					context: () => contextRef.current
+				}) ?? []);
+				markRunnable(live, marked, highlight, highlightClassName);
+				onReady?.({
+					insert: (text) => {
+						const selection = live.getSelection();
+						if (selection) live.executeEdits(`${namespace}-insert`, [{
+							range: selection,
+							text,
+							forceMoveMarkers: true
+						}]);
+						live.focus();
+					},
+					focus: () => {
+						live.focus();
+					}
+				});
+				onMount?.(live, monaco);
+			}
+		})
+	});
+}
+//#endregion
+//#region src/monaco-diff-editor.tsx
+function diffDocumentOptions({ lineWrapping, showLineNumbers, readOnly, collapseUnchanged, fontSize, lineHeight }) {
+	const resolved = {
+		wordWrap: lineWrapping ? "on" : "off",
+		wordWrapIndicator: lineWrapping,
+		lineNumbers: showLineNumbers ? "on" : "off",
+		readOnly,
+		hideUnchangedRegions: { enabled: collapseUnchanged }
+	};
+	if (fontSize !== void 0) resolved.fontSize = fontSize;
+	if (lineHeight !== void 0) resolved.lineHeight = lineHeight;
+	return resolved;
+}
+function reconcilePane(model, value, reconciling) {
+	if (!model) return;
+	reconciling.current = true;
+	try {
+		reconcileModelValue(model, value);
+	} finally {
+		reconciling.current = false;
+	}
+}
+function MonacoDiffEditor({ original, modified, onChange, language = "javascript", dark = false, locale, readOnly = false, collapseUnchanged = false, lineWrapping = false, showLineNumbers = true, fontSize, lineHeight, height = "100%", width, className, options, hostOptions, loading = "Loading editor…", failure = "Editor failed to load", beforeMount, onMount }) {
+	const hostState = useMonacoHost(locale, hostOptions);
+	const { state: shikiState, highlighterRef } = useShikiHighlighter();
+	const beforeMountRef = useLatest(beforeMount);
+	const onMountRef = useLatest(onMount);
+	const onChangeRef = useLatest(onChange);
+	const originalRef = useLatest(original);
+	const modifiedRef = useLatest(modified);
+	const diffEditorRef = useRef(null);
+	const reconcilingRef = useRef(false);
+	const modifiedTransitionRef = useRef(false);
+	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
+	const initialValuesRef = useRef({
+		original,
+		modified
+	});
+	const mergedOptions = useMemo(() => {
+		return {
+			...DEFAULT_MONACO_OPTIONS,
+			...diffDocumentOptions({
+				lineWrapping,
+				showLineNumbers,
+				readOnly,
+				collapseUnchanged,
+				fontSize,
+				lineHeight
+			}),
+			...options
+		};
+	}, [
+		lineWrapping,
+		showLineNumbers,
+		readOnly,
+		collapseUnchanged,
+		fontSize,
+		lineHeight,
+		options
+	]);
+	useLayoutEffect(() => {
+		reconcilePane(diffEditorRef.current?.getOriginalEditor().getModel() ?? null, original, reconcilingRef);
+	}, [original]);
+	useInsertionEffect(() => {
+		const model = diffEditorRef.current?.getModifiedEditor().getModel();
+		modifiedTransitionRef.current = model !== null && model !== void 0 && !modelValueMatches(model, modified);
+	}, [modified, reconcileRevision]);
+	useLayoutEffect(() => {
+		try {
+			reconcilePane(diffEditorRef.current?.getModifiedEditor().getModel() ?? null, modified, reconcilingRef);
+		} finally {
+			modifiedTransitionRef.current = false;
+		}
+	}, [modified, reconcileRevision]);
+	if (hostState === "failed") return /* @__PURE__ */ jsx(EditorFace, { children: failure });
+	if (hostState === "loading" || shikiState === "loading") return /* @__PURE__ */ jsx(EditorFace, { children: loading });
+	const handleBeforeMount = (monaco) => {
+		const highlighter = highlighterRef.current;
+		if (highlighter) registerShikiHighlighting(monaco, highlighter);
+		beforeMountRef.current?.(monaco);
+	};
+	const handleMount = (diffEditor, monaco) => {
+		initialValuesRef.current = {
+			original: originalRef.current,
+			modified: modifiedRef.current
+		};
+		diffEditorRef.current = diffEditor;
+		const modifiedEditor = diffEditor.getModifiedEditor();
+		modifiedEditor.onDidChangeModelContent(() => {
+			if (reconcilingRef.current || modifiedTransitionRef.current) return;
+			onChangeRef.current?.(modifiedEditor.getValue());
+			requestControlledReconcile();
+		});
+		reconcilePane(diffEditor.getOriginalEditor().getModel(), originalRef.current, reconcilingRef);
+		reconcilePane(modifiedEditor.getModel(), modifiedRef.current, reconcilingRef);
+		onMountRef.current?.(diffEditor, monaco);
+	};
+	const theme = shikiState === "ready" ? shikiThemeId(dark) : dark ? "vs-dark" : "vs";
+	return /* @__PURE__ */ jsx(DiffEditor, {
+		beforeMount: handleBeforeMount,
+		className,
+		height,
+		language,
+		loading,
+		modified: diffEditorRef.current ? initialValuesRef.current.modified : modified,
+		options: mergedOptions,
+		original: diffEditorRef.current ? initialValuesRef.current.original : original,
+		theme,
+		width,
+		onMount: handleMount
+	});
+}
+//#endregion
+export { MonacoEditor as a, MonacoConsoleEditor as i, monacoLanguages as n, MonacoDiffEditor as r, DEFAULT_MONACO_OPTIONS$1 as t };

package/dist/{monaco-OhCg_705.d.ts → monaco-DTLlEEfk.d.ts}

@@ -1,7 +1,191 @@
 import { ReactNode } from "react";
-import { DEFAULT_MONACO_OPTIONS as DEFAULT_MONACO_OPTIONS$1, MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale, monacoLanguages } from "@coldsmirk/inkstone-monaco";
+import { DEFAULT_MONACO_OPTIONS as DEFAULT_MONACO_OPTIONS$1, MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoModule, MonacoUiLocale, monacoLanguages } from "@coldsmirk/inkstone-monaco";
 import { BeforeMount, DiffBeforeMount, DiffOnMount, OnMount } from "@monaco-editor/react";
-import { editor } from "monaco-editor";
+import { IDisposable, editor } from "monaco-editor";
+//#region src/monaco-console-editor.d.ts
+/**
+ * Where the operator is in the document, in offsets — everything a host needs to decide what a
+ * run should send, and nothing about the language. `from` and `to` are the selection's own
+ * bounds and are equal where nothing is selected: a caret is a selection of nothing.
+ *
+ * It rides with the text rather than beside it because the two must belong to the same instant.
+ * The controlled `value` is one React render behind the keystroke that triggered a run, and a
+ * console must run what the operator is looking at.
+ */
+interface ConsoleCaret {
+  text: string;
+  from: number;
+  to: number;
+}
+/**
+ * What a host reaches into a console editor for: inserting at the caret — a schema, key or
+ * collection tree is an input device, not a browser — and the focus.
+ */
+interface ConsoleEditorHandle {
+  insert: (text: string) => void;
+  focus: () => void;
+}
+/**
+ * What every console editor takes: `<MonacoConsoleEditor>`, and each language's editor built on
+ * it (`<SqlEditor>`, `<RedisEditor>`, `<MongodbEditor>`, `<ElasticsearchEditor>`).
+ */
+interface ConsoleEditorProps<Handle extends ConsoleEditorHandle = ConsoleEditorHandle> {
+  value: string;
+  onChange: (value: string) => void;
+  /**
+   * Render with the dark theme. Like every inkstone editor, a console never reads the OS
+   * `prefers-color-scheme`; wire this to the app's color-scheme state.
+   *
+   * @default false
+   */
+  dark?: boolean;
+  /**
+   * Editor height in px, or `"fill"` to consume the parent's resolved height (the parent must be
+   * a `min-height: 0` flex item). Monaco's loading placeholder is `height: 100%`, so a height
+   * that resolves to nothing collapses the field to one line while the editor loads.
+   *
+   * @default 200
+   */
+  height?: number | "fill";
+  /**
+   * Editor font size in px. Omit to keep the inkstone default.
+   */
+  fontSize?: number;
+  /**
+   * UI locale for Monaco's built-in chrome — page-global and locked by the first editor to
+   * mount, exactly as on `<MonacoEditor>`.
+   */
+  locale?: MonacoUiLocale;
+  placeholder?: string;
+  /**
+   * The editor's accessible name, set on Monaco's own input surface — several consoles on one
+   * page are indistinguishable to assistive tech without one.
+   */
+  ariaLabel: string;
+  /**
+   * Shown while the Monaco host loads / when it fails to load — passed through to
+   * `<MonacoEditor>`, whose English defaults apply when omitted.
+   */
+  loading?: ReactNode;
+  failure?: ReactNode;
+  /**
+   * Ctrl/Cmd-Enter — the run key, bound inside the editor because that is where the operator's
+   * hands are. It is handed the editor's live caret, from which the host works out what to send.
+   * Read at every press, so it always runs against the connection the *current* render is bound
+   * to.
+   */
+  onRun?: (caret: ConsoleCaret) => void;
+  /**
+   * The label the run action shows in Monaco's own chrome (command palette, context menu).
+   */
+  runActionLabel?: string;
+  /**
+   * The caret moved, or the text under it changed. The host tracks it to show what a run would
+   * send; the run key does not depend on that tracking having caught up.
+   */
+  onCaret?: (caret: ConsoleCaret) => void;
+  onReady?: (handle: Handle) => void;
+  /**
+   * Runs after the editor's own mount wiring, with the live editor and the monaco module — the
+   * escape hatch for host-specific concerns (focus shields, extra actions).
+   */
+  onMount?: (instance: editor.IStandaloneCodeEditor, monaco: MonacoModule) => void;
+  /**
+   * Extra construction options, merged under the editor's own (`ariaLabel`): the escape hatch a
+   * host reaches for a construction option no prop names — `overflowWidgetsDomNode`, where the
+   * page's own layers would otherwise stand over the editor's floating widgets (hover,
+   * completion, parameter hints) left inside it. Merged on its identity, so keep it stable: a
+   * new object is applied to the live editor again.
+   */
+  options?: editor.IStandaloneEditorConstructionOptions;
+}
+/**
+ * What a console editor hands its language as the editor mounts.
+ */
+interface ConsoleRegistration<Context> {
+  monaco: MonacoModule;
+  editor: editor.IStandaloneCodeEditor;
+  /**
+   * The model's path: what a registration that answers for one model compares a request's
+   * model against.
+   */
+  path: string;
+  /**
+   * The `context` prop as the latest committed render passed it. A registration happens once,
+   * at mount, so whatever it reaches that can change — an assist, a wording — is read through
+   * this at the moment it is needed and never captured: a completion after a connection switch
+   * can never answer from the connection a previous render was bound to.
+   */
+  context: () => Context;
+}
+interface MonacoConsoleEditorProps<Context> extends ConsoleEditorProps {
+  /**
+   * The Monaco language id the model is registered under.
+   */
+  language: string;
+  /**
+   * The name everything this editor puts into Monaco goes under: its model's directory
+   * (`file:///<namespace>/<n>.<extension>`), its run action (`<namespace>.run`), the source of
+   * its inserts (`<namespace>-insert`) and the runnable mark's default class
+   * (`<namespace>-runnable`).
+   */
+  namespace: string;
+  /**
+   * The extension the model's path ends in.
+   */
+  extension: string;
+  /**
+   * Whatever the language's registrations read that can change between renders, handed to
+   * `register` as a getter (`ConsoleRegistration.context`) — `undefined` where they read
+   * nothing.
+   */
+  context: Context;
+  /**
+   * Runs before the editor is created, after inkstone's own pre-mount setup: where a language
+   * defines its grammar.
+   */
+  beforeMount?: (monaco: MonacoModule) => void;
+  /**
+   * What the language registers for this editor — providers, markers, keybindings — once, as it
+   * mounts. The disposables go with the editor: Monaco's registry outlives it, and a provider
+   * left behind would answer for a model that no longer exists.
+   */
+  register?: (registration: ConsoleRegistration<Context>) => IDisposable[];
+  /**
+   * The label the run action shows in Monaco's own chrome (command palette, context menu).
+   *
+   * @default "Run"
+   */
+  runActionLabel?: string;
+  /**
+   * The span to mark as the one a run would send. Null leaves the gutter clean, which is the
+   * right answer while there is nothing to choose between.
+   */
+  highlight?: {
+    from: number;
+    to: number;
+  } | null;
+  /**
+   * The class the mark's line decoration carries. The host owns its stylesheet — a left-margin
+   * bar reads well, because it says which span without touching a single colour the syntax
+   * already assigned.
+   *
+   * @default `${namespace}-runnable`
+   */
+  highlightClassName?: string;
+}
+/**
+ * A console's editing surface: Monaco under the caller's language, the run key handing the live
+ * caret over, the caret reported as it moves, a handle that inserts at the caret and focuses, an
+ * optional mark on the span a run would send, and the language's own registrations made once as
+ * the editor mounts and disposed with it. The language editors of `@coldsmirk/inkstone-sql`,
+ * `-redis`, `-mongodb` and `-elasticsearch` are this component and their language's wiring.
+ *
+ * The editor draws no chrome of its own: it is a band of its host's surface, and the separation
+ * is the host's hairline rules — a border here would dress a pane up as a form input.
+ */
+declare function MonacoConsoleEditor<Context>({ value, onChange, dark, height, fontSize, locale, placeholder, ariaLabel, loading, failure, onRun, runActionLabel, onCaret, onReady, onMount, options, language, namespace, extension, context, beforeMount, register, highlight, highlightClassName }: MonacoConsoleEditorProps<Context>): ReactNode;
+//#endregion
 //#region src/monaco-diff-editor.d.ts
 interface MonacoDiffEditorProps {
   /**
@@ -63,7 +247,7 @@ interface MonacoDiffEditorProps {
   collapseUnchanged?: boolean;
   /**
    * Soft-wrap long lines on both sides (Monaco `wordWrap`; the diff editor's own
-   * `diffWordWrap` inherits it).
+   * `diffWordWrap` inherits it), each wrapped line ending in Monaco's ↩ (`wordWrapIndicator`).
    *
    * @default false
    */
@@ -175,7 +359,8 @@ interface MonacoEditorProps {
    */
   placeholder?: string;
   /**
-   * Soft-wrap long lines (Monaco `wordWrap`).
+   * Soft-wrap long lines (Monaco `wordWrap`), each wrapped line ending in Monaco's ↩
+   * (`wordWrapIndicator`), so a soft wrap reads apart from a real line break.
    *
    * @default false
    */
@@ -303,4 +488,4 @@ interface MonacoEditorProps {
  */
 declare function MonacoEditor({ value, onChange, language, dark, locale, placeholder, lineWrapping, showLineNumbers, folding, disableContextMenu, disableFind, disableCommandPalette, fontSize, lineHeight, tabSize, path, height, width, className, options, hostOptions, loading, failure, beforeMount, onMount, onFocus, onBlur }: MonacoEditorProps): ReactNode;
 //#endregion
-export { MonacoEditorProps as a, MonacoEditor as i, MonacoLanguage$1 as n, MonacoDiffEditor as o, monacoLanguages as r, MonacoDiffEditorProps as s, DEFAULT_MONACO_OPTIONS$1 as t };
+export { MonacoEditorProps as a, ConsoleCaret as c, ConsoleRegistration as d, MonacoConsoleEditor as f, MonacoEditor as i, ConsoleEditorHandle as l, MonacoLanguage$1 as n, MonacoDiffEditor as o, MonacoConsoleEditorProps as p, monacoLanguages as r, MonacoDiffEditorProps as s, DEFAULT_MONACO_OPTIONS$1 as t, ConsoleEditorProps as u };

package/dist/monaco.d.ts

@@ -1,2 +1,2 @@
-import { a as MonacoEditorProps, i as MonacoEditor, n as MonacoLanguage, o as MonacoDiffEditor, r as monacoLanguages, s as MonacoDiffEditorProps, t as DEFAULT_MONACO_OPTIONS } from "./monaco-OhCg_705.js";
-export { DEFAULT_MONACO_OPTIONS, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, monacoLanguages };
+import { a as MonacoEditorProps, c as ConsoleCaret, d as ConsoleRegistration, f as MonacoConsoleEditor, i as MonacoEditor, l as ConsoleEditorHandle, n as MonacoLanguage, o as MonacoDiffEditor, p as MonacoConsoleEditorProps, r as monacoLanguages, s as MonacoDiffEditorProps, t as DEFAULT_MONACO_OPTIONS, u as ConsoleEditorProps } from "./monaco-DTLlEEfk.js";
+export { type ConsoleCaret, type ConsoleEditorHandle, type ConsoleEditorProps, type ConsoleRegistration, DEFAULT_MONACO_OPTIONS, MonacoConsoleEditor, type MonacoConsoleEditorProps, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, monacoLanguages };

package/dist/monaco.js

@@ -1,2 +1 @@
-import { i as MonacoDiffEditor, n as monacoLanguages, r as MonacoEditor, t as DEFAULT_MONACO_OPTIONS } from "./monaco-FFb6p4ut.js";
-export { DEFAULT_MONACO_OPTIONS, MonacoDiffEditor, MonacoEditor, monacoLanguages };
+export { t as DEFAULT_MONACO_OPTIONS, i as MonacoConsoleEditor, r as MonacoDiffEditor, a as MonacoEditor, n as monacoLanguages } from "./monaco-CHi4aRfZ.js";

package/dist/shiki.js

@@ -1,2 +1 @@
-import { t as useShikiHighlighter } from "./use-shiki-highlighter-CzSQcX2f.js";
-export { useShikiHighlighter };
+export { t as useShikiHighlighter } from "./use-shiki-highlighter-CzSQcX2f.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-react",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "Drop-in React code editors: a preconfigured Monaco <MonacoEditor> (offline workers, Shiki catppuccin themes, dark switching, opt-in zh-CN UI) and a controlled CodeMirror 6 <CodeMirrorEditor> (catppuccin themes, dark switching, sizing).",
   "keywords": [
     "react",
@@ -48,20 +48,20 @@
   ],
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@coldsmirk/inkstone-core": "^0.30.0",
-    "@coldsmirk/inkstone-monaco": "^0.30.0",
-    "@coldsmirk/inkstone-codemirror": "^0.30.0"
+    "@coldsmirk/inkstone-codemirror": "^0.32.0",
+    "@coldsmirk/inkstone-core": "^0.32.0",
+    "@coldsmirk/inkstone-monaco": "^0.32.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.10.4",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/search": "^6.6.0",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.43.0",
-    "monaco-editor": "^0.56.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.14",
+    "monaco-editor": "^0.57.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "peerDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -70,7 +70,7 @@
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.0",
-    "monaco-editor": "^0.56.0",
+    "monaco-editor": "^0.57.0",
     "react": ">=19"
   },
   "peerDependenciesMeta": {