@coldsmirk/inkstone-mantine 0.11.0

package/README.md

@@ -0,0 +1,63 @@
+# @coldsmirk/inkstone-mantine
+
+The [Mantine](https://mantine.dev/) bridge for the inkstone highlighter: a
+[`CodeHighlight` adapter](https://mantine.dev/x/code-highlight/) that renders every static code
+block through the shared Shiki singleton from
+[`@coldsmirk/inkstone-core`](https://www.npmjs.com/package/@coldsmirk/inkstone-core), themed with
+the same catppuccin pair (latte light / macchiato dark) the inkstone editors select — one
+engine, one palette, across live editors and read-only blocks alike.
+
+Part of [inkstone](https://github.com/coldsmirk/inkstone).
+
+## Why not Mantine's `createShikiAdapter`?
+
+Mantine's built-in Shiki adapter accepts your highlighter but not your themes: for the `light` and
+`dark` color schemes it substitutes its own bundled GitHub-flavoured theme objects. A highlighter
+that loaded catppuccin renders GitHub colors anyway, and the app's static code blocks silently
+drift from its editors. This adapter selects the inkstone theme pair by the computed color scheme
+instead, so the drift cannot happen.
+
+## What you get
+
+- **`codeHighlightAdapter`** — pass it to `CodeHighlightAdapterProvider` once; every
+  `CodeHighlight` / `InlineCodeHighlight` below it highlights through the shared singleton.
+
+Degradation is total, never throwing into React: if the highlighter fails to load, blocks render
+as plain text (logged, and retried by a later provider mount); a language without a loaded grammar
+renders that block as plain text (warned once per language).
+
+## Install
+
+```bash
+pnpm add @coldsmirk/inkstone-mantine @mantine/code-highlight
+```
+
+`@mantine/code-highlight` (>= 8) is a peer dependency — the app owns its Mantine version.
+`@coldsmirk/inkstone-core` installs automatically. Node.js >= 24 for build / SSR hosts.
+
+## Usage
+
+```tsx
+import { codeHighlightAdapter } from "@coldsmirk/inkstone-mantine";
+import { CodeHighlightAdapterProvider } from "@mantine/code-highlight";
+import { MantineProvider } from "@mantine/core";
+
+createRoot(document.querySelector("#root")!).render(
+  <MantineProvider defaultColorScheme="auto">
+    <CodeHighlightAdapterProvider adapter={codeHighlightAdapter}>
+      <App />
+    </CodeHighlightAdapterProvider>
+  </MantineProvider>
+);
+```
+
+The core defaults load JavaScript / TypeScript / JSON / SQL. Need more? Extend the shared
+highlighter before anything renders — the editors and the code blocks pick up the grammar
+together:
+
+```ts
+import { configureHighlighter, DEFAULT_HIGHLIGHTER_LANGS } from "@coldsmirk/inkstone-core";
+import langYaml from "@shikijs/langs/yaml";
+
+configureHighlighter({ langs: [...DEFAULT_HIGHLIGHTER_LANGS, langYaml] });
+```

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import { CodeHighlightAdapter } from "@mantine/code-highlight";
+
+//#region src/code-highlight.d.ts
+/**
+ * Mantine `CodeHighlight` adapter over the shared inkstone highlighter: install it once via
+ * `CodeHighlightAdapterProvider`, and every `CodeHighlight` / `InlineCodeHighlight` renders
+ * through the same Shiki singleton the inkstone editors tokenize with, themed with the same
+ * catppuccin pair (latte light / macchiato dark) the editors select — one engine, one palette,
+ * flipped by Mantine's computed color scheme.
+ *
+ * This exists because Mantine's own `createShikiAdapter` cannot express that: for the `light` /
+ * `dark` schemes it substitutes its bundled GitHub-flavoured theme objects, silently sidelining
+ * whatever themes the supplied highlighter loaded — static code blocks and live editors drift
+ * into two palettes.
+ *
+ * Degradation is total, never throwing into React: if the highlighter fails to load the adapter
+ * stays in plain-text mode (the failure is logged, and `getHighlighter` does not cache it — a
+ * later provider mount retries); a language the highlighter has no grammar for falls back to
+ * that block rendering as plain text (warned once per language). Grammars beyond the
+ * `@coldsmirk/inkstone-core` defaults are loaded app-side with `configureHighlighter`, before
+ * anything highlights.
+ */
+declare const codeHighlightAdapter: CodeHighlightAdapter;
+//#endregion
+export { codeHighlightAdapter };

package/dist/index.js

@@ -0,0 +1,38 @@
+import { getHighlighter, shikiThemeId } from "@coldsmirk/inkstone-core";
+import { stripShikiCodeBlocks } from "@mantine/code-highlight";
+//#region src/code-highlight.ts
+const warnedLanguages = /* @__PURE__ */ new Set();
+function plainText(code) {
+	return {
+		highlightedCode: code,
+		isHighlighted: false
+	};
+}
+const codeHighlightAdapter = {
+	loadContext: () => getHighlighter().catch((error) => {
+		console.error("inkstone: shiki highlighter failed to load", error);
+	}),
+	getHighlighter: (ctx) => {
+		if (!ctx) return ({ code }) => plainText(code);
+		return ({ code, language, colorScheme }) => {
+			const lang = language ?? "text";
+			try {
+				return {
+					isHighlighted: true,
+					highlightedCode: stripShikiCodeBlocks(ctx.codeToHtml(code, {
+						lang,
+						theme: shikiThemeId(colorScheme === "dark")
+					}))
+				};
+			} catch (error) {
+				if (!warnedLanguages.has(lang)) {
+					warnedLanguages.add(lang);
+					console.warn(`inkstone: no grammar loaded for language "${lang}", rendering plain text`, error);
+				}
+				return plainText(code);
+			}
+		};
+	}
+};
+//#endregion
+export { codeHighlightAdapter };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@coldsmirk/inkstone-mantine",
+  "version": "0.11.0",
+  "description": "Mantine adapter for the inkstone Shiki highlighter: a CodeHighlight adapter that renders through the shared singleton with its catppuccin pair — the same palette the inkstone editors use.",
+  "keywords": [
+    "mantine",
+    "shiki",
+    "code-highlight",
+    "syntax-highlighting",
+    "catppuccin"
+  ],
+  "homepage": "https://github.com/coldsmirk/inkstone/tree/main/packages/mantine#readme",
+  "bugs": "https://github.com/coldsmirk/inkstone/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/coldsmirk/inkstone.git",
+    "directory": "packages/mantine"
+  },
+  "license": "UNLICENSED",
+  "author": {
+    "name": "Venus"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@coldsmirk/inkstone-core": "^0.11.0"
+  },
+  "devDependencies": {
+    "@mantine/code-highlight": "^9.4.1",
+    "@mantine/core": "^9.4.1",
+    "@mantine/hooks": "^9.4.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "peerDependencies": {
+    "@mantine/code-highlight": "^8.0.0 || ^9.0.0"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "clean": "rimraf dist",
+    "typecheck": "tsc --noEmit"
+  }
+}