@djangocfg/ui-tools 2.1.356 → 2.1.357

package/dist/index.mjs

@@ -5,13 +5,13 @@ export { NativeProvider, StreamProvider, VideoControls, VideoErrorFallback, Vide
 export { ImageViewer } from './chunk-OBRSGM64.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-C6GXVH5J.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PVAX67JG.mjs';
-import { LIMITS, createId, useChatAudioPrefs, useChatContextOptional } from './chunk-PRRH35VD.mjs';
-export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatHistory, useChatLayout, useChatScroll } from './chunk-PRRH35VD.mjs';
+import { LIMITS, createId, useChatAudioPrefs, useChatContextOptional } from './chunk-WGU5BEZX.mjs';
+export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatHistory, useChatLayout, useChatScroll } from './chunk-WGU5BEZX.mjs';
 export { TreeError, TreeSkeleton, createDemoTree } from './chunk-B6IR5KSC.mjs';
-export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from './chunk-G5IEC7SR.mjs';
+export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from './chunk-ZL7FH4NW.mjs';
 import { PlaygroundProvider } from './chunk-ZUFTH5IR.mjs';
-export { MarkdownMessage, Mermaid_default as Mermaid, PrettyCode_default as PrettyCode, extractTextFromChildren, useCollapsibleContent } from './chunk-2ZLKZ5VR.mjs';
-export { JsonTree_default as JsonTree } from './chunk-5G5YBFS6.mjs';
+export { MarkdownMessage, Mermaid_default as Mermaid, PrettyCode_default as PrettyCode, extractTextFromChildren, useCollapsibleContent } from './chunk-NWUT327A.mjs';
+export { JsonTree_default as JsonTree } from './chunk-ECONRHIG.mjs';
 import './chunk-KNEQRUBA.mjs';
 import { __name, __publicField } from './chunk-N2XQF2OL.mjs';
 import * as React from 'react';
@@ -242,7 +242,7 @@ function OpenapiLoadingFallback() {
 }
 __name(OpenapiLoadingFallback, "OpenapiLoadingFallback");
 var LazyDocsLayout = createLazyComponent(
-  () => import('./DocsLayout-VFPPNKSQ.mjs').then((mod) => ({ default: mod.DocsLayout })),
+  () => import('./DocsLayout-HGYIJTF3.mjs').then((mod) => ({ default: mod.DocsLayout })),
   {
     displayName: "LazyDocsLayout",
     fallback: /* @__PURE__ */ jsx(OpenapiLoadingFallback, {})
@@ -313,7 +313,7 @@ var LazyVideoPlayer = createLazyComponent(
   }
 );
 var LazyJsonTree = createLazyComponent(
-  () => import('./JsonTree-55625VVH.mjs'),
+  () => import('./JsonTree-43PQAJKY.mjs'),
   {
     displayName: "LazyJsonTree",
     fallback: /* @__PURE__ */ jsx(LoadingFallback, { minHeight: 100, text: "Loading JSON viewer..." })
@@ -341,14 +341,14 @@ var LazyCronScheduler = createLazyComponent(
   }
 );
 var LazyTree = createLazyComponent(
-  () => import('./TreeRoot-VGAIXCUA.mjs'),
+  () => import('./TreeRoot-5COOOSWG.mjs'),
   {
     displayName: "LazyTree",
     fallback: /* @__PURE__ */ jsx(LoadingFallback, { minHeight: 200, text: "Loading tree\u2026" })
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-L2T7LU54.mjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-6U7633X3.mjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })
@@ -741,7 +741,7 @@ function LottiePlayer(props) {
 }
 __name(LottiePlayer, "LottiePlayer");
 var DocsLayout = lazy(
-  () => import('./DocsLayout-VFPPNKSQ.mjs').then((mod) => ({ default: mod.DocsLayout }))
+  () => import('./DocsLayout-HGYIJTF3.mjs').then((mod) => ({ default: mod.DocsLayout }))
 );
 var LoadingFallback6 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "Loading API Playground..." }) }), "LoadingFallback");
 var Playground = /* @__PURE__ */ __name(({ config }) => {

package/dist/tree/index.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkYXZ6GU7H_cjs = require('../chunk-YXZ6GU7H.cjs');
-var chunkIEEAENLX_cjs = require('../chunk-IEEAENLX.cjs');
+var chunkFVVF7VCD_cjs = require('../chunk-FVVF7VCD.cjs');
 require('../chunk-OLISEQHS.cjs');
 
 
@@ -22,131 +22,131 @@ Object.defineProperty(exports, "createDemoTree", {
 });
 Object.defineProperty(exports, "DEFAULT_TREE_APPEARANCE", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.DEFAULT_TREE_APPEARANCE; }
+  get: function () { return chunkFVVF7VCD_cjs.DEFAULT_TREE_APPEARANCE; }
 });
 Object.defineProperty(exports, "DEFAULT_TREE_LABELS", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.DEFAULT_TREE_LABELS; }
+  get: function () { return chunkFVVF7VCD_cjs.DEFAULT_TREE_LABELS; }
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeRoot; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeRoot; }
 });
 Object.defineProperty(exports, "TreeChevron", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeChevron; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeChevron; }
 });
 Object.defineProperty(exports, "TreeContent", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeContent; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeContent; }
 });
 Object.defineProperty(exports, "TreeEmpty", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeEmpty; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeEmpty; }
 });
 Object.defineProperty(exports, "TreeIcon", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeIcon; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeIcon; }
 });
 Object.defineProperty(exports, "TreeIndentGuides", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeIndentGuides; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeIndentGuides; }
 });
 Object.defineProperty(exports, "TreeLabel", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeLabel; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeLabel; }
 });
 Object.defineProperty(exports, "TreeProvider", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeProvider; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeProvider; }
 });
 Object.defineProperty(exports, "TreeRoot", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeRoot; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeRoot; }
 });
 Object.defineProperty(exports, "TreeRow", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeRow; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeRow; }
 });
 Object.defineProperty(exports, "TreeSearchInput", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeSearchInput; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeSearchInput; }
 });
 Object.defineProperty(exports, "appearanceToStyle", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.appearanceToStyle; }
+  get: function () { return chunkFVVF7VCD_cjs.appearanceToStyle; }
 });
 Object.defineProperty(exports, "clearTreeState", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.clearTreeState; }
+  get: function () { return chunkFVVF7VCD_cjs.clearTreeState; }
 });
 Object.defineProperty(exports, "createChildCache", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.createChildCache; }
+  get: function () { return chunkFVVF7VCD_cjs.createChildCache; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeRoot_default; }
+  get: function () { return chunkFVVF7VCD_cjs.TreeRoot_default; }
 });
 Object.defineProperty(exports, "flattenTree", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.flattenTree; }
+  get: function () { return chunkFVVF7VCD_cjs.flattenTree; }
 });
 Object.defineProperty(exports, "loadTreeState", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.loadTreeState; }
+  get: function () { return chunkFVVF7VCD_cjs.loadTreeState; }
 });
 Object.defineProperty(exports, "resolveAppearance", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.resolveAppearance; }
+  get: function () { return chunkFVVF7VCD_cjs.resolveAppearance; }
 });
 Object.defineProperty(exports, "resolveChildren", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.resolveChildren; }
+  get: function () { return chunkFVVF7VCD_cjs.resolveChildren; }
 });
 Object.defineProperty(exports, "saveTreeState", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.saveTreeState; }
+  get: function () { return chunkFVVF7VCD_cjs.saveTreeState; }
 });
 Object.defineProperty(exports, "useTreeActions", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeActions; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeActions; }
 });
 Object.defineProperty(exports, "useTreeContext", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeContext; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeContext; }
 });
 Object.defineProperty(exports, "useTreeExpansion", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeExpansion; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeExpansion; }
 });
 Object.defineProperty(exports, "useTreeFocus", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeFocus; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeFocus; }
 });
 Object.defineProperty(exports, "useTreeKeyboard", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeKeyboard; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeKeyboard; }
 });
 Object.defineProperty(exports, "useTreeLabels", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeLabels; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeLabels; }
 });
 Object.defineProperty(exports, "useTreeRows", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeRows; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeRows; }
 });
 Object.defineProperty(exports, "useTreeSearch", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeSearch; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeSearch; }
 });
 Object.defineProperty(exports, "useTreeSelection", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeSelection; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeSelection; }
 });
 Object.defineProperty(exports, "useTreeTypeAhead", {
   enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.useTreeTypeAhead; }
+  get: function () { return chunkFVVF7VCD_cjs.useTreeTypeAhead; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/tree/index.d.cts

@@ -171,27 +171,57 @@ interface TreeChevronProps {
     isFolder: boolean;
     className?: string;
 }
-declare function TreeChevron({ isExpanded, isFolder, className }: TreeChevronProps): react_jsx_runtime.JSX.Element;
+/**
+ * TreeChevron — expand/collapse chevron for a tree row.
+ *
+ * Memoised: re-renders only when `isExpanded`, `isFolder` or `className`
+ * change. Reads appearance from context.
+ */
+declare function TreeChevronRaw({ isExpanded, isFolder, className }: TreeChevronProps): react_jsx_runtime.JSX.Element;
+declare const TreeChevron: react.MemoExoticComponent<typeof TreeChevronRaw>;
 
 interface TreeIconProps {
     isFolder: boolean;
     isExpanded: boolean;
     className?: string;
 }
-declare function TreeIcon({ isFolder, isExpanded, className }: TreeIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * TreeIcon — file/folder icon for a tree row.
+ *
+ * Memoised: re-renders only when `isFolder`, `isExpanded` or `className`
+ * change. Reads appearance from context — context updates will still
+ * trigger re-render as expected.
+ */
+declare function TreeIconRaw({ isFolder, isExpanded, className }: TreeIconProps): react_jsx_runtime.JSX.Element;
+declare const TreeIcon: react.MemoExoticComponent<typeof TreeIconRaw>;
 
 interface TreeLabelProps {
     children: React.ReactNode;
     isMatchingSearch?: boolean;
     className?: string;
 }
-declare function TreeLabel({ children, isMatchingSearch, className }: TreeLabelProps): react_jsx_runtime.JSX.Element;
+/**
+ * TreeLabel — truncated label for a tree row.
+ *
+ * Memoised: re-renders only when `children`, `isMatchingSearch` or
+ * `className` change. `children` is compared by reference.
+ */
+declare function TreeLabelRaw({ children, isMatchingSearch, className }: TreeLabelProps): react_jsx_runtime.JSX.Element;
+declare const TreeLabel: react.MemoExoticComponent<typeof TreeLabelRaw>;
 
 interface TreeRowProps<T> {
     row: FlatRow<T>;
     className?: string;
 }
-declare function TreeRow<T>({ row, className }: TreeRowProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * TreeRow — single row in a virtualised tree.
+ *
+ * Memoised: re-renders only when `row` reference or `className` change.
+ * `row` is treated as immutable — the parent should not mutate node
+ * objects in place.
+ */
+declare function TreeRowRaw<T>({ row, className }: TreeRowProps<T>): react_jsx_runtime.JSX.Element;
+declare const TreeRow: typeof TreeRowRaw;
 
 interface TreeContentProps<T> {
     /** Custom row renderer; falls back to <TreeRow />. */

package/dist/tree/index.d.ts

@@ -171,27 +171,57 @@ interface TreeChevronProps {
     isFolder: boolean;
     className?: string;
 }
-declare function TreeChevron({ isExpanded, isFolder, className }: TreeChevronProps): react_jsx_runtime.JSX.Element;
+/**
+ * TreeChevron — expand/collapse chevron for a tree row.
+ *
+ * Memoised: re-renders only when `isExpanded`, `isFolder` or `className`
+ * change. Reads appearance from context.
+ */
+declare function TreeChevronRaw({ isExpanded, isFolder, className }: TreeChevronProps): react_jsx_runtime.JSX.Element;
+declare const TreeChevron: react.MemoExoticComponent<typeof TreeChevronRaw>;
 
 interface TreeIconProps {
     isFolder: boolean;
     isExpanded: boolean;
     className?: string;
 }
-declare function TreeIcon({ isFolder, isExpanded, className }: TreeIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * TreeIcon — file/folder icon for a tree row.
+ *
+ * Memoised: re-renders only when `isFolder`, `isExpanded` or `className`
+ * change. Reads appearance from context — context updates will still
+ * trigger re-render as expected.
+ */
+declare function TreeIconRaw({ isFolder, isExpanded, className }: TreeIconProps): react_jsx_runtime.JSX.Element;
+declare const TreeIcon: react.MemoExoticComponent<typeof TreeIconRaw>;
 
 interface TreeLabelProps {
     children: React.ReactNode;
     isMatchingSearch?: boolean;
     className?: string;
 }
-declare function TreeLabel({ children, isMatchingSearch, className }: TreeLabelProps): react_jsx_runtime.JSX.Element;
+/**
+ * TreeLabel — truncated label for a tree row.
+ *
+ * Memoised: re-renders only when `children`, `isMatchingSearch` or
+ * `className` change. `children` is compared by reference.
+ */
+declare function TreeLabelRaw({ children, isMatchingSearch, className }: TreeLabelProps): react_jsx_runtime.JSX.Element;
+declare const TreeLabel: react.MemoExoticComponent<typeof TreeLabelRaw>;
 
 interface TreeRowProps<T> {
     row: FlatRow<T>;
     className?: string;
 }
-declare function TreeRow<T>({ row, className }: TreeRowProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * TreeRow — single row in a virtualised tree.
+ *
+ * Memoised: re-renders only when `row` reference or `className` change.
+ * `row` is treated as immutable — the parent should not mutate node
+ * objects in place.
+ */
+declare function TreeRowRaw<T>({ row, className }: TreeRowProps<T>): react_jsx_runtime.JSX.Element;
+declare const TreeRow: typeof TreeRowRaw;
 
 interface TreeContentProps<T> {
     /** Custom row renderer; falls back to <TreeRow />. */

package/dist/tree/index.mjs

@@ -1,5 +1,5 @@
 export { TreeError, TreeSkeleton, createDemoTree } from '../chunk-B6IR5KSC.mjs';
-export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, TreeRoot_default as default, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from '../chunk-G5IEC7SR.mjs';
+export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, TreeRoot_default as default, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from '../chunk-ZL7FH4NW.mjs';
 import '../chunk-N2XQF2OL.mjs';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.356",
+  "version": "2.1.357",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -101,8 +101,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.356",
-    "@djangocfg/ui-core": "^2.1.356",
+    "@djangocfg/i18n": "^2.1.357",
+    "@djangocfg/ui-core": "^2.1.357",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -155,10 +155,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.356",
+    "@djangocfg/i18n": "^2.1.357",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.356",
-    "@djangocfg/ui-core": "^2.1.356",
+    "@djangocfg/typescript-config": "^2.1.357",
+    "@djangocfg/ui-core": "^2.1.357",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/components/markdown/MarkdownMessage/ActionRow.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 import { CopyButton } from '@djangocfg/ui-core/components';
 
 interface ActionRowProps {
@@ -25,7 +25,10 @@ interface ActionRowProps {
 // stays smooth across re-renders. While invisible we drop pointer
 // events so a hidden row can't intercept clicks meant for the page
 // underneath.
-export const ActionRow: React.FC<ActionRowProps> = ({ value, isUser, visible }) => {
+//
+// Memoised: re-renders only when `value`, `isUser` or `visible` change.
+// All props are primitives, so default shallow comparison is sufficient.
+function ActionRowRaw({ value, isUser, visible }: ActionRowProps) {
   return (
     <div
       className={`flex ${isUser ? 'justify-end' : 'justify-start'}
@@ -45,4 +48,6 @@ export const ActionRow: React.FC<ActionRowProps> = ({ value, isUser, visible })
       />
     </div>
   );
-};
+}
+
+export const ActionRow = memo(ActionRowRaw);

package/src/components/markdown/MarkdownMessage/ChatMessageRow.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useMediaQuery } from '@djangocfg/ui-core/hooks';
 
 interface ChatMessageRowProps {
@@ -36,13 +36,17 @@ interface ChatMessageRowProps {
 // The action row is rendered **absolutely** under the bubble so
 // hidden rows don't allocate vertical space — no dead-air gap
 // between consecutive messages.
-export const ChatMessageRow: React.FC<ChatMessageRowProps> = ({
+//
+// Memoised: re-renders only when `isUser`, `children`, `actions`,
+// `closeDelayMs` or `className` change. `actions` render-prop is
+// compared by reference — callers should stabilise it with useCallback.
+function ChatMessageRowRaw({
   isUser,
   children,
   actions,
   closeDelayMs = 250,
   className = '',
-}) => {
+}: ChatMessageRowProps) {
   const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
   const [hovered, setHovered] = useState(false);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -94,4 +98,6 @@ export const ChatMessageRow: React.FC<ChatMessageRowProps> = ({
       )}
     </div>
   );
-};
+}
+
+export const ChatMessageRow = memo(ChatMessageRowRaw);

package/src/components/markdown/MarkdownMessage/CodeBlock.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { CopyButton } from '@djangocfg/ui-core/components';
 import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
 import PrettyCode from '../../../tools/PrettyCode';
@@ -18,8 +18,12 @@ interface CodeBlockProps {
  * surfaced as two copy buttons on every code fence. The fallback
  * branch below still ships its own button because the plain <pre>
  * has no toolbar of its own.
+ *
+ * Memoised: re-renders only when `code`, `language`, `isUser` or
+ * `isCompact` change. `code` is the main trigger — long code blocks
+ * should not re-render when parent chat scrolls.
  */
-export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
+function CodeBlockRaw({ code, language }: CodeBlockProps) {
   const theme = useResolvedTheme();
 
   // Chat fences are always rendered in PrettyCode's compact mode:
@@ -46,11 +50,17 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
       />
     </div>
   );
-};
+}
+
+export const CodeBlock = memo(CodeBlockRaw);
 
 /** Simple `<pre>` fallback used when CodeBlock throws (lazy module
- *  failure, missing PrettyCode peer, etc). */
-export const CodeBlockFallback: React.FC<CodeBlockProps> = ({ code, isUser }) => {
+ *  failure, missing PrettyCode peer, etc).
+ *
+ *  Memoised: re-renders only when `code`, `language`, `isUser` or
+ *  `isCompact` change.
+ */
+function CodeBlockFallbackRaw({ code, isUser }: CodeBlockProps) {
   // See CodeBlock above for the spirit of this layout — palette
   // pre-computed before render.
   const copyHoverClass = isUser
@@ -73,4 +83,6 @@ export const CodeBlockFallback: React.FC<CodeBlockProps> = ({ code, isUser }) =>
       </pre>
     </div>
   );
-};
+}
+
+export const CodeBlockFallback = memo(CodeBlockFallbackRaw);

package/src/components/markdown/MarkdownMessage/CollapseToggle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 interface CollapseToggleProps {
   isCollapsed: boolean;
@@ -9,15 +9,20 @@ interface CollapseToggleProps {
   isCompact: boolean;
 }
 
-/** "Read more..." / "Show less" button. */
-export const CollapseToggle: React.FC<CollapseToggleProps> = ({
+/** "Read more..." / "Show less" button.
+ *
+ * Memoised: re-renders only when `isCollapsed`, `onClick`, `readMoreLabel`,
+ * `showLessLabel`, `isUser` or `isCompact` change. `onClick` is compared
+ * by reference — callers should stabilise it with useCallback.
+ */
+function CollapseToggleRaw({
   isCollapsed,
   onClick,
   readMoreLabel,
   showLessLabel,
   isUser,
   isCompact,
-}) => {
+}: CollapseToggleProps) {
   const textSize = isCompact ? 'text-xs' : 'text-sm';
   return (
     <button
@@ -46,7 +51,7 @@ export const CollapseToggle: React.FC<CollapseToggleProps> = ({
   );
 };
 
-function Chevron({ direction }: { direction: 'up' | 'down' }) {
+const Chevron = memo(function Chevron({ direction }: { direction: 'up' | 'down' }) {
   return (
     <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path
@@ -57,4 +62,6 @@ function Chevron({ direction }: { direction: 'up' | 'down' }) {
       />
     </svg>
   );
-}
+});
+
+export const CollapseToggle = memo(CollapseToggleRaw);

package/src/components/markdown/MarkdownMessage/MarkdownMessage.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeRaw from 'rehype-raw';
@@ -49,8 +49,13 @@ import { applyPreprocess, buildLinkRulesComponent, collectProtocols } from './li
  *   linkRules={[machineMentionRule]}
  * />
  * ```
+ *
+ * Memoised: re-renders only when props change. `content` is the main
+ * trigger — all other props (className, isUser, isCompact, etc.) are
+ * compared by value/reference. `onCollapseChange` is compared by
+ * reference — callers should stabilise it with useCallback.
  */
-export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
+function MarkdownMessageRaw({
   content,
   className = '',
   isUser = false,
@@ -66,7 +71,7 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   showLessLabel = 'Show less',
   defaultExpanded = false,
   onCollapseChange,
-}) => {
+}: MarkdownMessageProps) {
   // Pre-process content through any rules that requested it. Done
   // before trim so a rule can rewrite multi-line shapes too.
   const preprocessed = React.useMemo(
@@ -250,4 +255,6 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   );
 };
 
+export const MarkdownMessage = memo(MarkdownMessageRaw);
+
 export default MarkdownMessage;

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

@@ -82,6 +82,8 @@ export interface ChatRootProps {
    * Use to add padding inside the scroll area so the scrollbar stays flush
    * with the edge (e.g. `"px-6 pt-6 sm:px-8"`). */
   listClassName?: string;
+  /** Extra className forwarded to the `<Composer>` wrapper div. */
+  composerClassName?: string;
 }
 
 export function ChatRoot(props: ChatRootProps) {

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { memo } from 'react';
 import { Copy, Pencil, RefreshCw, Trash } from 'lucide-react';
 
 import { cn } from '@djangocfg/ui-core/lib';
@@ -16,7 +17,14 @@ export interface MessageActionsProps {
   className?: string;
 }
 
-export function MessageActions({
+/**
+ * MessageActions — copy/regenerate/edit/delete buttons for a chat bubble.
+ *
+ * Memoised: re-renders only when `role`, `hideOn`, `className` or
+ * any handler reference changes. Event handlers are compared by
+ * reference — callers should stabilise them with useCallback.
+ */
+function MessageActionsRaw({
   role,
   onCopy,
   onRegenerate,
@@ -45,7 +53,7 @@ export function MessageActions({
   );
 }
 
-function ActionButton({
+const ActionButton = memo(function ActionButton({
   onClick,
   label,
   icon: Icon,
@@ -69,4 +77,6 @@ function ActionButton({
       <Icon aria-hidden className="size-3" />
     </button>
   );
-}
+});
+
+export const MessageActions = memo(MessageActionsRaw);