@djangocfg/ui-nextjs 2.1.20 → 2.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.20",
+  "version": "2.1.22",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.20",
-    "@djangocfg/ui-core": "^2.1.20",
+    "@djangocfg/api": "^2.1.22",
+    "@djangocfg/ui-core": "^2.1.22",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -104,7 +104,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.20",
+    "@djangocfg/typescript-config": "^2.1.22",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/components/markdown/MarkdownMessage.tsx

@@ -47,9 +47,10 @@ interface CodeBlockProps {
   code: string;
   language: string;
   isUser: boolean;
+  isCompact?: boolean;
 }
 
-const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser }) => {
+const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, isCompact = false }) => {
   const theme = useResolvedTheme();
 
   return (
@@ -73,9 +74,10 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser }) => {
       <PrettyCode
         data={code}
         language={language}
-        className="text-xs"
+        className={isCompact ? 'text-xs' : 'text-sm'}
         customBg={isUser ? "bg-white/10" : "bg-muted dark:bg-muted"}
         mode={theme}
+        isCompact={isCompact}
       />
     </div>
   );
@@ -172,14 +174,14 @@ const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean =
     if (language === 'mermaid') {
       return (
         <div className="my-3 max-w-full overflow-x-auto">
-          <Mermaid chart={codeContent} className="max-w-[600px] mx-auto" />
+          <Mermaid chart={codeContent} className="max-w-[600px] mx-auto" isCompact={isCompact} />
         </div>
       );
     }
 
     // Try to use CodeBlock component, fallback to simple pre if it fails
     try {
-      return <CodeBlock code={codeContent} language={language} isUser={isUser} />;
+      return <CodeBlock code={codeContent} language={language} isUser={isUser} isCompact={isCompact} />;
     } catch (error) {
       // Fallback to simple pre element with copy button
       console.warn('CodeBlock failed, using fallback:', error);

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

@@ -8,6 +8,7 @@ import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 interface MermaidProps {
     chart: string;
     className?: string;
+    isCompact?: boolean; // Compact mode for smaller font sizes
 }
 
 // Utility function to apply text colors to Mermaid SVG
@@ -42,7 +43,7 @@ const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
     return false;
 };
 
-const Mermaid: React.FC<MermaidProps> = ({ chart, className = '' }) => {
+const Mermaid: React.FC<MermaidProps> = ({ chart, className = '', isCompact = false }) => {
     const mermaidRef = useRef<HTMLDivElement>(null);
     const fullscreenRef = useRef<HTMLDivElement>(null);
     const [isFullscreen, setIsFullscreen] = useState(false);
@@ -58,6 +59,9 @@ const Mermaid: React.FC<MermaidProps> = ({ chart, className = '' }) => {
             return value ? `hsl(${value})` : '';
         };
 
+        // Font size based on compact mode
+        const diagramFontSize = isCompact ? '12px' : '14px';
+
         // Note: In Mermaid v11+, mermaidAPI.reset() no longer exists
         // Re-initialization happens automatically via mermaid.initialize()
 
@@ -103,7 +107,7 @@ const Mermaid: React.FC<MermaidProps> = ({ chart, className = '' }) => {
                 errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 62.8% 30.6%)',
                 errorTextColor: 'hsl(210 40% 98%)',
 
-                fontSize: '14px',
+                fontSize: diagramFontSize,
                 fontFamily: 'Inter, system-ui, sans-serif',
             } : {
                 // Light theme - clean and professional
@@ -147,7 +151,7 @@ const Mermaid: React.FC<MermaidProps> = ({ chart, className = '' }) => {
                 errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 84.2% 60.2%)',
                 errorTextColor: 'hsl(210 40% 98%)',
 
-                fontSize: '14px',
+                fontSize: diagramFontSize,
                 fontFamily: 'Inter, system-ui, sans-serif',
             };
 
@@ -217,7 +221,7 @@ const Mermaid: React.FC<MermaidProps> = ({ chart, className = '' }) => {
         };
 
         renderChart();
-    }, [chart, theme]);
+    }, [chart, theme, isCompact]);
 
     const handleClick = () => {
         if (svgContent) {

package/src/tools/Mermaid/index.tsx

@@ -31,6 +31,7 @@ const MermaidClient = dynamic(() => import('./Mermaid.client'), {
 interface MermaidProps {
   chart: string;
   className?: string;
+  isCompact?: boolean; // Compact mode for smaller font sizes
 }
 
 const Mermaid: React.FC<MermaidProps> = (props) => {

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

@@ -12,11 +12,15 @@ interface PrettyCodeProps {
   mode?: 'dark' | 'light';
   inline?: boolean;
   customBg?: string; // Custom background class
+  isCompact?: boolean; // Compact mode for smaller font sizes
 }
 
-const PrettyCode = ({ data, language, className, mode, inline = false, customBg }: PrettyCodeProps) => {
+const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false }: PrettyCodeProps) => {
   const detectedTheme = useResolvedTheme();
 
+  // Font size based on compact mode
+  const fontSize = isCompact ? '0.75rem' : '0.875rem'; // 12px vs 14px
+
   // Use provided mode or fall back to detected theme
   const currentTheme = mode || detectedTheme;
   const isDarkMode = currentTheme === 'dark';
@@ -131,10 +135,10 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg
       <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
         {({ className, style, tokens, getTokenProps }) => (
           <code
-            className={`${className} ${inlineBgClass} px-2 py-1 rounded text-sm font-mono inline-block`}
+            className={`${className} ${inlineBgClass} px-2 py-1 rounded ${isCompact ? 'text-xs' : 'text-sm'} font-mono inline-block`}
             style={{
               ...style,
-              fontSize: '0.875rem',
+              fontSize,
               fontFamily: 'monospace',
             }}
           >
@@ -176,8 +180,8 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg
                 ...style,
                 margin: 0,
                 padding: '2.5rem 1rem 1rem 1rem', // Extra top padding for language badge
-                fontSize: '0.875rem',
-                lineHeight: 1.5,
+                fontSize,
+                lineHeight: isCompact ? 1.4 : 1.5,
                 fontFamily: 'monospace',
                 whiteSpace: 'pre-wrap',
                 wordBreak: 'break-word',

package/src/tools/PrettyCode/index.tsx

@@ -33,6 +33,7 @@ interface PrettyCodeProps {
   mode?: 'dark' | 'light';
   inline?: boolean;
   customBg?: string;
+  isCompact?: boolean; // Compact mode for smaller font sizes
 }
 
 const PrettyCode: React.FC<PrettyCodeProps> = (props) => {