@prenta/admin 2.6.1 → 2.8.0

package/src/views/settings/AdminThemeCard.tsx

@@ -1,18 +1,44 @@
 'use client'
 
-import { ACCENT_PRESET_LIST } from '@prenta/core/appearance'
-import type { ColorMode, SidebarDensity } from '@prenta/core/appearance'
-import { Check, Monitor, Moon, Sun } from 'lucide-react'
+import {
+  ACCENT_PRESETS,
+  ACCENT_PRESET_LIST,
+  isAccentPreset,
+  toHex,
+  type SidebarDensity,
+} from '@prenta/core/appearance'
+import { Check } from 'lucide-react'
+import { useState } from 'react'
 
+import type { ThemeBase } from '../../components/ThemeProvider.js'
+import { inputVariants } from '../../components/ui/Input.js'
+import { Toggle } from '../../components/ui/Toggle.js'
 import { SettingsSourceBadge } from './components.js'
 import type { UseAppearanceSettings } from './useAppearanceSettings.js'
 
-const COLOR_MODES: { value: ColorMode; label: string; Icon: typeof Sun }[] = [
-  { value: 'light', label: 'Light', Icon: Sun },
-  { value: 'dark', label: 'Dark', Icon: Moon },
-  { value: 'system', label: 'System', Icon: Monitor },
+/** The kit's three bases (prototype/design-system/theme.js `BASES`). */
+const BASES: { id: ThemeBase; name: string; desc: string }[] = [
+  { id: 'porcelain', name: 'Porcelain', desc: 'Cool neutral light' },
+  { id: 'linen', name: 'Linen', desc: 'Warm neutral light' },
+  { id: 'graphite', name: 'Graphite', desc: 'Neutral dark' },
 ]
 
+const DEFAULT_ACCENT = ACCENT_PRESET_LIST[0]!
+
+/** A typed or picked hex that equals a preset swatch is stored as that preset. */
+function accentFromHex(hex: string): string {
+  return ACCENT_PRESET_LIST.find((p) => p.swatch.toLowerCase() === hex)?.name ?? hex
+}
+
+/**
+ * Rainbow behind the custom-color swatch, built from the preset picks so it
+ * stays tied to the palette instead of carrying its own hex values.
+ */
+const CUSTOM_SWATCH_BG = `conic-gradient(from 0deg, ${[
+  ...[2, 3, 1, 0, 4].map((i) => ACCENT_PRESET_LIST[i]!.swatch),
+  ACCENT_PRESET_LIST[2]!.swatch,
+].join(', ')})`
+
 const DENSITIES: { value: SidebarDensity; label: string }[] = [
   { value: 'default', label: 'Default' },
   { value: 'compact', label: 'Compact' },
@@ -27,7 +53,7 @@ function SegmentedGroup<T extends string>({
 }: {
   label: string
   value: T
-  options: { value: T; label: string; Icon?: typeof Sun }[]
+  options: { value: T; label: string }[]
   canEdit: boolean
   onChange: (v: T) => void
 }) {
@@ -37,7 +63,7 @@ function SegmentedGroup<T extends string>({
       aria-label={label}
       className="border-border bg-muted inline-flex flex-wrap rounded-md border p-0.5"
     >
-      {options.map(({ value: v, label: text, Icon }) => {
+      {options.map(({ value: v, label: text }) => {
         const active = value === v
         return (
           <button
@@ -53,7 +79,6 @@ function SegmentedGroup<T extends string>({
                 : 'text-muted-foreground hover:text-foreground'
             }`}
           >
-            {Icon && <Icon size={14} aria-hidden="true" />}
             {text}
           </button>
         )
@@ -62,7 +87,86 @@ function SegmentedGroup<T extends string>({
   )
 }
 
+/**
+ * A base card. The preview paints with that base's real tokens
+ * (`.prenta-base-preview[data-base]` in prenta-tokens.css) and the picked
+ * accent, so it can't drift from what the admin renders.
+ */
+function BaseCard({
+  base,
+  checked,
+  disabled,
+  onPick,
+}: {
+  base: (typeof BASES)[number]
+  checked: boolean
+  disabled: boolean
+  onPick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={onPick}
+      className={`bg-card focus-visible:shadow-ring flex flex-col overflow-hidden rounded-[11px] border-[1.5px] text-left transition-colors duration-[var(--mo-fast)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+        checked ? 'border-acc shadow-[0_0_0_3px_var(--acc-l)]' : 'border-bdr hover:border-faint'
+      }`}
+    >
+      <div aria-hidden="true" className="prenta-base-preview w-full" data-base={base.id}>
+        <div className="border-bdr bg-bg flex h-[92px] gap-[7px] border-b p-[9px]">
+          <div className="border-bdr bg-card rounded-5 flex w-[30%] flex-col gap-[5px] border p-1.5">
+            <i className="bg-acc block h-[5px] rounded-[3px]" />
+            <i className="bg-bdr block h-[5px] rounded-[3px]" />
+            <i className="bg-bdr block h-[5px] rounded-[3px]" />
+          </div>
+          <div className="flex flex-1">
+            <div className="border-bdr bg-card rounded-5 flex flex-1 flex-col gap-1.5 border p-2">
+              <i className="bg-txt block h-[5px] w-[46%] rounded-[3px]" />
+              <i className="bg-bdr block h-[5px] w-[78%] rounded-[3px]" />
+              <span className="bg-acc rounded-4 mt-auto h-3 w-[38px]" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="relative flex items-baseline gap-2 px-3 py-2.5">
+        <span className="text-body text-txt font-semibold">{base.name}</span>
+        <span className="text-hint text-sub">{base.desc}</span>
+        {checked && (
+          <span className="bg-acc text-acc-on absolute top-[9px] right-2.5 flex h-5 w-5 items-center justify-center rounded-full">
+            <Check size={13} aria-hidden="true" />
+          </span>
+        )}
+      </div>
+    </button>
+  )
+}
+
 export function AdminThemeCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit: boolean }) {
+  const { colorMode, lightBase, accent } = s.appearance
+  const matchSystem = colorMode === 'system'
+  const current: ThemeBase = colorMode === 'dark' ? 'graphite' : lightBase
+  const accentEditable = canEdit && s.sources.accent?.editable !== false
+
+  // Legacy names (`purple`, `blue`, …) are stored aliases of a picker preset.
+  const preset = isAccentPreset(accent)
+    ? ACCENT_PRESET_LIST.find((p) => p.swatch === ACCENT_PRESETS[accent].swatch)
+    : undefined
+  const accentHex = preset?.swatch ?? toHex(accent) ?? DEFAULT_ACCENT.swatch
+  // What the hex field shows while a value is half-typed; null shows the accent.
+  const [hexDraft, setHexDraft] = useState<string | null>(null)
+
+  const onHex = (raw: string) => {
+    const v = raw.startsWith('#') ? raw : `#${raw}`
+    if (/^#[0-9a-f]{6}$/i.test(v)) {
+      setHexDraft(null)
+      s.setAccent(accentFromHex(v.toLowerCase()))
+    } else {
+      setHexDraft(v)
+    }
+  }
+
   return (
     <section className="border-border bg-card rounded-lg border p-6">
       <header className="mb-4">
@@ -75,61 +179,150 @@ export function AdminThemeCard({ s, canEdit }: { s: UseAppearanceSettings; canEd
       <div className="space-y-5">
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <span className="text-foreground text-base font-medium">Color mode</span>
+            <span id="admin-theme-base" className="text-sm2 text-txt font-semibold">
+              Base theme
+            </span>
             <SettingsSourceBadge meta={s.sources.colorMode} />
           </div>
-          <SegmentedGroup
-            label="Color mode"
-            value={s.appearance.colorMode}
-            options={COLOR_MODES}
-            canEdit={canEdit}
-            onChange={s.setColorMode}
+          <div
+            role="radiogroup"
+            aria-labelledby="admin-theme-base"
+            className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3"
+          >
+            {BASES.map((base) => (
+              <BaseCard
+                key={base.id}
+                base={base}
+                checked={!matchSystem && current === base.id}
+                disabled={!canEdit}
+                onPick={() => s.setBase(base.id)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-5">
+          <div>
+            <div id="admin-theme-system" className="text-body text-txt font-semibold">
+              Match operating system
+            </div>
+            <div id="admin-theme-system-hint" className="text-hint text-sub mt-[3px]">
+              Uses {lightBase === 'linen' ? 'Linen' : 'Porcelain'} by day and Graphite when your OS
+              is in dark mode.
+            </div>
+          </div>
+          <Toggle
+            checked={matchSystem}
+            onCheckedChange={s.setMatchSystem}
+            disabled={!canEdit}
+            aria-labelledby="admin-theme-system"
+            aria-describedby="admin-theme-system-hint"
           />
         </div>
 
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <span className="text-foreground text-base font-medium">Accent color</span>
+            <span id="admin-theme-accent" className="text-sm2 text-txt font-semibold">
+              Accent color
+            </span>
             <SettingsSourceBadge meta={s.sources.accent} />
           </div>
           <div
             role="radiogroup"
-            aria-label="Accent color"
+            aria-labelledby="admin-theme-accent"
             className="flex flex-wrap items-center gap-3"
           >
-            {ACCENT_PRESET_LIST.map((preset) => {
-              const active = s.appearance.accent === preset.name
-              const editable = s.sources.accent?.editable !== false
+            {ACCENT_PRESET_LIST.map((p) => {
+              const active = preset === p
               return (
                 <button
-                  key={preset.name}
+                  key={p.name}
                   type="button"
                   role="radio"
                   aria-checked={active}
-                  aria-label={preset.label}
-                  title={preset.label}
-                  disabled={!canEdit || !editable}
-                  onClick={() => s.setAccent(preset.name)}
-                  className={`focus-visible:ring-ring relative flex h-9 w-9 items-center justify-center rounded-full transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
-                    active ? 'ring-foreground ring-2 ring-offset-2' : ''
+                  aria-label={p.label}
+                  title={p.label}
+                  disabled={!accentEditable}
+                  onClick={() => s.setAccent(p.name)}
+                  className={`border-card text-acc-on focus-visible:shadow-ring relative flex h-[30px] w-[30px] items-center justify-center rounded-full border-2 transition-transform hover:scale-110 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+                    active
+                      ? 'shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--txt)]'
+                      : 'shadow-[0_0_0_1px_var(--bdr)]'
                   }`}
-                  style={{ backgroundColor: preset.swatch }}
+                  style={{ backgroundColor: p.swatch }}
                 >
-                  {active && <Check size={16} className="text-white" aria-hidden="true" />}
+                  {active && <Check size={15} className="text-white" aria-hidden="true" />}
                 </button>
               )
             })}
+            <label
+              title="Custom color"
+              className={`border-card has-[:focus-visible]:shadow-ring relative flex h-[30px] w-[30px] cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 transition-transform hover:scale-110 ${
+                preset
+                  ? 'shadow-[0_0_0_1px_var(--bdr)]'
+                  : 'shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--txt)]'
+              } ${accentEditable ? '' : 'pointer-events-none opacity-50'}`}
+              style={{ background: preset ? CUSTOM_SWATCH_BG : accentHex }}
+            >
+              <input
+                type="color"
+                aria-label="Custom accent"
+                value={toHex(accentHex)!}
+                disabled={!accentEditable}
+                onChange={(e) => s.setAccent(accentFromHex(e.target.value.toLowerCase()))}
+                className="absolute inset-0 h-full w-full cursor-pointer border-0 p-0 opacity-0"
+              />
+              {preset ? (
+                <span
+                  aria-hidden="true"
+                  className="pointer-events-none text-[15px] font-bold text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.35)]"
+                >
+                  +
+                </span>
+              ) : (
+                <Check size={15} className="pointer-events-none text-white" aria-hidden="true" />
+              )}
+            </label>
             {/* Text label so accent is not communicated by color alone. */}
-            <span className="text-muted-foreground text-sm">
-              {ACCENT_PRESET_LIST.find((p) => p.name === s.appearance.accent)?.label ??
-                s.appearance.accent}
+            <span className="text-body text-txt ml-1 font-semibold">
+              {preset?.label ?? 'Custom'}
             </span>
           </div>
+          <div className="mt-3 flex items-center gap-2">
+            <span
+              aria-hidden="true"
+              className="rounded-5 h-[18px] w-[18px] shrink-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+              style={{ background: accentHex }}
+            />
+            <input
+              aria-label="Accent hex value"
+              value={(hexDraft ?? accentHex).toUpperCase()}
+              spellCheck={false}
+              maxLength={7}
+              disabled={!accentEditable}
+              onChange={(e) => onHex(e.target.value)}
+              onBlur={() => setHexDraft(null)}
+              className={`${inputVariants({ size: 'sm' })} max-w-[120px] font-mono uppercase`}
+            />
+            {preset !== DEFAULT_ACCENT && accentEditable && (
+              <button
+                type="button"
+                onClick={() => s.setAccent(DEFAULT_ACCENT.name)}
+                className="text-sm2 text-sub hover:bg-acc-l hover:text-acc rounded-7 px-2.5 py-1.5 whitespace-nowrap transition-colors"
+              >
+                Reset to Cobalt
+              </button>
+            )}
+          </div>
+          <p className="text-hint text-faint mt-2 leading-[1.45]">
+            Tints, focus rings and the dark-mode variant are derived automatically. Pick a mid-tone
+            so white button text stays legible.
+          </p>
         </div>
 
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <span className="text-foreground text-base font-medium">Sidebar density</span>
+            <span className="text-sm2 text-txt font-semibold">Sidebar density</span>
           </div>
           <SegmentedGroup
             label="Sidebar density"

package/src/views/settings/AppearanceTab.tsx

@@ -6,7 +6,8 @@ import { AdminThemeCard } from './AdminThemeCard.js'
 import { SiteThemeCard } from './SiteThemeCard.js'
 import { BrandPreviewCard } from './BrandPreviewCard.js'
 import { BrandingCard } from './BrandingCard.js'
-import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsValidationSummary, useSavedToast } from './components.js'
 import { TypographyMotionCard } from './TypographyMotionCard.js'
 import { useAppearanceSettings } from './useAppearanceSettings.js'
 
@@ -23,6 +24,7 @@ function CardSkeleton() {
 export function AppearanceTab({ role, config }: AppearanceTabProps) {
   const canEdit = role === 'ADMIN'
   const s = useAppearanceSettings(canEdit, config)
+  useSavedToast(s.saveState)
 
   if (s.loading) {
     return (
@@ -70,13 +72,15 @@ export function AppearanceTab({ role, config }: AppearanceTabProps) {
       <TypographyMotionCard s={s} canEdit={canEdit} />
       <BrandPreviewCard s={s} />
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={s.dirty}
-        canEdit={canEdit}
-        hasErrors={s.issues.some((i) => i.severity === 'error')}
-        saveState={s.saveState}
+        saving={s.saveState === 'saving'}
+        saveDisabled={!canEdit || s.issues.some((i) => i.severity === 'error')}
         onSave={s.save}
-        onReset={s.reset}
+        onDiscard={s.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/BrandPreviewCard.tsx

@@ -66,7 +66,7 @@ export function BrandPreviewCard({ s }: { s: UseAppearanceSettings }) {
           </p>
         </div>
         {s.dirty && (
-          <span className="text-warning bg-warning/10 border-warning/30 rounded-md border px-2 py-0.5 text-xs">
+          <span className="text-warning bg-warn-l border-warning/30 rounded-md border px-2 py-0.5 text-xs">
             Unsaved
           </span>
         )}

package/src/views/settings/BrandVoiceCard.tsx

@@ -344,7 +344,7 @@ export function BrandVoiceCard({
         {aiReadiness && !aiReadiness.ready && aiReadiness.message && (
           <div
             role="status"
-            className="border-warning/40 bg-warning/10 text-foreground flex items-start gap-3 rounded-lg border p-4 text-sm"
+            className="border-warning/40 bg-warn-l text-foreground flex items-start gap-3 rounded-lg border p-4 text-sm"
           >
             <AlertTriangle size={16} className="text-warning mt-0.5 shrink-0" aria-hidden="true" />
             <p>{aiReadiness.message}</p>

package/src/views/settings/EmailSettingsTab.tsx

@@ -3,7 +3,8 @@
 import { AlertTriangle, CheckCircle2, Info, KeyRound, Loader2, Send } from 'lucide-react'
 import { useId } from 'react'
 
-import { SettingsCard, SettingsSaveBar, SettingsToggleRow } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsCard, SettingsToggleRow, useSavedToast } from './components.js'
 import {
   EMAIL_PROVIDER_OPTIONS,
   useEmailSettings,
@@ -104,7 +105,7 @@ function Notice({
 }) {
   const toneClass =
     tone === 'warning'
-      ? 'border-warning/30 bg-warning/10 text-warning'
+      ? 'border-warning/30 bg-warn-l text-warning'
       : tone === 'success'
         ? 'border-success/30 bg-success/10 text-success'
         : tone === 'error'
@@ -280,6 +281,7 @@ function ProviderFields({ s, canEdit }: { s: UseEmailSettings; canEdit: boolean
 export function EmailSettingsTab({ role }: { role?: string }) {
   const canEdit = String(role ?? '').toUpperCase() === 'ADMIN'
   const s = useEmailSettings(canEdit)
+  useSavedToast(s.saveState)
   const providerGroupId = useId()
 
   if (s.loading) {
@@ -423,13 +425,15 @@ export function EmailSettingsTab({ role }: { role?: string }) {
         )}
       </SettingsCard>
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={s.dirty}
-        canEdit={canEdit}
-        hasErrors={false}
-        saveState={s.saveState}
+        saving={s.saveState === 'saving'}
+        saveDisabled={!canEdit}
         onSave={() => void s.save()}
-        onReset={s.reset}
+        onDiscard={s.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/GeneralSettingsTab.tsx

@@ -2,7 +2,8 @@
 
 import { AlertTriangle, Info } from 'lucide-react'
 import { useGeneralSettings } from './useGeneralSettings.js'
-import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsValidationSummary, useSavedToast } from './components.js'
 import { SiteIndexStatusCard } from './SiteIndexStatusCard.js'
 import { SiteInformationCard } from './SiteInformationCard.js'
 import { LanguageRegionCard } from './LanguageRegionCard.js'
@@ -17,6 +18,7 @@ export interface GeneralSettingsTabProps {
 export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps) {
   const canEdit = role === 'ADMIN'
   const settings = useGeneralSettings(canEdit)
+  useSavedToast(settings.saveState)
 
   const runAudit = () => onNavigate?.('/seo?tab=audit')
 
@@ -113,13 +115,15 @@ export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps
         </div>
       )}
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={settings.dirty}
-        canEdit={canEdit}
-        hasErrors={settings.hasErrors}
-        saveState={settings.saveState}
+        saving={settings.saveState === 'saving'}
+        saveDisabled={!canEdit || settings.hasErrors}
         onSave={settings.save}
-        onReset={settings.reset}
+        onDiscard={settings.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/ProviderConnectionCard.tsx

@@ -38,7 +38,7 @@ function StatusPill({ status }: { status: AiConnectionStatus }) {
       : meta.tone === 'error'
         ? 'border-destructive/30 bg-destructive/10 text-destructive'
         : meta.tone === 'warn'
-          ? 'border-warning/30 bg-warning/10 text-warning'
+          ? 'border-warning/30 bg-warn-l text-warning'
           : 'border-border bg-muted text-muted-foreground'
   return (
     <span

package/src/views/settings/SearchDataCard.tsx

@@ -376,7 +376,7 @@ export function SearchDataCard({ canEdit }: { canEdit: boolean }) {
               className={
                 status.syncStatus.state === 'error'
                   ? 'border-destructive/30 bg-destructive/10 text-destructive flex items-start gap-2 rounded-md border p-3'
-                  : 'border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-md border p-3'
+                  : 'border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-md border p-3'
               }
             >
               <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" />

package/src/views/settings/SecurityStatusCard.tsx

@@ -15,7 +15,7 @@ const LEVEL_STYLES: Record<
     word: 'Secure',
   },
   needs_attention: {
-    pill: 'bg-warning/15 text-warning border-warning/30',
+    pill: 'bg-warn-l text-warning border-warning/30',
     Icon: ShieldAlert,
     word: 'Needs attention',
   },
@@ -29,7 +29,7 @@ const LEVEL_STYLES: Record<
 
 const SEVERITY_STYLES: Record<SecurityWarning['severity'], string> = {
   critical: 'border-destructive/30 bg-destructive/10 text-destructive',
-  warning: 'border-warning/30 bg-warning/10 text-warning',
+  warning: 'border-warning/30 bg-warn-l text-warning',
   info: 'border-border bg-muted text-muted-foreground',
 }
 

package/src/views/settings/SecurityTab.tsx

@@ -3,10 +3,11 @@
 import { useEffect } from 'react'
 import { Loader2, ShieldAlert } from 'lucide-react'
 import { parseRouteQuery } from '../../router/index.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
 import {
   ConfirmDangerousSettingDialog,
-  SettingsSaveBar,
   SettingsValidationSummary,
+  useSavedToast,
 } from './components.js'
 import { AccessProtectionCard } from './AccessProtectionCard.js'
 import { AuthMfaCard } from './AuthMfaCard.js'
@@ -56,6 +57,7 @@ export function SecurityTab({
     revokeState,
     revokeAllOtherSessions,
   } = useSecuritySettings(canEdit)
+  useSavedToast(saveState)
 
   // Deep-link support: /settings?tab=security&section=sessions|ip-allowlist|audit
   useEffect(() => {
@@ -180,13 +182,15 @@ export function SecurityTab({
         onCancel={dismissLockoutPrompt}
       />
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={dirty}
-        canEdit={canEdit}
-        hasErrors={hasErrors}
-        saveState={saveState}
+        saving={saveState === 'saving'}
+        saveDisabled={!canEdit || hasErrors}
         onSave={() => void save()}
-        onReset={reset}
+        onDiscard={reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/SeoAutopilotCard.tsx

@@ -516,7 +516,7 @@ export function SeoAutopilotCard({
 
         {paused ? (
           <section
-            className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-3"
+            className="border-warning/30 bg-warn-l flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-3"
             aria-label="Autopilot is paused"
           >
             <p className="text-foreground flex items-start gap-2 text-sm">
@@ -725,7 +725,7 @@ export function SeoAutopilotCard({
 
         {vetoed.length > 0 ? (
           <section
-            className="border-warning/30 bg-warning/10 flex items-start gap-2 rounded-lg border px-4 py-3 text-sm"
+            className="border-warning/30 bg-warn-l flex items-start gap-2 rounded-lg border px-4 py-3 text-sm"
             aria-label="Governance warning"
           >
             <AlertTriangle size={16} className="text-warning mt-0.5 shrink-0" aria-hidden="true" />

package/src/views/settings/SeoSettingsTab.tsx

@@ -23,11 +23,12 @@ import { SeoGeoSettingsCard } from './SeoGeoSettingsCard.js'
 import {
   ConfirmDangerousSettingDialog,
   SettingsCard,
-  SettingsSaveBar,
   SettingsSourceBadge,
   SettingsToggleRow,
   SettingsValidationSummary,
+  useSavedToast,
 } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
 import {
   META_DESCRIPTION_MAX,
   META_DESCRIPTION_MIN,
@@ -82,6 +83,7 @@ export interface SeoSettingsTabProps {
 export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
   const canEdit = role === 'ADMIN'
   const seo = useSeoSettings(canEdit)
+  useSavedToast(seo.saveState)
 
   if (seo.loading) {
     return (
@@ -133,7 +135,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       {!seo.siteUrl ? (
         <div
           role="status"
-          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+          className="border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
         >
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
           Set the public site URL in Settings → General. View site and Share stay disabled until it
@@ -142,7 +144,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       ) : siteUrlMatchesAdminOrigin(seo.siteUrl) ? (
         <div
           role="status"
-          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+          className="border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
         >
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
           This origin is the admin, not the public site. Set the public site URL to the live apex —
@@ -193,13 +195,15 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
         </div>
       )}
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={seo.dirty}
-        canEdit={canEdit}
-        hasErrors={seo.hasErrors}
-        saveState={seo.saveState}
+        saving={seo.saveState === 'saving'}
+        saveDisabled={!canEdit || seo.hasErrors}
         onSave={seo.save}
-        onReset={seo.reset}
+        onDiscard={seo.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )
@@ -729,7 +733,7 @@ function SitemapDefaultsCard({
       description="Control XML sitemap generation and whether search engines are pinged on publish."
     >
       {!siteUrl && (
-        <div className="border-warning/30 bg-warning/10 text-warning mb-4 flex items-start gap-2 rounded-md border p-4 text-sm">
+        <div className="border-warning/30 bg-warn-l text-warning mb-4 flex items-start gap-2 rounded-md border p-4 text-sm">
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
           Site URL is not set — sitemap URLs may be incorrect. Set it in Settings → General.
         </div>