@coldsmirk/inkstone-react 0.14.0 → 0.16.0

package/README.md

@@ -28,7 +28,7 @@ import { MonacoEditor } from "@coldsmirk/inkstone-react/monaco";
 />;
 ```
 
-One component brings: the local `monaco-editor` instance (no CDN), bundled offline workers, Shiki catppuccin highlighting registered before first paint, and light/dark switching via `dark`.
+One component brings: the local `monaco-editor` instance (no CDN), bundled offline workers, Shiki catppuccin highlighting registered before first paint, light/dark switching via `dark`, and VS Code's auto-closing JSX tags on TypeScript/JavaScript models whose `path` ends in `.tsx` / `.jsx` (parser-backed via the bundled TS worker).
 
 - **Locale** — chrome speaks stock English; `locale="zh-cn"` switches to Monaco's official Simplified-Chinese catalog. Page-global and locked by the first editor to mount, so give every editor the same value.
 - **Type & metrics** — `fontSize` defaults to 14, `lineHeight` to 1.6 (Monaco's convention: values below 8 multiply the font size); `DEFAULT_MONACO_OPTIONS` is exported for hosts that need the same baseline.

package/dist/{codemirror-B3GlIVaX.d.ts → codemirror-BW_zSOVE.d.ts}

@@ -2,7 +2,6 @@ import { Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { CodeMirrorLanguage, CodeMirrorLanguage as CodeMirrorLanguage$1, EditorContext, EditorContext as EditorContext$1, MergeView, MergeView as MergeView$1, SqlSchema, SqlSchema as SqlSchema$1, codeMirrorLanguages, normalizeContext as normalizeContext$1, searchPhrasesZhCn as searchPhrasesZhCn$1 } from "@coldsmirk/inkstone-codemirror";
 import { ReactNode } from "react";
-
 //#region src/codemirror-diff-editor.d.ts
 interface CodeMirrorDiffEditorProps {
   /**
@@ -136,28 +135,7 @@ interface CodeMirrorDiffEditorProps {
  * sides share `language`, `extensions`, and the theme; dark flips, language loads, and
  * `revertControls` / `collapseUnchanged` all swap in place without rebuilding the view.
  */
-declare function CodeMirrorDiffEditor({
-  original,
-  modified,
-  onChange,
-  language,
-  readOnly,
-  revertControls,
-  collapseUnchanged,
-  lineWrapping,
-  showLineNumbers,
-  extensions,
-  dynamicExtensions,
-  dark,
-  height,
-  width,
-  fontSize,
-  lineHeight,
-  className,
-  originalAriaLabel,
-  modifiedAriaLabel,
-  onMount
-}: CodeMirrorDiffEditorProps): ReactNode;
+declare function CodeMirrorDiffEditor({ original, modified, onChange, language, readOnly, revertControls, collapseUnchanged, lineWrapping, showLineNumbers, extensions, dynamicExtensions, dark, height, width, fontSize, lineHeight, className, originalAriaLabel, modifiedAriaLabel, onMount }: CodeMirrorDiffEditorProps): ReactNode;
 //#endregion
 //#region src/codemirror-editor.d.ts
 interface CodeMirrorEditorProps {
@@ -317,32 +295,6 @@ interface CodeMirrorEditorProps {
  * `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,
-  sqlSchema,
-  placeholder,
-  lineWrapping,
-  showLineNumbers,
-  folding,
-  spellcheck,
-  search,
-  extensions,
-  dynamicExtensions,
-  dark,
-  locale,
-  height,
-  width,
-  fontSize,
-  lineHeight,
-  tabSize,
-  className,
-  onMount,
-  onFocus,
-  onBlur,
-  ariaLabel
-}: CodeMirrorEditorProps): ReactNode;
+declare function CodeMirrorEditor({ value, onChange, language, context, sqlSchema, placeholder, lineWrapping, showLineNumbers, folding, spellcheck, search, extensions, dynamicExtensions, dark, locale, height, width, fontSize, lineHeight, tabSize, className, onMount, onFocus, onBlur, ariaLabel }: CodeMirrorEditorProps): ReactNode;
 //#endregion
 export { codeMirrorLanguages as a, CodeMirrorEditor as c, CodeMirrorDiffEditorProps as d, SqlSchema$1 as i, CodeMirrorEditorProps as l, EditorContext$1 as n, normalizeContext$1 as o, MergeView$1 as r, searchPhrasesZhCn$1 as s, CodeMirrorLanguage$1 as t, CodeMirrorDiffEditor as u };

package/dist/{codemirror-Bvwl0fxH.js → codemirror-bROXidfr.js}

@@ -198,8 +198,10 @@ function CodeMirrorEditor({ value, onChange, language, context, sqlSchema, place
 					search
 				}),
 				EditorView.updateListener.of((update) => {
-					if (update.focusChanged) if (update.view.hasFocus) onFocusRef.current?.();
-					else onBlurRef.current?.();
+					if (update.focusChanged) {
+						if (update.view.hasFocus) onFocusRef.current?.();
+						else onBlurRef.current?.();
+					}
 				}),
 				...extensions ?? []
 			],

package/dist/codemirror.d.ts

@@ -1,2 +1,2 @@
-import { a as codeMirrorLanguages, c as CodeMirrorEditor, d as CodeMirrorDiffEditorProps, i as SqlSchema, l as CodeMirrorEditorProps, n as EditorContext, o as normalizeContext, r as MergeView, s as searchPhrasesZhCn, t as CodeMirrorLanguage, u as CodeMirrorDiffEditor } from "./codemirror-B3GlIVaX.js";
+import { a as codeMirrorLanguages, c as CodeMirrorEditor, d as CodeMirrorDiffEditorProps, i as SqlSchema, l as CodeMirrorEditorProps, n as EditorContext, o as normalizeContext, r as MergeView, s as searchPhrasesZhCn, t as CodeMirrorLanguage, u as CodeMirrorDiffEditor } from "./codemirror-BW_zSOVE.js";
 export { CodeMirrorDiffEditor, type CodeMirrorDiffEditorProps, CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, type EditorContext, type MergeView, type SqlSchema, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn };

package/dist/codemirror.js

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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { a as codeMirrorLanguages, c as CodeMirrorEditor, d as CodeMirrorDiffEditorProps, i as SqlSchema, l as CodeMirrorEditorProps, n as EditorContext, o as normalizeContext, r as MergeView, s as searchPhrasesZhCn, t as CodeMirrorLanguage, u as CodeMirrorDiffEditor } from "./codemirror-B3GlIVaX.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";
-import { n as useShikiHighlighter, t as ShikiState } from "./shiki-D-IjmhhO.js";
+import { a as codeMirrorLanguages, c as CodeMirrorEditor, d as CodeMirrorDiffEditorProps, i as SqlSchema, l as CodeMirrorEditorProps, n as EditorContext, o as normalizeContext, r as MergeView, s as searchPhrasesZhCn, t as CodeMirrorLanguage, u as CodeMirrorDiffEditor } from "./codemirror-BW_zSOVE.js";
+import { a as MonacoEditorProps, i as MonacoEditor, n as MonacoLanguage, o as MonacoDiffEditor, r as monacoLanguages, s as MonacoDiffEditorProps, t as DEFAULT_MONACO_OPTIONS } from "./monaco-DZj8pXIv.js";
+import { n as useShikiHighlighter, t as ShikiState } from "./shiki-Ds-uZ7XH.js";
 export { CodeMirrorDiffEditor, type CodeMirrorDiffEditorProps, CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, DEFAULT_MONACO_OPTIONS, type EditorContext, type MergeView, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, type ShikiState, type SqlSchema, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };

package/dist/index.js

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

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

@@ -3,7 +3,7 @@ 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 { DEFAULT_MONACO_OPTIONS, DEFAULT_MONACO_OPTIONS as DEFAULT_MONACO_OPTIONS$1, disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, installJsxTagClosing, modelValueMatches, monacoLanguages, reconcileModelValue, registerShikiHighlighting } from "@coldsmirk/inkstone-monaco";
 import { DiffEditor, Editor, loader } from "@monaco-editor/react";
 //#region src/editor-face.tsx
 const FACE_STYLE = {
@@ -292,10 +292,12 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 		monacoRef.current = monaco;
 		reconcileModel(monaco, editorInstance, valueRef.current, languageRef.current, reconcilingRef);
 		installDisabledKeybindings(monaco, editorInstance, disabledKeybindings(monaco, disableFind, disableCommandPalette));
+		installJsxTagClosing(monaco, editorInstance);
 		editorInstance.onDidFocusEditorText(() => onFocusRef.current?.());
 		editorInstance.onDidBlurEditorText(() => onBlurRef.current?.());
 		onMountRef.current?.(editorInstance, monaco);
 	};
+	const theme = shikiState === "ready" ? shikiThemeId(dark) : dark ? "vs-dark" : "vs";
 	return /* @__PURE__ */ jsx(Editor, {
 		beforeMount: handleBeforeMount,
 		className,
@@ -305,7 +307,7 @@ function MonacoEditor({ value, onChange, language = "javascript", dark = false,
 		loading,
 		options: mergedOptions,
 		path,
-		theme: shikiState === "ready" ? shikiThemeId(dark) : dark ? "vs-dark" : "vs",
+		theme,
 		width,
 		onChange: handleChange,
 		onMount: handleMount

package/dist/{monaco-BoTcTdm-.d.ts → monaco-DZj8pXIv.d.ts}

@@ -2,7 +2,6 @@ import { ReactNode } from "react";
 import { DEFAULT_MONACO_OPTIONS as DEFAULT_MONACO_OPTIONS$1, MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale, monacoLanguages } from "@coldsmirk/inkstone-monaco";
 import { BeforeMount, DiffBeforeMount, DiffOnMount, OnMount } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
-
 //#region src/monaco-diff-editor.d.ts
 interface MonacoDiffEditorProps {
   /**
@@ -138,29 +137,7 @@ interface MonacoDiffEditorProps {
  * statically (type-only imports are fine), and the first mounted editor wins the host
  * configuration.
  */
-declare function MonacoDiffEditor({
-  original,
-  modified,
-  onChange,
-  language,
-  dark,
-  locale,
-  readOnly,
-  collapseUnchanged,
-  lineWrapping,
-  showLineNumbers,
-  fontSize,
-  lineHeight,
-  height,
-  width,
-  className,
-  options,
-  hostOptions,
-  loading,
-  failure,
-  beforeMount,
-  onMount
-}: MonacoDiffEditorProps): ReactNode;
+declare function MonacoDiffEditor({ original, modified, onChange, language, dark, locale, readOnly, collapseUnchanged, lineWrapping, showLineNumbers, fontSize, lineHeight, height, width, className, options, hostOptions, loading, failure, beforeMount, onMount }: MonacoDiffEditorProps): ReactNode;
 //#endregion
 //#region src/monaco-editor.d.ts
 interface MonacoEditorProps {
@@ -312,6 +289,8 @@ interface MonacoEditorProps {
  * 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.
+ * TypeScript / JavaScript models whose `path` ends in `.tsx` / `.jsx` also get VS Code's
+ * auto-closing JSX tags (`installJsxTagClosing`), served by the bundled TS worker.
  *
  * 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
@@ -320,34 +299,6 @@ interface MonacoEditorProps {
  * 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;
+declare function MonacoEditor({ value, onChange, language, dark, locale, placeholder, lineWrapping, showLineNumbers, folding, disableContextMenu, disableFind, disableCommandPalette, fontSize, lineHeight, tabSize, path, height, width, className, options, hostOptions, loading, failure, beforeMount, onMount, onFocus, onBlur }: MonacoEditorProps): ReactNode;
 //#endregion
 export { MonacoEditorProps as a, MonacoEditor as i, MonacoLanguage$1 as n, MonacoDiffEditor as o, monacoLanguages as r, MonacoDiffEditorProps as s, DEFAULT_MONACO_OPTIONS$1 as t };

package/dist/monaco.d.ts

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

package/dist/{shiki-D-IjmhhO.d.ts → shiki-Ds-uZ7XH.d.ts}

@@ -1,6 +1,5 @@
 import { RefObject } from "react";
 import { HighlighterCore } from "@coldsmirk/inkstone-core";
-
 //#region src/use-shiki-highlighter.d.ts
 type ShikiState = "loading" | "ready" | "failed";
 /**

package/dist/shiki.d.ts

@@ -1,2 +1,2 @@
-import { n as useShikiHighlighter, t as ShikiState } from "./shiki-D-IjmhhO.js";
+import { n as useShikiHighlighter, t as ShikiState } from "./shiki-Ds-uZ7XH.js";
 export { type ShikiState, useShikiHighlighter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-react",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Drop-in React code editors: a preconfigured Monaco <MonacoEditor> (offline workers, Shiki catppuccin themes, dark switching, opt-in zh-CN UI) and a controlled CodeMirror 6 <CodeMirrorEditor> (catppuccin themes, dark switching, sizing).",
   "keywords": [
     "react",
@@ -48,9 +48,9 @@
   ],
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@coldsmirk/inkstone-core": "^0.14.0",
-    "@coldsmirk/inkstone-monaco": "^0.14.0",
-    "@coldsmirk/inkstone-codemirror": "^0.14.0"
+    "@coldsmirk/inkstone-codemirror": "^0.16.0",
+    "@coldsmirk/inkstone-core": "^0.16.0",
+    "@coldsmirk/inkstone-monaco": "^0.16.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -59,9 +59,9 @@
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.0",
-    "monaco-editor": "^0.55.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "monaco-editor": "^0.56.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "peerDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -70,7 +70,7 @@
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.0",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.56.0",
     "react": ">=19"
   },
   "peerDependenciesMeta": {