@djangocfg/ui-tools 2.1.397 → 2.1.400

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.397",
+  "version": "2.1.400",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -154,8 +154,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.397",
-    "@djangocfg/ui-core": "^2.1.397",
+    "@djangocfg/i18n": "^2.1.400",
+    "@djangocfg/ui-core": "^2.1.400",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -209,9 +209,9 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.397",
-    "@djangocfg/typescript-config": "^2.1.397",
-    "@djangocfg/ui-core": "^2.1.397",
+    "@djangocfg/i18n": "^2.1.400",
+    "@djangocfg/typescript-config": "^2.1.400",
+    "@djangocfg/ui-core": "^2.1.400",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/Chat/components/ChatRoot.tsx

@@ -80,6 +80,26 @@ export interface ChatRootProps {
   renderHeader?: (ctx: ChatContextValue) => ReactNode;
   /** Render the empty-state lazily — receives a `setValue` to seed the composer. */
   renderEmpty?: (api: { setValue: (v: string) => void; focus: () => void }) => ReactNode;
+  /**
+   * Replace the default `<Composer>` entirely. Receives the live
+   * `useChatComposer` return and the composer-related slot props
+   * (placeholder, size, attach button, toolbar slots) — host can wire
+   * them into a custom widget (e.g. a MarkdownEditor with mentions).
+   *
+   * When set, `composerToolbarStart/End`, `composerAttachmentTray`,
+   * `composerSize`, `showAttachmentButton`, `onPickFiles` are passed
+   * to the render-prop but are no longer auto-rendered.
+   */
+  renderComposer?: (api: {
+    composer: UseChatComposerReturn;
+    placeholder?: string;
+    size?: ComposerSize;
+    showAttachmentButton?: boolean;
+    onPickFiles?: () => void;
+    toolbarStart?: ReactNode;
+    toolbarEnd?: ReactNode;
+    attachmentTray?: ReactNode;
+  }) => ReactNode;
   /** Forwarded into `<MessageBubble toolCallsProps>` so hosts can swap payload renderers. */
   toolCallsProps?: Omit<ToolCallsProps, 'calls'>;
   /** Per-type attachment renderers — `{ image, audio, video, file, default }`. */
@@ -246,16 +266,29 @@ function ChatRootShell({ className, listClassName, slots }: ChatRootShellProps)
         </div>
       </div>
       {!slots.hideComposer && (
-        <Composer
-          composer={composer}
-          placeholder={chat.config.placeholder}
-          showAttachmentButton={slots.showAttachmentButton}
-          onPickFiles={slots.onPickFiles}
-          toolbarStart={slots.composerToolbarStart}
-          toolbarEnd={slots.composerToolbarEnd}
-          attachmentTray={slots.composerAttachmentTray}
-          size={slots.composerSize}
-        />
+        slots.renderComposer
+          ? slots.renderComposer({
+              composer,
+              placeholder: chat.config.placeholder,
+              size: slots.composerSize,
+              showAttachmentButton: slots.showAttachmentButton,
+              onPickFiles: slots.onPickFiles,
+              toolbarStart: slots.composerToolbarStart,
+              toolbarEnd: slots.composerToolbarEnd,
+              attachmentTray: slots.composerAttachmentTray,
+            })
+          : (
+              <Composer
+                composer={composer}
+                placeholder={chat.config.placeholder}
+                showAttachmentButton={slots.showAttachmentButton}
+                onPickFiles={slots.onPickFiles}
+                toolbarStart={slots.composerToolbarStart}
+                toolbarEnd={slots.composerToolbarEnd}
+                attachmentTray={slots.composerAttachmentTray}
+                size={slots.composerSize}
+              />
+            )
       )}
       {slots.footer ?? null}
     </div>

package/src/tools/Chat/components/index.ts

@@ -8,7 +8,7 @@ export {
 } from './MessageList';
 export { MessageBubble, type MessageBubbleProps } from './MessageBubble';
 export { MessageActions, type MessageActionsProps } from './MessageActions';
-export { Composer, type ComposerProps } from './Composer';
+export { Composer, type ComposerProps, type ComposerSize } from './Composer';
 export { Sources, type SourcesProps } from './Sources';
 export { ToolCalls, type ToolCallsProps, type ToolPayloadKind } from './ToolCalls';
 export {

package/src/tools/Chat/hooks/useChatComposer.ts

@@ -201,7 +201,7 @@ export function useChatComposer(options: UseChatComposerOptions): UseChatCompose
     if (!items.length) return;
     const next = historyRef.current.index < 0 ? items.length - 1 : Math.max(0, historyRef.current.index - 1);
     historyRef.current.index = next;
-    setValueState(items[next]);
+    setValueState(items[next] ?? '');
   }, []);
 
   const recallNext = useCallback(() => {
@@ -214,7 +214,7 @@ export function useChatComposer(options: UseChatComposerOptions): UseChatCompose
       return;
     }
     historyRef.current.index = next;
-    setValueState(items[next]);
+    setValueState(items[next] ?? '');
   }, []);
 
   const onChange = useCallback(

package/src/tools/Chat/index.ts

@@ -249,6 +249,7 @@ export {
   type MessageBubbleProps,
   type MessageActionsProps,
   type ComposerProps,
+  type ComposerSize,
   type SourcesProps,
   type ToolCallsProps,
   type ToolPayloadKind,

package/src/tools/JsonTree/components/JsonContent.tsx

@@ -3,6 +3,12 @@
 import React, { memo } from 'react';
 import { CommonExternalProps, JSONTree } from 'react-json-tree';
 
+// JSON inspector uses a fixed dark palette regardless of the host
+// theme — same convention as PrettyCode and devtool-style data
+// renderers (Chrome DevTools, Insomnia, Bruno). Syntax highlighting
+// has its own contrast model; mixing it with semantic UI tokens on
+// a light surface flattens keys/values into low-contrast pastels.
+const JSON_TREE_SURFACE_BG = '#0d1117';
 const JSON_TREE_THEME = {
   scheme: 'djangocfg-dark',
   base00: 'transparent',
@@ -62,11 +68,11 @@ const JsonContent = memo(({
     ? (nodeType: string, nodeData: unknown) => {
         if (nodeType === 'Array') {
           const length = Array.isArray(nodeData) ? nodeData.length : 0;
-          return length > 0 ? <span className="text-muted-foreground text-xs">({length})</span> : null;
+          return length > 0 ? <span className="text-xs" style={{ color: '#9ca3af' }}>({length})</span> : null;
         }
         if (nodeType === 'Object') {
           const keys = nodeData && typeof nodeData === 'object' ? Object.keys(nodeData) : [];
-          return keys.length > 0 ? <span className="text-muted-foreground text-xs">{`{${keys.length}}`}</span> : null;
+          return keys.length > 0 ? <span className="text-xs" style={{ color: '#9ca3af' }}>{`{${keys.length}}`}</span> : null;
         }
         return null;
       }
@@ -83,9 +89,16 @@ const JsonContent = memo(({
     typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'));
 
   return (
-    <div className={`overflow-auto h-full ${padding}`} style={fontSize ? { fontSize } : undefined}>
+    <div
+      className={`overflow-auto h-full rounded-md ${padding}`}
+      style={{
+        backgroundColor: JSON_TREE_SURFACE_BG,
+        color: '#e5e7eb',
+        ...(fontSize ? { fontSize } : null),
+      }}
+    >
       {showTitle && title && (
-        <h6 className="text-sm font-semibold text-foreground mb-2">{title}</h6>
+        <h6 className="text-sm font-semibold mb-2" style={{ color: '#f3f4f6' }}>{title}</h6>
       )}
       <JSONTree
         key={renderKey}

package/src/tools/MarkdownEditor/styles.css

@@ -2,6 +2,20 @@
   outline: none;
 }
 
+/* Inherit semantic foreground so the editor renders correctly in both
+   light + dark themes (and under any active preset). Without this the
+   browser falls back to UA black on a token-driven background. */
+.markdown-editor .tiptap,
+.markdown-editor .ProseMirror {
+  color: var(--color-foreground, var(--foreground));
+}
+
+.markdown-editor .tiptap a,
+.markdown-editor .ProseMirror a {
+  color: var(--color-primary, var(--primary));
+  text-decoration: underline;
+}
+
 .markdown-editor .tiptap h1 {
   font-size: 1.5em;
   font-weight: 700;
@@ -46,7 +60,7 @@
 }
 
 .markdown-editor .tiptap blockquote {
-  border-left: 3px solid var(--border, #333);
+  border-left: 3px solid var(--color-border, var(--border));
   padding-left: 1em;
   margin: 0.5em 0;
   opacity: 0.8;
@@ -54,12 +68,13 @@
 
 .markdown-editor .tiptap hr {
   border: none;
-  border-top: 1px solid var(--border, #333);
+  border-top: 1px solid var(--color-border, var(--border));
   margin: 0.75em 0;
 }
 
 .markdown-editor .tiptap code {
-  background: var(--muted, #222);
+  background: var(--color-muted, var(--muted));
+  color: var(--color-muted-foreground, var(--muted-foreground));
   padding: 0.15em 0.3em;
   border-radius: 0.25em;
   font-size: 0.9em;
@@ -182,10 +197,10 @@
 
 .markdown-toolbar-btn:hover {
   opacity: 1;
-  background: var(--muted, #222);
+  background: var(--color-muted, var(--muted));
 }
 
 .markdown-toolbar-btn.active {
   opacity: 1;
-  background: var(--muted, #222);
+  background: var(--color-muted, var(--muted));
 }

package/src/tools/Mermaid/hooks/useMermaidRenderer.ts

@@ -42,6 +42,7 @@ const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
     const viewBox = svgElement.getAttribute('viewBox');
     if (viewBox) {
         const [, , width, height] = viewBox.split(' ').map(Number);
+        if (width === undefined || height === undefined) return false;
         return height > width * 1.5;
     }
     const bbox = svgElement.getBBox?.();

package/src/tools/Mermaid/hooks/useMermaidValidation.ts

@@ -15,7 +15,7 @@ export function useMermaidValidation() {
         if (lines.length < 2) return false; // Need at least diagram type + one element
 
         // Check for common incomplete patterns
-        const lastLine = lines[lines.length - 1].trim();
+        const lastLine = (lines[lines.length - 1] ?? '').trim();
 
         // Incomplete if last line ends with arrow without destination
         if (lastLine.match(/-->?\s*$/)) return false;

package/src/tools/Mermaid/utils/mermaid-helpers.ts

@@ -23,6 +23,7 @@ export const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
     const viewBox = svgElement.getAttribute('viewBox');
     if (viewBox) {
         const [, , width, height] = viewBox.split(' ').map(Number);
+        if (width === undefined || height === undefined) return false;
         return height > width * 1.5;
     }
     const bbox = svgElement.getBBox?.();

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

@@ -4,10 +4,19 @@ 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 { FloatingToolbar } from '../../components/FloatingToolbar';
 import { CopyAction } from '../../components/FloatingToolbar/actions';
 
+// 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';
+
 // Load extra Prism grammars (``bash``, ``ruby``, ``java``, ``php``)
 // that aren't in ``prism-react-renderer``'s default bundle. The hook
 // below subscribes to its ready state and re-renders this component
@@ -19,6 +28,13 @@ interface PrettyCodeProps {
   data: string | object;
   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.
+   */
   mode?: 'dark' | 'light';
   inline?: boolean;
   customBg?: string; // Custom background class
@@ -38,10 +54,9 @@ interface PrettyCodeProps {
   variant?: 'card' | 'plain';
 }
 
-const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false, scrollIsolation, maxLines, variant = 'card' }: PrettyCodeProps) => {
+const PrettyCode = ({ data, language, className, mode = 'dark', inline = false, customBg, isCompact = false, scrollIsolation, maxLines, variant = 'card' }: PrettyCodeProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const t = useAppT();
-  const detectedTheme = useResolvedTheme();
 
   // Subscribe to the extra-grammars ready state. When ``bash`` /
   // ``ruby`` / ``java`` / ``php`` finish loading, this hook triggers a
@@ -56,12 +71,12 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
   // Font size based on compact mode
   const fontSize = isCompact ? '0.75rem' : '0.875rem'; // 12px vs 14px
 
-  // Use provided mode or fall back to detected theme
-  const currentTheme = mode || detectedTheme;
-  const isDarkMode = currentTheme === 'dark';
-
-  // Select the Prism theme based on the current theme
-  const prismTheme = isDarkMode ? themes.vsDark : themes.vsLight;
+  const isDarkMode = mode !== '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;
 
   // Convert form object to JSON string with proper formatting
   const contentJson = typeof data === 'string' ? data : JSON.stringify(data || {}, null, 2);
@@ -81,12 +96,16 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
   
   // Handle empty content
   if (!contentJson || contentJson.trim() === '') {
-    const emptyBgClass = customBg || (isDarkMode ? 'bg-zinc-900' : 'bg-white');
-    const emptyBorderClass = isDarkMode ? 'border-zinc-700' : 'border-border';
+    const emptyBgClass = customBg || (isDarkMode ? '' : 'bg-card');
     return (
-      <div className={`relative h-full ${emptyBgClass} rounded-sm border ${emptyBorderClass} ${className || ''}`}>
+      <div
+        className={`relative h-full ${emptyBgClass} rounded-sm border ${isDarkMode ? '' : 'border-border'} ${className || ''}`}
+        style={customBg ? undefined : surfaceStyle}
+      >
         <div className="h-full overflow-auto p-4">
-          <p className="text-muted-foreground text-sm italic">{labels.noContent}</p>
+          <p className="text-sm italic" style={{ color: isDarkMode ? '#9ca3af' : undefined }}>
+            {labels.noContent}
+          </p>
         </div>
       </div>
     );
@@ -248,7 +267,7 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
   }
 
   if (inline) {
-    const inlineBgClass = customBg || (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-100');
+    const inlineBgClass = customBg || (isDarkMode ? '' : 'bg-muted');
     return (
       <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
         {({ className, style, tokens, getTokenProps }) => (
@@ -256,6 +275,7 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
             className={`${className} ${inlineBgClass} px-2 py-1 rounded ${isCompact ? 'text-xs' : 'text-sm'} font-mono inline-block`}
             style={{
               ...style,
+              ...(customBg ? undefined : inlineSurfaceStyle),
               fontSize,
               fontFamily: 'monospace',
             }}
@@ -271,19 +291,20 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
     );
   }
 
-  // Different backgrounds for dark/light - light mode uses white for better contrast with vsLight theme
-  const bgClass = customBg || (isDarkMode ? 'bg-zinc-900' : 'bg-white');
-  const borderClass = isDarkMode ? 'border-zinc-700' : 'border-border';
+  // 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');
 
   return (
     <div
       ref={containerRef}
-      className={`group relative ${bgClass} rounded-lg border ${borderClass} ${className || ''}`}
-      style={
+      className={`group relative ${bgClass} rounded-lg border ${isDarkMode ? '' : 'border-border'} ${className || ''}`}
+      style={{
+        ...(customBg ? undefined : surfaceStyle),
         // maxHeight caps growth at ``maxLines`` rows; without maxLines we
         // let the block grow to fit its content (no scroll).
-        maxHeightPx ? { maxHeight: `${maxHeightPx}px` } : undefined
-      }
+        ...(maxHeightPx ? { maxHeight: `${maxHeightPx}px` } : null),
+      }}
     >
       {/* Toolbar: hidden by default, appears on hover. Absolute overlay so it doesn't shift layout.
           scrollIsolation is force-disabled when content fits without scrolling —

package/src/tools/SpeechRecognition/core/engine/webspeech.ts

@@ -143,7 +143,9 @@ export function createWebSpeechEngine(
       rec.onresult = (e) => {
         for (let i = e.resultIndex; i < e.results.length; i += 1) {
           const res = e.results[i];
+          if (!res) continue;
           const alt = res[0];
+          if (!alt) continue;
           const text = alt.transcript;
           if (!currentSegmentId) currentSegmentId = newSegmentId();
           if (res.isFinal) {