@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/Chat/types/block.ts

@@ -0,0 +1,120 @@
+/**
+ * Message blocks — typed, serializable rich-content slots.
+ *
+ * A `ChatMessage` may carry `blocks: MessageBlock[]`. Each block is a
+ * discriminated union member keyed by `kind`. Payloads are plain JSON
+ * (no Date, no Float32Array, no React nodes) so blocks survive history
+ * persistence and SSE transport. See `@docs/message-blocks.md`.
+ */
+
+/** Spaciousness hint forwarded from the bubble to renderers. */
+export type BlockAppearance = 'compact' | 'full';
+
+interface BlockBase {
+  /** Stable id — used as React key and for memo diffing. */
+  id: string;
+  /** Optional caption rendered above the block. */
+  caption?: string;
+}
+
+export interface TextBlock extends BlockBase {
+  kind: 'text';
+  text: string;
+}
+
+export interface MarkdownBlock extends BlockBase {
+  kind: 'markdown';
+  markdown: string;
+}
+
+export interface AudioBlock extends BlockBase {
+  kind: 'audio';
+  src: string;
+  title?: string;
+  artist?: string;
+  cover?: string;
+  /** `compact` → AudioPlayer variant. */
+  variant?: 'default' | 'compact';
+}
+
+export interface VideoBlock extends BlockBase {
+  kind: 'video';
+  /** Raw URL string — VideoPlayer auto-classifies YouTube/Vimeo/HLS/MP4. */
+  src: string;
+  poster?: string;
+  title?: string;
+  aspectRatio?: number | 'auto' | 'fill';
+}
+
+export interface ImageBlock extends BlockBase {
+  kind: 'image';
+  src: string;
+  alt?: string;
+  /** When true → zoom/pan ImageViewer; else a plain `<img>`. */
+  interactive?: boolean;
+}
+
+export interface GalleryBlock extends BlockBase {
+  kind: 'gallery';
+  items: Array<{ id: string; src: string; thumbnail?: string; alt?: string }>;
+}
+
+export interface MapBlock extends BlockBase {
+  kind: 'map';
+  center: { lat: number; lng: number };
+  zoom?: number;
+  markers?: Array<{ id: string; lat: number; lng: number; label?: string }>;
+}
+
+export interface JsonBlock extends BlockBase {
+  kind: 'json';
+  data: unknown;
+  /** JsonTree display mode. */
+  mode?: 'full' | 'compact' | 'inline';
+}
+
+export interface MermaidBlock extends BlockBase {
+  kind: 'mermaid';
+  chart: string;
+}
+
+export interface CodeBlock extends BlockBase {
+  kind: 'code';
+  code: string;
+  language: string;
+}
+
+export interface LottieBlock extends BlockBase {
+  kind: 'lottie';
+  /** Animation JSON URL or inline animationData object. */
+  src: string;
+}
+
+/**
+ * Escape hatch for host-defined block types. The built-in registry
+ * renders it as the unknown-kind fallback unless the host registers a
+ * `custom` renderer that switches on `name`.
+ */
+export interface CustomBlock extends BlockBase {
+  kind: 'custom';
+  /** Host-defined sub-type, dispatched by the host's own renderer. */
+  name: string;
+  payload: unknown;
+}
+
+export type MessageBlock =
+  | TextBlock
+  | MarkdownBlock
+  | AudioBlock
+  | VideoBlock
+  | ImageBlock
+  | GalleryBlock
+  | MapBlock
+  | JsonBlock
+  | MermaidBlock
+  | CodeBlock
+  | LottieBlock
+  | CustomBlock;
+
+/** The discriminant literal — `'audio' | 'video' | …`. */
+export type MessageBlockKind = MessageBlock['kind'];

package/src/tools/Chat/types/config.ts

@@ -29,13 +29,8 @@ export interface ChatConfig {
   description?: string;
   /** Suggested prompts shown on empty conversation. */
   suggestions?: Array<{ label: string; prompt: string }>;
-  /** Locale forwarded to the transport via stream metadata. */
-  locale?: string;
   /** Project / chat slug forwarded to the transport. */
   slug?: string;
-  /** UI density. Use `prefs.density` for the same effect; this stays for
-   *  backwards compatibility. */
-  density?: 'comfortable' | 'compact';
   /** Identity of the human author. Renders avatar / name on user bubbles
    *  and gets stamped on outgoing messages as `message.sender`. */
   user?: ChatUserContext;

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

@@ -19,6 +19,23 @@
 export type { ChatRole, ChatPersona, ChatUserContext, ChatAssistantContext } from './persona';
 export type { ChatToolCall } from './tool-call';
 export type { ChatAttachment, ChatSource } from './attachment';
+export type {
+  MessageBlock,
+  MessageBlockKind,
+  BlockAppearance,
+  TextBlock,
+  MarkdownBlock,
+  AudioBlock,
+  VideoBlock,
+  ImageBlock,
+  GalleryBlock,
+  MapBlock,
+  JsonBlock,
+  MermaidBlock,
+  CodeBlock,
+  LottieBlock,
+  CustomBlock,
+} from './block';
 export type { ChatMessage } from './message';
 export { DEFAULT_LABELS } from './labels';
 export type { ChatLabels } from './labels';

package/src/tools/Chat/types/message.ts

@@ -6,6 +6,7 @@
  */
 
 import type { ChatAttachment, ChatSource } from './attachment';
+import type { MessageBlock } from './block';
 import type { ChatPersona, ChatRole } from './persona';
 import type { ChatToolCall } from './tool-call';
 
@@ -26,6 +27,8 @@ export interface ChatMessage {
   toolActivity?: string;
   toolCalls?: ChatToolCall[];
   attachments?: ChatAttachment[];
+  /** Rich tool-component blocks rendered after the message body. */
+  blocks?: MessageBlock[];
   sources?: ChatSource[];
   tokensIn?: number;
   tokensOut?: number;

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

@@ -0,0 +1,4 @@
+/** Utils — pure chat helpers (draft sanitizer, attachment collector). */
+
+export { sanitizeDraft, isSubmittableDraft } from './sanitizeDraft';
+export { collectImageAttachments } from './collectImageAttachments';

package/src/tools/CodeEditor/README.md

@@ -102,14 +102,12 @@ const {
 
 ## Theme
 
-Editor automatically follows the app theme (dark/light) via `useResolvedTheme()` from `@djangocfg/ui-core`. No configuration needed — just works with `next-themes` or any setup that toggles `.dark` class on `<html>`.
+The editor is always dark (devtool-style), regardless of the app theme. The custom `app-dark` Monaco theme is registered automatically with colors derived from CSS variables (`--background`, `--foreground`, `--card`, `--border`).
 
-Custom Monaco themes (`app-dark`, `app-light`) are registered automatically with colors derived from CSS variables (`--background`, `--foreground`, `--card`, `--border`).
-
-Override with explicit theme:
+Override with an explicit theme:
 
 ```tsx
-<Editor options={{ theme: 'vs-dark' }} />   {/* force dark */}
+<Editor options={{ theme: 'vs-dark' }} />   {/* built-in dark */}
 <Editor options={{ theme: 'hc-black' }} />  {/* high contrast */}
 ```
 
@@ -120,7 +118,7 @@ Override with explicit theme:
 | `useMonaco()` | `{ monaco, isLoading, error }` | Load Monaco namespace |
 | `useEditor()` | `{ editor, isReady, setEditor }` | Editor instance management |
 | `useLanguage(filename)` | `string` | Detect language from file extension |
-| `useEditorTheme(monaco, override?)` | `string` | Resolved Monaco theme name (auto dark/light) |
+| `useEditorTheme(monaco, override?)` | `string` | Resolved Monaco theme name (always dark) |
 
 ## Types
 

package/src/tools/CodeEditor/components/DiffEditor.tsx

@@ -4,7 +4,7 @@ import { useRef, useEffect } from 'react';
 import type * as monaco from 'monaco-editor';
 
 import { useMonaco } from '../hooks/useMonaco';
-import { useEditorTheme } from '../hooks/useEditorTheme';
+import { useEditorTheme, EDITOR_BACKGROUND } from '../hooks/useEditorTheme';
 import type { DiffEditorProps } from '../types';
 
 /**
@@ -31,10 +31,10 @@ export function DiffEditor({
 }: DiffEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null);
-  const { monaco, isLoading } = useMonaco();
+  const { monaco, isLoading, error } = useMonaco();
   const resolvedTheme = useEditorTheme(monaco, options.theme);
 
-  // Create diff editor
+  // Create diff editor — runs once Monaco is available.
   useEffect(() => {
     if (!monaco || !containerRef.current || editorRef.current) return;
 
@@ -60,24 +60,26 @@ export function DiffEditor({
     editorRef.current = editor;
 
     return () => {
+      // Dispose models before the editor so Monaco releases all references.
       originalModel.dispose();
       modifiedModel.dispose();
       editor.dispose();
       editorRef.current = null;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [monaco]);
 
-  // Update models when content changes
+  // Update models when content changes — skip no-op writes to avoid
+  // resetting scroll/decorations on unrelated re-renders.
   useEffect(() => {
     const editor = editorRef.current;
-    if (!editor || !monaco) return;
+    if (!editor) return;
 
     const model = editor.getModel();
-    if (model) {
-      model.original.setValue(original);
-      model.modified.setValue(modified);
-    }
-  }, [original, modified, monaco]);
+    if (!model) return;
+    if (model.original.getValue() !== original) model.original.setValue(original);
+    if (model.modified.getValue() !== modified) model.modified.setValue(modified);
+  }, [original, modified]);
 
   // Update language
   useEffect(() => {
@@ -91,21 +93,53 @@ export function DiffEditor({
     }
   }, [language, monaco]);
 
+  // Apply theme — must go through setTheme(), updateOptions ignores `theme`.
+  useEffect(() => {
+    if (!monaco || !editorRef.current) return;
+    monaco.editor.setTheme(resolvedTheme);
+  }, [monaco, resolvedTheme]);
+
+  if (error) {
+    return (
+      <div
+        className={className}
+        role="alert"
+        style={{
+          width: '100%',
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
+          textAlign: 'center',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--destructive))',
+          fontSize: 13,
+        }}
+      >
+        Failed to load diff editor: {error.message}
+      </div>
+    );
+  }
+
   if (isLoading) {
     return (
       <div
         className={className}
+        role="status"
+        aria-busy="true"
         style={{
           width: '100%',
           height,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: '#1e1e1e',
-          color: '#666',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--muted-foreground))',
+          fontSize: 13,
         }}
       >
-        Loading diff editor...
+        Loading diff editor…
       </div>
     );
   }
@@ -117,6 +151,7 @@ export function DiffEditor({
       style={{
         width: '100%',
         height,
+        backgroundColor: EDITOR_BACKGROUND,
       }}
     />
   );

package/src/tools/CodeEditor/components/Editor.tsx

@@ -4,7 +4,7 @@ import { useRef, useEffect, useState, useCallback, forwardRef, useImperativeHand
 import type * as monaco from 'monaco-editor';
 
 import { useMonaco } from '../hooks/useMonaco';
-import { useEditorTheme } from '../hooks/useEditorTheme';
+import { useEditorTheme, EDITOR_BACKGROUND } from '../hooks/useEditorTheme';
 import type { EditorProps } from '../types';
 
 export interface EditorRef {
@@ -51,7 +51,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
 ) {
   const containerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-  const { monaco, isLoading } = useMonaco();
+  const { monaco, isLoading, error } = useMonaco();
   const resolvedTheme = useEditorTheme(monaco, options.theme);
 
   // Auto-height state
@@ -63,18 +63,24 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
     setContentHeight(Math.min(Math.max(h, minHeight), maxHeight));
   }, [autoHeight, minHeight, maxHeight]);
 
-  // Track internal changes to prevent cursor reset on prop sync
-  const isInternalChangeRef = useRef(false);
+  // Keep latest callbacks in refs so the create-effect can stay [monaco]-only
+  // without going stale when the parent passes new function identities.
+  const onChangeRef = useRef(onChange);
+  const onMountRef = useRef(onMount);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    onMountRef.current = onMount;
+  });
 
   // Expose editor methods via ref
   useImperativeHandle(ref, () => ({
     getEditor: () => editorRef.current,
-    getValue: () => editorRef.current?.getValue() || '',
+    getValue: () => editorRef.current?.getValue() ?? '',
     setValue: (val: string) => editorRef.current?.setValue(val),
     focus: () => editorRef.current?.focus(),
-  }));
+  }), []);
 
-  // Create editor
+  // Create editor — runs once Monaco is available.
   useEffect(() => {
     if (!monaco || !containerRef.current || editorRef.current) return;
 
@@ -91,7 +97,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
       lineNumbers: options.lineNumbers || 'on',
       readOnly: options.readOnly || false,
       automaticLayout: true,
-      scrollBeyondLastLine: autoHeight ? false : false,
+      scrollBeyondLastLine: !autoHeight,
       scrollbar: autoHeight ? { vertical: 'hidden', horizontal: 'auto' } : undefined,
       overviewRulerLanes: autoHeight ? 0 : undefined,
       padding: { top: 16, bottom: 16 },
@@ -108,57 +114,60 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
 
     editorRef.current = editor;
 
-    // Setup change listener
-    if (onChange) {
-      editor.onDidChangeModelContent(() => {
-        // Mark as internal change to prevent cursor reset on prop sync
-        isInternalChangeRef.current = true;
-        onChange(editor.getValue());
-      });
-    }
+    // Change listener — always attached; reads latest onChange via ref.
+    const changeSub = editor.onDidChangeModelContent(() => {
+      onChangeRef.current?.(editor.getValue());
+    });
 
     // Auto-height: resize container to fit content
+    let sizeSub: monaco.IDisposable | undefined;
     if (autoHeight) {
-      editor.onDidContentSizeChange(() => updateContentHeight(editor));
+      sizeSub = editor.onDidContentSizeChange(() => updateContentHeight(editor));
       updateContentHeight(editor);
     }
 
     // Call onMount callback
-    onMount?.(editor);
+    onMountRef.current?.(editor);
 
     return () => {
+      changeSub.dispose();
+      sizeSub?.dispose();
+      // Dispose the model explicitly — editor.dispose() does not always
+      // release models in older Monaco builds, and never the ones we own.
+      editor.getModel()?.dispose();
       editor.dispose();
       editorRef.current = null;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [monaco]);
 
-  // Update value when prop changes (only for external changes)
+  // Sync value when the prop changes from outside (skip echoes of user typing).
   useEffect(() => {
     const editor = editorRef.current;
     if (!editor) return;
 
-    // Skip if this is an internal change (user typing) - prevents cursor reset
-    if (isInternalChangeRef.current) {
-      isInternalChangeRef.current = false;
-      return;
-    }
-
     const currentValue = editor.getValue();
-    if (value !== currentValue) {
-      // Save cursor position
-      const position = editor.getPosition();
-      const selections = editor.getSelections();
+    // If the prop already matches the editor, nothing to do — this also
+    // covers the common controlled case where onChange echoes value back,
+    // so we never reset the cursor on the user's own keystrokes.
+    if (value === currentValue) return;
 
-      editor.setValue(value);
+    const position = editor.getPosition();
+    const selections = editor.getSelections();
 
-      // Restore cursor position if possible
-      if (position) {
-        editor.setPosition(position);
-      }
-      if (selections && selections.length > 0) {
-        editor.setSelections(selections);
-      }
+    // executeEdits preserves undo history (unlike setValue, which wipes it).
+    const model = editor.getModel();
+    if (model) {
+      editor.executeEdits('external-sync', [
+        { range: model.getFullModelRange(), text: value, forceMoveMarkers: true },
+      ]);
+      editor.pushUndoStop();
+    } else {
+      editor.setValue(value);
     }
+
+    if (position) editor.setPosition(position);
+    if (selections && selections.length > 0) editor.setSelections(selections);
   }, [value]);
 
   // Update language when prop changes
@@ -167,41 +176,83 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
     if (!editor || !monaco) return;
 
     const model = editor.getModel();
-    if (model) {
+    if (model && model.getLanguageId() !== language) {
       monaco.editor.setModelLanguage(model, language);
     }
   }, [language, monaco]);
 
+  // Apply theme — Monaco ignores `theme` inside updateOptions, it must go
+  // through setTheme(). This is what makes light/dark switching actually work.
+  useEffect(() => {
+    if (!monaco || !editorRef.current) return;
+    monaco.editor.setTheme(resolvedTheme);
+  }, [monaco, resolvedTheme]);
+
   // Update options when props change
   useEffect(() => {
     const editor = editorRef.current;
     if (!editor) return;
 
     editor.updateOptions({
-      theme: resolvedTheme,
       fontSize: options.fontSize,
       readOnly: options.readOnly,
       minimap: { enabled: options.minimap !== false },
       wordWrap: options.wordWrap,
       lineNumbers: options.lineNumbers,
+      tabSize: options.tabSize,
+      insertSpaces: options.insertSpaces,
     });
-  }, [options, resolvedTheme]);
+  }, [
+    options.fontSize,
+    options.readOnly,
+    options.minimap,
+    options.wordWrap,
+    options.lineNumbers,
+    options.tabSize,
+    options.insertSpaces,
+  ]);
+
+  if (error) {
+    return (
+      <div
+        className={className}
+        role="alert"
+        style={{
+          width,
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
+          textAlign: 'center',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--destructive))',
+          fontSize: 13,
+        }}
+      >
+        Failed to load editor: {error.message}
+      </div>
+    );
+  }
 
   if (isLoading) {
     return (
       <div
         className={className}
+        role="status"
+        aria-busy="true"
         style={{
           width,
           height,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: '#1e1e1e',
-          color: '#666',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--muted-foreground))',
+          fontSize: 13,
         }}
       >
-        Loading editor...
+        Loading editor…
       </div>
     );
   }
@@ -215,7 +266,8 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
       style={{
         width,
         height: resolvedHeight,
-        ...(autoHeight && { minHeight: minHeight, maxHeight: maxHeight, overflow: 'hidden' }),
+        backgroundColor: EDITOR_BACKGROUND,
+        ...(autoHeight && { minHeight, maxHeight, overflow: 'hidden' }),
       }}
     />
   );

package/src/tools/CodeEditor/context/EditorProvider.tsx

@@ -168,23 +168,40 @@ export function EditorProvider({ children, onSave }: EditorProviderProps) {
     [openFiles]
   );
 
-  const value: EditorContextValue = {
-    openFiles,
-    activeFile,
-    monaco,
-    editor,
-    isReady: monaco !== null && editor !== null,
-
-    openFile,
-    closeFile,
-    setActiveFile,
-    updateContent,
-    saveFile,
-
-    isDirty,
-    getContent,
-    getFile,
-  };
+  // Memoize so consumers don't re-render on unrelated parent renders.
+  const value = useMemo<EditorContextValue>(
+    () => ({
+      openFiles,
+      activeFile,
+      monaco,
+      editor,
+      isReady: monaco !== null && editor !== null,
+
+      openFile,
+      closeFile,
+      setActiveFile,
+      updateContent,
+      saveFile,
+
+      isDirty,
+      getContent,
+      getFile,
+    }),
+    [
+      openFiles,
+      activeFile,
+      monaco,
+      editor,
+      openFile,
+      closeFile,
+      setActiveFile,
+      updateContent,
+      saveFile,
+      isDirty,
+      getContent,
+      getFile,
+    ],
+  );
 
   return (
     <EditorContext.Provider value={value}>