@coldsmirk/inkstone-codemirror 0.27.3 → 0.28.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 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.
+- **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.
 - **`searchPhrasesZhCn`** — an opt-in `EditorState.phrases` table localizing the search panel to Simplified Chinese.
 
 ## Install

package/dist/index.d.ts

@@ -554,7 +554,8 @@ declare const searchPhrasesZhCn: Extension;
  * 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
+ * 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
  * package's baseTheme by CodeMirror's theme-over-base contract, and a caller theme layered
  * after it still overrides it.
  */
@@ -562,7 +563,8 @@ 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.
+ * follow the chrome's muted text (a host's, else the flavor's) and flip with `dark`. The
+ * editors paint their own colors over it.
  */
 declare function diffChromeColor(dark: boolean): string;
 /**

package/dist/index.js

@@ -401,9 +401,14 @@ function toCssSize(value) {
 function alphaOf(color, alphaValue) {
 	return `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${alphaValue})`;
 }
+function fade(color, percent) {
+	return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+}
 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)}")`;
+	return svgImage("viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"", body);
+}
+function svgImage(attributes, body) {
+	return `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" ${attributes}>${body}</svg>`)}")`;
 }
 const COMPLETION_ICON_FALLBACK = completionIconMask("<circle cx=\"8\" cy=\"8\" r=\"2.5\"/>");
 const COMPLETION_ICONS = {
@@ -428,29 +433,83 @@ function completionIconRules() {
 	};
 	return rules;
 }
+const SEVERITIES = [
+	"error",
+	"warning",
+	"info",
+	"hint"
+];
+function squiggle(color) {
+	return svgImage("width=\"6\" height=\"3\"", `<path d="m0 2.5 l2 -1.5 l1 0 l2 1.5 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>`);
+}
+const LINT_MARKER_SHAPES = {
+	error: "<circle cx=\"20\" cy=\"20\" r=\"15\"/>",
+	warning: "<path d=\"M20 6L37 35L3 35Z\"/>",
+	info: "<path d=\"M5 5L35 5L35 35L5 35Z\"/>"
+};
+const HINT_MARK_SHAPE = "<circle cx=\"20\" cy=\"20\" r=\"9\"/>";
+function lintMarker(shape, color) {
+	return svgImage(`viewBox="0 0 40 40" fill="${color}" fill-opacity=".35" stroke="${color}" stroke-width="6" stroke-linejoin="round"`, shape);
+}
+function diagnosticRules(palette) {
+	const rules = {};
+	for (const severity of SEVERITIES) {
+		const color = palette[severity];
+		const shape = LINT_MARKER_SHAPES[severity];
+		rules[`.cm-diagnostic-${severity}`] = { borderLeft: "none" };
+		rules[`.cm-diagnostic-${severity}::before`] = { backgroundImage: lintMarker(shape ?? HINT_MARK_SHAPE, color) };
+		rules[`.cm-lintRange-${severity}`] = { backgroundImage: squiggle(color) };
+		rules[`.cm-lintPoint-${severity}:after`] = { borderBottomColor: color };
+		if (shape !== void 0) rules[`.cm-lint-marker-${severity}`] = { content: lintMarker(shape, color) };
+	}
+	return rules;
+}
 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 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: colors.text.hex,
+		color: foreground,
 		...surface.widget !== void 0 && { backgroundColor: surface.widget }
 	};
 	const gutters = {
 		...surface.background !== void 0 && { backgroundColor: surface.background },
 		...surface.lineNumber !== void 0 && { color: surface.lineNumber }
 	};
+	const caret = surface.cursor === void 0 ? {} : {
+		".cm-content": { caretColor: surface.cursor },
+		".cm-cursor, .cm-dropCursor": { borderLeftColor: surface.cursor }
+	};
+	const tooltipArrow = surface.widget === void 0 ? {} : {
+		".cm-tooltip .cm-tooltip-arrow:before": {
+			borderTopColor: surface.widgetBorder ?? "transparent",
+			borderBottomColor: surface.widgetBorder ?? "transparent"
+		},
+		".cm-tooltip .cm-tooltip-arrow:after": {
+			borderTopColor: surface.widget,
+			borderBottomColor: surface.widget
+		}
+	};
 	return EditorView.theme({
 		"&": {
 			colorScheme: dark ? "dark" : "light",
 			...surface.background !== void 0 && { backgroundColor: surface.background }
 		},
 		...Object.keys(gutters).length > 0 && { ".cm-gutters": gutters },
+		...caret,
 		".cm-scroller": { fontFamily: CODE_FONT_FAMILY },
 		".cm-tooltip": frame,
+		...tooltipArrow,
 		".cm-tooltip.cm-tooltip-autocomplete": {
 			...frame,
 			paddingBlock: "4px",
@@ -466,7 +525,10 @@ function chromeTheme(dark) {
 				borderRadius: inkstoneRadius("medium", "5px"),
 				lineHeight: "1.45"
 			},
-			...surface.widgetSelection !== void 0 && { "& > ul > li[aria-selected]": { backgroundColor: surface.widgetSelection } }
+			"& > ul > li[aria-selected]": {
+				color: foreground,
+				...surface.widgetSelection !== void 0 && { backgroundColor: surface.widgetSelection }
+			}
 		},
 		".cm-completionLabel": {
 			minWidth: "0",
@@ -476,20 +538,20 @@ function chromeTheme(dark) {
 		".cm-completionMatchedText": {
 			textDecoration: "none",
 			fontWeight: "600",
-			color: colors.blue.hex
+			color: accent
 		},
 		".cm-completionDetail": {
 			marginLeft: "auto",
 			paddingLeft: "12px",
 			fontStyle: "normal",
 			fontSize: "85%",
-			color: colors.overlay1.hex
+			color: muted
 		},
 		".cm-completionIcon": {
 			width: "14px",
 			paddingRight: "8px",
 			opacity: "1",
-			color: colors.overlay1.hex
+			color: muted
 		},
 		".cm-completionIcon:after": {
 			content: "''",
@@ -513,7 +575,7 @@ function chromeTheme(dark) {
 		".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-text": { color: muted },
 		".cm-completionIcon-class, .cm-completionIcon-type, .cm-completionIcon-interface, .cm-completionIcon-enum": { color: colors.yellow.hex },
 		".cm-tooltip.cm-completionInfo": {
 			...frame,
@@ -525,39 +587,70 @@ function chromeTheme(dark) {
 			maxWidth: "26em",
 			overflowWrap: "anywhere"
 		},
+		".cm-gutter-lint .cm-gutterElement": { padding: "calc((1lh - 1em) / 2) .2em 0" },
 		".cm-diagnostic": {
+			display: "grid",
+			gridTemplateColumns: "0.9em minmax(0, 1fr)",
+			columnGap: "0.6em",
+			rowGap: "4px",
 			margin: "0",
 			padding: "3px 8px",
-			borderLeftWidth: "3px",
 			borderRadius: inkstoneRadius("medium", "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-diagnostic::before": {
+			content: "''",
+			gridColumn: "1",
+			gridRow: "1",
+			height: "1lh",
+			backgroundPosition: "center",
+			backgroundSize: "0.9em",
+			backgroundRepeat: "no-repeat"
+		},
+		".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
+		}),
 		".cm-diagnosticAction": {
-			padding: "2px 6px",
-			backgroundColor: colors.surface1.hex,
-			color: colors.text.hex,
+			justifySelf: "start",
+			margin: "0",
+			padding: "1px 6px",
+			color: foreground,
+			backgroundColor: "transparent",
+			border: hairline,
 			borderRadius: inkstoneRadius("small", "4px")
 		},
+		".cm-diagnosticAction:hover, .cm-diagnosticAction:active": { backgroundColor: controlFill },
 		".cm-diagnosticSource": {
 			fontSize: "85%",
-			color: colors.overlay1.hex,
+			color: muted,
 			opacity: "1"
 		},
+		".cm-panel.cm-panel-lint ul [aria-selected], .cm-panel.cm-panel-lint ul:focus [aria-selected]": {
+			backgroundColor: controlFill,
+			color: foreground
+		},
+		".cm-panel.cm-panel-lint [name=close]": { color: muted },
 		"&.cm-focused": { outline: "none" },
 		".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) },
+		".cm-activeLineGutter": {
+			backgroundColor: surface.lineHighlight ?? alphaOf(colors.overlay0, .12),
+			...surface.lineNumberActive !== void 0 && { color: surface.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: `${alphaOf(colors.overlay0, .55)} transparent`
+			scrollbarColor: `${surface.scrollbar ?? alphaOf(colors.overlay0, .55)} transparent`
+		},
+		".cm-panels": {
+			color: foreground,
+			...surface.widget !== void 0 && { backgroundColor: surface.widget }
 		},
-		...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": {
@@ -582,7 +675,7 @@ function chromeTheme(dark) {
 			gap: "6px",
 			margin: "0",
 			fontSize: "12.5px",
-			color: colors.subtext0.hex,
+			color: label,
 			cursor: "pointer",
 			userSelect: "none"
 		},
@@ -590,7 +683,7 @@ function chromeTheme(dark) {
 			margin: "0",
 			width: "14px",
 			height: "14px",
-			accentColor: colors.blue.hex
+			accentColor: accent
 		},
 		".cm-panel.cm-search button[name=close]": {
 			position: "absolute",
@@ -605,15 +698,15 @@ function chromeTheme(dark) {
 			justifyContent: "center",
 			fontSize: "16px",
 			lineHeight: "1",
-			color: colors.overlay1.hex,
+			color: muted,
 			background: "transparent",
 			border: "none",
 			borderRadius: inkstoneRadius("medium", "6px"),
 			cursor: "pointer"
 		},
 		".cm-panel.cm-search button[name=close]:hover": {
-			backgroundColor: colors.surface0.hex,
-			color: colors.text.hex
+			backgroundColor: controlFill,
+			color: foreground
 		},
 		".cm-panel .cm-textfield": {
 			boxSizing: "border-box",
@@ -623,15 +716,16 @@ function chromeTheme(dark) {
 			margin: "0",
 			padding: "0 10px",
 			fontSize: "12.5px",
-			color: colors.text.hex,
+			color: foreground,
 			backgroundColor: surface.background ?? colors.base.hex,
 			border: hairline,
 			borderRadius: inkstoneRadius("medium", "6px")
 		},
+		".cm-panel .cm-textfield::placeholder": { color: muted },
 		".cm-panel .cm-textfield:focus": {
 			outline: "none",
-			borderColor: alphaOf(colors.blue, .6),
-			boxShadow: `0 0 0 2px ${alphaOf(colors.blue, .2)}`
+			borderColor: fade(accent, 60),
+			boxShadow: `0 0 0 2px ${fade(accent, 20)}`
 		},
 		".cm-panel .cm-button": {
 			boxSizing: "border-box",
@@ -639,17 +733,16 @@ function chromeTheme(dark) {
 			margin: "0",
 			padding: "0 12px",
 			fontSize: "12.5px",
-			color: colors.text.hex,
+			color: foreground,
 			backgroundImage: "none",
-			backgroundColor: colors.surface0.hex,
+			backgroundColor: "transparent",
 			border: hairline,
 			borderRadius: inkstoneRadius("medium", "6px"),
 			cursor: "pointer"
 		},
-		".cm-panel .cm-button:hover": { backgroundColor: colors.surface1.hex },
-		".cm-panel .cm-button:active": {
+		".cm-panel .cm-button:hover, .cm-panel .cm-button:active": {
 			backgroundImage: "none",
-			backgroundColor: colors.surface1.hex
+			backgroundColor: controlFill
 		}
 	}, { dark });
 }
@@ -675,6 +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 removed = colors.red;
 	const added = colors.green;
 	const underline = (color) => `linear-gradient(${alphaOf(color, .5)}, ${alphaOf(color, .5)}) bottom/100% 2px no-repeat`;
@@ -686,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: colors.subtext0.hex,
-			background: `linear-gradient(to bottom, transparent 0, ${colors.surface0.hex} 30%, ${colors.surface0.hex} 70%, transparent 100%)`
+			color: surface.widgetForegroundMuted ?? colors.subtext0.hex,
+			background: `linear-gradient(to bottom, transparent 0, ${band} 30%, ${band} 70%, transparent 100%)`
 		}
 	}, { dark });
 }
 function diffChromeColor(dark) {
-	return (dark ? flavors.macchiato : flavors.latte).colors.overlay1.hex;
+	return getEditorSurface(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.27.3",
+  "version": "0.28.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.27.3"
+    "@coldsmirk/inkstone-core": "^0.28.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",