@coldsmirk/inkstone-react 0.10.1 → 0.12.0

package/dist/{monaco-CP5BIXrw.js → monaco-IkYCUn1k.js}

@@ -1,11 +1,10 @@
-import { n as useControlledReconcileSignal, r as CODE_FONT_FAMILY, t as useLatest } from "./use-latest-BhihMdOp.js";
+import { n as useControlledReconcileSignal, t as useLatest } from "./use-latest-BxJHbqOv.js";
 import { t as useShikiHighlighter } from "./use-shiki-highlighter-CzSQcX2f.js";
 import { useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { shikiThemeId } from "@coldsmirk/inkstone-core";
+import { DEFAULT_MONACO_OPTIONS, DEFAULT_MONACO_OPTIONS as DEFAULT_MONACO_OPTIONS$1, disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, modelValueMatches, monacoLanguages, reconcileModelValue, registerShikiHighlighting } from "@coldsmirk/inkstone-monaco";
 import { DiffEditor, Editor, loader } from "@monaco-editor/react";
-import { disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, monacoLanguages } from "@coldsmirk/inkstone-monaco";
-import { shikiToMonaco } from "@shikijs/monaco";
 //#region src/editor-face.tsx
 const FACE_STYLE = {
 	display: "flex",
@@ -21,80 +20,21 @@ function EditorFace({ children }) {
 	});
 }
 //#endregion
-//#region src/monaco-reconcile.ts
-function reconcileModelValue(model, externalValue) {
-	const value = normalizeModelValue(model, externalValue);
-	const current = model.getValue();
-	if (value === current) return;
-	const shorter = Math.min(current.length, value.length);
-	let from = 0;
-	while (from < shorter && current.codePointAt(from) === value.codePointAt(from)) from += 1;
-	let currentEnd = current.length;
-	let valueEnd = value.length;
-	while (currentEnd > from && valueEnd > from && current.codePointAt(currentEnd - 1) === value.codePointAt(valueEnd - 1)) {
-		currentEnd -= 1;
-		valueEnd -= 1;
-	}
-	const start = model.getPositionAt(from);
-	const end = model.getPositionAt(currentEnd);
-	model.applyEdits([{
-		range: {
-			startLineNumber: start.lineNumber,
-			startColumn: start.column,
-			endLineNumber: end.lineNumber,
-			endColumn: end.column
-		},
-		text: value.slice(from, valueEnd)
-	}]);
-}
-function modelValueMatches(model, externalValue) {
-	return model.getValue() === normalizeModelValue(model, externalValue);
-}
-function normalizeModelValue(model, externalValue) {
-	return externalValue.split(/\r\n|\r|\n/).join(model.getEOL());
-}
-//#endregion
 //#region src/use-monaco-host.ts
-const BOOTSTRAP_KEY = Symbol.for("coldsmirk.inkstone.react.monacoBootstrap");
-function bootstrapRegistry() {
+const LOADER_REGISTRY_KEY = Symbol.for("coldsmirk.inkstone.react.monacoLoaders");
+function configuredLoaders() {
 	const host = globalThis;
-	const existing = host[BOOTSTRAP_KEY];
-	if (existing?.configuredLoaders && existing.shikiMonacoModules) return existing;
-	const registry = {
-		configuredLoaders: /* @__PURE__ */ new WeakSet(),
-		shikiMonacoModules: /* @__PURE__ */ new WeakSet()
-	};
-	host[BOOTSTRAP_KEY] = registry;
-	return registry;
+	const existing = host[LOADER_REGISTRY_KEY];
+	if (existing) return existing;
+	const created = /* @__PURE__ */ new WeakSet();
+	host[LOADER_REGISTRY_KEY] = created;
+	return created;
 }
 function configureMonacoLoader(targetLoader, monaco) {
-	const registry = bootstrapRegistry();
-	if (registry.configuredLoaders.has(targetLoader)) return;
+	const registry = configuredLoaders();
+	if (registry.has(targetLoader)) return;
 	targetLoader.config({ monaco });
-	registry.configuredLoaders.add(targetLoader);
-}
-function registerShikiHighlighting(monaco, highlighter) {
-	const registry = bootstrapRegistry();
-	if (registry.shikiMonacoModules.has(monaco)) return;
-	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 });
-	const shikiThemes = new Set(highlighter.getLoadedThemes());
-	const originalCreate = monaco.editor.create;
-	const originalSetTheme = monaco.editor.setTheme;
-	try {
-		shikiToMonaco(highlighter, monaco);
-		const setShikiTheme = monaco.editor.setTheme;
-		monaco.editor.setTheme = (themeName) => {
-			if (shikiThemes.has(themeName)) setShikiTheme.call(monaco.editor, themeName);
-			else originalSetTheme.call(monaco.editor, themeName);
-		};
-	} catch (error) {
-		monaco.editor.create = originalCreate;
-		monaco.editor.setTheme = originalSetTheme;
-		throw error;
-	}
-	registry.shikiMonacoModules.add(monaco);
+	registry.add(targetLoader);
 }
 function useMonacoHost(locale, hostOptions) {
 	const [state, setState] = useState("loading");
@@ -119,35 +59,119 @@ function useMonacoHost(locale, hostOptions) {
 	return state;
 }
 //#endregion
-//#region src/monaco-editor.tsx
-const DEFAULT_MONACO_OPTIONS = {
-	find: { addExtraSpaceOnTop: false },
-	minimap: { enabled: false },
-	fontSize: 14,
-	lineHeight: 1.6,
-	fontFamily: CODE_FONT_FAMILY,
-	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
+//#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,
@@ -288,116 +312,4 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 	});
 }
 //#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
-export { MonacoEditor as i, MonacoDiffEditor as n, DEFAULT_MONACO_OPTIONS as r, monacoLanguages as t };
+export { MonacoDiffEditor as i, monacoLanguages as n, MonacoEditor as r, DEFAULT_MONACO_OPTIONS$1 as t };

package/dist/monaco.d.ts

@@ -1,2 +1,2 @@
-import { a as MonacoEditorProps, i as MonacoEditor, n as monacoLanguages, o as MonacoDiffEditor, r as DEFAULT_MONACO_OPTIONS, s as MonacoDiffEditorProps, t as MonacoLanguage } from "./monaco-DXifh803.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-BoTcTdm-.js";
 export { DEFAULT_MONACO_OPTIONS, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, monacoLanguages };

package/dist/monaco.js

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

package/dist/{use-latest-BhihMdOp.js → use-latest-BxJHbqOv.js}

@@ -1,7 +1,4 @@
 import { useInsertionEffect, useReducer, useRef } from "react";
-//#region src/code-font.ts
-const CODE_FONT_FAMILY = "var(--inkstone-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)";
-//#endregion
 //#region src/use-controlled-reconcile.ts
 function useControlledReconcileSignal() {
 	return useReducer((revision) => revision + 1, 0);
@@ -16,4 +13,4 @@ function useLatest(value) {
 	return ref;
 }
 //#endregion
-export { useControlledReconcileSignal as n, CODE_FONT_FAMILY as r, useLatest as t };
+export { useControlledReconcileSignal as n, useLatest as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-react",
-  "version": "0.10.1",
+  "version": "0.12.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",
@@ -47,13 +47,10 @@
     "dist"
   ],
   "dependencies": {
-    "@catppuccin/codemirror": "^1.0.1",
-    "@catppuccin/palette": "^1.8.0",
     "@monaco-editor/react": "^4.7.0",
-    "@shikijs/monaco": "^4.3.1",
-    "@coldsmirk/inkstone-codemirror": "^0.10.1",
-    "@coldsmirk/inkstone-core": "^0.10.1",
-    "@coldsmirk/inkstone-monaco": "^0.10.1"
+    "@coldsmirk/inkstone-codemirror": "^0.12.0",
+    "@coldsmirk/inkstone-core": "^0.12.0",
+    "@coldsmirk/inkstone-monaco": "^0.12.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -76,6 +73,29 @@
     "monaco-editor": "^0.55.1",
     "react": ">=19"
   },
+  "peerDependenciesMeta": {
+    "@codemirror/autocomplete": {
+      "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/search": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "monaco-editor": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=24"
   },