@coldsmirk/inkstone-react 0.9.0 → 0.10.1

package/README.md

@@ -1,6 +1,6 @@
 # @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.
+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) — plus **`<MonacoDiffEditor>`** and **`<CodeMirrorDiffEditor>`**, the same assemblies around each engine's side-by-side diff view. 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.
 
@@ -11,12 +11,14 @@ 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.
+`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 >= 24 for build / SSR hosts.
+
+Import from the engine-specific entry points below so a CodeMirror-only build never traverses or emits Monaco (and vice versa). The aggregate `@coldsmirk/inkstone-react` entry remains available for existing consumers; `@coldsmirk/inkstone-react/shiki` exposes the standalone highlighter hook.
 
 ## `<MonacoEditor>`
 
 ```tsx
-import { MonacoEditor } from "@coldsmirk/inkstone-react";
+import { MonacoEditor } from "@coldsmirk/inkstone-react/monaco";
 
 <MonacoEditor
   language="javascript"
@@ -39,7 +41,7 @@ Never `import "monaco-editor"` statically anywhere in the app — it locks the U
 ## `<CodeMirrorEditor>`
 
 ```tsx
-import { CodeMirrorEditor } from "@coldsmirk/inkstone-react";
+import { CodeMirrorEditor } from "@coldsmirk/inkstone-react/codemirror";
 
 <CodeMirrorEditor
   language="json"
@@ -54,11 +56,31 @@ A controlled CM6 editor: create-once view, external value changes reconcile with
 
 - **`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.
+- **`sqlSchema`** — pass table/column metadata to the Lezer-backed SQL languages (`sql`, `mysql`, `pgsql`, `sqlite`, `mssql`, `mariadb`, `plsql`, `cassandra`) and their `minijinja-*` variants for dialect-aware table, alias, and column completion. Updates in place; legacy stream-mode SQL languages do not consume schemas.
 - **`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.
+- **Accessibility** — the textbox defaults to `ariaLabel="Editor content"`; pass a workflow-specific `ariaLabel` when needed. Focus presentation belongs to the surrounding application chrome.
 - **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` / `monacoLanguages` / `normalizeContext` / `searchPhrasesZhCn` helpers are re-exported for hosts that build custom surfaces next to the components.
+`useShikiHighlighter` is exported from `@coldsmirk/inkstone-react/shiki`; `codeMirrorLanguages` / `normalizeContext` / `searchPhrasesZhCn` live on the CodeMirror entry, and `monacoLanguages` lives on the Monaco entry. The aggregate root re-exports them for compatibility.
+
+## `<MonacoDiffEditor>` / `<CodeMirrorDiffEditor>`
+
+```tsx
+import { MonacoDiffEditor } from "@coldsmirk/inkstone-react/monaco";
+import { CodeMirrorDiffEditor } from "@coldsmirk/inkstone-react/codemirror";
+
+<MonacoDiffEditor language="typescript" dark={dark} original={before} modified={after} onChange={setAfter} />;
+
+<CodeMirrorDiffEditor language="json" dark={dark} original={before} modified={after} onChange={setAfter} />;
+```
+
+The pair speaks the same core contract on both engines: the **original** side (left) is read-only and follows its prop; the **modified** side is the controlled, editable document behind `modified` / `onChange` — set `readOnly` for a pure diff viewer. External changes to either prop reconcile into the live view as one minimal replace — no rebuild, off the undo stack, carets and selections outside the changed region kept — and prop reconciliations never echo back through `onChange`. Shared toggles: `collapseUnchanged` folds long unchanged stretches behind expandable bars, `lineWrapping`, and `showLineNumbers` (on by default — a diff reads by line reference).
+
+Each component keeps its engine's conventions from the single-editor sibling:
+
+- **`<MonacoDiffEditor>`** — the `<MonacoEditor>` assembly (offline host, Shiki themes, `locale`, `loading` / `failure`, `hostOptions`) around `monaco.editor.createDiffEditor`. `options` takes raw `IDiffEditorConstructionOptions` over the same `DEFAULT_MONACO_OPTIONS` baseline — e.g. `renderSideBySide: false` for the inline view.
+- **`<CodeMirrorDiffEditor>`** — `@codemirror/merge`'s `MergeView` behind `<CodeMirrorEditor>`'s create-once discipline, with the catppuccin flavors extended to the diff chrome (red deletions / green insertions, themed collapse bars and revert controls). `revertControls` adds per-chunk arrows copying the original chunk into the modified document (flows through `onChange`); `language`, `extensions`, and `dynamicExtensions` apply to both sides; `onMount` hands you the `MergeView`.
 
 ## License
 

package/dist/codemirror-B27C5np1.js

@@ -0,0 +1,604 @@
+import { n as useControlledReconcileSignal, r as CODE_FONT_FAMILY, t as useLatest } from "./use-latest-BhihMdOp.js";
+import { flavors } from "@catppuccin/palette";
+import { EditorState, Prec } from "@codemirror/state";
+import { EditorView, lineNumbers } from "@codemirror/view";
+import { ControlledEditorHost, ControlledMergeHost, codeMirrorLanguages, documentExtensions, loadLanguage, normalizeContext, normalizeContext as normalizeContext$1, searchPhrasesZhCn, searchPhrasesZhCn as searchPhrasesZhCn$1, setMinijinjaContext, setSqlSchema } from "@coldsmirk/inkstone-codemirror";
+import { useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { catppuccinLatte, catppuccinMacchiato } from "@catppuccin/codemirror";
+import { jsx } from "react/jsx-runtime";
+import { indentUnit } from "@codemirror/language";
+//#region src/codemirror-theme.ts
+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 ? flavors.macchiato : 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)",
+		color: colors.text.hex
+	};
+	return EditorView.theme({
+		"&": { colorScheme: dark ? "dark" : "light" },
+		".cm-scroller": { fontFamily: CODE_FONT_FAMILY },
+		".cm-tooltip": frame,
+		".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-tooltip-lint": {
+			padding: "4px",
+			maxWidth: "26em",
+			overflowWrap: "anywhere"
+		},
+		".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) },
+		"&.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 = [Prec.low(chromeTheme(dark)), Prec.low(dark ? catppuccinMacchiato : 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(EditorView.theme(spec));
+	}
+	return extensions;
+}
+//#endregion
+//#region src/codemirror-diff-editor.tsx
+function mergeTheme(dark) {
+	const { colors } = dark ? flavors.macchiato : flavors.latte;
+	const removed = colors.red;
+	const added = colors.green;
+	const underline = (color) => `linear-gradient(${alphaOf(color, .5)}, ${alphaOf(color, .5)}) bottom/100% 2px no-repeat`;
+	return EditorView.theme({
+		"&.cm-merge-a .cm-changedLine": { backgroundColor: alphaOf(removed, dark ? .14 : .09) },
+		"&.cm-merge-b .cm-changedLine": { backgroundColor: alphaOf(added, dark ? .14 : .09) },
+		"&.cm-merge-a .cm-changedText": { background: underline(removed) },
+		"&.cm-merge-b .cm-changedText": { background: underline(added) },
+		"&.cm-merge-a .cm-changedLineGutter": { background: removed.hex },
+		"&.cm-merge-b .cm-changedLineGutter": { background: added.hex },
+		".cm-collapsedLines": {
+			color: colors.subtext0.hex,
+			background: `linear-gradient(to bottom, transparent 0, ${colors.surface0.hex} 30%, ${colors.surface0.hex} 70%, transparent 100%)`
+		}
+	}, { dark });
+}
+const DIFF_CHROME_STYLE_SELECTOR = "style[data-inkstone=\"codemirror-diff\"]";
+function installDiffChrome(root) {
+	if (root.querySelector(DIFF_CHROME_STYLE_SELECTOR)) return;
+	const style = (root.nodeType === 9 ? root : root.host.ownerDocument).createElement("style");
+	style.dataset.inkstone = "codemirror-diff";
+	style.textContent = [
+		"[data-inkstone-diff] > .cm-mergeView { height: 100%; }",
+		"[data-inkstone-diff] .cm-merge-revert button { color: inherit; border-radius: 4px; }",
+		"[data-inkstone-diff] .cm-merge-revert button:hover { background-color: color-mix(in srgb, currentColor 15%, transparent); }"
+	].join("\n");
+	if (root.nodeType === 9) root.head.append(style);
+	else root.append(style);
+}
+function editorRoot(container) {
+	const root = container.getRootNode();
+	if (root.nodeType === 9 || root.nodeType === 11 && "host" in root) return root;
+	return container.ownerDocument;
+}
+function eventElement(event) {
+	const target = event.target;
+	return target?.nodeType === 1 ? target : target?.parentElement ?? null;
+}
+function installDiffControlKeyboardSupport(container) {
+	const enhanceControls = () => {
+		for (const control of container.querySelectorAll(":scope .cm-collapsedLines")) {
+			control.setAttribute("role", "button");
+			control.tabIndex = 0;
+		}
+		for (const button of container.querySelectorAll(":scope .cm-merge-revert button")) button.type = "button";
+	};
+	const handleClick = (event) => {
+		if (event.detail !== 0) return;
+		const button = eventElement(event)?.closest(".cm-merge-revert button");
+		if (!button || !container.contains(button)) return;
+		event.preventDefault();
+		const MouseEventConstructor = container.ownerDocument.defaultView?.MouseEvent ?? MouseEvent;
+		button.dispatchEvent(new MouseEventConstructor("mousedown", {
+			bubbles: true,
+			button: 0,
+			cancelable: true
+		}));
+	};
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		const control = eventElement(event)?.closest(".cm-collapsedLines");
+		if (!control || !container.contains(control)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		control.click();
+	};
+	enhanceControls();
+	const observer = new MutationObserver(enhanceControls);
+	observer.observe(container, {
+		childList: true,
+		subtree: true
+	});
+	container.addEventListener("click", handleClick);
+	container.addEventListener("keydown", handleKeyDown, { capture: true });
+	return () => {
+		observer.disconnect();
+		container.removeEventListener("click", handleClick);
+		container.removeEventListener("keydown", handleKeyDown, { capture: true });
+	};
+}
+function CodeMirrorDiffEditor({ original, modified, onChange, language, readOnly = false, revertControls = false, collapseUnchanged = false, lineWrapping = false, showLineNumbers = true, extensions, dynamicExtensions, dark = false, height, width, fontSize = 14, lineHeight = 1.6, className, originalAriaLabel = "Original content", modifiedAriaLabel = "Modified content", onMount }) {
+	const containerRef = useRef(null);
+	const hostRef = useRef(null);
+	const modifiedTransitionRef = useRef(false);
+	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
+	const onChangeRef = useLatest(onChange);
+	const onMountRef = useLatest(onMount);
+	const [loadedLanguage, setLoadedLanguage] = useState(null);
+	const languageExtension = useMemo(() => loadedLanguage && loadedLanguage.id === language ? [loadedLanguage.extension] : [], [language, loadedLanguage]);
+	const activeRevertControls = revertControls && !readOnly;
+	useEffect(() => {
+		if (!language) return;
+		let cancelled = false;
+		loadLanguage(language).then((extension) => {
+			if (!cancelled) setLoadedLanguage({
+				id: language,
+				extension
+			});
+		}).catch((error) => {
+			console.error("inkstone: failed to load CodeMirror language", language, error);
+			if (!cancelled) setLoadedLanguage(null);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [language]);
+	const dynamic = useMemo(() => [
+		...defaultThemeExtensions(dark, void 0, void 0, fontSize, lineHeight),
+		mergeTheme(dark),
+		...showLineNumbers ? [lineNumbers()] : [],
+		...lineWrapping ? [EditorView.lineWrapping] : [],
+		...readOnly ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : [],
+		...languageExtension,
+		...dynamicExtensions ?? []
+	], [
+		dark,
+		fontSize,
+		lineHeight,
+		showLineNumbers,
+		lineWrapping,
+		readOnly,
+		languageExtension,
+		dynamicExtensions
+	]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const root = editorRoot(container);
+		installDiffChrome(root);
+		const host = new ControlledMergeHost({
+			parent: container,
+			root,
+			original,
+			modified,
+			onModifiedChange: (next) => {
+				if (modifiedTransitionRef.current) return;
+				onChangeRef.current?.(next);
+				requestControlledReconcile();
+			},
+			extensions: [...documentExtensions(), ...extensions ?? []],
+			originalExtensions: [
+				EditorState.readOnly.of(true),
+				EditorView.editable.of(false),
+				EditorView.contentAttributes.of({ "aria-label": originalAriaLabel })
+			],
+			modifiedExtensions: [EditorView.contentAttributes.of({ "aria-label": modifiedAriaLabel })],
+			dynamicExtensions: dynamic,
+			revertControls: activeRevertControls ? "a-to-b" : void 0,
+			collapseUnchanged: collapseUnchanged ? {} : void 0
+		});
+		hostRef.current = host;
+		const removeDiffControlKeyboardSupport = installDiffControlKeyboardSupport(container);
+		onMountRef.current?.(host.view);
+		return () => {
+			removeDiffControlKeyboardSupport();
+			host.destroy();
+			hostRef.current = null;
+		};
+	}, []);
+	useInsertionEffect(() => {
+		const host = hostRef.current;
+		modifiedTransitionRef.current = host !== null && host.view.b.state.doc.toString() !== modified;
+	}, [modified, reconcileRevision]);
+	useLayoutEffect(() => {
+		hostRef.current?.setOriginal(original);
+	}, [original]);
+	useLayoutEffect(() => {
+		try {
+			hostRef.current?.setModified(modified);
+		} finally {
+			modifiedTransitionRef.current = false;
+		}
+	}, [modified, reconcileRevision]);
+	useEffect(() => {
+		hostRef.current?.reconfigure(dynamic);
+	}, [dynamic]);
+	useEffect(() => {
+		hostRef.current?.view.reconfigure({
+			revertControls: activeRevertControls ? "a-to-b" : void 0,
+			collapseUnchanged: collapseUnchanged ? {} : void 0
+		});
+	}, [activeRevertControls, collapseUnchanged]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className,
+		"data-inkstone-diff": "",
+		style: {
+			height: toCssSize(height),
+			width: toCssSize(width),
+			color: (dark ? flavors.macchiato : flavors.latte).colors.overlay1.hex
+		}
+	});
+}
+//#endregion
+//#region src/codemirror-editor.tsx
+function CodeMirrorEditor({ value, onChange, language, context, sqlSchema, 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, ariaLabel = "Editor content" }) {
+	const containerRef = useRef(null);
+	const hostRef = useRef(null);
+	const valueTransitionRef = useRef(false);
+	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
+	const onChangeRef = useLatest(onChange);
+	const onMountRef = useLatest(onMount);
+	const onFocusRef = useLatest(onFocus);
+	const onBlurRef = useLatest(onBlur);
+	const lastContextKeyRef = useRef(null);
+	const lastSqlSchemaKeyRef = useRef(null);
+	const [loadedLanguage, setLoadedLanguage] = useState(null);
+	const languageExtension = useMemo(() => loadedLanguage && loadedLanguage.id === language ? [loadedLanguage.extension] : [], [language, loadedLanguage]);
+	useEffect(() => {
+		if (!language) return;
+		let cancelled = false;
+		loadLanguage(language).then((extension) => {
+			if (!cancelled) setLoadedLanguage({
+				id: language,
+				extension
+			});
+		}).catch((error) => {
+			console.error("inkstone: failed to load CodeMirror language", language, error);
+			if (!cancelled) setLoadedLanguage(null);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [language]);
+	const dynamic = useMemo(() => [
+		...defaultThemeExtensions(dark, height, width, fontSize, lineHeight),
+		...tabSize === void 0 ? [] : [EditorState.tabSize.of(tabSize), indentUnit.of(" ".repeat(tabSize))],
+		...locale === "zh-cn" ? [searchPhrasesZhCn] : [],
+		...languageExtension,
+		EditorView.contentAttributes.of({ "aria-label": ariaLabel }),
+		...dynamicExtensions ?? []
+	], [
+		dark,
+		height,
+		width,
+		fontSize,
+		lineHeight,
+		tabSize,
+		locale,
+		languageExtension,
+		ariaLabel,
+		dynamicExtensions
+	]);
+	const contextSchema = useMemo(() => context ? normalizeContext(context) : null, [context]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const host = new ControlledEditorHost({
+			parent: container,
+			doc: value,
+			onChange: (next) => {
+				if (valueTransitionRef.current) return;
+				onChangeRef.current?.(next);
+				requestControlledReconcile();
+			},
+			extensions: [
+				...documentExtensions({
+					placeholder,
+					lineWrapping,
+					showLineNumbers,
+					folding,
+					spellcheck,
+					search
+				}),
+				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;
+		};
+	}, []);
+	useInsertionEffect(() => {
+		const host = hostRef.current;
+		valueTransitionRef.current = host !== null && host.view.state.doc.toString() !== value;
+	}, [reconcileRevision, value]);
+	useLayoutEffect(() => {
+		try {
+			hostRef.current?.setValue(value);
+		} finally {
+			valueTransitionRef.current = false;
+		}
+	}, [reconcileRevision, value]);
+	useEffect(() => {
+		hostRef.current?.reconfigure(dynamic);
+	}, [dynamic]);
+	useEffect(() => {
+		const host = hostRef.current;
+		if (!host) return;
+		const key = contextSchema ? JSON.stringify(contextSchema) : "";
+		const last = lastContextKeyRef.current;
+		if (last?.host === host && last.key === key) return;
+		lastContextKeyRef.current = {
+			host,
+			key
+		};
+		if (key === "" && last?.host !== host) return;
+		host.view.dispatch({ effects: setMinijinjaContext.of(contextSchema) });
+	}, [contextSchema]);
+	useEffect(() => {
+		const host = hostRef.current;
+		if (!host) return;
+		const key = sqlSchema ? JSON.stringify(sqlSchema) : "";
+		const last = lastSqlSchemaKeyRef.current;
+		if (last?.host === host && last.key === key) return;
+		lastSqlSchemaKeyRef.current = {
+			host,
+			key
+		};
+		if (key === "" && last?.host !== host) return;
+		host.view.dispatch({ effects: setSqlSchema.of(sqlSchema ?? null) });
+	}, [sqlSchema]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className
+	});
+}
+//#endregion
+export { CodeMirrorDiffEditor as a, CodeMirrorEditor as i, normalizeContext$1 as n, searchPhrasesZhCn$1 as r, codeMirrorLanguages as t };