@actuate-media/cms-admin 0.63.0 → 0.63.2

package/src/lib/appearance-api.ts

@@ -0,0 +1,84 @@
+import {
+  classifyLogoShape,
+  resolveAdminBrand,
+  type BrandAssetLike,
+  type BrandSettings,
+  type ColorMode,
+  type LogoShape,
+  type SidebarDensity,
+} from '@actuate-media/cms-core/appearance'
+
+import type { AdminBrandCache, AppearanceSnapshot } from '../components/ThemeProvider.js'
+
+/** GET /appearance response shape (admin Appearance tab + boot hydration). */
+export interface AppearanceApiResponse {
+  appearance: {
+    adminColorModeDefault: ColorMode
+    adminAccentColor: string
+    sidebarDensity: SidebarDensity
+    contentFont: string
+    reduceMotion: boolean
+  }
+  brand: BrandSettings
+  resolved: { admin: { initials: string } }
+  assets: BrandAssetLike[]
+  siteTitle: string | null
+}
+
+export interface AssetPreview {
+  id: string
+  url: string
+  mimeType: string
+  width?: number
+  height?: number
+  shape: LogoShape
+}
+
+export function parseAppearanceAssets(assets: BrandAssetLike[]): Record<string, AssetPreview> {
+  const next: Record<string, AssetPreview> = {}
+  for (const a of assets ?? []) {
+    next[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),
+    }
+  }
+  return next
+}
+
+export function adminBrandToCache(
+  brand: BrandSettings,
+  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, map, siteTitle)
+  return {
+    primaryUrl: resolved.primary?.url ?? null,
+    markUrl: resolved.mark?.url ?? null,
+    darkUrl: resolved.dark?.url ?? null,
+    initials: resolved.initials,
+  }
+}
+
+/** Map a stored appearance payload into the ThemeProvider snapshot. */
+export function appearanceApiToSnapshot(data: AppearanceApiResponse): AppearanceSnapshot {
+  const brand: BrandSettings = { ...data.brand, mode: data.brand?.mode ?? 'inheritPublicBrand' }
+  const assets = parseAppearanceAssets(data.assets)
+  return {
+    theme: data.appearance.adminColorModeDefault,
+    accent: data.appearance.adminAccentColor,
+    density: data.appearance.sidebarDensity,
+    font: data.appearance.contentFont,
+    reduceMotion: data.appearance.reduceMotion,
+    adminBrand: adminBrandToCache(brand, assets, data.siteTitle ?? null),
+  }
+}

package/src/views/ScriptTagEditor.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react'
 import { ArrowLeft, Loader2, AlertTriangle, Trash2, X, Plus } from 'lucide-react'
 import { toast } from 'sonner'
+import { EnabledSwitch } from '../components/EnabledSwitch.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 
@@ -284,18 +285,11 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
             <div>
               <label className="text-foreground mb-1 block text-sm font-medium">Enabled</label>
               <div className="pt-2">
-                <button
-                  type="button"
-                  onClick={() => setEnabled(!enabled)}
-                  className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${enabled ? 'bg-primary' : 'bg-switch-background'}`}
-                  aria-pressed={enabled}
-                >
-                  <span
-                    className={`bg-card absolute top-0.5 block h-5 w-5 rounded-full transition-transform ${
-                      enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
-                    }`}
-                  />
-                </button>
+                <EnabledSwitch
+                  checked={enabled}
+                  onCheckedChange={setEnabled}
+                  aria-label={enabled ? 'Disable script tag' : 'Enable script tag'}
+                />
               </div>
             </div>
           </div>

package/src/views/ScriptTags.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
+import { EnabledSwitch } from '../components/EnabledSwitch.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 
@@ -35,6 +36,13 @@ const PLACEMENT_COLORS: Record<string, string> = {
   body_close: 'bg-success/15 text-success',
 }
 
+function normalizeEnabled(value: unknown): boolean {
+  if (typeof value === 'boolean') return value
+  if (value === 'true' || value === 1) return true
+  if (value === 'false' || value === 0 || value === null) return false
+  return true
+}
+
 function scopeLabel(tag: ScriptTag): string {
   const scope = String(tag.scope ?? '')
   const targetPaths = Array.isArray(tag.targetPaths) ? tag.targetPaths : []
@@ -53,21 +61,41 @@ function scopeLabel(tag: ScriptTag): string {
 export function ScriptTags({ onNavigate }: ScriptTagsProps) {
   const { data, loading, error, refetch } = useApiData<ScriptTag[]>('/script-tags')
   const [togglingId, setTogglingId] = useState<string | null>(null)
+  const [enabledOverrides, setEnabledOverrides] = useState<Record<string, boolean>>({})
 
-  const tags = data ?? []
+  const tags = useMemo(
+    () =>
+      (data ?? []).map((tag) => ({
+        ...tag,
+        enabled: enabledOverrides[tag.id] ?? normalizeEnabled(tag.enabled),
+      })),
+    [data, enabledOverrides],
+  )
 
-  const toggleEnabled = async (tag: ScriptTag) => {
+  const toggleEnabled = async (tag: ScriptTag, nextEnabled: boolean) => {
+    setEnabledOverrides((prev) => ({ ...prev, [tag.id]: nextEnabled }))
     setTogglingId(tag.id)
-    const res = await cmsApi(`/script-tags/${tag.id}`, {
+
+    const res = await cmsApi<{ enabled?: boolean }>(`/script-tags/${tag.id}`, {
       method: 'PUT',
-      body: JSON.stringify({ enabled: !tag.enabled }),
+      body: JSON.stringify({ enabled: nextEnabled }),
     })
+
     setTogglingId(null)
+
     if (res.error) {
+      setEnabledOverrides((prev) => {
+        const { [tag.id]: _, ...rest } = prev
+        return rest
+      })
       toast.error(res.error)
-    } else {
-      refetch()
+      return
     }
+
+    const saved = normalizeEnabled(res.data?.enabled ?? nextEnabled)
+    setEnabledOverrides((prev) => ({ ...prev, [tag.id]: saved }))
+    refetch()
+    toast.success(saved ? 'Tag enabled' : 'Tag disabled')
   }
 
   if (loading) {
@@ -167,19 +195,12 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
                     {tag.priority}
                   </td>
                   <td className="px-4 py-3 text-center">
-                    <button
-                      type="button"
-                      onClick={() => toggleEnabled(tag)}
+                    <EnabledSwitch
+                      checked={tag.enabled}
                       disabled={togglingId === tag.id}
-                      className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${tag.enabled ? 'bg-primary' : 'bg-switch-background'}`}
-                      aria-pressed={tag.enabled}
-                    >
-                      <span
-                        className={`bg-card absolute top-0.5 block h-5 w-5 rounded-full transition-transform ${
-                          tag.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
-                        }`}
-                      />
-                    </button>
+                      onCheckedChange={(next) => void toggleEnabled(tag, next)}
+                      aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
+                    />
                   </td>
                 </tr>
               ))}

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') {