@coldsmirk/inkstone-core 0.27.4 → 0.28.0

package/README.md

@@ -10,7 +10,7 @@ Part of [inkstone](https://github.com/coldsmirk/inkstone). The editor layers ([`
 - **`configureHighlighter(config)`** — extend or replace the default grammar / theme set, and choose the regex engine, once, before any editor mounts. `DEFAULT_HIGHLIGHTER_LANGS` is exported so extension is additive. `engine` takes the engine itself, a promise of one, or a factory called once when the highlighter is first built — configuration stays synchronous while the engine may be async to make: the strict JavaScript engine by default, `createJavaScriptRegexEngine({ forgiving: true })` for grammars the strict one refuses, or `onigurumaEngine`.
 - **`onigurumaEngine`** — the Oniguruma engine on its WASM, inlined into a chunk of your own bundle (about 600 KB, nothing fetched from anywhere else) and instantiated once, in about 20 ms. Which engine: the JavaScript one translates each grammar's patterns into JavaScript at the first tokenization, on the main thread, and pays for it on whole files — a TypeScript file's first sixty lines cost it about 170 ms, against Oniguruma's 20. Colouring fenced snippets, keep the default; reading whole files in an editor (`@coldsmirk/inkstone-monaco`'s Shiki bridge, `<MonacoEditor>`), pass `onigurumaEngine` as the factory. `onigurumaEngine(wasm)` takes the WASM from elsewhere in any form Shiki's `createOnigurumaEngine` accepts, such as a `fetch("/onig.wasm")`.
 - **`shikiThemeId(dark)`** plus the `INKSTONE_LIGHT_THEME` / `INKSTONE_DARK_THEME` constants — the theme names to pass wherever a Shiki theme id is expected.
-- **`configureEditorSurface(surfaces)`** — re-light the editors' own surfaces in your design language, once, before any editor mounts: per-scheme CSS color literals for `background` (content and gutter), `lineHighlight`, `lineNumber`, `widget` (completion, hover, parameter hints, the find widget and search panels), `widgetBorder`, and `widgetSelection`. The catppuccin pair keeps its syntax palette and gets these baked into its theme colors — Monaco, static rendering, and CodeMirror's chrome all read the same values — so an editor sits inside the app instead of bringing a second dark. A role or scheme left out keeps the flavor's own color, a later call replaces the schemes it names, and values must be hex colors (`#rrggbb`, `#rrggbbaa`) — Monaco parses theme colors as hex and paints red for anything else, so a `var()` reference or an `rgb(…)` is refused up front. Keep `lineHighlight` translucent: CodeMirror draws selections behind the content, so an opaque active line would hide them. `getEditorSurface(dark)` reads what was configured.
+- **`configureEditorSurface(surfaces)`** — re-light every color the editors paint that is not syntax, in your design language, once, before any editor mounts. Per scheme, CSS color literals for the editor (`background` — content, gutter and the fields of its chrome — `lineHighlight`, `lineNumber`, `lineNumberActive`, `cursor`, `selection`, `scrollbar`), its floating chrome — completion, hover, parameter hints, the find widget and search panels, the context menu — (`widget`, `widgetBorder`, `widgetSelection`, `widgetForeground`, `widgetForegroundMuted`), the `accent` that rings a focused field and marks what a completion matched, and the diagnostic severities `error`, `warning`, `info` and `hint`, named as CodeMirror's `Diagnostic.severity` names them. The catppuccin pair keeps its syntax palette — token colors, the editor's default text, the completion-kind icons that mirror them — and gets these baked into its theme colors — Monaco, static rendering, and CodeMirror's chrome all read the same values — so an editor sits inside the app instead of bringing a second dark. A role or scheme left out keeps the flavor's own color, a later call replaces the schemes it names, and values must be hex colors (`#rrggbb`, `#rrggbbaa`) — Monaco parses theme colors as hex and paints red for anything else, so a `var()` reference or an `rgb(…)` is refused up front. Keep `lineHighlight` translucent: CodeMirror draws selections behind the content, so an opaque active line would hide them. `selection` shows at half its alpha while the editor is unfocused, in both engines; `scrollbar` has no hover state (CodeMirror's `scrollbar-color` has none, so Monaco's slider keeps it too). `getEditorSurface(dark)` reads what was configured.
 - **`CODE_FONT_FAMILY`** — the shared code font stack both editor engines render with: the page's `--inkstone-font-family-code` CSS token when defined, else the platform's native monospace.
 - **`inkstoneRadius(size, fallback)` / `inkstoneShadow(size, fallback)`** — `var()` references to the host's `--inkstone-radius-{small,medium,large,xlarge}` and `--inkstone-shadow-{medium,large,xlarge}` tokens. Set them once on your root and both engines' chrome follows: the Monaco host maps them onto VS Code's `--vscode-cornerRadius-*` / `--vscode-shadow-*` design tokens (which the standalone editor never defines), CodeMirror's polish reads them directly; unset, each engine keeps the look it ships with.
 
@@ -32,10 +32,10 @@ import yaml from "@shikijs/langs/yaml";
 // for an app that reads whole files in an editor, the Oniguruma engine (see above).
 configureHighlighter({ langs: [...DEFAULT_HIGHLIGHTER_LANGS, yaml], engine: onigurumaEngine });
 
-// Optional: paint the editors' surfaces in your own tokens (syntax colors stay catppuccin's).
+// Optional: paint the editors' chrome in your own tokens (syntax colors stay catppuccin's).
 configureEditorSurface({
-  light: { background: "#f7f7fa", lineHighlight: "#ffffff", widget: "#ffffff", widgetBorder: "#ced4da" },
-  dark: { background: "#1d1b22", lineHighlight: "#232129", widget: "#302e38", widgetBorder: "#423f4b" }
+  light: { background: "#f7f7fa", lineHighlight: "#16171a0a", widget: "#ffffff", widgetBorder: "#ced4da", accent: "#228be6", error: "#e03131" },
+  dark: { background: "#1d1b22", lineHighlight: "#ffffff0a", widget: "#302e38", widgetBorder: "#423f4b", accent: "#4dabf7", error: "#ff6b6b" }
 });
 
 const highlighter = await getHighlighter();

package/dist/index.d.ts

@@ -10,10 +10,11 @@ declare const CODE_FONT_FAMILY = "var(--inkstone-font-family-code, ui-monospace,
 //#endregion
 //#region src/surface.d.ts
 /**
- * The surfaces an editor paints, as a host's design language names them. A host that
- * configures these keeps the catppuccin flavors' syntax palette and gets the editor's own
- * chrome — background, gutter, current line, the floating completion / hover / find widgets —
- * in its own tokens, so an editor sits inside the app instead of bringing a second dark.
+ * The colors an editor paints that are not its syntax, as a host's design language names
+ * them. A host that configures these keeps the catppuccin flavors' syntax palette and gets the
+ * editor's own chrome — background, gutter, current line, caret and selection, the floating
+ * completion / hover / find widgets and the signals on them — in its own tokens, so an editor
+ * sits inside the app instead of bringing a second dark.
  *
  * Every value is a hex color (`#rrggbb`, `#rrggbbaa`): Monaco parses its theme colors itself,
  * as hex only, and cannot follow a custom property. An omitted role keeps the flavor's own
@@ -21,7 +22,8 @@ declare const CODE_FONT_FAMILY = "var(--inkstone-font-family-code, ui-monospace,
  */
 interface EditorSurface {
   /**
-   * The editor's own background: the content area and the gutter.
+   * The editor's own background: the content area and the gutter, and the fields inside
+   * floating chrome.
    */
   background?: string;
   /**
@@ -34,19 +36,69 @@ interface EditorSurface {
    * Line numbers.
    */
   lineNumber?: string;
+  /**
+   * The current line's number.
+   */
+  lineNumberActive?: string;
+  /**
+   * The caret, and the drop cursor of a drag.
+   */
+  cursor?: string;
+  /**
+   * Selected text while the editor has focus. Unfocused, both editors show it at half its
+   * alpha (Monaco's own `editor.inactiveSelectionBackground` rule).
+   */
+  selection?: string;
+  /**
+   * The scrollbar's thumb, the same under the pointer: CodeMirror's scrollers paint it through
+   * the standard `scrollbar-color`, which has no hover state, and Monaco's slider takes it at
+   * rest, hovered and dragged alike.
+   */
+  scrollbar?: string;
   /**
    * Floating chrome: completion, hover and parameter hints, the find widget and the search
-   * panels.
+   * panels, the context menu.
    */
   widget?: string;
   /**
-   * The hairline around floating chrome and its fields.
+   * The hairline around floating chrome and its fields, and between a menu's groups.
    */
   widgetBorder?: string;
   /**
-   * A hovered or selected row inside floating chrome.
+   * A hovered or selected row inside floating chrome, and a hovered or toggled-on control.
    */
   widgetSelection?: string;
+  /**
+   * Text on floating chrome, its fields and its buttons.
+   */
+  widgetForeground?: string;
+  /**
+   * Secondary text and icons on floating chrome: a completion's detail, an option's label, a
+   * field's placeholder, a close button, a diagnostic's source.
+   */
+  widgetForegroundMuted?: string;
+  /**
+   * The host's accent: the ring around a focused field, a checked option, the characters a
+   * completion or quick pick matched.
+   */
+  accent?: string;
+  /**
+   * An error diagnostic: its squiggle, gutter marker and message bar, and its marks in the
+   * overview ruler and minimap.
+   */
+  error?: string;
+  /**
+   * A warning diagnostic, marked as an error is.
+   */
+  warning?: string;
+  /**
+   * An info diagnostic, marked as an error is.
+   */
+  info?: string;
+  /**
+   * A hint diagnostic: its squiggle (dots under the range in Monaco) and message bar.
+   */
+  hint?: string;
 }
 /**
  * One surface per color scheme; an omitted scheme keeps the flavor's own surfaces.

package/dist/index.js

@@ -30,26 +30,95 @@ const SURFACE_COLORS = {
 	],
 	lineHighlight: ["editor.lineHighlightBackground", "editorStickyScrollHover.background"],
 	lineNumber: ["editorLineNumber.foreground"],
+	lineNumberActive: ["editorLineNumber.activeForeground"],
+	cursor: ["editorCursor.foreground"],
+	selection: ["editor.selectionBackground"],
+	scrollbar: [
+		"scrollbarSlider.background",
+		"scrollbarSlider.hoverBackground",
+		"scrollbarSlider.activeBackground"
+	],
 	widget: [
 		"editorWidget.background",
 		"editorSuggestWidget.background",
 		"editorHoverWidget.background",
-		"dropdown.background"
+		"dropdown.background",
+		"menu.background"
 	],
 	widgetBorder: [
 		"editorWidget.border",
 		"editorWidget.resizeBorder",
 		"editorSuggestWidget.border",
 		"editorHoverWidget.border",
-		"dropdown.border"
+		"dropdown.border",
+		"input.border",
+		"menu.border",
+		"menu.separatorBackground"
 	],
 	widgetSelection: [
 		"editorSuggestWidget.selectedBackground",
 		"list.activeSelectionBackground",
 		"list.inactiveSelectionBackground",
 		"list.focusBackground",
-		"list.hoverBackground"
-	]
+		"list.focusAndSelectionBackground",
+		"list.hoverBackground",
+		"menu.selectionBackground",
+		"toolbar.hoverBackground",
+		"inputOption.hoverBackground",
+		"inputOption.activeBackground"
+	],
+	widgetForeground: [
+		"editorWidget.foreground",
+		"editorSuggestWidget.foreground",
+		"editorHoverWidget.foreground",
+		"dropdown.foreground",
+		"input.foreground",
+		"inputOption.activeForeground",
+		"list.activeSelectionForeground",
+		"list.inactiveSelectionForeground",
+		"list.focusForeground",
+		"list.hoverForeground",
+		"menu.foreground",
+		"menu.selectionForeground"
+	],
+	widgetForegroundMuted: [
+		"descriptionForeground",
+		"input.placeholderForeground",
+		"icon.foreground"
+	],
+	accent: [
+		"focusBorder",
+		"inputOption.activeBorder",
+		"list.highlightForeground",
+		"list.focusHighlightForeground",
+		"editorSuggestWidget.highlightForeground",
+		"editorSuggestWidget.focusHighlightForeground",
+		"pickerGroup.foreground",
+		"sash.hoverBorder"
+	],
+	error: [
+		"editorError.foreground",
+		"editorOverviewRuler.errorForeground",
+		"editorMarkerNavigationError.background",
+		"minimap.errorHighlight",
+		"problemsErrorIcon.foreground",
+		"errorForeground"
+	],
+	warning: [
+		"editorWarning.foreground",
+		"editorOverviewRuler.warningForeground",
+		"editorMarkerNavigationWarning.background",
+		"minimap.warningHighlight",
+		"problemsWarningIcon.foreground"
+	],
+	info: [
+		"editorInfo.foreground",
+		"editorOverviewRuler.infoForeground",
+		"editorMarkerNavigationInfo.background",
+		"minimap.infoHighlight",
+		"problemsInfoIcon.foreground"
+	],
+	hint: ["editorHint.foreground"]
 };
 function surfacedTheme(theme, surface) {
 	const roles = Object.entries(SURFACE_COLORS);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-core",
-  "version": "0.27.4",
+  "version": "0.28.0",
   "description": "Shared Shiki highlighter service for the inkstone editor toolkit: one fine-grained singleton (catppuccin themes, the JS regex engine by default or Oniguruma on request) reused by Monaco, static rendering, and markdown surfaces.",
   "keywords": [
     "shiki",