@djangocfg/ui-tools 2.1.355 → 2.1.357

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);

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { memo } from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 export interface StreamingIndicatorProps {
@@ -8,7 +9,14 @@ export interface StreamingIndicatorProps {
   className?: string;
 }
 
-export function StreamingIndicator({ variant = 'dots', label, className }: StreamingIndicatorProps) {
+/**
+ * StreamingIndicator — animated dots or pulse for streaming state.
+ *
+ * Memoised: re-renders only when `variant`, `label` or `className`
+ * change. All props are primitives, so default shallow comparison is
+ * sufficient.
+ */
+function StreamingIndicatorRaw({ variant = 'dots', label, className }: StreamingIndicatorProps) {
   return (
     <span
       className={cn('inline-flex items-center gap-1.5 text-xs text-muted-foreground', className)}
@@ -27,3 +35,5 @@ export function StreamingIndicator({ variant = 'dots', label, className }: Strea
     </span>
   );
 }
+
+export const StreamingIndicator = memo(StreamingIndicatorRaw);

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 import { CommonExternalProps, JSONTree } from 'react-json-tree';
 
 const JSON_TREE_THEME = {
@@ -38,7 +38,13 @@ interface JsonContentProps {
   jsonTreeProps?: Partial<CommonExternalProps>;
 }
 
-export const JsonContent: React.FC<JsonContentProps> = ({
+/**
+ * JsonContent — react-json-tree wrapper with theming.
+ *
+ * Memoised: re-renders only when any prop changes. `data` is compared
+ * by reference — the parent should not mutate the object in place.
+ */
+const JsonContent = memo(({
   data,
   renderKey,
   title,
@@ -51,7 +57,7 @@ export const JsonContent: React.FC<JsonContentProps> = ({
   fontSize,
   shouldExpandNodeInitially,
   jsonTreeProps = {},
-}) => {
+}: JsonContentProps) => {
   const getItemString = showCollectionInfo
     ? (nodeType: string, nodeData: unknown) => {
         if (nodeType === 'Array') {
@@ -97,4 +103,7 @@ export const JsonContent: React.FC<JsonContentProps> = ({
       />
     </div>
   );
-};
+});
+
+export { JsonContent };
+export default JsonContent;

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ChevronDown, ChevronUp, Download } from 'lucide-react';
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Button, CopyButton } from '@djangocfg/ui-core/components';
 
@@ -24,7 +24,14 @@ const BUTTON_CLASS = 'h-6 w-6 rounded-sm bg-muted/80 hover:bg-muted border borde
 const TOOLBAR_H = 24 + 8 + 8;
 const OFFSET = 8;
 
-export const JsonToolbar: React.FC<JsonToolbarProps> = ({
+/**
+ * JsonToolbar — floating toolbar for JsonTree.
+ *
+ * Memoised: re-renders only when any prop changes. Position props
+ * (`top`, `right`, `bottom`) are primitives, so default shallow
+ * comparison is sufficient.
+ */
+const JsonToolbar = memo(function JsonToolbar({
   top,
   right,
   bottom,
@@ -34,7 +41,7 @@ export const JsonToolbar: React.FC<JsonToolbarProps> = ({
   onDownload,
   showExpandControls,
   showActionButtons,
-}) => {
+}: JsonToolbarProps) {
   const viewportHeight = window.visualViewport?.height ?? document.documentElement.clientHeight;
 
   // Hide when block is fully above or below viewport

package/src/tools/JsonTree/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo, useRef } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 
 import { FloatingToolbar } from '../../components/FloatingToolbar';
 import { CopyAction, DownloadAction, ExpandAction } from '../../components/FloatingToolbar/actions';
@@ -11,7 +11,14 @@ import { JsonTreeComponentProps, MODE_PRESETS } from './types';
 export type { Language } from 'prism-react-renderer';
 export type { JsonTreeConfig, JsonTreeComponentProps, JsonTreeMode } from './types';
 
-const JsonTreeComponent = ({
+/**
+ * JsonTreeComponent — JSON viewer with expand/collapse, copy, download.
+ *
+ * Memoised: re-renders only when `title`, `data`, `mode`, `config` or
+ * `jsonTreeProps` change. `data` is compared by reference — the parent
+ * should not mutate the object in place.
+ */
+const JsonTreeComponent = memo(({
   title,
   data,
   mode = 'full',
@@ -86,6 +93,6 @@ const JsonTreeComponent = ({
       />
     </div>
   );
-};
+});
 
 export default JsonTreeComponent;

package/src/tools/Tree/components/TreeChevron.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { ChevronDown, ChevronRight } from 'lucide-react';
+import { memo } from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useTreeContext } from '../context/TreeContext';
@@ -11,7 +12,13 @@ export interface TreeChevronProps {
   className?: string;
 }
 
-export function TreeChevron({ isExpanded, isFolder, className }: TreeChevronProps) {
+/**
+ * TreeChevron — expand/collapse chevron for a tree row.
+ *
+ * Memoised: re-renders only when `isExpanded`, `isFolder` or `className`
+ * change. Reads appearance from context.
+ */
+function TreeChevronRaw({ isExpanded, isFolder, className }: TreeChevronProps) {
   const { appearance } = useTreeContext();
   const size = { width: 'var(--tree-icon-size)', height: 'var(--tree-icon-size)' };
 
@@ -37,3 +44,5 @@ export function TreeChevron({ isExpanded, isFolder, className }: TreeChevronProp
     />
   );
 }
+
+export const TreeChevron = memo(TreeChevronRaw);

package/src/tools/Tree/components/TreeIcon.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { File, Folder, FolderOpen } from 'lucide-react';
+import { memo } from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useTreeContext } from '../context/TreeContext';
@@ -11,7 +12,14 @@ export interface TreeIconProps {
   className?: string;
 }
 
-export function TreeIcon({ isFolder, isExpanded, className }: TreeIconProps) {
+/**
+ * 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.
+ */
+function TreeIconRaw({ isFolder, isExpanded, className }: TreeIconProps) {
   const { appearance } = useTreeContext();
   const Icon = isFolder ? (isExpanded ? FolderOpen : Folder) : File;
   return (
@@ -27,3 +35,5 @@ export function TreeIcon({ isFolder, isExpanded, className }: TreeIconProps) {
     />
   );
 }
+
+export const TreeIcon = memo(TreeIconRaw);

package/src/tools/Tree/components/TreeLabel.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { memo } from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 export interface TreeLabelProps {
@@ -8,7 +9,13 @@ export interface TreeLabelProps {
   className?: string;
 }
 
-export function TreeLabel({ children, isMatchingSearch, className }: TreeLabelProps) {
+/**
+ * TreeLabel — truncated label for a tree row.
+ *
+ * Memoised: re-renders only when `children`, `isMatchingSearch` or
+ * `className` change. `children` is compared by reference.
+ */
+function TreeLabelRaw({ children, isMatchingSearch, className }: TreeLabelProps) {
   return (
     <span
       style={{ fontSize: 'var(--tree-font-size)' }}
@@ -22,3 +29,5 @@ export function TreeLabel({ children, isMatchingSearch, className }: TreeLabelPr
     </span>
   );
 }
+
+export const TreeLabel = memo(TreeLabelRaw);

package/src/tools/Tree/components/TreeRow.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useTreeContext } from '../context/TreeContext';
@@ -16,7 +17,14 @@ export interface TreeRowProps<T> {
   className?: string;
 }
 
-export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
+/**
+ * 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.
+ */
+function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
   const ctx = useTreeContext<T>();
   const {
     appearance,
@@ -170,3 +178,5 @@ export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
   }
   return trigger;
 }
+
+export const TreeRow = memo(TreeRowRaw) as typeof TreeRowRaw;

package/dist/ChatRoot-2KT32NFJ.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var chunk2SXDCXLK_cjs = require('./chunk-2SXDCXLK.cjs');
-require('./chunk-B5AWZOHJ.cjs');
-require('./chunk-OLISEQHS.cjs');
-
-
-
-Object.defineProperty(exports, "ChatRoot", {
-  enumerable: true,
-  get: function () { return chunk2SXDCXLK_cjs.ChatRoot; }
-});
-//# sourceMappingURL=ChatRoot-2KT32NFJ.cjs.map
-//# sourceMappingURL=ChatRoot-2KT32NFJ.cjs.map

package/dist/ChatRoot-VSIBJLE2.mjs

@@ -1,5 +0,0 @@
-export { ChatRoot } from './chunk-XJ7CXHSU.mjs';
-import './chunk-2ZLKZ5VR.mjs';
-import './chunk-N2XQF2OL.mjs';
-//# sourceMappingURL=ChatRoot-VSIBJLE2.mjs.map
-//# sourceMappingURL=ChatRoot-VSIBJLE2.mjs.map

package/dist/JsonTree-55625VVH.mjs

@@ -1,5 +0,0 @@
-export { JsonTree_default as default } from './chunk-5G5YBFS6.mjs';
-import './chunk-KNEQRUBA.mjs';
-import './chunk-N2XQF2OL.mjs';
-//# sourceMappingURL=JsonTree-55625VVH.mjs.map
-//# sourceMappingURL=JsonTree-55625VVH.mjs.map

package/dist/JsonTree-DCM5QGWF.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var chunkSGP7V2UW_cjs = require('./chunk-SGP7V2UW.cjs');
-require('./chunk-FP2RLYQZ.cjs');
-require('./chunk-OLISEQHS.cjs');
-
-
-
-module.exports = chunkSGP7V2UW_cjs.JsonTree_default;
-//# sourceMappingURL=JsonTree-DCM5QGWF.cjs.map
-//# sourceMappingURL=JsonTree-DCM5QGWF.cjs.map

package/dist/TreeRoot-N72OYKXU.cjs

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var chunkIEEAENLX_cjs = require('./chunk-IEEAENLX.cjs');
-require('./chunk-OLISEQHS.cjs');
-
-
-
-Object.defineProperty(exports, "TreeRoot", {
-  enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeRoot; }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () { return chunkIEEAENLX_cjs.TreeRoot_default; }
-});
-//# sourceMappingURL=TreeRoot-N72OYKXU.cjs.map
-//# sourceMappingURL=TreeRoot-N72OYKXU.cjs.map

package/dist/TreeRoot-VGAIXCUA.mjs

@@ -1,4 +0,0 @@
-export { TreeRoot, TreeRoot_default as default } from './chunk-G5IEC7SR.mjs';
-import './chunk-N2XQF2OL.mjs';
-//# sourceMappingURL=TreeRoot-VGAIXCUA.mjs.map
-//# sourceMappingURL=TreeRoot-VGAIXCUA.mjs.map