@prenta/admin 2.5.0 → 2.6.1

package/src/__tests__/views/mcp-connect.render.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string }) => {
+  if (endpoint === '/mcp/oauth/setup') {
+    return { data: { mcpUrl: 'https://example.com/mcp' }, status: 200 }
+  }
+  if (endpoint === '/mcp/oauth/grants' && options?.method === 'DELETE') {
+    return { data: { note: 'Disconnected' }, status: 200 }
+  }
+  if (endpoint === '/mcp/oauth/grants') {
+    return {
+      data: [
+        {
+          id: 'grant-1',
+          clientId: 'https://claude.ai/oauth/client',
+          scope: 'content',
+          revokedAt: null,
+        },
+      ],
+      status: 200,
+    }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as never) }))
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+
+const { McpConnectTab } = await import('../../views/settings/McpConnectTab.js')
+
+beforeEach(() => {
+  cmsApi.mockClear()
+})
+
+describe('McpConnectTab', () => {
+  it('shows a Claude Code prompt and switches to the Cursor config', async () => {
+    const onNavigate = vi.fn()
+    render(<McpConnectTab onNavigate={onNavigate} />)
+
+    expect(
+      await screen.findByRole('heading', { name: 'Connect this site to Claude Code' }),
+    ).toBeTruthy()
+    expect(screen.getByText(/Do not store an API key/)).toBeTruthy()
+    expect(screen.getByText(/send each photo as its own file/)).toBeTruthy()
+    expect(screen.getByText(/claude mcp add --transport http example-prenta/)).toBeTruthy()
+
+    const cursor = screen.getByRole('tab', { name: 'Cursor' })
+    fireEvent.mouseDown(cursor)
+    fireEvent.click(cursor)
+    expect(screen.getByRole('heading', { name: 'Connect this site to Cursor' })).toBeTruthy()
+    expect(screen.getByText(/PRENTA_API_KEY/)).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create a Content API key' }))
+    expect(onNavigate).toHaveBeenCalledWith('/settings?tab=api-keys')
+  })
+
+  it('lists a connected app and revokes it', async () => {
+    render(<McpConnectTab />)
+    expect(await screen.findByText('https://claude.ai/oauth/client')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Revoke' }))
+    expect(cmsApi).toHaveBeenCalledWith('/mcp/oauth/grants/grant-1', { method: 'DELETE' })
+  })
+})

package/src/__tests__/views/mcp-connect.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+
+import { mcpClientGuides, mcpServerName } from '../../views/settings/mcp-connect.js'
+
+const URL = 'https://example.com/mcp'
+
+describe('mcp connection guides', () => {
+  it('names the server from the site host', () => {
+    expect(mcpServerName('https://www.example.com/mcp')).toBe('example-prenta')
+    expect(mcpServerName('not a url')).toBe('site-prenta')
+  })
+
+  it('gives Claude Code a prompt with the URL and no API key', () => {
+    const guide = mcpClientGuides(URL).find((item) => item.id === 'claude-code')!
+    expect(guide.action).toBe('Copy prompt')
+    expect(guide.copyText).toBe(guide.panel)
+    expect(guide.copyText).toContain(URL)
+    expect(guide.copyText).toContain('claude mcp add --transport http example-prenta')
+    expect(guide.copyText).not.toContain('act_sk_')
+    expect(guide.needsApiKey).toBe(false)
+  })
+
+  it('tells ChatGPT to sign in and not to use an API key', () => {
+    const guide = mcpClientGuides(URL).find((item) => item.id === 'chatgpt')!
+    expect(guide.copyText).toBe(URL)
+    expect(guide.summary).toMatch(/cannot use an API key/i)
+    expect(guide.needsApiKey).toBe(false)
+  })
+
+  it('gives Cursor and VS Code different configs with a placeholder key', () => {
+    const guides = mcpClientGuides(URL)
+    const cursor = guides.find((item) => item.id === 'cursor')!
+    const vscode = guides.find((item) => item.id === 'vscode')!
+    expect(cursor.copyText).toContain('"mcpServers"')
+    expect(cursor.copyText).toContain('"PRENTA_BASE_URL": "https://example.com"')
+    expect(cursor.copyText).toContain('"PRENTA_API_KEY": "act_sk_..."')
+    expect(cursor.copyText).not.toMatch(/act_sk_[a-z0-9]/i)
+    expect(vscode.copyText).toContain('"servers"')
+    expect(vscode.copyText).toContain('"type": "stdio"')
+    expect(vscode.needsApiKey).toBe(true)
+  })
+})

package/src/lib/appearance-api.ts

@@ -18,6 +18,14 @@ export interface AppearanceApiResponse {
     sidebarDensity: SidebarDensity
     contentFont: string
     reduceMotion: boolean
+    publicTheme?: {
+      accent?: string
+      background?: string
+      foreground?: string
+      muted?: string
+      fontFamily?: string
+      radius?: string
+    }
   }
   brand: BrandSettings
   resolved: { admin: { initials: string } }

package/src/views/ApiKeys.tsx

@@ -19,7 +19,6 @@ import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { ReauthDialog } from '../components/ui/ReauthDialog.js'
 import { SettingsCard } from './settings/components.js'
-import { McpSetupCard } from './settings/McpSetupCard.js'
 
 const DIALOG_INPUT_CLASS =
   'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'
@@ -78,7 +77,7 @@ function formatDate(value: string | null): string {
   }
 }
 
-export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
+export function ApiKeys({ embedded = false, onNavigate }: ApiKeysProps = {}) {
   const { data, loading, error, refetch } = useApiData<ApiKeyRecord[]>('/api-keys')
   const [showCreate, setShowCreate] = useState(false)
   const [createdKey, setCreatedKey] = useState<{ key: string; record: ApiKeyRecord } | null>(null)
@@ -97,15 +96,15 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
 
   return (
     <div className={`${rootPadding} space-y-4`}>
-      <McpSetupCard />
       <SettingsCard
         headingLevel="h2"
         title="API Keys"
         description={
           <>
-            Long-lived credentials for programmatic access. Use the{' '}
+            Long-lived credentials for Cursor, VS Code, and other clients that cannot sign in.
+            Claude, ChatGPT, and Grok on the web connect from the MCP tab. Use the{' '}
             <code className="bg-muted rounded px-1 py-0.5 text-xs">Authorization: Bearer</code>{' '}
-            header instead of session cookies. API key requests skip CSRF.
+            header. API key requests skip CSRF.
           </>
         }
         actions={

package/src/views/Settings.tsx

@@ -10,6 +10,7 @@ import {
   Mail,
   Users as UsersIcon,
   KeyRound,
+  Plug,
 } from 'lucide-react'
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { toast } from 'sonner'
@@ -28,6 +29,7 @@ import { UpdatesTab } from './settings/UpdatesTab.js'
 import { WebhooksTab } from './settings/WebhooksTab.js'
 import { Users as UsersView } from './Users.js'
 import { ApiKeys as ApiKeysView } from './ApiKeys.js'
+import { McpConnectTab } from './settings/McpConnectTab.js'
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void
@@ -91,6 +93,7 @@ export function Settings({
         ...(hasLayoutRegions ? ['layout'] : []),
         'security',
         'users',
+        'mcp',
         'api-keys',
         'seo',
         'email',
@@ -215,6 +218,12 @@ export function Settings({
               Users
             </span>
           </Tabs.Trigger>
+          <Tabs.Trigger value="mcp" className={tabTriggerClass}>
+            <span className="flex items-center gap-1.5">
+              <Plug className="h-4 w-4" />
+              MCP
+            </span>
+          </Tabs.Trigger>
           <Tabs.Trigger value="api-keys" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <KeyRound className="h-4 w-4" />
@@ -346,6 +355,10 @@ export function Settings({
           <UsersView onNavigate={onNavigate} embedded currentPath={currentPath} />
         </Tabs.Content>
 
+        <Tabs.Content value="mcp">
+          <McpConnectTab onNavigate={onNavigate} />
+        </Tabs.Content>
+
         <Tabs.Content value="api-keys">
           <ApiKeysView onNavigate={onNavigate} embedded />
         </Tabs.Content>

package/src/views/page-editor/EditorCanvas.tsx

@@ -13,6 +13,7 @@ import {
   type ThemeChromeEditTarget,
   type ThemeChromeMode,
 } from '../../lib/theme-chrome.js'
+import { SectionThemeRoot } from './SectionThemeRoot.js'
 import { SectionRenderer } from './sections/index.js'
 import { StructureNotice } from './StructureNotice.js'
 import { ThemeChromeFrame, ThemeChromeHealth } from './theme-chrome/index.js'
@@ -172,7 +173,7 @@ export function EditorCanvas({
           )
         }
       >
-        {inner}
+        <SectionThemeRoot>{inner}</SectionThemeRoot>
       </CanvasSurface>
     </CanvasScroll>
   )

package/src/views/page-editor/SectionThemeRoot.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { publicThemeCssVars, type PublicTheme } from '@prenta/core/appearance'
+import { useEffect, useState, type CSSProperties, type ReactNode } from 'react'
+
+import { cmsApi } from '../../lib/api.js'
+
+/**
+ * Paints the public section theme onto the editor canvas. The stylesheet
+ * defaults apply when the site has not set a theme. A failed load keeps
+ * those defaults.
+ */
+export function SectionThemeRoot({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<PublicTheme>({})
+
+  useEffect(() => {
+    let cancelled = false
+    void cmsApi<{ appearance?: { publicTheme?: PublicTheme } }>('/appearance').then((res) => {
+      if (cancelled || !res.data?.appearance?.publicTheme) return
+      setTheme(res.data.appearance.publicTheme)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const style = publicThemeCssVars(theme) as CSSProperties
+  return (
+    <div className="prenta-sections" style={style}>
+      {children}
+    </div>
+  )
+}

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

@@ -36,7 +36,7 @@ export function AuthorBioSection({
               className="h-14 w-14 shrink-0 rounded-full object-cover"
             />
           ) : (
-            <span className="bg-brand/10 text-brand flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-sm font-medium">
+            <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-[var(--section-accent-soft)] text-sm font-medium text-[var(--section-accent)]">
               {initials || '?'}
             </span>
           ))}
@@ -49,7 +49,7 @@ export function AuthorBioSection({
           <p className="text-foreground mt-0.5 text-base font-medium">{name}</p>
           <p className="text-muted-foreground mt-1 text-sm leading-relaxed">{bio}</p>
           {showSocial && (
-            <div className="text-brand mt-2 flex gap-3 text-sm">
+            <div className="mt-2 flex gap-3 text-sm text-[var(--section-accent)]">
               <span>Twitter</span>
               <span>LinkedIn</span>
             </div>

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

@@ -26,7 +26,7 @@ export function ByTheNumbersSection({ section }: { section: PageSection }) {
         <dl className="@pv-sm:grid-cols-2 @pv-lg:grid-cols-3 mt-10 grid grid-cols-1 gap-8">
           {stats.map((s, i) => (
             <div key={i}>
-              <dt className="text-brand text-4xl font-semibold tracking-tight">
+              <dt className="text-4xl font-semibold tracking-tight text-[var(--section-accent)]">
                 {String(s.value ?? '')}
               </dt>
               <dd className="text-foreground mt-2 text-sm font-medium">{String(s.label ?? '')}</dd>

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

@@ -14,7 +14,7 @@ export function CtaBannerSection({ section }: { section: PageSection }) {
       </h2>
       {body && (
         <p
-          className={`mx-auto mt-3 max-w-xl text-base ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
+          className={`mx-auto mt-3 max-w-xl text-base ${dark ? 'text-white/80' : 'text-[var(--section-muted)]'}`}
         >
           {body}
         </p>

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} />