@djangocfg/ui-tools 2.1.91

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@djangocfg/ui-tools",
+  "version": "2.1.91",
+  "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
+  "keywords": [
+    "ui-tools",
+    "react",
+    "lazy-loading",
+    "video-player",
+    "audio-player",
+    "json-form",
+    "mermaid",
+    "code-highlight"
+  ],
+  "author": {
+    "name": "DjangoCFG",
+    "url": "https://djangocfg.com"
+  },
+  "homepage": "https://djangocfg.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/markolofsen/django-cfg.git",
+    "directory": "packages/ui-tools"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch",
+    "check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "lucide-react": "^0.545.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "zustand": "^5.0.0",
+    "consola": "^3.4.2"
+  },
+  "dependencies": {
+    "@djangocfg/ui-core": "^2.1.91",
+    "@rjsf/core": "^6.1.2",
+    "@rjsf/utils": "^6.1.2",
+    "@rjsf/validator-ajv8": "^6.1.2",
+    "@vidstack/react": "next",
+    "@wavesurfer/react": "^1.0.12",
+    "media-icons": "next",
+    "mermaid": "^11.12.0",
+    "prism-react-renderer": "^2.4.1",
+    "react-json-tree": "^0.20.0",
+    "react-lottie-player": "^2.1.0",
+    "react-markdown": "10.1.0",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "remark-gfm": "4.0.1",
+    "vidstack": "next",
+    "wavesurfer.js": "^7.12.1"
+  },
+  "devDependencies": {
+    "@djangocfg/typescript-config": "^2.1.91",
+    "@types/node": "^24.7.2",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/markdown/MarkdownMessage.tsx

@@ -0,0 +1,340 @@
+'use client';
+
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import { CopyButton } from '@djangocfg/ui-core/components';
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+
+import Mermaid from '../../tools/Mermaid';
+import PrettyCode from '../../tools/PrettyCode';
+
+import type { Components } from 'react-markdown';
+
+// Helper function to extract text content from React children
+const extractTextFromChildren = (children: React.ReactNode): string => {
+  if (typeof children === 'string') {
+    return children;
+  }
+
+  if (typeof children === 'number') {
+    return String(children);
+  }
+
+  if (React.isValidElement(children)) {
+    const props = children.props as { children?: React.ReactNode };
+    return extractTextFromChildren(props.children);
+  }
+
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join('');
+  }
+
+  return '';
+};
+
+export interface MarkdownMessageProps {
+  /** Markdown content to render */
+  content: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the message is from the user (affects styling) */
+  isUser?: boolean;
+  /** Use compact size (text-xs instead of text-sm) */
+  isCompact?: boolean;
+}
+
+// Code block component with copy functionality
+interface CodeBlockProps {
+  code: string;
+  language: string;
+  isUser: boolean;
+  isCompact?: boolean;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, isCompact = false }) => {
+  const theme = useResolvedTheme();
+
+  return (
+    <div className="relative group my-3">
+      {/* Copy button */}
+      <CopyButton
+        value={code}
+        variant="ghost"
+        className={`
+          absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
+          h-8 w-8
+          ${isUser
+            ? 'hover:bg-white/20 text-white'
+            : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
+          }
+        `}
+        title="Copy code"
+      />
+
+      {/* Code content */}
+      <PrettyCode
+        data={code}
+        language={language}
+        className={isCompact ? 'text-xs' : 'text-sm'}
+        customBg={isUser ? "bg-white/10" : "bg-muted dark:bg-muted"}
+        mode={theme}
+        isCompact={isCompact}
+      />
+    </div>
+  );
+};
+
+// Custom components for markdown in chat
+// Base size: text-sm (14px) for normal, text-xs (12px) for compact
+const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean = false): Components => {
+  // Text size classes based on compact mode
+  const textSize = isCompact ? 'text-xs' : 'text-sm';
+  const headingBase = isCompact ? 'text-sm' : 'text-base';
+  const headingSm = isCompact ? 'text-xs' : 'text-sm';
+
+  return {
+  // Headings - scaled for chat context
+  h1: ({ children }) => (
+    <h1 className={`${headingBase} font-bold mb-2 mt-3 first:mt-0`}>{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className={`${headingSm} font-bold mb-2 mt-3 first:mt-0`}>{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className={`${headingSm} font-semibold mb-1 mt-2 first:mt-0`}>{children}</h3>
+  ),
+  h4: ({ children }) => (
+    <h4 className={`${headingSm} font-semibold mb-1 mt-2 first:mt-0`}>{children}</h4>
+  ),
+  h5: ({ children }) => (
+    <h5 className={`${headingSm} font-medium mb-1 mt-2 first:mt-0`}>{children}</h5>
+  ),
+  h6: ({ children }) => (
+    <h6 className={`${headingSm} font-medium mb-1 mt-2 first:mt-0`}>{children}</h6>
+  ),
+
+  // Paragraphs - compact spacing for chat
+  p: ({ children }) => (
+    <p className={`${textSize} mb-2 last:mb-0 leading-relaxed break-words`}>{children}</p>
+  ),
+
+  // Lists - compact
+  ul: ({ children }) => (
+    <ul className={`list-disc list-inside mb-2 space-y-1 ${textSize}`}>{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className={`list-decimal list-inside mb-2 space-y-1 ${textSize}`}>{children}</ol>
+  ),
+  li: ({ children }) => (
+    <li className="break-words">{children}</li>
+  ),
+
+  // Links - appropriate for chat context
+  a: ({ href, children }) => (
+    <a
+      href={href}
+      className={`${textSize} text-primary underline hover:text-primary/80 transition-colors break-all`}
+      target={href?.startsWith('http') ? '_blank' : undefined}
+      rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+    >
+      {children}
+    </a>
+  ),
+
+  // Code blocks - using CodeBlock component with copy functionality
+  pre: ({ children }) => {
+    // Extract code content and language
+    let codeContent = '';
+    let language = 'plaintext';
+
+    if (React.isValidElement(children)) {
+      const child = children;
+
+      if (child.type === 'code' || (typeof child.type === 'function' && child.type.name === 'code')) {
+        const codeProps = child.props as { className?: string; children?: React.ReactNode };
+        const rawClassName = codeProps.className;
+        language = rawClassName?.replace(/language-/, '').trim() || 'plaintext';
+        codeContent = extractTextFromChildren(codeProps.children).trim();
+      } else {
+        codeContent = extractTextFromChildren(children).trim();
+      }
+    } else {
+      codeContent = extractTextFromChildren(children).trim();
+    }
+
+    // If still no content, show placeholder
+    if (!codeContent) {
+      return (
+        <div className="my-3 p-3 bg-muted rounded text-sm text-muted-foreground">
+          No content available
+        </div>
+      );
+    }
+
+    // Handle Mermaid diagrams separately
+    if (language === 'mermaid') {
+      return (
+        <div className="my-3 max-w-full overflow-x-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} isCompact={isCompact} />;
+    } catch (error) {
+      // Fallback to simple pre element with copy button
+      console.warn('CodeBlock failed, using fallback:', error);
+      return (
+        <div className="relative group my-3">
+          <CopyButton
+            value={codeContent}
+            variant="ghost"
+            className={`
+              absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
+              h-8 w-8
+              ${isUser
+                ? 'hover:bg-white/20 text-white'
+                : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
+              }
+            `}
+            title="Copy code"
+          />
+          <pre className={`
+            p-3 rounded text-xs font-mono overflow-x-auto
+            ${isUser
+              ? 'bg-white/10 text-white'
+              : 'bg-muted text-foreground'
+            }
+          `}>
+            <code>{codeContent}</code>
+          </pre>
+        </div>
+      );
+    }
+  },
+
+  // Inline code
+  code: ({ children, className }) => {
+    // If it's inside a pre tag, let pre handle it
+    if (className?.includes('language-')) {
+      return <code className={className}>{children}</code>;
+    }
+
+    // Extract text content safely
+    const codeContent = extractTextFromChildren(children);
+
+    // Inline code styling
+    return (
+      <code className="px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-foreground break-all">
+        {codeContent}
+      </code>
+    );
+  },
+
+  // Blockquotes
+  blockquote: ({ children }) => (
+    <blockquote className={`${textSize} border-l-2 border-border pl-3 my-2 italic text-muted-foreground break-words`}>
+      {children}
+    </blockquote>
+  ),
+
+  // Tables - compact for chat
+  table: ({ children }) => (
+    <div className="overflow-x-auto my-3">
+      <table className={`min-w-full ${textSize} border-collapse`}>
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children }) => (
+    <thead className="bg-muted/50">
+      {children}
+    </thead>
+  ),
+  tbody: ({ children }) => (
+    <tbody>{children}</tbody>
+  ),
+  tr: ({ children }) => (
+    <tr className="border-b border-border/50">{children}</tr>
+  ),
+  th: ({ children }) => (
+    <th className="px-2 py-1 text-left font-medium break-words">{children}</th>
+  ),
+  td: ({ children }) => (
+    <td className="px-2 py-1 break-words">{children}</td>
+  ),
+
+  // Horizontal rule
+  hr: () => (
+    <hr className="my-3 border-0 h-px bg-border" />
+  ),
+
+  // Strong and emphasis
+  strong: ({ children }) => (
+    <strong className="font-semibold">{children}</strong>
+  ),
+  em: ({ children }) => (
+    <em className="italic">{children}</em>
+  ),
+};};
+
+/**
+ * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
+ *
+ * Features:
+ * - GitHub Flavored Markdown (GFM) support
+ * - Syntax highlighted code blocks with copy button
+ * - Mermaid diagram rendering
+ * - Tables, lists, blockquotes
+ * - User/assistant styling modes
+ *
+ * @example
+ * ```tsx
+ * <MarkdownMessage content="# Hello\n\nThis is **bold** text." />
+ *
+ * // User message styling
+ * <MarkdownMessage content="Some content" isUser />
+ * ```
+ */
+export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
+  content,
+  className = "",
+  isUser = false,
+  isCompact = false,
+}) => {
+  const components = React.useMemo(() => createMarkdownComponents(isUser, isCompact), [isUser, isCompact]);
+
+  const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
+  const proseClass = isCompact ? 'prose-xs' : 'prose-sm';
+
+  return (
+    <div
+      className={`
+        prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
+        ${isUser ? 'prose-invert' : 'dark:prose-invert'}
+        ${className}
+      `}
+      style={{
+        // Inherit colors from parent - fixes issues with external CSS variables
+        '--tw-prose-body': 'inherit',
+        '--tw-prose-headings': 'inherit',
+        '--tw-prose-bold': 'inherit',
+        '--tw-prose-links': 'inherit',
+        color: 'inherit',
+      } as React.CSSProperties}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={components}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default MarkdownMessage;

package/src/components/markdown/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Markdown Components
+ */
+
+export { MarkdownMessage, type MarkdownMessageProps } from './MarkdownMessage';

package/src/index.ts

@@ -0,0 +1,26 @@
+/**
+ * @djangocfg/ui-tools
+ *
+ * Heavy React tools with lazy loading (React.lazy + Suspense)
+ * Works in any React environment: Next.js, Vite, Wails, CRA
+ *
+ * Bundle sizes:
+ * - Mermaid: ~800KB (diagram rendering)
+ * - PrettyCode: ~500KB (code syntax highlighting)
+ * - JsonTree: ~100KB (JSON visualization)
+ * - LottiePlayer: ~200KB (Lottie animation player)
+ * - JsonForm: ~300KB (JSON Schema form generator)
+ * - OpenapiViewer: ~400KB (OpenAPI schema viewer & playground)
+ * - VideoPlayer: ~150KB (Professional video player with Vidstack)
+ * - AudioPlayer: ~200KB (Audio player with WaveSurfer.js)
+ * - ImageViewer: ~50KB (Image viewer with zoom/pan/rotate)
+ */
+
+// Re-export everything from tools
+export * from './tools';
+
+// Re-export components (markdown, etc.)
+export * from './components/markdown';
+
+// Re-export stores
+export * from './stores/mediaCache';

package/src/stores/index.ts

@@ -0,0 +1,9 @@
+export {
+  useMediaCacheStore,
+  useImageCache,
+  useAudioCache,
+  useVideoCache,
+  useVideoPlayerSettings,
+  useBlobUrlCleanup,
+  generateContentKey,
+} from './mediaCache';