@workbench-kit/monaco 0.0.2-prototype.0.2.10 → 0.0.2-prototype.0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/monaco",
-  "version": "0.0.2-prototype.0.2.10",
+  "version": "0.0.2-prototype.0.2.11",
   "private": false,
   "type": "module",
   "exports": {

package/src/index.ts

@@ -14,15 +14,28 @@ export {
 export {
   MONACO_DARK_THEME_ID,
   MONACO_LIGHT_THEME_ID,
+  buildDefaultMonacoTokenRules,
   buildMonacoThemeColors,
   defineMonacoWorkbenchTheme,
+  defineOrUpdateWorkbenchMonacoTheme,
+  getWorkbenchMonacoTokenRules,
   getWorkbenchThemeAppearanceSignature,
+  mergeMonacoTokenRules,
+  monacoRulesFromTokenColors,
   monacoThemeForWorkspaceTheme,
   readWorkbenchThemeColors,
   resolveMonacoThemeRoot,
+  setWorkbenchMonacoTokenRules,
+  toMonacoTokenColor,
   withAlpha,
+  buildWorkbenchMonacoThemeInput,
+  type DefineMonacoWorkbenchThemeOptions,
+  type MonacoTokenRule,
   type MonacoWorkbenchResolvedTheme,
+  type MonacoWorkbenchThemeBase,
+  type WorkbenchMonacoThemeInput,
   type WorkbenchThemeCssColors,
+  type WorkbenchTokenColorSetting,
 } from './monacoWorkbenchTheme.js';
 export { useMonacoWorkbenchThemeSync } from './useMonacoWorkbenchThemeSync.js';
 export { configureWorkspaceEditorTypeScriptDiagnostics } from './workspaceTypeScriptDiagnostics.js';

package/src/monacoWorkbenchTheme.ts

@@ -5,6 +5,35 @@ export const MONACO_LIGHT_THEME_ID = 'workbench-kit-light';
 
 export type MonacoWorkbenchResolvedTheme = 'dark' | 'light';
 
+export type MonacoWorkbenchThemeBase = 'vs' | 'vs-dark' | 'hc-black';
+
+/** Monaco `editor.defineTheme` token rule (syntax highlighting). */
+export interface MonacoTokenRule {
+  readonly token: string;
+  readonly foreground?: string;
+  readonly background?: string;
+  readonly fontStyle?: string;
+}
+
+/**
+ * VS Code–compatible `tokenColors` entry (TextMate scope settings).
+ * Hosts may pass theme JSON `tokenColors` through `monacoRulesFromTokenColors`.
+ */
+export interface WorkbenchTokenColorSetting {
+  readonly scope?: string | readonly string[];
+  readonly settings?: {
+    readonly foreground?: string;
+    readonly background?: string;
+    readonly fontStyle?: string;
+  };
+}
+
+export interface WorkbenchMonacoThemeInput {
+  readonly base: MonacoWorkbenchThemeBase;
+  readonly colors?: Readonly<Record<string, string>>;
+  readonly rules?: readonly MonacoTokenRule[];
+}
+
 export interface WorkbenchThemeCssColors {
   accent: string;
   bg: string;
@@ -22,6 +51,17 @@ export interface WorkbenchThemeCssColors {
   textSubtle: string;
 }
 
+/** Optional host-provided syntax rules merged on every workbench theme define. */
+let activeHostTokenRules: readonly MonacoTokenRule[] | undefined;
+
+export function setWorkbenchMonacoTokenRules(rules: readonly MonacoTokenRule[] | undefined): void {
+  activeHostTokenRules = rules;
+}
+
+export function getWorkbenchMonacoTokenRules(): readonly MonacoTokenRule[] | undefined {
+  return activeHostTokenRules;
+}
+
 function readCssVariable(root: HTMLElement, variableName: string): string {
   return getComputedStyle(root).getPropertyValue(variableName).trim();
 }
@@ -132,6 +172,187 @@ export function buildMonacoThemeColors(colors: WorkbenchThemeCssColors): monaco.
   };
 }
 
+/**
+ * Monaco token `foreground` / `background` values omit `#`.
+ * Invalid or empty colors are skipped by callers.
+ */
+export function toMonacoTokenColor(color: string | undefined): string | undefined {
+  if (!color) {
+    return undefined;
+  }
+  const trimmed = color.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const withoutHash = trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;
+  // Drop alpha channel when present (#RRGGBBAA → RRGGBB) for token rules.
+  if (/^[0-9a-fA-F]{8}$/.test(withoutHash)) {
+    return withoutHash.slice(0, 6);
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(withoutHash) || /^[0-9a-fA-F]{3}$/.test(withoutHash)) {
+    return withoutHash;
+  }
+  // Non-hex (rgb/hsl/var) — Monaco rules require hex; skip safely.
+  return undefined;
+}
+
+/**
+ * Default syntax rules derived from chrome CSS tokens so built-in Monaco
+ * languages track the active workbench palette. Hosts that load TextMate /
+ * grammar packs should supply richer rules via `setWorkbenchMonacoTokenRules`
+ * or `defineOrUpdateWorkbenchMonacoTheme`.
+ */
+export function buildDefaultMonacoTokenRules(colors: WorkbenchThemeCssColors): MonacoTokenRule[] {
+  const text = toMonacoTokenColor(colors.text);
+  const muted = toMonacoTokenColor(colors.textMuted);
+  const subtle = toMonacoTokenColor(colors.textSubtle);
+  const accent = toMonacoTokenColor(colors.accent);
+  const danger = toMonacoTokenColor(colors.danger);
+
+  const rules: MonacoTokenRule[] = [];
+  const push = (token: string, foreground: string | undefined, fontStyle?: string) => {
+    if (!foreground) {
+      return;
+    }
+    rules.push(fontStyle ? { token, foreground, fontStyle } : { token, foreground });
+  };
+
+  push('comment', subtle, 'italic');
+  push('string', accent);
+  push('string.escape', muted);
+  push('keyword', accent);
+  push('keyword.flow', accent);
+  push('number', danger);
+  push('regexp', danger);
+  push('type', accent);
+  push('class', accent);
+  push('function', text);
+  push('variable', text);
+  push('variable.predefined', muted);
+  push('constant', muted);
+  push('delimiter', muted);
+  push('delimiter.html', muted);
+  push('tag', accent);
+  push('metatag', muted);
+  push('attribute.name', muted);
+  push('attribute.value', accent);
+  push('invalid', danger);
+
+  return rules;
+}
+
+/**
+ * Best-effort map from VS Code `tokenColors` to Monaco rules.
+ * Uses the first scope segment as the Monaco token name; unknown / invalid
+ * entries are skipped (safe fallback to defaults / inherit).
+ */
+export function monacoRulesFromTokenColors(
+  tokenColors: readonly WorkbenchTokenColorSetting[],
+): MonacoTokenRule[] {
+  const rules: MonacoTokenRule[] = [];
+
+  for (const entry of tokenColors) {
+    const scopes = normalizeTokenScopes(entry.scope);
+    if (scopes.length === 0) {
+      continue;
+    }
+    const foreground = toMonacoTokenColor(entry.settings?.foreground);
+    const background = toMonacoTokenColor(entry.settings?.background);
+    const fontStyle = entry.settings?.fontStyle?.trim() || undefined;
+    if (!foreground && !background && !fontStyle) {
+      continue;
+    }
+
+    for (const scope of scopes) {
+      const token = scopeToMonacoToken(scope);
+      if (!token) {
+        continue;
+      }
+      rules.push({
+        token,
+        ...(foreground ? { foreground } : {}),
+        ...(background ? { background } : {}),
+        ...(fontStyle ? { fontStyle } : {}),
+      });
+    }
+  }
+
+  return rules;
+}
+
+function normalizeTokenScopes(scope: WorkbenchTokenColorSetting['scope']): string[] {
+  if (!scope) {
+    return [];
+  }
+  if (typeof scope === 'string') {
+    return scope
+      .split(',')
+      .map((part) => part.trim())
+      .filter(Boolean);
+  }
+  return scope.map((part) => part.trim()).filter(Boolean);
+}
+
+function scopeToMonacoToken(scope: string): string | undefined {
+  const trimmed = scope.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  // Prefer the leaf-most useful segment for Monaco's flatter token names.
+  const parts = trimmed.split('.');
+  if (parts[0] === 'comment') {
+    return 'comment';
+  }
+  if (parts[0] === 'string') {
+    return parts[1] === 'escape' ? 'string.escape' : 'string';
+  }
+  if (parts[0] === 'keyword') {
+    return parts[1] === 'control' || parts[1] === 'flow' ? 'keyword.flow' : 'keyword';
+  }
+  if (parts[0] === 'constant' && parts[1] === 'numeric') {
+    return 'number';
+  }
+  if (parts[0] === 'constant' && parts[1] === 'regexp') {
+    return 'regexp';
+  }
+  if (parts[0] === 'entity' && parts[1] === 'name' && parts[2] === 'type') {
+    return 'type';
+  }
+  if (parts[0] === 'entity' && parts[1] === 'name' && parts[2] === 'function') {
+    return 'function';
+  }
+  if (parts[0] === 'entity' && parts[1] === 'name' && parts[2] === 'tag') {
+    return 'tag';
+  }
+  if (parts[0] === 'entity' && parts[1] === 'other' && parts[2] === 'attribute-name') {
+    return 'attribute.name';
+  }
+  if (parts[0] === 'variable') {
+    return 'variable';
+  }
+  if (parts[0] === 'invalid') {
+    return 'invalid';
+  }
+  // Fall back to the raw scope so hosts using matching tokenizer names still work.
+  return trimmed;
+}
+
+/** Later lists win on duplicate `token` keys. */
+export function mergeMonacoTokenRules(
+  ...groups: Array<readonly MonacoTokenRule[] | undefined>
+): MonacoTokenRule[] {
+  const byToken = new Map<string, MonacoTokenRule>();
+  for (const group of groups) {
+    if (!group) {
+      continue;
+    }
+    for (const rule of group) {
+      byToken.set(rule.token, rule);
+    }
+  }
+  return [...byToken.values()];
+}
+
 export function resolveMonacoThemeRoot(root?: HTMLElement): HTMLElement | null {
   if (root) {
     return root;
@@ -144,24 +365,64 @@ export function resolveMonacoThemeRoot(root?: HTMLElement): HTMLElement | null {
   return document.documentElement;
 }
 
+/**
+ * Low-level `editor.defineTheme` wrapper. Safe to call on theme switches
+ * without remounting editors that already use `themeId`.
+ */
+export function defineOrUpdateWorkbenchMonacoTheme(
+  monacoInstance: typeof monaco,
+  themeId: string,
+  input: WorkbenchMonacoThemeInput,
+): void {
+  monacoInstance.editor.defineTheme(themeId, {
+    base: input.base,
+    inherit: true,
+    rules: [...(input.rules ?? [])],
+    colors: { ...(input.colors ?? {}) },
+  });
+}
+
+export interface DefineMonacoWorkbenchThemeOptions {
+  /** Extra rules merged after defaults + host registry (wins on duplicate tokens). */
+  readonly rules?: readonly MonacoTokenRule[];
+}
+
+/**
+ * Define the kit dark/light Monaco theme from live chrome CSS variables and
+ * optional host tokenColors rules. Re-callable when `data-theme` / preset changes.
+ */
+export function buildWorkbenchMonacoThemeInput(
+  resolvedTheme: MonacoWorkbenchResolvedTheme,
+  cssColors: WorkbenchThemeCssColors,
+  options?: DefineMonacoWorkbenchThemeOptions,
+): WorkbenchMonacoThemeInput {
+  return {
+    base: resolvedTheme === 'light' ? 'vs' : 'vs-dark',
+    colors: buildMonacoThemeColors(cssColors) as Record<string, string>,
+    rules: mergeMonacoTokenRules(
+      buildDefaultMonacoTokenRules(cssColors),
+      getWorkbenchMonacoTokenRules(),
+      options?.rules,
+    ),
+  };
+}
+
 export function defineMonacoWorkbenchTheme(
   monacoInstance: typeof monaco,
   resolvedTheme: MonacoWorkbenchResolvedTheme,
   root?: HTMLElement,
-) {
+  options?: DefineMonacoWorkbenchThemeOptions,
+): void {
   const themeRoot = resolveMonacoThemeRoot(root);
   if (!themeRoot) {
     return;
   }
 
-  const themeId = resolvedTheme === 'light' ? MONACO_LIGHT_THEME_ID : MONACO_DARK_THEME_ID;
-
-  monacoInstance.editor.defineTheme(themeId, {
-    base: resolvedTheme === 'light' ? 'vs' : 'vs-dark',
-    inherit: true,
-    rules: [],
-    colors: buildMonacoThemeColors(readWorkbenchThemeColors(themeRoot)),
-  });
+  defineOrUpdateWorkbenchMonacoTheme(
+    monacoInstance,
+    monacoThemeForWorkspaceTheme(resolvedTheme),
+    buildWorkbenchMonacoThemeInput(resolvedTheme, readWorkbenchThemeColors(themeRoot), options),
+  );
 }
 
 export function monacoThemeForWorkspaceTheme(theme: MonacoWorkbenchResolvedTheme) {

package/src/testing/vitestMock.tsx

@@ -28,6 +28,13 @@ export function WorkbenchMonacoEditor({
 export const useMonacoWorkbenchThemeSync = () => undefined;
 export const prepareMonacoWorkbenchEditor = () => undefined;
 export const defineMonacoWorkbenchTheme = () => undefined;
+export const defineOrUpdateWorkbenchMonacoTheme = () => undefined;
+export const setWorkbenchMonacoTokenRules = () => undefined;
+export const getWorkbenchMonacoTokenRules = () => undefined;
+export const buildDefaultMonacoTokenRules = () => [];
+export const monacoRulesFromTokenColors = () => [];
+export const mergeMonacoTokenRules = (...groups: unknown[]) => groups.flat();
+export const toMonacoTokenColor = (color: string) => color;
 export const configureWorkspaceEditorTypeScriptDiagnostics = () => undefined;
 export const monacoThemeForWorkspaceTheme = (theme: string) =>
   theme === 'light' ? MONACO_LIGHT_THEME_ID : MONACO_DARK_THEME_ID;