@actuate-media/cms-admin 0.42.2 → 0.43.0

package/src/lib/posts-service.ts

@@ -87,6 +87,7 @@ interface CollectionApiRow {
   group: string | null
   hidden: boolean
   fieldCount: number
+  excludeFromPostsAggregate?: boolean
 }
 
 function isPostsCollection(c: CollectionApiRow): boolean {
@@ -96,7 +97,9 @@ function isPostsCollection(c: CollectionApiRow): boolean {
 async function fetchPostCollections(): Promise<CollectionApiRow[]> {
   const res = await cmsApi<CollectionApiRow[]>('/collections')
   if (res.error || !res.data) return []
-  return res.data.filter((c) => !c.hidden && isPostsCollection(c))
+  // `excludeFromPostsAggregate` mirrors the server-side /posts filter: a
+  // post-shaped collection with its own workflow stays out of the Posts UI.
+  return res.data.filter((c) => !c.hidden && !c.excludeFromPostsAggregate && isPostsCollection(c))
 }
 
 export async function fetchPostTypes(): Promise<PostType[]> {

package/src/views/settings/BrandingCard.tsx

@@ -14,13 +14,18 @@ import { useRef, useState } from 'react'
 
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SettingsCard, SettingsControlRow, SettingsSubsection } from './components.js'
-import type {
-  BrandAssetField,
-  SelectedBrandAsset,
-  UseAppearanceSettings,
+import {
+  FAVICON_MIME,
+  LOGO_MIME,
+  type BrandAssetField,
+  type SelectedBrandAsset,
+  type UseAppearanceSettings,
 } from './useAppearanceSettings.js'
 
-const LOGO_ACCEPT = 'image/svg+xml,image/png'
+// Derive the file-input accept strings from the validation allow-lists so the
+// picker and the validator can never drift apart.
+const LOGO_ACCEPT = LOGO_MIME.join(',')
+const FAVICON_ACCEPT = FAVICON_MIME.join(',')
 
 function previewSurface(dark: boolean): string {
   return dark ? 'bg-foreground border-border' : 'bg-muted border-border'
@@ -243,7 +248,7 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
       <div className="space-y-5">
         <LogoField
           label="Primary logo"
-          helper="SVG or PNG, up to 1MB. Best for the public header and full admin sidebar."
+          helper="SVG, PNG, WebP, JPEG, GIF, or AVIF, up to 1MB. Best for the public header and full admin sidebar."
           field="publicPrimaryLogoAssetId"
           warning={warningFor('publicPrimaryLogoAssetId')}
           {...logoFieldProps}
@@ -251,11 +256,12 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
 
         <LogoField
           label="Favicon / app icon source"
-          helper="32×32 PNG or SVG. A larger square image is fine — it scales down cleanly."
+          helper="32×32 SVG, PNG, or WebP. A larger square image is fine — it scales down cleanly."
           field="faviconSourceAssetId"
           square
           warning={warningFor('faviconSourceAssetId')}
           {...logoFieldProps}
+          accept={FAVICON_ACCEPT}
         />
 
         {/* Advanced logo variants disclosure (Logo mark + Dark mode logo). */}

package/src/views/settings/useAppearanceSettings.ts

@@ -84,10 +84,38 @@ export interface SelectedBrandAsset {
   height?: number
 }
 
-const LOGO_MIME = ['image/svg+xml', 'image/png']
-const FAVICON_MIME = ['image/svg+xml', 'image/png']
+/**
+ * Formats accepted for brand logos. Everything here is also validated
+ * server-side (allowlist + magic bytes) in cms-core's upload security.
+ * Brand uploads are stored as-is (`skipOptimize`), so each format keeps
+ * its native fidelity — including WebP, which general media uploads are
+ * converted to anyway.
+ */
+export const LOGO_MIME = [
+  'image/svg+xml',
+  'image/png',
+  'image/webp',
+  'image/jpeg',
+  'image/gif',
+  'image/avif',
+]
+/** Favicons need crisp edges at small sizes — vector or lossless/modern raster only. */
+export const FAVICON_MIME = ['image/svg+xml', 'image/png', 'image/webp']
 const MAX_BYTES = 1024 * 1024 // 1 MB
 
+const MIME_LABEL: Record<string, string> = {
+  'image/svg+xml': 'SVG',
+  'image/png': 'PNG',
+  'image/webp': 'WebP',
+  'image/jpeg': 'JPEG',
+  'image/gif': 'GIF',
+  'image/avif': 'AVIF',
+}
+
+function formatAllowed(mimes: string[]): string {
+  return mimes.map((m) => MIME_LABEL[m] ?? m).join(', ')
+}
+
 export interface UseAppearanceSettings {
   loading: boolean
   loadError: string | null
@@ -163,19 +191,25 @@ async function detectShape(file: File): Promise<LogoShape> {
     }
     return 'unknown'
   }
-  return new Promise<LogoShape>((resolve) => {
-    const url = URL.createObjectURL(file)
-    const img = new Image()
-    img.onload = () => {
-      URL.revokeObjectURL(url)
-      resolve(classifyLogoShape(img.naturalWidth, img.naturalHeight))
-    }
-    img.onerror = () => {
-      URL.revokeObjectURL(url)
-      resolve('unknown')
-    }
-    img.src = url
-  })
+  // Shape detection only powers advisory warnings — it must never block or
+  // fail an upload, so any decode problem resolves to 'unknown'.
+  try {
+    return await new Promise<LogoShape>((resolve) => {
+      const url = URL.createObjectURL(file)
+      const img = new Image()
+      img.onload = () => {
+        URL.revokeObjectURL(url)
+        resolve(classifyLogoShape(img.naturalWidth, img.naturalHeight))
+      }
+      img.onerror = () => {
+        URL.revokeObjectURL(url)
+        resolve('unknown')
+      }
+      img.src = url
+    })
+  } catch {
+    return 'unknown'
+  }
 }
 
 function assetToCache(
@@ -344,7 +378,7 @@ export function useAppearanceSettings(
       const isFavicon = field === 'faviconSourceAssetId'
       const allowed = isFavicon ? FAVICON_MIME : LOGO_MIME
       if (!allowed.includes(file.type)) {
-        setSaveError(`Unsupported file type. Allowed: ${allowed.join(', ')}.`)
+        setSaveError(`Unsupported file type. Allowed: ${formatAllowed(allowed)}.`)
         return
       }
       if (file.size > MAX_BYTES) {
@@ -357,8 +391,8 @@ export function useAppearanceSettings(
         const shape = await detectShape(file)
         const form = new FormData()
         form.append('file', file)
-        // Preserve original format (SVG/PNG/ICO fidelity) — brand assets must
-        // not be transcoded to WebP.
+        // Preserve the original format — brand assets must not be transcoded
+        // (SVG stays vector, PNG keeps transparency, WebP/AVIF stay as-is).
         form.append('skipOptimize', 'true')
         const res = await cmsApi<{ id: string; url?: string; mimeType?: string }>('/media/upload', {
           method: 'POST',
@@ -388,12 +422,14 @@ export function useAppearanceSettings(
 
   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.
+      // Same allow-list as upload, regardless of what else lives in the
+      // media library (which also holds documents, video, etc.).
       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 ')}.`)
+        setSaveError(
+          `Unsupported file type. ${isFavicon ? 'Favicons' : 'Brand assets'} must be ${formatAllowed(allowed)}.`,
+        )
         return
       }
       setSaveError(null)