@prenta/admin 2.4.0 → 2.6.0

package/src/views/page-editor/sections/FeatureHighlightSection.tsx

@@ -14,7 +14,7 @@ export function FeatureHighlightSection({ section }: { section: PageSection }) {
   const text = (
     <div className="flex-1">
       {label && (
-        <span className="bg-brand mb-3 inline-block rounded px-2 py-0.5 text-xs font-medium text-white">
+        <span className="mb-3 inline-block rounded bg-[var(--section-accent)] px-2 py-0.5 text-xs font-medium text-[var(--section-accent-foreground)]">
           {label}
         </span>
       )}
@@ -38,8 +38,8 @@ export function FeatureHighlightSection({ section }: { section: PageSection }) {
           className="aspect-[4/3] w-full rounded-xl object-cover"
         />
       ) : (
-        <div className="bg-brand/10 flex aspect-[4/3] w-full items-center justify-center rounded-xl">
-          <ImageIcon className="text-brand h-10 w-10" aria-hidden />
+        <div className="flex aspect-[4/3] w-full items-center justify-center rounded-xl bg-[var(--section-accent-soft)]">
+          <ImageIcon className="h-10 w-10 text-[var(--section-accent)]" aria-hidden />
         </div>
       )}
     </div>

package/src/views/page-editor/sections/HeroBannerSection.tsx

@@ -12,7 +12,7 @@ export function HeroBannerSection({ section }: { section: PageSection }) {
     <div className="mx-auto max-w-3xl px-6 text-center">
       {eyebrow && (
         <p
-          className={`mb-3 text-sm font-medium tracking-wide uppercase ${dark ? 'text-brand-foreground/80' : 'text-brand'}`}
+          className={`mb-3 text-sm font-medium tracking-wide uppercase ${dark ? 'text-white/80' : 'text-[var(--section-accent)]'}`}
         >
           {eyebrow}
         </p>
@@ -22,7 +22,7 @@ export function HeroBannerSection({ section }: { section: PageSection }) {
       </h1>
       {body && (
         <p
-          className={`@pv-md:text-lg mx-auto mt-5 max-w-2xl text-base ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
+          className={`@pv-md:text-lg mx-auto mt-5 max-w-2xl text-base ${dark ? 'text-white/80' : 'text-[var(--section-muted)]'}`}
         >
           {body}
         </p>

package/src/views/page-editor/sections/parts.tsx

@@ -71,14 +71,10 @@ export function isDarkBackground(settings: SectionSettings): boolean {
  *
  * They were, and it made the canvas lie. `bg-card` and `bg-brand` follow the
  * admin's light/dark theme, so an editor working in dark mode saw a hero in
- * `#9D71F0` and body sections on a dark surface — while the live page renders
- * `violet-600` on white, whatever theme the editor happens to prefer. The
- * canvas exists to show the page as visitors get it; tracking the chrome's
- * theme is the one thing it must not do.
- *
- * In light mode this changes almost nothing: `--brand` resolves to `#7C3AED`,
- * which is `violet-600`. The whole difference was in dark mode, which is
- * exactly where it was least likely to be noticed.
+ * `#9D71F0` and body sections on a dark surface — while the live page paints
+ * from the site theme variables, defaulting to violet on white. The canvas
+ * exists to show the page as visitors get it; tracking the chrome's theme is
+ * the one thing it must not do.
  *
  * ── Why the strings are duplicated from sections-react ────────────────────
  *
@@ -91,10 +87,11 @@ export function isDarkBackground(settings: SectionSettings): boolean {
  * `section-class-parity.test.ts` asserts the strings still match the site's.
  */
 const PRESET_CLASSES: Record<BackgroundPreset, string> = {
-  'gradient-purple': 'bg-gradient-to-br from-violet-600 to-violet-700 text-white',
-  'solid-purple': 'bg-violet-600 text-white',
-  'solid-muted': 'bg-zinc-50 text-zinc-900',
-  plain: 'bg-white text-zinc-900',
+  'gradient-purple':
+    'bg-gradient-to-br from-[var(--section-accent)] to-[var(--section-accent-hover)] text-[var(--section-accent-foreground)]',
+  'solid-purple': 'bg-[var(--section-accent)] text-[var(--section-accent-foreground)]',
+  'solid-muted': 'bg-zinc-50 text-[var(--section-fg)]',
+  plain: 'bg-[var(--section-bg)] text-[var(--section-fg)]',
 }
 
 export function backgroundClass(settings: SectionSettings): string {
@@ -122,10 +119,10 @@ export function PreviewButton({
     '@pv-sm:w-auto inline-flex w-full items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium transition-colors'
   const toneClass =
     tone === 'onDark'
-      ? 'bg-card text-brand hover:bg-brand/10'
+      ? 'bg-[var(--section-bg)] text-[var(--section-accent)] hover:bg-[var(--section-accent-soft)]'
       : tone === 'ghost'
-        ? 'border border-border text-foreground hover:bg-muted'
-        : 'bg-brand text-white hover:bg-brand'
+        ? 'border border-zinc-300 text-zinc-700 hover:bg-zinc-50'
+        : 'bg-[var(--section-accent)] text-[var(--section-accent-foreground)] hover:bg-[var(--section-accent-hover)]'
   // Editor preview: links are inert (preventDefault) so clicking content
   // selects the section instead of navigating away.
   return (

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -5,6 +5,7 @@ import { CanvasEditTip } from '../../components/CanvasEditTip.js'
 import type { Zoom } from '../../lib/breakpoints.js'
 import type { PageSection, PostHeaderConfig } from '../../lib/post-editor-service.js'
 import { CanvasScroll, CanvasSurface, useSectionRefs } from '../page-editor/CanvasSurface.js'
+import { SectionThemeRoot } from '../page-editor/SectionThemeRoot.js'
 import { SectionRenderer, type PostRenderContext } from '../page-editor/sections/index.js'
 import { StructureNotice } from '../page-editor/StructureNotice.js'
 import { type ViewportId } from '../page-editor/viewports.js'
@@ -88,24 +89,26 @@ export function PostEditorCanvas({
           )
         }
       >
-        <PostHeader config={header} context={context} />
-        {sections.length === 0 ? (
-          <EmptyBody onAddSection={reviewing ? undefined : onAddSection} />
-        ) : (
-          sections.map((section) => (
-            <SectionRenderer
-              key={section.id}
-              section={section}
-              context={context}
-              editable
-              reviewing={reviewing}
-              changed={changedSectionIds?.has(section.id) ?? false}
-              selected={section.id === selectedId}
-              onSelect={onSelect}
-              registerRef={registerRef}
-            />
-          ))
-        )}
+        <SectionThemeRoot>
+          <PostHeader config={header} context={context} />
+          {sections.length === 0 ? (
+            <EmptyBody onAddSection={reviewing ? undefined : onAddSection} />
+          ) : (
+            sections.map((section) => (
+              <SectionRenderer
+                key={section.id}
+                section={section}
+                context={context}
+                editable
+                reviewing={reviewing}
+                changed={changedSectionIds?.has(section.id) ?? false}
+                selected={section.id === selectedId}
+                onSelect={onSelect}
+                registerRef={registerRef}
+              />
+            ))
+          )}
+        </SectionThemeRoot>
       </CanvasSurface>
     </CanvasScroll>
   )

package/src/views/settings/AppearanceTab.tsx

@@ -3,6 +3,7 @@
 import { AlertTriangle, Loader2 } from 'lucide-react'
 
 import { AdminThemeCard } from './AdminThemeCard.js'
+import { SiteThemeCard } from './SiteThemeCard.js'
 import { BrandPreviewCard } from './BrandPreviewCard.js'
 import { BrandingCard } from './BrandingCard.js'
 import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
@@ -65,6 +66,7 @@ export function AppearanceTab({ role, config }: AppearanceTabProps) {
 
       <BrandingCard s={s} canEdit={canEdit} />
       <AdminThemeCard s={s} canEdit={canEdit} />
+      <SiteThemeCard s={s} canEdit={canEdit} />
       <TypographyMotionCard s={s} canEdit={canEdit} />
       <BrandPreviewCard s={s} />
 

package/src/views/settings/McpConnectTab.tsx

@@ -0,0 +1,212 @@
+'use client'
+
+import * as Tabs from '@radix-ui/react-tabs'
+import { Copy, Loader2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { cmsApi } from '../../lib/api.js'
+import { SettingsCard } from './components.js'
+import { mcpClientGuides, type McpClientGuide, type McpClientId } from './mcp-connect.js'
+
+type Grant = {
+  id: string
+  clientId: string
+  scope: string
+  revokedAt: string | null
+}
+
+async function copyText(value: string, label: string) {
+  try {
+    await navigator.clipboard.writeText(value)
+    toast.success(`${label} copied`)
+  } catch {
+    toast.error('Could not copy. Select the text and copy it manually.')
+  }
+}
+
+function ClientPanel({ guide, onCreateKey }: { guide: McpClientGuide; onCreateKey?: () => void }) {
+  const [manual, setManual] = useState(false)
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-2">
+      <div className="space-y-4">
+        <div className="space-y-1">
+          <h3 className="text-lg font-medium">{guide.title}</h3>
+          <p className="text-muted-foreground text-sm">{guide.summary}</p>
+        </div>
+        <button
+          type="button"
+          className="bg-primary text-primary-foreground focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none"
+          onClick={() => void copyText(guide.copyText, guide.action.replace(/^Copy /, ''))}
+        >
+          <Copy size={16} aria-hidden="true" />
+          {guide.action}
+        </button>
+        <div>
+          <button
+            type="button"
+            className="text-primary focus-visible:ring-ring text-sm font-medium underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:outline-none"
+            aria-expanded={manual}
+            onClick={() => setManual((open) => !open)}
+          >
+            Prefer manual configuration?
+          </button>
+          {manual && (
+            <ol className="text-muted-foreground mt-3 list-decimal space-y-2 pl-5 text-sm">
+              {guide.manual.map((step) => (
+                <li key={step}>{step}</li>
+              ))}
+            </ol>
+          )}
+        </div>
+        {guide.needsApiKey && onCreateKey && (
+          <button
+            type="button"
+            className="text-foreground focus-visible:ring-ring text-sm font-medium underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:outline-none"
+            onClick={onCreateKey}
+          >
+            Create a Content API key
+          </button>
+        )}
+      </div>
+      <div className="border-border bg-muted relative rounded-lg border">
+        <button
+          type="button"
+          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-2 right-2 rounded-md p-2 focus-visible:ring-2 focus-visible:outline-none"
+          aria-label={guide.action}
+          onClick={() => void copyText(guide.copyText, guide.action.replace(/^Copy /, ''))}
+        >
+          <Copy size={16} aria-hidden="true" />
+        </button>
+        <pre className="max-h-80 overflow-auto p-4 pr-12 font-mono text-sm whitespace-pre-wrap">
+          {guide.panel}
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Settings → MCP. One tab per client, matching the "copy this and paste it
+ * there" setup other site builders use. The URL comes from the server so the
+ * Host header is never trusted.
+ */
+export function McpConnectTab({ onNavigate }: { onNavigate?: (path: string) => void }) {
+  const [mcpUrl, setMcpUrl] = useState('')
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [grants, setGrants] = useState<Grant[]>([])
+  const [client, setClient] = useState<McpClientId>('claude-code')
+
+  function loadGrants() {
+    void cmsApi<Grant[]>('/mcp/oauth/grants').then((res) => {
+      if (res.data) setGrants(res.data.filter((grant) => !grant.revokedAt))
+    })
+  }
+
+  useEffect(() => {
+    let cancelled = false
+    void cmsApi<{ mcpUrl: string }>('/mcp/oauth/setup').then((res) => {
+      if (cancelled) return
+      setLoading(false)
+      if (res.error || !res.data?.mcpUrl) {
+        setLoadError(
+          res.error ?? 'This site has no public URL yet, so there is nothing to connect.',
+        )
+        return
+      }
+      setMcpUrl(res.data.mcpUrl)
+    })
+    loadGrants()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  async function revoke(id: string) {
+    const res = await cmsApi<{ note: string }>(`/mcp/oauth/grants/${encodeURIComponent(id)}`, {
+      method: 'DELETE',
+    })
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(res.data?.note ?? 'Disconnected')
+    loadGrants()
+  }
+
+  const guides = mcpUrl ? mcpClientGuides(mcpUrl) : []
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-1">
+        <h2 className="text-lg font-medium">MCP</h2>
+        <p className="text-muted-foreground text-sm">
+          Connect an AI agent to this site. It can draft and edit pages, then you approve what goes
+          live.
+        </p>
+      </div>
+
+      {loading ? (
+        <div className="text-muted-foreground flex items-center gap-2 text-sm">
+          <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+          Loading connection details
+        </div>
+      ) : loadError ? (
+        <p role="alert" className="text-destructive text-sm">
+          {loadError}
+        </p>
+      ) : (
+        <Tabs.Root value={client} onValueChange={(value) => setClient(value as McpClientId)}>
+          <Tabs.List
+            aria-label="AI clients"
+            className="border-border mb-6 flex gap-1 overflow-x-auto border-b"
+          >
+            {guides.map((guide) => (
+              <Tabs.Trigger
+                key={guide.id}
+                value={guide.id}
+                className="text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground focus-visible:ring-ring px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none data-[state=active]:border-b-2"
+              >
+                {guide.label}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+          {guides.map((guide) => (
+            <Tabs.Content key={guide.id} value={guide.id} className="focus-visible:outline-none">
+              <ClientPanel
+                guide={guide}
+                onCreateKey={onNavigate ? () => onNavigate('/settings?tab=api-keys') : undefined}
+              />
+            </Tabs.Content>
+          ))}
+        </Tabs.Root>
+      )}
+
+      <SettingsCard
+        title="Connected apps"
+        description="Revoke stops new requests immediately. An access token already issued can keep working for up to 15 minutes."
+      >
+        {grants.length === 0 ? (
+          <p className="text-muted-foreground text-sm">No apps connected yet.</p>
+        ) : (
+          <ul className="space-y-2">
+            {grants.map((grant) => (
+              <li key={grant.id} className="flex items-center justify-between gap-3 text-sm">
+                <span className="min-w-0 truncate">{grant.clientId}</span>
+                <button
+                  type="button"
+                  className="text-destructive focus-visible:ring-ring shrink-0 font-medium hover:underline focus-visible:ring-2 focus-visible:outline-none"
+                  onClick={() => void revoke(grant.id)}
+                >
+                  Revoke
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </SettingsCard>
+    </div>
+  )
+}

package/src/views/settings/PhiSafeguardsCard.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { cmsApi } from '../../lib/api.js'
+import { Toggle } from '../../components/ui/Toggle.js'
+import { SettingsCard } from './components.js'
+
+/**
+ * Disclosure boundary for form submissions. Turning this on refuses lead
+ * values to API keys, MCP, and vision alt-text. It is a technical safeguard,
+ * not a compliance certification.
+ */
+export function PhiSafeguardsCard({ canEdit }: { canEdit: boolean }) {
+  const [enabled, setEnabled] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [hidden, setHidden] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    cmsApi<{ phiSafeguards: boolean }>('/privacy')
+      .then((res) => {
+        if (cancelled) return
+        if ('error' in res && res.error) {
+          setHidden(true)
+          return
+        }
+        if ('data' in res) setEnabled(Boolean(res.data?.phiSafeguards))
+      })
+      .catch(() => {
+        if (!cancelled) setHidden(true)
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (hidden || loading) return null
+
+  async function onToggle(next: boolean) {
+    if (!canEdit || saving) return
+    setSaving(true)
+    const previous = enabled
+    setEnabled(next)
+    try {
+      const res = await cmsApi('/privacy', {
+        method: 'PUT',
+        body: JSON.stringify({ phiSafeguards: next }),
+      })
+      if ('error' in res && res.error) throw new Error(res.error)
+      toast.success(
+        next ? 'Health-information protection is on' : 'Health-information protection is off',
+      )
+    } catch {
+      setEnabled(previous)
+      toast.error('Could not update health-information protection')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <SettingsCard
+      title="Protect health information"
+      description="When on, API keys and connected AI apps cannot read form submission contents, and image alt-text generation is refused. People signed in to the admin can still open the inbox. This is a technical safeguard. It does not certify the site for any regulation."
+      busy={saving}
+    >
+      <div className="flex items-center justify-between gap-4">
+        <label htmlFor="phi-safeguards" className="text-sm text-[var(--txt)]">
+          Hide lead contents from API keys and AI
+        </label>
+        <Toggle
+          id="phi-safeguards"
+          checked={enabled}
+          disabled={!canEdit || saving}
+          onCheckedChange={(checked) => void onToggle(checked)}
+        />
+      </div>
+    </SettingsCard>
+  )
+}

package/src/views/settings/SecurityTab.tsx

@@ -16,6 +16,7 @@ import { SecurityStatusCard } from './SecurityStatusCard.js'
 import { CaptchaStatusCard } from './CaptchaStatusCard.js'
 import { SessionPolicyCard } from './SessionPolicyCard.js'
 import { useSecuritySettings } from './useSecuritySettings.js'
+import { PhiSafeguardsCard } from './PhiSafeguardsCard.js'
 
 function CardSkeleton() {
   return (
@@ -145,6 +146,8 @@ export function SecurityTab({
         />
       </div>
 
+      <PhiSafeguardsCard canEdit={canEdit || role === 'OWNER'} />
+
       <div id="security-audit" className="space-y-4">
         {canEdit && <AuditLogExportCard />}
         <SecretsAuditCard

package/src/views/settings/SiteThemeCard.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import type { PublicTheme } from '@prenta/core/appearance'
+
+import type { UseAppearanceSettings } from './useAppearanceSettings.js'
+
+const FIELDS: { key: keyof PublicTheme; label: string; hint: string }[] = [
+  { key: 'accent', label: 'Accent', hint: 'Buttons and highlights. Example: #7c3aed' },
+  { key: 'background', label: 'Background', hint: 'Page surface. Example: #ffffff' },
+  { key: 'foreground', label: 'Text', hint: 'Body text. Example: #18181b' },
+  { key: 'muted', label: 'Muted text', hint: 'Secondary text. Example: #71717a' },
+  { key: 'fontFamily', label: 'Font', hint: 'A font already on the site. Example: Georgia, serif' },
+  { key: 'radius', label: 'Corner radius', hint: 'Example: 0.75rem' },
+]
+
+function isColorKey(key: keyof PublicTheme): boolean {
+  return key === 'accent' || key === 'background' || key === 'foreground' || key === 'muted'
+}
+
+/** Public site theme. Empty fields keep the built-in section palette. */
+export function SiteThemeCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit: boolean }) {
+  return (
+    <section className="border-border bg-card space-y-4 rounded-lg border p-6">
+      <h3 className="text-lg font-medium">Site theme</h3>
+      <p className="text-muted-foreground text-sm">
+        Colors and type for published pages. Leave a field empty to keep the default.
+      </p>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {FIELDS.map(({ key, label, hint }) => {
+          const value = s.appearance.publicTheme[key] ?? ''
+          const issue = s.issues.find((item) => item.field === `publicTheme.${key}`)
+          const id = `site-theme-${key}`
+          return (
+            <div key={key} className="space-y-1">
+              <label htmlFor={id} className="text-sm font-medium">
+                {label}
+              </label>
+              <div className="flex items-center gap-2">
+                {isColorKey(key) && value ? (
+                  <span
+                    aria-hidden
+                    className="border-border size-8 shrink-0 rounded-md border"
+                    style={{ background: value }}
+                  />
+                ) : null}
+                <input
+                  id={id}
+                  value={value}
+                  disabled={!canEdit}
+                  aria-invalid={issue ? true : undefined}
+                  aria-describedby={issue ? `${id}-error` : `${id}-hint`}
+                  onChange={(event) => s.setPublicTheme({ [key]: event.target.value })}
+                  className="border-input bg-background w-full rounded-md border px-3 py-2 text-sm disabled:opacity-60"
+                />
+              </div>
+              {issue ? (
+                <p id={`${id}-error`} className="text-destructive text-sm">
+                  {issue.message}
+                </p>
+              ) : (
+                <p id={`${id}-hint`} className="text-muted-foreground text-sm">
+                  {hint}
+                </p>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}