@actuate-media/cms-admin 0.36.0 → 0.36.1

package/src/views/settings/SiteIndexStatusCard.tsx

@@ -5,11 +5,11 @@ import {
   XCircle,
   AlertTriangle,
   HelpCircle,
-  ShieldCheck,
   ExternalLink,
   Search,
 } from 'lucide-react'
 import type { ReactNode } from 'react'
+import { SettingsCard } from './components.js'
 import type { SiteIndexStatus } from './useGeneralSettings.js'
 
 interface SiteIndexStatusCardProps {
@@ -61,23 +61,11 @@ export function SiteIndexStatusCard({
   onRunAudit,
 }: SiteIndexStatusCardProps) {
   return (
-    <section
-      aria-labelledby="site-index-status-heading"
-      className="border-border bg-card rounded-lg border p-4"
-    >
-      <div className="mb-3 flex items-start justify-between gap-3">
-        <div className="flex items-start gap-2">
-          <ShieldCheck size={18} className="text-muted-foreground mt-0.5" aria-hidden="true" />
-          <div>
-            <h3 id="site-index-status-heading" className="text-foreground text-base font-medium">
-              Site Index Status
-            </h3>
-            <p className="text-muted-foreground text-sm">
-              Current effective crawl and indexing state
-            </p>
-          </div>
-        </div>
-        {status && (
+    <SettingsCard
+      title="Site Index Status"
+      description="Current effective crawl and indexing state."
+      actions={
+        status ? (
           <span
             className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium ${SEVERITY_STYLES[status.severity].pill}`}
           >
@@ -85,9 +73,9 @@ export function SiteIndexStatusCard({
             <span className="sr-only">Status: </span>
             {status.label}
           </span>
-        )}
-      </div>
-
+        ) : undefined
+      }
+    >
       {loading && !status ? (
         <div className="space-y-2" aria-hidden="true">
           <div className="bg-muted h-4 w-2/3 animate-pulse rounded" />
@@ -128,7 +116,7 @@ export function SiteIndexStatusCard({
           )}
         </>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 

package/src/views/settings/SiteInformationCard.tsx

@@ -2,7 +2,7 @@
 
 import { useId } from 'react'
 import { CheckCircle2 } from 'lucide-react'
-import { SettingsSourceBadge } from './components.js'
+import { SettingsCard, SettingsSourceBadge } from './components.js'
 import type {
   GeneralSettingsForm,
   SettingsSourceMetadata,
@@ -39,13 +39,7 @@ export function SiteInformationCard({
   const urlValid = !urlIssue && form.siteUrl.trim().length > 0
 
   return (
-    <section
-      aria-labelledby={`${titleId}-heading`}
-      className="border-border bg-card rounded-lg border p-4"
-    >
-      <h3 id={`${titleId}-heading`} className="text-foreground mb-4 text-base font-medium">
-        Site Information
-      </h3>
+    <SettingsCard title="Site Information" description="Your site's name, tagline, and public URL.">
       <div className="space-y-4">
         <div>
           <label htmlFor={titleId} className={LABEL_CLASS}>
@@ -117,6 +111,6 @@ export function SiteInformationCard({
           )}
         </div>
       </div>
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/components.tsx

@@ -2,9 +2,80 @@
 
 import * as Dialog from '@radix-ui/react-dialog'
 import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
-import type { ReactNode } from 'react'
+import { useId, type ReactNode } from 'react'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
 
+/**
+ * The canonical Settings section card: a bordered `bg-card` surface with a
+ * header (title + optional description) and an optional right-aligned actions
+ * 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.
+ */
+export function SettingsCard({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  headingLevel: Heading = 'h3',
+}: {
+  title: ReactNode
+  description?: ReactNode
+  /** Right-aligned controls in the header (e.g. a Refresh or Add button). */
+  actions?: ReactNode
+  children: ReactNode
+  className?: string
+  /** Override the heading element for correct document outline nesting. */
+  headingLevel?: 'h2' | 'h3'
+}) {
+  const headingId = useId()
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={`border-border bg-card rounded-lg border p-6 ${className ?? ''}`}
+    >
+      <header className="mb-4 flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <Heading id={headingId} className="text-foreground text-lg font-medium">
+            {title}
+          </Heading>
+          {description && <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>}
+        </div>
+        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+      </header>
+      {children}
+    </section>
+  )
+}
+
+/**
+ * A sub-section inside a {@link SettingsCard}: a top divider plus a
+ * `text-base` medium label and optional description. Use for grouped controls
+ * within a single card (e.g. "Admin branding" under "Branding").
+ */
+export function SettingsSubsection({
+  title,
+  description,
+  children,
+  className,
+}: {
+  title: ReactNode
+  description?: ReactNode
+  children?: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={`border-border border-t pt-4 ${className ?? ''}`}>
+      <div className="text-foreground text-base font-medium">{title}</div>
+      {description && <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>}
+      {children}
+    </div>
+  )
+}
+
 const SOURCE_LABEL: Record<SettingsSourceMetadata['source'], string> = {
   config: 'Config-managed',
   environment: 'Environment-managed',

package/src/views/settings/securityPrimitives.tsx

@@ -3,6 +3,7 @@
 import { AlertTriangle, Check, CircleHelp, X } from 'lucide-react'
 import type { ReactNode } from 'react'
 import type { CheckStatus } from '@actuate-media/cms-core/security-center'
+import { SettingsCard } from './components.js'
 
 /** Small status icon used in check/summary rows. Text label always accompanies it. */
 export function CheckIcon({ status }: { status: CheckStatus }) {
@@ -51,25 +52,29 @@ export function StatusRow({
   )
 }
 
-/** Section wrapper matching the other settings cards. */
+/**
+ * Section wrapper for the Security tab. Delegates to the shared
+ * {@link SettingsCard} so Security matches the canonical Settings design
+ * language (p-6, text-lg title, muted description). `headingId` is accepted
+ * for backward compatibility but ignored — {@link SettingsCard} generates and
+ * wires its own accessible heading id.
+ */
 export function SecurityCard({
-  headingId,
   title,
   description,
+  actions,
   children,
 }: {
-  headingId: string
+  /** @deprecated No longer used; SettingsCard manages the heading id. */
+  headingId?: string
   title: string
   description: string
+  actions?: ReactNode
   children: ReactNode
 }) {
   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">
-        {title}
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">{description}</p>
+    <SettingsCard title={title} description={description} actions={actions}>
       {children}
-    </section>
+    </SettingsCard>
   )
 }