@coldsmirk/inkstone-react 0.8.3 → 0.9.0

package/README.md

@@ -50,7 +50,7 @@ import { CodeMirrorEditor } from "@coldsmirk/inkstone-react";
 />;
 ```
 
-A controlled CM6 editor: create-once view, external value changes reconcile without resetting cursor/undo, catppuccin latte/macchiato flipped by `dark`, and restyled chrome (completion tooltip with a currentColor SVG icon set, themed scrollbars, real search-panel metrics).
+A controlled CM6 editor: create-once view, external value changes reconcile without resetting cursor/undo, catppuccin latte/macchiato flipped by `dark`, and restyled chrome (completion tooltip with a currentColor SVG icon set, hover / lint tooltips on the same frame with severity bars in flavor colors, themed scrollbars, real search-panel metrics).
 
 - **`language`** lazily imports the matching grammar as its own chunk — the official Lezer parsers plus the `@codemirror/legacy-modes` catalog (`shell`, `dockerfile`, `ini` / `env`, `toml`, `nginx`, …). Includes the MiniJinja family — `minijinja` standalone or `minijinja-<host>` mixed variants (`minijinja-yaml`, `-json`, `-html`, `-sql`, `-shell`, `-dockerfile`, …).
 - **`context`** — pass `{ schema }` (JSON Schema) or `{ sample }` (representative value) and MiniJinja completion suggests the render context's variables with member access. Memoize/hoist it — a fresh identity each render re-normalizes.
@@ -58,7 +58,7 @@ A controlled CM6 editor: create-once view, external value changes reconcile with
 - **Metrics & layout** — `fontSize` 14 and `lineHeight` 1.6 by default; `height` / `width` size the editor; `lineWrapping`, `showLineNumbers`, `folding` are opt-in.
 - **Extensions** — `extensions` is create-once; `dynamicExtensions` reconfigures live. The catppuccin theme sits at low precedence, so a caller theme in `dynamicExtensions` overrides it.
 
-`useShikiHighlighter` and the `codeMirrorLanguages` / `normalizeContext` / `searchPhrasesZhCn` helpers are re-exported for hosts that build custom surfaces next to the components.
+`useShikiHighlighter` and the `codeMirrorLanguages` / `monacoLanguages` / `normalizeContext` / `searchPhrasesZhCn` helpers are re-exported for hosts that build custom surfaces next to the components.
 
 ## License
 

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { EditorView } from "@codemirror/view";
 import { CodeMirrorLanguage, CodeMirrorLanguage as CodeMirrorLanguage$1, EditorContext, EditorContext as EditorContext$1, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn } from "@coldsmirk/inkstone-codemirror";
 import { ReactNode, RefObject } from "react";
 import { HighlighterCore } from "@coldsmirk/inkstone-core";
-import { MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale } from "@coldsmirk/inkstone-monaco";
+import { MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale, monacoLanguages } from "@coldsmirk/inkstone-monaco";
 import { BeforeMount, OnMount } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
 
@@ -268,8 +268,9 @@ interface MonacoEditorProps {
   disableContextMenu?: boolean;
   /**
    * Swallow the find/replace widget's keyboard entries — Ctrl/Cmd+F (find), Ctrl+H and
-   * Cmd+Alt+F (replace). Scoped to this editor via a context key: the standalone keybinding
-   * service is page-global, so an unscoped rule would rewire every editor on the page.
+   * Cmd+Alt+F (replace). Scoped to this editor via its own context key: the standalone keybinding
+   * service is page-global, so an unscoped rule would rewire every editor on the page, and
+   * {@link disableCommandPalette} is gated separately so enabling one never implies the other.
    * Fixed at creation.
    *
    * @default false
@@ -286,7 +287,9 @@ interface MonacoEditorProps {
   disableCommandPalette?: boolean;
   /**
    * Model path — give each logically distinct document its own so view state (cursor,
-   * folds) survives remounts.
+   * folds) survives remounts, and so a document switch never routes the outgoing model's
+   * text into the new document's `onChange` (changes from a model this prop no longer
+   * names are dropped).
    */
   path?: string;
   height?: string | number;
@@ -387,4 +390,4 @@ declare function useShikiHighlighter(): {
   highlighterRef: RefObject<HighlighterCore | null>;
 };
 //#endregion
-export { CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, DEFAULT_MONACO_OPTIONS, type EditorContext, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, type ShikiState, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };
+export { CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, DEFAULT_MONACO_OPTIONS, type EditorContext, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, type ShikiState, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };

package/dist/index.js

@@ -4,12 +4,21 @@ import { indentUnit } from "@codemirror/language";
 import { EditorState, Prec } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { ControlledEditorHost, codeMirrorLanguages, documentExtensions, loadLanguage, normalizeContext, normalizeContext as normalizeContext$1, searchPhrasesZhCn, searchPhrasesZhCn as searchPhrasesZhCn$1, setMinijinjaContext } from "@coldsmirk/inkstone-codemirror";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { getHighlighter, shikiThemeId } from "@coldsmirk/inkstone-core";
-import { ensureMonacoHost } from "@coldsmirk/inkstone-monaco";
+import { disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, monacoLanguages } from "@coldsmirk/inkstone-monaco";
 import { Editor, loader } from "@monaco-editor/react";
 import { shikiToMonaco } from "@shikijs/monaco";
+//#region src/use-latest.ts
+function useLatest(value) {
+	const ref = useRef(value);
+	useInsertionEffect(() => {
+		ref.current = value;
+	});
+	return ref;
+}
+//#endregion
 //#region src/codemirror-editor.tsx
 function toCssSize(value) {
 	if (value === void 0) return;
@@ -55,6 +64,7 @@ function chromeTheme(dark) {
 	};
 	return EditorView.theme({
 		"&": { colorScheme: dark ? "dark" : "light" },
+		".cm-tooltip": frame,
 		".cm-tooltip.cm-tooltip-autocomplete": {
 			...frame,
 			"& > ul": {
@@ -122,6 +132,29 @@ function chromeTheme(dark) {
 			padding: "8px 10px",
 			maxWidth: "26em"
 		},
+		".cm-tooltip-lint": { padding: "4px" },
+		".cm-diagnostic": {
+			margin: "0",
+			padding: "3px 8px",
+			borderLeftWidth: "3px",
+			borderRadius: "5px",
+			lineHeight: "1.45"
+		},
+		".cm-diagnostic-error": { borderLeftColor: colors.red.hex },
+		".cm-diagnostic-warning": { borderLeftColor: colors.yellow.hex },
+		".cm-diagnostic-info": { borderLeftColor: colors.overlay1.hex },
+		".cm-diagnostic-hint": { borderLeftColor: colors.blue.hex },
+		".cm-diagnosticAction": {
+			padding: "2px 6px",
+			backgroundColor: colors.surface1.hex,
+			color: colors.text.hex,
+			borderRadius: "4px"
+		},
+		".cm-diagnosticSource": {
+			fontSize: "85%",
+			color: colors.overlay1.hex,
+			opacity: "1"
+		},
 		"&.cm-focused": { outline: "none" },
 		".cm-activeLine": { backgroundColor: alphaOf(colors.overlay0, .12) },
 		".cm-activeLineGutter": { backgroundColor: alphaOf(colors.overlay0, .12) },
@@ -248,14 +281,11 @@ function defaultThemeExtensions(dark, height, width, fontSize, lineHeight) {
 function CodeMirrorEditor({ value, onChange, language, context, placeholder, lineWrapping = false, showLineNumbers = false, folding = false, spellcheck = false, search = false, extensions, dynamicExtensions, dark = false, locale = "en", height, width, fontSize = 14, lineHeight = 1.6, tabSize, className, onMount, onFocus, onBlur }) {
 	const containerRef = useRef(null);
 	const hostRef = useRef(null);
-	const onChangeRef = useRef(onChange);
-	onChangeRef.current = onChange;
-	const onMountRef = useRef(onMount);
-	onMountRef.current = onMount;
-	const onFocusRef = useRef(onFocus);
-	onFocusRef.current = onFocus;
-	const onBlurRef = useRef(onBlur);
-	onBlurRef.current = onBlur;
+	const valueTransitionRef = useRef(false);
+	const onChangeRef = useLatest(onChange);
+	const onMountRef = useLatest(onMount);
+	const onFocusRef = useLatest(onFocus);
+	const onBlurRef = useLatest(onBlur);
 	const lastContextRef = useRef(null);
 	const [languageExtension, setLanguageExtension] = useState([]);
 	useEffect(() => {
@@ -268,6 +298,7 @@ function CodeMirrorEditor({ value, onChange, language, context, placeholder, lin
 			if (!cancelled) setLanguageExtension([extension]);
 		}).catch((error) => {
 			console.error("inkstone: failed to load CodeMirror language", language, error);
+			if (!cancelled) setLanguageExtension([]);
 		});
 		return () => {
 			cancelled = true;
@@ -297,7 +328,9 @@ function CodeMirrorEditor({ value, onChange, language, context, placeholder, lin
 		const host = new ControlledEditorHost({
 			parent: container,
 			doc: value,
-			onChange: (next) => onChangeRef.current?.(next),
+			onChange: (next) => {
+				if (!valueTransitionRef.current) onChangeRef.current?.(next);
+			},
 			extensions: [
 				...documentExtensions({
 					placeholder,
@@ -322,8 +355,16 @@ function CodeMirrorEditor({ value, onChange, language, context, placeholder, lin
 			hostRef.current = null;
 		};
 	}, []);
-	useEffect(() => {
-		hostRef.current?.setValue(value);
+	useInsertionEffect(() => {
+		const host = hostRef.current;
+		valueTransitionRef.current = host !== null && host.view.state.doc.toString() !== value;
+	}, [value]);
+	useLayoutEffect(() => {
+		try {
+			hostRef.current?.setValue(value);
+		} finally {
+			valueTransitionRef.current = false;
+		}
 	}, [value]);
 	useEffect(() => {
 		hostRef.current?.reconfigure(dynamic);
@@ -419,15 +460,6 @@ function configureLoader(monaco) {
 	loaderConfigured = true;
 	loader.config({ monaco });
 }
-const DISABLED_KEYBINDINGS_CONTEXT_KEY = "inkstoneKeybindingsDisabled";
-function disabledKeybindings(monaco, disableFind, disableCommandPalette) {
-	const { KeyCode, KeyMod } = monaco;
-	return [...disableFind ? [
-		KeyMod.CtrlCmd | KeyCode.KeyF,
-		KeyMod.CtrlCmd | KeyCode.KeyH,
-		KeyMod.CtrlCmd | KeyMod.Alt | KeyCode.KeyF
-	] : [], ...disableCommandPalette ? [KeyCode.F1] : []];
-}
 let shikiRegistered = false;
 function registerShikiHighlighting(monaco, highlighter) {
 	if (shikiRegistered) return;
@@ -442,14 +474,50 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 	const { state: shikiState, highlighterRef } = useShikiHighlighter();
 	const hostOptionsRef = useRef(hostOptions);
 	const localeRef = useRef(locale);
-	const beforeMountRef = useRef(beforeMount);
-	beforeMountRef.current = beforeMount;
-	const onMountRef = useRef(onMount);
-	onMountRef.current = onMount;
-	const onFocusRef = useRef(onFocus);
-	onFocusRef.current = onFocus;
-	const onBlurRef = useRef(onBlur);
-	onBlurRef.current = onBlur;
+	const beforeMountRef = useLatest(beforeMount);
+	const onMountRef = useLatest(onMount);
+	const onFocusRef = useLatest(onFocus);
+	const onBlurRef = useLatest(onBlur);
+	const onChangeRef = useLatest(onChange);
+	const appliedPathRef = useRef(path);
+	const pathChangingRef = useRef(false);
+	useInsertionEffect(() => {
+		pathChangingRef.current = path !== appliedPathRef.current;
+	}, [path]);
+	useEffect(() => {
+		appliedPathRef.current = path;
+		pathChangingRef.current = false;
+	}, [path]);
+	const handleChange = useCallback((next) => {
+		if (pathChangingRef.current) return;
+		onChangeRef.current?.(next ?? "");
+	}, [onChangeRef]);
+	const mergedOptions = useMemo(() => {
+		return {
+			...DEFAULT_MONACO_OPTIONS,
+			...documentOptions({
+				placeholder,
+				lineWrapping,
+				showLineNumbers,
+				folding,
+				disableContextMenu,
+				fontSize,
+				lineHeight,
+				tabSize
+			}),
+			...options
+		};
+	}, [
+		placeholder,
+		lineWrapping,
+		showLineNumbers,
+		folding,
+		disableContextMenu,
+		fontSize,
+		lineHeight,
+		tabSize,
+		options
+	]);
 	useEffect(() => {
 		let cancelled = false;
 		ensureMonacoHost({
@@ -474,11 +542,7 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 		beforeMountRef.current?.(monaco);
 	};
 	const handleMount = (editorInstance, monaco) => {
-		const swallowed = disabledKeybindings(monaco, disableFind, disableCommandPalette);
-		if (swallowed.length > 0) {
-			editorInstance.createContextKey(DISABLED_KEYBINDINGS_CONTEXT_KEY, true);
-			for (const keybinding of swallowed) editorInstance.addCommand(keybinding, () => void 0, DISABLED_KEYBINDINGS_CONTEXT_KEY);
-		}
+		installDisabledKeybindings(monaco, editorInstance, disabledKeybindings(monaco, disableFind, disableCommandPalette));
 		editorInstance.onDidFocusEditorText(() => onFocusRef.current?.());
 		editorInstance.onDidBlurEditorText(() => onBlurRef.current?.());
 		onMountRef.current?.(editorInstance, monaco);
@@ -489,27 +553,14 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 		height,
 		language,
 		loading,
+		options: mergedOptions,
 		path,
 		theme: shikiState === "ready" ? shikiThemeId(dark) : dark ? "vs-dark" : "vs",
 		value,
 		width,
-		options: {
-			...DEFAULT_MONACO_OPTIONS,
-			...documentOptions({
-				placeholder,
-				lineWrapping,
-				showLineNumbers,
-				folding,
-				disableContextMenu,
-				fontSize,
-				lineHeight,
-				tabSize
-			}),
-			...options
-		},
-		onChange: (next) => onChange?.(next ?? ""),
+		onChange: handleChange,
 		onMount: handleMount
 	});
 }
 //#endregion
-export { CodeMirrorEditor, DEFAULT_MONACO_OPTIONS, MonacoEditor, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };
+export { CodeMirrorEditor, DEFAULT_MONACO_OPTIONS, MonacoEditor, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-react",
-  "version": "0.8.3",
+  "version": "0.9.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",
@@ -25,19 +25,11 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
@@ -47,9 +39,9 @@
     "@catppuccin/palette": "^1.8.0",
     "@monaco-editor/react": "^4.7.0",
     "@shikijs/monaco": "^4.3.1",
-    "@coldsmirk/inkstone-codemirror": "^0.8.3",
-    "@coldsmirk/inkstone-core": "^0.8.3",
-    "@coldsmirk/inkstone-monaco": "^0.8.3"
+    "@coldsmirk/inkstone-codemirror": "^0.9.0",
+    "@coldsmirk/inkstone-core": "^0.9.0",
+    "@coldsmirk/inkstone-monaco": "^0.9.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -73,7 +65,7 @@
     "react": ">=19"
   },
   "engines": {
-    "node": ">=22"
+    "node": ">=24"
   },
   "publishConfig": {
     "access": "public"

package/dist/index.cjs

@@ -1,537 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let _catppuccin_codemirror = require("@catppuccin/codemirror");
-let _catppuccin_palette = require("@catppuccin/palette");
-let _codemirror_language = require("@codemirror/language");
-let _codemirror_state = require("@codemirror/state");
-let _codemirror_view = require("@codemirror/view");
-let _coldsmirk_inkstone_codemirror = require("@coldsmirk/inkstone-codemirror");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _coldsmirk_inkstone_core = require("@coldsmirk/inkstone-core");
-let _coldsmirk_inkstone_monaco = require("@coldsmirk/inkstone-monaco");
-let _monaco_editor_react = require("@monaco-editor/react");
-let _shikijs_monaco = require("@shikijs/monaco");
-//#region src/codemirror-editor.tsx
-function toCssSize(value) {
-	if (value === void 0) return;
-	return typeof value === "number" ? `${value}px` : value;
-}
-function alphaOf(color, alphaValue) {
-	return `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${alphaValue})`;
-}
-function completionIconMask(body) {
-	const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
-	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
-}
-const COMPLETION_ICON_FALLBACK = completionIconMask("<circle cx=\"8\" cy=\"8\" r=\"2.5\"/>");
-const COMPLETION_ICONS = {
-	keyword: completionIconMask("<path d=\"M5.5 5 2.5 8l3 3\"/><path d=\"m10.5 5 3 3-3 3\"/>"),
-	function: completionIconMask("<path d=\"M10.8 3.4c-2-.4-2.9.7-3.2 2.5L6.4 12c-.3 1.7-1.2 2.2-2.6 1.8\"/><path d=\"M4.6 7.5h5\"/>"),
-	method: completionIconMask("<path d=\"M10.8 3.4c-2-.4-2.9.7-3.2 2.5L6.4 12c-.3 1.7-1.2 2.2-2.6 1.8\"/><path d=\"M4.6 7.5h5\"/>"),
-	variable: completionIconMask("<path d=\"M4 5c2.2 0 5.3 6 8 6\"/><path d=\"M12 5c-2.7 0-5.8 6-8 6\"/>"),
-	constant: completionIconMask("<path d=\"M3.5 5.2h9\"/><path d=\"M6.2 5.2v6.3\"/><path d=\"M10.2 5.2v4.4c0 1.3.6 1.9 1.7 1.9\"/>"),
-	property: completionIconMask("<circle cx=\"4.9\" cy=\"11.1\" r=\"1.8\"/><circle cx=\"11.1\" cy=\"4.9\" r=\"1.8\"/><path d=\"M6.4 9.6l3.2-3.2\"/>"),
-	class: completionIconMask("<rect x=\"3.5\" y=\"3.5\" width=\"9\" height=\"9\" rx=\"2.2\"/>"),
-	interface: completionIconMask("<circle cx=\"8\" cy=\"8\" r=\"4.5\"/>"),
-	type: completionIconMask("<path d=\"M4 4.5h8\"/><path d=\"M8 4.5V12\"/>"),
-	enum: completionIconMask("<path d=\"M6.5 4.5h6\"/><path d=\"M6.5 8h6\"/><path d=\"M6.5 11.5h6\"/><path d=\"M3.4 4.5h.01\"/><path d=\"M3.4 8h.01\"/><path d=\"M3.4 11.5h.01\"/>"),
-	namespace: completionIconMask("<path d=\"M6.2 3.5c-1.3 0-1.9.6-1.9 1.9v1.2c0 .9-.4 1.4-1.3 1.4.9 0 1.3.5 1.3 1.4v1.2c0 1.3.6 1.9 1.9 1.9\"/><path d=\"M9.8 3.5c1.3 0 1.9.6 1.9 1.9v1.2c0 .9.4 1.4 1.3 1.4-.9 0-1.3.5-1.3 1.4v1.2c0 1.3-.6 1.9-1.9 1.9\"/>"),
-	text: completionIconMask("<path d=\"M3.5 5h9\"/><path d=\"M3.5 8h9\"/><path d=\"M3.5 11h5.5\"/>")
-};
-function completionIconRules() {
-	const rules = {};
-	for (const [kind, mask] of Object.entries(COMPLETION_ICONS)) rules[`.cm-completionIcon-${kind}:after`] = {
-		maskImage: mask,
-		WebkitMaskImage: mask
-	};
-	return rules;
-}
-function chromeTheme(dark) {
-	const { colors } = dark ? _catppuccin_palette.flavors.macchiato : _catppuccin_palette.flavors.latte;
-	const hairline = `1px solid ${alphaOf(colors.overlay0, .35)}`;
-	const frame = {
-		border: hairline,
-		borderRadius: "8px",
-		boxShadow: dark ? "0 8px 24px rgba(0, 0, 0, 0.5)" : "0 8px 24px rgba(0, 0, 0, 0.12)"
-	};
-	return _codemirror_view.EditorView.theme({
-		"&": { colorScheme: dark ? "dark" : "light" },
-		".cm-tooltip.cm-tooltip-autocomplete": {
-			...frame,
-			"& > ul": {
-				borderRadius: "7px",
-				padding: "4px",
-				maxHeight: "16em"
-			},
-			"& > ul > li": {
-				display: "flex",
-				alignItems: "center",
-				padding: "3px 8px",
-				borderRadius: "5px",
-				lineHeight: "1.45"
-			}
-		},
-		".cm-completionLabel": {
-			minWidth: "0",
-			overflow: "hidden",
-			textOverflow: "ellipsis"
-		},
-		".cm-completionMatchedText": {
-			textDecoration: "none",
-			fontWeight: "600",
-			color: colors.blue.hex
-		},
-		".cm-completionDetail": {
-			marginLeft: "auto",
-			paddingLeft: "12px",
-			fontStyle: "normal",
-			fontSize: "85%",
-			color: colors.overlay1.hex
-		},
-		".cm-completionIcon": {
-			width: "14px",
-			paddingRight: "8px",
-			opacity: "1",
-			color: colors.overlay1.hex
-		},
-		".cm-completionIcon:after": {
-			content: "''",
-			display: "block",
-			width: "12px",
-			height: "12px",
-			backgroundColor: "currentColor",
-			maskImage: COMPLETION_ICON_FALLBACK,
-			WebkitMaskImage: COMPLETION_ICON_FALLBACK,
-			maskRepeat: "no-repeat",
-			WebkitMaskRepeat: "no-repeat",
-			maskPosition: "center",
-			WebkitMaskPosition: "center",
-			maskSize: "contain",
-			WebkitMaskSize: "contain"
-		},
-		...completionIconRules(),
-		".cm-completionIcon-keyword": { color: colors.mauve.hex },
-		".cm-completionIcon-function, .cm-completionIcon-method": { color: colors.blue.hex },
-		".cm-completionIcon-variable": { color: colors.peach.hex },
-		".cm-completionIcon-constant": { color: colors.sky.hex },
-		".cm-completionIcon-property": { color: colors.teal.hex },
-		".cm-completionIcon-namespace": { color: colors.sapphire.hex },
-		".cm-completionIcon-text": { color: colors.overlay1.hex },
-		".cm-completionIcon-class, .cm-completionIcon-type, .cm-completionIcon-interface, .cm-completionIcon-enum": { color: colors.yellow.hex },
-		".cm-tooltip.cm-completionInfo": {
-			...frame,
-			padding: "8px 10px",
-			maxWidth: "26em"
-		},
-		"&.cm-focused": { outline: "none" },
-		".cm-activeLine": { backgroundColor: alphaOf(colors.overlay0, .12) },
-		".cm-activeLineGutter": { backgroundColor: alphaOf(colors.overlay0, .12) },
-		"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": { backgroundColor: alphaOf(colors.blue, dark ? .35 : .25) },
-		".cm-selectionBackground": { backgroundColor: alphaOf(colors.blue, dark ? .2 : .14) },
-		".cm-content ::selection": { backgroundColor: alphaOf(colors.blue, dark ? .35 : .25) },
-		".cm-scroller, .cm-tooltip-autocomplete > ul, .cm-tooltip.cm-completionInfo": {
-			scrollbarWidth: "thin",
-			scrollbarColor: `${alphaOf(colors.overlay0, .55)} transparent`
-		},
-		".cm-panels.cm-panels-top": { borderBottom: hairline },
-		".cm-panels.cm-panels-bottom": { borderTop: hairline },
-		".cm-panel.cm-search, .cm-panel.cm-gotoLine": {
-			position: "relative",
-			display: "flex",
-			flexWrap: "wrap",
-			alignItems: "center",
-			columnGap: "8px",
-			rowGap: "8px",
-			margin: "0",
-			padding: "10px 44px 10px 14px"
-		},
-		".cm-panel.cm-search br": {
-			flexBasis: "100%",
-			height: "0",
-			margin: "0",
-			border: "none"
-		},
-		".cm-panel.cm-search label, .cm-panel.cm-gotoLine label": {
-			display: "inline-flex",
-			alignItems: "center",
-			gap: "6px",
-			margin: "0",
-			fontSize: "12.5px",
-			color: colors.subtext0.hex,
-			cursor: "pointer",
-			userSelect: "none"
-		},
-		".cm-panel.cm-search input[type=checkbox]": {
-			margin: "0",
-			width: "14px",
-			height: "14px",
-			accentColor: colors.blue.hex
-		},
-		".cm-panel.cm-search button[name=close]": {
-			position: "absolute",
-			top: "10px",
-			right: "10px",
-			boxSizing: "border-box",
-			width: "28px",
-			height: "28px",
-			padding: "0",
-			display: "inline-flex",
-			alignItems: "center",
-			justifyContent: "center",
-			fontSize: "16px",
-			lineHeight: "1",
-			color: colors.overlay1.hex,
-			background: "transparent",
-			border: "none",
-			borderRadius: "6px",
-			cursor: "pointer"
-		},
-		".cm-panel.cm-search button[name=close]:hover": {
-			backgroundColor: colors.surface0.hex,
-			color: colors.text.hex
-		},
-		".cm-panel .cm-textfield": {
-			boxSizing: "border-box",
-			height: "28px",
-			width: "240px",
-			maxWidth: "100%",
-			margin: "0",
-			padding: "0 10px",
-			fontSize: "12.5px",
-			color: colors.text.hex,
-			backgroundColor: colors.base.hex,
-			border: hairline,
-			borderRadius: "6px"
-		},
-		".cm-panel .cm-textfield:focus": {
-			outline: "none",
-			borderColor: alphaOf(colors.blue, .6),
-			boxShadow: `0 0 0 2px ${alphaOf(colors.blue, .2)}`
-		},
-		".cm-panel .cm-button": {
-			boxSizing: "border-box",
-			height: "28px",
-			margin: "0",
-			padding: "0 12px",
-			fontSize: "12.5px",
-			color: colors.text.hex,
-			backgroundImage: "none",
-			backgroundColor: colors.surface0.hex,
-			border: hairline,
-			borderRadius: "6px",
-			cursor: "pointer"
-		},
-		".cm-panel .cm-button:hover": { backgroundColor: colors.surface1.hex },
-		".cm-panel .cm-button:active": {
-			backgroundImage: "none",
-			backgroundColor: colors.surface1.hex
-		}
-	}, { dark });
-}
-function defaultThemeExtensions(dark, height, width, fontSize, lineHeight) {
-	const extensions = [_codemirror_state.Prec.low(chromeTheme(dark)), _codemirror_state.Prec.low(dark ? _catppuccin_codemirror.catppuccinMacchiato : _catppuccin_codemirror.catppuccinLatte)];
-	const cssHeight = toCssSize(height);
-	const cssWidth = toCssSize(width);
-	if (cssHeight !== void 0 || cssWidth !== void 0 || fontSize !== void 0 || lineHeight !== void 0) {
-		const root = {};
-		if (cssHeight !== void 0) root.height = cssHeight;
-		if (cssWidth !== void 0) root.width = cssWidth;
-		if (fontSize !== void 0) root.fontSize = `${fontSize}px`;
-		const spec = { "&": root };
-		const scroller = {};
-		if (cssHeight !== void 0) scroller.overflow = "auto";
-		if (lineHeight !== void 0) scroller.lineHeight = lineHeight < 8 ? String(lineHeight) : `${lineHeight}px`;
-		if (Object.keys(scroller).length > 0) spec[".cm-scroller"] = scroller;
-		extensions.push(_codemirror_view.EditorView.theme(spec));
-	}
-	return extensions;
-}
-function CodeMirrorEditor({ value, onChange, language, context, placeholder, lineWrapping = false, showLineNumbers = false, folding = false, spellcheck = false, search = false, extensions, dynamicExtensions, dark = false, locale = "en", height, width, fontSize = 14, lineHeight = 1.6, tabSize, className, onMount, onFocus, onBlur }) {
-	const containerRef = (0, react.useRef)(null);
-	const hostRef = (0, react.useRef)(null);
-	const onChangeRef = (0, react.useRef)(onChange);
-	onChangeRef.current = onChange;
-	const onMountRef = (0, react.useRef)(onMount);
-	onMountRef.current = onMount;
-	const onFocusRef = (0, react.useRef)(onFocus);
-	onFocusRef.current = onFocus;
-	const onBlurRef = (0, react.useRef)(onBlur);
-	onBlurRef.current = onBlur;
-	const lastContextRef = (0, react.useRef)(null);
-	const [languageExtension, setLanguageExtension] = (0, react.useState)([]);
-	(0, react.useEffect)(() => {
-		if (!language) {
-			setLanguageExtension([]);
-			return;
-		}
-		let cancelled = false;
-		(0, _coldsmirk_inkstone_codemirror.loadLanguage)(language).then((extension) => {
-			if (!cancelled) setLanguageExtension([extension]);
-		}).catch((error) => {
-			console.error("inkstone: failed to load CodeMirror language", language, error);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [language]);
-	const dynamic = (0, react.useMemo)(() => [
-		...defaultThemeExtensions(dark, height, width, fontSize, lineHeight),
-		...tabSize === void 0 ? [] : [_codemirror_state.EditorState.tabSize.of(tabSize), _codemirror_language.indentUnit.of(" ".repeat(tabSize))],
-		...locale === "zh-cn" ? [_coldsmirk_inkstone_codemirror.searchPhrasesZhCn] : [],
-		...languageExtension,
-		...dynamicExtensions ?? []
-	], [
-		dark,
-		height,
-		width,
-		fontSize,
-		lineHeight,
-		tabSize,
-		locale,
-		languageExtension,
-		dynamicExtensions
-	]);
-	const contextSchema = (0, react.useMemo)(() => context ? (0, _coldsmirk_inkstone_codemirror.normalizeContext)(context) : null, [context]);
-	(0, react.useEffect)(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		const host = new _coldsmirk_inkstone_codemirror.ControlledEditorHost({
-			parent: container,
-			doc: value,
-			onChange: (next) => onChangeRef.current?.(next),
-			extensions: [
-				...(0, _coldsmirk_inkstone_codemirror.documentExtensions)({
-					placeholder,
-					lineWrapping,
-					showLineNumbers,
-					folding,
-					spellcheck,
-					search
-				}),
-				_codemirror_view.EditorView.updateListener.of((update) => {
-					if (update.focusChanged) if (update.view.hasFocus) onFocusRef.current?.();
-					else onBlurRef.current?.();
-				}),
-				...extensions ?? []
-			],
-			dynamicExtensions: dynamic
-		});
-		hostRef.current = host;
-		onMountRef.current?.(host.view);
-		return () => {
-			host.destroy();
-			hostRef.current = null;
-		};
-	}, []);
-	(0, react.useEffect)(() => {
-		hostRef.current?.setValue(value);
-	}, [value]);
-	(0, react.useEffect)(() => {
-		hostRef.current?.reconfigure(dynamic);
-	}, [dynamic]);
-	(0, react.useEffect)(() => {
-		const host = hostRef.current;
-		if (!host) return;
-		const key = contextSchema ? JSON.stringify(contextSchema) : "";
-		const last = lastContextRef.current;
-		if (last && last.key === key && last.language === languageExtension) return;
-		lastContextRef.current = {
-			key,
-			language: languageExtension
-		};
-		if (key === "" && (!last || last.key === "")) return;
-		host.view.dispatch({ effects: _coldsmirk_inkstone_codemirror.setMinijinjaContext.of(contextSchema) });
-	}, [contextSchema, languageExtension]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: containerRef,
-		className
-	});
-}
-//#endregion
-//#region src/use-shiki-highlighter.ts
-function useShikiHighlighter() {
-	const [state, setState] = (0, react.useState)("loading");
-	const highlighterRef = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		let cancelled = false;
-		(0, _coldsmirk_inkstone_core.getHighlighter)().then((highlighter) => {
-			if (cancelled) return;
-			highlighterRef.current = highlighter;
-			setState("ready");
-		}).catch((error) => {
-			console.error("inkstone: shiki highlighter failed to load", error);
-			if (!cancelled) setState("failed");
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, []);
-	return {
-		state,
-		highlighterRef
-	};
-}
-//#endregion
-//#region src/monaco-editor.tsx
-const DEFAULT_MONACO_OPTIONS = {
-	find: { addExtraSpaceOnTop: false },
-	minimap: { enabled: false },
-	fontSize: 14,
-	lineHeight: 1.6,
-	fontFamily: "var(--inkstone-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)",
-	scrollBeyondLastLine: false,
-	automaticLayout: true,
-	renderLineHighlight: "line",
-	smoothScrolling: true,
-	padding: {
-		top: 12,
-		bottom: 12
-	},
-	fixedOverflowWidgets: true,
-	quickSuggestions: {
-		other: true,
-		comments: false,
-		strings: true
-	},
-	wordBasedSuggestions: "off",
-	tabCompletion: "on",
-	scrollbar: {
-		alwaysConsumeMouseWheel: false,
-		verticalScrollbarSize: 8,
-		horizontalScrollbarSize: 8
-	}
-};
-function documentOptions({ placeholder, lineWrapping, showLineNumbers, folding, disableContextMenu, fontSize, lineHeight, tabSize }) {
-	const resolved = {
-		placeholder,
-		wordWrap: lineWrapping ? "on" : "off",
-		lineNumbers: showLineNumbers ? "on" : "off",
-		folding,
-		contextmenu: !disableContextMenu
-	};
-	if (fontSize !== void 0) resolved.fontSize = fontSize;
-	if (lineHeight !== void 0) resolved.lineHeight = lineHeight;
-	if (tabSize !== void 0) resolved.tabSize = tabSize;
-	return resolved;
-}
-let loaderConfigured = false;
-function configureLoader(monaco) {
-	if (loaderConfigured) return;
-	loaderConfigured = true;
-	_monaco_editor_react.loader.config({ monaco });
-}
-const DISABLED_KEYBINDINGS_CONTEXT_KEY = "inkstoneKeybindingsDisabled";
-function disabledKeybindings(monaco, disableFind, disableCommandPalette) {
-	const { KeyCode, KeyMod } = monaco;
-	return [...disableFind ? [
-		KeyMod.CtrlCmd | KeyCode.KeyF,
-		KeyMod.CtrlCmd | KeyCode.KeyH,
-		KeyMod.CtrlCmd | KeyMod.Alt | KeyCode.KeyF
-	] : [], ...disableCommandPalette ? [KeyCode.F1] : []];
-}
-let shikiRegistered = false;
-function registerShikiHighlighting(monaco, highlighter) {
-	if (shikiRegistered) return;
-	shikiRegistered = true;
-	const canonical = new Set(highlighter.getLoadedLanguages().map((id) => highlighter.getLanguage(id).name));
-	const registered = new Set(monaco.languages.getLanguages().map((registeredLanguage) => registeredLanguage.id));
-	for (const lang of canonical) if (!registered.has(lang)) monaco.languages.register({ id: lang });
-	(0, _shikijs_monaco.shikiToMonaco)(highlighter, monaco);
-}
-function MonacoEditor({ value, onChange, language = "javascript", dark = false, locale, placeholder, lineWrapping = false, showLineNumbers = false, folding = false, disableContextMenu = false, disableFind = false, disableCommandPalette = false, fontSize, lineHeight, tabSize = 2, path, height = "100%", width, className, options, hostOptions, loading = "Loading editor…", failure = "Editor failed to load", beforeMount, onMount, onFocus, onBlur }) {
-	const [hostState, setHostState] = (0, react.useState)("loading");
-	const { state: shikiState, highlighterRef } = useShikiHighlighter();
-	const hostOptionsRef = (0, react.useRef)(hostOptions);
-	const localeRef = (0, react.useRef)(locale);
-	const beforeMountRef = (0, react.useRef)(beforeMount);
-	beforeMountRef.current = beforeMount;
-	const onMountRef = (0, react.useRef)(onMount);
-	onMountRef.current = onMount;
-	const onFocusRef = (0, react.useRef)(onFocus);
-	onFocusRef.current = onFocus;
-	const onBlurRef = (0, react.useRef)(onBlur);
-	onBlurRef.current = onBlur;
-	(0, react.useEffect)(() => {
-		let cancelled = false;
-		(0, _coldsmirk_inkstone_monaco.ensureMonacoHost)({
-			...hostOptionsRef.current,
-			locale: localeRef.current ?? hostOptionsRef.current?.locale
-		}).then((monaco) => {
-			configureLoader(monaco);
-			if (!cancelled) setHostState("ready");
-		}).catch((error) => {
-			console.error("inkstone: monaco host failed to load", error);
-			if (!cancelled) setHostState("failed");
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, []);
-	if (hostState === "failed") return failure;
-	if (hostState === "loading" || shikiState === "loading") return loading;
-	const handleBeforeMount = (monaco) => {
-		const highlighter = highlighterRef.current;
-		if (highlighter) registerShikiHighlighting(monaco, highlighter);
-		beforeMountRef.current?.(monaco);
-	};
-	const handleMount = (editorInstance, monaco) => {
-		const swallowed = disabledKeybindings(monaco, disableFind, disableCommandPalette);
-		if (swallowed.length > 0) {
-			editorInstance.createContextKey(DISABLED_KEYBINDINGS_CONTEXT_KEY, true);
-			for (const keybinding of swallowed) editorInstance.addCommand(keybinding, () => void 0, DISABLED_KEYBINDINGS_CONTEXT_KEY);
-		}
-		editorInstance.onDidFocusEditorText(() => onFocusRef.current?.());
-		editorInstance.onDidBlurEditorText(() => onBlurRef.current?.());
-		onMountRef.current?.(editorInstance, monaco);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_monaco_editor_react.Editor, {
-		beforeMount: handleBeforeMount,
-		className,
-		height,
-		language,
-		loading,
-		path,
-		theme: shikiState === "ready" ? (0, _coldsmirk_inkstone_core.shikiThemeId)(dark) : dark ? "vs-dark" : "vs",
-		value,
-		width,
-		options: {
-			...DEFAULT_MONACO_OPTIONS,
-			...documentOptions({
-				placeholder,
-				lineWrapping,
-				showLineNumbers,
-				folding,
-				disableContextMenu,
-				fontSize,
-				lineHeight,
-				tabSize
-			}),
-			...options
-		},
-		onChange: (next) => onChange?.(next ?? ""),
-		onMount: handleMount
-	});
-}
-//#endregion
-exports.CodeMirrorEditor = CodeMirrorEditor;
-exports.DEFAULT_MONACO_OPTIONS = DEFAULT_MONACO_OPTIONS;
-exports.MonacoEditor = MonacoEditor;
-Object.defineProperty(exports, "codeMirrorLanguages", {
-	enumerable: true,
-	get: function() {
-		return _coldsmirk_inkstone_codemirror.codeMirrorLanguages;
-	}
-});
-Object.defineProperty(exports, "normalizeContext", {
-	enumerable: true,
-	get: function() {
-		return _coldsmirk_inkstone_codemirror.normalizeContext;
-	}
-});
-Object.defineProperty(exports, "searchPhrasesZhCn", {
-	enumerable: true,
-	get: function() {
-		return _coldsmirk_inkstone_codemirror.searchPhrasesZhCn;
-	}
-});
-exports.useShikiHighlighter = useShikiHighlighter;

package/dist/index.d.cts

@@ -1,390 +0,0 @@
-import { Extension } from "@codemirror/state";
-import { CodeMirrorLanguage, CodeMirrorLanguage as CodeMirrorLanguage$1, EditorContext, EditorContext as EditorContext$1, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn } from "@coldsmirk/inkstone-codemirror";
-import { ReactNode, RefObject } from "react";
-import { EditorView } from "@codemirror/view";
-import { MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale } from "@coldsmirk/inkstone-monaco";
-import { BeforeMount, OnMount } from "@monaco-editor/react";
-import { editor } from "monaco-editor";
-import { HighlighterCore } from "@coldsmirk/inkstone-core";
-
-//#region src/codemirror-editor.d.ts
-interface CodeMirrorEditorProps {
-  /**
-   * The controlled document text — external changes reconcile into the live editor
-   * without resetting the caret.
-   */
-  value: string;
-  onChange?: (value: string) => void;
-  /**
-   * Language id — lazily loads the matching CodeMirror grammar as its own chunk (only the
-   * selected language is fetched, never the whole catalog). For a language outside this set,
-   * or for parser options / mixed languages, pass your own support through `extensions`.
-   */
-  language?: CodeMirrorLanguage$1;
-  /**
-   * Render-context schema for variable / member autocomplete — currently consumed by the
-   * `minijinja` languages, where it makes `{{ }}` / `{% if %}` / `{% for x in %}` suggest the
-   * template's context variables and walk member access (`user.address.city`). Pass a JSON Schema
-   * (`{ schema }`, e.g. what Rust `schemars` derives) or a sample value (`{ sample }`); it updates
-   * reactively without recreating the editor. Memoize/hoist it — a new identity each render
-   * re-normalizes and re-dispatches. No effect on languages that don't read it.
-   */
-  context?: EditorContext$1;
-  placeholder?: string;
-  /**
-   * Soft-wrap long lines.
-   *
-   * @default false
-   */
-  lineWrapping?: boolean;
-  /**
-   * Show the line-number gutter. Fixed at creation, like `lineWrapping` / `placeholder`.
-   *
-   * @default false
-   */
-  showLineNumbers?: boolean;
-  /**
-   * Enable code folding (fold gutter + keymap). Fixed at creation; fold points come from the
-   * language, so set `language` too.
-   *
-   * @default false
-   */
-  folding?: boolean;
-  /**
-   * Turn native browser spell-check on. Off by default (CodeMirror's own default, right for
-   * code); enable for prose-grade documents like prompt templates. Fixed at creation.
-   *
-   * @default false
-   */
-  spellcheck?: boolean;
-  /**
-   * Enable in-editor search: Ctrl/Cmd-F opens a catppuccin-styled search/replace panel; F3 /
-   * Ctrl/Cmd-G cycle matches, Ctrl/Cmd-D selects the next occurrence, Alt-G jumps to a line.
-   * The panel speaks CodeMirror's stock English — set `locale="zh-cn"` (or pass
-   * `searchPhrasesZhCn` through `extensions`) for Simplified Chinese. Off by default —
-   * embedded fields rarely want a search UI. Fixed at creation.
-   *
-   * @default false
-   */
-  search?: boolean;
-  /**
-   * Editor font size in px, applied as a theme extension.
-   *
-   * @default 14
-   */
-  fontSize?: number;
-  /**
-   * Line height, applied as a theme extension on the scroller so content and gutters stay
-   * in step. Same convention as `<MonacoEditor>` (Monaco's own): values below 8 multiply the
-   * font size (e.g. `1.6` — CSS's unitless line-height), larger values are absolute pixels
-   * (e.g. `22`).
-   *
-   * @default 1.6
-   */
-  lineHeight?: number;
-  /**
-   * Tab width in spaces — sets both the displayed tab width (`EditorState.tabSize`) and the
-   * indent string inserted on Tab (`indentUnit`), so display and indentation stay in sync.
-   */
-  tabSize?: number;
-  /**
-   * Static extensions (language support, keymaps …), fixed for the editor's lifetime.
-   * Hoist the array — a new identity per render is ignored by design (create-once).
-   */
-  extensions?: Extension[];
-  /**
-   * Extensions swapped in place when the identity changes (theme, language config) —
-   * memoize with `useMemo` keyed on what actually changes. Layered after (and so able to
-   * override) inkstone's default catppuccin theme.
-   */
-  dynamicExtensions?: Extension[];
-  /**
-   * Use the dark catppuccin flavor (macchiato) instead of the light one (latte). The
-   * component never reads the OS `prefers-color-scheme`; wire this to your app's
-   * color-scheme state — same policy as `<MonacoEditor>`.
-   *
-   * @default false
-   */
-  dark?: boolean;
-  /**
-   * Locale for the phrase tables inkstone ships for CodeMirror's stock UI strings —
-   * currently the search / goto-line panel. Unlike Monaco's page-global locale, this is
-   * genuinely per-editor (`EditorState.phrases`) and swaps in place. Equivalent to passing
-   * `searchPhrasesZhCn` through `extensions`, which stays the framework-agnostic surface.
-   *
-   * @default "en"
-   */
-  locale?: "en" | "zh-cn";
-  /**
-   * Editor height — a number is treated as px. Sizes the editor box and hands overflow to
-   * the scroller; omit to grow with content.
-   */
-  height?: string | number;
-  /**
-   * Editor width — a number is treated as px. Omit to fill the container.
-   */
-  width?: string | number;
-  className?: string;
-  /**
-   * Runs once after the editor is created, with the CodeMirror `EditorView` — the imperative
-   * handle for focus, dispatch, scrolling, selection, etc. This is CodeMirror's analog of
-   * Monaco's `onMount`. Monaco's `loading` / `beforeMount` have no counterpart here: the
-   * editor mounts synchronously (no host or editor chunk to await — only the optional
-   * `language` grammar streams in behind an already-usable editor), and pre-creation setup is
-   * the `extensions` prop rather than a global instance to configure.
-   */
-  onMount?: (view: EditorView) => void;
-  /**
-   * Called when the editor gains focus.
-   */
-  onFocus?: () => void;
-  /**
-   * Called when the editor loses focus.
-   */
-  onBlur?: () => void;
-}
-/**
- * A controlled CodeMirror 6 document editor: the standard document extension bundle
- * (line numbers, history, brackets, completion UI — see `documentExtensions`) plus the
- * create-once / reconcile-in-place plumbing of `ControlledEditorHost`, exposed as a plain
- * React component.
- *
- * Ships the catppuccin theme by default (latte / macchiato, flipped by `dark`) and takes
- * `height` / `width` for sizing — parity with `<MonacoEditor>`. Bring your own language
- * support via `extensions`; a theme passed through `dynamicExtensions` overrides the default.
- */
-declare function CodeMirrorEditor({
-  value,
-  onChange,
-  language,
-  context,
-  placeholder,
-  lineWrapping,
-  showLineNumbers,
-  folding,
-  spellcheck,
-  search,
-  extensions,
-  dynamicExtensions,
-  dark,
-  locale,
-  height,
-  width,
-  fontSize,
-  lineHeight,
-  tabSize,
-  className,
-  onMount,
-  onFocus,
-  onBlur
-}: CodeMirrorEditorProps): ReactNode;
-//#endregion
-//#region src/monaco-editor.d.ts
-/**
- * Baseline construction options shared by every inkstone Monaco editor: no minimap, compact
- * code type, in-place layout tracking, widgets floated above clipping containers, completion
- * tuned for API-assisted editing, thin scrollbars, and an embedded-friendly find widget.
- * Spread these to extend rather than replace: `options={{ ...DEFAULT_MONACO_OPTIONS, wordWrap: "on" }}`.
- */
-declare const DEFAULT_MONACO_OPTIONS: editor.IStandaloneEditorConstructionOptions;
-interface MonacoEditorProps {
-  /**
-   * The controlled document text.
-   */
-  value: string;
-  onChange?: (value: string) => void;
-  /**
-   * Monaco language id. Built-in ids autocomplete; any custom-registered id is also accepted.
-   *
-   * @default "javascript"
-   */
-  language?: MonacoLanguage$1;
-  /**
-   * Render with the dark theme. The component never reads the OS `prefers-color-scheme`;
-   * wire this to your app's color-scheme state.
-   *
-   * @default false
-   */
-  dark?: boolean;
-  /**
-   * UI locale for Monaco's built-in chrome (context menu, find widget, command palette …).
-   * Unlike everything else on this component, the locale is **page-global and locked by the
-   * first editor to mount** — Monaco resolves its UI strings once, at module evaluation — so
-   * later editors with a different value are ignored. Overrides `hostOptions.locale` (the
-   * same knob on the framework-agnostic host layer).
-   *
-   * @default "en"
-   */
-  locale?: MonacoUiLocale;
-  /**
-   * Placeholder shown while the document is empty. Maps to Monaco's native `placeholder`
-   * editor option (0.47+); an explicit `options.placeholder` still wins.
-   */
-  placeholder?: string;
-  /**
-   * Soft-wrap long lines (Monaco `wordWrap`).
-   *
-   * @default false
-   */
-  lineWrapping?: boolean;
-  /**
-   * Show the line-number gutter (Monaco `lineNumbers`). For relative/interval modes pass an
-   * explicit `options.lineNumbers`.
-   *
-   * @default false
-   */
-  showLineNumbers?: boolean;
-  /**
-   * Editor font size in px (Monaco `fontSize`). Omit to keep the inkstone default (14).
-   */
-  fontSize?: number;
-  /**
-   * Line height (Monaco `lineHeight`, and its convention): values below 8 multiply the font
-   * size (e.g. `1.6`), larger values are absolute pixels (e.g. `22`). `<CodeMirrorEditor>`
-   * mirrors the same semantics. Omit to keep the inkstone default (1.6).
-   */
-  lineHeight?: number;
-  /**
-   * Tab width in spaces (Monaco `tabSize`).
-   *
-   * @default 2
-   */
-  tabSize?: number;
-  /**
-   * Enable code folding (fold gutter + fold ranges). Unifies the toggle with
-   * `<CodeMirrorEditor>`; note Monaco folds by default, so this turns its folding off unless
-   * set.
-   *
-   * @default false
-   */
-  folding?: boolean;
-  /**
-   * Disable Monaco's right-click context menu (`contextmenu: false`). Right-clicks then fall
-   * through to the browser, so its native menu applies — intercept `contextmenu` on a
-   * wrapping element to suppress that as well.
-   *
-   * @default false
-   */
-  disableContextMenu?: boolean;
-  /**
-   * Swallow the find/replace widget's keyboard entries — Ctrl/Cmd+F (find), Ctrl+H and
-   * Cmd+Alt+F (replace). Scoped to this editor via a context key: the standalone keybinding
-   * service is page-global, so an unscoped rule would rewire every editor on the page.
-   * Fixed at creation.
-   *
-   * @default false
-   */
-  disableFind?: boolean;
-  /**
-   * Swallow the command palette's keyboard entry, F1 — Monaco never binds Ctrl+Shift+P
-   * (that is a VS Code binding). While the context menu is enabled, its "Command Palette"
-   * item still opens the palette; pair with {@link disableContextMenu} to remove every
-   * entry point. Fixed at creation.
-   *
-   * @default false
-   */
-  disableCommandPalette?: boolean;
-  /**
-   * Model path — give each logically distinct document its own so view state (cursor,
-   * folds) survives remounts.
-   */
-  path?: string;
-  height?: string | number;
-  width?: string | number;
-  className?: string;
-  /**
-   * Extra construction options, merged over {@link DEFAULT_MONACO_OPTIONS}.
-   */
-  options?: editor.IStandaloneEditorConstructionOptions;
-  /**
-   * Host bring-up options (UI locale, language workers). The Monaco host is a process-wide
-   * singleton, so the first mounted editor wins and later values are ignored.
-   */
-  hostOptions?: MonacoHostOptions;
-  /**
-   * Shown while the host, highlighter, and editor chunk load.
-   *
-   * @default "Loading editor…"
-   */
-  loading?: ReactNode;
-  /**
-   * Shown when the Monaco host fails to load (e.g. a stale chunk 404 after a redeploy).
-   * The failure is not cached by the host singleton, so a fresh mount retries.
-   *
-   * @default "Editor failed to load"
-   */
-  failure?: ReactNode;
-  /**
-   * Runs after inkstone's own pre-mount setup (Shiki theme registration).
-   */
-  beforeMount?: BeforeMount;
-  onMount?: OnMount;
-  /**
-   * Called when the editor's text area gains focus (Monaco `onDidFocusEditorText`).
-   */
-  onFocus?: () => void;
-  /**
-   * Called when the editor's text area loses focus (Monaco `onDidBlurEditorText`).
-   */
-  onBlur?: () => void;
-}
-/**
- * A preconfigured, offline Monaco editor: bundled workers (no CDN), Shiki catppuccin
- * highlighting with light/dark switching, and sensible document defaults — drop it in with
- * `value` / `onChange` and everything else is wired. The UI speaks Monaco's stock English;
- * pass `hostOptions={{ locale: "zh-cn" }}` for the official Simplified-Chinese chrome.
- *
- * Mounting is gated on the Monaco host and the Shiki highlighter so the first paint already
- * has the right theme; if the highlighter fails to load, the editor falls back to Monaco's
- * built-in themes and stays usable.
- *
- * Do not `import "monaco-editor"` statically elsewhere in the app — that would evaluate
- * Monaco before its UI locale is set (see `ensureMonacoHost`). Type-only imports are fine.
- */
-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
-//#region src/use-shiki-highlighter.d.ts
-type ShikiState = "loading" | "ready" | "failed";
-/**
- * Load the shared Shiki highlighter and expose its lifecycle to gate editor mounting:
- * waiting for `ready` before creating the editor avoids a default-theme flash (and the
- * "theme not found" console error) on first paint; on `failed` the caller falls back to
- * the engine's built-in theme so the editor stays usable.
- *
- * `highlighterRef` is for pre-mount hooks (Monaco `beforeMount`) that must read the
- * instance synchronously before the editor is created.
- */
-declare function useShikiHighlighter(): {
-  state: ShikiState;
-  highlighterRef: RefObject<HighlighterCore | null>;
-};
-//#endregion
-export { CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, DEFAULT_MONACO_OPTIONS, type EditorContext, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, type ShikiState, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };