@djangocfg/ui-tools 2.1.404 → 2.1.408

package/src/tools/CodeEditor/hooks/useEditorTheme.ts

@@ -1,31 +1,33 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
-import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import { useEffect, useState } from 'react';
+
+/** Background used for the editor and its loading/error placeholders. */
+export const EDITOR_BACKGROUND = '#0a0a0a';
 
 /**
- * Hook that syncs Monaco editor theme with the app theme.
+ * Hook that registers and returns the Monaco editor theme.
  *
- * Reads CSS variables from the document and creates custom Monaco themes
- * that match the current light/dark mode. Falls back to built-in 'vs' / 'vs-dark'.
+ * The editor is always dark — devtool-style — regardless of the app theme.
+ * Colors are read from the document's CSS variables so the editor still
+ * matches the design tokens, with a dark fallback for SSR.
  *
  * @param monaco - Monaco namespace (null during loading)
- * @param themeOverride - Optional explicit theme name (skips auto-detection)
+ * @param themeOverride - Optional explicit theme name (skips the app theme)
  * @returns Resolved Monaco theme name to pass to editor options
  */
 export function useEditorTheme(
   monaco: typeof import('monaco-editor') | null,
   themeOverride?: string,
 ): string {
-  const appTheme = useResolvedTheme();
-  const registered = useRef(false);
+  // State (not ref) so consumers re-render once the custom theme is registered.
+  const [registered, setRegistered] = useState(false);
 
-  // Register custom themes once Monaco is loaded
   useEffect(() => {
-    if (!monaco || registered.current) return;
+    if (!monaco) return;
 
     try {
-      const colors = _readCSSColors();
+      const colors = readEditorColors();
 
       monaco.editor.defineTheme('app-dark', {
         base: 'vs-dark',
@@ -53,106 +55,97 @@ export function useEditorTheme(
         },
       });
 
-      monaco.editor.defineTheme('app-light', {
-        base: 'vs',
-        inherit: true,
-        rules: [
-          { token: 'comment', foreground: '008000', fontStyle: 'italic' },
-          { token: 'keyword', foreground: 'AF00DB' },
-          { token: 'string', foreground: 'A31515' },
-          { token: 'number', foreground: '098658' },
-          { token: 'type', foreground: '267F99' },
-          { token: 'function', foreground: '795E26' },
-          { token: 'variable', foreground: '001080' },
-        ],
-        colors: {
-          'editor.background': colors.backgroundLight,
-          'editor.foreground': colors.foregroundLight,
-          'editor.lineHighlightBackground': colors.lineHighlightLight,
-          'editor.selectionBackground': colors.selectionLight,
-          'editorLineNumber.foreground': colors.mutedForegroundLight,
-          'editorWidget.background': colors.cardLight,
-          'editorWidget.border': colors.borderLight,
-        },
-      });
-
-      registered.current = true;
+      setRegistered(true);
     } catch {
-      // Fallback — use built-in themes
+      // Fallback — use the built-in dark theme.
+      setRegistered(false);
     }
   }, [monaco]);
 
-  // If explicit override provided, use it
   if (themeOverride) return themeOverride;
-
-  // Use registered app themes if available, fallback to built-in
-  if (registered.current) {
-    return appTheme === 'dark' ? 'app-dark' : 'app-light';
-  }
-  return appTheme === 'dark' ? 'vs-dark' : 'vs';
+  return registered ? 'app-dark' : 'vs-dark';
 }
 
-
-/** Read CSS variables and convert HSL to hex for Monaco */
-function _readCSSColors() {
-  const get = (varName: string): string => {
-    if (typeof document === 'undefined') return '';
-    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+/**
+ * Read editor colors from the document's dark theme CSS variables.
+ *
+ * Tokens in `tokens.css` are stored wrapped, e.g. `--background: hsl(0 0% 4%)`,
+ * so we resolve them through the browser by painting onto a probe element and
+ * reading back the computed (already-rgb) color. This works for any color
+ * syntax (hsl/oklch/hex).
+ */
+function readEditorColors() {
+  // Dark defaults — used during SSR and as a safety net.
+  const fallback = {
+    background: EDITOR_BACKGROUND,
+    foreground: '#f5f5f5',
+    card: '#141414',
+    border: '#262626',
+    mutedForeground: '#858585',
+    lineHighlight: '#1a1a1a',
+    selection: '#264F78',
   };
 
-  const hslToHex = (hsl: string): string => {
-    if (!hsl) return '';
-    // CSS vars are "0 0% 96%" — strip % before parsing
-    const parts = hsl.split(/\s+/).map(s => parseFloat(s.replace('%', '')));
-    if (parts.length < 3 || parts.some(isNaN)) return '';
-    const [h, s, l] = [parts[0], parts[1] / 100, parts[2] / 100];
-
-    const a = s * Math.min(l, 1 - l);
-    const f = (n: number) => {
-      const k = (n + h / 30) % 12;
-      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-      return Math.round(255 * color).toString(16).padStart(2, '0');
-    };
-    return `#${f(0)}${f(8)}${f(4)}`;
-  };
+  if (typeof document === 'undefined' || typeof window === 'undefined') {
+    return fallback;
+  }
 
-  // Read current (dark) theme CSS variables
-  const background = hslToHex(get('--background')) || '#0a0a0a';
-  const foreground = hslToHex(get('--foreground')) || '#f5f5f5';
-  const card = hslToHex(get('--card')) || '#141414';
-  const border = hslToHex(get('--border')) || '#262626';
-  const mutedForeground = hslToHex(get('--muted-foreground')) || '#858585';
-
-  // Compute derived colors
-  const lineHighlight = _adjustBrightness(background, 10);
-  const primary = hslToHex(get('--primary'));
-  const selection = primary ? _adjustBrightness(primary, -40) : '#264F78';
-
-  // Light theme colors (hardcoded since we can't switch CSS context)
-  return {
-    background,
-    foreground,
-    card,
-    border,
-    mutedForeground,
-    lineHighlight,
-    selection,
-    // Light variants
-    backgroundLight: '#ffffff',
-    foregroundLight: '#1a1a1a',
-    cardLight: '#ffffff',
-    borderLight: '#e5e5e5',
-    mutedForegroundLight: '#737373',
-    lineHighlightLight: '#f5f5f5',
-    selectionLight: '#ADD6FF',
+  const probe = document.createElement('div');
+  probe.style.position = 'absolute';
+  probe.style.pointerEvents = 'none';
+  probe.style.opacity = '0';
+  document.body.appendChild(probe);
+
+  /** Resolve a CSS var to a hex color via computed style; '' on failure. */
+  const resolve = (varName: string): string => {
+    probe.style.color = `var(${varName})`;
+    const computed = getComputedStyle(probe).color;
+    return rgbToHex(computed);
   };
+
+  try {
+    const background = resolve('--background') || fallback.background;
+    const foreground = resolve('--foreground') || fallback.foreground;
+    const card = resolve('--card') || fallback.card;
+    const border = resolve('--border') || fallback.border;
+    const mutedForeground = resolve('--muted-foreground') || fallback.mutedForeground;
+    const primary = resolve('--primary');
+
+    return {
+      background,
+      foreground,
+      card,
+      border,
+      mutedForeground,
+      lineHighlight: mixHex(background, foreground, 0.06),
+      selection: primary ? mixHex(primary, background, 0.55) : fallback.selection,
+    };
+  } finally {
+    probe.remove();
+  }
 }
 
-function _adjustBrightness(hex: string, amount: number): string {
-  const num = parseInt(hex.replace('#', ''), 16);
-  const r = Math.min(255, Math.max(0, ((num >> 16) & 0xff) + amount));
-  const g = Math.min(255, Math.max(0, ((num >> 8) & 0xff) + amount));
-  const b = Math.min(255, Math.max(0, (num & 0xff) + amount));
-  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+/** Convert a computed `rgb(r, g, b)` / `rgba(...)` string to `#rrggbb`. */
+function rgbToHex(rgb: string): string {
+  const match = rgb.match(/(\d+(?:\.\d+)?)/g);
+  if (!match || match.length < 3) return '';
+  const [r, g, b] = match.slice(0, 3).map((n) => Math.round(parseFloat(n)));
+  const toHex = (v: number) => Math.min(255, Math.max(0, v)).toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
+/** Linearly blend `a` toward `b` by `t` (0..1). Both must be `#rrggbb`. */
+function mixHex(a: string, b: string, t: number): string {
+  const pa = parseInt(a.slice(1), 16);
+  const pb = parseInt(b.slice(1), 16);
+  if (Number.isNaN(pa) || Number.isNaN(pb)) return a;
+  const lerp = (shift: number) => {
+    const ca = (pa >> shift) & 0xff;
+    const cb = (pb >> shift) & 0xff;
+    return Math.round(ca + (cb - ca) * t);
+  };
+  const r = lerp(16);
+  const g = lerp(8);
+  const bch = lerp(0);
+  return `#${((r << 16) | (g << 8) | bch).toString(16).padStart(6, '0')}`;
+}

package/src/tools/CodeEditor/hooks/useMonaco.ts

@@ -6,11 +6,36 @@ import type * as MonacoEditor from 'monaco-editor';
 import { setupMonacoWorkers } from '../workers/setup';
 import type { UseMonacoReturn } from '../types';
 
+/**
+ * Shared, module-level Monaco loader.
+ *
+ * Monaco is ~550KB — we load it exactly once per page and hand the same
+ * module to every `useMonaco()` consumer. Without this each Editor /
+ * DiffEditor / EditorProvider would manage its own loading state and
+ * briefly flash a spinner even though the module is already in memory.
+ */
+let monacoPromise: Promise<typeof MonacoEditor> | null = null;
+
+function loadMonaco(): Promise<typeof MonacoEditor> {
+  if (!monacoPromise) {
+    monacoPromise = (async () => {
+      setupMonacoWorkers();
+      return import('monaco-editor');
+    })().catch((err) => {
+      // Reset so a later mount can retry instead of being stuck on a
+      // permanently-rejected promise.
+      monacoPromise = null;
+      throw err;
+    });
+  }
+  return monacoPromise;
+}
+
 /**
  * Hook to load and access Monaco Editor instance
  *
  * Handles:
- * - Dynamic import of Monaco (client-side only)
+ * - Dynamic import of Monaco (client-side only, loaded once and shared)
  * - Web worker configuration
  * - Loading state management
  *
@@ -33,27 +58,17 @@ export function useMonaco(): UseMonacoReturn {
   useEffect(() => {
     let mounted = true;
 
-    async function loadMonaco() {
-      try {
-        // Setup workers first
-        setupMonacoWorkers();
-
-        // Dynamic import Monaco
-        const monacoModule = await import('monaco-editor');
-
-        if (mounted) {
-          setMonaco(monacoModule);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (mounted) {
-          setError(err instanceof Error ? err : new Error('Failed to load Monaco Editor'));
-          setIsLoading(false);
-        }
-      }
-    }
-
-    loadMonaco();
+    loadMonaco()
+      .then((monacoModule) => {
+        if (!mounted) return;
+        setMonaco(monacoModule);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (!mounted) return;
+        setError(err instanceof Error ? err : new Error('Failed to load Monaco Editor'));
+        setIsLoading(false);
+      });
 
     return () => {
       mounted = false;

package/src/tools/CodeEditor/lazy.tsx

@@ -43,6 +43,12 @@ export const LazyDiffEditor = createLazyComponent<DiffEditorProps>(
   },
 );
 
+// `Editor` / `DiffEditor` are the plain named exports — same lazy components,
+// kept so callers can `import { Editor } from '@djangocfg/ui-tools/code-editor'`
+// without knowing about the `Lazy*` naming.
+export { LazyEditor as Editor };
+export { LazyDiffEditor as DiffEditor };
+
 // ============================================================================
 // Light surface
 // ============================================================================

package/src/tools/CodeEditor/lib/index.ts

@@ -1,2 +1,2 @@
 export { getLanguageByExtension, getLanguageByFilename, LANGUAGE_MAP } from './languages';
-export { EDITOR_THEMES, getDefaultTheme } from './themes';
+export { EDITOR_THEMES } from './themes';

package/src/tools/CodeEditor/lib/themes.ts

@@ -1,32 +1,19 @@
 /**
  * Editor Themes
  *
- * Built-in Monaco themes and custom CMDOP themes
+ * The editor is always dark (devtool-style), so only dark themes are exposed.
  */
 
-export type EditorTheme = 'vs' | 'vs-dark' | 'hc-black' | 'hc-light' | 'cmdop-dark' | 'cmdop-light';
+export type EditorTheme = 'vs-dark' | 'hc-black' | 'cmdop-dark';
 
 export const EDITOR_THEMES = {
   // Built-in themes
-  'vs': 'Light (VS Code)',
   'vs-dark': 'Dark (VS Code)',
   'hc-black': 'High Contrast Dark',
-  'hc-light': 'High Contrast Light',
-  // Custom themes (to be defined)
+  // Custom themes
   'cmdop-dark': 'CMDOP Dark',
-  'cmdop-light': 'CMDOP Light',
 } as const;
 
-/**
- * Get default theme based on system preference
- */
-export function getDefaultTheme(): EditorTheme {
-  if (typeof window === 'undefined') return 'vs-dark';
-
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  return prefersDark ? 'vs-dark' : 'vs';
-}
-
 /**
  * CMDOP Dark Theme Definition
  * Can be registered with monaco.editor.defineTheme()
@@ -53,26 +40,3 @@ export const cmdopDarkTheme = {
     'editorLineNumber.activeForeground': '#C6C6C6',
   },
 };
-
-/**
- * CMDOP Light Theme Definition
- */
-export const cmdopLightTheme = {
-  base: 'vs' as const,
-  inherit: true,
-  rules: [
-    { token: 'comment', foreground: '008000', fontStyle: 'italic' },
-    { token: 'keyword', foreground: 'AF00DB' },
-    { token: 'string', foreground: 'A31515' },
-    { token: 'number', foreground: '098658' },
-    { token: 'type', foreground: '267F99' },
-    { token: 'function', foreground: '795E26' },
-    { token: 'variable', foreground: '001080' },
-  ],
-  colors: {
-    'editor.background': '#FFFFFF',
-    'editor.foreground': '#000000',
-    'editor.lineHighlightBackground': '#F5F5F5',
-    'editor.selectionBackground': '#ADD6FF',
-  },
-};