@coldsmirk/inkstone-codemirror 0.18.0 → 0.19.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; `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 host surface a consumer configured through `@coldsmirk/inkstone-core`'s `configureEditorSurface` (background and gutter, current line, line numbers, tooltip and panel chrome) 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.js

@@ -7,8 +7,8 @@ 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 { 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) {
@@ -430,21 +430,31 @@ function completionIconRules() {
 }
 function chromeTheme(dark) {
 	const { colors } = dark ? flavors.macchiato : flavors.latte;
-	const hairline = `1px solid ${alphaOf(colors.overlay0, .35)}`;
+	const surface = getEditorSurface(dark) ?? {};
+	const hairline = `1px solid ${surface.widgetBorder ?? 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
+		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: colors.text.hex,
+		...surface.widget !== void 0 && { backgroundColor: surface.widget }
+	};
+	const gutters = {
+		...surface.background !== void 0 && { backgroundColor: surface.background },
+		...surface.lineNumber !== void 0 && { color: surface.lineNumber }
 	};
 	return EditorView.theme({
-		"&": { colorScheme: dark ? "dark" : "light" },
+		"&": {
+			colorScheme: dark ? "dark" : "light",
+			...surface.background !== void 0 && { backgroundColor: surface.background }
+		},
+		...Object.keys(gutters).length > 0 && { ".cm-gutters": gutters },
 		".cm-scroller": { fontFamily: CODE_FONT_FAMILY },
 		".cm-tooltip": frame,
 		".cm-tooltip.cm-tooltip-autocomplete": {
 			...frame,
 			"& > ul": {
-				borderRadius: "7px",
+				borderRadius: `calc(${inkstoneRadius("large", "8px")} - 1px)`,
 				padding: "4px",
 				maxHeight: "16em"
 			},
@@ -452,9 +462,10 @@ function chromeTheme(dark) {
 				display: "flex",
 				alignItems: "center",
 				padding: "3px 8px",
-				borderRadius: "5px",
+				borderRadius: inkstoneRadius("medium", "5px"),
 				lineHeight: "1.45"
-			}
+			},
+			...surface.widgetSelection !== void 0 && { "& > ul > li[aria-selected]": { backgroundColor: surface.widgetSelection } }
 		},
 		".cm-completionLabel": {
 			minWidth: "0",
@@ -517,7 +528,7 @@ function chromeTheme(dark) {
 			margin: "0",
 			padding: "3px 8px",
 			borderLeftWidth: "3px",
-			borderRadius: "5px",
+			borderRadius: inkstoneRadius("medium", "5px"),
 			lineHeight: "1.45"
 		},
 		".cm-diagnostic-error": { borderLeftColor: colors.red.hex },
@@ -528,7 +539,7 @@ function chromeTheme(dark) {
 			padding: "2px 6px",
 			backgroundColor: colors.surface1.hex,
 			color: colors.text.hex,
-			borderRadius: "4px"
+			borderRadius: inkstoneRadius("small", "4px")
 		},
 		".cm-diagnosticSource": {
 			fontSize: "85%",
@@ -536,8 +547,8 @@ function chromeTheme(dark) {
 			opacity: "1"
 		},
 		"&.cm-focused": { outline: "none" },
-		".cm-activeLine": { backgroundColor: alphaOf(colors.overlay0, .12) },
-		".cm-activeLineGutter": { backgroundColor: alphaOf(colors.overlay0, .12) },
+		".cm-activeLine": { backgroundColor: surface.lineHighlight ?? alphaOf(colors.overlay0, .12) },
+		".cm-activeLineGutter": { backgroundColor: surface.lineHighlight ?? 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) },
@@ -545,6 +556,7 @@ function chromeTheme(dark) {
 			scrollbarWidth: "thin",
 			scrollbarColor: `${alphaOf(colors.overlay0, .55)} transparent`
 		},
+		...surface.widget !== void 0 && { ".cm-panels": { backgroundColor: surface.widget } },
 		".cm-panels.cm-panels-top": { borderBottom: hairline },
 		".cm-panels.cm-panels-bottom": { borderTop: hairline },
 		".cm-panel.cm-search, .cm-panel.cm-gotoLine": {
@@ -595,7 +607,7 @@ function chromeTheme(dark) {
 			color: colors.overlay1.hex,
 			background: "transparent",
 			border: "none",
-			borderRadius: "6px",
+			borderRadius: inkstoneRadius("medium", "6px"),
 			cursor: "pointer"
 		},
 		".cm-panel.cm-search button[name=close]:hover": {
@@ -611,9 +623,9 @@ function chromeTheme(dark) {
 			padding: "0 10px",
 			fontSize: "12.5px",
 			color: colors.text.hex,
-			backgroundColor: colors.base.hex,
+			backgroundColor: surface.background ?? colors.base.hex,
 			border: hairline,
-			borderRadius: "6px"
+			borderRadius: inkstoneRadius("medium", "6px")
 		},
 		".cm-panel .cm-textfield:focus": {
 			outline: "none",
@@ -630,7 +642,7 @@ function chromeTheme(dark) {
 			backgroundImage: "none",
 			backgroundColor: colors.surface0.hex,
 			border: hairline,
-			borderRadius: "6px",
+			borderRadius: inkstoneRadius("medium", "6px"),
 			cursor: "pointer"
 		},
 		".cm-panel .cm-button:hover": { backgroundColor: colors.surface1.hex },
@@ -688,7 +700,7 @@ function installDiffChrome(root) {
 	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 { color: inherit; border-radius: ${inkstoneRadius("small", "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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-codemirror",
-  "version": "0.18.0",
+  "version": "0.19.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.18.0"
+    "@coldsmirk/inkstone-core": "^0.19.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",