@actuate-media/cms-admin 0.18.0 → 0.20.0

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/NewPostPicker.tsx

@@ -9,10 +9,11 @@ import { resolvePostTypeIcon } from '../../components/posts/icons.js'
 /**
  * Type-picker landing page for "+ New Post".
  *
- * When zero or one post type is configured we'd ordinarily auto-route
- * to the per-collection editor, but the spec calls out always showing
- * a chooser when "+ New Post" is clicked. We keep that behavior so
- * the experience is consistent regardless of how many types exist.
+ * Behavior by number of configured post types:
+ *   - exactly one  → skip the picker and forward straight to that type's
+ *     new-post editor (a one-card chooser adds nothing but a flash)
+ *   - two or more  → show the chooser cards
+ *   - zero         → show a "no post types configured" setup hint
  *
  * Picking a card navigates to the section-based Post editor's new-post
  * route (`/posts/<slug>/new`), which seeds the post from that type's

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/PostTypesView.tsx

@@ -14,10 +14,11 @@ import { resolvePostTypeIcon } from '../../components/posts/icons.js'
  *   - title + description
  *   - footer row: post count · field count · URL base
  *
- * Cards open the per-collection settings (`/collections/:slug/settings`
- * in the existing admin) when clicked. The dashed "+ New Post Type"
- * card routes to /posts/types/new where users get instructions for
- * adding a new collection to the config file.
+ * Clicking a card opens that type's settings (`/posts/types/:slug/edit`);
+ * each card also has an "Edit Template" action (`/posts/types/:slug/template`)
+ * for the type's default layout. The dashed "+ New Post Type" card routes to
+ * `/posts/types/new`, where users get instructions for adding a new collection
+ * to the config file.
  *
  * Why no in-app create/edit flow yet:
  *   Collections are file-defined (actuate.config.ts). Writing to that

package/src/views/Posts/PostsListView.tsx

@@ -118,6 +118,15 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     setSelected(new Set())
   }, [activeType, debouncedSearch, status, author])
 
+  // Selection is scoped to the rows visible on the current page: bulk
+  // actions only ever touch `selectedPosts` (the current page's selected
+  // rows), so clear the selection whenever the page changes. Without this
+  // the bulk bar count keeps counting rows from earlier pages while the
+  // publish/delete handlers silently operate on nothing.
+  useEffect(() => {
+    setSelected(new Set())
+  }, [page])
+
   const total = data?.total ?? 0
   const totalAll = useMemo(
     () => (data?.types ?? []).reduce((sum, t) => sum + t.postCount, 0),

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' } } },",
     ],
   },
 ]