@actuate-media/cms-admin 0.36.0 → 0.36.1

package/src/views/settings/AISettingsTab.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AlertTriangle, Bot, Info, Loader2, Plus } from 'lucide-react'
+import { AlertTriangle, Info, Loader2, Plus } from 'lucide-react'
 import { useId, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import { AiFeaturesCard } from './AiFeaturesCard.js'
@@ -8,7 +8,7 @@ import { BrandVoiceCard } from './BrandVoiceCard.js'
 import { ModelSelector } from './ModelSelector.js'
 import { MonthlyUsageCard } from './MonthlyUsageCard.js'
 import { ProviderConnectionCard } from './ProviderConnectionCard.js'
-import { SettingsSaveBar } from './components.js'
+import { SettingsCard, SettingsSaveBar } from './components.js'
 import {
   useAiSettings,
   type AiProviderKey,
@@ -41,7 +41,7 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
       <div className="space-y-4" aria-busy="true" aria-live="polite">
         <span className="sr-only">Loading AI settings…</span>
         {[0, 1, 2].map((i) => (
-          <div key={i} className="border-border bg-card rounded-lg border p-4">
+          <div key={i} className="border-border bg-card rounded-lg border p-6">
             <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
             <div className="space-y-3">
               <div className="bg-muted h-9 w-full animate-pulse rounded" />
@@ -125,7 +125,6 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
 // ---------------------------------------------------------------------------
 
 function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
-  const headingId = useId()
   const providerSelectId = useId()
   const [refreshing, setRefreshing] = useState(false)
 
@@ -150,21 +149,10 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
   }
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <div className="mb-4 flex items-center gap-2">
-        <span className="bg-brand/10 text-brand flex h-9 w-9 items-center justify-center rounded-lg">
-          <Bot size={18} aria-hidden="true" />
-        </span>
-        <div>
-          <h3 id={headingId} className="text-foreground text-base font-medium">
-            AI Assistant
-          </h3>
-          <p className="text-muted-foreground text-sm">
-            The default provider and model used across AI features.
-          </p>
-        </div>
-      </div>
-
+    <SettingsCard
+      title="AI Assistant"
+      description="The default provider and model used across AI features."
+    >
       {ai.providers.length === 0 ? (
         <div className="border-border bg-muted/40 text-muted-foreground rounded-md border border-dashed p-4 text-sm">
           No AI providers are connected yet. Add one below to enable AI features.
@@ -206,7 +194,7 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
           />
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 
@@ -215,16 +203,14 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
 // ---------------------------------------------------------------------------
 
 function ProviderConnectionsSection({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
-  const headingId = useId()
   const [adding, setAdding] = useState(false)
 
   return (
-    <section aria-labelledby={headingId} className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h3 id={headingId} className="text-foreground text-base font-medium">
-          Provider connections
-        </h3>
-        {canEdit && !adding && (
+    <SettingsCard
+      title="Provider connections"
+      description="Connect Anthropic, OpenAI, xAI, or a custom OpenAI-compatible endpoint."
+      actions={
+        canEdit && !adding ? (
           <button
             type="button"
             onClick={() => setAdding(true)}
@@ -233,57 +219,59 @@ function ProviderConnectionsSection({ ai, canEdit }: { ai: UseAiSettings; canEdi
             <Plus size={14} aria-hidden="true" />
             Add provider
           </button>
+        ) : undefined
+      }
+    >
+      <div className="space-y-3">
+        {adding && (
+          <AddProviderForm
+            ai={ai}
+            onDone={() => setAdding(false)}
+            onCancel={() => setAdding(false)}
+          />
         )}
-      </div>
 
-      {adding && (
-        <AddProviderForm
-          ai={ai}
-          onDone={() => setAdding(false)}
-          onCancel={() => setAdding(false)}
-        />
-      )}
-
-      {ai.providers.map((p) => (
-        <ProviderConnectionCard
-          key={p.id}
-          provider={p}
-          canEdit={canEdit}
-          busy={ai.busyProviderId === p.id}
-          onTest={async () => {
-            const res = await ai.testProvider(p.id)
-            if (!res.ok) toast.error(res.error ?? res.message ?? 'Connection test failed.')
-            else toast.success(res.message ?? 'Connection successful.')
-          }}
-          onSyncModels={async () => {
-            const res = await ai.syncModels(p.id)
-            if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
-            else if (res.fromFallback)
-              toast.warning(res.warning ?? 'Showing the curated model list.')
-            else toast.success('Model list refreshed.')
-          }}
-          onUpdateKey={async (apiKey) => {
-            const res = await ai.updateProvider(p.id, { apiKey })
-            if (!res.ok) toast.error(res.error ?? 'Failed to update key.')
-            else toast.success('API key updated.')
-          }}
-          onUpdateBaseUrl={async (baseUrl) => {
-            const res = await ai.updateProvider(p.id, { baseUrl })
-            if (!res.ok) toast.error(res.error ?? 'Failed to update base URL.')
-            else toast.success('Base URL updated.')
-          }}
-          onDisconnect={async () => {
-            const res = await ai.deleteProvider(p.id)
-            if (!res.ok) toast.error(res.error ?? 'Failed to disconnect.')
-            else toast.success(`${p.displayName} disconnected.`)
-          }}
-        />
-      ))}
+        {ai.providers.map((p) => (
+          <ProviderConnectionCard
+            key={p.id}
+            provider={p}
+            canEdit={canEdit}
+            busy={ai.busyProviderId === p.id}
+            onTest={async () => {
+              const res = await ai.testProvider(p.id)
+              if (!res.ok) toast.error(res.error ?? res.message ?? 'Connection test failed.')
+              else toast.success(res.message ?? 'Connection successful.')
+            }}
+            onSyncModels={async () => {
+              const res = await ai.syncModels(p.id)
+              if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
+              else if (res.fromFallback)
+                toast.warning(res.warning ?? 'Showing the curated model list.')
+              else toast.success('Model list refreshed.')
+            }}
+            onUpdateKey={async (apiKey) => {
+              const res = await ai.updateProvider(p.id, { apiKey })
+              if (!res.ok) toast.error(res.error ?? 'Failed to update key.')
+              else toast.success('API key updated.')
+            }}
+            onUpdateBaseUrl={async (baseUrl) => {
+              const res = await ai.updateProvider(p.id, { baseUrl })
+              if (!res.ok) toast.error(res.error ?? 'Failed to update base URL.')
+              else toast.success('Base URL updated.')
+            }}
+            onDisconnect={async () => {
+              const res = await ai.deleteProvider(p.id)
+              if (!res.ok) toast.error(res.error ?? 'Failed to disconnect.')
+              else toast.success(`${p.displayName} disconnected.`)
+            }}
+          />
+        ))}
 
-      {ai.providers.length === 0 && !adding && (
-        <p className="text-muted-foreground text-sm">No providers connected.</p>
-      )}
-    </section>
+        {ai.providers.length === 0 && !adding && (
+          <p className="text-muted-foreground text-sm">No providers connected.</p>
+        )}
+      </div>
+    </SettingsCard>
   )
 }
 
@@ -332,7 +320,7 @@ function AddProviderForm({
   }
 
   return (
-    <div className="border-border bg-card rounded-lg border p-4">
+    <div className="border-border bg-background rounded-lg border p-4">
       <h4 className="text-foreground mb-3 text-base font-medium">Add a provider</h4>
       <div className="space-y-3">
         <div>

package/src/views/settings/AiFeaturesCard.tsx

@@ -2,7 +2,7 @@
 
 import { AlertTriangle } from 'lucide-react'
 import { useId } from 'react'
-import { SettingsToggleRow } from './components.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
 import { capabilityLabel, effectiveFeatureModel, isModelCompatible } from './featureModel.js'
 import type { AiFeatureView, AiModelView } from './useAiSettings.js'
 
@@ -31,17 +31,11 @@ export function AiFeaturesCard({
   onToggle: (key: string, enabled: boolean) => void
   onSetFeatureModel: (key: string, modelId: string) => void
 }) {
-  const headingId = useId()
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
-        AI Features
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Turn individual AI-powered features on or off, and optionally route each to a specific
-        model.
-      </p>
-
+    <SettingsCard
+      title="AI Features"
+      description="Turn individual AI-powered features on or off, and optionally route each to a specific model."
+    >
       {features.length === 0 ? (
         <p className="text-muted-foreground text-sm">No AI features are available.</p>
       ) : (
@@ -59,7 +53,7 @@ export function AiFeaturesCard({
           ))}
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 

package/src/views/settings/BrandVoiceCard.tsx

@@ -1,8 +1,7 @@
 'use client'
 
-import { Sparkles } from 'lucide-react'
 import { useId } from 'react'
-import { SettingsToggleRow } from './components.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
 import type { BrandVoiceForm } from './useAiSettings.js'
 
 const INPUT_CLASS =
@@ -28,7 +27,6 @@ export function BrandVoiceCard({
   canEdit: boolean
   onChange: (patch: Partial<BrandVoiceForm>) => void
 }) {
-  const headingId = useId()
   const nameId = useId()
   const toneId = useId()
   const audienceId = useId()
@@ -37,21 +35,10 @@ export function BrandVoiceCard({
   const disabled = !canEdit
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <div className="mb-4 flex items-center gap-2">
-        <span className="bg-brand/10 text-brand flex h-9 w-9 items-center justify-center rounded-lg">
-          <Sparkles size={18} aria-hidden="true" />
-        </span>
-        <div>
-          <h3 id={headingId} className="text-foreground text-base font-medium">
-            Brand voice
-          </h3>
-          <p className="text-muted-foreground text-sm">
-            Teach the AI how your brand sounds. Applied to content writing and SEO copy.
-          </p>
-        </div>
-      </div>
-
+    <SettingsCard
+      title="Brand voice"
+      description="Teach the AI how your brand sounds. Applied to content writing and SEO copy."
+    >
       <div className="space-y-4">
         <SettingsToggleRow
           label="Apply brand voice"
@@ -147,6 +134,6 @@ export function BrandVoiceCard({
           </div>
         </div>
       </div>
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/GeneralSettingsTab.tsx

@@ -25,7 +25,7 @@ export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps
       <div className="space-y-4" aria-busy="true" aria-live="polite">
         <span className="sr-only">Loading settings…</span>
         {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="border-border bg-card rounded-lg border p-4">
+          <div key={i} className="border-border bg-card rounded-lg border p-6">
             <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
             <div className="space-y-3">
               <div className="bg-muted h-9 w-full animate-pulse rounded" />

package/src/views/settings/LanguageRegionCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useId, useMemo } from 'react'
+import { SettingsCard } from './components.js'
 import type { GeneralSettingsForm, ValidationIssue } from './useGeneralSettings.js'
 
 const INPUT_CLASS =
@@ -58,13 +59,10 @@ export function LanguageRegionCard({ form, setField, issues, canEdit }: Language
   }, [form.timezone])
 
   return (
-    <section
-      aria-labelledby={`${langId}-heading`}
-      className="border-border bg-card rounded-lg border p-4"
+    <SettingsCard
+      title="Language & Region"
+      description="Default language and timezone applied across the admin and public site."
     >
-      <h3 id={`${langId}-heading`} className="text-foreground mb-4 text-base font-medium">
-        Language &amp; Region
-      </h3>
       <div className="space-y-4">
         <div>
           <label htmlFor={langId} className={LABEL_CLASS}>
@@ -114,6 +112,6 @@ export function LanguageRegionCard({ form, setField, issues, canEdit }: Language
           )}
         </div>
       </div>
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/MonthlyUsageCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useId } from 'react'
+import { SettingsCard } from './components.js'
 import type { AiUsageView } from './useAiSettings.js'
 
 const INPUT_CLASS =
@@ -31,7 +32,6 @@ export function MonthlyUsageCard({
   budgetError: string | null
   canEdit: boolean
 }) {
-  const headingId = useId()
   const limitId = useId()
 
   const used = usage?.totalTokens ?? 0
@@ -44,14 +44,10 @@ export function MonthlyUsageCard({
     : 'This month'
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
-        Monthly Usage
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Token usage for {periodLabel}. Aggregated from completed AI runs.
-      </p>
-
+    <SettingsCard
+      title="Monthly Usage"
+      description={`Token usage for ${periodLabel}. Aggregated from completed AI runs.`}
+    >
       <div className="space-y-4">
         <div>
           <div className="mb-1 flex items-center justify-between text-sm">
@@ -113,6 +109,6 @@ export function MonthlyUsageCard({
           )}
         </div>
       </div>
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/ProviderConnectionCard.tsx

@@ -94,7 +94,7 @@ export function ProviderConnectionCard({
   }
 
   return (
-    <div className="border-border bg-card rounded-lg border p-4">
+    <div className="border-border bg-background rounded-lg border p-4">
       <div className="mb-3 flex items-start justify-between gap-3">
         <div>
           <div className="flex items-center gap-2">

package/src/views/settings/SecurityStatusCard.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useId } from 'react'
 import { Shield, ShieldAlert, ShieldCheck, ShieldX } from 'lucide-react'
 import type { SecurityStatus, SecurityWarning } from '@actuate-media/cms-core/security-center'
+import { SettingsCard } from './components.js'
 import { CheckIcon } from './securityPrimitives.js'
 
 const LEVEL_STYLES: Record<
@@ -40,16 +40,14 @@ export function SecurityStatusCard({
   status: SecurityStatus
   onNavigate?: (path: string) => void
 }) {
-  const headingId = useId()
   const style = LEVEL_STYLES[status.status]
   const { Icon } = style
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <div className="mb-1 flex items-start justify-between gap-3">
-        <h3 id={headingId} className="text-foreground text-base font-medium">
-          Security Status
-        </h3>
+    <SettingsCard
+      title="Security Status"
+      description={status.description}
+      actions={
         <span
           className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-sm font-medium ${style.pill}`}
         >
@@ -57,9 +55,8 @@ export function SecurityStatusCard({
           {/* Visible text label means the status never relies on color alone. */}
           {style.word}
         </span>
-      </div>
-      <p className="text-muted-foreground mb-4 text-sm">{status.description}</p>
-
+      }
+    >
       <div className="grid grid-cols-1 gap-x-6 gap-y-1 sm:grid-cols-2">
         {status.checks.map((check) => (
           <button
@@ -105,6 +102,6 @@ export function SecurityStatusCard({
           ))}
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/SecurityTab.tsx

@@ -12,7 +12,7 @@ import { useSecuritySettings } from './useSecuritySettings.js'
 
 function CardSkeleton() {
   return (
-    <div className="border-border bg-card animate-pulse rounded-lg border p-4">
+    <div className="border-border bg-card animate-pulse rounded-lg border p-6">
       <div className="bg-muted mb-3 h-4 w-40 rounded" />
       <div className="bg-muted mb-4 h-3 w-72 rounded" />
       <div className="space-y-3">

package/src/views/settings/SeoRobotsDefaultsCard.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useId, useState } from 'react'
-import { ConfirmDangerousSettingDialog, SettingsToggleRow } from './components.js'
+import { useState } from 'react'
+import { ConfirmDangerousSettingDialog, SettingsCard, SettingsToggleRow } from './components.js'
 import type { GeneralSettingsForm, SiteIndexStatus } from './useGeneralSettings.js'
 
 interface SeoRobotsDefaultsCardProps {
@@ -29,7 +29,6 @@ export function SeoRobotsDefaultsCard({
   canEdit,
   onNavigate,
 }: SeoRobotsDefaultsCardProps) {
-  const headingId = useId()
   const [pending, setPending] = useState<PendingChange | null>(null)
 
   // Some toggles can take the whole production site out of search results, so
@@ -65,16 +64,10 @@ export function SeoRobotsDefaultsCard({
   const sitemapStatus = sitemapCheck ? (sitemapCheck.value === 'Yes' ? 'Enabled' : 'Disabled') : '—'
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
-        SEO &amp; Robots Defaults
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Set the site-wide default for search engine indexing. Individual pages can inherit or
-        override these rules in their SEO panel. These share the same configuration as the SEO
-        section.
-      </p>
-
+    <SettingsCard
+      title="SEO & Robots Defaults"
+      description="Set the site-wide default for search engine indexing. Individual pages can inherit or override these rules in their SEO panel. These share the same configuration as the SEO section."
+    >
       <div className="space-y-4">
         <SettingsToggleRow
           label="Default No Index"
@@ -133,7 +126,7 @@ export function SeoRobotsDefaultsCard({
         }}
         onCancel={() => setPending(null)}
       />
-    </section>
+    </SettingsCard>
   )
 }
 

package/src/views/settings/SeoSettingsTab.tsx

@@ -17,6 +17,7 @@ import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SEOConfigPanel } from '../../components/SEOConfigPanel.js'
 import {
   ConfirmDangerousSettingDialog,
+  SettingsCard,
   SettingsSaveBar,
   SettingsSourceBadge,
   SettingsToggleRow,
@@ -82,7 +83,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <div className="space-y-4" aria-busy="true" aria-live="polite">
         <span className="sr-only">Loading SEO settings…</span>
         {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="border-border bg-card rounded-lg border p-4">
+          <div key={i} className="border-border bg-card rounded-lg border p-6">
             <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
             <div className="space-y-3">
               <div className="bg-muted h-9 w-full animate-pulse rounded" />
@@ -208,7 +209,6 @@ function SeoWorkspaceCallout({ onNavigate }: { onNavigate?: (path: string) => vo
 // ---------------------------------------------------------------------------
 
 function MetaDefaultsCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: boolean }) {
-  const headingId = useId()
   const templateId = useId()
   const descId = useId()
   const [pickerOpen, setPickerOpen] = useState(false)
@@ -229,11 +229,10 @@ function MetaDefaultsCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: bool
   const imageEditable = sources.defaultOgImage?.editable !== false && canEdit
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-4 text-base font-medium">
-        Meta Defaults
-      </h3>
-
+    <SettingsCard
+      title="Meta Defaults"
+      description="Fallback page title, description, and social image applied when a page defines none of its own."
+    >
       <div className="space-y-4">
         {/* Title template */}
         <div>
@@ -362,7 +361,7 @@ function MetaDefaultsCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: bool
         onSelect={(url) => setField('defaultOgImage', url)}
         onSelectItem={(item) => setField('defaultSocialImageAssetId', item.id)}
       />
-    </section>
+    </SettingsCard>
   )
 }
 
@@ -458,20 +457,14 @@ function VerificationField({
 }
 
 function SearchEngineVerificationCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: boolean }) {
-  const headingId = useId()
   const { form, setField } = seo
   const onChange = (key: keyof SeoSettingsForm, value: string) => setField(key, value as never)
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
-        Search Engine Verification
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Paste the verification token from each provider. We render only safe meta tags into your
-        site&apos;s head — never arbitrary HTML.
-      </p>
-
+    <SettingsCard
+      title="Search Engine Verification"
+      description="Paste the verification token from each provider. We render only safe meta tags into your site's head — never arbitrary HTML."
+    >
       <div className="space-y-4">
         <VerificationField
           label="Google Search Console"
@@ -523,7 +516,7 @@ function SearchEngineVerificationCard({ seo, canEdit }: { seo: UseSeoSettings; c
           />
         </div>
       </details>
-    </section>
+    </SettingsCard>
   )
 }
 
@@ -540,7 +533,6 @@ function SitemapDefaultsCard({
   canEdit: boolean
   onNavigate?: (path: string) => void
 }) {
-  const headingId = useId()
   const [pendingDisable, setPendingDisable] = useState(false)
   const { form, setField, sitemap, siteUrl, isProduction, regenerateSitemap, regenerating } = seo
 
@@ -558,11 +550,10 @@ function SitemapDefaultsCard({
     : 'Never'
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-4 text-base font-medium">
-        Sitemap
-      </h3>
-
+    <SettingsCard
+      title="Sitemap"
+      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-3 text-sm">
           <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
@@ -644,7 +635,7 @@ function SitemapDefaultsCard({
         }}
         onCancel={() => setPendingDisable(false)}
       />
-    </section>
+    </SettingsCard>
   )
 }