@djangocfg/ui-tools 2.1.239 → 2.1.241

package/README.md

@@ -28,20 +28,21 @@ This package contains heavy components that are loaded lazily to keep your initi
 | `@djangocfg/ui-tools` | Heavy tools with lazy loading |
 | `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
 
-## Tools (12)
+## Tools (13)
 
 | Tool | Bundle Size | Description |
 |------|-------------|-------------|
-| `Gallery` | ~50KB | Image/video gallery with carousel, grid, lightbox |
 | `Map` | ~800KB | MapLibre GL maps with markers, clusters, layers |
 | `Mermaid` | ~800KB | Diagram rendering with declarative builders |
-| `PrettyCode` | ~500KB | Code syntax highlighting |
+| `CodeEditor` | ~550KB | Monaco-based code editor with diff view |
+| `PrettyCode` | ~500KB | Code syntax highlighting (read-only) |
 | `OpenapiViewer` | ~400KB | OpenAPI schema viewer & playground |
 | `JsonForm` | ~300KB | JSON Schema form generator |
 | `LottiePlayer` | ~200KB | Lottie animation player |
 | `AudioPlayer` | ~200KB | Audio player with WaveSurfer.js |
 | `VideoPlayer` | ~150KB | Professional video player with Vidstack |
 | `JsonTree` | ~100KB | JSON visualization with modes (full/compact/inline) |
+| `Gallery` | ~50KB | Image/video gallery with carousel, grid, lightbox |
 | `ImageViewer` | ~50KB | Image viewer with zoom/pan/rotate/flip and gallery navigation |
 | `CronScheduler` | ~15KB | Cron expression builder with intuitive UI |
 
@@ -65,6 +66,7 @@ import { FlowDiagram, SequenceDiagram, JourneyDiagram } from '@djangocfg/ui-tool
 | Path | Content |
 |------|---------|
 | `@djangocfg/ui-tools` | All tools with lazy loading |
+| `@djangocfg/ui-tools/code-editor` | Monaco editor, diff editor, hooks |
 | `@djangocfg/ui-tools/gallery` | Gallery components & hooks |
 | `@djangocfg/ui-tools/map` | Map components & utilities |
 | `@djangocfg/ui-tools/mermaid` | Mermaid component & declarative builders |
@@ -469,8 +471,52 @@ journey.section('Sign Up')
 return journey.toString();
 ```
 
+## Code Editor
+
+Monaco-based code editor with full IDE features: syntax highlighting, IntelliSense, diff view, multi-file support.
+
+```tsx
+import { Editor, DiffEditor } from '@djangocfg/ui-tools';
+// or tree-shakeable: import { Editor } from '@djangocfg/ui-tools/code-editor';
+
+// Basic editor
+<Editor
+  value="const x = 42;"
+  language="typescript"
+  onChange={(value) => console.log(value)}
+  options={{ fontSize: 14, minimap: false }}
+/>
+
+// Diff view
+<DiffEditor
+  original="const x = 1;"
+  modified="const x = 42;"
+  language="typescript"
+/>
+```
+
+### Context & Hooks
+
+```tsx
+import {
+  EditorProvider,
+  useEditorContext,
+  useMonaco,
+  useEditor,
+  useLanguage,
+} from '@djangocfg/ui-tools/code-editor';
+
+// Multi-file editor with shared state
+<EditorProvider onSave={async (path) => { /* save file */ }}>
+  <FileTree />
+  <Editor />
+</EditorProvider>
+```
+
 ## Code Highlighting
 
+Read-only syntax highlighting (lighter than Monaco — use when editing not needed):
+
 ```tsx
 import { PrettyCode } from '@djangocfg/ui-tools';