@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/components/CommandPalette.tsx

@@ -1,7 +1,7 @@
-'use client';
+'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Command } from 'cmdk';
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Command } from 'cmdk'
 import {
   Search,
   FileText,
@@ -16,58 +16,60 @@ import {
   Upload,
   BarChart3,
   Clock,
-} from 'lucide-react';
-import { cmsApi } from '../lib/api.js';
+} from 'lucide-react'
+import { cmsApi } from '../lib/api.js'
 
 interface SearchResultDocument {
-  id: string;
-  title: string | null;
-  slug: string | null;
-  collection: string;
-  status: string;
-  updatedAt: string;
+  id: string
+  title: string | null
+  slug: string | null
+  collection: string
+  status: string
+  updatedAt: string
 }
 
 interface SearchResultMedia {
-  id: string;
-  filename: string;
-  altText: string | null;
-  mimeType: string;
-  storageKey: string;
+  id: string
+  filename: string
+  altText: string | null
+  mimeType: string
+  storageKey: string
 }
 
 interface SearchResultUser {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
+  id: string
+  name: string
+  email: string
+  role: string
 }
 
 interface RecentItem {
-  id: string;
-  label: string;
-  path: string;
-  type: 'document' | 'media' | 'user' | 'action';
+  id: string
+  label: string
+  path: string
+  type: 'document' | 'media' | 'user' | 'action'
 }
 
-const RECENT_ITEMS_KEY = 'actuate-recent-items';
-const MAX_RECENT_ITEMS = 5;
+const RECENT_ITEMS_KEY = 'actuate-recent-items'
+const MAX_RECENT_ITEMS = 5
 
 function loadRecentItems(): RecentItem[] {
   try {
-    const raw = localStorage.getItem(RECENT_ITEMS_KEY);
-    return raw ? JSON.parse(raw) : [];
+    const raw = localStorage.getItem(RECENT_ITEMS_KEY)
+    return raw ? JSON.parse(raw) : []
   } catch {
-    return [];
+    return []
   }
 }
 
 function saveRecentItem(item: RecentItem): void {
   try {
-    const items = loadRecentItems().filter((i) => i.id !== item.id);
-    items.unshift(item);
-    localStorage.setItem(RECENT_ITEMS_KEY, JSON.stringify(items.slice(0, MAX_RECENT_ITEMS)));
-  } catch { /* localStorage unavailable */ }
+    const items = loadRecentItems().filter((i) => i.id !== item.id)
+    items.unshift(item)
+    localStorage.setItem(RECENT_ITEMS_KEY, JSON.stringify(items.slice(0, MAX_RECENT_ITEMS)))
+  } catch {
+    /* localStorage unavailable */
+  }
 }
 
 const staticActions = [
@@ -76,7 +78,7 @@ const staticActions = [
   { id: 'action-upload-media', label: 'Upload media', icon: Upload, action: '/media?upload=true' },
   { id: 'action-view-seo', label: 'View SEO', icon: BarChart3, action: '/seo' },
   { id: 'action-open-settings', label: 'Open settings', icon: Settings, action: '/settings' },
-];
+]
 
 const navigationCommands = [
   { id: 'nav-dashboard', label: 'Dashboard', icon: LayoutDashboard, action: '/' },
@@ -87,98 +89,102 @@ const navigationCommands = [
   { id: 'nav-redirects', label: 'Redirects', icon: ArrowRightLeft, action: '/redirects' },
   { id: 'nav-users', label: 'Users', icon: Users, action: '/users' },
   { id: 'nav-settings', label: 'Settings', icon: Settings, action: '/settings' },
-];
+]
 
 export interface CommandPaletteProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onNavigate: (path: string) => void;
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onNavigate: (path: string) => void
 }
 
 export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPaletteProps) {
-  const [search, setSearch] = useState('');
-  const [documents, setDocuments] = useState<SearchResultDocument[]>([]);
-  const [media, setMedia] = useState<SearchResultMedia[]>([]);
-  const [users, setUsers] = useState<SearchResultUser[]>([]);
-  const [recentItems, setRecentItems] = useState<RecentItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const [search, setSearch] = useState('')
+  const [documents, setDocuments] = useState<SearchResultDocument[]>([])
+  const [media, setMedia] = useState<SearchResultMedia[]>([])
+  const [users, setUsers] = useState<SearchResultUser[]>([])
+  const [recentItems, setRecentItems] = useState<RecentItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined)
 
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        onOpenChange(!open);
+        e.preventDefault()
+        onOpenChange(!open)
       }
-    };
-    document.addEventListener('keydown', down);
-    return () => document.removeEventListener('keydown', down);
-  }, [open, onOpenChange]);
+    }
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [open, onOpenChange])
 
   useEffect(() => {
     if (open) {
-      setRecentItems(loadRecentItems());
+      setRecentItems(loadRecentItems())
     }
-  }, [open]);
+  }, [open])
 
   const fetchResults = useCallback(async (query: string) => {
     if (!query.trim()) {
-      setDocuments([]);
-      setMedia([]);
-      setUsers([]);
-      return;
+      setDocuments([])
+      setMedia([])
+      setUsers([])
+      return
     }
-    setLoading(true);
+    setLoading(true)
     try {
-      const res = await cmsApi<{ documents: SearchResultDocument[]; media: SearchResultMedia[]; users: SearchResultUser[] }>(
-        `/search/global?q=${encodeURIComponent(query)}`,
-      );
+      const res = await cmsApi<{
+        documents: SearchResultDocument[]
+        media: SearchResultMedia[]
+        users: SearchResultUser[]
+      }>(`/search/global?q=${encodeURIComponent(query)}`)
       if (res.data) {
-        setDocuments(res.data.documents ?? []);
-        setMedia(res.data.media ?? []);
-        setUsers(res.data.users ?? []);
+        setDocuments(res.data.documents ?? [])
+        setMedia(res.data.media ?? [])
+        setUsers(res.data.users ?? [])
       }
     } catch {
-      setDocuments([]);
-      setMedia([]);
-      setUsers([]);
+      setDocuments([])
+      setMedia([])
+      setUsers([])
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  }, []);
+  }, [])
 
   useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (debounceRef.current) clearTimeout(debounceRef.current)
     if (!search.trim()) {
-      setDocuments([]);
-      setMedia([]);
-      setUsers([]);
-      return;
+      setDocuments([])
+      setMedia([])
+      setUsers([])
+      return
     }
-    debounceRef.current = setTimeout(() => fetchResults(search), 250);
-    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
-  }, [search, fetchResults]);
+    debounceRef.current = setTimeout(() => fetchResults(search), 250)
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+    }
+  }, [search, fetchResults])
 
   const handleSelect = (action: string, recent?: RecentItem) => {
     if (recent) {
-      saveRecentItem(recent);
+      saveRecentItem(recent)
     }
-    onNavigate(action);
-    onOpenChange(false);
-    setSearch('');
-  };
+    onNavigate(action)
+    onOpenChange(false)
+    setSearch('')
+  }
 
-  if (!open) return null;
+  if (!open) return null
 
-  const hasQuery = search.trim().length > 0;
-  const hasResults = documents.length > 0 || media.length > 0 || users.length > 0;
+  const hasQuery = search.trim().length > 0
+  const hasResults = documents.length > 0 || media.length > 0 || users.length > 0
 
   return (
     <div
       className="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-[20vh] px-4"
       onClick={() => {
-        onOpenChange(false);
-        setSearch('');
+        onOpenChange(false)
+        setSearch('')
       }}
       role="presentation"
     >
@@ -192,8 +198,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
           className="bg-white rounded-lg shadow-2xl w-full overflow-hidden"
           onKeyDown={(e) => {
             if (e.key === 'Escape') {
-              onOpenChange(false);
-              setSearch('');
+              onOpenChange(false)
+              setSearch('')
             }
           }}
           shouldFilter={!hasQuery}
@@ -257,7 +263,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                     <FileText className="w-4 h-4 text-gray-500" />
                     <div className="flex flex-col min-w-0">
                       <span className="truncate">{doc.title ?? doc.slug ?? doc.id}</span>
-                      <span className="text-xs text-gray-400">{doc.collection} &middot; {doc.status}</span>
+                      <span className="text-xs text-gray-400">
+                        {doc.collection} &middot; {doc.status}
+                      </span>
                     </div>
                   </Command.Item>
                 ))}
@@ -311,7 +319,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                     <Users className="w-4 h-4 text-gray-500" />
                     <div className="flex flex-col min-w-0">
                       <span className="truncate">{u.name}</span>
-                      <span className="text-xs text-gray-400">{u.email} &middot; {u.role}</span>
+                      <span className="text-xs text-gray-400">
+                        {u.email} &middot; {u.role}
+                      </span>
                     </div>
                   </Command.Item>
                 ))}
@@ -322,7 +332,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
               <Command.Group heading="Navigation" className="px-2 py-2">
                 <div className="text-xs font-medium text-gray-500 mb-2">NAVIGATION</div>
                 {navigationCommands.map((cmd) => {
-                  const Icon = cmd.icon;
+                  const Icon = cmd.icon
                   return (
                     <Command.Item
                       key={cmd.id}
@@ -333,7 +343,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                       <Icon className="w-4 h-4 text-gray-500" />
                       <span>{cmd.label}</span>
                     </Command.Item>
-                  );
+                  )
                 })}
               </Command.Group>
             )}
@@ -341,7 +351,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             <Command.Group heading="Actions" className="px-2 py-2 mt-2">
               <div className="text-xs font-medium text-gray-500 mb-2">ACTIONS</div>
               {staticActions.map((cmd) => {
-                const Icon = cmd.icon;
+                const Icon = cmd.icon
                 return (
                   <Command.Item
                     key={cmd.id}
@@ -359,7 +369,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                     <Icon className="w-4 h-4 text-gray-500" />
                     <span>{cmd.label}</span>
                   </Command.Item>
-                );
+                )
               })}
             </Command.Group>
           </Command.List>
@@ -367,12 +377,18 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
           <div className="border-t border-gray-200 px-4 py-3 bg-gray-50 flex items-center justify-between text-xs text-gray-500">
             <div className="flex items-center gap-4">
               <span className="flex items-center gap-1">
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">↑</kbd>
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">↓</kbd>
+                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                  ↑
+                </kbd>
+                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                  ↓
+                </kbd>
                 to navigate
               </span>
               <span className="flex items-center gap-1">
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">↵</kbd>
+                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                  ↵
+                </kbd>
                 to select
               </span>
             </div>
@@ -380,5 +396,5 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
         </Command>
       </div>
     </div>
-  );
+  )
 }

package/src/components/ContentOverviewChart.tsx

@@ -1,29 +1,29 @@
-'use client';
+'use client'
 
-import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'
 
 interface ContentOverviewChartProps {
-  published: number;
-  drafts: number;
-  scheduled: number;
+  published: number
+  drafts: number
+  scheduled: number
 }
 
-const COLORS = ['#22c55e', '#f59e0b', '#a855f7'];
+const COLORS = ['#22c55e', '#f59e0b', '#a855f7']
 
 export function ContentOverviewChart({ published, drafts, scheduled }: ContentOverviewChartProps) {
-  const total = published + drafts + scheduled;
+  const total = published + drafts + scheduled
   const data = [
     { name: 'Published', value: published },
     { name: 'Drafts', value: drafts },
     { name: 'Scheduled', value: scheduled },
-  ];
+  ]
 
   if (total === 0) {
     return (
       <div className="flex items-center justify-center h-full text-sm text-gray-400">
         No content yet
       </div>
-    );
+    )
   }
 
   return (
@@ -50,21 +50,26 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
       </div>
       <div className="space-y-3">
         {data.map((entry, idx) => {
-          const pct = total > 0 ? Math.round((entry.value / total) * 100) : 0;
+          const pct = total > 0 ? Math.round((entry.value / total) * 100) : 0
           return (
             <div key={entry.name} className="flex items-center gap-3">
-              <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: COLORS[idx] }} />
+              <span
+                className="w-2.5 h-2.5 rounded-full shrink-0"
+                style={{ backgroundColor: COLORS[idx] }}
+              />
               <div className="min-w-0">
                 <span className="text-sm text-gray-700">{entry.name}</span>
                 <div className="flex items-baseline gap-2">
-                  <span className="text-lg font-semibold text-gray-900">{entry.value.toLocaleString()}</span>
+                  <span className="text-lg font-semibold text-gray-900">
+                    {entry.value.toLocaleString()}
+                  </span>
                   <span className="text-xs text-gray-400">{pct}%</span>
                 </div>
               </div>
             </div>
-          );
+          )
         })}
       </div>
     </div>
-  );
+  )
 }

package/src/components/ErrorBoundary.tsx

@@ -1,34 +1,34 @@
-'use client';
+'use client'
 
-import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { Component, type ReactNode, type ErrorInfo } from 'react'
 
 interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
+  children: ReactNode
+  fallback?: ReactNode
 }
 
 interface State {
-  hasError: boolean;
-  error: Error | null;
+  hasError: boolean
+  error: Error | null
 }
 
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
+    super(props)
+    this.state = { hasError: false, error: null }
   }
 
   static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
+    return { hasError: true, error }
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error('[Actuate CMS] Unhandled error:', error, info.componentStack);
+    console.error('[Actuate CMS] Unhandled error:', error, info.componentStack)
   }
 
   render() {
     if (this.state.hasError) {
-      if (this.props.fallback) return this.props.fallback;
+      if (this.props.fallback) return this.props.fallback
       return (
         <div className="flex min-h-[200px] items-center justify-center p-6">
           <div className="text-center">
@@ -44,9 +44,9 @@ export class ErrorBoundary extends Component<Props, State> {
             </button>
           </div>
         </div>
-      );
+      )
     }
 
-    return this.props.children;
+    return this.props.children
   }
 }

package/src/components/FocalPointPicker.tsx

@@ -1,26 +1,29 @@
-'use client';
+'use client'
 
-import { useState, useCallback, useRef } from 'react';
-import { Crosshair } from 'lucide-react';
+import { useState, useCallback, useRef } from 'react'
+import { Crosshair } from 'lucide-react'
 
 interface FocalPointPickerProps {
-  imageUrl: string;
-  focalX: number;
-  focalY: number;
-  onChange: (x: number, y: number) => void;
+  imageUrl: string
+  focalX: number
+  focalY: number
+  onChange: (x: number, y: number) => void
 }
 
 export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPointPickerProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [dragging, setDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [dragging, setDragging] = useState(false)
 
-  const handlePosition = useCallback((e: React.MouseEvent) => {
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-    onChange(Math.round(x * 100) / 100, Math.round(y * 100) / 100);
-  }, [onChange]);
+  const handlePosition = useCallback(
+    (e: React.MouseEvent) => {
+      const rect = containerRef.current?.getBoundingClientRect()
+      if (!rect) return
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
+      onChange(Math.round(x * 100) / 100, Math.round(y * 100) / 100)
+    },
+    [onChange],
+  )
 
   return (
     <div className="space-y-2">
@@ -36,9 +39,16 @@ export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPo
         onMouseDown={() => setDragging(true)}
         onMouseUp={() => setDragging(false)}
         onMouseLeave={() => setDragging(false)}
-        onMouseMove={(e) => { if (dragging) handlePosition(e); }}
+        onMouseMove={(e) => {
+          if (dragging) handlePosition(e)
+        }}
       >
-        <img src={imageUrl} alt="Focal point preview" className="w-full h-full object-contain" draggable={false} />
+        <img
+          src={imageUrl}
+          alt="Focal point preview"
+          className="w-full h-full object-contain"
+          draggable={false}
+        />
         <div
           className="absolute w-6 h-6 -ml-3 -mt-3 rounded-full border-2 border-white shadow-lg bg-blue-500/50 pointer-events-none"
           style={{ left: `${focalX * 100}%`, top: `${focalY * 100}%` }}
@@ -47,8 +57,9 @@ export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPo
         </div>
       </div>
       <p className="text-xs text-[var(--muted-foreground)]">
-        Click or drag to set the focal point ({Math.round(focalX * 100)}%, {Math.round(focalY * 100)}%)
+        Click or drag to set the focal point ({Math.round(focalX * 100)}%,{' '}
+        {Math.round(focalY * 100)}%)
       </p>
     </div>
-  );
+  )
 }