@actuate-media/cms-admin 0.38.1 → 0.40.0

package/src/components/MediaPickerModal.tsx

@@ -10,6 +10,8 @@ interface MediaItem {
   id: string
   filename: string
   storageKey: string
+  /** Normalized public URL from the media list endpoint (preferred for display). */
+  url?: string
   mimeType: string
   fileSize: number
   width?: number
@@ -20,6 +22,8 @@ interface MediaItem {
 export interface SelectedMediaItem {
   id: string
   storageKey: string
+  /** Normalized public URL (falls back to storageKey when absent). */
+  url: string
   filename: string
   mimeType: string
   width?: number
@@ -36,6 +40,12 @@ export interface MediaPickerModalProps {
    */
   onSelectItem?: (item: SelectedMediaItem) => void
   accept?: string
+  /**
+   * Hide the "Upload New" tab and show only the existing library. Used where a
+   * caller has its own upload path (e.g. brand assets, which upload with
+   * format-preserving options) but still wants to reuse library assets.
+   */
+  libraryOnly?: boolean
 }
 
 export function MediaPickerModal({
@@ -44,6 +54,7 @@ export function MediaPickerModal({
   onSelect,
   onSelectItem,
   accept,
+  libraryOnly = false,
 }: MediaPickerModalProps) {
   const [tab, setTab] = useState<'library' | 'upload'>('library')
   const [search, setSearch] = useState('')
@@ -74,11 +85,12 @@ export function MediaPickerModal({
       toast.error(res.error)
     } else if (res.data) {
       const mediaItem = res.data as MediaItem
-      const url = mediaItem.storageKey ?? ''
+      const url = mediaItem.url || mediaItem.storageKey || ''
       toast.success(`Uploaded ${file.name}`)
       onSelectItem?.({
         id: mediaItem.id,
         storageKey: mediaItem.storageKey,
+        url,
         filename: mediaItem.filename ?? file.name,
         mimeType: mediaItem.mimeType ?? file.type,
         width: mediaItem.width,
@@ -93,15 +105,17 @@ export function MediaPickerModal({
   }
 
   function handleSelectItem(item: MediaItem) {
+    const url = item.url || item.storageKey || ''
     onSelectItem?.({
       id: item.id,
       storageKey: item.storageKey,
+      url,
       filename: item.filename,
       mimeType: item.mimeType,
       width: item.width,
       height: item.height,
     })
-    onSelect(item.storageKey, item.filename)
+    onSelect(url, item.filename)
     onClose()
   }
 
@@ -121,31 +135,33 @@ export function MediaPickerModal({
           </button>
         </div>
 
-        <div className="flex border-b border-gray-200">
-          <button
-            onClick={() => setTab('library')}
-            className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
-              tab === 'library'
-                ? 'border-b-2 border-blue-600 text-blue-600'
-                : 'text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Media Library
-          </button>
-          <button
-            onClick={() => setTab('upload')}
-            className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
-              tab === 'upload'
-                ? 'border-b-2 border-blue-600 text-blue-600'
-                : 'text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Upload New
-          </button>
-        </div>
+        {!libraryOnly && (
+          <div className="flex border-b border-gray-200">
+            <button
+              onClick={() => setTab('library')}
+              className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+                tab === 'library'
+                  ? 'border-b-2 border-blue-600 text-blue-600'
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              Media Library
+            </button>
+            <button
+              onClick={() => setTab('upload')}
+              className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+                tab === 'upload'
+                  ? 'border-b-2 border-blue-600 text-blue-600'
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              Upload New
+            </button>
+          </div>
+        )}
 
         <div className="flex-1 overflow-y-auto p-4">
-          {tab === 'library' ? (
+          {libraryOnly || tab === 'library' ? (
             <>
               <div className="relative mb-4">
                 <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
@@ -168,20 +184,33 @@ export function MediaPickerModal({
                 </div>
               ) : (
                 <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
-                  {imageItems.map((item: MediaItem) => (
-                    <button
-                      key={item.id}
-                      onClick={() => handleSelectItem(item)}
-                      className="group relative aspect-square overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-100 transition-colors hover:border-blue-500"
-                    >
-                      <div className="flex h-full w-full items-center justify-center">
-                        <ImageIcon className="h-8 w-8 text-gray-300" />
-                      </div>
-                      <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
-                        <p className="truncate text-xs text-white">{item.filename}</p>
-                      </div>
-                    </button>
-                  ))}
+                  {imageItems.map((item: MediaItem) => {
+                    const src = item.url || item.storageKey
+                    return (
+                      <button
+                        key={item.id}
+                        onClick={() => handleSelectItem(item)}
+                        title={item.filename}
+                        className="group relative aspect-square overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-100 transition-colors hover:border-blue-500"
+                      >
+                        {src ? (
+                          <img
+                            src={src}
+                            alt={item.filename}
+                            loading="lazy"
+                            className="h-full w-full object-contain"
+                          />
+                        ) : (
+                          <div className="flex h-full w-full items-center justify-center">
+                            <ImageIcon className="h-8 w-8 text-gray-300" />
+                          </div>
+                        )}
+                        <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+                          <p className="truncate text-xs text-white">{item.filename}</p>
+                        </div>
+                      </button>
+                    )
+                  })}
                 </div>
               )}
             </>

package/src/lib/page-editor-service.ts

@@ -112,7 +112,9 @@ export function validatePage(page: EditorPage, forPublish = false): ValidationRe
       errors.push('Add at least one visible section before publishing.')
     }
 
-    for (const section of visible) {
+    // Unmanaged (externally-managed) sections have no registered field schema,
+    // so they can't be content-validated here and must not block publish.
+    for (const section of visible.filter((s) => !s.unmanaged)) {
       const def = getSectionType(section.sectionType)
       const label = section.name || def?.name || 'Section'
       const result = validateSectionContent(section.sectionType, section.content, section.settings)
@@ -216,7 +218,9 @@ function rowToEditorPage(doc: DocumentApiRow): EditorPage {
     slug,
     path: typeof data.path === 'string' && data.path ? data.path : slug ? `/${slug}` : '/',
     status: doc.status ?? 'DRAFT',
-    sections: coerceSectionsCore(data.sections),
+    // Preserve unknown (externally-managed) sections so the editor can show
+    // them read-only and round-trip them on save instead of dropping them.
+    sections: coerceSectionsCore(data.sections, { onUnknown: 'preserve' }),
     seoTitle: typeof data.metaTitle === 'string' ? data.metaTitle : '',
     seoDescription: typeof data.metaDescription === 'string' ? data.metaDescription : '',
     publishedAt: doc.publishedAt ?? null,
@@ -252,7 +256,10 @@ function toWriteBody(page: EditorPage, extra?: Record<string, unknown>): string
     title: page.title,
     slug: page.slug,
     path: page.path,
-    sections: page.sections,
+    // Unmanaged sections are part of `page.sections`, so they round-trip on
+    // every save (no data loss). Strip the derived `unmanaged` marker — it is
+    // recomputed from the registry on read, so persisting it would only stale.
+    sections: page.sections.map(({ unmanaged: _unmanaged, ...rest }) => rest),
     metaTitle: page.seoTitle,
     metaDescription: page.seoDescription,
     ...extra,

package/src/views/page-editor/PageSectionEditor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { AlertTriangle, Blocks, Loader2 } from 'lucide-react'
+import { AlertTriangle, Blocks, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
@@ -392,6 +392,12 @@ export function PageSectionEditor({
   const readOnly = page.builderOwned
   const effectiveCanEdit = canEdit && !readOnly
 
+  // Sections whose type has no registered definition (seed/code-owned, e.g.
+  // `opal-*`). They are preserved verbatim on save but can't be edited here.
+  const unmanagedTypes = Array.from(
+    new Set(page.sections.filter((s) => s.unmanaged).map((s) => s.sectionType)),
+  )
+
   return (
     <ErrorBoundary>
       <div className="bg-background flex h-full flex-col overflow-hidden">
@@ -436,6 +442,23 @@ export function PageSectionEditor({
           </div>
         )}
 
+        {unmanagedTypes.length > 0 && (
+          <div
+            role="status"
+            className="border-border bg-muted/50 flex items-start gap-3 border-b px-4 py-2.5"
+          >
+            <Lock className="text-muted-foreground mt-0.5 shrink-0" size={16} aria-hidden />
+            <p className="text-muted-foreground flex-1 text-sm">
+              This page has{' '}
+              <span className="text-foreground font-medium">
+                {unmanagedTypes.length} section type{unmanagedTypes.length > 1 ? 's' : ''}
+              </span>{' '}
+              managed outside the editor ({unmanagedTypes.join(', ')}). They are preserved on save
+              but edited in your seed script or code, not here.
+            </p>
+          </div>
+        )}
+
         {validation && (
           <ValidationSummary
             errors={validation.errors}