@djangocfg/ui-tools 2.1.434 → 2.1.435

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.434",
+  "version": "2.1.435",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -334,8 +334,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.434",
-    "@djangocfg/ui-core": "^2.1.434",
+    "@djangocfg/i18n": "^2.1.435",
+    "@djangocfg/ui-core": "^2.1.435",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -418,9 +418,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.434",
-    "@djangocfg/typescript-config": "^2.1.434",
-    "@djangocfg/ui-core": "^2.1.434",
+    "@djangocfg/i18n": "^2.1.435",
+    "@djangocfg/typescript-config": "^2.1.435",
+    "@djangocfg/ui-core": "^2.1.435",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^25.2.3",

package/src/tools/dev/code/PrettyCode/PrettyCode.client.tsx

@@ -4,17 +4,18 @@ import { Highlight, Language, themes } from 'prism-react-renderer';
 import React, { useMemo, useRef } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
 import { CodePanelHeader } from '../../../../common/CodePanelHeader';
 
-// Surface palette — fixed dark regardless of host theme. Code blocks
-// follow the IDE / GitHub / ChatGPT convention: syntax highlighting
-// ships its own contrast model, and mixing it with light UI surfaces
-// produces low-contrast pastel renders that hurt readability. The
-// surface is hard-coded (not a semantic token) so the palette stays
-// stable when the user flips themes.
-const CODE_SURFACE_BG = '#0d1117';
-const CODE_SURFACE_BORDER = '#1f2937';
-const CODE_INLINE_BG = '#1f2937';
+// Surface palette — driven by the ui-core `--code*` semantic tokens so the
+// code panel matches the rest of the theme system (neutral, preset-aware)
+// instead of a hard-coded GitHub blue. The tokens are already tuned per
+// theme (`light.css` / `dark.css`): a near-white gray in light, a near-black
+// gray in dark — so the surface stays a calm neutral in either mode and never
+// reads blue. Syntax colors still come from Prism's vsDark/github palettes.
+const CODE_SURFACE_BG = 'var(--code)';
+const CODE_SURFACE_BORDER = 'var(--code-border)';
+const CODE_INLINE_BG = 'var(--code-inline)';
 
 // Load extra Prism grammars (``bash``, ``ruby``, ``java``, ``php``)
 // that aren't in ``prism-react-renderer``'s default bundle. The hook
@@ -28,11 +29,11 @@ interface PrettyCodeProps {
   language: Language;
   className?: string;
   /**
-   * Force a specific Prism palette. **Default is always `dark`** —
-   * code blocks ship their own contrast model and we render them on
-   * a fixed dark surface regardless of the surrounding UI theme
-   * (GitHub / VSCode / ChatGPT convention). Override only if you
-   * have a deliberate reason — e.g. printing a PDF on a light page.
+   * Force a specific Prism palette + surface. **Defaults to the resolved
+   * host theme** (light → light surface + GitHub palette, dark → dark
+   * surface + vsDark palette), so the panel matches the rest of the UI and
+   * its `--code*` tokens. Pass `mode` explicitly only to pin a palette
+   * regardless of theme — e.g. printing a PDF on a light page.
    */
   mode?: 'dark' | 'light';
   inline?: boolean;
@@ -62,10 +63,15 @@ interface PrettyCodeProps {
   variant?: 'card' | 'plain';
 }
 
-const PrettyCode = ({ data, language, className, mode = 'dark', inline = false, customBg, isCompact = false, maxLines, onExpand, variant = 'card' }: PrettyCodeProps) => {
+const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false, maxLines, onExpand, variant = 'card' }: PrettyCodeProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const t = useAppT();
 
+  // Default to the host theme so the surface (`--code*` tokens) and the Prism
+  // palette move together; an explicit `mode` prop still pins a palette.
+  const resolvedTheme = useResolvedTheme();
+  const effectiveMode = mode ?? (resolvedTheme === 'light' ? 'light' : 'dark');
+
   // Subscribe to the extra-grammars ready state. When ``bash`` /
   // ``ruby`` / ``java`` / ``php`` finish loading, this hook triggers a
   // re-render so the code block picks up the new grammar.
@@ -79,12 +85,14 @@ const PrettyCode = ({ data, language, className, mode = 'dark', inline = false,
   // Font size based on compact mode
   const fontSize = isCompact ? '0.75rem' : '0.875rem'; // 12px vs 14px
 
-  const isDarkMode = mode !== 'light';
+  const isDarkMode = effectiveMode !== 'light';
   const prismTheme = isDarkMode ? themes.vsDark : themes.github;
-  const surfaceStyle = isDarkMode
-    ? { backgroundColor: CODE_SURFACE_BG, borderColor: CODE_SURFACE_BORDER }
-    : undefined;
-  const inlineSurfaceStyle = isDarkMode ? { backgroundColor: CODE_INLINE_BG } : undefined;
+  // The surface now reads the `--code*` tokens in BOTH modes — they already
+  // carry the right neutral per theme, so the panel matches the UI and never
+  // reads blue. (Previously light mode fell back to `bg-card` and dark mode
+  // hard-coded GitHub's #0d1117.)
+  const surfaceStyle = { backgroundColor: CODE_SURFACE_BG, borderColor: CODE_SURFACE_BORDER };
+  const inlineSurfaceStyle = { backgroundColor: CODE_INLINE_BG };
 
   // Convert form object to JSON string with proper formatting
   const contentJson = typeof data === 'string' ? data : JSON.stringify(data || {}, null, 2);
@@ -104,17 +112,16 @@ const PrettyCode = ({ data, language, className, mode = 'dark', inline = false,
   
   // Handle empty content
   if (!contentJson || contentJson.trim() === '') {
-    const emptyBgClass = customBg || (isDarkMode ? '' : 'bg-card');
+    const emptyBgClass = customBg || '';
     return (
       <div
-        className={`relative h-full ${emptyBgClass} rounded-sm border ${isDarkMode ? '' : 'border-border'} ${className || ''}`}
+        className={`relative h-full ${emptyBgClass} rounded-sm border ${className || ''}`}
         style={customBg ? undefined : surfaceStyle}
       >
         <div className="h-full overflow-auto p-4">
           <p
-            className="text-sm italic"
+            className="text-sm italic text-muted-foreground"
             role="status"
-            style={{ color: isDarkMode ? '#9ca3af' : undefined }}
           >
             {labels.noContent}
           </p>
@@ -279,7 +286,8 @@ const PrettyCode = ({ data, language, className, mode = 'dark', inline = false,
   }
 
   if (inline) {
-    const inlineBgClass = customBg || (isDarkMode ? '' : 'bg-muted');
+    // Inline chip surface also comes from `--code-inline` via inlineSurfaceStyle.
+    const inlineBgClass = customBg || '';
     return (
       <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
         {({ className: prismClassName, style, tokens, getTokenProps }) => (
@@ -304,13 +312,13 @@ const PrettyCode = ({ data, language, className, mode = 'dark', inline = false,
   }
 
   // Code surface is fixed (dark by default). Falls back to semantic
-  // `bg-card` only when the caller explicitly opts into light mode.
-  const bgClass = customBg || (isDarkMode ? '' : 'bg-card');
+  // Surface comes from the `--code*` tokens via `surfaceStyle` (both modes).
+  const bgClass = customBg || '';
 
   return (
     <div
       ref={containerRef}
-      className={`group relative overflow-hidden ${bgClass} rounded-lg border ${isDarkMode ? '' : 'border-border'} ${className || ''}`}
+      className={`group relative overflow-hidden ${bgClass} rounded-lg border ${className || ''}`}
       style={customBg ? undefined : surfaceStyle}
     >
       {/* Persistent header bar (GitHub / ChatGPT style): language label