@coldsmirk/inkstone-react 0.9.0 → 0.10.0

package/dist/monaco-DXifh803.d.ts

@@ -0,0 +1,360 @@
+import { ReactNode } from "react";
+import { BeforeMount, DiffBeforeMount, DiffOnMount, OnMount } from "@monaco-editor/react";
+import { MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale, monacoLanguages } from "@coldsmirk/inkstone-monaco";
+import { editor } from "monaco-editor";
+
+//#region src/monaco-diff-editor.d.ts
+interface MonacoDiffEditorProps {
+  /**
+   * The controlled original text (the left side). Never editable — Monaco's
+   * `originalEditable` stays off because this component gives the original document no
+   * change channel; it follows this prop only, reconciled as a minimal replace that keeps
+   * the pane's selection and scroll position outside the changed region.
+   */
+  original: string;
+  /**
+   * The controlled modified text (the right side) — editable unless `readOnly`. External
+   * changes reconcile into the live model as one minimal replace, off the undo stack — same
+   * contract as `<CodeMirrorDiffEditor>`: the caret keeps its position outside the changed
+   * region, and undo never reverts an external value (though undo entries recorded *before*
+   * an external change that overlaps them may restore shifted text — Monaco's history does
+   * not remap through unrecorded edits).
+   */
+  modified: string;
+  /**
+   * Called with the full modified document after every edit made in the editor. External
+   * `modified` prop reconciliations never echo back through this.
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Monaco language id, applied to both models. Built-in ids autocomplete; any
+   * custom-registered id is also accepted.
+   *
+   * @default "javascript"
+   */
+  language?: MonacoLanguage;
+  /**
+   * 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 — page-global and locked by the first editor to
+   * mount, exactly as on `<MonacoEditor>`. Overrides `hostOptions.locale`.
+   *
+   * @default "en"
+   */
+  locale?: MonacoUiLocale;
+  /**
+   * Lock the modified side too, turning the component into a pure diff viewer (Monaco
+   * `readOnly`, which the diff editor applies to the modified pane).
+   *
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Collapse long unchanged stretches behind expandable region bars (Monaco
+   * `hideUnchangedRegions`), keeping context lines around each change — the same toggle
+   * `<CodeMirrorDiffEditor>` exposes under this name.
+   *
+   * @default false
+   */
+  collapseUnchanged?: boolean;
+  /**
+   * Soft-wrap long lines on both sides (Monaco `wordWrap`; the diff editor's own
+   * `diffWordWrap` inherits it).
+   *
+   * @default false
+   */
+  lineWrapping?: boolean;
+  /**
+   * Show the line-number gutters. On by default — unlike a single document field, a diff
+   * reads by line reference.
+   *
+   * @default true
+   */
+  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, larger values are absolute pixels. Omit to keep the inkstone default (1.6).
+   */
+  lineHeight?: number;
+  height?: string | number;
+  width?: string | number;
+  className?: string;
+  /**
+   * Extra construction options, merged over {@link DEFAULT_MONACO_OPTIONS} and the props
+   * above — the escape hatch wins (e.g. `renderSideBySide: false` for the inline view).
+   */
+  options?: editor.IDiffEditorConstructionOptions;
+  /**
+   * 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?: DiffBeforeMount;
+  /**
+   * Runs once with the created `IStandaloneDiffEditor` — the imperative handle to both
+   * panes (`getOriginalEditor()` / `getModifiedEditor()`).
+   */
+  onMount?: DiffOnMount;
+}
+/**
+ * A preconfigured, offline Monaco diff editor — `<MonacoEditor>`'s assembly (bundled
+ * workers, Shiki catppuccin highlighting with light/dark switching, opt-in zh-CN chrome)
+ * around Monaco's side-by-side diff view.
+ *
+ * The original side is read-only and follows the `original` prop; the modified side is the
+ * editable document behind `modified` / `onChange` (set `readOnly` for a pure viewer). Both
+ * components in the pair — this and `<CodeMirrorDiffEditor>` — speak the same core props
+ * and the same controlled-value contract: the component owns both reconciles (minimal
+ * replace, off the undo stack — see `reconcileModelValue`) instead of leaving them to
+ * `@monaco-editor/react`, whose whole-document `executeEdits` lands external values on the
+ * user's undo stack and resets the caret.
+ *
+ * The same global constraints as `<MonacoEditor>` apply: never `import "monaco-editor"`
+ * 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;
+//#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;
+  /**
+   * 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 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
+   */
+  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, 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;
+  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
+export { MonacoEditorProps as a, MonacoEditor as i, monacoLanguages as n, MonacoDiffEditor as o, DEFAULT_MONACO_OPTIONS as r, MonacoDiffEditorProps as s, MonacoLanguage$1 as t };

package/dist/monaco.d.ts

@@ -0,0 +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";
+export { DEFAULT_MONACO_OPTIONS, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, monacoLanguages };

package/dist/monaco.js

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

package/dist/shiki-D-IjmhhO.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import { HighlighterCore } from "@coldsmirk/inkstone-core";
+
+//#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 { useShikiHighlighter as n, ShikiState as t };

package/dist/shiki.d.ts

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

package/dist/shiki.js

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

package/dist/use-latest-BhihMdOp.js

@@ -0,0 +1,19 @@
+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);
+}
+//#endregion
+//#region src/use-latest.ts
+function useLatest(value) {
+	const ref = useRef(value);
+	useInsertionEffect(() => {
+		ref.current = value;
+	});
+	return ref;
+}
+//#endregion
+export { useControlledReconcileSignal as n, CODE_FONT_FAMILY as r, useLatest as t };

package/dist/use-shiki-highlighter-CzSQcX2f.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+import { getHighlighter } from "@coldsmirk/inkstone-core";
+//#region src/use-shiki-highlighter.ts
+function useShikiHighlighter() {
+	const [state, setState] = useState("loading");
+	const highlighterRef = useRef(null);
+	useEffect(() => {
+		let cancelled = false;
+		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
+export { useShikiHighlighter as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-react",
-  "version": "0.9.0",
+  "version": "0.10.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",
@@ -28,7 +28,19 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./package.json": "./package.json"
+    "./codemirror": {
+      "types": "./dist/codemirror.d.ts",
+      "default": "./dist/codemirror.js"
+    },
+    "./monaco": {
+      "types": "./dist/monaco.d.ts",
+      "default": "./dist/monaco.js"
+    },
+    "./package.json": "./package.json",
+    "./shiki": {
+      "types": "./dist/shiki.d.ts",
+      "default": "./dist/shiki.js"
+    }
   },
   "types": "./dist/index.d.ts",
   "files": [
@@ -39,9 +51,9 @@
     "@catppuccin/palette": "^1.8.0",
     "@monaco-editor/react": "^4.7.0",
     "@shikijs/monaco": "^4.3.1",
-    "@coldsmirk/inkstone-codemirror": "^0.9.0",
-    "@coldsmirk/inkstone-core": "^0.9.0",
-    "@coldsmirk/inkstone-monaco": "^0.9.0"
+    "@coldsmirk/inkstone-codemirror": "^0.10.0",
+    "@coldsmirk/inkstone-core": "^0.10.0",
+    "@coldsmirk/inkstone-monaco": "^0.10.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",