@actuate-media/cms-admin 0.62.0 → 0.63.1

package/src/views/settings/useAppearanceSettings.ts

@@ -18,7 +18,14 @@ import {
 } from '@actuate-media/cms-core/appearance'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-import { useTheme, type AdminBrandCache } from '../../components/ThemeProvider.js'
+import { useTheme } from '../../components/ThemeProvider.js'
+import {
+  adminBrandToCache,
+  appearanceApiToSnapshot,
+  parseAppearanceAssets,
+  type AppearanceApiResponse,
+  type AssetPreview,
+} from '../../lib/appearance-api.js'
 import { cmsApi } from '../../lib/api.js'
 import { BRAND_UPDATED_EVENT } from '../../lib/favicon.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
@@ -67,14 +74,7 @@ export const FIELD_ROLE: Record<BrandAssetField, BrandAssetRole> = {
   faviconSourceAssetId: 'faviconSource',
 }
 
-export interface AssetPreview {
-  id: string
-  url: string
-  mimeType: string
-  width?: number
-  height?: number
-  shape: LogoShape
-}
+export type { AssetPreview } from '../../lib/appearance-api.js'
 
 /** An existing media-library asset chosen for a brand field via the picker. */
 export interface SelectedBrandAsset {
@@ -163,20 +163,6 @@ function snapshot(a: AppearanceForm, b: BrandForm): string {
   return JSON.stringify({ a, b })
 }
 
-interface AppearanceApiResponse {
-  appearance: {
-    adminColorModeDefault: ColorMode
-    adminAccentColor: string
-    sidebarDensity: SidebarDensity
-    contentFont: string
-    reduceMotion: boolean
-  }
-  brand: BrandSettings
-  resolved: { admin: { initials: string } }
-  assets: BrandAssetLike[]
-  siteTitle: string | null
-}
-
 /** Read an uploaded image's shape client-side (raster via Image, SVG via XML). */
 async function detectShape(file: File): Promise<LogoShape> {
   if (file.type === 'image/svg+xml') {
@@ -213,26 +199,6 @@ async function detectShape(file: File): Promise<LogoShape> {
   }
 }
 
-function assetToCache(
-  brand: BrandForm,
-  assets: Record<string, AssetPreview>,
-  siteTitle: string | null,
-): AdminBrandCache {
-  const map = new Map<string, BrandAssetLike>(
-    Object.values(assets).map((a) => [
-      a.id,
-      { id: a.id, publicUrl: a.url, mimeType: a.mimeType, width: a.width, height: a.height },
-    ]),
-  )
-  const resolved = resolveAdminBrand(brand as BrandSettings, map, siteTitle)
-  return {
-    primaryUrl: resolved.primary?.url ?? null,
-    markUrl: resolved.mark?.url ?? null,
-    darkUrl: resolved.dark?.url ?? null,
-    initials: resolved.initials,
-  }
-}
-
 export function useAppearanceSettings(
   canEdit: boolean,
   config?: Record<string, unknown>,
@@ -283,7 +249,7 @@ export function useAppearanceSettings(
         density: a.density,
         font: a.font,
         reduceMotion: a.reduceMotion,
-        adminBrand: assetToCache(b, assetMap, siteTitleRef.current),
+        adminBrand: adminBrandToCache(b as BrandSettings, assetMap, siteTitleRef.current),
       })
     },
     [applyAppearance],
@@ -307,27 +273,17 @@ export function useAppearanceSettings(
       reduceMotion: d.appearance.reduceMotion,
     }
     const nextBrand: BrandForm = { ...d.brand, mode: d.brand?.mode ?? 'inheritPublicBrand' }
-    const nextAssets: Record<string, AssetPreview> = {}
-    for (const a of d.assets ?? []) {
-      nextAssets[a.id] = {
-        id: a.id,
-        url: a.publicUrl,
-        mimeType: a.mimeType,
-        width: a.width ?? undefined,
-        height: a.height ?? undefined,
-        shape: classifyLogoShape(a.width ?? undefined, a.height ?? undefined),
-      }
-    }
+    const nextAssets = parseAppearanceAssets(d.assets ?? [])
     siteTitleRef.current = d.siteTitle ?? null
     setAppearance(nextAppearance)
     setBrand(nextBrand)
     setAssets(nextAssets)
     if (nextBrand.adminLogoMarkAssetId || nextBrand.publicLogoMarkAssetId) setShowAdvanced(true)
     baselineRef.current = snapshot(nextAppearance, nextBrand)
-    pushLive(nextAppearance, nextBrand, nextAssets)
+    applyAppearance(appearanceApiToSnapshot(d))
     setSaveState('idle')
     setLoading(false)
-  }, [pushLive])
+  }, [applyAppearance])
 
   useEffect(() => {
     void load()
@@ -548,7 +504,7 @@ export function useAppearanceSettings(
       return
     }
     baselineRef.current = snapshot(appearance, brand)
-    setAdminBrand(assetToCache(brand, assets, siteTitleRef.current))
+    setAdminBrand(adminBrandToCache(brand as BrandSettings, assets, siteTitleRef.current))
     // Notify live surfaces (browser-tab favicon) to refresh from the saved
     // brand without a full reload.
     if (typeof window !== 'undefined') {