@actuate-media/cms-admin 0.19.0 → 0.21.0

package/src/views/ApiKeys.tsx

@@ -19,6 +19,9 @@ import { cmsApi } from '../lib/api.js'
 
 export interface ApiKeysProps {
   onNavigate?: (path: string) => void
+  /** When rendered inside the Settings tab shell, drop the page padding and
+   * demote the heading so it reads as a section rather than a second page. */
+  embedded?: boolean
 }
 
 interface ApiKeyRecord {
@@ -68,12 +71,14 @@ function formatDate(value: string | null): string {
   }
 }
 
-export function ApiKeys(_props: ApiKeysProps) {
+export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
   const { data, loading, error, refetch } = useApiData<ApiKeyRecord[]>('/api-keys')
   const [showCreate, setShowCreate] = useState(false)
   const [createdKey, setCreatedKey] = useState<{ key: string; record: ApiKeyRecord } | null>(null)
 
   const keys = data ?? []
+  const rootPadding = embedded ? '' : 'p-4 sm:p-6'
+  const Heading = embedded ? 'h2' : 'h1'
 
   const handleRevoke = async (id: string, name: string) => {
     if (!confirm(`Revoke API key "${name}"? This cannot be undone.`)) return
@@ -93,20 +98,20 @@ export function ApiKeys(_props: ApiKeysProps) {
 
   if (loading) {
     return (
-      <div className="flex h-64 items-center justify-center p-4 sm:p-6">
+      <div className={`flex h-64 items-center justify-center ${embedded ? '' : 'p-4 sm:p-6'}`}>
         <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-4 sm:p-6">
+    <div className={rootPadding}>
       <div className="mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <div>
-          <h1 className="flex items-center gap-2 text-xl font-semibold text-gray-900 sm:text-2xl">
+          <Heading className="flex items-center gap-2 text-xl font-semibold text-gray-900 sm:text-2xl">
             <KeyRound className="h-5 w-5 text-gray-500" />
             API Keys
-          </h1>
+          </Heading>
           <p className="mt-1 text-sm text-gray-500">
             Long-lived credentials for programmatic access. Use the{' '}
             <code className="rounded bg-gray-100 px-1 py-0.5 text-xs">Authorization: Bearer</code>{' '}

package/src/views/Dashboard.tsx

@@ -425,7 +425,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       { label: 'New Page', icon: Plus, onClick: () => nav(`/${pagesSlug}/new`) },
       { label: 'Upload Media', icon: Upload, onClick: () => nav('/media') },
       { label: 'New Form', icon: Plus, onClick: () => nav('/forms') },
-      { label: 'View API', icon: Globe, onClick: () => nav('/api-keys') },
+      { label: 'View API', icon: Globe, onClick: () => nav('/settings?tab=api-keys') },
     ]
     return items
   }, [collections, onNavigate]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -899,7 +899,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           </div>
           <button
             className="text-brand inline-flex items-center gap-1 text-xs font-medium hover:underline"
-            onClick={() => nav('/api-keys')}
+            onClick={() => nav('/settings?tab=api-keys')}
           >
             API docs <ExternalLink className="h-3 w-3" />
           </button>

package/src/views/MediaBrowser.tsx

@@ -30,7 +30,6 @@ import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
-import { FocalPointPicker } from '../components/FocalPointPicker.js'
 
 interface MediaItem {
   id: number | string
@@ -120,8 +119,6 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   const [editAlt, setEditAlt] = useState('')
   const [editTitle, setEditTitle] = useState('')
   const [editFilename, setEditFilename] = useState('')
-  const [focalX, setFocalX] = useState(0.5)
-  const [focalY, setFocalY] = useState(0.5)
   const [saving, setSaving] = useState(false)
   const [aiGenerating, setAiGenerating] = useState<string | null>(null)
   const [uploading, setUploading] = useState(false)
@@ -157,8 +154,6 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     setEditAlt(item.altTag ?? '')
     setEditTitle(item.title ?? '')
     setEditFilename(item.name)
-    setFocalX((item as any).focalPointX ?? 0.5)
-    setFocalY((item as any).focalPointY ?? 0.5)
   }
 
   const closeDetail = () => {
@@ -187,8 +182,6 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
         alt: editAlt,
         title: editTitle,
         filename: editFilename,
-        focalX,
-        focalY,
       }),
     })
     setSaving(false)
@@ -244,18 +237,38 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
       return
     }
 
-    await new Promise((r) => setTimeout(r, 1500))
+    if (!activeItem) {
+      setAiGenerating(null)
+      return
+    }
+
+    const res = await cmsApi<{ alt?: string; title?: string; alternatives?: string[] }>(
+      '/ai/media-metadata',
+      { method: 'POST', body: JSON.stringify({ mediaId: activeItem.id }) },
+    )
+
+    if (res.error) {
+      // AI plugin/provider not configured (e.g. local dev): fall back to a
+      // basic filename-derived suggestion so the action still helps.
+      const base = (activeItem.name ?? '')
+        .replace(/\.\w+$/, '')
+        .replace(/[-_]/g, ' ')
+        .trim()
+      if (field === 'alt') {
+        setEditAlt(base ? `Image of ${base}` : '')
+      } else {
+        setEditTitle(base.replace(/\b\w/g, (c) => c.toUpperCase()))
+      }
+      toast.info('AI unavailable — generated a basic suggestion from the filename')
+      setAiGenerating(null)
+      return
+    }
+
     if (field === 'alt') {
-      const generated = `A ${(activeItem?.format ?? 'media').toLowerCase()} image showing ${(activeItem?.name ?? 'uploaded').replace(/[-_]/g, ' ').replace(/\.\w+$/, '')} content`
-      setEditAlt(generated)
+      setEditAlt(res.data?.alt ?? '')
       toast.success('Alt tag generated by AI')
-    } else if (field === 'title') {
-      const generated =
-        activeItem?.name
-          .replace(/[-_]/g, ' ')
-          .replace(/\.\w+$/, '')
-          .replace(/\b\w/g, (c) => c.toUpperCase()) ?? ''
-      setEditTitle(generated)
+    } else {
+      setEditTitle(res.data?.title ?? '')
       toast.success('Title generated by AI')
     }
     setAiGenerating(null)
@@ -533,7 +546,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
               >
                 {viewMode === 'grid' ? (
                   <div
-                    className={`grid h-full gap-2 overflow-y-auto p-2 sm:gap-3 sm:p-3 ${
+                    className={`grid h-full auto-rows-min content-start gap-3 overflow-y-auto p-2 sm:gap-4 sm:p-3 ${
                       panelOpen
                         ? 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
                         : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8'
@@ -542,10 +555,17 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     {filteredAndSorted.map((item) => {
                       const isActive = activeItem?.id === item.id
                       const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0
+                      const typeLabel = (
+                        item.name.includes('.')
+                          ? item.name.split('.').pop()!
+                          : item.format || item.type || ''
+                      )
+                        .replace(/^.*\//, '')
+                        .toUpperCase()
                       return (
                         <div
                           key={item.id}
-                          className={`group relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-all ${
+                          className={`group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border-2 transition-all ${
                             isActive
                               ? 'border-blue-500 ring-2 ring-blue-200'
                               : selectedMedia.includes(item.id)
@@ -556,45 +576,61 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           draggable
                           onDragStart={(e) => handleDragStart(e, item.id)}
                         >
-                          <div className="flex h-full w-full items-center justify-center bg-gray-100">
-                            <MediaPreview item={item} />
-                          </div>
-                          <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 transition-opacity group-hover:opacity-100">
-                            <div className="absolute right-0 bottom-0 left-0 p-2">
-                              <p className="truncate text-xs font-medium text-white">{item.name}</p>
-                              <p className="text-xs text-white/80">{item.size}</p>
+                          <div className="relative aspect-square w-full overflow-hidden">
+                            <div className="flex h-full w-full items-center justify-center bg-gray-100">
+                              <MediaPreview item={item} />
                             </div>
-                          </div>
-                          {hasIssues && (
+                            {hasIssues && (
+                              <div
+                                className="absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-yellow-500"
+                                title="Needs attention"
+                              >
+                                <AlertTriangle className="h-3 w-3 text-white" />
+                              </div>
+                            )}
                             <div
-                              className="absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-yellow-500"
-                              title="Needs attention"
+                              className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
+                              onClick={(e) => handleCheckbox(e, item.id)}
                             >
-                              <AlertTriangle className="h-3 w-3 text-white" />
+                              <div
+                                className={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
+                                  selectedMedia.includes(item.id)
+                                    ? 'border-blue-600 bg-blue-600'
+                                    : 'border-gray-400 bg-white/80'
+                                }`}
+                              >
+                                {selectedMedia.includes(item.id) && (
+                                  <svg
+                                    className="h-3 w-3 text-white"
+                                    fill="none"
+                                    viewBox="0 0 12 12"
+                                  >
+                                    <path
+                                      d="M10 3L4.5 8.5L2 6"
+                                      stroke="currentColor"
+                                      strokeWidth="2"
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                    />
+                                  </svg>
+                                )}
+                              </div>
                             </div>
-                          )}
-                          <div
-                            className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
-                            onClick={(e) => handleCheckbox(e, item.id)}
-                          >
-                            <div
-                              className={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
-                                selectedMedia.includes(item.id)
-                                  ? 'border-blue-600 bg-blue-600'
-                                  : 'border-gray-400 bg-white/80'
+                          </div>
+                          <div className="flex items-center gap-2 border-t border-gray-200 bg-white px-2 py-1.5">
+                            <span
+                              className={`mt-0.5 h-2 w-2 shrink-0 self-start rounded-full ${
+                                hasIssues ? 'bg-yellow-500' : 'bg-green-500'
                               }`}
-                            >
-                              {selectedMedia.includes(item.id) && (
-                                <svg className="h-3 w-3 text-white" fill="none" viewBox="0 0 12 12">
-                                  <path
-                                    d="M10 3L4.5 8.5L2 6"
-                                    stroke="currentColor"
-                                    strokeWidth="2"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                  />
-                                </svg>
-                              )}
+                              title={hasIssues ? 'Needs attention' : 'SEO complete'}
+                            />
+                            <div className="min-w-0 flex-1">
+                              <p className="truncate text-xs font-medium text-gray-900">
+                                {item.name}
+                              </p>
+                              <p className="truncate text-xs text-gray-500">
+                                {[typeLabel, item.size].filter(Boolean).join(' · ')}
+                              </p>
                             </div>
                           </div>
                         </div>
@@ -872,20 +908,6 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                       </div>
                     </div>
 
-                    {isImageMedia(activeItem) && activeItem.url && (
-                      <div className="border-b border-gray-200 p-4">
-                        <FocalPointPicker
-                          imageUrl={activeItem.url}
-                          focalX={focalX}
-                          focalY={focalY}
-                          onChange={(x, y) => {
-                            setFocalX(x)
-                            setFocalY(y)
-                          }}
-                        />
-                      </div>
-                    )}
-
                     <div className="border-b border-gray-200 p-4">
                       <h4 className="mb-3 text-xs font-semibold tracking-wide text-gray-500 uppercase">
                         Used On {activeItem.usedOn && `(${activeItem.usedOn.length})`}

package/src/views/Posts/NewPostTypeInstructions.tsx

@@ -11,8 +11,8 @@ import { POST_TYPE_PRESETS, type PresetColor, type QuickPreset } from './post-ty
  * /posts/types/new — Quick Post Type gallery + snippet generator.
  *
  * Two ways to start:
- *   1. Pick a Quick Post Type preset (Case Studies, News, Portfolio,
- *      Events, Team) — pre-fills the form and tailored extra fields.
+ *   1. Pick a Quick Post Type preset (Blog) — pre-fills the form and
+ *      tailored extra fields.
  *   2. Fill the form from scratch.
  *
  * Either way the page emits a paste-ready `actuate.config.ts` snippet.

package/src/views/Posts/post-type-presets.ts

@@ -10,6 +10,11 @@ import type { PostTypeIconName } from '../../components/posts/icons.js'
  * Presets are NOT a runtime data model — they only seed the snippet.
  * Collections stay code-defined; this just saves the developer from
  * hand-authoring common field sets.
+ *
+ * Only the canonical **Blog** post type ships as a built-in preset. Other
+ * content types (case studies, portfolio, team, …) are available as opt-in
+ * collection factories in `@actuate-media/cms-core` (`collections/presets.ts`)
+ * rather than shipped here as defaults.
  */
 
 export type PresetColor = 'purple' | 'green' | 'orange' | 'blue' | 'red' | 'pink'
@@ -34,72 +39,18 @@ export interface QuickPreset {
 
 export const POST_TYPE_PRESETS: QuickPreset[] = [
   {
-    key: 'case-studies',
-    label: 'Case Studies',
-    singular: 'Case Study',
-    plural: 'Case Studies',
-    slug: 'case-studies',
-    description: 'Client success stories and detailed project case studies.',
-    color: 'green',
-    icon: 'briefcase',
-    extraFields: [
-      "client: { type: 'text', label: 'Client Name' },",
-      "industry: { type: 'text', label: 'Industry' },",
-      "results: { type: 'richText', label: 'Results & Outcomes' },",
-    ],
-  },
-  {
-    key: 'news',
-    label: 'News',
-    singular: 'News Item',
-    plural: 'News',
-    slug: 'news',
-    description: 'Company announcements, press releases, and industry news.',
-    color: 'orange',
-    icon: 'newspaper',
-    extraFields: ["source: { type: 'text', label: 'Source' },"],
-  },
-  {
-    key: 'portfolio',
-    label: 'Portfolio',
-    singular: 'Portfolio Item',
-    plural: 'Portfolio',
-    slug: 'portfolio',
-    description: 'Showcase projects, work samples, and creative pieces.',
-    color: 'blue',
-    icon: 'image',
-    extraFields: [
-      "projectUrl: { type: 'url', label: 'Project URL' },",
-      "gallery: { type: 'media', label: 'Gallery' },",
-    ],
-  },
-  {
-    key: 'events',
-    label: 'Events',
-    singular: 'Event',
-    plural: 'Events',
-    slug: 'events',
-    description: 'Webinars, conferences, and scheduled happenings.',
-    color: 'pink',
-    icon: 'calendar',
-    extraFields: [
-      "startDate: { type: 'date', label: 'Start Date', includeTime: true },",
-      "endDate: { type: 'date', label: 'End Date', includeTime: true },",
-      "location: { type: 'text', label: 'Location' },",
-    ],
-  },
-  {
-    key: 'team',
-    label: 'Team Members',
-    singular: 'Team Member',
-    plural: 'Team',
-    slug: 'team',
-    description: 'Staff bios, headshots, and role information.',
+    key: 'blog',
+    label: 'Blog',
+    singular: 'Post',
+    plural: 'Posts',
+    slug: 'blog',
+    description: 'Long-form articles and blog posts with author, category, and tags.',
     color: 'purple',
-    icon: 'users',
+    icon: 'newspaper',
     extraFields: [
-      "role: { type: 'text', label: 'Role' },",
-      "headshot: { type: 'media', label: 'Headshot' },",
+      "author: { type: 'text', label: 'Author' },",
+      "category: { type: 'text', label: 'Category' },",
+      "tags: { type: 'array', label: 'Tags', fields: { value: { type: 'text', label: 'Tag' } } },",
     ],
   },
 ]