@actuate-media/cms-admin 0.36.0 → 0.37.0

package/src/views/settings/BrandingCard.tsx

@@ -11,6 +11,7 @@ import {
 } from 'lucide-react'
 import { useRef } from 'react'
 
+import { SettingsCard, SettingsControlRow, SettingsSubsection } from './components.js'
 import type { BrandAssetField, UseAppearanceSettings } from './useAppearanceSettings.js'
 
 const LOGO_ACCEPT = 'image/svg+xml,image/png'
@@ -54,82 +55,131 @@ function LogoField({
   const uploading = uploadingField === field
   const inputId = `brand-${field}`
 
-  return (
-    <div className="flex items-start gap-4">
-      <div
-        className={`flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 ${previewSurface(
-          Boolean(darkSurface),
-        )} ${square ? 'h-12 w-12' : 'h-12 w-20'}`}
-        aria-hidden={!asset}
+  const thumbnail = (
+    <div
+      className={`flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 ${previewSurface(
+        Boolean(darkSurface),
+      )} ${square ? 'h-12 w-12' : 'h-12 w-20'}`}
+      aria-hidden={!asset}
+    >
+      {asset?.url ? (
+        // Never stretch/crop — contain preserves aspect ratio + transparency.
+        <img
+          src={asset.url}
+          alt={`${label} preview`}
+          className="max-h-full max-w-full object-contain"
+        />
+      ) : (
+        <ImageIcon size={18} className="text-muted-foreground" aria-hidden="true" />
+      )}
+    </div>
+  )
+
+  const controls = (
+    <>
+      <input
+        ref={inputRef}
+        id={inputId}
+        type="file"
+        accept={accept}
+        aria-label={label}
+        className="sr-only"
+        disabled={!canEdit || uploading}
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (file) onUpload(field, file)
+          if (inputRef.current) inputRef.current.value = ''
+        }}
+      />
+      {asset && (
+        <button
+          type="button"
+          onClick={() => onRemove(field)}
+          disabled={!canEdit}
+          className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          aria-label={`Remove ${label.toLowerCase()}`}
+        >
+          <Trash2 size={14} aria-hidden="true" /> Remove
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        disabled={!canEdit || uploading}
+        aria-label={`${asset ? 'Replace' : 'Upload'} ${label.toLowerCase()}`}
+        className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
       >
-        {asset?.url ? (
-          // Never stretch/crop — contain preserves aspect ratio + transparency.
-          <img
-            src={asset.url}
-            alt={`${label} preview`}
-            className="max-h-full max-w-full object-contain"
-          />
+        {uploading ? (
+          <Loader2 size={14} className="animate-spin" aria-hidden="true" />
         ) : (
-          <ImageIcon size={18} className="text-muted-foreground" aria-hidden="true" />
+          <Upload size={14} aria-hidden="true" />
         )}
-      </div>
+        {asset ? 'Replace' : 'Upload'}
+      </button>
+    </>
+  )
 
-      <div className="min-w-0 flex-1">
-        <label htmlFor={inputId} className="text-foreground block text-base font-medium">
-          {label}
-        </label>
-        <p className="text-muted-foreground mt-0.5 text-sm">{helper}</p>
+  return (
+    <div>
+      <SettingsControlRow
+        leading={thumbnail}
+        label={label}
+        description={helper}
+        control={controls}
+      />
+      {warning && (
+        <p
+          className="text-warning mt-2 flex items-start gap-1.5 text-sm"
+          role="status"
+          aria-live="polite"
+        >
+          <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" /> {warning}
+        </p>
+      )}
+    </div>
+  )
+}
 
-        <div className="mt-2 flex items-center gap-2">
-          <input
-            ref={inputRef}
-            id={inputId}
-            type="file"
-            accept={accept}
-            className="sr-only"
-            disabled={!canEdit || uploading}
-            onChange={(e) => {
-              const file = e.target.files?.[0]
-              if (file) onUpload(field, file)
-              if (inputRef.current) inputRef.current.value = ''
-            }}
-          />
+function AdminBrandSourceToggle({
+  mode,
+  canEdit,
+  onChange,
+}: {
+  mode: UseAppearanceSettings['brand']['mode']
+  canEdit: boolean
+  onChange: (mode: 'inheritPublicBrand' | 'customAdminBrand') => void
+}) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Brand source"
+      className="border-border bg-muted inline-flex rounded-md border p-0.5"
+    >
+      {(
+        [
+          ['inheritPublicBrand', 'Inherit public brand'],
+          ['customAdminBrand', 'Custom admin logo'],
+        ] as const
+      ).map(([value, text]) => {
+        const active = mode === value
+        return (
           <button
+            key={value}
             type="button"
-            onClick={() => inputRef.current?.click()}
-            disabled={!canEdit || uploading}
-            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+            role="radio"
+            aria-checked={active}
+            disabled={!canEdit}
+            onClick={() => onChange(value)}
+            className={`rounded px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+              active
+                ? 'bg-card text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
           >
-            {uploading ? (
-              <Loader2 size={14} className="animate-spin" aria-hidden="true" />
-            ) : (
-              <Upload size={14} aria-hidden="true" />
-            )}
-            {asset ? 'Replace' : `Upload ${label.toLowerCase()}`}
+            {text}
           </button>
-          {asset && (
-            <button
-              type="button"
-              onClick={() => onRemove(field)}
-              disabled={!canEdit}
-              className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-              aria-label={`Remove ${label}`}
-            >
-              <Trash2 size={14} aria-hidden="true" /> Remove
-            </button>
-          )}
-        </div>
-
-        {warning && (
-          <p
-            className="text-warning mt-2 flex items-start gap-1.5 text-sm"
-            role="status"
-            aria-live="polite"
-          >
-            <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" /> {warning}
-          </p>
-        )}
-      </div>
+        )
+      })}
     </div>
   )
 }
@@ -140,46 +190,40 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
 
   const custom = s.brand.mode === 'customAdminBrand'
 
-  return (
-    <section className="border-border bg-card rounded-lg border p-6">
-      <header className="mb-4">
-        <h3 className="text-foreground text-lg font-medium">Branding</h3>
-        <p className="text-muted-foreground mt-0.5 text-sm">
-          Logos shown in the admin sidebar and on the public site.
-        </p>
-      </header>
+  const logoFieldProps = {
+    accept: LOGO_ACCEPT,
+    brand: s.brand,
+    assets: s.assets,
+    uploadingField: s.uploadingField,
+    canEdit,
+    onUpload: s.uploadAsset,
+    onRemove: s.removeAsset,
+  }
 
+  return (
+    <SettingsCard
+      title="Branding"
+      description="Logos shown in the admin sidebar and on the public site."
+    >
       <div className="space-y-5">
         <LogoField
-          label="Primary Logo"
+          label="Primary logo"
           helper="SVG or PNG, up to 1MB. Best for the public header and full admin sidebar."
           field="publicPrimaryLogoAssetId"
-          accept={LOGO_ACCEPT}
-          brand={s.brand}
-          assets={s.assets}
-          uploadingField={s.uploadingField}
-          canEdit={canEdit}
           warning={warningFor('publicPrimaryLogoAssetId')}
-          onUpload={s.uploadAsset}
-          onRemove={s.removeAsset}
+          {...logoFieldProps}
         />
 
         <LogoField
-          label="Favicon / App Icon Source"
+          label="Favicon / app icon source"
           helper="32×32 PNG or SVG. A larger square image is fine — it scales down cleanly."
           field="faviconSourceAssetId"
-          accept={LOGO_ACCEPT}
           square
-          brand={s.brand}
-          assets={s.assets}
-          uploadingField={s.uploadingField}
-          canEdit={canEdit}
           warning={warningFor('faviconSourceAssetId')}
-          onUpload={s.uploadAsset}
-          onRemove={s.removeAsset}
+          {...logoFieldProps}
         />
 
-        {/* Advanced logo variants disclosure (Logo Mark + Dark Mode Logo). */}
+        {/* Advanced logo variants disclosure (Logo mark + Dark mode logo). */}
         <div className="border-border border-t pt-4">
           <button
             type="button"
@@ -198,109 +242,64 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
           {s.showAdvanced && (
             <div className="mt-4 space-y-5">
               <LogoField
-                label="Logo Mark"
+                label="Logo mark"
                 helper="Square icon or mark. Used for the collapsed sidebar, compact UI, and app icons."
                 field="publicLogoMarkAssetId"
-                accept={LOGO_ACCEPT}
                 square
-                brand={s.brand}
-                assets={s.assets}
-                uploadingField={s.uploadingField}
-                canEdit={canEdit}
                 warning={warningFor('publicLogoMarkAssetId')}
-                onUpload={s.uploadAsset}
-                onRemove={s.removeAsset}
+                {...logoFieldProps}
               />
               <LogoField
-                label="Dark Mode Logo"
+                label="Dark mode logo"
                 helper="Optional. Used on dark backgrounds or the dark admin theme."
                 field="publicDarkLogoAssetId"
-                accept={LOGO_ACCEPT}
                 darkSurface
-                brand={s.brand}
-                assets={s.assets}
-                uploadingField={s.uploadingField}
-                canEdit={canEdit}
                 warning={warningFor('publicDarkLogoAssetId')}
-                onUpload={s.uploadAsset}
-                onRemove={s.removeAsset}
+                {...logoFieldProps}
               />
             </div>
           )}
         </div>
 
-        {/* Admin branding mode — admin inherits the public brand by default. */}
-        <div className="border-border border-t pt-4">
-          <div className="flex items-center gap-2">
-            <span className="text-foreground text-base font-medium">Admin branding</span>
-          </div>
-          <p className="text-muted-foreground mt-0.5 text-sm">
-            Admin uses the public brand by default.
-          </p>
-          <div
-            role="radiogroup"
-            aria-label="Admin branding mode"
-            className="border-border bg-muted mt-2 inline-flex rounded-md border p-0.5"
-          >
-            {(
-              [
-                ['inheritPublicBrand', 'Inherit public brand'],
-                ['customAdminBrand', 'Custom admin logo'],
-              ] as const
-            ).map(([value, text]) => {
-              const active = s.brand.mode === value
-              return (
-                <button
-                  key={value}
-                  type="button"
-                  role="radio"
-                  aria-checked={active}
-                  disabled={!canEdit}
-                  onClick={() => s.setBrandingMode(value)}
-                  className={`rounded px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
-                    active
-                      ? 'bg-card text-foreground shadow-sm'
-                      : 'text-muted-foreground hover:text-foreground'
-                  }`}
-                >
-                  {text}
-                </button>
-              )
-            })}
-          </div>
+        {/* Admin branding — admin inherits the public brand by default. */}
+        <SettingsSubsection
+          title="Admin branding"
+          description="By default the admin reuses your public brand. Override it for a distinct internal look."
+        >
+          <div className="mt-4 space-y-5">
+            <SettingsControlRow
+              label="Brand source"
+              description="Choose whether the admin inherits the public brand or uses a custom logo."
+              control={
+                <AdminBrandSourceToggle
+                  mode={s.brand.mode}
+                  canEdit={canEdit}
+                  onChange={s.setBrandingMode}
+                />
+              }
+            />
 
-          {custom && (
-            <div className="mt-4 space-y-5">
-              <LogoField
-                label="Admin Primary Logo"
-                helper="Shown in the admin sidebar instead of the public logo."
-                field="adminPrimaryLogoAssetId"
-                accept={LOGO_ACCEPT}
-                brand={s.brand}
-                assets={s.assets}
-                uploadingField={s.uploadingField}
-                canEdit={canEdit}
-                warning={warningFor('adminPrimaryLogoAssetId')}
-                onUpload={s.uploadAsset}
-                onRemove={s.removeAsset}
-              />
-              <LogoField
-                label="Admin Logo Mark"
-                helper="Square mark for the collapsed admin sidebar."
-                field="adminLogoMarkAssetId"
-                accept={LOGO_ACCEPT}
-                square
-                brand={s.brand}
-                assets={s.assets}
-                uploadingField={s.uploadingField}
-                canEdit={canEdit}
-                warning={warningFor('adminLogoMarkAssetId')}
-                onUpload={s.uploadAsset}
-                onRemove={s.removeAsset}
-              />
-            </div>
-          )}
-        </div>
+            {custom && (
+              <div className="space-y-5">
+                <LogoField
+                  label="Admin primary logo"
+                  helper="Shown in the admin sidebar instead of the public logo."
+                  field="adminPrimaryLogoAssetId"
+                  warning={warningFor('adminPrimaryLogoAssetId')}
+                  {...logoFieldProps}
+                />
+                <LogoField
+                  label="Admin logo mark"
+                  helper="Square mark for the collapsed admin sidebar."
+                  field="adminLogoMarkAssetId"
+                  square
+                  warning={warningFor('adminLogoMarkAssetId')}
+                  {...logoFieldProps}
+                />
+              </div>
+            )}
+          </div>
+        </SettingsSubsection>
 
         {/* Default alt text */}
         <div className="border-border border-t pt-4">
@@ -327,6 +326,6 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
           {s.saveError}
         </p>
       )}
-    </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>
   )
 }