@coldsmirk/inkstone-codemirror 0.11.0 → 0.12.0

package/README.md

@@ -12,7 +12,8 @@ Part of [inkstone](https://github.com/coldsmirk/inkstone). For a drop-in React c
 - **`codeMirrorLanguages` / `loadLanguage(language)`** — the supported `CodeMirrorLanguage` names and their lazy loaders: one dynamic `import()` per grammar, so only the selected language is fetched, never the whole catalog. Two tiers back the ids: the official `@codemirror/lang-*` (Lezer) parsers where upstream ships one, plus the full [`@codemirror/legacy-modes`](https://github.com/codemirror/legacy-modes) catalog (stream-mode highlighting) for everything upstream never wrote a Lezer grammar for — `shell`, `dockerfile`, `ini` / `env` / `properties`, `toml`, `nginx`, `powershell`, `lua`, and a hundred more.
 - **MiniJinja** — `language: "minijinja"` for standalone templates, or `minijinja-<host>` mixed variants (`minijinja-html`, `-xml`, `-json`, `-yaml`, `-css`, `-scss`, `-sass`, `-less`, `-markdown`; the SQL family — `-sql` plus every dialect id: `-mysql`, `-pgsql`, `-sqlite`, `-mssql`, `-mariadb`, `-plsql`, `-cassandra`, `-hive`, `-sparksql`, `-gql`, `-gpsql`, `-esper`; and the config/deploy hosts `-toml`, `-ini`, `-env`, `-shell`, `-dockerfile`, `-nginx`) that overlay MiniJinja tooling on the host grammar. A parser adapter supports MiniJinja whitespace control, dotted namespace assignments, and comma-separated `set` assignments beyond the upstream Jinja grammar; a linter flags non-MiniJinja tags, and autocomplete is restricted to MiniJinja's real tags / filters / tests / functions.
 - **Context completion** — `normalizeContext({ schema })` (JSON Schema) or `normalizeContext({ sample })` (representative value) builds an `EditorContext`; dispatch it with `setMinijinjaContext` to make `{{ }}` / `{% if %}` / `{% for %}` complete the render context's variables and walk member access (`user.address.city`). `minijinjaContextField`, `resolveMembers`, and `typeAtPath` expose the underlying pieces.
-- **SQL schema completion** — dispatch `setSqlSchema.of({ tables })` for dialect-aware table and column completion in the Lezer-backed `sql`, `mysql`, `pgsql`, `sqlite`, `mssql`, `mariadb`, `plsql`, and `cassandra` languages plus their `minijinja-*` variants. Legacy stream-mode SQL languages do not consume schemas. Controlled hosts install the data channel eagerly, so the schema may arrive before the lazy grammar.
+- **SQL schema completion** — dispatch `setSqlSchema.of({ tables })` for dialect-aware table and column completion in the Lezer-backed `sql`, `mysql`, `pgsql`, `sqlite`, `mssql`, `mariadb`, `plsql`, and `cassandra` languages plus their `minijinja-*` variants. Legacy stream-mode SQL languages do not consume schemas. Install `sqlSchemaField` in your static extensions to dispatch the schema before the lazy grammar arrives.
+- **Catppuccin theming** — `defaultThemeExtensions(dark, height?, width?, fontSize?, lineHeight?)`, the latte/macchiato flavor pair plus chrome polish (completion tooltip, icons, hover/lint tooltips, search panel) and sizing; `mergeTheme(dark)` / `installDiffChrome(root)` / `diffChromeColor(dark)` / `installDiffControlKeyboardSupport(container)` extend it to `@codemirror/merge`'s diff surfaces (see the `merge-chrome` module docs for the assembly). This is the identity `@coldsmirk/inkstone-react`'s components ship by default.
 - **`searchPhrasesZhCn`** — an opt-in `EditorState.phrases` table localizing the search panel to Simplified Chinese.
 
 ## Install
@@ -72,10 +73,11 @@ import { loadLanguage, normalizeContext, setMinijinjaContext } from "@coldsmirk/
 view.dispatch({ effects: setMinijinjaContext.of(normalizeContext({ schema })) });
 ```
 
-The controlled hosts install both context and SQL-schema fields before any grammar resolves, so
-applications may dispatch either effect immediately and load/reconfigure the grammar later.
-Hand-built `EditorState` instances should install `minijinjaContextField` / `sqlSchemaField`
-explicitly when they need the same ordering.
+The hosts are policy-free and pre-install no data fields: when you dispatch `setMinijinjaContext`
+or `setSqlSchema`, install `minijinjaContextField` / `sqlSchemaField` in your static `extensions`
+(as `@coldsmirk/inkstone-react`'s components do). The fields live independently of the lazy
+grammars, so either effect may be dispatched immediately and the grammar loaded/reconfigured
+later.
 
 The completion is **structural** — it walks the declared shape (member access along a literal path), not types produced by filters or arithmetic. For a Rust backend the schema is nearly free: derive it from the same `serde` struct you render with via [`schemars`](https://docs.rs/schemars), and the completion can't drift from the real context.
 

package/dist/index.d.ts

@@ -62,9 +62,9 @@ type EditorContext = {
  * Reactively set (or clear) the render-context schema an editor completes against. Dispatch this
  * effect — `setMinijinjaContext.of(normalizeContext(...))`, or `.of(null)` to turn it off — to
  * update completion without recreating the editor, matching the create-once discipline used
- * throughout the toolkit. Controlled editor hosts install the field before any lazy grammar
- * resolves; a hand-built EditorState should install {@link minijinjaContextField} itself when it
- * needs to dispatch this effect before adding the MiniJinja support.
+ * throughout the toolkit. The field lives independently of the lazy MiniJinja grammar, so an
+ * editor that installs {@link minijinjaContextField} in its static extensions (as
+ * `@coldsmirk/inkstone-react`'s components do) accepts this effect before the grammar resolves.
  */
 declare const setMinijinjaContext: import("@codemirror/state").StateEffectType<IrSchema | null>;
 /**
@@ -131,6 +131,11 @@ interface ControlledEditorOptions {
  * Framework-agnostic: a React wrapper calls `setValue` from a value effect and `reconfigure`
  * from a theme effect (see `@coldsmirk/inkstone-react`); any other framework does the same
  * from its own reactivity.
+ *
+ * Policy-free plumbing — no inkstone language data fields are pre-installed. A host that
+ * dispatches `setMinijinjaContext` / `setSqlSchema` installs `minijinjaContextField` /
+ * `sqlSchemaField` in its static `extensions` (they accept a dispatch before the lazy grammar
+ * that reads them resolves).
  */
 declare class ControlledEditorHost {
   private readonly compartment;
@@ -156,12 +161,6 @@ declare class ControlledEditorHost {
 }
 //#endregion
 //#region src/extensions.d.ts
-/**
- * Simplified-Chinese strings for the search / goto-line panels, as an opt-in extension —
- * inkstone's defaults are English, so pass this through `extensions` to localize the panel
- * (`search` must be on for the panel to exist at all).
- */
-declare const searchPhrasesZhCn: Extension;
 interface DocumentExtensionsOptions {
   /**
    * Placeholder text shown while the document is empty.
@@ -556,6 +555,56 @@ declare const codeMirrorLanguages: readonly CodeMirrorLanguage[];
  */
 declare function loadLanguage(language: CodeMirrorLanguage): Promise<Extension>;
 //#endregion
+//#region src/locale.d.ts
+/**
+ * Simplified-Chinese strings for the search / goto-line panels, as an opt-in extension —
+ * inkstone's defaults are English, so pass this through `extensions` to localize the panel
+ * (`search` must be on for the panel to exist at all).
+ */
+declare const searchPhrasesZhCn: Extension;
+//#endregion
+//#region src/merge-chrome.d.ts
+/**
+ * Chrome for the surfaces `@codemirror/merge` owns, in catppuccin: deletions read red on the
+ * original side, insertions green on the modified side (the package scopes sides through the
+ * cm-merge-a / cm-merge-b classes it places on each editor root), and the collapsed-lines bar
+ * drops its hardcoded grays for flavor colors. Regular theme precedence — it beats the merge
+ * package's baseTheme by CodeMirror's theme-over-base contract, and a caller theme layered
+ * after it still overrides it.
+ */
+declare function mergeTheme(dark: boolean): Extension;
+/**
+ * The foreground the injected diff chrome inherits: set it as the diff container's `color` so
+ * the revert buttons between the editors — which sit outside both editors' theme scopes —
+ * follow the flavor (and flip with `dark`). The editors paint their own flavor colors over it.
+ */
+declare function diffChromeColor(dark: boolean): string;
+/**
+ * The two merge-view surfaces an editor theme cannot reach, styled through one injected rule
+ * set per document/shadow root (the same pattern as the monaco host's hover-geometry fix),
+ * scoped to containers carrying the `data-inkstone-diff` attribute:
+ *
+ * - `.cm-mergeView` is the shared scroll surface *around* both editors; giving it the
+ * container's full height is what makes a container height scroll the diff as one unit.
+ * - The revert buttons live between the editors, outside either theme scope. They inherit
+ * the container's `color` (set from {@link diffChromeColor}, so dark flips reach them) and
+ * get a hover tint mixed from that same currentColor — no per-flavor rules needed.
+ */
+declare function installDiffChrome(root: Document | ShadowRoot): void;
+/**
+ * The document or shadow root a container mounts its editors into — what
+ * {@link installDiffChrome} takes, and what `ControlledMergeOptions.root` expects.
+ */
+declare function editorRoot(container: HTMLElement): Document | ShadowRoot;
+/**
+ * Keyboard access for the merge view's mouse-only controls, wired on the diff container:
+ * collapsed-lines bars become focusable buttons, revert buttons get an explicit `type` and a
+ * keyboard/programmatic-click bridge to the mousedown `@codemirror/merge` listens for. A
+ * MutationObserver keeps late-rendered controls covered; the returned function tears
+ * everything down.
+ */
+declare function installDiffControlKeyboardSupport(container: HTMLElement): () => void;
+//#endregion
 //#region src/merge-host.d.ts
 interface ControlledMergeOptions extends MergeConfig$1 {
   /**
@@ -621,7 +670,10 @@ interface ControlledMergeOptions extends MergeConfig$1 {
  * `collapseUnchanged` …) reconfigure through {@link MergeView.reconfigure} on {@link view}.
  *
  * Policy-free plumbing: neither side is read-only by default — wire that through
- * `originalExtensions` / `modifiedExtensions` to match how the documents are controlled.
+ * `originalExtensions` / `modifiedExtensions` to match how the documents are controlled —
+ * and no inkstone language data fields are pre-installed: a host that dispatches
+ * `setMinijinjaContext` / `setSqlSchema` installs `minijinjaContextField` / `sqlSchemaField`
+ * in the shared `extensions` (same rule as `ControlledEditorHost`).
  * Framework-agnostic, same as `ControlledEditorHost`.
  */
 declare class ControlledMergeHost {
@@ -675,11 +727,20 @@ interface SqlSchema {
  */
 declare const setSqlSchema: import("@codemirror/state").StateEffectType<SqlSchema | null>;
 /**
- * Holds the schema that SQL table/column completion reads. Controlled editor hosts install it
- * eagerly; the `sql`-family language supports also include it for hand-built editors. `null`
- * (the default) means no schema — keyword completion still works, table/column completion stays
- * off.
+ * Holds the schema that SQL table/column completion reads. `@coldsmirk/inkstone-react`'s
+ * components install it eagerly; the `sql`-family language supports also include it for
+ * hand-built editors. `null` (the default) means no schema — keyword completion still works,
+ * table/column completion stays off.
  */
 declare const sqlSchemaField: StateField<SqlSchema | null>;
 //#endregion
-export { type CodeMirrorLanguage, ControlledEditorHost, type ControlledEditorOptions, ControlledMergeHost, type ControlledMergeOptions, type DocumentExtensionsOptions, type EditorContext, type IrField, type IrSchema, type IrType, type Member, type MergeConfig, type MergeView, type SqlSchema, codeMirrorLanguages, documentExtensions, loadLanguage, minijinjaContextField, normalizeContext, resolveMembers, searchPhrasesZhCn, setMinijinjaContext, setSqlSchema, sqlSchemaField, typeAtPath };
+//#region src/theme.d.ts
+declare function toCssSize(value: string | number | undefined): string | undefined;
+/**
+ * inkstone's default dynamic theme layer: the catppuccin flavor picked by `dark`, plus
+ * optional height/width sizing. The catppuccin theme is injected at low precedence so a
+ * caller's own theme (layered after it, e.g. through a dynamic-extensions slot) overrides it.
+ */
+declare function defaultThemeExtensions(dark: boolean, height?: string | number, width?: string | number, fontSize?: number, lineHeight?: number): Extension[];
+//#endregion
+export { type CodeMirrorLanguage, ControlledEditorHost, type ControlledEditorOptions, ControlledMergeHost, type ControlledMergeOptions, type DocumentExtensionsOptions, type EditorContext, type IrField, type IrSchema, type IrType, type Member, type MergeConfig, type MergeView, type SqlSchema, codeMirrorLanguages, defaultThemeExtensions, diffChromeColor, documentExtensions, editorRoot, installDiffChrome, installDiffControlKeyboardSupport, loadLanguage, mergeTheme, minijinjaContextField, normalizeContext, resolveMembers, searchPhrasesZhCn, setMinijinjaContext, setSqlSchema, sqlSchemaField, toCssSize, typeAtPath };

package/dist/index.js

@@ -1,11 +1,14 @@
 import { a as setMinijinjaContext, i as resolveMembers, n as minijinjaContextField, o as typeAtPath, r as normalizeContext } from "./context-BJzyiP0A.js";
 import { n as sqlSchemaField, t as setSqlSchema } from "./sql-schema-DiPx5-bu.js";
-import { Compartment, EditorState, Transaction } from "@codemirror/state";
+import { Compartment, EditorState, Prec, Transaction } from "@codemirror/state";
 import { EditorView, drawSelection, highlightActiveLine, keymap, lineNumbers, placeholder } from "@codemirror/view";
 import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { LanguageSupport, StreamLanguage, bracketMatching, codeFolding, foldGutter, foldKeymap, indentOnInput } from "@codemirror/language";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { flavors } from "@catppuccin/palette";
+import { catppuccinLatte, catppuccinMacchiato } from "@catppuccin/codemirror";
+import { CODE_FONT_FAMILY } from "@coldsmirk/inkstone-core";
 import { MergeView } from "@codemirror/merge";
 //#region src/minimal-replace.ts
 function minimalReplace(state, externalValue) {
@@ -83,8 +86,6 @@ var ControlledEditorHost = class {
 			state: EditorState.create({
 				doc,
 				extensions: [
-					minijinjaContextField,
-					sqlSchemaField,
 					...extensions,
 					this.compartment.of(dynamicExtensions),
 					EditorView.updateListener.of((update) => {
@@ -114,25 +115,8 @@ var ControlledEditorHost = class {
 		this.view.destroy();
 	}
 };
-const searchPhrasesZhCn = EditorState.phrases.of({
-	Find: "查找",
-	Replace: "替换",
-	next: "下一个",
-	previous: "上一个",
-	all: "全部",
-	"match case": "区分大小写",
-	regexp: "正则表达式",
-	"by word": "全字匹配",
-	replace: "替换",
-	"replace all": "全部替换",
-	close: "关闭",
-	"current match": "当前匹配",
-	"on line": "所在行",
-	"replaced $ matches": "已替换 $ 处匹配",
-	"replaced match on line $": "已替换第 $ 行的匹配",
-	"Go to line": "跳转到行",
-	go: "跳转"
-});
+//#endregion
+//#region src/extensions.ts
 function documentExtensions({ placeholder: placeholder$1, lineWrapping = false, showLineNumbers = false, folding = false, spellcheck = false, search = false } = {}) {
 	return [
 		...showLineNumbers ? [lineNumbers()] : [],
@@ -389,6 +373,378 @@ const codeMirrorLanguages = Object.keys(loaders).toSorted();
 function loadLanguage(language) {
 	return loaders[language]();
 }
+const searchPhrasesZhCn = EditorState.phrases.of({
+	Find: "查找",
+	Replace: "替换",
+	next: "下一个",
+	previous: "上一个",
+	all: "全部",
+	"match case": "区分大小写",
+	regexp: "正则表达式",
+	"by word": "全字匹配",
+	replace: "替换",
+	"replace all": "全部替换",
+	close: "关闭",
+	"current match": "当前匹配",
+	"on line": "所在行",
+	"replaced $ matches": "已替换 $ 处匹配",
+	"replaced match on line $": "已替换第 $ 行的匹配",
+	"Go to line": "跳转到行",
+	go: "跳转"
+});
+//#endregion
+//#region src/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/merge-chrome.ts
+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 });
+}
+function diffChromeColor(dark) {
+	return (dark ? flavors.macchiato : flavors.latte).colors.overlay1.hex;
+}
+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 });
+	};
+}
 //#endregion
 //#region src/merge-host.ts
 var ControlledMergeHost = class {
@@ -405,8 +761,6 @@ var ControlledMergeHost = class {
 				doc: original,
 				extensions: [
 					...originalExtensions,
-					minijinjaContextField,
-					sqlSchemaField,
 					...extensions,
 					this.originalCompartment.of(dynamicExtensions),
 					EditorView.updateListener.of((update) => {
@@ -418,8 +772,6 @@ var ControlledMergeHost = class {
 				doc: modified,
 				extensions: [
 					...modifiedExtensions,
-					minijinjaContextField,
-					sqlSchemaField,
 					...extensions,
 					this.modifiedCompartment.of(dynamicExtensions),
 					EditorView.updateListener.of((update) => {
@@ -457,4 +809,4 @@ var ControlledMergeHost = class {
 	}
 };
 //#endregion
-export { ControlledEditorHost, ControlledMergeHost, codeMirrorLanguages, documentExtensions, loadLanguage, minijinjaContextField, normalizeContext, resolveMembers, searchPhrasesZhCn, setMinijinjaContext, setSqlSchema, sqlSchemaField, typeAtPath };
+export { ControlledEditorHost, ControlledMergeHost, codeMirrorLanguages, defaultThemeExtensions, diffChromeColor, documentExtensions, editorRoot, installDiffChrome, installDiffControlKeyboardSupport, loadLanguage, mergeTheme, minijinjaContextField, normalizeContext, resolveMembers, searchPhrasesZhCn, setMinijinjaContext, setSqlSchema, sqlSchemaField, toCssSize, typeAtPath };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coldsmirk/inkstone-codemirror",
-  "version": "0.11.0",
-  "description": "Framework-agnostic CodeMirror 6 plumbing: a controlled editor host (create-once, external-value reconcile, in-place theme swap) and the standard document extension bundle.",
+  "version": "0.12.0",
+  "description": "Framework-agnostic CodeMirror 6 plumbing: a controlled editor host (create-once, external-value reconcile, in-place theme swap), the standard document extension bundle, and the editors' catppuccin theming.",
   "keywords": [
     "codemirror",
     "codemirror6",
@@ -34,6 +34,8 @@
     "dist"
   ],
   "dependencies": {
+    "@catppuccin/codemirror": "^1.0.1",
+    "@catppuccin/palette": "^1.8.0",
     "@codemirror/lang-angular": "^0.1.4",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-css": "^6.3.1",
@@ -59,7 +61,8 @@
     "@codemirror/legacy-modes": "^6.5.3",
     "@codemirror/lint": "^6.9.7",
     "@codemirror/merge": "^6.12.2",
-    "@lezer/common": "^1.5.2"
+    "@lezer/common": "^1.5.2",
+    "@coldsmirk/inkstone-core": "^0.12.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",