@actuate-media/cms-admin 0.24.0 → 0.26.0

package/src/views/Settings.tsx

@@ -10,7 +10,6 @@ import {
   BookOpen,
   Sparkles,
   MessageSquare,
-  Languages,
   Loader2,
   AlertTriangle,
   Download,
@@ -30,36 +29,36 @@ import { cmsApi } from '../lib/api.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
 import { SEOConfigPanel } from '../components/SEOConfigPanel.js'
+import { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
 import { Users as UsersView } from './Users.js'
 import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void
   config?: any
+  /** Current admin session — used to gate editing on role. */
+  session?: any
   /** Initial tab when arriving without a `?tab=` query param (e.g. via the
    * legacy `/users` or `/api-keys` routes). */
   initialTab?: string
 }
 
 /** Tabs that drive their own persistence (no global "Save Changes" footer). */
-const SELF_MANAGED_TABS = new Set(['users', 'api-keys'])
+const SELF_MANAGED_TABS = new Set(['general', 'users', 'api-keys'])
 
 function readSettingsTabFromUrl(): string | null {
   if (typeof window === 'undefined') return null
   return new URLSearchParams(window.location.search).get('tab')
 }
 
-export function Settings({ config, onNavigate, initialTab = 'general' }: SettingsProps = {}) {
+export function Settings({
+  config,
+  onNavigate,
+  session,
+  initialTab = 'general',
+}: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings')
 
-  const [siteTitle, setSiteTitle] = useState('My CMS')
-  const [tagline, setTagline] = useState('A lightweight content management system')
-  const [siteUrl, setSiteUrl] = useState('https://example.com')
-  const [language, setLanguage] = useState('en')
-  const [timezone, setTimezone] = useState('UTC')
-  const [defaultNoIndex, setDefaultNoIndex] = useState(false)
-  const [defaultNoFollow, setDefaultNoFollow] = useState(false)
-  const [noIndexNonProduction, setNoIndexNonProduction] = useState(false)
   const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
   const [sessionTimeout, setSessionTimeout] = useState(false)
   const [ipWhitelist, setIpWhitelist] = useState(false)
@@ -139,14 +138,6 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
 
   useEffect(() => {
     if (data) {
-      setSiteTitle(data.siteTitle ?? 'My CMS')
-      setTagline(data.tagline ?? '')
-      setSiteUrl(data.siteUrl ?? '')
-      setLanguage(data.language ?? 'en')
-      setTimezone(data.timezone ?? 'UTC')
-      setDefaultNoIndex(data.defaultNoIndex ?? false)
-      setDefaultNoFollow(data.defaultNoFollow ?? false)
-      setNoIndexNonProduction(data.noIndexNonProduction ?? false)
       setTwoFactorEnabled(data.twoFactorEnabled ?? false)
       setSessionTimeout(data.sessionTimeout ?? false)
       setIpWhitelist(data.ipWhitelist ?? false)
@@ -169,17 +160,13 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
   const handleSave = async () => {
     setSaving(true)
     const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {}
+    // Read-modify-write: the General tab owns site info / SEO defaults in the
+    // same global blob, so merge against a fresh fetch instead of overwriting.
+    const current = await cmsApi<Record<string, unknown>>('/globals/settings')
     const res = await cmsApi('/globals/settings', {
       method: 'PUT',
       body: JSON.stringify({
-        siteTitle,
-        tagline,
-        siteUrl,
-        language,
-        timezone,
-        defaultNoIndex,
-        defaultNoFollow,
-        noIndexNonProduction,
+        ...(current.data ?? {}),
         twoFactorEnabled,
         sessionTimeout,
         ipWhitelist,
@@ -205,7 +192,7 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
   }
 
   const tabTriggerClass =
-    'px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:text-blue-600'
+    'text-muted-foreground hover:text-foreground data-[state=active]:border-brand data-[state=active]:text-brand px-4 py-2 text-base font-medium transition-colors data-[state=active]:border-b-2'
 
   if (loading) {
     return (
@@ -283,98 +270,8 @@ export function Settings({ config, onNavigate, initialTab = 'general' }: Setting
           </Tabs.Trigger>
         </Tabs.List>
 
-        <Tabs.Content value="general" className="space-y-4">
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-4 text-sm font-semibold text-gray-900">Site Information</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Site Title</label>
-                <input
-                  type="text"
-                  value={siteTitle}
-                  onChange={(e) => setSiteTitle(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Tagline</label>
-                <input
-                  type="text"
-                  value={tagline}
-                  onChange={(e) => setTagline(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Site URL</label>
-                <input
-                  type="url"
-                  value={siteUrl}
-                  onChange={(e) => setSiteUrl(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-            </div>
-          </div>
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-4 text-sm font-semibold text-gray-900">Language & Region</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Language</label>
-                <select
-                  value={language}
-                  onChange={(e) => setLanguage(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="en">English</option>
-                  <option value="es">Spanish</option>
-                  <option value="fr">French</option>
-                  <option value="de">German</option>
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Timezone</label>
-                <select
-                  value={timezone}
-                  onChange={(e) => setTimezone(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="UTC">UTC</option>
-                  <option value="America/New_York">Eastern Time</option>
-                  <option value="America/Chicago">Central Time</option>
-                  <option value="America/Denver">Mountain Time</option>
-                  <option value="America/Los_Angeles">Pacific Time</option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div className="border-border bg-card rounded-lg border p-4">
-            <h3 className="text-foreground mb-1 text-sm font-medium">SEO & Robots Defaults</h3>
-            <p className="text-muted-foreground mb-4 text-xs">
-              Set the site-wide default for search engine indexing. Individual pages can inherit or
-              override these rules in their SEO panel.
-            </p>
-            <div className="space-y-4">
-              <ToggleSetting
-                label="Default No Index"
-                description="Ask search engines not to index pages unless a page explicitly allows indexing"
-                checked={defaultNoIndex}
-                onChange={setDefaultNoIndex}
-              />
-              <ToggleSetting
-                label="Default No Follow"
-                description="Ask search engines not to follow page links unless a page explicitly allows following"
-                checked={defaultNoFollow}
-                onChange={setDefaultNoFollow}
-              />
-              <ToggleSetting
-                label="Noindex Non-Production Environments"
-                description="Force noindex when the deployed environment is not production"
-                checked={noIndexNonProduction}
-                onChange={setNoIndexNonProduction}
-              />
-            </div>
-          </div>
+        <Tabs.Content value="general">
+          <GeneralSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
         </Tabs.Content>
 
         <Tabs.Content value="appearance" className="space-y-4">

package/src/views/page-builder/BlockEditor.tsx

@@ -6,6 +6,7 @@ import * as SwitchPrimitive from '@radix-ui/react-switch'
 import type { BlockNode, BlockTypeDefinition, FieldDefinition } from '@actuate-media/cms-core'
 import { BlockCatalog } from '@actuate-media/cms-core'
 import { AIBlockAssist } from './AIBlockAssist.js'
+import { RelationshipField } from './RelationshipField.js'
 import { TipTapEditor } from '../../components/TipTapEditor.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 
@@ -297,16 +298,12 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
 
     case 'relationship':
       return (
-        <div>
-          <label className={LABEL_CLASS}>{label}</label>
-          <input
-            type="text"
-            value={(value as string) ?? ''}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder="Select relationship..."
-            className={INPUT_CLASS}
-          />
-        </div>
+        <RelationshipField
+          definition={definition}
+          value={value}
+          onChange={onChange}
+          label={label}
+        />
       )
 
     case 'email':

package/src/views/page-builder/RelationshipField.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import type { FieldDefinition } from '@actuate-media/cms-core'
+import { cmsApi } from '../../lib/api.js'
+
+const INPUT_CLASS =
+  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring'
+const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block'
+
+interface RelationshipOption {
+  id: string
+  label: string
+}
+
+export interface RelationshipFieldProps {
+  definition: FieldDefinition
+  value: unknown
+  onChange: (value: unknown) => void
+  label: string
+}
+
+/**
+ * Relationship picker for page-builder block fields (e.g. the form block's
+ * `formId`). Loads the target collection via the admin API and renders a
+ * labelled dropdown. If the collection can't be loaded it degrades to a plain
+ * id input so the field is never a dead end.
+ */
+export function RelationshipField({ definition, value, onChange, label }: RelationshipFieldProps) {
+  const relationTo = useMemo(() => {
+    if (definition.type !== 'relationship') return ''
+    return Array.isArray(definition.relationTo)
+      ? (definition.relationTo[0] ?? '')
+      : definition.relationTo
+  }, [definition])
+
+  const [options, setOptions] = useState<RelationshipOption[]>([])
+  const [loading, setLoading] = useState(false)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    if (!relationTo) return
+    let cancelled = false
+    setLoading(true)
+    setFailed(false)
+    cmsApi<Array<Record<string, unknown>>>(`/${relationTo}`)
+      .then((res) => {
+        if (cancelled) return
+        if (Array.isArray(res.data)) {
+          setOptions(
+            res.data
+              .map((item) => ({
+                id: String(item.id ?? ''),
+                label: String(item.name ?? item.title ?? item.slug ?? item.id ?? 'Untitled'),
+              }))
+              .filter((option) => option.id),
+          )
+        } else {
+          setFailed(true)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true)
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [relationTo])
+
+  const current = (value as string) ?? ''
+  const noun = relationTo === 'forms' ? 'a form' : 'an item'
+
+  if (failed) {
+    return (
+      <div>
+        <label className={LABEL_CLASS}>{label}</label>
+        <input
+          type="text"
+          value={current}
+          onChange={(e) => onChange(e.target.value || undefined)}
+          placeholder={`Enter ${relationTo} id…`}
+          className={INPUT_CLASS}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <label className={LABEL_CLASS}>{label}</label>
+      <select
+        value={current}
+        onChange={(e) => onChange(e.target.value || undefined)}
+        disabled={loading}
+        aria-label={label}
+        className={INPUT_CLASS}
+      >
+        <option value="">{loading ? 'Loading…' : `Select ${noun}…`}</option>
+        {options.map((option) => (
+          <option key={option.id} value={option.id}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {!loading && options.length === 0 && (
+        <p className="text-muted-foreground mt-1 text-xs">No {relationTo} found.</p>
+      )}
+    </div>
+  )
+}

package/src/views/page-builder/block-renderers/FormPreview.tsx

@@ -1,17 +1,76 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { FileText, Mail, Send } from 'lucide-react'
+import { cmsApi } from '../../../lib/api.js'
 import type { BlockPreviewProps } from './index.js'
 
+interface PreviewField {
+  key: string
+  label: string
+  type: string
+}
+
+interface PreviewForm {
+  name: string
+  fields: PreviewField[]
+}
+
+/**
+ * Canvas preview for the form block. When a form is linked we fetch its real
+ * name + fields so the editor sees what will render; otherwise we fall back to
+ * a generic skeleton. Network failures degrade to the skeleton rather than
+ * breaking the canvas.
+ */
 export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
   const formId = (data.formId as string) || ''
+  const [form, setForm] = useState<PreviewForm | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!formId) {
+      setForm(null)
+      return
+    }
+    let cancelled = false
+    setLoading(true)
+    cmsApi<{ name?: string; fields?: PreviewField[] }>(`/forms/${encodeURIComponent(formId)}`)
+      .then((res) => {
+        if (cancelled) return
+        if (res.data?.name) {
+          setForm({ name: res.data.name, fields: res.data.fields ?? [] })
+        } else {
+          setForm(null)
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [formId])
+
+  if (!formId) {
+    return (
+      <div className="border-border bg-muted/30 rounded-md border border-dashed p-6 text-center">
+        <FileText size={20} className="text-muted-foreground mx-auto" />
+        <p className="text-muted-foreground mt-2 text-sm">No form selected</p>
+        <p className="text-muted-foreground/70 text-xs">Pick a form in the block settings</p>
+      </div>
+    )
+  }
+
+  const heading = form?.name ?? (loading ? 'Loading form…' : 'Contact Form')
+  const fields = form?.fields ?? []
 
   if (variant === 'newsletter') {
     return (
       <div className="border-border rounded-md border p-6 text-center">
         <Mail size={24} className="text-muted-foreground mx-auto" />
-        <p className="text-foreground mt-3 text-sm font-medium">Newsletter Signup</p>
-        {formId && <p className="text-muted-foreground mt-1 text-xs">Form: {formId}</p>}
+        <p className="text-foreground mt-3 text-sm font-medium">
+          {form?.name ?? 'Newsletter Signup'}
+        </p>
         <div className="mx-auto mt-4 flex max-w-xs gap-2">
           <div className="border-border bg-input-background h-9 flex-1 rounded-md border" />
           <div className="bg-primary flex h-9 items-center rounded-md px-3">
@@ -22,42 +81,35 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
     )
   }
 
-  if (variant === 'custom') {
-    return (
-      <div className="border-border rounded-md border p-5">
-        <div className="flex items-center gap-2">
-          <FileText size={16} className="text-muted-foreground" />
-          <p className="text-foreground text-sm font-medium">
-            {formId ? `Form: ${formId}` : 'Custom Form'}
-          </p>
-        </div>
-        <div className="mt-3 flex flex-col gap-2">
-          <div className="border-border bg-input-background h-8 rounded-md border" />
-          <div className="border-border bg-input-background h-8 rounded-md border" />
-          <div className="border-border bg-input-background h-20 rounded-md border" />
-        </div>
-        <div className="mt-3">
-          <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-            Submit
-          </span>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className="border-border rounded-md border p-5">
-      <p className="text-foreground text-sm font-medium">Contact Form</p>
-      {formId && <p className="text-muted-foreground mt-1 text-xs">Form: {formId}</p>}
-      <div className="mt-3 grid grid-cols-2 gap-2">
-        <div className="border-border bg-input-background h-8 rounded-md border" />
-        <div className="border-border bg-input-background h-8 rounded-md border" />
+      <div className="flex items-center gap-2">
+        <FileText size={16} className="text-muted-foreground" />
+        <p className="text-foreground text-sm font-medium">{heading}</p>
+      </div>
+      <div className="mt-3 flex flex-col gap-2">
+        {fields.length > 0 ? (
+          fields.slice(0, 5).map((field) => (
+            <div key={field.key}>
+              <p className="text-muted-foreground mb-1 text-xs">{field.label || field.key}</p>
+              <div
+                className={`border-border bg-input-background rounded-md border ${
+                  field.type === 'textarea' ? 'h-16' : 'h-8'
+                }`}
+              />
+            </div>
+          ))
+        ) : (
+          <>
+            <div className="border-border bg-input-background h-8 rounded-md border" />
+            <div className="border-border bg-input-background h-8 rounded-md border" />
+            <div className="border-border bg-input-background h-20 rounded-md border" />
+          </>
+        )}
       </div>
-      <div className="border-border bg-input-background mt-2 h-8 rounded-md border" />
-      <div className="border-border bg-input-background mt-2 h-20 rounded-md border" />
       <div className="mt-3">
         <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-          Send Message
+          {variant === 'custom' ? 'Submit' : 'Send Message'}
         </span>
       </div>
     </div>

package/src/views/page-builder/canvas/BlockRenderer.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Box, Type, Image, Layout, Star } from 'lucide-react'
 import type { BlockNode } from '@actuate-media/cms-core'
+import { blockRenderers, FallbackPreview } from '../block-renderers/index.js'
 
 export interface BlockRendererProps {
   node: BlockNode
@@ -10,13 +10,6 @@ export interface BlockRendererProps {
   onSelectNode: (id: string | null) => void
 }
 
-const BLOCK_ICONS: Record<string, typeof Box> = {
-  hero: Star,
-  text: Type,
-  image: Image,
-  layout: Layout,
-}
-
 function getBlockLabel(blockType: string): string {
   return blockType.charAt(0).toUpperCase() + blockType.slice(1)
 }
@@ -26,7 +19,7 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
   const isSelected = selectedNodeId === node.id
   const blockType = node.settings.blockType
   const label = getBlockLabel(blockType)
-  const Icon = BLOCK_ICONS[blockType] ?? Box
+  const Preview = blockRenderers[blockType]
 
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -36,6 +29,7 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
   return (
     <div
       data-node-id={node.id}
+      data-block-type={blockType}
       className={`relative min-h-[48px] transition-shadow ${
         isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
       }`}
@@ -49,9 +43,13 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
         </span>
       )}
 
-      <div className="bg-muted/30 border-border flex items-center justify-center gap-2 rounded-md border border-dashed p-4">
-        <Icon size={16} className="text-muted-foreground" />
-        <span className="text-muted-foreground text-sm">{label}</span>
+      {/* Previews are display-only on the canvas; the wrapper owns selection. */}
+      <div className="pointer-events-none">
+        {Preview ? (
+          <Preview data={node.data} variant={node.settings.variant} />
+        ) : (
+          <FallbackPreview blockType={blockType} data={node.data} />
+        )}
       </div>
     </div>
   )

package/src/views/settings/GeneralSettingsTab.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import { AlertTriangle, Info } from 'lucide-react'
+import { useGeneralSettings } from './useGeneralSettings.js'
+import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { SiteIndexStatusCard } from './SiteIndexStatusCard.js'
+import { SiteInformationCard } from './SiteInformationCard.js'
+import { LanguageRegionCard } from './LanguageRegionCard.js'
+import { SeoRobotsDefaultsCard } from './SeoRobotsDefaultsCard.js'
+
+export interface GeneralSettingsTabProps {
+  onNavigate?: (path: string) => void
+  /** Current user's role. Only ADMIN can persist changes. */
+  role?: string
+}
+
+export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps) {
+  const canEdit = role === 'ADMIN'
+  const settings = useGeneralSettings(canEdit)
+
+  const runAudit = () => onNavigate?.('/seo?tab=audit')
+
+  if (settings.loading) {
+    return (
+      <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 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" />
+              <div className="bg-muted h-9 w-full animate-pulse rounded" />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {settings.loadError && (
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
+        >
+          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">{settings.loadError}</span>
+          <button
+            type="button"
+            onClick={settings.refetch}
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {!canEdit && (
+        <div className="border-border bg-muted text-muted-foreground flex items-center gap-2 rounded-lg border p-3 text-sm">
+          <Info size={16} className="shrink-0" aria-hidden="true" />
+          You have read-only access to settings. Only administrators can make changes.
+        </div>
+      )}
+
+      <SettingsValidationSummary issues={settings.issues} />
+
+      <SiteIndexStatusCard
+        status={settings.indexStatus}
+        loading={settings.loading}
+        onNavigate={onNavigate}
+        onRunAudit={runAudit}
+      />
+
+      <SiteInformationCard
+        form={settings.form}
+        setField={settings.setField}
+        sources={settings.sources}
+        issues={settings.issues}
+        canEdit={canEdit}
+      />
+
+      <LanguageRegionCard
+        form={settings.form}
+        setField={settings.setField}
+        issues={settings.issues}
+        canEdit={canEdit}
+      />
+
+      <SeoRobotsDefaultsCard
+        form={settings.form}
+        setField={settings.setField}
+        isProduction={settings.isProduction}
+        indexStatus={settings.indexStatus}
+        canEdit={canEdit}
+        onNavigate={onNavigate}
+      />
+
+      {settings.saveState === 'error' && settings.saveError && (
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
+        >
+          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">{settings.saveError}</span>
+          <button
+            type="button"
+            onClick={settings.save}
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      <SettingsSaveBar
+        dirty={settings.dirty}
+        canEdit={canEdit}
+        hasErrors={settings.hasErrors}
+        saveState={settings.saveState}
+        onSave={settings.save}
+        onReset={settings.reset}
+      />
+    </div>
+  )
+}