@actuate-media/cms-admin 0.38.0 → 0.39.0

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Eye, EyeOff, Plus, X } from 'lucide-react'
+import { Eye, EyeOff, Lock, Plus, X } from 'lucide-react'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
 import type { SectionSettings } from './section-types.js'
@@ -41,6 +41,55 @@ export function SectionInspector({
     return () => document.removeEventListener('keydown', onKey)
   }, [onClose])
 
+  // Unmanaged sections (no registered type) are read-only: show why instead of
+  // editable controls, so the externally-managed content is never altered here.
+  if (section.unmanaged) {
+    return (
+      <aside
+        role="dialog"
+        aria-label={`${section.name} (read-only)`}
+        className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+      >
+        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="min-w-0">
+            <h2 className="text-foreground truncate text-sm font-medium">{section.name}</h2>
+            <p className="text-muted-foreground text-xs">Managed outside the editor</p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close inspector"
+            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </button>
+        </div>
+        <div className="flex-1 space-y-3 overflow-y-auto p-4">
+          <div className="border-border bg-muted text-muted-foreground space-y-2 rounded-md border p-3 text-sm">
+            <p className="text-foreground flex items-center gap-2 font-medium">
+              <Lock size={14} aria-hidden /> Read-only section
+            </p>
+            <p>
+              The section type{' '}
+              <code className="bg-background rounded px-1 py-0.5 text-xs">
+                {section.sectionType}
+              </code>{' '}
+              isn&apos;t registered in this CMS, so it can&apos;t be edited here. It is preserved
+              exactly as-is on every save.
+            </p>
+            <p>
+              Edit it in your seed script or code, or register it via{' '}
+              <code className="bg-background rounded px-1 py-0.5 text-xs">
+                sections.customTypes
+              </code>{' '}
+              in your config to make it editable.
+            </p>
+          </div>
+        </div>
+      </aside>
+    )
+  }
+
   return (
     <aside
       role="dialog"

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

@@ -5,6 +5,7 @@ import {
   Eye,
   EyeOff,
   GripVertical,
+  Lock,
   type LucideIcon,
   MoreVertical,
   Plus,
@@ -153,9 +154,12 @@ function SortableSectionItem({
   onDuplicate,
   onRequestDelete,
 }: SortableItemProps) {
+  // Unmanaged (externally-managed) sections are read-only: no drag, duplicate,
+  // delete, or visibility toggle — only selectable to view the read-only notice.
+  const locked = section.unmanaged === true
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: section.id,
-    disabled: !canEdit,
+    disabled: !canEdit || locked,
   })
   const Icon = sectionIconFor(section.sectionType)
 
@@ -176,7 +180,7 @@ function SortableSectionItem({
           type="button"
           className="text-muted-foreground hover:text-foreground shrink-0 cursor-grab touch-none disabled:cursor-not-allowed disabled:opacity-40"
           aria-label={`Drag to reorder ${section.name}`}
-          disabled={!canEdit}
+          disabled={!canEdit || locked}
           {...attributes}
           {...listeners}
         >
@@ -198,48 +202,60 @@ function SortableSectionItem({
           </span>
         </button>
 
-        <button
-          type="button"
-          onClick={() => onToggleVisibility(section.id)}
-          disabled={!canEdit}
-          aria-pressed={!section.visible}
-          aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
-          className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
-        >
-          {section.visible ? (
-            <Eye className="h-4 w-4" aria-hidden />
-          ) : (
-            <EyeOff className="h-4 w-4" aria-hidden />
-          )}
-        </button>
-
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
+        {locked ? (
+          <span
+            className="text-muted-foreground shrink-0 p-1"
+            title="Managed outside the editor — read-only"
+            aria-label={`${section.name} is managed outside the editor and is read-only`}
+          >
+            <Lock className="h-4 w-4" aria-hidden />
+          </span>
+        ) : (
+          <>
             <button
               type="button"
+              onClick={() => onToggleVisibility(section.id)}
               disabled={!canEdit}
-              aria-label={`More actions for ${section.name}`}
+              aria-pressed={!section.visible}
+              aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
               className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
             >
-              <MoreVertical className="h-4 w-4" aria-hidden />
+              {section.visible ? (
+                <Eye className="h-4 w-4" aria-hidden />
+              ) : (
+                <EyeOff className="h-4 w-4" aria-hidden />
+              )}
             </button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content
-              align="end"
-              sideOffset={4}
-              className="border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md"
-            >
-              <MenuItem onSelect={() => onDuplicate(section.id)} icon={Copy}>
-                Duplicate
-              </MenuItem>
-              <DropdownMenu.Separator className="bg-border my-1 h-px" />
-              <MenuItem onSelect={() => onRequestDelete(section.id)} icon={Trash2} destructive>
-                Delete
-              </MenuItem>
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Root>
+
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
+                <button
+                  type="button"
+                  disabled={!canEdit}
+                  aria-label={`More actions for ${section.name}`}
+                  className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
+                >
+                  <MoreVertical className="h-4 w-4" aria-hidden />
+                </button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content
+                  align="end"
+                  sideOffset={4}
+                  className="border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md"
+                >
+                  <MenuItem onSelect={() => onDuplicate(section.id)} icon={Copy}>
+                    Duplicate
+                  </MenuItem>
+                  <DropdownMenu.Separator className="bg-border my-1 h-px" />
+                  <MenuItem onSelect={() => onRequestDelete(section.id)} icon={Trash2} destructive>
+                    Delete
+                  </MenuItem>
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+          </>
+        )}
       </div>
     </li>
   )

package/src/views/page-editor/sections/SectionRenderer.tsx

@@ -1,6 +1,8 @@
 'use client'
 
+import { Puzzle } from 'lucide-react'
 import type { PageSection } from '../../../lib/page-editor-service.js'
+import { getSectionType } from '../section-types.js'
 import { backgroundClass, paddingClass, type PostRenderContext } from './parts.js'
 import { HeroBannerSection } from './HeroBannerSection.js'
 import { MissionSection } from './MissionSection.js'
@@ -37,10 +39,32 @@ function SectionBody({ section, context }: { section: PageSection; context?: Pos
     case 'gallery':
       return <GallerySection section={section} />
     default:
-      return null
+      // Custom (config-declared) types and unmanaged (externally-managed)
+      // sections have no built-in body component. Render a neutral placeholder
+      // so the canvas reflects their presence + order instead of a blank gap.
+      return <PlaceholderSection section={section} />
   }
 }
 
+/** Fallback canvas card for section types without a built-in renderer. */
+function PlaceholderSection({ section }: { section: PageSection }) {
+  const def = getSectionType(section.sectionType)
+  const label = def?.name ?? section.name
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 px-6 py-12 text-center">
+      <span className="bg-muted text-muted-foreground flex h-10 w-10 items-center justify-center rounded-lg">
+        <Puzzle className="h-5 w-5" aria-hidden />
+      </span>
+      <p className="text-foreground text-sm font-medium">{label}</p>
+      <p className="text-muted-foreground text-xs">
+        {section.unmanaged
+          ? `Managed outside the editor (${section.sectionType}) — preview not available here.`
+          : `Custom section "${section.sectionType}" — rendered by your site's renderer.`}
+      </p>
+    </div>
+  )
+}
+
 export interface SectionRendererProps {
   section: PageSection
   /** Editor mode: adds click-to-select, the selection outline + label, and

package/src/views/settings/BrandingCard.tsx

@@ -5,14 +5,20 @@ import {
   ChevronDown,
   ChevronRight,
   ImageIcon,
+  Library,
   Loader2,
   Trash2,
   Upload,
 } from 'lucide-react'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 
+import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SettingsCard, SettingsControlRow, SettingsSubsection } from './components.js'
-import type { BrandAssetField, UseAppearanceSettings } from './useAppearanceSettings.js'
+import type {
+  BrandAssetField,
+  SelectedBrandAsset,
+  UseAppearanceSettings,
+} from './useAppearanceSettings.js'
 
 const LOGO_ACCEPT = 'image/svg+xml,image/png'
 
@@ -33,6 +39,7 @@ function LogoField({
   canEdit,
   warning,
   onUpload,
+  onSelectFromLibrary,
   onRemove,
 }: {
   label: string
@@ -47,9 +54,11 @@ function LogoField({
   canEdit: boolean
   warning?: string
   onUpload: (field: BrandAssetField, file: File) => void
+  onSelectFromLibrary: (field: BrandAssetField, item: SelectedBrandAsset) => void
   onRemove: (field: BrandAssetField) => void
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
+  const [pickerOpen, setPickerOpen] = useState(false)
   const assetId = brand[field]
   const asset = assetId ? assets[assetId] : undefined
   const uploading = uploadingField === field
@@ -102,6 +111,15 @@ function LogoField({
           <Trash2 size={14} aria-hidden="true" /> Remove
         </button>
       )}
+      <button
+        type="button"
+        onClick={() => setPickerOpen(true)}
+        disabled={!canEdit || uploading}
+        aria-label={`Choose ${label.toLowerCase()} from media library`}
+        className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <Library size={14} aria-hidden="true" /> Media library
+      </button>
       <button
         type="button"
         onClick={() => inputRef.current?.click()}
@@ -116,6 +134,22 @@ function LogoField({
         )}
         {asset ? 'Replace' : 'Upload'}
       </button>
+      <MediaPickerModal
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+        accept={accept}
+        libraryOnly
+        onSelect={() => {}}
+        onSelectItem={(item) => {
+          onSelectFromLibrary(field, {
+            id: item.id,
+            url: item.url,
+            mimeType: item.mimeType,
+            width: item.width,
+            height: item.height,
+          })
+        }}
+      />
     </>
   )
 
@@ -197,6 +231,7 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
     uploadingField: s.uploadingField,
     canEdit,
     onUpload: s.uploadAsset,
+    onSelectFromLibrary: s.selectAsset,
     onRemove: s.removeAsset,
   }
 

package/src/views/settings/useAppearanceSettings.ts

@@ -75,6 +75,15 @@ export interface AssetPreview {
   shape: LogoShape
 }
 
+/** An existing media-library asset chosen for a brand field via the picker. */
+export interface SelectedBrandAsset {
+  id: string
+  url: string
+  mimeType: string
+  width?: number
+  height?: number
+}
+
 const LOGO_MIME = ['image/svg+xml', 'image/png']
 const FAVICON_MIME = ['image/svg+xml', 'image/png']
 const MAX_BYTES = 1024 * 1024 // 1 MB
@@ -103,6 +112,8 @@ export interface UseAppearanceSettings {
   setBrandingMode: (v: AdminBrandingMode) => void
   setAltText: (v: string) => void
   uploadAsset: (field: BrandAssetField, file: File) => Promise<void>
+  /** Point a brand field at an EXISTING media asset (no re-upload, no duplicate). */
+  selectAsset: (field: BrandAssetField, item: SelectedBrandAsset) => void
   removeAsset: (field: BrandAssetField) => void
   save: () => Promise<void>
   reset: () => void
@@ -375,6 +386,33 @@ export function useAppearanceSettings(
     [appearance, brand, assets, update],
   )
 
+  const selectAsset = useCallback(
+    (field: BrandAssetField, item: SelectedBrandAsset) => {
+      // Same allow-list as upload: brand assets must be SVG or PNG, regardless
+      // of what else lives in the media library.
+      const isFavicon = field === 'faviconSourceAssetId'
+      const allowed = isFavicon ? FAVICON_MIME : LOGO_MIME
+      if (!allowed.includes(item.mimeType)) {
+        setSaveError(`Unsupported file type. Brand assets must be ${allowed.join(' or ')}.`)
+        return
+      }
+      setSaveError(null)
+      const nextAssets: Record<string, AssetPreview> = {
+        ...assets,
+        [item.id]: {
+          id: item.id,
+          url: item.url,
+          mimeType: item.mimeType,
+          width: item.width,
+          height: item.height,
+          shape: classifyLogoShape(item.width, item.height),
+        },
+      }
+      update(appearance, { ...brand, [field]: item.id }, nextAssets)
+    },
+    [appearance, brand, assets, update],
+  )
+
   const removeAsset = useCallback(
     (field: BrandAssetField) => {
       const next = { ...brand }
@@ -505,6 +543,7 @@ export function useAppearanceSettings(
     setBrandingMode,
     setAltText,
     uploadAsset,
+    selectAsset,
     removeAsset,
     save,
     reset,