@djangocfg/ui-tools 2.1.417 → 2.1.419

package/src/tools/chat/launcher/ChatFAB.tsx

@@ -5,6 +5,11 @@ import type { CSSProperties, ReactNode } from 'react';
 
 import { useIsPhone, useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@djangocfg/ui-core/components';
 
 import { Z_INDEX } from '../constants';
 
@@ -80,11 +85,9 @@ function positionStyle(position: ChatFABPosition, offset: number): CSSProperties
   return { [vert]: offset, [horiz]: offset } as CSSProperties;
 }
 
-function tooltipSideClasses(position: ChatFABPosition): string {
+function tooltipSide(position: ChatFABPosition): 'left' | 'right' {
   // Tooltip sits opposite-horizontal to the FAB so it doesn't run off-screen.
-  return position.endsWith('right')
-    ? 'right-full mr-3 origin-right'
-    : 'left-full ml-3 origin-left';
+  return position.endsWith('right') ? 'left' : 'right';
 }
 
 function Badge({ value }: { value: number }) {
@@ -114,24 +117,6 @@ function PulseDot() {
   );
 }
 
-function Tooltip({ text, side }: { text: string; side: string }) {
-  return (
-    <span
-      role="tooltip"
-      className={cn(
-        'pointer-events-none absolute top-1/2 -translate-y-1/2 whitespace-nowrap',
-        'rounded-md bg-popover px-2.5 py-1 text-xs font-medium text-popover-foreground shadow-md',
-        'border border-border opacity-0 scale-95 transition-all duration-150',
-        'group-hover:opacity-100 group-hover:scale-100',
-        'group-focus-within:opacity-100 group-focus-within:scale-100',
-        side,
-      )}
-    >
-      {text}
-    </span>
-  );
-}
-
 /**
  * Floating action button for opening a chat dock. Pure presentation — owns
  * no state. Wire it to whatever toggles your dock open.
@@ -165,65 +150,72 @@ export function ChatFAB({
     'transition-transform hover:scale-105',
   );
 
-  return (
+  const fabNode =
+    variant === 'animated' ? (
+      <AnimatedFAB
+        ariaLabel={ariaLabel}
+        onClick={onClick}
+        size={px}
+        className={className}
+        style={style}
+      >
+        {renderedIcon}
+      </AnimatedFAB>
+    ) : variant === 'glass' ? (
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        onClick={onClick}
+        className={cn(
+          baseButton,
+          'border border-border/40 bg-background/60 text-foreground shadow-lg backdrop-blur-xl',
+          'hover:bg-background/80',
+          className,
+        )}
+        style={{ width: px, height: px, ...style }}
+      >
+        {renderedIcon}
+        {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
+      </button>
+    ) : (
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        onClick={onClick}
+        className={cn(
+          baseButton,
+          'bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xl',
+          className,
+        )}
+        style={{ width: px, height: px, ...style }}
+      >
+        {renderedIcon}
+        {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
+      </button>
+    );
+
+  // Wrap in our Tooltip when a tooltip label is provided. Animated variant
+  // ships a wrapping <div>, so we mount the Tooltip on the FAB node directly
+  // rather than relying on `asChild` forwarding through that wrapper.
+  const positioned = (
     <div
-      className={cn('group', inline ? 'relative inline-flex' : 'fixed')}
+      className={inline ? 'relative inline-flex' : 'fixed'}
       style={
-        inline
-          ? undefined
-          : { ...positionStyle(position, offset), zIndex }
+        inline ? undefined : { ...positionStyle(position, offset), zIndex }
       }
     >
-      {variant === 'animated' && (
-        <AnimatedFAB
-          ariaLabel={ariaLabel}
-          onClick={onClick}
-          size={px}
-          className={className}
-          style={style}
-        >
-          {renderedIcon}
-        </AnimatedFAB>
-      )}
-
-      {variant === 'glass' && (
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          onClick={onClick}
-          className={cn(
-            baseButton,
-            'border border-border/40 bg-background/60 text-foreground shadow-lg backdrop-blur-xl',
-            'hover:bg-background/80',
-            className,
-          )}
-          style={{ width: px, height: px, ...style }}
-        >
-          {renderedIcon}
-          {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
-        </button>
-      )}
-
-      {variant === 'simple' && (
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          onClick={onClick}
-          className={cn(
-            baseButton,
-            'bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xl',
-            className,
-          )}
-          style={{ width: px, height: px, ...style }}
-        >
-          {renderedIcon}
-          {badge !== undefined ? <Badge value={badge} /> : pulse ? <PulseDot /> : null}
-        </button>
+      {tooltip ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{fabNode}</TooltipTrigger>
+          <TooltipContent side={tooltipSide(position)}>{tooltip}</TooltipContent>
+        </Tooltip>
+      ) : (
+        fabNode
       )}
-
-      {tooltip && <Tooltip text={tooltip} side={tooltipSideClasses(position)} />}
     </div>
   );
+
+  return positioned;
 }
 
 // ── Animated variant ──────────────────────────────────────────────────────

package/src/tools/chat/launcher/header/ChatHeaderActionButton.tsx

@@ -19,7 +19,7 @@ export interface ChatHeaderActionButtonProps
   /**
    * Tooltip copy. Defaults to `ariaLabel`. Pass to show a friendlier
    * label than the (sometimes terse) aria string. Set `false` to opt
-   * out of the floating tooltip entirely (native `title` still applies).
+   * out of the floating tooltip entirely.
    */
   tooltip?: ReactNode | false;
   /** Optional unread / status badge — small number on top-right. */
@@ -72,7 +72,6 @@ export const ChatHeaderActionButton = forwardRef<HTMLButtonElement, ChatHeaderAc
         ref={ref}
         type="button"
         aria-label={ariaLabel}
-        title={ariaLabel}
         disabled={disabled || loading}
         className={cn(
           'relative inline-flex h-7 w-7 items-center justify-center rounded-md',
@@ -98,7 +97,7 @@ export const ChatHeaderActionButton = forwardRef<HTMLButtonElement, ChatHeaderAc
       </button>
     );
 
-    // Opted out — keep the native `title` only.
+    // Opted out — render the button without any tooltip.
     if (tooltip === false) return button;
 
     // Floating tooltip on hover *and* keyboard focus.

package/src/tools/chat/lazy.tsx

@@ -28,7 +28,7 @@
  * `LazyChatLauncher` and skip the synchronous component re-exports.
  */
 
-import { createLazyComponent, LoadingFallback } from '../../components/lazy-wrapper';
+import { createLazyComponent, LoadingFallback } from '../../common/lazy-wrapper';
 import type { ChatRootProps } from './shell/ChatRoot';
 import type { ChatLauncherProps } from './launcher';
 

package/src/tools/chat/messages/MessageBubble.tsx

@@ -5,7 +5,7 @@ import { memo, type ReactNode } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { MarkdownMessage } from '../../dev/MarkdownMessage';
+import { MarkdownMessage } from '../../dev/code/MarkdownMessage';
 import type {
   ChatAssistantContext,
   ChatAttachment,

package/src/tools/chat/messages/blocks/builtin.tsx

@@ -12,7 +12,7 @@
 
 import { lazy, Suspense, type ComponentType } from 'react';
 
-import { MarkdownMessage } from '../../../dev/MarkdownMessage';
+import { MarkdownMessage } from '../../../dev/code/MarkdownMessage';
 import type {
   AudioBlock,
   CodeBlock,

package/src/tools/chat/messages/blocks/renderers/CodeBlock.tsx

@@ -2,8 +2,8 @@
 
 /** Code block — read-only syntax highlighting via `PrettyCode`. */
 
-import { LazyPrettyCode } from '../../../../dev/PrettyCode/lazy';
-import type { Language } from '../../../../dev/PrettyCode/lazy';
+import { LazyPrettyCode } from '../../../../dev/code/PrettyCode/lazy';
+import type { Language } from '../../../../dev/code/PrettyCode/lazy';
 import type { CodeBlock } from '../../../types/block';
 import type { BlockRendererProps } from './types';
 

package/src/tools/chat/messages/blocks/renderers/JsonBlock.tsx

@@ -7,6 +7,17 @@ import type { JsonBlock } from '../../../types/block';
 import type { BlockRendererProps } from './types';
 
 export default function JsonBlockRenderer({ block, ctx }: BlockRendererProps<JsonBlock>) {
+  // Compact appearance (block.mode === 'compact' or compact chat) → hide
+  // the toolbar, collapse depth, drop the card frame. Full appearance →
+  // hover-revealed toolbar + card.
   const mode = block.mode ?? (ctx.appearance === 'compact' ? 'compact' : 'full');
-  return <LazyJsonTree data={block.data} mode={mode} />;
+  const compact = mode !== 'full';
+  return (
+    <LazyJsonTree
+      data={block.data}
+      toolbar={compact ? 'never' : 'auto'}
+      bordered={!compact}
+      defaultExpandedDepth={compact ? 1 : 2}
+    />
+  );
 }

package/src/tools/data/DataGrid/lazy.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import { createLazyComponent, LoadingFallback } from '../../../common/lazy-wrapper';
 import type { DataGridProps } from './types';
 
 export const LazyDataGrid = createLazyComponent<DataGridProps<unknown>>(

package/src/tools/data/DataTable/lazy.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import { createLazyComponent, LoadingFallback } from '../../../common/lazy-wrapper';
 import type { DataTableProps } from './types';
 
 export const LazyDataTable = createLazyComponent<DataTableProps<unknown>>(