@prenta/admin 2.6.1 → 2.8.0

package/src/views/settings/SiteIndexStatusCard.tsx

@@ -27,7 +27,7 @@ const SEVERITY_STYLES: Record<SiteIndexStatus['severity'], { pill: string; icon:
     icon: <CheckCircle2 size={14} aria-hidden="true" />,
   },
   warning: {
-    pill: 'bg-warning/15 text-warning border-warning/30',
+    pill: 'bg-warn-l text-warning border-warning/30',
     icon: <AlertTriangle size={14} aria-hidden="true" />,
   },
   danger: {

package/src/views/settings/SiteThemeCard.tsx

@@ -5,7 +5,7 @@ import type { PublicTheme } from '@prenta/core/appearance'
 import type { UseAppearanceSettings } from './useAppearanceSettings.js'
 
 const FIELDS: { key: keyof PublicTheme; label: string; hint: string }[] = [
-  { key: 'accent', label: 'Accent', hint: 'Buttons and highlights. Example: #7c3aed' },
+  { key: 'accent', label: 'Accent', hint: 'Buttons and highlights. Example: #2f5bea' },
   { key: 'background', label: 'Background', hint: 'Page surface. Example: #ffffff' },
   { key: 'foreground', label: 'Text', hint: 'Body text. Example: #18181b' },
   { key: 'muted', label: 'Muted text', hint: 'Secondary text. Example: #71717a' },

package/src/views/settings/UpdatesTab.tsx

@@ -17,7 +17,8 @@ import {
 } from 'lucide-react'
 import { useState, type ReactNode } from 'react'
 
-import { SettingsCard, SettingsControlRow, SettingsSaveBar } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsCard, SettingsControlRow } from './components.js'
 import {
   useUpdates,
   type UpdateChangeType,
@@ -30,7 +31,7 @@ const SEVERITY: Record<
   { banner: string; text: string; label: string }
 > = {
   patch: { banner: 'border-brand/30 bg-brand/10', text: 'text-brand', label: 'Patch' },
-  minor: { banner: 'border-warning/30 bg-warning/10', text: 'text-warning', label: 'Minor' },
+  minor: { banner: 'border-warning/30 bg-warn-l', text: 'text-warning', label: 'Minor' },
   major: {
     banner: 'border-destructive/30 bg-destructive/10',
     text: 'text-destructive',
@@ -58,7 +59,7 @@ const CHANGE_TYPE: Record<UpdateChangeType, { label: string; className: string }
     label: 'Security',
     className: 'border-destructive/40 bg-destructive/15 text-destructive',
   },
-  deprecation: { label: 'Deprecated', className: 'border-warning/30 bg-warning/10 text-warning' },
+  deprecation: { label: 'Deprecated', className: 'border-warning/30 bg-warn-l text-warning' },
 }
 
 const ghInputClass =
@@ -107,7 +108,7 @@ function Notice({
   const toneClass =
     tone === 'destructive'
       ? 'border-destructive/30 bg-destructive/10 text-destructive'
-      : 'border-warning/30 bg-warning/10 text-warning'
+      : 'border-warning/30 bg-warn-l text-warning'
   return (
     <div className={`mt-3 flex items-start gap-2.5 rounded-md border p-4 ${toneClass}`}>
       <span className="mt-0.5 shrink-0" aria-hidden="true">
@@ -418,108 +419,113 @@ export function UpdatesTab({ role }: UpdatesTabProps) {
 
       {/* GitHub integration — admins only */}
       {canManage && (
-        <SettingsCard
-          title="GitHub Integration"
-          description="Connect your repository to enable one-click update PRs. Credentials are encrypted at rest (AES-256-GCM)."
-        >
-          <div className="space-y-4">
-            <SettingsControlRow
-              label="Repository"
-              htmlFor="updates-gh-repo"
-              align="start"
-              description={
-                <>
-                  e.g.{' '}
-                  <code className="bg-muted rounded px-1 font-mono">
-                    actuate-media/my-client-site
-                  </code>
-                </>
-              }
-              control={
-                <div className="w-72 max-w-full">
-                  <input
-                    id="updates-gh-repo"
-                    type="text"
-                    value={form.githubRepo}
-                    onChange={(e) => setField('githubRepo', e.target.value)}
-                    placeholder="owner/repo"
-                    aria-invalid={Boolean(repoError)}
-                    aria-describedby={repoError ? 'updates-gh-repo-error' : undefined}
-                    className={ghInputClass}
-                  />
-                  {repoError && (
-                    <p id="updates-gh-repo-error" className="text-destructive mt-1 text-xs">
-                      {repoError}
-                    </p>
-                  )}
-                </div>
-              }
-            />
-
-            <SettingsControlRow
-              label={
-                <span className="inline-flex items-center gap-2">
-                  GitHub token
-                  {info?.hasGithubToken && !form.githubToken && (
-                    <span className="text-success text-xs font-normal">Saved</span>
-                  )}
-                </span>
-              }
-              htmlFor="updates-gh-token"
-              align="start"
-              description={
-                <>
-                  Needs <code className="bg-muted rounded px-1 font-mono">repo</code> scope. Create
-                  one at{' '}
-                  <a
-                    href="https://github.com/settings/tokens"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-brand hover:underline"
-                  >
-                    github.com/settings/tokens
-                  </a>
-                  .
-                </>
-              }
-              control={
-                <div className="relative w-72 max-w-full">
-                  <input
-                    id="updates-gh-token"
-                    type={showToken ? 'text' : 'password'}
-                    value={form.githubToken}
-                    onChange={(e) => setField('githubToken', e.target.value)}
-                    placeholder={
-                      info?.hasGithubToken ? '••••••••••••••••' : 'ghp_… or github_pat_…'
-                    }
-                    className={`${ghInputClass} pr-10`}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowToken((s) => !s)}
-                    aria-label={showToken ? 'Hide token' : 'Show token'}
-                    className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 p-1"
-                  >
-                    {showToken ? (
-                      <EyeOff size={16} aria-hidden="true" />
-                    ) : (
-                      <Eye size={16} aria-hidden="true" />
+        <>
+          <SettingsCard
+            title="GitHub Integration"
+            description="Connect your repository to enable one-click update PRs. Credentials are encrypted at rest (AES-256-GCM)."
+          >
+            <div className="space-y-4">
+              <SettingsControlRow
+                label="Repository"
+                htmlFor="updates-gh-repo"
+                align="start"
+                description={
+                  <>
+                    e.g.{' '}
+                    <code className="bg-muted rounded px-1 font-mono">
+                      actuate-media/my-client-site
+                    </code>
+                  </>
+                }
+                control={
+                  <div className="w-72 max-w-full">
+                    <input
+                      id="updates-gh-repo"
+                      type="text"
+                      value={form.githubRepo}
+                      onChange={(e) => setField('githubRepo', e.target.value)}
+                      placeholder="owner/repo"
+                      aria-invalid={Boolean(repoError)}
+                      aria-describedby={repoError ? 'updates-gh-repo-error' : undefined}
+                      className={ghInputClass}
+                    />
+                    {repoError && (
+                      <p id="updates-gh-repo-error" className="text-destructive mt-1 text-xs">
+                        {repoError}
+                      </p>
                     )}
-                  </button>
-                </div>
-              }
-            />
-          </div>
+                  </div>
+                }
+              />
 
-          <SettingsSaveBar
+              <SettingsControlRow
+                label={
+                  <span className="inline-flex items-center gap-2">
+                    GitHub token
+                    {info?.hasGithubToken && !form.githubToken && (
+                      <span className="text-success text-xs font-normal">Saved</span>
+                    )}
+                  </span>
+                }
+                htmlFor="updates-gh-token"
+                align="start"
+                description={
+                  <>
+                    Needs <code className="bg-muted rounded px-1 font-mono">repo</code> scope.
+                    Create one at{' '}
+                    <a
+                      href="https://github.com/settings/tokens"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-brand hover:underline"
+                    >
+                      github.com/settings/tokens
+                    </a>
+                    .
+                  </>
+                }
+                control={
+                  <div className="relative w-72 max-w-full">
+                    <input
+                      id="updates-gh-token"
+                      type={showToken ? 'text' : 'password'}
+                      value={form.githubToken}
+                      onChange={(e) => setField('githubToken', e.target.value)}
+                      placeholder={
+                        info?.hasGithubToken ? '••••••••••••••••' : 'ghp_… or github_pat_…'
+                      }
+                      className={`${ghInputClass} pr-10`}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowToken((s) => !s)}
+                      aria-label={showToken ? 'Hide token' : 'Show token'}
+                      className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 p-1"
+                    >
+                      {showToken ? (
+                        <EyeOff size={16} aria-hidden="true" />
+                      ) : (
+                        <Eye size={16} aria-hidden="true" />
+                      )}
+                    </button>
+                  </div>
+                }
+              />
+            </div>
+          </SettingsCard>
+          {/* Outside the card: its overflow-hidden would stop the bar sticking.
+              useUpdates toasts its own save result, so no useSavedToast here. */}
+          <UnsavedBar
             dirty={dirty}
-            canEdit={canManage}
-            hasErrors={hasErrors}
-            saveState={saveState}
+            saving={saveState === 'saving'}
+            saveDisabled={!canManage || hasErrors}
             onSave={save}
-            onReset={reset}
+            onDiscard={reset}
+            discardLabel="Reset"
+            saveLabel="Save changes"
+            variant="card"
           />
-        </SettingsCard>
+        </>
       )}
 
       {/* Help */}

package/src/views/settings/components.tsx

@@ -1,9 +1,16 @@
 'use client'
 
 import * as Dialog from '@radix-ui/react-dialog'
-import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
-import { useId, type ReactNode } from 'react'
-import { Card, CardContent, CardDescription, CardHeader } from '../../components/ui/Card.js'
+import { AlertTriangle, Lock } from 'lucide-react'
+import { useEffect, useId, type ReactNode } from 'react'
+import { toast } from 'sonner'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/Card.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
@@ -14,8 +21,8 @@ import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettin
  * slot. This is the single source of truth for the Settings design language —
  * every tab's sections render through it so spacing, padding, typography, and
  * the title/description rhythm stay identical across General, Appearance,
- * Security, SEO, AI, and beyond. Match the Appearance tab exactly: `p-6`,
- * `text-lg` medium title, `text-sm` muted description.
+ * Security, SEO, AI, and beyond. Chrome comes from the shared `Card`
+ * primitives (kit `.ap-card` / `.ap-ch`).
  */
 export function SettingsCard({
   title,
@@ -46,14 +53,11 @@ export function SettingsCard({
       role="region"
       className={className}
     >
-      <CardHeader className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <Heading
-            id={headingId}
-            className="text-[length:var(--fs-card)] font-semibold text-[var(--txt)]"
-          >
+      <CardHeader>
+        <div className="min-w-0 flex-1">
+          <CardTitle as={Heading} id={headingId}>
             {title}
-          </Heading>
+          </CardTitle>
           {description && <CardDescription>{description}</CardDescription>}
         </div>
         {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
@@ -212,7 +216,7 @@ export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[
       className={`flex items-start gap-3 rounded-lg border p-4 text-sm ${
         isError
           ? 'border-destructive/30 bg-destructive/10 text-destructive'
-          : 'border-warning/30 bg-warning/10 text-warning'
+          : 'border-warning/30 bg-warn-l text-warning'
       }`}
     >
       <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
@@ -225,54 +229,14 @@ export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[
   )
 }
 
-/** 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>
-      )}
-      {dirty && !saving && (
-        <span className="text-muted-foreground text-sm" aria-live="polite">
-          Unsaved changes
-        </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>
-  )
+/**
+ * Confirms a finished save. The tabs' `UnsavedBar` renders only while the form
+ * is dirty, so it is already gone when the save lands; the toast says it worked.
+ */
+export function useSavedToast(saveState: 'idle' | 'saving' | 'success' | 'error') {
+  useEffect(() => {
+    if (saveState === 'success') toast.success('Saved')
+  }, [saveState])
 }
 
 /** Confirmation dialog for dangerous indexing changes. */
@@ -297,7 +261,7 @@ export function ConfirmDangerousSettingDialog({
         <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">
+            <span className="bg-warn-l 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>

package/src/views/settings/useAppearanceSettings.ts

@@ -13,6 +13,7 @@ import {
   type BrandAssetRole,
   type BrandSettings,
   type ColorMode,
+  type LightBase,
   type LogoShape,
   type ResolvedAdminBrand,
   type PublicTheme,
@@ -20,8 +21,14 @@ import {
   type SidebarDensity,
 } from '@prenta/core/appearance'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
 
-import { useTheme } from '../../components/ThemeProvider.js'
+import {
+  useTheme,
+  usableAccentOverride,
+  type AppearanceSnapshot,
+  type ThemeBase,
+} from '../../components/ThemeProvider.js'
 import {
   adminBrandToCache,
   appearanceApiToSnapshot,
@@ -38,6 +45,7 @@ type SaveState = 'idle' | 'saving' | 'success' | 'error'
 /** Theme + typography + motion form (the `appearance` settings blob). */
 interface AppearanceForm {
   colorMode: ColorMode
+  lightBase: LightBase
   accent: string
   density: SidebarDensity
   font: string
@@ -136,6 +144,10 @@ export interface UseAppearanceSettings {
   showAdvanced: boolean
   setShowAdvanced: (v: boolean) => void
   setColorMode: (v: ColorMode) => void
+  /** Pick Porcelain, Linen or Graphite. Turns "Match operating system" off. */
+  setBase: (v: ThemeBase) => void
+  /** Follow the OS between the light base and Graphite. */
+  setMatchSystem: (on: boolean) => void
   setAccent: (v: string) => void
   setDensity: (v: SidebarDensity) => void
   setFont: (v: string) => void
@@ -163,9 +175,10 @@ const EMPTY_PUBLIC_THEME: Required<PublicTheme> = {
 
 const DEFAULT_FORM: AppearanceForm = {
   colorMode: 'system',
-  accent: 'purple',
+  lightBase: 'porcelain',
+  accent: 'cobalt',
   density: 'default',
-  font: 'System UI',
+  font: 'DM Sans',
   reduceMotion: false,
   publicTheme: EMPTY_PUBLIC_THEME,
 }
@@ -176,6 +189,24 @@ function snapshot(a: AppearanceForm, b: BrandForm): string {
   return JSON.stringify({ a, b })
 }
 
+/** What the ThemeProvider shows for a form state. */
+function themeSnapshot(
+  a: AppearanceForm,
+  b: BrandForm,
+  assetMap: Record<string, AssetPreview>,
+  siteTitle: string | null,
+): AppearanceSnapshot {
+  return {
+    theme: a.colorMode,
+    lightBase: a.lightBase,
+    accent: a.accent,
+    density: a.density,
+    font: a.font,
+    reduceMotion: a.reduceMotion,
+    adminBrand: adminBrandToCache(b as BrandSettings, assetMap, siteTitle),
+  }
+}
+
 /** 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') {
@@ -216,7 +247,7 @@ export function useAppearanceSettings(
   canEdit: boolean,
   config?: Record<string, unknown>,
 ): UseAppearanceSettings {
-  const { applyAppearance, setAdminBrand } = useTheme()
+  const { applyAppearance, setAdminBrand, resolvedTheme } = useTheme()
 
   const [loading, setLoading] = useState(true)
   const [loadError, setLoadError] = useState<string | null>(null)
@@ -229,6 +260,13 @@ export function useAppearanceSettings(
   const [showAdvanced, setShowAdvanced] = useState(false)
 
   const baselineRef = useRef<string>(snapshot(DEFAULT_FORM, DEFAULT_BRAND_FORM))
+  // `load` must run on mount and on an explicit reload only. Reading the
+  // provider's function through a ref keeps a new identity from refetching
+  // and overwriting unsaved edits.
+  const applyRef = useRef(applyAppearance)
+  useEffect(() => {
+    applyRef.current = applyAppearance
+  }, [applyAppearance])
   const siteTitleRef = useRef<string | null>(null)
 
   // Config-managed source detection (admin branding configured in prenta.config.ts).
@@ -237,7 +275,9 @@ export function useAppearanceSettings(
     | undefined
   const sources = useMemo<Record<string, SettingsSourceMetadata>>(() => {
     const out: Record<string, SettingsSourceMetadata> = {}
-    if (branding?.primaryColor) {
+    // Only a config color the ThemeProvider can actually apply locks the
+    // picker; otherwise it is ignored there (with a warning) and stays editable.
+    if (usableAccentOverride(branding?.primaryColor)) {
       out.accent = {
         source: 'config',
         editable: false,
@@ -256,14 +296,7 @@ export function useAppearanceSettings(
 
   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: adminBrandToCache(b as BrandSettings, assetMap, siteTitleRef.current),
-      })
+      applyAppearance(themeSnapshot(a, b, assetMap, siteTitleRef.current))
     },
     [applyAppearance],
   )
@@ -281,6 +314,7 @@ export function useAppearanceSettings(
     const storedTheme = d.appearance.publicTheme
     const nextAppearance: AppearanceForm = {
       colorMode: d.appearance.adminColorModeDefault,
+      lightBase: d.appearance.adminLightBase === 'linen' ? 'linen' : 'porcelain',
       accent: d.appearance.adminAccentColor,
       density: d.appearance.sidebarDensity,
       font: d.appearance.contentFont,
@@ -295,10 +329,10 @@ export function useAppearanceSettings(
     setAssets(nextAssets)
     if (nextBrand.adminLogoMarkAssetId || nextBrand.publicLogoMarkAssetId) setShowAdvanced(true)
     baselineRef.current = snapshot(nextAppearance, nextBrand)
-    applyAppearance(appearanceApiToSnapshot(d))
+    applyRef.current(appearanceApiToSnapshot(d))
     setSaveState('idle')
     setLoading(false)
-  }, [applyAppearance])
+  }, [])
 
   useEffect(() => {
     void load()
@@ -320,6 +354,23 @@ export function useAppearanceSettings(
     (v: ColorMode) => update({ ...appearance, colorMode: v }, brand, assets),
     [appearance, brand, assets, update],
   )
+  const setBase = useCallback(
+    (v: ThemeBase) =>
+      update(
+        v === 'graphite'
+          ? { ...appearance, colorMode: 'dark' }
+          : { ...appearance, colorMode: 'light', lightBase: v },
+        brand,
+        assets,
+      ),
+    [appearance, brand, assets, update],
+  )
+  // Turning it off keeps whatever is on screen, so nothing jumps.
+  const setMatchSystem = useCallback(
+    (on: boolean) =>
+      update({ ...appearance, colorMode: on ? 'system' : resolvedTheme }, brand, assets),
+    [appearance, brand, assets, update, resolvedTheme],
+  )
   const setAccent = useCallback(
     (v: string) => update({ ...appearance, accent: v }, brand, assets),
     [appearance, brand, assets, update],
@@ -498,29 +549,65 @@ export function useAppearanceSettings(
     }
   }, [brand, assets])
 
-  const dirty = useMemo(
-    () => snapshot(appearance, brand) !== baselineRef.current,
-    [appearance, brand],
-  )
+  // Not memoized on [appearance, brand]: a save moves the baseline (a ref)
+  // without changing either, and the dirty-only save bar must hide then.
+  const dirty = snapshot(appearance, brand) !== baselineRef.current
+
+  // Unsaved picks are only a live preview. Leaving the tab (Radix unmounts it)
+  // or Settings without saving puts the saved look back, cache included.
+  // Leaving while a save is in flight shows what is being saved instead; if
+  // that save then fails, the look goes back to the last saved snapshot.
+  const latestRef = useRef({ appearance, brand, assets })
+  useEffect(() => {
+    latestRef.current = { appearance, brand, assets }
+  }, [appearance, brand, assets])
+  const pendingSaveRef = useRef<string | null>(null)
+  const mountedRef = useRef(true)
+  const applySaved = useCallback((saved: string, assetMap: Record<string, AssetPreview>) => {
+    const { a, b } = JSON.parse(saved) as { a: AppearanceForm; b: BrandForm }
+    applyRef.current(themeSnapshot(a, b, assetMap, siteTitleRef.current))
+  }, [])
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      const { appearance: a, brand: b, assets: assetMap } = latestRef.current
+      const target = pendingSaveRef.current ?? baselineRef.current
+      if (snapshot(a, b) === target) return
+      applySaved(target, assetMap)
+    }
+  }, [applySaved])
 
   const save = useCallback(async () => {
     if (!canEdit) return
     if (issues.some((i) => i.severity === 'error')) return
     setSaveState('saving')
     setSaveError(null)
+    const saving = snapshot(appearance, brand)
+    pendingSaveRef.current = saving
+    const fail = (message: string) => {
+      pendingSaveRef.current = null
+      setSaveState('error')
+      setSaveError(message)
+      if (mountedRef.current) return
+      // The tab is gone, so nothing shows the error and the look shows the
+      // failed picks: put the saved look back and say so.
+      applySaved(baselineRef.current, assets)
+      toast.error(`Admin appearance wasn't saved: ${message}`)
+    }
 
     // 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)
+      fail(current.error)
       return
     }
     const now = new Date().toISOString()
     const brandPayload: BrandSettings = { ...(brand as BrandSettings), updatedAt: now }
     const appearancePayload = {
       adminColorModeDefault: appearance.colorMode,
+      adminLightBase: appearance.lightBase,
       adminAccentColor: appearance.accent,
       sidebarDensity: appearance.density,
       contentFont: appearance.font,
@@ -535,11 +622,11 @@ export function useAppearanceSettings(
     }
     const res = await cmsApi('/globals/settings', { method: 'PUT', body: JSON.stringify(merged) })
     if (res.error) {
-      setSaveState('error')
-      setSaveError(res.error)
+      fail(res.error)
       return
     }
-    baselineRef.current = snapshot(appearance, brand)
+    baselineRef.current = saving
+    pendingSaveRef.current = null
     setAdminBrand(adminBrandToCache(brand as BrandSettings, assets, siteTitleRef.current))
     // Notify live surfaces (browser-tab favicon) to refresh from the saved
     // brand without a full reload.
@@ -547,7 +634,9 @@ export function useAppearanceSettings(
       window.dispatchEvent(new CustomEvent(BRAND_UPDATED_EVENT))
     }
     setSaveState('success')
-  }, [canEdit, issues, appearance, brand, assets, setAdminBrand])
+    // The tab's own "Saved" toast went with it.
+    if (!mountedRef.current) toast.success('Saved')
+  }, [canEdit, issues, appearance, brand, assets, setAdminBrand, applySaved])
 
   const reset = useCallback(() => {
     const base = JSON.parse(baselineRef.current) as { a: AppearanceForm; b: BrandForm }
@@ -570,6 +659,8 @@ export function useAppearanceSettings(
     showAdvanced,
     setShowAdvanced,
     setColorMode,
+    setBase,
+    setMatchSystem,
     setAccent,
     setDensity,
     setFont,