@coldsmirk/inkstone-codemirror 0.28.0 → 0.29.0

package/README.md

@@ -13,7 +13,7 @@ Part of [inkstone](https://github.com/coldsmirk/inkstone). For a drop-in React c
 - **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. 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. The polish paints the roles a consumer configured through `@coldsmirk/inkstone-core`'s `configureEditorSurface` — background and gutter, the current line and its number, caret, selection, scrollbars, the tooltip and panel chrome and its text, the accent, and the diagnostic severities, which color every mark `@codemirror/lint` draws (squiggle, point, gutter marker, message bar) — and reads the host's `--inkstone-radius-*` / `--inkstone-shadow-*` tokens for corners and elevation, each falling back to its own look; `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.
+- **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. The polish paints the roles a consumer configured through `@coldsmirk/inkstone-core`'s `configureEditorColors` — background and gutter, the current line and its number, caret, selection, scrollbars, the tooltip and panel chrome and its text, the accent, and the diagnostic severities, which color every mark `@codemirror/lint` draws (squiggle, point, gutter marker) and the severity's mark that leads its message — and reads the host's `--inkstone-radius-*` / `--inkstone-shadow-*` tokens for corners and elevation, each falling back to its own look; `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

package/dist/index.d.ts

@@ -555,7 +555,7 @@ declare const searchPhrasesZhCn: Extension;
  * 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 the chrome's own: a host's muted text and selection plane
- * (`configureEditorSurface`), else the flavor's. Regular theme precedence — it beats the merge
+ * (`configureEditorColors`), else the flavor's. 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.
  */

package/dist/index.js

@@ -7,7 +7,7 @@ import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirro
 import { LanguageSupport, StreamLanguage, bracketMatching, codeFolding, foldGutter, foldKeymap, indentOnInput } from "@codemirror/language";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 import { flavors } from "@catppuccin/palette";
-import { CODE_FONT_FAMILY, getEditorSurface, inkstoneRadius, inkstoneShadow } from "@coldsmirk/inkstone-core";
+import { CODE_FONT_FAMILY, getEditorColors, inkstoneRadius, inkstoneShadow } from "@coldsmirk/inkstone-core";
 import { catppuccinLatte, catppuccinMacchiato } from "@catppuccin/codemirror";
 import { MergeView } from "@codemirror/merge";
 //#region src/minimal-replace.ts
@@ -466,44 +466,44 @@ function diagnosticRules(palette) {
 }
 function chromeTheme(dark) {
 	const { colors } = dark ? flavors.macchiato : flavors.latte;
-	const surface = getEditorSurface(dark) ?? {};
-	const hairline = `1px solid ${surface.widgetBorder ?? alphaOf(colors.overlay0, .35)}`;
-	const controlFill = surface.widgetSelection ?? colors.surface1.hex;
-	const foreground = surface.widgetForeground ?? colors.text.hex;
-	const muted = surface.widgetForegroundMuted ?? colors.overlay1.hex;
-	const label = surface.widgetForegroundMuted ?? colors.subtext0.hex;
-	const accent = surface.accent ?? colors.blue.hex;
-	const selection = surface.selection ?? alphaOf(colors.blue, dark ? .35 : .25);
-	const blurredSelection = surface.selection === void 0 ? alphaOf(colors.blue, dark ? .2 : .14) : fade(surface.selection, 50);
+	const host = getEditorColors(dark) ?? {};
+	const hairline = `1px solid ${host.widgetBorder ?? alphaOf(colors.overlay0, .35)}`;
+	const controlFill = host.widgetSelection ?? colors.surface1.hex;
+	const foreground = host.widgetForeground ?? colors.text.hex;
+	const muted = host.widgetForegroundMuted ?? colors.overlay1.hex;
+	const label = host.widgetForegroundMuted ?? colors.subtext0.hex;
+	const accent = host.accent ?? colors.blue.hex;
+	const selection = host.selection ?? alphaOf(colors.blue, dark ? .35 : .25);
+	const blurredSelection = host.selection === void 0 ? alphaOf(colors.blue, dark ? .2 : .14) : fade(host.selection, 50);
 	const frame = {
 		border: hairline,
 		borderRadius: inkstoneRadius("large", "8px"),
 		boxShadow: inkstoneShadow("large", dark ? "0 8px 24px rgba(0, 0, 0, 0.5)" : "0 8px 24px rgba(0, 0, 0, 0.12)"),
 		color: foreground,
-		...surface.widget !== void 0 && { backgroundColor: surface.widget }
+		...host.widget !== void 0 && { backgroundColor: host.widget }
 	};
 	const gutters = {
-		...surface.background !== void 0 && { backgroundColor: surface.background },
-		...surface.lineNumber !== void 0 && { color: surface.lineNumber }
+		...host.background !== void 0 && { backgroundColor: host.background },
+		...host.lineNumber !== void 0 && { color: host.lineNumber }
 	};
-	const caret = surface.cursor === void 0 ? {} : {
-		".cm-content": { caretColor: surface.cursor },
-		".cm-cursor, .cm-dropCursor": { borderLeftColor: surface.cursor }
+	const caret = host.cursor === void 0 ? {} : {
+		".cm-content": { caretColor: host.cursor },
+		".cm-cursor, .cm-dropCursor": { borderLeftColor: host.cursor }
 	};
-	const tooltipArrow = surface.widget === void 0 ? {} : {
+	const tooltipArrow = host.widget === void 0 ? {} : {
 		".cm-tooltip .cm-tooltip-arrow:before": {
-			borderTopColor: surface.widgetBorder ?? "transparent",
-			borderBottomColor: surface.widgetBorder ?? "transparent"
+			borderTopColor: host.widgetBorder ?? "transparent",
+			borderBottomColor: host.widgetBorder ?? "transparent"
 		},
 		".cm-tooltip .cm-tooltip-arrow:after": {
-			borderTopColor: surface.widget,
-			borderBottomColor: surface.widget
+			borderTopColor: host.widget,
+			borderBottomColor: host.widget
 		}
 	};
 	return EditorView.theme({
 		"&": {
 			colorScheme: dark ? "dark" : "light",
-			...surface.background !== void 0 && { backgroundColor: surface.background }
+			...host.background !== void 0 && { backgroundColor: host.background }
 		},
 		...Object.keys(gutters).length > 0 && { ".cm-gutters": gutters },
 		...caret,
@@ -527,7 +527,7 @@ function chromeTheme(dark) {
 			},
 			"& > ul > li[aria-selected]": {
 				color: foreground,
-				...surface.widgetSelection !== void 0 && { backgroundColor: surface.widgetSelection }
+				...host.widgetSelection !== void 0 && { backgroundColor: host.widgetSelection }
 			}
 		},
 		".cm-completionLabel": {
@@ -609,10 +609,10 @@ function chromeTheme(dark) {
 		},
 		".cm-diagnostic > *": { gridColumn: "2" },
 		...diagnosticRules({
-			error: surface.error ?? colors.red.hex,
-			warning: surface.warning ?? colors.peach.hex,
-			info: surface.info ?? colors.blue.hex,
-			hint: surface.hint ?? colors.overlay1.hex
+			error: host.error ?? colors.red.hex,
+			warning: host.warning ?? colors.peach.hex,
+			info: host.info ?? colors.blue.hex,
+			hint: host.hint ?? colors.overlay1.hex
 		}),
 		".cm-diagnosticAction": {
 			justifySelf: "start",
@@ -635,21 +635,21 @@ function chromeTheme(dark) {
 		},
 		".cm-panel.cm-panel-lint [name=close]": { color: muted },
 		"&.cm-focused": { outline: "none" },
-		".cm-activeLine": { backgroundColor: surface.lineHighlight ?? alphaOf(colors.overlay0, .12) },
+		".cm-activeLine": { backgroundColor: host.lineHighlight ?? alphaOf(colors.overlay0, .12) },
 		".cm-activeLineGutter": {
-			backgroundColor: surface.lineHighlight ?? alphaOf(colors.overlay0, .12),
-			...surface.lineNumberActive !== void 0 && { color: surface.lineNumberActive }
+			backgroundColor: host.lineHighlight ?? alphaOf(colors.overlay0, .12),
+			...host.lineNumberActive !== void 0 && { color: host.lineNumberActive }
 		},
 		"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": { backgroundColor: selection },
 		".cm-selectionBackground": { backgroundColor: blurredSelection },
 		".cm-content ::selection": { backgroundColor: selection },
 		".cm-scroller, .cm-tooltip-autocomplete > ul, .cm-tooltip.cm-completionInfo": {
 			scrollbarWidth: "thin",
-			scrollbarColor: `${surface.scrollbar ?? alphaOf(colors.overlay0, .55)} transparent`
+			scrollbarColor: `${host.scrollbar ?? alphaOf(colors.overlay0, .55)} transparent`
 		},
 		".cm-panels": {
 			color: foreground,
-			...surface.widget !== void 0 && { backgroundColor: surface.widget }
+			...host.widget !== void 0 && { backgroundColor: host.widget }
 		},
 		".cm-panels.cm-panels-top": { borderBottom: hairline },
 		".cm-panels.cm-panels-bottom": { borderTop: hairline },
@@ -717,7 +717,7 @@ function chromeTheme(dark) {
 			padding: "0 10px",
 			fontSize: "12.5px",
 			color: foreground,
-			backgroundColor: surface.background ?? colors.base.hex,
+			backgroundColor: host.background ?? colors.base.hex,
 			border: hairline,
 			borderRadius: inkstoneRadius("medium", "6px")
 		},
@@ -768,8 +768,8 @@ function defaultThemeExtensions(dark, height, width, fontSize, lineHeight) {
 //#region src/merge-chrome.ts
 function mergeTheme(dark) {
 	const { colors } = dark ? flavors.macchiato : flavors.latte;
-	const surface = getEditorSurface(dark) ?? {};
-	const band = surface.widgetSelection ?? colors.surface0.hex;
+	const host = getEditorColors(dark) ?? {};
+	const band = host.widgetSelection ?? colors.surface0.hex;
 	const removed = colors.red;
 	const added = colors.green;
 	const underline = (color) => `linear-gradient(${alphaOf(color, .5)}, ${alphaOf(color, .5)}) bottom/100% 2px no-repeat`;
@@ -781,13 +781,13 @@ function mergeTheme(dark) {
 		"&.cm-merge-a .cm-changedLineGutter": { background: removed.hex },
 		"&.cm-merge-b .cm-changedLineGutter": { background: added.hex },
 		".cm-collapsedLines": {
-			color: surface.widgetForegroundMuted ?? colors.subtext0.hex,
+			color: host.widgetForegroundMuted ?? colors.subtext0.hex,
 			background: `linear-gradient(to bottom, transparent 0, ${band} 30%, ${band} 70%, transparent 100%)`
 		}
 	}, { dark });
 }
 function diffChromeColor(dark) {
-	return getEditorSurface(dark)?.widgetForegroundMuted ?? (dark ? flavors.macchiato : flavors.latte).colors.overlay1.hex;
+	return getEditorColors(dark)?.widgetForegroundMuted ?? (dark ? flavors.macchiato : flavors.latte).colors.overlay1.hex;
 }
 const DIFF_CHROME_STYLE_SELECTOR = "style[data-inkstone=\"codemirror-diff\"]";
 function installDiffChrome(root) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-codemirror",
-  "version": "0.28.0",
+  "version": "0.29.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",
@@ -62,7 +62,7 @@
     "@codemirror/lint": "^6.9.7",
     "@codemirror/merge": "^6.12.2",
     "@lezer/common": "^1.5.2",
-    "@coldsmirk/inkstone-core": "^0.28.0"
+    "@coldsmirk/inkstone-core": "^0.29.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",