@djangocfg/ui-tools 2.1.210 → 2.1.213

package/src/tools/JsonTree/types.ts

@@ -0,0 +1,65 @@
+import { CommonExternalProps } from 'react-json-tree';
+
+export type JsonTreeMode = 'full' | 'compact' | 'inline';
+
+export interface JsonTreeConfig {
+  /** Maximum depth to expand automatically (default: 2) */
+  maxAutoExpandDepth?: number;
+  /** Maximum items in array to auto-expand (default: 10) */
+  maxAutoExpandArrayItems?: number;
+  /** Maximum object keys to auto-expand (default: 5) */
+  maxAutoExpandObjectKeys?: number;
+  /** Maximum string length before truncation (default: 200) */
+  maxStringLength?: number;
+  /** Collection limit for performance (default: 50) */
+  collectionLimit?: number;
+  /** Whether to show collection info (array length, object keys count) */
+  showCollectionInfo?: boolean;
+  /** Whether to show expand/collapse all buttons */
+  showExpandControls?: boolean;
+  /** Whether to show copy/download buttons */
+  showActionButtons?: boolean;
+  /** Custom CSS classes for the container */
+  className?: string;
+  /** Whether to preserve object key order (default: true) */
+  preserveKeyOrder?: boolean;
+}
+
+export interface JsonTreeComponentProps {
+  title?: string;
+  data: unknown;
+  /**
+   * Extra top offset in px for the floating toolbar — use when your layout
+   * has a non-sticky header that useNavbarHeight cannot auto-detect.
+   * Adds to the auto-detected navbar height.
+   */
+  toolbarOffset?: number;
+  /**
+   * Display mode:
+   * - "full" (default): With toolbar and border
+   * - "compact": No toolbar, subtle styling
+   * - "inline": Minimal, no border
+   */
+  mode?: JsonTreeMode;
+  config?: JsonTreeConfig;
+  /** Override for react-json-tree props */
+  jsonTreeProps?: Partial<CommonExternalProps>;
+}
+
+export const MODE_PRESETS: Record<JsonTreeMode, Partial<JsonTreeConfig>> = {
+  full: {
+    showExpandControls: true,
+    showActionButtons: true,
+    showCollectionInfo: true,
+  },
+  compact: {
+    showExpandControls: false,
+    showActionButtons: false,
+    showCollectionInfo: true,
+  },
+  inline: {
+    showExpandControls: false,
+    showActionButtons: false,
+    showCollectionInfo: false,
+  },
+};

package/src/tools/Mermaid/Mermaid.client.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Maximize2 } from 'lucide-react';
+import React, { useRef } from 'react';
 
-import { Button } from '@djangocfg/ui-core/components';
 import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import { FloatingToolbar } from '../../components/FloatingToolbar';
+import { CopyAction, FullscreenAction } from '../../components/FloatingToolbar/actions';
 import { MermaidFullscreenModal } from './components/MermaidFullscreenModal';
 import { useMermaidFullscreen } from './hooks/useMermaidFullscreen';
 import { useMermaidRenderer } from './hooks/useMermaidRenderer';
@@ -23,6 +23,7 @@ const Mermaid: React.FC<MermaidProps> = ({
     isCompact = false,
     fullscreen = true,
 }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
     const theme = useResolvedTheme();
 
     // Rendering logic
@@ -41,16 +42,10 @@ const Mermaid: React.FC<MermaidProps> = ({
         handleBackdropClick,
     } = useMermaidFullscreen();
 
-    const handleOpenFullscreen = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (svgContent) {
-            openFullscreen();
-        }
-    };
 
     return (
         <>
-            <div className={`relative ${className}`}>
+            <div ref={containerRef} className={`relative ${className}`}>
                 <div
                     ref={mermaidRef}
                     className="flex justify-center items-center"
@@ -62,16 +57,13 @@ const Mermaid: React.FC<MermaidProps> = ({
                     </div>
                 )}
 
-                {/* Fullscreen button in bottom-right corner */}
-                {fullscreen && svgContent && !isRendering && (
-                    <Button
-                        variant="secondary"
-                        size="icon"
-                        className="absolute bottom-2 right-2 h-8 w-8 opacity-60 hover:opacity-100 transition-opacity"
-                        onClick={handleOpenFullscreen}
-                    >
-                        <Maximize2 className="h-4 w-4" />
-                    </Button>
+                {svgContent && !isRendering && (
+                    <FloatingToolbar containerRef={containerRef}>
+                        <CopyAction value={chart} title="Copy source" />
+                        {fullscreen && (
+                            <FullscreenAction onToggle={openFullscreen} title="Fullscreen" />
+                        )}
+                    </FloatingToolbar>
                 )}
             </div>
 

package/src/tools/PrettyCode/PrettyCode.client.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Highlight, Language, themes } from 'prism-react-renderer';
-import React, { useMemo } from 'react';
-
-import { CopyButton } from '@djangocfg/ui-core/components';
+import React, { useMemo, useRef } from 'react';
 
 import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import { FloatingToolbar } from '../../components/FloatingToolbar';
+import { CopyAction } from '../../components/FloatingToolbar/actions';
 
 interface PrettyCodeProps {
   data: string | object;
@@ -16,9 +16,11 @@ interface PrettyCodeProps {
   inline?: boolean;
   customBg?: string; // Custom background class
   isCompact?: boolean; // Compact mode for smaller font sizes
+  scrollIsolation?: boolean; // Block scroll capture until user clicks (default: true)
 }
 
-const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false }: PrettyCodeProps) => {
+const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false, scrollIsolation }: PrettyCodeProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
   const t = useTypedT<I18nTranslations>();
   const detectedTheme = useResolvedTheme();
 
@@ -168,21 +170,19 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
   const borderClass = isDarkMode ? 'border-zinc-700' : 'border-border';
 
   return (
-    <div className={`relative h-full ${bgClass} rounded-lg border ${borderClass} ${className || ''}`}>
-      {/* Header with language badge and copy button */}
-      <div className="absolute top-2 left-3 right-3 z-10 flex items-center justify-between">
-        <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-background/80 text-muted-foreground border border-border/50 backdrop-blur-sm">
-          {displayLanguage}
-        </span>
-        <CopyButton
-          value={contentJson}
-          variant="ghost"
-          className="h-7 w-7 bg-background/80 border border-border/50 backdrop-blur-sm"
-          iconClassName="h-3.5 w-3.5"
-          title={labels.copyCode}
-        />
-      </div>
-      
+    <div ref={containerRef} className={`relative h-full ${bgClass} rounded-lg border ${borderClass} ${className || ''}`}>
+      <FloatingToolbar
+        containerRef={containerRef}
+        scrollIsolation={scrollIsolation}
+        label={
+          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-muted/80 text-muted-foreground border border-border/50 backdrop-blur-sm">
+            {displayLanguage}
+          </span>
+        }
+      >
+        <CopyAction value={contentJson} title={labels.copyCode} />
+      </FloatingToolbar>
+
       <div className="h-full overflow-auto">
         <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
           {({ className, style, tokens, getLineProps, getTokenProps }) => {