@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/components/SEOPerformance.tsx

@@ -1,45 +1,56 @@
-'use client';
+'use client'
 
-import { Search, AlertTriangle, FileWarning, ImageOff, LinkIcon, ChevronLeft, ChevronRight } from 'lucide-react';
-import { useState } from 'react';
-import { useApiData } from '../lib/useApiData.js';
+import {
+  Search,
+  AlertTriangle,
+  FileWarning,
+  ImageOff,
+  LinkIcon,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react'
+import { useState } from 'react'
+import { useApiData } from '../lib/useApiData.js'
 
 interface SEOSummary {
-  totalPages: number;
+  totalPages: number
   issuesSummary: {
-    missingMetaDescriptions: number;
-    brokenInternalLinks: number;
-    missingAltText: number;
-  };
-  topContent: { id: string; title: string; collection: string; score: number }[];
+    missingMetaDescriptions: number
+    brokenInternalLinks: number
+    missingAltText: number
+  }
+  topContent: { id: string; title: string; collection: string; score: number }[]
 }
 
 function ScoreBadge({ score }: { score: number }) {
-  const color = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-amber-500' : 'text-red-500';
-  const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50';
+  const color = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-amber-500' : 'text-red-500'
+  const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50'
   return (
-    <span className={`inline-flex items-center justify-center w-9 h-9 rounded-full text-sm font-semibold ${color} ${bg}`}>
+    <span
+      className={`inline-flex items-center justify-center w-9 h-9 rounded-full text-sm font-semibold ${color} ${bg}`}
+    >
       {score}
     </span>
-  );
+  )
 }
 
 export interface SEOPerformanceProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
-  const { data, loading, error } = useApiData<SEOSummary>('/seo/summary');
-  const [page, setPage] = useState(0);
-  const perPage = 5;
+  const { data, loading, error } = useApiData<SEOSummary>('/seo/summary')
+  const [page, setPage] = useState(0)
+  const perPage = 5
 
-  if (loading || error || !data) return null;
+  if (loading || error || !data) return null
 
-  const issues = data.issuesSummary;
-  const totalIssues = issues.missingMetaDescriptions + issues.brokenInternalLinks + issues.missingAltText;
-  const topContent = data.topContent ?? [];
-  const totalPages = Math.max(1, Math.ceil(topContent.length / perPage));
-  const visible = topContent.slice(page * perPage, (page + 1) * perPage);
+  const issues = data.issuesSummary
+  const totalIssues =
+    issues.missingMetaDescriptions + issues.brokenInternalLinks + issues.missingAltText
+  const topContent = data.topContent ?? []
+  const totalPages = Math.max(1, Math.ceil(topContent.length / perPage))
+  const visible = topContent.slice(page * perPage, (page + 1) * perPage)
 
   return (
     <div className="bg-white rounded-lg border border-gray-200">
@@ -49,7 +60,9 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
           <h2 className="text-sm font-semibold text-gray-900">SEO Performance</h2>
         </div>
         {totalIssues > 0 && (
-          <span className="text-xs text-gray-500">{totalIssues} issue{totalIssues !== 1 ? 's' : ''} found</span>
+          <span className="text-xs text-gray-500">
+            {totalIssues} issue{totalIssues !== 1 ? 's' : ''} found
+          </span>
         )}
       </div>
 
@@ -72,7 +85,10 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
           </div>
           {topContent.length > perPage && (
             <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
-              <span>Showing {page * perPage + 1}-{Math.min((page + 1) * perPage, topContent.length)} of {topContent.length}</span>
+              <span>
+                Showing {page * perPage + 1}-{Math.min((page + 1) * perPage, topContent.length)} of{' '}
+                {topContent.length}
+              </span>
               <div className="flex items-center gap-1">
                 <button
                   onClick={() => setPage(Math.max(0, page - 1))}
@@ -81,7 +97,9 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 >
                   <ChevronLeft className="w-3.5 h-3.5" />
                 </button>
-                <span>Page {page + 1} of {totalPages}</span>
+                <span>
+                  Page {page + 1} of {totalPages}
+                </span>
                 <button
                   onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
                   disabled={page >= totalPages - 1}
@@ -102,14 +120,18 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 <FileWarning className="w-4 h-4 text-red-400" />
                 <span className="text-sm text-gray-700">Missing meta descriptions</span>
               </div>
-              <span className="text-sm font-semibold text-gray-900">{issues.missingMetaDescriptions}</span>
+              <span className="text-sm font-semibold text-gray-900">
+                {issues.missingMetaDescriptions}
+              </span>
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <LinkIcon className="w-4 h-4 text-red-400" />
                 <span className="text-sm text-gray-700">Broken internal links</span>
               </div>
-              <span className="text-sm font-semibold text-gray-900">{issues.brokenInternalLinks}</span>
+              <span className="text-sm font-semibold text-gray-900">
+                {issues.brokenInternalLinks}
+              </span>
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
@@ -130,5 +152,5 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/components/ThemeProvider.tsx

@@ -1,98 +1,98 @@
-'use client';
+'use client'
 
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'
 
-type Theme = 'light' | 'dark' | 'system';
+type Theme = 'light' | 'dark' | 'system'
 
 interface ThemeContextValue {
-  theme: Theme;
-  resolvedTheme: 'light' | 'dark';
-  setTheme: (theme: Theme) => void;
+  theme: Theme
+  resolvedTheme: 'light' | 'dark'
+  setTheme: (theme: Theme) => void
 }
 
 const ThemeContext = createContext<ThemeContextValue>({
   theme: 'system',
   resolvedTheme: 'light',
   setTheme: () => {},
-});
+})
 
 export function useTheme() {
-  return useContext(ThemeContext);
+  return useContext(ThemeContext)
 }
 
 function getSystemTheme(): 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'light';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
 function resolveTheme(theme: Theme): 'light' | 'dark' {
-  return theme === 'system' ? getSystemTheme() : theme;
+  return theme === 'system' ? getSystemTheme() : theme
 }
 
-const STORAGE_KEY = 'actuate-theme';
+const STORAGE_KEY = 'actuate-theme'
 
 interface ThemeProviderProps {
-  children: ReactNode;
+  children: ReactNode
   /** When true, default to dark mode if the user hasn't explicitly chosen a theme. */
-  defaultDarkMode?: boolean;
+  defaultDarkMode?: boolean
 }
 
 export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>('system');
-  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
+  const [theme, setThemeState] = useState<Theme>('system')
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light')
 
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
-    let initial: Theme;
+    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null
+    let initial: Theme
     if (stored && ['light', 'dark', 'system'].includes(stored)) {
-      initial = stored;
+      initial = stored
     } else if (defaultDarkMode === true) {
-      initial = 'dark';
+      initial = 'dark'
     } else if (defaultDarkMode === false) {
-      initial = 'light';
+      initial = 'light'
     } else {
-      initial = 'system';
+      initial = 'system'
     }
-    setThemeState(initial);
-    const resolved = resolveTheme(initial);
-    setResolvedTheme(resolved);
-    applyTheme(resolved);
-  }, [defaultDarkMode]);
+    setThemeState(initial)
+    const resolved = resolveTheme(initial)
+    setResolvedTheme(resolved)
+    applyTheme(resolved)
+  }, [defaultDarkMode])
 
   useEffect(() => {
-    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
     const handler = () => {
       if (theme === 'system') {
-        const resolved = getSystemTheme();
-        setResolvedTheme(resolved);
-        applyTheme(resolved);
+        const resolved = getSystemTheme()
+        setResolvedTheme(resolved)
+        applyTheme(resolved)
       }
-    };
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  }, [theme]);
+    }
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [theme])
 
   const setTheme = useCallback((next: Theme) => {
-    setThemeState(next);
-    localStorage.setItem(STORAGE_KEY, next);
-    const resolved = resolveTheme(next);
-    setResolvedTheme(resolved);
-    applyTheme(resolved);
-  }, []);
+    setThemeState(next)
+    localStorage.setItem(STORAGE_KEY, next)
+    const resolved = resolveTheme(next)
+    setResolvedTheme(resolved)
+    applyTheme(resolved)
+  }, [])
 
   return (
     <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
       {children}
     </ThemeContext.Provider>
-  );
+  )
 }
 
 function applyTheme(resolved: 'light' | 'dark') {
-  const adminRoot = document.querySelector('.actuate-admin');
-  if (!adminRoot) return;
+  const adminRoot = document.querySelector('.actuate-admin')
+  if (!adminRoot) return
   if (resolved === 'dark') {
-    adminRoot.classList.add('dark');
+    adminRoot.classList.add('dark')
   } else {
-    adminRoot.classList.remove('dark');
+    adminRoot.classList.remove('dark')
   }
 }

package/src/components/TipTapEditor.tsx

@@ -1,21 +1,21 @@
-'use client';
+'use client'
 
-import React, { useState } from 'react';
-import { useEditor, EditorContent, type Editor } from '@tiptap/react';
-import { MediaPickerModal } from './MediaPickerModal.js';
-import StarterKit from '@tiptap/starter-kit';
-import UnderlineExt from '@tiptap/extension-underline';
-import Link from '@tiptap/extension-link';
-import Image from '@tiptap/extension-image';
-import Table from '@tiptap/extension-table';
-import TableRow from '@tiptap/extension-table-row';
-import TableHeader from '@tiptap/extension-table-header';
-import TableCell from '@tiptap/extension-table-cell';
-import TextAlign from '@tiptap/extension-text-align';
-import Placeholder from '@tiptap/extension-placeholder';
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
-import HorizontalRule from '@tiptap/extension-horizontal-rule';
-import { common, createLowlight } from 'lowlight';
+import React, { useState } from 'react'
+import { useEditor, EditorContent, type Editor } from '@tiptap/react'
+import { MediaPickerModal } from './MediaPickerModal.js'
+import StarterKit from '@tiptap/starter-kit'
+import UnderlineExt from '@tiptap/extension-underline'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import Table from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableHeader from '@tiptap/extension-table-header'
+import TableCell from '@tiptap/extension-table-cell'
+import TextAlign from '@tiptap/extension-text-align'
+import Placeholder from '@tiptap/extension-placeholder'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import HorizontalRule from '@tiptap/extension-horizontal-rule'
+import { common, createLowlight } from 'lowlight'
 import {
   Bold,
   Italic,
@@ -41,16 +41,16 @@ import {
   Trash2,
   Undo,
   Redo,
-} from 'lucide-react';
+} from 'lucide-react'
 
-const lowlight = createLowlight(common);
+const lowlight = createLowlight(common)
 
 export interface TipTapEditorProps {
-  content: string;
-  onChange: (html: string) => void;
-  placeholder?: string;
-  editable?: boolean;
-  className?: string;
+  content: string
+  onChange: (html: string) => void
+  placeholder?: string
+  editable?: boolean
+  className?: string
 }
 
 const editorStyles = `
@@ -131,7 +131,7 @@ const editorStyles = `
 .ProseMirror .selectedCell {
   background-color: #dbeafe;
 }
-`;
+`
 
 function ToolbarButton({
   onClick,
@@ -140,11 +140,11 @@ function ToolbarButton({
   title,
   children,
 }: {
-  onClick: () => void;
-  isActive?: boolean;
-  disabled?: boolean;
-  title: string;
-  children: React.ReactNode;
+  onClick: () => void
+  isActive?: boolean
+  disabled?: boolean
+  title: string
+  children: React.ReactNode
 }) {
   return (
     <button
@@ -160,30 +160,30 @@ function ToolbarButton({
     >
       {children}
     </button>
-  );
+  )
 }
 
 function Divider() {
-  return <div className="w-px h-6 bg-gray-200 mx-1" />;
+  return <div className="w-px h-6 bg-gray-200 mx-1" />
 }
 
 function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPicker: () => void }) {
   const addLink = () => {
-    const previousUrl = editor.getAttributes('link').href ?? '';
-    const url = window.prompt('Enter URL:', previousUrl);
-    if (url === null) return;
+    const previousUrl = editor.getAttributes('link').href ?? ''
+    const url = window.prompt('Enter URL:', previousUrl)
+    if (url === null) return
     if (url === '') {
-      editor.chain().focus().extendMarkRange('link').unsetLink().run();
-      return;
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      return
     }
-    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
-  };
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  }
 
   const insertTable = () => {
-    editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
-  };
+    editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+  }
 
-  const isInTable = editor.isActive('table');
+  const isInTable = editor.isActive('table')
 
   return (
     <div className="border-b border-gray-200 bg-gray-50 p-2 flex items-center gap-0.5 flex-wrap sticky top-0 z-10">
@@ -315,23 +315,13 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
       <Divider />
 
       {/* Group 5: Insert */}
-      <ToolbarButton
-        onClick={addLink}
-        isActive={editor.isActive('link')}
-        title="Insert link"
-      >
+      <ToolbarButton onClick={addLink} isActive={editor.isActive('link')} title="Insert link">
         <LinkIcon className="w-4 h-4" />
       </ToolbarButton>
-      <ToolbarButton
-        onClick={onOpenMediaPicker}
-        title="Insert image"
-      >
+      <ToolbarButton onClick={onOpenMediaPicker} title="Insert image">
         <ImageIcon className="w-4 h-4" />
       </ToolbarButton>
-      <ToolbarButton
-        onClick={insertTable}
-        title="Insert table (3×3)"
-      >
+      <ToolbarButton onClick={insertTable} title="Insert table (3×3)">
         <TableIcon className="w-4 h-4" />
       </ToolbarButton>
 
@@ -402,7 +392,7 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
         <Redo className="w-4 h-4" />
       </ToolbarButton>
     </div>
-  );
+  )
 }
 
 export function TipTapEditor({
@@ -412,7 +402,7 @@ export function TipTapEditor({
   editable = true,
   className,
 }: TipTapEditorProps) {
-  const [mediaPickerOpen, setMediaPickerOpen] = useState(false);
+  const [mediaPickerOpen, setMediaPickerOpen] = useState(false)
 
   const editor = useEditor({
     extensions: [
@@ -443,18 +433,24 @@ export function TipTapEditor({
     content,
     editable: editable !== false,
     onUpdate: ({ editor: ed }) => {
-      onChange(ed.getHTML());
+      onChange(ed.getHTML())
     },
-  });
+  })
 
-  if (!editor) return null;
+  if (!editor) return null
 
   const handleImageSelected = (url: string, alt?: string) => {
-    editor.chain().focus().setImage({ src: url, alt: alt ?? '' }).run();
-  };
+    editor
+      .chain()
+      .focus()
+      .setImage({ src: url, alt: alt ?? '' })
+      .run()
+  }
 
   return (
-    <div className={`border border-gray-200 rounded-lg overflow-hidden bg-white ${className ?? ''}`}>
+    <div
+      className={`border border-gray-200 rounded-lg overflow-hidden bg-white ${className ?? ''}`}
+    >
       {editable && <Toolbar editor={editor} onOpenMediaPicker={() => setMediaPickerOpen(true)} />}
       <EditorContent editor={editor} />
       <style dangerouslySetInnerHTML={{ __html: editorStyles }} />
@@ -465,5 +461,5 @@ export function TipTapEditor({
         accept="image/*"
       />
     </div>
-  );
+  )
 }