@djangocfg/ui-nextjs 2.1.3 → 2.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,10 +58,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.3",
-    "@djangocfg/ui-core": "^1.0.4",
+    "@djangocfg/api": "^2.1.5",
+    "@djangocfg/ui-core": "^2.1.5",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
+    "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "next": "^15.5.7",
@@ -69,13 +70,9 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "7.65.0",
     "tailwindcss": "^4.1.14",
-    "zod": "^4.1.13",
-    "consola": "^3.4.2"
+    "zod": "^4.1.13"
   },
   "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "libphonenumber-js": "^1.12.24",
-    "sonner": "2.0.7",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
@@ -83,26 +80,30 @@
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
+    "@vidstack/react": "next",
     "@web3icons/react": "^4.0.26",
     "chart.js": "^4.5.0",
+    "class-variance-authority": "^0.7.1",
     "cytoscape": "^3.33.1",
     "cytoscape-cose-bilkent": "^4.1.0",
+    "libphonenumber-js": "^1.12.24",
+    "media-icons": "next",
     "mermaid": "^11.12.0",
     "next-themes": "^0.4.6",
     "prism-react-renderer": "^2.4.1",
     "react-chartjs-2": "^5.3.0",
+    "react-hotkeys-hook": "^5.2.1",
     "react-json-tree": "^0.20.0",
     "react-lottie-player": "^2.1.0",
     "react-markdown": "10.1.0",
-    "remark-gfm": "4.0.1",
     "react-sticky-box": "^2.0.5",
     "recharts": "2.15.4",
-    "@vidstack/react": "next",
-    "media-icons": "next",
+    "remark-gfm": "4.0.1",
+    "sonner": "2.0.7",
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.3",
+    "@djangocfg/typescript-config": "^2.1.5",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/components/markdown/MarkdownMessage.tsx

@@ -5,10 +5,8 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import Mermaid from '../../tools/Mermaid';
 import PrettyCode from '../../tools/PrettyCode';
-import { Button } from '@djangocfg/ui-core/components';
-import { useCopy } from '@djangocfg/ui-core/hooks';
-import { useTheme } from '../../hooks/useTheme';
-import { Copy } from 'lucide-react';
+import { CopyButton } from '@djangocfg/ui-core/components';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 import type { Components } from 'react-markdown';
 
 // Helper function to extract text content from React children
@@ -52,32 +50,24 @@ interface CodeBlockProps {
 }
 
 const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser }) => {
-  const { copyToClipboard } = useCopy();
-  const theme = useTheme();
-
-  const handleCopy = () => {
-    copyToClipboard(code, "Code copied to clipboard!");
-  };
+  const theme = useResolvedTheme();
 
   return (
     <div className="relative group my-3">
       {/* Copy button */}
-      <Button
+      <CopyButton
+        value={code}
         variant="ghost"
-        size="sm"
-        onClick={handleCopy}
         className={`
           absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
-          h-8 w-8 p-0
+          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"
-      >
-        <Copy className="h-4 w-4" />
-      </Button>
+      />
 
       {/* Code content */}
       <PrettyCode
@@ -195,24 +185,19 @@ const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean =
       console.warn('CodeBlock failed, using fallback:', error);
       return (
         <div className="relative group my-3">
-          <Button
+          <CopyButton
+            value={codeContent}
             variant="ghost"
-            size="sm"
-            onClick={() => {
-              navigator.clipboard.writeText(codeContent);
-            }}
             className={`
               absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
-              h-8 w-8 p-0
+              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"
-          >
-            <Copy className="h-4 w-4" />
-          </Button>
+          />
           <pre className={`
             p-3 rounded text-xs font-mono overflow-x-auto
             ${isUser

package/src/components/sidebar.tsx

@@ -440,7 +440,9 @@ const SidebarFooter = React.forwardRef<
 })
 SidebarFooter.displayName = "SidebarFooter"
 
-const SidebarSeparator = React.forwardRef<
+const SidebarSeparator: React.ForwardRefExoticComponent<
+  React.ComponentProps<typeof Separator> & React.RefAttributes<React.ElementRef<typeof Separator>>
+> = React.forwardRef<
   React.ElementRef<typeof Separator>,
   React.ComponentProps<typeof Separator>
 >(({ className, ...props }, ref) => {

package/src/components/ssr-pagination.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { usePathname } from 'next/navigation';
-import Link from 'next/link';
 import { cn } from '@djangocfg/ui-core/lib';
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
 import { useQueryParams } from '../hooks';
@@ -29,7 +28,6 @@ interface SSRPaginationProps {
   baseUrl?: string;
   pathname?: string;
   preserveQuery?: boolean;
-  prefetch?: boolean;
 }
 
 export const SSRPagination: React.FC<SSRPaginationProps> = ({
@@ -45,7 +43,6 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
   baseUrl,
   pathname: propPathname,
   preserveQuery = true,
-  prefetch = true,
 }) => {
   const queryParams = useQueryParams();
   const pathname = usePathname();
@@ -186,17 +183,10 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
         <PaginationContent>
           {/* Previous Button */}
           <PaginationItem>
-            {actualHasPreviousPage ? (
-              <Link href={getPageUrl(actualCurrentPage - 1)} prefetch={prefetch} passHref legacyBehavior>
-                <PaginationPrevious />
-              </Link>
-            ) : (
-              <PaginationPrevious 
-                href="#" 
-                className="pointer-events-none opacity-50"
-                onClick={(e) => e.preventDefault()}
-              />
-            )}
+            <PaginationPrevious
+              href={actualHasPreviousPage ? getPageUrl(actualCurrentPage - 1) : undefined}
+              className={!actualHasPreviousPage ? "pointer-events-none opacity-50" : undefined}
+            />
           </PaginationItem>
 
           {/* Page Numbers */}
@@ -205,28 +195,22 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
               {page === 'ellipsis' ? (
                 <PaginationEllipsis />
               ) : (
-                <Link href={getPageUrl(page)} prefetch={prefetch} passHref legacyBehavior>
-                  <PaginationLink isActive={page === actualCurrentPage}>
-                    {page}
-                  </PaginationLink>
-                </Link>
+                <PaginationLink
+                  href={getPageUrl(page)}
+                  isActive={page === actualCurrentPage}
+                >
+                  {page}
+                </PaginationLink>
               )}
             </PaginationItem>
           ))}
 
           {/* Next Button */}
           <PaginationItem>
-            {hasNextPage ? (
-              <Link href={getPageUrl(actualCurrentPage + 1)} prefetch={prefetch} passHref legacyBehavior>
-                <PaginationNext />
-              </Link>
-            ) : (
-              <PaginationNext 
-                href="#" 
-                className="pointer-events-none opacity-50"
-                onClick={(e) => e.preventDefault()}
-              />
-            )}
+            <PaginationNext
+              href={hasNextPage ? getPageUrl(actualCurrentPage + 1) : undefined}
+              className={!hasNextPage ? "pointer-events-none opacity-50" : undefined}
+            />
           </PaginationItem>
         </PaginationContent>
       </Pagination>

package/src/hooks/index.ts

@@ -11,9 +11,14 @@ export * from '@djangocfg/ui-core/hooks';
 export { useLocalStorage } from './useLocalStorage';
 export { useSessionStorage } from './useSessionStorage';
 
-// Theme hook (uses next-themes)
-export { useTheme } from './useTheme';
+// Theme hook (standalone, no provider required)
+export { useResolvedTheme } from './useResolvedTheme';
+export type { ResolvedTheme } from './useResolvedTheme';
 
 // Next.js router hooks
 export { useQueryParams } from './useQueryParams';
 export { useCfgRouter } from './useCfgRouter';
+
+// Keyboard shortcuts
+export { useHotkey, useHotkeysContext, HotkeysProvider, isHotkeyPressed } from './useHotkey';
+export type { UseHotkeyOptions, HotkeyCallback, Keys } from './useHotkey';

package/src/hooks/useHotkey.ts

@@ -0,0 +1,103 @@
+'use client';
+
+import type { RefObject } from 'react';
+import { useHotkeys, Options as HotkeysOptions } from 'react-hotkeys-hook';
+import type { HotkeyCallback, Keys } from 'react-hotkeys-hook';
+
+/**
+ * Options for the useHotkey hook
+ */
+export interface UseHotkeyOptions extends Omit<HotkeysOptions, 'enabled'> {
+  /** Whether the hotkey is enabled (default: true) */
+  enabled?: boolean;
+  /** Scope for the hotkey - useful for context-specific shortcuts */
+  scope?: string;
+  /** Only trigger when focus is within a specific element */
+  scopes?: string[];
+  /** Prevent default browser behavior */
+  preventDefault?: boolean;
+  /** Enable in input fields and textareas */
+  enableOnFormTags?: boolean | readonly ('input' | 'textarea' | 'select')[];
+  /** Enable when contentEditable element is focused */
+  enableOnContentEditable?: boolean;
+  /** Split key for multiple hotkey combinations (default: ',') */
+  splitKey?: string;
+  /** Key up/down events */
+  keyup?: boolean;
+  keydown?: boolean;
+  /** Description for the hotkey (useful for help dialogs) */
+  description?: string;
+}
+
+/**
+ * Simple wrapper hook for react-hotkeys-hook
+ *
+ * @example
+ * // Single key
+ * useHotkey('escape', () => closeModal());
+ *
+ * @example
+ * // Key combination
+ * useHotkey('ctrl+s', (e) => {
+ *   e.preventDefault();
+ *   saveDocument();
+ * });
+ *
+ * @example
+ * // Multiple keys (any of them will trigger)
+ * useHotkey(['ArrowLeft', '['], () => goToPrevious());
+ * useHotkey(['ArrowRight', ']'], () => goToNext());
+ *
+ * @example
+ * // With options
+ * useHotkey('/', () => focusSearch(), {
+ *   preventDefault: true,
+ *   enableOnFormTags: false,
+ *   description: 'Focus search input'
+ * });
+ *
+ * @example
+ * // Scoped hotkeys
+ * useHotkey('delete', () => deleteItem(), { scopes: ['list-view'] });
+ *
+ * @param keys - Hotkey or array of hotkeys (e.g., 'ctrl+s', 'ArrowLeft', ['[', 'ArrowLeft'])
+ * @param callback - Function to call when hotkey is pressed
+ * @param options - Configuration options
+ * @returns Ref to attach to element for scoped hotkeys
+ */
+export function useHotkey<T extends HTMLElement = HTMLElement>(
+  keys: Keys,
+  callback: HotkeyCallback,
+  options: UseHotkeyOptions = {}
+): RefObject<T | null> {
+  const {
+    enabled = true,
+    preventDefault = false,
+    enableOnFormTags = false,
+    enableOnContentEditable = false,
+    description: _description,
+    ...restOptions
+  } = options;
+
+  return useHotkeys<T>(
+    keys,
+    (event, handler) => {
+      if (preventDefault) {
+        event.preventDefault();
+      }
+      callback(event, handler);
+    },
+    {
+      enabled,
+      enableOnFormTags,
+      enableOnContentEditable,
+      ...restOptions,
+    }
+  );
+}
+
+// Re-export useful utilities from react-hotkeys-hook
+export { useHotkeysContext, HotkeysProvider, isHotkeyPressed } from 'react-hotkeys-hook';
+
+// Re-export types
+export type { HotkeyCallback, Keys } from 'react-hotkeys-hook';

package/src/hooks/{useTheme.ts → useResolvedTheme.ts}

@@ -2,56 +2,67 @@
 
 import { useEffect, useState } from 'react';
 
-export type Theme = 'light' | 'dark';
+export type ResolvedTheme = 'light' | 'dark';
 
 /**
- * Hook to detect and track the current theme
- * Supports both manual theme switching and system preference
+ * Hook to detect the current resolved theme (light or dark)
+ *
+ * Standalone hook - doesn't require ThemeProvider.
+ * Detects theme from:
+ * 1. 'dark' class on html element
+ * 2. System preference (prefers-color-scheme)
+ *
+ * For full theme control (setTheme, toggleTheme), use useThemeContext instead.
+ *
+ * @example
+ * ```tsx
+ * const theme = useResolvedTheme(); // 'light' | 'dark'
+ * ```
  */
-export const useTheme = (): Theme => {
-  const [theme, setTheme] = useState<Theme>('light');
-  
+export const useResolvedTheme = (): ResolvedTheme => {
+  const [theme, setTheme] = useState<ResolvedTheme>('light');
+
   useEffect(() => {
-    const checkTheme = (): Theme => {
-      // Check if dark class is applied to html element (manual theme)
+    const checkTheme = (): ResolvedTheme => {
+      // Check if dark class is applied to html element
       if (document.documentElement.classList.contains('dark')) {
         return 'dark';
       }
-      
+
       // Check system preference
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         return 'dark';
       }
-      
+
       return 'light';
     };
-    
+
     // Set initial theme
     setTheme(checkTheme());
-    
-    // Listen for manual theme changes (class changes on html element)
+
+    // Listen for class changes on html element
     const observer = new MutationObserver(() => {
       setTheme(checkTheme());
     });
-    
+
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['class']
     });
-    
+
     // Listen for system theme changes
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleMediaChange = () => {
       setTheme(checkTheme());
     };
-    
+
     mediaQuery.addEventListener('change', handleMediaChange);
-    
+
     return () => {
       observer.disconnect();
       mediaQuery.removeEventListener('change', handleMediaChange);
     };
   }, []);
-  
+
   return theme;
 };

package/src/theme/ThemeProvider.tsx

@@ -1,82 +1,76 @@
 /**
  * ThemeProvider - Universal theme management
  *
- * Provides theme context for the entire application with localStorage persistence.
+ * Re-exports next-themes ThemeProvider with sensible defaults.
+ * Supports light, dark, and system themes with localStorage persistence.
+ *
+ * @example
+ * ```tsx
+ * // In app/layout.tsx
+ * import { ThemeProvider } from '@djangocfg/ui-nextjs';
+ *
+ * <ThemeProvider
+ *   attribute="class"
+ *   defaultTheme="system"
+ *   enableSystem
+ * >
+ *   {children}
+ * </ThemeProvider>
+ * ```
  */
 
 'use client';
 
-import React, { createContext, useContext, useEffect, ReactNode } from 'react';
-import { useLocalStorage } from '../hooks/useLocalStorage';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────
-
-type Theme = 'light' | 'dark';
-
-interface ThemeContextValue {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Create Context
-// ─────────────────────────────────────────────────────────────────────────
+import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
+import type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';
 
-const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
-
-// ─────────────────────────────────────────────────────────────────────────
-// Provider Component
-// ─────────────────────────────────────────────────────────────────────────
-
-interface ThemeProviderProps {
-  children: ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-}
+// Re-export types
+export type Theme = 'light' | 'dark' | 'system';
+export type ThemeProviderProps = NextThemesProviderProps;
 
+/**
+ * ThemeProvider wraps next-themes with sensible defaults
+ */
 export function ThemeProvider({
   children,
-  defaultTheme = 'light',
-  storageKey = 'theme'
+  attribute = 'class',
+  defaultTheme = 'system',
+  enableSystem = true,
+  disableTransitionOnChange = true,
+  ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useLocalStorage<Theme>(storageKey, defaultTheme);
+  return (
+    <NextThemesProvider
+      attribute={attribute}
+      defaultTheme={defaultTheme}
+      enableSystem={enableSystem}
+      disableTransitionOnChange={disableTransitionOnChange}
+      {...props}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
 
-  useEffect(() => {
-    const root = window.document.documentElement;
-    root.classList.remove('light', 'dark');
-    root.classList.add(theme);
-  }, [theme]);
+/**
+ * Hook to access theme context
+ * Returns theme, setTheme, resolvedTheme, systemTheme, and themes
+ */
+export function useThemeContext() {
+  const { theme, setTheme, resolvedTheme, systemTheme, themes } = useNextTheme();
 
   const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    // Toggle between light and dark (ignore system)
+    const currentResolved = resolvedTheme || 'light';
+    setTheme(currentResolved === 'light' ? 'dark' : 'light');
   };
 
-  const value: ThemeContextValue = {
-    theme,
+  return {
+    theme: theme as Theme | undefined,
     setTheme,
+    resolvedTheme: resolvedTheme as 'light' | 'dark' | undefined,
+    systemTheme: systemTheme as 'light' | 'dark' | undefined,
+    themes,
     toggleTheme,
   };
-
-  return (
-    <ThemeContext.Provider value={value}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Custom Hook
-// ─────────────────────────────────────────────────────────────────────────
-
-export function useThemeContext(): ThemeContextValue {
-  const context = useContext(ThemeContext);
-
-  if (context === undefined) {
-    throw new Error('useThemeContext must be used within ThemeProvider');
-  }
-
-  return context;
 }

package/src/theme/ThemeToggle.tsx

@@ -1,8 +1,8 @@
 /**
  * ThemeToggle - Theme switcher component
  *
- * Switches between light and dark themes by toggling the 'dark' class on the html element.
- * Uses localStorage to persist the user's theme preference.
+ * Switches between light and dark themes.
+ * Must be used within ThemeProvider.
  *
  * @example
  * ```tsx
@@ -20,17 +20,21 @@ import { Button } from '@djangocfg/ui-core/components';
 import { useThemeContext } from './ThemeProvider';
 
 export function ThemeToggle() {
-  const { theme, toggleTheme } = useThemeContext();
-  const [isMounted, setIsMounted] = useState(false);
+  const { resolvedTheme, toggleTheme } = useThemeContext();
+  const [mounted, setMounted] = useState(false);
 
-  // Prevent hydration mismatch by only rendering after mount
+  // Prevent hydration mismatch
   useEffect(() => {
-    setIsMounted(true);
+    setMounted(true);
   }, []);
 
-  // Don't render anything during SSR
-  if (!isMounted) {
-    return null;
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="h-9 w-9" disabled>
+        <Sun className="h-4 w-4" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    );
   }
 
   return (
@@ -39,9 +43,9 @@ export function ThemeToggle() {
       size="icon"
       onClick={toggleTheme}
       className="h-9 w-9"
-      title={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
+      title={`Switch to ${resolvedTheme === 'light' ? 'dark' : 'light'} theme`}
     >
-      {theme === 'light' ? (
+      {resolvedTheme === 'light' ? (
         <Sun className="h-4 w-4" />
       ) : (
         <Moon className="h-4 w-4" />

package/src/theme/index.ts

@@ -1,3 +1,4 @@
 export { ThemeProvider, useThemeContext } from './ThemeProvider';
+export type { Theme, ThemeProviderProps } from './ThemeProvider';
 export { ThemeToggle } from './ThemeToggle';
-export { ForceTheme } from './ForceTheme';
+export { ForceTheme } from './ForceTheme';

package/src/tools/JsonTree/index.tsx

@@ -2,9 +2,8 @@
 
 import React, { useState } from 'react';
 import { CommonExternalProps, JSONTree } from 'react-json-tree';
-import { ChevronDown, ChevronUp, Copy, Download } from 'lucide-react';
-import { Button } from '@djangocfg/ui-core/components';
-import { useCopy } from '@djangocfg/ui-core/hooks';
+import { ChevronDown, ChevronUp, Download } from 'lucide-react';
+import { Button, CopyButton } from '@djangocfg/ui-core/components';
 
 export type { Language } from 'prism-react-renderer';
 
@@ -43,12 +42,6 @@ const JsonTreeComponent = ({ title, data, config = {}, jsonTreeProps = {} }: Jso
   // State for expand/collapse all
   const [expandAll, setExpandAll] = useState<boolean | null>(null);
   const [renderKey, setRenderKey] = useState(0);
-
-  // Copy hook
-  const { copyToClipboard } = useCopy({
-    successMessage: "JSON copied to clipboard",
-    errorMessage: "Failed to copy JSON"
-  });
   
   // Default configuration
   const {
@@ -142,14 +135,11 @@ const JsonTreeComponent = ({ title, data, config = {}, jsonTreeProps = {} }: Jso
     return false;
   };
 
-  // Action handlers
-  const handleCopy = () => {
-    const jsonString = JSON.stringify(data, null, 2);
-    copyToClipboard(jsonString);
-  };
+  // JSON string for copy/download
+  const jsonString = JSON.stringify(data, null, 2);
 
+  // Action handlers
   const handleDownload = () => {
-    const jsonString = JSON.stringify(data, null, 2);
     const blob = new Blob([jsonString], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -202,15 +192,15 @@ const JsonTreeComponent = ({ title, data, config = {}, jsonTreeProps = {} }: Jso
                 {/* Action Buttons */}
                 {showActionButtons && (
                   <>
-                    <Button
+                    <CopyButton
+                      value={jsonString}
                       variant="outline"
                       size="sm"
-                      onClick={handleCopy}
                       className="h-8 px-2"
+                      iconClassName="h-3 w-3"
                     >
-                      <Copy className="h-3 w-3" />
-                      <span className="ml-1 text-xs hidden sm:inline">Copy</span>
-                    </Button>
+                      Copy
+                    </CopyButton>
                     <Button
                       variant="outline"
                       size="sm"

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

@@ -3,7 +3,7 @@
 import mermaid from 'mermaid';
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { useTheme } from '../../hooks/useTheme';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 
 interface MermaidProps {
     chart: string;
@@ -48,7 +48,7 @@ const Mermaid: React.FC<MermaidProps> = ({ chart, className = '' }) => {
     const [isFullscreen, setIsFullscreen] = useState(false);
     const [svgContent, setSvgContent] = useState<string>('');
     const [isVertical, setIsVertical] = useState(false);
-    const theme = useTheme();
+    const theme = useResolvedTheme();
 
     useEffect(() => {
         // Get CSS variables for semantic colors

package/src/tools/OpenapiViewer/components/EndpointInfo.tsx

@@ -1,15 +1,29 @@
 'use client';
 
-import React from 'react';
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@djangocfg/ui-core/components';
-import { ChevronDown, Code, Database, FileText, AlertCircle, Copy } from 'lucide-react';
+import React, { useMemo } from 'react';
+import { Badge, Card, CardContent, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, CopyButton } from '@djangocfg/ui-core/components';
+import { ChevronDown, Code, Database, FileText, AlertCircle } from 'lucide-react';
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 import { getMethodColor, getStatusColor } from '../utils';
 
 export const EndpointInfo: React.FC = () => {
-  const { state, copyToClipboard } = usePlaygroundContext();
+  const { state } = usePlaygroundContext();
   const { selectedEndpoint } = state;
 
+  // Memoize endpoint JSON for copy
+  const endpointJson = useMemo(() => {
+    if (!selectedEndpoint) return '';
+    return JSON.stringify({
+      name: selectedEndpoint.name,
+      method: selectedEndpoint.method,
+      path: selectedEndpoint.path,
+      description: selectedEndpoint.description,
+      parameters: selectedEndpoint.parameters,
+      requestBody: selectedEndpoint.requestBody,
+      responses: selectedEndpoint.responses
+    }, null, 2);
+  }, [selectedEndpoint]);
+
   if (!selectedEndpoint) {
     return null;
   }
@@ -22,28 +36,13 @@ export const EndpointInfo: React.FC = () => {
     ));
   };
 
-  const handleCopyEndpoint = () => {
-    const endpointDetails = {
-      name: selectedEndpoint.name,
-      method: selectedEndpoint.method,
-      path: selectedEndpoint.path,
-      description: selectedEndpoint.description,
-      parameters: selectedEndpoint.parameters,
-      requestBody: selectedEndpoint.requestBody,
-      responses: selectedEndpoint.responses
-    };
-    
-    copyToClipboard(JSON.stringify(endpointDetails, null, 2));
-  };
-
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h2 className="text-lg font-semibold text-foreground">Selected Endpoint</h2>
-        <Button variant="outline" size="sm" onClick={handleCopyEndpoint}>
-          <Copy className="h-4 w-4" />
+        <CopyButton value={endpointJson} variant="outline" size="sm">
           Copy
-        </Button>
+        </CopyButton>
       </div>
 
       <Card>

package/src/tools/OpenapiViewer/components/RequestBuilder.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import React, { useCallback } from 'react';
-import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, Badge, Skeleton } from '@djangocfg/ui-core/components';
-import { Play, Copy, RotateCcw, Loader2, Key, Settings, Send } from 'lucide-react';
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Textarea, CopyButton } from '@djangocfg/ui-core/components';
+import { Loader2, Key, Send } from 'lucide-react';
 import { usePlaygroundContext } from '../context/PlaygroundContext';
-import { findApiKeyById, logApiKeyUsage } from '../utils';
+import { findApiKeyById } from '../utils';
 import { isValidJson, parseRequestHeaders } from '../utils';
 import { RequestParametersForm } from './RequestParametersForm';
 import { EndpointInfo } from './EndpointInfo';
@@ -14,16 +14,8 @@ export const RequestBuilder: React.FC = () => {
   const {
     state,
     apiKeys,
-    apiKeysLoading,
-    setRequestUrl,
-    setRequestMethod,
-    setRequestHeaders,
     setRequestBody,
-    setResponse,
-    setLoading,
-    setSelectedApiKey,
     setManualApiToken,
-    copyToClipboard,
     sendRequest
   } = usePlaygroundContext();
 
@@ -143,15 +135,13 @@ export const RequestBuilder: React.FC = () => {
           <CardHeader>
             <div className="flex items-center justify-between">
               <CardTitle className="text-sm text-foreground">cURL Command</CardTitle>
-              <Button
+              <CopyButton
+                value={curlCommand}
                 variant="outline"
                 size="sm"
-                onClick={() => copyToClipboard(curlCommand)}
-                disabled={!curlCommand}
               >
-                <Copy className="h-4 w-4" />
-                <span className="hidden sm:inline">Copy cURL</span>
-              </Button>
+                Copy cURL
+              </CopyButton>
             </div>
           </CardHeader>
           <CardContent>

package/src/tools/OpenapiViewer/components/ResponseViewer.tsx

@@ -1,16 +1,35 @@
 'use client';
 
-import React from 'react';
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
-import { Copy, XCircle, Download } from 'lucide-react';
+import React, { useMemo, useCallback } from 'react';
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, CopyButton } from '@djangocfg/ui-core/components';
+import { XCircle, Download } from 'lucide-react';
 import { usePlaygroundContext } from '../context/PlaygroundContext';
 import { getStatusColor } from '../utils';
 import JsonTree from '../../JsonTree';
 
 export const ResponseViewer: React.FC = () => {
-    const { state, copyToClipboard } = usePlaygroundContext();
+    const { state } = usePlaygroundContext();
     const { response } = state;
 
+    // Memoize response text for copy/download
+    const responseText = useMemo(() => {
+        if (!response?.data) return '';
+        return typeof response.data === 'string' ? response.data : JSON.stringify(response.data, null, 2);
+    }, [response?.data]);
+
+    const handleDownloadResponse = useCallback(() => {
+        if (!responseText) return;
+        const blob = new Blob([responseText], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'response.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, [responseText]);
+
     if (!response) {
         return (
             <div className="space-y-4">
@@ -26,33 +45,14 @@ export const ResponseViewer: React.FC = () => {
         );
     }
 
-    const handleCopyResponse = () => {
-        const responseText = typeof response.data === 'string' ? response.data : JSON.stringify(response.data, null, 2);
-        copyToClipboard(responseText);
-    };
-
-    const handleDownloadResponse = () => {
-        const responseText = typeof response.data === 'string' ? response.data : JSON.stringify(response.data, null, 2);
-        const blob = new Blob([responseText], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'response.json';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    };
-
     return (
         <div className="space-y-4">
             <div className="flex items-center justify-between">
                 <h2 className="text-lg font-semibold text-foreground">Response</h2>
                 <div className="flex items-center space-x-2">
-                    <Button variant="outline" size="sm" onClick={handleCopyResponse}>
-                        <Copy className="h-4 w-4" />
-                        <span className="hidden sm:inline">Copy</span>
-                    </Button>
+                    <CopyButton value={responseText} variant="outline" size="sm">
+                        Copy
+                    </CopyButton>
                     <Button variant="outline" size="sm" onClick={handleDownloadResponse}>
                         <Download className="h-4 w-4" />
                         <span className="hidden sm:inline">Download</span>

package/src/tools/OpenapiViewer/context/PlaygroundContext.tsx

@@ -5,7 +5,6 @@ import consola from 'consola';
 import { type ApiEndpoint, type ApiResponse, type PlaygroundContextType, type PlaygroundState, type PlaygroundStep, type PlaygroundConfig } from '../types';
 import { getDefaultVersion } from '../utils/versionManager';
 import { parseRequestHeaders, substituteUrlParameters } from '../utils';
-import { useCopy } from '@djangocfg/ui-core/hooks';
 
 const createInitialState = (): PlaygroundState => ({
   // Step management
@@ -59,11 +58,6 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
   const apiKeys = React.useMemo(() => [], []);
   const isLoadingApiKeys = false;
 
-  const { copyToClipboard } = useCopy({
-    successMessage: "cURL command copied to clipboard",
-    errorMessage: "Failed to copy cURL command"
-  });
-
   const updateState = (updates: Partial<PlaygroundState>) => {
     setState((prev) => ({ ...prev, ...updates }));
   };
@@ -330,7 +324,6 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
 
     // Actions
     clearAll,
-    copyToClipboard,
     sendRequest,
   };
 

package/src/tools/OpenapiViewer/types.ts

@@ -135,7 +135,6 @@ export interface PlaygroundContextType {
   
   // Actions
   clearAll: () => void;
-  copyToClipboard: (text: string) => void;
   sendRequest: () => Promise<void>;
 }
 

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

@@ -1,10 +1,9 @@
 'use client';
 
 import { Highlight, Language, themes } from 'prism-react-renderer';
-import React, { useState } from 'react';
-import { Copy, Check } from 'lucide-react';
-import { useCopy } from '@djangocfg/ui-core/hooks';
-import { useTheme } from '../../hooks/useTheme';
+import React from 'react';
+import { CopyButton } from '@djangocfg/ui-core/components';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 
 interface PrettyCodeProps {
   data: string | object;
@@ -16,12 +15,7 @@ interface PrettyCodeProps {
 }
 
 const PrettyCode = ({ data, language, className, mode, inline = false, customBg }: PrettyCodeProps) => {
-  const detectedTheme = useTheme();
-  const [copied, setCopied] = useState(false);
-  const { copyToClipboard } = useCopy({
-    successMessage: "Code copied to clipboard",
-    errorMessage: "Failed to copy code"
-  });
+  const detectedTheme = useResolvedTheme();
 
   // Use provided mode or fall back to detected theme
   const currentTheme = mode || detectedTheme;
@@ -32,15 +26,6 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg
 
   // Convert form object to JSON string with proper formatting
   const contentJson = typeof data === 'string' ? data : JSON.stringify(data || {}, null, 2);
-
-  // Handle copy
-  const handleCopy = async () => {
-    const success = await copyToClipboard(contentJson);
-    if (success) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
   
   // Handle empty content
   if (!contentJson || contentJson.trim() === '') {
@@ -173,13 +158,13 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg
         <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>
-        <button
-          onClick={handleCopy}
-          className="inline-flex items-center justify-center p-1.5 rounded text-muted-foreground hover:text-foreground bg-background/80 border border-border/50 backdrop-blur-sm transition-colors"
+        <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="Copy code"
-        >
-          {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
-        </button>
+        />
       </div>
       
       <div className="h-full overflow-auto">

package/src/tools/VideoPlayer/VideoPlayer.tsx

@@ -194,20 +194,20 @@ export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(({
           <MediaProvider />
           
           {/* Poster with proper aspect ratio handling */}
-          {source.poster && (
+          {posterUrl && (
             <Poster
               className="vds-poster"
-              src={source.poster}
+              src={posterUrl}
               alt={source.title || 'Video poster'}
               style={{ objectFit: 'cover' }}
             />
           )}
-          
+
           {/* Use Vidstack's built-in default layout */}
           {controls && (
             <DefaultVideoLayout
               icons={defaultLayoutIcons}
-              thumbnails={source.poster}
+              thumbnails={posterUrl}
             />
           )}
         </MediaPlayer>