@actuate-media/cms-admin 0.25.0 → 0.27.0

package/src/views/settings/components.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import * as Dialog from '@radix-ui/react-dialog'
+import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
+import type { ReactNode } from 'react'
+import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
+
+const SOURCE_LABEL: Record<SettingsSourceMetadata['source'], string> = {
+  config: 'Config-managed',
+  environment: 'Environment-managed',
+  database: 'Editable',
+  plugin: 'Plugin setting',
+  computed: 'Computed',
+}
+
+/** Small badge showing where a setting's value comes from. */
+export function SettingsSourceBadge({ meta }: { meta?: SettingsSourceMetadata }) {
+  if (!meta || (meta.source === 'database' && meta.editable)) return null
+  const locked = !meta.editable
+  return (
+    <span
+      className="text-muted-foreground border-border bg-muted inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs"
+      title={meta.reason}
+    >
+      {locked && <Lock size={11} aria-hidden="true" />}
+      {SOURCE_LABEL[meta.source]}
+    </span>
+  )
+}
+
+/** A labelled switch row with description, used for the SEO defaults. */
+export function SettingsToggleRow({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled = false,
+  badge,
+}: {
+  label: string
+  description: string
+  checked: boolean
+  onChange: (value: boolean) => void
+  disabled?: boolean
+  badge?: ReactNode
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div className="flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-foreground text-base font-medium">{label}</span>
+          {badge}
+        </div>
+        <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`focus-visible:ring-ring relative mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+          checked ? 'bg-brand' : 'bg-switch-background'
+        }`}
+      >
+        <span
+          className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
+            checked ? 'translate-x-[22px]' : 'translate-x-0.5'
+          }`}
+        />
+      </button>
+    </div>
+  )
+}
+
+/** Aggregated validation messages shown above the cards. */
+export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[] }) {
+  if (issues.length === 0) return null
+  const errors = issues.filter((i) => i.severity === 'error')
+  const warnings = issues.filter((i) => i.severity === 'warning')
+  const isError = errors.length > 0
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className={`flex items-start gap-3 rounded-lg border p-3 text-sm ${
+        isError
+          ? 'border-destructive/30 bg-destructive/10 text-destructive'
+          : 'border-warning/30 bg-warning/10 text-warning'
+      }`}
+    >
+      <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+      <div className="space-y-1">
+        {[...errors, ...warnings].map((issue, i) => (
+          <p key={`${issue.field}-${i}`}>{issue.message}</p>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** Sticky footer with Reset + Save, gated on dirty state. */
+export function SettingsSaveBar({
+  dirty,
+  canEdit,
+  hasErrors,
+  saveState,
+  onSave,
+  onReset,
+}: {
+  dirty: boolean
+  canEdit: boolean
+  hasErrors: boolean
+  saveState: 'idle' | 'saving' | 'success' | 'error'
+  onSave: () => void
+  onReset: () => void
+}) {
+  const saving = saveState === 'saving'
+  return (
+    <div className="border-border bg-background/80 sticky bottom-0 z-10 flex items-center justify-end gap-4 border-t py-3 backdrop-blur">
+      {saveState === 'success' && !dirty && (
+        <span className="text-success flex items-center gap-1.5 text-sm" aria-live="polite">
+          <Check size={16} aria-hidden="true" /> Saved
+        </span>
+      )}
+      <button
+        type="button"
+        onClick={onReset}
+        disabled={!dirty || saving}
+        className="text-muted-foreground hover:text-foreground rounded-md px-3 py-2 text-base transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Reset
+      </button>
+      <button
+        type="button"
+        onClick={onSave}
+        disabled={!canEdit || !dirty || hasErrors || saving}
+        className="bg-brand text-brand-foreground focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-5 py-2 text-base font-medium transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {saving && <Loader2 size={16} className="animate-spin" aria-hidden="true" />}
+        {saving ? 'Saving…' : 'Save Changes'}
+      </button>
+    </div>
+  )
+}
+
+/** Confirmation dialog for dangerous indexing changes. */
+export function ConfirmDangerousSettingDialog({
+  open,
+  title,
+  description,
+  confirmLabel = 'Continue',
+  onConfirm,
+  onCancel,
+}: {
+  open: boolean
+  title: string
+  description: string
+  confirmLabel?: string
+  onConfirm: () => void
+  onCancel: () => void
+}) {
+  return (
+    <Dialog.Root open={open} onOpenChange={(o) => !o && onCancel()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+        <Dialog.Content className="bg-card text-card-foreground fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg">
+          <div className="mb-3 flex items-center gap-2">
+            <span className="bg-warning/15 text-warning flex h-9 w-9 items-center justify-center rounded-full">
+              <AlertTriangle size={20} aria-hidden="true" />
+            </span>
+            <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>
+          </div>
+          <Dialog.Description className="text-muted-foreground mb-5 text-sm">
+            {description}
+          </Dialog.Description>
+          <div className="flex items-center justify-end gap-3">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="border-border text-foreground hover:bg-accent rounded-md border px-4 py-2 text-base transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              className="bg-destructive text-destructive-foreground rounded-md px-4 py-2 text-base font-medium transition-opacity hover:opacity-90"
+            >
+              {confirmLabel}
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/views/settings/useAppearanceSettings.ts

@@ -0,0 +1,513 @@
+'use client'
+
+import {
+  classifyLogoShape,
+  logoShapeWarning,
+  resolveAdminBrand,
+  resolvePublicBrand,
+  validateAccentColor,
+  type AdminBrandingMode,
+  type BrandAssetLike,
+  type BrandAssetRole,
+  type BrandSettings,
+  type ColorMode,
+  type LogoShape,
+  type ResolvedAdminBrand,
+  type ResolvedPublicBrand,
+  type SidebarDensity,
+} from '@actuate-media/cms-core/appearance'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { useTheme, type AdminBrandCache } from '../../components/ThemeProvider.js'
+import { cmsApi } from '../../lib/api.js'
+import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
+
+export type SaveState = 'idle' | 'saving' | 'success' | 'error'
+
+/** Theme + typography + motion form (the `appearance` settings blob). */
+export interface AppearanceForm {
+  colorMode: ColorMode
+  accent: string
+  density: SidebarDensity
+  font: string
+  reduceMotion: boolean
+}
+
+/** Brand asset references + admin branding mode (the `brand` settings blob). */
+export interface BrandForm {
+  mode: AdminBrandingMode
+  publicPrimaryLogoAssetId?: string
+  publicLogoMarkAssetId?: string
+  publicDarkLogoAssetId?: string
+  adminPrimaryLogoAssetId?: string
+  adminLogoMarkAssetId?: string
+  adminDarkLogoAssetId?: string
+  faviconSourceAssetId?: string
+  defaultLogoAltText?: string
+}
+
+/** A brand-form field that points at a media asset, plus its asset role. */
+export type BrandAssetField =
+  | 'publicPrimaryLogoAssetId'
+  | 'publicLogoMarkAssetId'
+  | 'publicDarkLogoAssetId'
+  | 'adminPrimaryLogoAssetId'
+  | 'adminLogoMarkAssetId'
+  | 'adminDarkLogoAssetId'
+  | 'faviconSourceAssetId'
+
+export const FIELD_ROLE: Record<BrandAssetField, BrandAssetRole> = {
+  publicPrimaryLogoAssetId: 'publicPrimaryLogo',
+  publicLogoMarkAssetId: 'publicLogoMark',
+  publicDarkLogoAssetId: 'publicDarkLogo',
+  adminPrimaryLogoAssetId: 'adminPrimaryLogo',
+  adminLogoMarkAssetId: 'adminLogoMark',
+  adminDarkLogoAssetId: 'adminDarkLogo',
+  faviconSourceAssetId: 'faviconSource',
+}
+
+export interface AssetPreview {
+  id: string
+  url: string
+  mimeType: string
+  width?: number
+  height?: number
+  shape: LogoShape
+}
+
+const LOGO_MIME = ['image/svg+xml', 'image/png']
+const FAVICON_MIME = ['image/svg+xml', 'image/png']
+const MAX_BYTES = 1024 * 1024 // 1 MB
+
+export interface UseAppearanceSettings {
+  loading: boolean
+  loadError: string | null
+  appearance: AppearanceForm
+  brand: BrandForm
+  /** Per-asset-id preview metadata (loaded + freshly uploaded). */
+  assets: Record<string, AssetPreview>
+  sources: Record<string, SettingsSourceMetadata>
+  issues: ValidationIssue[]
+  preview: { admin: ResolvedAdminBrand; public: ResolvedPublicBrand; faviconUrl: string | null }
+  dirty: boolean
+  saveState: SaveState
+  saveError: string | null
+  uploadingField: BrandAssetField | null
+  showAdvanced: boolean
+  setShowAdvanced: (v: boolean) => void
+  setColorMode: (v: ColorMode) => void
+  setAccent: (v: string) => void
+  setDensity: (v: SidebarDensity) => void
+  setFont: (v: string) => void
+  setReduceMotion: (v: boolean) => void
+  setBrandingMode: (v: AdminBrandingMode) => void
+  setAltText: (v: string) => void
+  uploadAsset: (field: BrandAssetField, file: File) => Promise<void>
+  removeAsset: (field: BrandAssetField) => void
+  save: () => Promise<void>
+  reset: () => void
+  reload: () => void
+}
+
+const DEFAULT_FORM: AppearanceForm = {
+  colorMode: 'system',
+  accent: 'purple',
+  density: 'default',
+  font: 'DM Sans',
+  reduceMotion: false,
+}
+
+const DEFAULT_BRAND_FORM: BrandForm = { mode: 'inheritPublicBrand' }
+
+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') {
+    try {
+      const text = await file.text()
+      const viewBox = text.match(/viewBox\s*=\s*["']\s*[\d.]+\s+[\d.]+\s+([\d.]+)\s+([\d.]+)/i)
+      if (viewBox) return classifyLogoShape(parseFloat(viewBox[1]!), parseFloat(viewBox[2]!))
+      const w = text.match(/\bwidth\s*=\s*["']([\d.]+)/i)
+      const h = text.match(/\bheight\s*=\s*["']([\d.]+)/i)
+      if (w && h) return classifyLogoShape(parseFloat(w[1]!), parseFloat(h[1]!))
+    } catch {
+      /* fall through */
+    }
+    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
+  })
+}
+
+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>,
+): UseAppearanceSettings {
+  const { applyAppearance, setAdminBrand } = useTheme()
+
+  const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [appearance, setAppearance] = useState<AppearanceForm>(DEFAULT_FORM)
+  const [brand, setBrand] = useState<BrandForm>(DEFAULT_BRAND_FORM)
+  const [assets, setAssets] = useState<Record<string, AssetPreview>>({})
+  const [saveState, setSaveState] = useState<SaveState>('idle')
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [uploadingField, setUploadingField] = useState<BrandAssetField | null>(null)
+  const [showAdvanced, setShowAdvanced] = useState(false)
+
+  const baselineRef = useRef<string>(snapshot(DEFAULT_FORM, DEFAULT_BRAND_FORM))
+  const siteTitleRef = useRef<string | null>(null)
+
+  // Config-managed source detection (admin branding configured in actuate.config.ts).
+  const branding = (config?.admin as Record<string, unknown> | undefined)?.branding as
+    | Record<string, unknown>
+    | undefined
+  const sources = useMemo<Record<string, SettingsSourceMetadata>>(() => {
+    const out: Record<string, SettingsSourceMetadata> = {}
+    if (branding?.primaryColor) {
+      out.accent = {
+        source: 'config',
+        editable: false,
+        reason: 'Primary color is set in actuate.config.ts (admin.branding.primaryColor).',
+      }
+    }
+    if (branding?.darkMode !== undefined) {
+      out.colorMode = {
+        source: 'config',
+        editable: true,
+        reason: 'Default dark mode comes from admin.branding.darkMode; you can still override it.',
+      }
+    }
+    return out
+  }, [branding])
+
+  const pushLive = useCallback(
+    (a: AppearanceForm, b: BrandForm, assetMap: Record<string, AssetPreview>) => {
+      applyAppearance({
+        theme: a.colorMode,
+        accent: a.accent,
+        density: a.density,
+        font: a.font,
+        reduceMotion: a.reduceMotion,
+        adminBrand: assetToCache(b, assetMap, siteTitleRef.current),
+      })
+    },
+    [applyAppearance],
+  )
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setLoadError(null)
+    const res = await cmsApi<AppearanceApiResponse>('/appearance')
+    if (res.error || !res.data) {
+      setLoadError(res.error ?? 'Failed to load appearance settings')
+      setLoading(false)
+      return
+    }
+    const d = res.data
+    const nextAppearance: AppearanceForm = {
+      colorMode: d.appearance.adminColorModeDefault,
+      accent: d.appearance.adminAccentColor,
+      density: d.appearance.sidebarDensity,
+      font: d.appearance.contentFont,
+      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),
+      }
+    }
+    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)
+    setSaveState('idle')
+    setLoading(false)
+  }, [pushLive])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  // ── Mutators (live-apply theme controls before save) ──────────────────────
+  const update = useCallback(
+    (next: AppearanceForm, b: BrandForm, assetMap: Record<string, AssetPreview>) => {
+      setAppearance(next)
+      setBrand(b)
+      setAssets(assetMap)
+      setSaveState('idle')
+      pushLive(next, b, assetMap)
+    },
+    [pushLive],
+  )
+
+  const setColorMode = useCallback(
+    (v: ColorMode) => update({ ...appearance, colorMode: v }, brand, assets),
+    [appearance, brand, assets, update],
+  )
+  const setAccent = useCallback(
+    (v: string) => update({ ...appearance, accent: v }, brand, assets),
+    [appearance, brand, assets, update],
+  )
+  const setDensity = useCallback(
+    (v: SidebarDensity) => update({ ...appearance, density: v }, brand, assets),
+    [appearance, brand, assets, update],
+  )
+  const setFont = useCallback(
+    (v: string) => update({ ...appearance, font: v }, brand, assets),
+    [appearance, brand, assets, update],
+  )
+  const setReduceMotion = useCallback(
+    (v: boolean) => update({ ...appearance, reduceMotion: v }, brand, assets),
+    [appearance, brand, assets, update],
+  )
+  const setBrandingMode = useCallback(
+    (v: AdminBrandingMode) => update(appearance, { ...brand, mode: v }, assets),
+    [appearance, brand, assets, update],
+  )
+  const setAltText = useCallback(
+    (v: string) => update(appearance, { ...brand, defaultLogoAltText: v }, assets),
+    [appearance, brand, assets, update],
+  )
+
+  const uploadAsset = useCallback(
+    async (field: BrandAssetField, file: File) => {
+      const isFavicon = field === 'faviconSourceAssetId'
+      const allowed = isFavicon ? FAVICON_MIME : LOGO_MIME
+      if (!allowed.includes(file.type)) {
+        setSaveError(`Unsupported file type. Allowed: ${allowed.join(', ')}.`)
+        return
+      }
+      if (file.size > MAX_BYTES) {
+        setSaveError('File exceeds the 1MB limit.')
+        return
+      }
+      setSaveError(null)
+      setUploadingField(field)
+      try {
+        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.
+        form.append('skipOptimize', 'true')
+        const res = await cmsApi<{ id: string; url?: string; mimeType?: string }>('/media/upload', {
+          method: 'POST',
+          body: form,
+        })
+        if (res.error || !res.data?.id) {
+          setSaveError(res.error ?? 'Upload failed')
+          return
+        }
+        const id = res.data.id
+        const nextAssets: Record<string, AssetPreview> = {
+          ...assets,
+          [id]: {
+            id,
+            url: res.data.url ?? '',
+            mimeType: res.data.mimeType ?? file.type,
+            shape,
+          },
+        }
+        update(appearance, { ...brand, [field]: id }, nextAssets)
+      } finally {
+        setUploadingField(null)
+      }
+    },
+    [appearance, brand, assets, update],
+  )
+
+  const removeAsset = useCallback(
+    (field: BrandAssetField) => {
+      const next = { ...brand }
+      delete next[field]
+      update(appearance, next, assets)
+    },
+    [appearance, brand, assets, update],
+  )
+
+  const issues = useMemo<ValidationIssue[]>(() => {
+    const out: ValidationIssue[] = []
+    const accentCheck = validateAccentColor(appearance.accent)
+    if (!accentCheck.valid) {
+      out.push({
+        field: 'accent',
+        message: accentCheck.reason ?? 'Invalid accent color.',
+        severity: 'error',
+      })
+    }
+    // Shape warnings per asset field.
+    for (const field of Object.keys(FIELD_ROLE) as BrandAssetField[]) {
+      const id = brand[field]
+      if (!id) continue
+      const shape = assets[id]?.shape
+      if (!shape) continue
+      const w = logoShapeWarning(FIELD_ROLE[field], shape)
+      if (w) out.push({ field, message: w, severity: 'warning' })
+    }
+    // Dark mode default but no dark logo.
+    const hasDark = Boolean(brand.publicDarkLogoAssetId || brand.adminDarkLogoAssetId)
+    if (appearance.colorMode === 'dark' && !hasDark) {
+      out.push({
+        field: 'colorMode',
+        message:
+          'Dark mode is the default but no dark-mode logo is set. The primary logo will be used on dark backgrounds.',
+        severity: 'warning',
+      })
+    }
+    return out
+  }, [appearance, brand, assets])
+
+  const preview = useMemo(() => {
+    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 title = siteTitleRef.current
+    const faviconId = brand.faviconSourceAssetId
+    return {
+      admin: resolveAdminBrand(brand as BrandSettings, map, title),
+      public: resolvePublicBrand(brand as BrandSettings, map, title),
+      faviconUrl: faviconId ? (assets[faviconId]?.url ?? null) : null,
+    }
+  }, [brand, assets])
+
+  const dirty = useMemo(
+    () => snapshot(appearance, brand) !== baselineRef.current,
+    [appearance, brand],
+  )
+
+  const save = useCallback(async () => {
+    if (!canEdit) return
+    if (issues.some((i) => i.severity === 'error')) return
+    setSaveState('saving')
+    setSaveError(null)
+
+    // Read-modify-write the settings global so we never clobber sibling keys
+    // (siteTitle, SEO defaults, AI flags, …) written by other settings tabs.
+    const current = await cmsApi<Record<string, unknown>>('/globals/settings')
+    if (current.error) {
+      setSaveState('error')
+      setSaveError(current.error)
+      return
+    }
+    const now = new Date().toISOString()
+    const brandPayload: BrandSettings = { ...(brand as BrandSettings), updatedAt: now }
+    const appearancePayload = {
+      adminColorModeDefault: appearance.colorMode,
+      adminAccentColor: appearance.accent,
+      sidebarDensity: appearance.density,
+      contentFont: appearance.font,
+      reduceMotion: appearance.reduceMotion,
+      updatedAt: now,
+    }
+    const merged = {
+      ...(current.data ?? {}),
+      appearance: appearancePayload,
+      brand: brandPayload,
+    }
+    const res = await cmsApi('/globals/settings', { method: 'PUT', body: JSON.stringify(merged) })
+    if (res.error) {
+      setSaveState('error')
+      setSaveError(res.error)
+      return
+    }
+    baselineRef.current = snapshot(appearance, brand)
+    setAdminBrand(assetToCache(brand, assets, siteTitleRef.current))
+    setSaveState('success')
+  }, [canEdit, issues, appearance, brand, assets, setAdminBrand])
+
+  const reset = useCallback(() => {
+    const base = JSON.parse(baselineRef.current) as { a: AppearanceForm; b: BrandForm }
+    update(base.a, base.b, assets)
+  }, [assets, update])
+
+  return {
+    loading,
+    loadError,
+    appearance,
+    brand,
+    assets,
+    sources,
+    issues,
+    preview,
+    dirty,
+    saveState,
+    saveError,
+    uploadingField,
+    showAdvanced,
+    setShowAdvanced,
+    setColorMode,
+    setAccent,
+    setDensity,
+    setFont,
+    setReduceMotion,
+    setBrandingMode,
+    setAltText,
+    uploadAsset,
+    removeAsset,
+    save,
+    reset,
+    reload: () => void load(),
+  }
+}