@djangocfg/layouts 1.2.33 → 1.2.35

package/src/layouts/AppLayout/layouts/AdminLayout/hooks/useApp.ts

@@ -8,6 +8,7 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { authLogger } from '../../../../../utils/logger';
+import { consola } from 'consola';
 
 export interface UseCfgAppReturn {
   /**
@@ -86,6 +87,9 @@ export interface UseCfgAppOptions {
  * );
  * ```
  */
+// Global flag to track if iframe-ready was sent (persists across component remounts)
+let iframeReadySent = false;
+
 export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
   const router = useRouter();
   const [isMounted, setIsMounted] = useState(false);
@@ -138,11 +142,11 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
       switch (type) {
         case 'parent-auth':
-          console.log('[useCfgApp] parent-auth message received, authTokenProcessed:', authTokenProcessed);
+          consola.info('[useCfgApp] parent-auth message received', { authTokenProcessed });
 
           // Prevent processing if already handled
           if (authTokenProcessed) {
-            console.log('[useCfgApp] Auth tokens already processed, ignoring duplicate message');
+            consola.warn('[useCfgApp] Auth tokens already processed, ignoring duplicate message');
             return;
           }
 
@@ -155,21 +159,24 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
           authTokenTimeout = setTimeout(() => {
             // Double-check still not processed (race condition protection)
             if (authTokenProcessed) {
-              console.log('[useCfgApp] Auth tokens already processed during debounce, skipping');
+              consola.warn('[useCfgApp] Auth tokens already processed during debounce, skipping');
               return;
             }
 
             // Receive authentication tokens from parent
             if (data?.authToken && callbackRef.current) {
-              console.log('[useCfgApp] Auth tokens found, calling onAuthTokenReceived callback');
-              console.log('[useCfgApp] authToken:', data.authToken.substring(0, 20) + '...', 'refreshToken:', data.refreshToken ? data.refreshToken.substring(0, 20) + '...' : 'null');
+              consola.success('[useCfgApp] Auth tokens found, calling onAuthTokenReceived callback');
+              consola.debug('[useCfgApp] Tokens:', {
+                authToken: data.authToken.substring(0, 20) + '...',
+                refreshToken: data.refreshToken ? data.refreshToken.substring(0, 20) + '...' : 'null'
+              });
 
               // Mark as processed BEFORE calling callback
               authTokenProcessed = true;
 
               try {
                 callbackRef.current(data.authToken, data.refreshToken);
-                console.log('[useCfgApp] onAuthTokenReceived callback completed successfully');
+                consola.success('[useCfgApp] onAuthTokenReceived callback completed successfully');
               } catch (e) {
                 authLogger.error('Failed to process auth tokens:', e);
                 // Reset on error to allow retry
@@ -205,10 +212,10 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
     window.addEventListener('message', handleMessage);
     // console.log('[useCfgApp] Message listener registered, isEmbedded:', inIframe);
 
-    // Send iframe-ready since listener is registered
-    if (inIframe) {
+    // Send iframe-ready ONLY ONCE (even if component remounts)
+    if (inIframe && !iframeReadySent) {
       try {
-        // console.log('[useCfgApp] Sending iframe-ready message to parent');
+        consola.start('[useCfgApp] Sending iframe-ready message to parent (FIRST TIME)');
         window.parent.postMessage({
           type: 'iframe-ready',
           data: {
@@ -216,12 +223,13 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
             referrer: document.referrer
           }
         }, '*');
-        // authLogger.debug('iframe-ready message sent');
+        iframeReadySent = true; // Mark as sent to prevent duplicates
+        consola.success('[useCfgApp] iframe-ready message sent');
       } catch (e) {
         authLogger.error('Failed to notify parent about ready state:', e);
       }
-    } else {
-      // console.log('[useCfgApp] Not in iframe, skipping iframe-ready message');
+    } else if (inIframe && iframeReadySent) {
+      consola.info('[useCfgApp] iframe-ready already sent, skipping to prevent loop');
     }
 
     return () => {

package/src/layouts/AppLayout/layouts/AdminLayout/index.ts

@@ -13,6 +13,10 @@ export type { AdminLayoutProps } from './AdminLayout';
 export { useCfgApp, useApp } from './hooks';
 export type { UseCfgAppReturn, UseCfgAppOptions, UseAppReturn, UseAppOptions } from './hooks';
 
+// Context
+export { CfgAppProvider, useCfgAppContext } from './context';
+export type { CfgAppProviderProps } from './context';
+
 // Components
 export { ParentSync, AuthStatusSync } from './components';
 

package/src/layouts/AppLayout/layouts/AdminLayout/lottie/energizing.json

@@ -0,0 +1 @@
+{"nm":"Rander","ddd":0,"h":512,"w":512,"meta":{"g":"LottieFiles AE 2.0.4"},"layers":[{"ty":4,"nm":"Capa 2","sr":1,"st":0,"op":46,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.002,256,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.956,"y":0},"i":{"x":0.237,"y":1},"s":[120,120,100],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.395,"y":1},"s":[60,60,100],"t":40},{"s":[120,120,100],"t":46}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.002,256,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[1.638,-9.168],[0,0],[0,0],[-8.437,0],[0,0],[-5.944,5.985],[0,0]],"o":[[0,0],[0,0],[-5.944,5.985],[0,0],[-8.437,0],[0,0],[6.562,-6.613]],"v":[[75.715,-65.189],[73.984,-55.526],[-40.87,60.214],[-34.133,76.388],[-66.367,76.388],[-73.104,60.214],[59.634,-73.544]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.8196,0.3569],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[226.809,194.352],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 2","ix":2,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[1.061,-5.831],[0,0],[0,0],[-1.679,9.179],[0,0],[5.924,0],[0,0]],"o":[[0,0],[0,0],[-6.562,6.624],[0,0],[1.061,-5.831],[0,0],[5.934,0]],"v":[[25.334,-50.448],[8.686,40.722],[-9.249,58.802],[-25.32,50.416],[-6.9,-50.448],[-16.244,-61.646],[15.99,-61.646]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.8196,0.3569],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[233.82,332.386],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tr","a":{"a":0,"k":[233.82,332.386],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[233.82,332.386],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 2","ix":2,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[6.558,-6.608],[0,0],[-8.439,0],[0,0],[1.064,-5.829],[0,0],[-6.57,6.624],[0,0],[8.2,0.413],[0,0],[-1.005,5.629],[0,0]],"o":[[0,0],[-5.945,5.99],[0,0],[5.925,0],[0,0],[-1.676,9.178],[0,0],[5.782,-5.829],[0,0],[-5.71,-0.288],[0,0],[1.639,-9.166]],"v":[[30.44,-135.194],[-102.297,-1.434],[-95.559,14.745],[-38.427,14.745],[-29.089,25.943],[-47.507,126.802],[-31.43,135.192],[102.301,0.367],[96.039,-15.798],[38.063,-18.72],[29.196,-29.87],[46.521,-126.837]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9961,0.8941,0.3529],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[256.002,256],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Shape Layer 1","sr":1,"st":-41,"op":46,"ip":-39,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[6,22,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0,0,100],"t":13},{"s":[800,800,100],"t":30}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[252.5,252.5,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":13},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"s":[0],"t":30}],"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[30,30],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":13},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[3],"t":23},{"s":[0],"t":30}],"ix":5},"c":{"a":0,"k":[1,0.9647,0],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[6,22],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2}],"v":"4.8.0","fr":30,"op":46,"ip":0,"assets":[]}

package/src/layouts/PaymentsLayout/views/payments/components/PaymentsList.tsx

@@ -26,21 +26,26 @@ import {
   SelectTrigger,
   SelectValue,
   Skeleton,
+  useDRFPagination,
+  StaticPagination,
 } from '@djangocfg/ui';
-import { Plus, Search, Filter, ChevronLeft, ChevronRight, RefreshCw, ExternalLink } from 'lucide-react';
-import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
+import { Plus, Search, Filter, RefreshCw, ExternalLink } from 'lucide-react';
+import { api, Hooks } from '@djangocfg/api';
 import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
 
 export const PaymentsList: React.FC = () => {
+  // Local pagination state
+  const pagination = useDRFPagination(1, 20);
+
+  // Fetch payments with pagination
   const {
-    payments,
-    isLoadingPayments,
-    refreshPayments,
-  } = usePaymentsContext();
+    data: payments,
+    error,
+    isLoading: isLoadingPayments,
+    mutate: refreshPayments,
+  } = Hooks.usePaymentsPaymentsList(pagination.params, api as any);
 
   const paymentsList = payments?.results || [];
-  const currentPage = payments?.page || 1;
-  const pageSize = payments?.page_size || 20;
   const totalCount = payments?.count || 0;
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -88,22 +93,16 @@ export const PaymentsList: React.FC = () => {
     }
   };
 
-  const handleSearch = async (value: string) => {
+  const handleSearch = (value: string) => {
     setSearchTerm(value);
-    // TODO: Implement search/filter in PaymentsContext when API supports it
-    await refreshPayments();
+    // Client-side filtering only
   };
 
-  const handleStatusFilter = async (status: string) => {
+  const handleStatusFilter = (status: string) => {
     setStatusFilter(status);
-    // TODO: Implement status filter in PaymentsContext when API supports it
-    await refreshPayments();
+    // Client-side filtering only
   };
 
-  const handlePageChange = async (page: number) => {
-    // TODO: Implement pagination in PaymentsContext
-    await refreshPayments();
-  };
 
   // Filter payments client-side for now (until API supports filtering)
   const filteredPayments = paymentsList.filter((payment) => {
@@ -120,17 +119,13 @@ export const PaymentsList: React.FC = () => {
     return matchesSearch && matchesStatus;
   });
 
-  const totalPages = Math.ceil((totalCount || 0) / (pageSize || 20));
-  const showingFrom = ((currentPage || 1) - 1) * (pageSize || 20) + 1;
-  const showingTo = Math.min((currentPage || 1) * (pageSize || 20), totalCount || 0);
-
   return (
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span>Payment History</span>
           <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={refreshPayments} disabled={isLoadingPayments}>
+            <Button variant="outline" size="sm" onClick={() => refreshPayments()} disabled={isLoadingPayments}>
               <RefreshCw className={`h-4 w-4 mr-2 ${isLoadingPayments ? 'animate-spin' : ''}`} />
               Refresh
             </Button>
@@ -267,38 +262,12 @@ export const PaymentsList: React.FC = () => {
               </Table>
             </div>
 
-            {/* Pagination */}
-            {totalPages > 1 && (
-              <div className="flex items-center justify-between">
-                <div className="text-sm text-muted-foreground">
-                  Showing {showingFrom} to {showingTo} of {totalCount} payments
-                </div>
-
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handlePageChange((currentPage || 1) - 1)}
-                    disabled={!currentPage || currentPage <= 1}
-                  >
-                    <ChevronLeft className="h-4 w-4" />
-                  </Button>
-
-                  <span className="text-sm">
-                    Page {currentPage || 1} of {totalPages}
-                  </span>
-
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handlePageChange((currentPage || 1) + 1)}
-                    disabled={!currentPage || currentPage >= totalPages}
-                  >
-                    <ChevronRight className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            )}
+            {/* DRF Pagination */}
+            <StaticPagination
+              data={payments}
+              onPageChange={pagination.setPage}
+              className="mt-4"
+            />
           </>
         )}
       </CardContent>

package/src/layouts/UILayout/config/components/tools.config.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
+import { JsonTree, PrettyCode, Mermaid, LottiePlayer } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
 // Sample data for demos
@@ -201,4 +201,34 @@ export const TOOLS_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'LottiePlayer',
+    category: 'tools',
+    description: 'Lottie animation player with size presets and playback controls',
+    importPath: `import { LottiePlayer } from '@djangocfg/ui';`,
+    example: `<LottiePlayer
+  src="https://lottie.host/embed/a0eb3923-2f93-4a2e-9c91-3e0b0f6f3b3e/WHJEbMDJLn.json"
+  size="md"
+  autoplay
+  loop
+/>
+
+// Custom size and speed
+<LottiePlayer
+  src={animationData}
+  width={300}
+  height={300}
+  speed={1.5}
+/>`,
+    preview: (
+      <div className="flex items-center justify-center p-8">
+        <LottiePlayer
+          src="https://lottie.host/embed/a0eb3923-2f93-4a2e-9c91-3e0b0f6f3b3e/WHJEbMDJLn.json"
+          size="md"
+          autoplay
+          loop
+        />
+      </div>
+    ),
+  },
 ];

package/src/validation/README.md

@@ -8,7 +8,8 @@ Automatic Zod validation error tracking with toast notifications and copy-to-cli
 
 ✅ **Auto-capture validation errors** from API client via CustomEvent
 ✅ **Toast notifications** with destructive styling
-✅ **Copy button** - One-click copy full error details to clipboard
+✅ **Copy Error button** - One-click copy full error details JSON to clipboard
+✅ **Copy cURL button** - Generate and copy cURL command with auth token
 ✅ **Error history** - Store and manage validation errors
 ✅ **Configurable** - Customize display and behavior
 ✅ **Type-safe** - Full TypeScript support
@@ -69,7 +70,9 @@ window.dispatchEvent(new CustomEvent('zod-validation-error', {
 You'll see a toast with:
 - **Title**: "❌ Validation Error in operation_name"
 - **Description**: Endpoint, error count, first 3 errors
-- **Copy Button**: "📋 Copy" - Copies full error JSON to clipboard
+- **Two Buttons** (displayed at bottom):
+  - **📋 Copy Error** - Copies full error JSON to clipboard
+  - **🔄 Copy cURL** - Generates and copies cURL command with auth token
 
 ---
 
@@ -490,8 +493,91 @@ validation/
 
 ---
 
+## Copy as cURL Feature
+
+### What Gets Copied
+
+When you click **🔄 Copy cURL**, a ready-to-use cURL command is generated:
+
+```bash
+curl 'http://localhost:8000/api/proxies/proxies/?page=1&page_size=100' \
+  -H 'Accept: */*' \
+  -H 'Content-Type: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
+```
+
+The generator automatically:
+- ✅ Adds your auth token from localStorage
+- ✅ Formats headers properly
+- ✅ Uses correct HTTP method
+- ✅ Escapes special characters
+
+### Token Auto-Detection
+
+The cURL generator looks for your token in localStorage:
+- `access_token` (default)
+- `token`
+- `auth_token`
+
+### Manual cURL Generation
+
+You can also generate cURL commands programmatically:
+
+```typescript
+import { generateCurl, copyCurlToClipboard } from '@djangocfg/layouts/validation';
+
+// Generate cURL
+const curl = generateCurl({
+  method: 'POST',
+  path: '/api/users/',
+  token: 'your-token',
+  body: { name: 'John' },
+  headers: { 'X-Custom': 'value' },
+});
+
+// Copy to clipboard
+await copyCurlToClipboard(curl);
+```
+
+### API Reference - cURL
+
+#### `generateCurl(options: CurlOptions): string`
+
+**Options:**
+```typescript
+interface CurlOptions {
+  method: string;              // HTTP method
+  path: string;                // API path
+  token?: string;              // Auth token (auto-fetched if omitted)
+  body?: any;                  // Request body
+  headers?: Record<string, string>;  // Custom headers
+  baseUrl?: string;            // API base URL (from env by default)
+}
+```
+
+#### `generateCurlFromError(detail): string`
+
+Generate cURL from validation error details. Auto-fetches token from localStorage.
+
+#### `getAuthToken(): string | null`
+
+Get authentication token from localStorage.
+
+#### `copyCurlToClipboard(curl: string): Promise<boolean>`
+
+Copy cURL command to clipboard. Returns `true` on success.
+
+---
+
 ## Changelog
 
+### 2025-11-11 - v2.1.0
+- ✨ Added **Copy cURL button** with automatic token injection
+- ✨ Added `curl-generator.ts` utilities
+- ✨ Added two buttons layout at bottom of toast
+- ✨ Auto-detect auth token from localStorage
+- 📝 Updated documentation with cURL examples
+
 ### 2025-11-11 - v2.0.0
 - ✨ Added copy-to-clipboard button in toast
 - ✨ Added `ValidationErrorToast` utilities

package/src/validation/REFACTORING.md

@@ -0,0 +1,162 @@
+# Validation Error System - Refactoring Summary
+
+## Changes Made
+
+### ✅ Added: Copy as cURL Feature
+
+**New Files:**
+- `curl-generator.ts` - cURL command generation
+- `ValidationErrorButtons.tsx` - Button component using `useCopy` hook
+
+**Key Improvements:**
+1. **Auto token injection** - Token automatically fetched from localStorage
+2. **useCopy integration** - Uses existing `useCopy` hook instead of custom clipboard logic
+3. **Two buttons layout** - Both buttons at bottom of toast (not on the side)
+4. **Clean separation** - Buttons in separate component, generator in separate file
+
+### 🗑️ Removed: Legacy Code
+
+**Removed Functions:**
+- `copyToClipboard()` from ValidationErrorToast.tsx (replaced by `useCopy`)
+- `copyCurlToClipboard()` from curl-generator.ts (replaced by `useCopy`)
+- `createCopyAction()` (replaced by ValidationErrorButtons)
+- `createCopyErrorAction()` (replaced by ValidationErrorButtons)
+- `createCopyCurlAction()` (replaced by ValidationErrorButtons)
+
+### ♻️ Refactored: Cleaner API
+
+**Before:**
+```typescript
+// Multiple separate functions
+createCopyAction(detail, onSuccess, onError);
+createCopyErrorAction(detail, onSuccess, onError);
+createCopyCurlAction(detail, onSuccess, onError);
+```
+
+**After:**
+```typescript
+// Single component with useCopy
+<ValidationErrorButtons detail={detail} />
+```
+
+### 📦 File Structure
+
+```
+validation/
+├── curl-generator.ts              # cURL generation logic only
+├── ValidationErrorButtons.tsx     # Button component (uses useCopy)
+├── ValidationErrorToast.tsx       # Toast utilities (no copy logic)
+├── ValidationErrorContext.tsx     # Provider & hook
+├── index.ts                       # Public exports
+└── README.md                      # Documentation
+```
+
+## Benefits
+
+1. **No code duplication** - Uses existing `useCopy` instead of custom clipboard code
+2. **Consistent UX** - All copy operations show the same toast feedback
+3. **Cleaner separation** - Each file has single responsibility
+4. **Easier to maintain** - Less code, clearer structure
+5. **Better DX** - Simple `<ValidationErrorButtons />` instead of 3 separate functions
+
+## API Changes
+
+### Removed Exports
+```typescript
+// ❌ No longer exported
+createCopyAction
+createCopyErrorAction
+createCopyCurlAction
+copyCurlToClipboard
+```
+
+### New Exports
+```typescript
+// ✅ New exports
+ValidationErrorButtons          // Component
+generateCurl                    // Generate cURL string
+generateCurlFromError          // Generate from error detail
+getAuthToken                   // Get token from localStorage
+```
+
+### Unchanged Exports
+```typescript
+// ✅ Still available
+ValidationErrorProvider
+useValidationErrors
+createValidationErrorToast
+formatErrorForClipboard
+buildToastTitle
+buildToastDescription
+```
+
+## Migration Guide
+
+If you were using the old `createCopyAction`:
+
+**Before:**
+```typescript
+const toastOptions = createValidationErrorToast(errorDetail, {
+  onCopySuccess: () => console.log('Copied'),
+  onCopyError: (e) => console.error(e),
+});
+```
+
+**After:**
+```typescript
+// Just use it - ValidationErrorButtons handles everything
+const toastOptions = createValidationErrorToast(errorDetail);
+// That's it! Toast feedback is automatic via useCopy
+```
+
+## Implementation Details
+
+### ValidationErrorButtons Component
+
+Uses `useCopy` hook from `@djangocfg/ui`:
+
+```typescript
+const { copyToClipboard } = useCopy();
+
+const handleCopyError = async (e) => {
+  const json = JSON.stringify(errorData, null, 2);
+  await copyToClipboard(json, '✅ Error details copied');
+};
+
+const handleCopyCurl = async (e) => {
+  const curl = generateCurlFromError(detail);
+  await copyToClipboard(curl, '✅ cURL command copied');
+};
+```
+
+### Auto Token Injection
+
+```typescript
+export function generateCurl(options: CurlOptions): string {
+  const { token = getAuthToken() || undefined } = options;
+  // ...
+}
+```
+
+Token is auto-fetched if not provided.
+
+## Testing
+
+1. Trigger validation error (e.g., visit `/api/proxies/proxies/`)
+2. Toast appears with two buttons at bottom
+3. Click **📋 Copy Error** → Success toast appears → JSON in clipboard
+4. Click **🔄 Copy cURL** → Success toast appears → cURL in clipboard
+5. Paste cURL in terminal → Works with your auth token!
+
+## What's Next
+
+Possible future enhancements:
+- [ ] Support POST/PUT body in cURL
+- [ ] Option to copy without token
+- [ ] Different formats (fetch, axios)
+- [ ] Copy request+response together
+
+---
+
+**Date:** 2025-11-11
+**Impact:** Breaking changes for anyone using internal copy functions (unlikely)

package/src/validation/ValidationErrorButtons.tsx

@@ -0,0 +1,80 @@
+/**
+ * ValidationErrorButtons Component
+ *
+ * Copy buttons for validation errors using useCopy hook
+ */
+
+'use client';
+
+import React from 'react';
+import { Button, useCopy } from '@djangocfg/ui';
+import { generateCurlFromError } from './curl-generator';
+import type { ValidationErrorDetail } from './ValidationErrorToast';
+
+export interface ValidationErrorButtonsProps {
+  detail: ValidationErrorDetail;
+}
+
+export function ValidationErrorButtons({ detail }: ValidationErrorButtonsProps) {
+  const { copyToClipboard } = useCopy();
+
+  const handleCopyError = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const errorData = {
+      timestamp: detail.timestamp.toISOString(),
+      operation: detail.operation,
+      endpoint: {
+        method: detail.method,
+        path: detail.path,
+      },
+      validation_errors: detail.error.issues.map((issue) => ({
+        path: issue.path.join('.') || 'root',
+        message: issue.message,
+        code: issue.code,
+        ...(('expected' in issue) && { expected: issue.expected }),
+        ...(('received' in issue) && { received: issue.received }),
+      })),
+      response: detail.response,
+      total_errors: detail.error.issues.length,
+    };
+
+    const formattedError = JSON.stringify(errorData, null, 2);
+    await copyToClipboard(formattedError, '✅ Error details copied');
+  };
+
+  const handleCopyCurl = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const curl = generateCurlFromError({
+      method: detail.method,
+      path: detail.path,
+      response: detail.response,
+    });
+
+    await copyToClipboard(curl, '✅ cURL command copied');
+  };
+
+  return (
+    <div className="flex gap-2 mt-2">
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={handleCopyError}
+        className="h-8 text-xs"
+      >
+        📋 Copy Error
+      </Button>
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={handleCopyCurl}
+        className="h-8 text-xs"
+      >
+        🔄 Copy cURL
+      </Button>
+    </div>
+  );
+}