@actuate-media/cms-admin 0.3.0 → 0.6.0

package/src/views/ScriptTagEditor.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ArrowLeft, Loader2, AlertTriangle, Trash2, X, Plus } from 'lucide-react';
+import { toast } from 'sonner';
+import { useApiData } from '../lib/useApiData.js';
+import { cmsApi } from '../lib/api.js';
+
+export interface ScriptTagEditorProps {
+  tagId?: string;
+  onNavigate?: (path: string) => void;
+}
+
+export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
+  const isNew = !tagId;
+  const { data, loading, error } = useApiData<any>(
+    tagId ? `/script-tags` : null,
+  );
+
+  const [name, setName] = useState('');
+  const [code, setCode] = useState('');
+  const [placement, setPlacement] = useState('head');
+  const [scope, setScope] = useState('site');
+  const [targetPaths, setTargetPaths] = useState<string[]>([]);
+  const [pathInput, setPathInput] = useState('');
+  const [priority, setPriority] = useState(100);
+  const [enabled, setEnabled] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  useEffect(() => {
+    if (data && tagId) {
+      const tags = Array.isArray(data) ? data : [];
+      const tag = tags.find((t: any) => t.id === tagId);
+      if (tag) {
+        setName(tag.name ?? '');
+        setCode(tag.code ?? '');
+        setPlacement(tag.placement ?? 'head');
+        setScope(tag.scope ?? 'site');
+        setTargetPaths(tag.targetPaths ?? []);
+        setPriority(tag.priority ?? 100);
+        setEnabled(tag.enabled ?? true);
+      }
+    }
+  }, [data, tagId]);
+
+  const addPath = () => {
+    const trimmed = pathInput.trim();
+    if (!trimmed) return;
+    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    if (!targetPaths.includes(normalized)) {
+      setTargetPaths([...targetPaths, normalized]);
+    }
+    setPathInput('');
+  };
+
+  const removePath = (path: string) => {
+    setTargetPaths(targetPaths.filter((p) => p !== path));
+  };
+
+  const handleSave = async () => {
+    if (!name.trim()) {
+      toast.error('Name is required');
+      return;
+    }
+    if (!code.trim()) {
+      toast.error('Code snippet is required');
+      return;
+    }
+    if (scope !== 'site' && targetPaths.length === 0) {
+      toast.error('At least one target path is required for this scope');
+      return;
+    }
+
+    setSaving(true);
+    const payload = {
+      name: name.trim(),
+      code,
+      placement,
+      scope,
+      targetPaths: scope === 'site' ? [] : targetPaths,
+      priority,
+      enabled,
+    };
+
+    const res = isNew
+      ? await cmsApi('/script-tags', { method: 'POST', body: JSON.stringify(payload) })
+      : await cmsApi(`/script-tags/${tagId}`, { method: 'PUT', body: JSON.stringify(payload) });
+
+    setSaving(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success(isNew ? 'Tag created' : 'Tag updated');
+      onNavigate?.('/script-tags');
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!tagId) return;
+    setDeleting(true);
+    const res = await cmsApi(`/script-tags/${tagId}`, { method: 'DELETE' });
+    setDeleting(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Tag deleted');
+      onNavigate?.('/script-tags');
+    }
+  };
+
+  if (loading && !isNew) {
+    return (
+      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
+        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8 max-w-3xl">
+      {error && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
+          <span className="text-sm text-red-800 flex-1">{error}</span>
+        </div>
+      )}
+
+      <div className="mb-6">
+        <button
+          type="button"
+          onClick={() => onNavigate?.('/script-tags')}
+          className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-3"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Script Tags
+        </button>
+        <h1 className="text-2xl font-semibold text-gray-900">
+          {isNew ? 'New Script Tag' : 'Edit Script Tag'}
+        </h1>
+      </div>
+
+      <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 mb-6">
+        <div className="flex items-start gap-2">
+          <AlertTriangle className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
+          <p className="text-sm text-amber-800">
+            This code will run on public pages matching the scope below. Only add trusted code from verified sources (e.g. Google Analytics, Meta Pixel).
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div className="rounded-lg border border-gray-200 bg-white p-4 space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Google Tag Manager, Facebook Pixel"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Code</label>
+            <textarea
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder="Paste your HTML/JavaScript snippet here..."
+              rows={10}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+              spellCheck={false}
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              Paste the full code snippet including {'<script>'} tags.
+            </p>
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-4 space-y-4">
+          <h3 className="text-sm font-semibold text-gray-900">Placement & Scope</h3>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Placement</label>
+            <select
+              value={placement}
+              onChange={(e) => setPlacement(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="head">Head — inside {'<head>'}</option>
+              <option value="body_open">Body Open — right after {'<body>'}</option>
+              <option value="body_close">Body Close — before {'</body>'}</option>
+            </select>
+            <p className="mt-1 text-xs text-gray-500">
+              {placement === 'head' && 'Best for analytics scripts, meta tags, and custom CSS.'}
+              {placement === 'body_open' && 'Best for GTM noscript tags and early-loading scripts.'}
+              {placement === 'body_close' && 'Best for chat widgets, deferred scripts, and tracking pixels.'}
+            </p>
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Scope</label>
+            <select
+              value={scope}
+              onChange={(e) => setScope(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="site">Entire Website</option>
+              <option value="parents">Specific Parent Pages (includes child pages)</option>
+              <option value="urls">Specific URLs (exact match)</option>
+            </select>
+          </div>
+
+          {scope !== 'site' && (
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700">
+                {scope === 'parents' ? 'Parent Paths' : 'URL Paths'}
+              </label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={pathInput}
+                  onChange={(e) => setPathInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      addPath();
+                    }
+                  }}
+                  placeholder="/services"
+                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <button
+                  type="button"
+                  onClick={addPath}
+                  className="rounded-lg border border-gray-300 px-3 py-2 text-sm hover:bg-gray-50 transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                </button>
+              </div>
+              {scope === 'parents' && (
+                <p className="mt-1 text-xs text-gray-500">
+                  This tag will also apply to all child pages under each path.
+                </p>
+              )}
+              {targetPaths.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {targetPaths.map((p) => (
+                    <span
+                      key={p}
+                      className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs font-mono text-gray-700"
+                    >
+                      {p}
+                      <button
+                        type="button"
+                        onClick={() => removePath(p)}
+                        className="ml-0.5 text-gray-400 hover:text-gray-600"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700">Priority</label>
+              <input
+                type="number"
+                value={priority}
+                onChange={(e) => setPriority(parseInt(e.target.value, 10) || 0)}
+                min={0}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <p className="mt-1 text-xs text-gray-500">
+                Lower numbers load first (e.g. 1 = first, 100 = default)
+              </p>
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700">Enabled</label>
+              <div className="pt-2">
+                <button
+                  type="button"
+                  onClick={() => setEnabled(!enabled)}
+                  className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${enabled ? 'bg-blue-600' : 'bg-gray-300'}`}
+                  aria-pressed={enabled}
+                >
+                  <span
+                    className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white transition-transform ${
+                      enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
+                    }`}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div>
+            {!isNew && (
+              <>
+                {showDeleteConfirm ? (
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-red-600">Delete this tag?</span>
+                    <button
+                      type="button"
+                      onClick={handleDelete}
+                      disabled={deleting}
+                      className="rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-50"
+                    >
+                      {deleting ? 'Deleting...' : 'Confirm'}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowDeleteConfirm(false)}
+                      className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="flex items-center gap-1.5 text-sm text-red-600 hover:text-red-700 transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                    Delete
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => onNavigate?.('/script-tags')}
+              className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving}
+              className="rounded-lg bg-blue-600 px-6 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : isNew ? 'Create Tag' : 'Save Changes'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/ScriptTags.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useState } from 'react';
+import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react';
+import { toast } from 'sonner';
+import { useApiData } from '../lib/useApiData.js';
+import { cmsApi } from '../lib/api.js';
+
+interface ScriptTag {
+  id: string;
+  name: string;
+  code: string;
+  placement: string;
+  scope: string;
+  targetPaths: string[];
+  priority: number;
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ScriptTagsProps {
+  onNavigate?: (path: string) => void;
+}
+
+const PLACEMENT_LABELS: Record<string, string> = {
+  head: 'Head',
+  body_open: 'Body Open',
+  body_close: 'Body Close',
+};
+
+const PLACEMENT_COLORS: Record<string, string> = {
+  head: 'bg-purple-100 text-purple-700',
+  body_open: 'bg-blue-100 text-blue-700',
+  body_close: 'bg-green-100 text-green-700',
+};
+
+function scopeLabel(tag: ScriptTag): string {
+  if (tag.scope === 'site') return 'Entire Site';
+  if (tag.scope === 'parents') {
+    const count = tag.targetPaths?.length ?? 0;
+    return `${count} parent path${count !== 1 ? 's' : ''} + children`;
+  }
+  if (tag.scope === 'urls') {
+    const count = tag.targetPaths?.length ?? 0;
+    return `${count} URL${count !== 1 ? 's' : ''}`;
+  }
+  return tag.scope;
+}
+
+export function ScriptTags({ onNavigate }: ScriptTagsProps) {
+  const { data, loading, error, refetch } = useApiData<ScriptTag[]>('/script-tags');
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+
+  const tags = data ?? [];
+
+  const toggleEnabled = async (tag: ScriptTag) => {
+    setTogglingId(tag.id);
+    const res = await cmsApi(`/script-tags/${tag.id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ enabled: !tag.enabled }),
+    });
+    setTogglingId(null);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      refetch();
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
+        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+      {error && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
+          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+        </div>
+      )}
+
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h1 className="mb-1 text-2xl font-semibold text-gray-900">Script Tags</h1>
+          <p className="text-sm text-gray-600">Manage tracking codes, analytics, and custom scripts injected into your site</p>
+        </div>
+        <button
+          type="button"
+          onClick={() => onNavigate?.('/script-tags/new')}
+          className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+        >
+          <Plus className="w-4 h-4" />
+          New Tag
+        </button>
+      </div>
+
+      {tags.length === 0 && !error ? (
+        <div className="rounded-lg border border-gray-200 bg-white p-12 text-center">
+          <Code2 className="mx-auto mb-3 h-10 w-10 text-gray-300" />
+          <h3 className="text-sm font-semibold text-gray-900">No script tags yet</h3>
+          <p className="mt-1 text-sm text-gray-500">
+            Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
+          </p>
+          <button
+            type="button"
+            onClick={() => onNavigate?.('/script-tags/new')}
+            className="mt-4 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+          >
+            <Plus className="w-4 h-4" />
+            Add Your First Tag
+          </button>
+        </div>
+      ) : (
+        <div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-gray-200 bg-gray-50">
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Name</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Placement</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Scope</th>
+                <th className="px-4 py-3 text-center font-medium text-gray-600">Priority</th>
+                <th className="px-4 py-3 text-center font-medium text-gray-600">Enabled</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tags.map((tag) => (
+                <tr key={tag.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors">
+                  <td className="px-4 py-3">
+                    <button
+                      type="button"
+                      onClick={() => onNavigate?.(`/script-tags/${tag.id}`)}
+                      className="font-medium text-blue-600 hover:text-blue-800 hover:underline"
+                    >
+                      {tag.name}
+                    </button>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-gray-100 text-gray-700'}`}>
+                      {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-gray-600">{scopeLabel(tag)}</td>
+                  <td className="px-4 py-3 text-center text-gray-600 font-mono">{tag.priority}</td>
+                  <td className="px-4 py-3 text-center">
+                    <button
+                      type="button"
+                      onClick={() => toggleEnabled(tag)}
+                      disabled={togglingId === tag.id}
+                      className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${tag.enabled ? 'bg-blue-600' : 'bg-gray-300'}`}
+                      aria-pressed={tag.enabled}
+                    >
+                      <span
+                        className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white transition-transform ${
+                          tag.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
+                        }`}
+                      />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/views/Settings.tsx

@@ -1,18 +1,20 @@
 'use client';
 
 import * as Tabs from '@radix-ui/react-tabs';
-import { Bot, Eye, EyeOff, Image, FileCode2, BookOpen, Sparkles, MessageSquare, Languages, Loader2, AlertTriangle, Download, CheckCircle2, ArrowUpCircle, ExternalLink, RefreshCw, GitPullRequest } from 'lucide-react';
+import { Bot, Eye, EyeOff, Image, FileCode2, BookOpen, Sparkles, MessageSquare, Languages, Loader2, AlertTriangle, Download, CheckCircle2, ArrowUpCircle, ExternalLink, RefreshCw, GitPullRequest, Layers } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import { useApiData } from '../lib/useApiData.js';
 import { cmsApi } from '../lib/api.js';
 import { useTheme } from '../components/ThemeProvider.js';
+import { RelationshipField } from '../fields/RelationshipField.js';
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void;
+  config?: any;
 }
 
-export function Settings(_props: SettingsProps = {}) {
+export function Settings({ config, ..._props }: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings');
 
   const [siteTitle, setSiteTitle] = useState('My CMS');
@@ -26,6 +28,18 @@ export function Settings(_props: SettingsProps = {}) {
   const [activeTab, setActiveTab] = useState('general');
   const [saving, setSaving] = useState(false);
 
+  // Layout defaults
+  const [defaultLayout, setDefaultLayout] = useState<Record<string, string>>({});
+  const layoutConfig = config?.layout;
+  const layoutRegions: Array<{ name: string; collection: string; label: string }> = layoutConfig?.regions
+    ? Object.entries(layoutConfig.regions).map(([name, region]: [string, any]) => ({
+        name,
+        collection: region.collection,
+        label: region.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+      }))
+    : [];
+  const hasLayoutRegions = layoutRegions.length > 0;
+
   // AI settings
   const [aiProvider, setAiProvider] = useState('anthropic');
   const [aiApiKey, setAiApiKey] = useState('');
@@ -60,11 +74,15 @@ export function Settings(_props: SettingsProps = {}) {
       setAiWritingAssistant(data.aiWritingAssistant ?? true);
       setAiContentScoring(data.aiContentScoring ?? true);
       setAiTranslation(data.aiTranslation ?? false);
+      if (data.defaultLayout && typeof data.defaultLayout === 'object') {
+        setDefaultLayout(data.defaultLayout);
+      }
     }
   }, [data]);
 
   const handleSave = async () => {
     setSaving(true);
+    const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {};
     const res = await cmsApi('/globals/settings', {
       method: 'PUT',
       body: JSON.stringify({
@@ -73,6 +91,7 @@ export function Settings(_props: SettingsProps = {}) {
         aiProvider, aiAltTags, aiMediaCategorize, aiMetaDescriptions,
         aiReadability, aiSchema, aiBrandVoice, aiWritingAssistant,
         aiContentScoring, aiTranslation,
+        ...layoutPayload,
       }),
     });
     setSaving(false);
@@ -112,6 +131,14 @@ export function Settings(_props: SettingsProps = {}) {
         <Tabs.List className="mb-4 flex gap-1 border-b border-gray-200 overflow-x-auto">
           <Tabs.Trigger value="general" className={tabTriggerClass}>General</Tabs.Trigger>
           <Tabs.Trigger value="appearance" className={tabTriggerClass}>Appearance</Tabs.Trigger>
+          {hasLayoutRegions && (
+            <Tabs.Trigger value="layout" className={tabTriggerClass}>
+              <span className="flex items-center gap-1.5">
+                <Layers className="w-4 h-4" />
+                Layout
+              </span>
+            </Tabs.Trigger>
+          )}
           <Tabs.Trigger value="security" className={tabTriggerClass}>Security</Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
@@ -188,6 +215,56 @@ export function Settings(_props: SettingsProps = {}) {
           </div>
         </Tabs.Content>
 
+        {hasLayoutRegions && (
+          <Tabs.Content value="layout" className="space-y-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <h3 className="mb-1 text-sm font-semibold text-gray-900">Default Layout Variants</h3>
+              <p className="mb-4 text-xs text-gray-500">
+                Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages.
+              </p>
+              <div className="space-y-4">
+                {layoutRegions.map((region) => (
+                  <RelationshipField
+                    key={region.name}
+                    label={`Default ${region.label}`}
+                    value={defaultLayout[region.name] ?? ''}
+                    onChange={(val) => {
+                      setDefaultLayout((prev) => {
+                        const next = { ...prev };
+                        if (val && typeof val === 'string') {
+                          next[region.name] = val;
+                        } else {
+                          delete next[region.name];
+                        }
+                        return next;
+                      });
+                    }}
+                    relationTo={region.collection}
+                    helpText={`The ${region.label.toLowerCase()} variant used when no page in the ancestor chain specifies one`}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">How Layout Inheritance Works</h3>
+              <ul className="space-y-1.5 text-xs text-gray-600">
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">1</span>
+                  <span>Each page can assign specific layout variants (header, footer, etc.) from the document editor.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">2</span>
+                  <span>Child pages automatically inherit their parent&apos;s layout. For example, <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads/thank-you</code> inherits from <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads</code>.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">3</span>
+                  <span>If no page in the ancestor chain sets a variant, the defaults configured above are used.</span>
+                </li>
+              </ul>
+            </div>
+          </Tabs.Content>
+        )}
+
         <Tabs.Content value="security" 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">Security Settings</h3>