@prenta/admin 1.9.1 → 1.10.0

package/src/layout/Sidebar.tsx

@@ -34,34 +34,9 @@ import {
   Trash2,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
-import { PrentaBrandLogo } from '../assets/prenta-logo.js'
+import { PrentaBrandLogo, PrentaMark } from '../assets/prenta-logo.js'
 import { LogoPlaceholder } from '../components/LogoPlaceholder.js'
 
-/**
- * Compact mark used in the collapsed sidebar — just the "C" symbol from the
- * full lockup, drawn as its own simple SVG so it stays crisp at 32×32.
- */
-function PrentaMark({ className }: { className?: string }) {
-  return (
-    <svg
-      viewBox="0 0 40 44"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      aria-hidden="true"
-    >
-      <polygon points="20,2 6,18 12,18 20,8 28,18 34,18" fill="#F05E65" />
-      <rect x="11" y="20" width="4" height="22" rx="1" fill="#F05E65" />
-      <rect x="18" y="20" width="4" height="22" rx="1" fill="#F05E65" />
-      <rect x="25" y="20" width="4" height="22" rx="1" fill="#F05E65" />
-    </svg>
-  )
-}
-
-function PrentaWordmark({ className }: { className?: string }) {
-  return <PrentaBrandLogo className={className} />
-}
-
 const ICON_MAP: Record<string, LucideIcon> = {
   file: File,
   'file-text': FileText,
@@ -180,7 +155,7 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
     )
   }
 
-  return <PrentaWordmark className="h-9" />
+  return <PrentaBrandLogo className="h-8 w-auto" />
 }
 
 /**

package/src/lib/theme-chrome.ts

@@ -0,0 +1,172 @@
+/**
+ * Theme chrome — site header/footer in the page editor canvas.
+ *
+ * Pure helpers and the public contract. React lives in
+ * `views/page-editor/theme-chrome/`. Do not put renderers on
+ * `prenta.config.ts` — this file is imported from the admin bundle only.
+ */
+
+import type { ReactNode } from 'react'
+import type { BreakpointId } from './breakpoints.js'
+
+export type ThemeChromeMode = 'flow' | 'frame'
+export type ThemeChromeSurface = 'pages' | 'posts'
+export type ThemeChromeEditTarget = 'navigations' | 'appearance' | 'settings'
+export type ThemeChromeSlotStatus = 'ok' | 'preview' | 'fallback' | 'placeholder'
+
+export interface ThemeChromeDocument {
+  id: string | null
+  title: string
+  path: string
+  collection: string
+}
+
+export interface AdminThemeChromeProps {
+  region: 'header' | 'footer'
+  breakpoint: BreakpointId
+  mode: ThemeChromeMode
+  preview: true
+  locale: string
+  dir: 'ltr' | 'rtl'
+  document: ThemeChromeDocument
+  onEditChrome: (target: ThemeChromeEditTarget) => void
+}
+
+export type AdminThemeChromeRenderer = (props: AdminThemeChromeProps) => ReactNode
+
+export interface AdminThemeChrome {
+  header?: AdminThemeChromeRenderer
+  footer?: AdminThemeChromeRenderer
+  /** Shown when header/footer throw or are omitted but chrome is enabled. */
+  fallback?: AdminThemeChromeRenderer
+  /**
+   * Same-origin URL for hosts whose real chrome is server-only.
+   * Rendered in a sandboxed iframe inside the chrome slot; never the whole page.
+   */
+  previewSrc?: { header?: string; footer?: string }
+  /** Surfaces that mount chrome. Default: pages only. */
+  surfaces?: ThemeChromeSurface[]
+  /** Default canvas mode. Default: flow (real document scroll). */
+  defaultMode?: ThemeChromeMode
+  /**
+   * Optional health-strip extras. Hosts that already know nav/brand state
+   * can pass them; the canvas will not fetch on their behalf.
+   */
+  diagnostics?: { navLinkCount?: number; brandPresent?: boolean }
+}
+
+export const THEME_CHROME_MODE_KEY = 'prenta-theme-chrome-mode'
+export const THEME_CHROME_MAIN_ID = 'prenta-canvas-main'
+
+export function isThemeChromeEnabled(
+  spec: AdminThemeChrome | null | undefined,
+  killSwitch: boolean | { pages?: boolean; posts?: boolean } | undefined,
+  surface: ThemeChromeSurface,
+): boolean {
+  if (!spec) return false
+  const surfaces = spec.surfaces ?? ['pages']
+  if (!surfaces.includes(surface)) return false
+  if (killSwitch === false) return false
+  if (killSwitch && typeof killSwitch === 'object' && killSwitch[surface] === false) {
+    return false
+  }
+  return true
+}
+
+export function readStoredChromeMode(): ThemeChromeMode | null {
+  if (typeof window === 'undefined') return null
+  try {
+    const value = window.localStorage.getItem(THEME_CHROME_MODE_KEY)
+    return value === 'flow' || value === 'frame' ? value : null
+  } catch {
+    return null
+  }
+}
+
+export function writeStoredChromeMode(mode: ThemeChromeMode): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(THEME_CHROME_MODE_KEY, mode)
+  } catch {
+    // Private mode / quota — mode still works for this session.
+  }
+}
+
+export function resolveThemeChromeLocale(opts: {
+  documentLocale?: string | null
+  activeLocale?: string | null
+  defaultLocale?: string | null
+}): string {
+  const picked = opts.documentLocale || opts.activeLocale || opts.defaultLocale || 'en'
+  return picked.trim() || 'en'
+}
+
+export function resolveThemeChromeDir(
+  locale: string,
+  locales: Array<{ code: string; dir?: 'ltr' | 'rtl' }>,
+): 'ltr' | 'rtl' {
+  return locales.find((entry) => entry.code === locale)?.dir === 'rtl' ? 'rtl' : 'ltr'
+}
+
+/**
+ * Public path for chrome context. Serving-path first; never an admin route.
+ */
+export function resolveThemeChromePath(path: string | null | undefined, slug?: string): string {
+  const trimmed = (path ?? '').trim()
+  if (trimmed) return trimmed.startsWith('/') ? trimmed : `/${trimmed}`
+  const s = (slug ?? '').trim().replace(/^\/+/, '')
+  if (!s || s === 'home' || s === 'index') return '/'
+  return `/${s}`
+}
+
+export function themeChromeEditPath(target: ThemeChromeEditTarget): string {
+  switch (target) {
+    case 'navigations':
+      return '/navigations'
+    case 'appearance':
+      return '/settings?tab=appearance'
+    case 'settings':
+      return '/settings?tab=general'
+    default: {
+      const _exhaustive: never = target
+      return _exhaustive
+    }
+  }
+}
+
+/**
+ * Same-origin chrome-only preview URLs. Relative paths starting with `/`
+ * (not `//`) are allowed. Absolute URLs must match `origin`. Protocol-relative,
+ * data:, javascript:, and off-origin URLs are rejected.
+ */
+export function isSameOriginPreviewSrc(src: string, origin?: string): boolean {
+  const trimmed = src.trim()
+  if (!trimmed) return false
+  if (trimmed.startsWith('/') && !trimmed.startsWith('//')) {
+    return !trimmed.toLowerCase().startsWith('/\\') && !/^[a-z][a-z0-9+.-]*:/i.test(trimmed)
+  }
+  let parsed: URL
+  try {
+    parsed = new URL(trimmed)
+  } catch {
+    return false
+  }
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return false
+  const expected = origin ?? (typeof window !== 'undefined' ? window.location.origin : '')
+  if (!expected) return false
+  try {
+    return parsed.origin === new URL(expected).origin
+  } catch {
+    return false
+  }
+}
+
+export function chromeContainsH1(root: ParentNode | null): boolean {
+  return Boolean(root?.querySelector('h1'))
+}
+
+export function closestAnchor(target: EventTarget | null): HTMLAnchorElement | null {
+  if (!(target instanceof Element)) return null
+  const found = target.closest('a[href]')
+  return found instanceof HTMLAnchorElement ? found : null
+}

package/src/views/Login.tsx

@@ -53,7 +53,7 @@ export interface LoginProps {
   captchaConfig?: CaptchaConfig
   /**
    * Custom branding for the login screen. Falls back to the bundled Prenta
-   * Media wordmark + "Prenta CMS" headline when omitted.
+   * wordmark when omitted.
    */
   branding?: LoginBrandingConfig
 }
@@ -377,9 +377,10 @@ export function Login({
   const hasInitials = (value: string | null | undefined) => Boolean(value) && value !== 'A'
   const isBranded =
     Boolean(branding?.name) || hasInitials(adminBrand.initials) || hasInitials(publicInitials)
-  // When a logo image is shown it already carries the brand mark — a separate
-  // headline duplicates it (see Settings → Appearance uploads).
-  const showBrandName = !effectiveLogo
+  // A logo image or the bundled wordmark already carries the brand — a
+  // separate headline would duplicate it. Keep the name only for the
+  // branded-but-logo-less placeholder.
+  const showBrandName = !effectiveLogo && isBranded
 
   return (
     <div className="bg-muted flex min-h-screen items-center justify-center px-4">

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

@@ -21,6 +21,17 @@ export interface CanvasSurfaceProps {
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Tips, notices, or the review bar — rendered above the meta line. */
   chrome?: React.ReactNode
+  /** Theme-chrome health strip — locale, slot status, outline warning. */
+  health?: React.ReactNode
+  /** `lang` on `.prenta-canvas` when theme chrome is mounted. */
+  lang?: string
+  /** `dir` on `.prenta-canvas` when theme chrome is mounted. */
+  dir?: 'ltr' | 'rtl'
+  /**
+   * `frame` fills the remaining pane and expects children to scroll internally.
+   * `flow` (default) sizes the canvas from content height, as today.
+   */
+  fillMode?: 'flow' | 'frame'
   /** The page itself. Rendered inside the scaled, container-queried surface. */
   children: React.ReactNode
 }
@@ -57,14 +68,22 @@ export function CanvasSurface({
   onScaleChange,
   onCanvasElement,
   chrome,
+  health,
+  lang,
+  dir,
+  fillMode = 'flow',
   children,
 }: CanvasSurfaceProps) {
   const bp = getBreakpoint(breakpoint)
   const sentinelRef = useRef<HTMLDivElement>(null)
   const surfaceRef = useRef<HTMLDivElement>(null)
+  const areaRef = useRef<HTMLDivElement>(null)
 
   const [available, setAvailable] = useState(0)
   const [pageHeight, setPageHeight] = useState(0)
+  const [areaHeight, setAreaHeight] = useState(0)
+
+  const isFrame = fillMode === 'frame'
 
   // No dependency array: page height changes on edits that resize nothing the
   // observer watches. Both setters bail when the value is unchanged, so this
@@ -76,6 +95,9 @@ export function CanvasSurface({
 
       const height = surfaceRef.current?.offsetHeight ?? 0
       if (height > 0) setPageHeight((prev) => (prev === height ? prev : height))
+
+      const area = areaRef.current?.clientHeight ?? 0
+      if (area > 0) setAreaHeight((prev) => (prev === area ? prev : area))
     }
 
     measure()
@@ -83,10 +105,12 @@ export function CanvasSurface({
     const ro = new ResizeObserver(measure)
     if (sentinelRef.current) ro.observe(sentinelRef.current)
     if (surfaceRef.current) ro.observe(surfaceRef.current)
+    if (areaRef.current) ro.observe(areaRef.current)
     return () => ro.disconnect()
   })
 
   const scale = fitScale(available, bp.width, zoom)
+  const frameUnscaledHeight = isFrame && scale > 0 && areaHeight > 0 ? areaHeight / scale : 0
 
   useEffect(() => {
     onScaleChange?.(scale)
@@ -104,6 +128,7 @@ export function CanvasSurface({
 
       {chrome}
       <CanvasMetaLine breakpoint={bp} pageHeight={pageHeight} scale={scale} />
+      {health}
 
       {/*
        * Fit box: reserves the scaled footprint so the surrounding scroll area
@@ -112,32 +137,41 @@ export function CanvasSurface({
        * that is not visible never finishes one) reports a bogus height and
        * corrupts the next measurement.
        */}
-      <div
-        className="prenta-canvas-fit mx-auto block"
-        style={{
-          width: Math.round(bp.width * scale),
-          height: pageHeight ? Math.round(pageHeight * scale) : undefined,
-        }}
-      >
-        {/* `prenta-canvas` is the public hook for consumer brand CSS: site
-            styles that should render in this preview scope to
-            `.prenta-admin .prenta-canvas` instead of the admin root. It also
-            carries `container-type: inline-size` (theme.css) — that is what
-            makes the `@pv-*` steps in the section renderers resolve against
-            the simulated width instead of the viewport. */}
+      <div ref={areaRef} className={isFrame ? 'relative min-h-0 flex-1' : undefined}>
         <div
-          ref={(el) => {
-            surfaceRef.current = el
-            onCanvasElement?.(el)
-          }}
-          className="prenta-canvas border-border bg-card origin-top-left overflow-hidden rounded-lg text-left shadow-[0_2px_20px_rgba(0,0,0,0.12)] motion-safe:transition-[width,transform] motion-safe:duration-(--mo-slow) motion-safe:ease-(--ease)"
+          className="prenta-canvas-fit mx-auto block"
           style={{
-            width: bp.width,
-            transform: `scale(${scale})`,
-            transformOrigin: 'top left',
+            width: Math.round(bp.width * scale),
+            height: isFrame
+              ? areaHeight || undefined
+              : pageHeight
+                ? Math.round(pageHeight * scale)
+                : undefined,
           }}
         >
-          {children}
+          {/* `prenta-canvas` is the public hook for consumer brand CSS: site
+              styles that should render in this preview scope to
+              `.prenta-admin .prenta-canvas` instead of the admin root. It also
+              carries `container-type: inline-size` (theme.css) — that is what
+              makes the `@pv-*` steps in the section renderers resolve against
+              the simulated width instead of the viewport. */}
+          <div
+            ref={(el) => {
+              surfaceRef.current = el
+              onCanvasElement?.(el)
+            }}
+            lang={lang}
+            dir={dir}
+            className="prenta-canvas border-border bg-card origin-top-left overflow-hidden rounded-lg text-left shadow-[0_2px_20px_rgba(0,0,0,0.12)] motion-safe:transition-[width,transform] motion-safe:duration-(--mo-slow) motion-safe:ease-(--ease)"
+            style={{
+              width: bp.width,
+              height: isFrame && frameUnscaledHeight ? frameUnscaledHeight : undefined,
+              transform: `scale(${scale})`,
+              transformOrigin: 'top left',
+            }}
+          >
+            {children}
+          </div>
         </div>
       </div>
     </>
@@ -145,9 +179,21 @@ export function CanvasSurface({
 }
 
 /** The scroll container both editors wrap their surface in. */
-export function CanvasScroll({ children }: { children: React.ReactNode }) {
+export function CanvasScroll({
+  children,
+  layout = 'flow',
+}: {
+  children: React.ReactNode
+  layout?: 'flow' | 'frame'
+}) {
   return (
-    <div className="prenta-canvas-scroll bg-muted h-full overflow-auto px-6 pt-4.5 pb-10 text-center">
+    <div
+      className={
+        layout === 'frame'
+          ? 'prenta-canvas-scroll bg-muted flex h-full min-h-0 flex-col overflow-hidden px-6 pt-4.5 pb-10 text-center'
+          : 'prenta-canvas-scroll bg-muted h-full overflow-auto px-6 pt-4.5 pb-10 text-center'
+      }
+    >
       {children}
     </div>
   )

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

@@ -1,12 +1,22 @@
 'use client'
 
+import { useCallback, useMemo, useState } from 'react'
 import { LayoutTemplate } from 'lucide-react'
 import { CanvasEditTip } from '../../components/CanvasEditTip.js'
 import { CanvasScroll, CanvasSurface, useSectionRefs } from './CanvasSurface.js'
 import type { BreakpointId, Zoom } from '../../lib/breakpoints.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
+import {
+  themeChromeEditPath,
+  type AdminThemeChrome,
+  type ThemeChromeDocument,
+  type ThemeChromeEditTarget,
+  type ThemeChromeMode,
+} from '../../lib/theme-chrome.js'
 import { SectionRenderer } from './sections/index.js'
 import { StructureNotice } from './StructureNotice.js'
+import { ThemeChromeFrame, ThemeChromeHealth } from './theme-chrome/index.js'
+import type { ThemeChromeHealthState } from './theme-chrome/ThemeChromeFrame.js'
 
 interface EditorCanvasProps {
   sections: PageSection[]
@@ -31,6 +41,16 @@ interface EditorCanvasProps {
    * to the editor's history state, which the canvas knows nothing about.
    */
   reviewBar?: React.ReactNode
+  /** When set and enabled, wraps bands in site header/footer. */
+  themeChrome?: {
+    spec: AdminThemeChrome
+    enabled: boolean
+    mode: ThemeChromeMode
+    locale: string
+    dir: 'ltr' | 'rtl'
+    document: ThemeChromeDocument
+    onNavigate: (path: string) => void
+  }
 }
 
 /**
@@ -52,13 +72,44 @@ export function EditorCanvas({
   reviewing = false,
   changedSectionIds,
   reviewBar,
+  themeChrome,
 }: EditorCanvasProps) {
   const registerRef = useSectionRefs(selectedId)
+  const [health, setHealth] = useState<ThemeChromeHealthState | null>(null)
+
+  const chromeOn = Boolean(themeChrome?.enabled)
+  const mode = themeChrome?.mode ?? 'flow'
+
+  const onEditChrome = useCallback(
+    (target: ThemeChromeEditTarget) => {
+      themeChrome?.onNavigate(themeChromeEditPath(target))
+    },
+    [themeChrome],
+  )
+
+  const documentIdentity = themeChrome?.document
+
+  const bands = useMemo(() => {
+    if (sections.length === 0) return <EmptyCanvas />
+    return sections.map((section) => (
+      <SectionRenderer
+        key={section.id}
+        section={section}
+        editable
+        reviewing={reviewing}
+        changed={changedSectionIds?.has(section.id) ?? false}
+        selected={section.id === selectedId}
+        onSelect={onSelect}
+        registerRef={registerRef}
+      />
+    ))
+  }, [sections, reviewing, changedSectionIds, selectedId, onSelect, registerRef])
 
   // A design-owned page always ships the template's sections, so an empty
   // canvas means the template resolved to nothing — a configuration problem,
-  // not a page to scale and measure.
-  if (sections.length === 0) {
+  // not a page to scale and measure. Theme chrome still mounts so editors
+  // can see and edit the site shell.
+  if (sections.length === 0 && !chromeOn) {
     return (
       <CanvasScroll>
         <EmptyCanvas />
@@ -66,13 +117,47 @@ export function EditorCanvas({
     )
   }
 
+  const inner =
+    chromeOn && themeChrome && documentIdentity ? (
+      <ThemeChromeFrame
+        spec={themeChrome.spec}
+        mode={mode}
+        breakpoint={breakpoint}
+        locale={themeChrome.locale}
+        dir={themeChrome.dir}
+        document={documentIdentity}
+        onEditChrome={onEditChrome}
+        onHealthChange={setHealth}
+      >
+        {bands}
+      </ThemeChromeFrame>
+    ) : (
+      bands
+    )
+
   return (
-    <CanvasScroll>
+    <CanvasScroll layout={chromeOn && mode === 'frame' ? 'frame' : 'flow'}>
       <CanvasSurface
         breakpoint={breakpoint}
         zoom={zoom}
         onScaleChange={onScaleChange}
         onCanvasElement={onCanvasElement}
+        lang={chromeOn ? themeChrome?.locale : undefined}
+        dir={chromeOn ? themeChrome?.dir : undefined}
+        fillMode={chromeOn && mode === 'frame' ? 'frame' : 'flow'}
+        health={
+          chromeOn && themeChrome && health ? (
+            <ThemeChromeHealth
+              locale={themeChrome.locale}
+              dir={themeChrome.dir}
+              header={health.header}
+              footer={health.footer}
+              outlineWarning={health.outlineWarning}
+              navLinkCount={themeChrome.spec.diagnostics?.navLinkCount}
+              brandPresent={themeChrome.spec.diagnostics?.brandPresent}
+            />
+          ) : undefined
+        }
         chrome={
           // The review bar REPLACES the editing chrome rather than joining it:
           // a tip about clicking sections to edit them is actively wrong while
@@ -87,18 +172,7 @@ export function EditorCanvas({
           )
         }
       >
-        {sections.map((section) => (
-          <SectionRenderer
-            key={section.id}
-            section={section}
-            editable
-            reviewing={reviewing}
-            changed={changedSectionIds?.has(section.id) ?? false}
-            selected={section.id === selectedId}
-            onSelect={onSelect}
-            registerRef={registerRef}
-          />
-        ))}
+        {inner}
       </CanvasSurface>
     </CanvasScroll>
   )

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

@@ -30,6 +30,8 @@ import {
   type WorkflowStage,
 } from '../../lib/workflow-chrome.js'
 import { type ViewportId } from './viewports.js'
+import type { ThemeChromeMode } from '../../lib/theme-chrome.js'
+import { ThemeChromeModeToggle } from './theme-chrome/ThemeChromeModeToggle.js'
 
 export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
 
@@ -56,6 +58,9 @@ interface EditorTopBarProps {
   /** Breadcrumb root label + back-button text (e.g. "Pages" or "Posts"). */
   backLabel?: string
   onViewport: (v: ViewportId) => void
+  /** Theme-chrome Page / Frame toggle. Hidden when theme chrome is off. */
+  chromeMode?: ThemeChromeMode
+  onChromeMode?: (mode: ThemeChromeMode) => void
   onBack: () => void
   /**
    * Open the public site in a new tab. Called with `preview-draft` or
@@ -129,6 +134,8 @@ export function EditorTopBar({
   onZoom,
   backLabel = 'Pages',
   onViewport,
+  chromeMode,
+  onChromeMode,
   onBack,
   onViewOnSite,
   onShare,
@@ -281,6 +288,9 @@ export function EditorTopBar({
           {zoom !== undefined && onZoom && (
             <ZoomChip zoom={zoom} scale={canvasScale ?? 1} onChange={onZoom} />
           )}
+          {chromeMode && onChromeMode ? (
+            <ThemeChromeModeToggle mode={chromeMode} onChange={onChromeMode} />
+          ) : null}
         </div>
 
         <button

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

@@ -55,6 +55,15 @@ import { hasCanvasRenderer, useAdminSectionRenderers } from './sections/index.js
 import { EditorTopBar, type SaveState } from './EditorTopBar.js'
 import { SectionsList } from './SectionsPanel.js'
 import { EditorCanvas } from './EditorCanvas.js'
+import { useLocale } from '../../components/LocaleProvider.js'
+import {
+  isThemeChromeEnabled,
+  resolveThemeChromeDir,
+  resolveThemeChromeLocale,
+  resolveThemeChromePath,
+} from '../../lib/theme-chrome.js'
+import { useThemeChromeSpec } from './theme-chrome/ThemeChromeProvider.js'
+import { useThemeChromeMode } from './theme-chrome/useThemeChromeMode.js'
 import { ReflowContext } from './reflow-context.js'
 import { SectionEditForm } from './SectionEditForm.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
@@ -135,6 +144,19 @@ export function PageSectionEditor({
   const [pendingFocusPath, setPendingFocusPath] = useState<string | null>(null)
   const [viewport, setViewport] = useState<ViewportId>(DEFAULT_VIEWPORT)
   const [zoom, setZoom] = useState<Zoom>('fit')
+  const themeChromeSpec = useThemeChromeSpec()
+  const themeChromeEnabled = isThemeChromeEnabled(
+    themeChromeSpec,
+    config?.admin?.editor?.themeChrome,
+    'pages',
+  )
+  const [chromeMode, setChromeMode] = useThemeChromeMode(themeChromeSpec?.defaultMode ?? 'flow')
+  const { activeLocale, locales } = useLocale()
+  const chromeLocale = resolveThemeChromeLocale({
+    activeLocale,
+    defaultLocale: config?.i18n?.defaultLocale,
+  })
+  const chromeDir = resolveThemeChromeDir(chromeLocale, locales)
   /**
    * Live audit reported by the SEO pane, built from unsaved form state. Null
    * until that pane has mounted — `audit` below falls back to the saved-record
@@ -881,6 +903,8 @@ export function PageSectionEditor({
           zoom={zoom}
           canvasScale={canvasScale}
           onZoom={setZoom}
+          chromeMode={themeChromeEnabled ? chromeMode : undefined}
+          onChromeMode={themeChromeEnabled ? setChromeMode : undefined}
           onBack={() => guardedNavigate('/pages')}
           onViewOnSite={page.id && page.slug ? handleViewOnSite : undefined}
           onShare={page.id ? handleShare : undefined}
@@ -1050,6 +1074,24 @@ export function PageSectionEditor({
                 structuralTypes={structuralTypes}
                 reviewing={reviewing}
                 changedSectionIds={reviewChangedIds}
+                themeChrome={
+                  themeChromeSpec
+                    ? {
+                        spec: themeChromeSpec,
+                        enabled: themeChromeEnabled,
+                        mode: chromeMode,
+                        locale: chromeLocale,
+                        dir: chromeDir,
+                        document: {
+                          id: page.id,
+                          title: page.title,
+                          path: resolveThemeChromePath(page.path, page.slug),
+                          collection: PAGES_COLLECTION,
+                        },
+                        onNavigate,
+                      }
+                    : undefined
+                }
                 reviewBar={
                   reviewVersion ? (
                     <ReviewBar