@coldsmirk/inkstone-react 0.8.2

package/README.md

@@ -0,0 +1,65 @@
+# @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). 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.
+
+## Install
+
+```bash
+pnpm add @coldsmirk/inkstone-react monaco-editor react \
+  @codemirror/state @codemirror/view @codemirror/language @codemirror/autocomplete @codemirror/commands @codemirror/search
+```
+
+`monaco-editor`, `react`, and the `@codemirror/*` packages are **peer dependencies** — your app owns the single copy of each (`@codemirror/state` breaks at runtime if two copies load). Node.js >= 22 for build / SSR hosts.
+
+## `<MonacoEditor>`
+
+```tsx
+import { MonacoEditor } from "@coldsmirk/inkstone-react";
+
+<MonacoEditor
+  language="javascript"
+  dark={dark}
+  value={source}
+  onChange={setSource}
+/>;
+```
+
+One component brings: the local `monaco-editor` instance (no CDN), bundled offline workers, Shiki catppuccin highlighting registered before first paint, and light/dark switching via `dark`.
+
+- **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.
+- **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.
+
+Never `import "monaco-editor"` statically anywhere in the app — it locks the UI to English (type-only imports are fine). See "The one Monaco rule" in the repository README.
+
+## `<CodeMirrorEditor>`
+
+```tsx
+import { CodeMirrorEditor } from "@coldsmirk/inkstone-react";
+
+<CodeMirrorEditor
+  language="json"
+  dark={dark}
+  height={320}
+  value={doc}
+  onChange={setDoc}
+/>;
+```
+
+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).
+
+- **`language`** lazily imports the matching grammar as its own chunk. Includes the MiniJinja family — `minijinja` standalone or `minijinja-<host>` mixed variants (`minijinja-yaml`, `-json`, `-html`, `-sql`, …).
+- **`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.
+- **`search`** (opt-in) adds the standard search keymap and panel; `locale="zh-cn"` localizes it per editor.
+- **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.
+
+## License
+
+UNLICENSED — proprietary. All rights reserved; no use, copying, or redistribution without the author's permission.

package/dist/index.cjs

@@ -0,0 +1,537 @@
+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;