@prenta/admin 1.9.2 → 1.10.1

package/src/__tests__/views/editor-top-bar.render.test.tsx

@@ -241,4 +241,17 @@ describe('EditorTopBar history button', () => {
     expect(screen.getByRole('button', { name: 'Post settings' })).toBeTruthy()
     expect(screen.queryByRole('button', { name: 'Page settings' })).toBeNull()
   })
+
+  it('hides the Page / Frame toggle until theme chrome is on', () => {
+    render(<EditorTopBar {...baseProps} />)
+    expect(screen.queryByRole('group', { name: /Canvas layout/ })).toBeNull()
+  })
+
+  it('toggles Page and Frame when theme chrome is enabled', () => {
+    const onChromeMode = vi.fn()
+    render(<EditorTopBar {...baseProps} chromeMode="flow" onChromeMode={onChromeMode} />)
+    expect(screen.getByRole('button', { name: /^Page$/ }).getAttribute('aria-pressed')).toBe('true')
+    fireEvent.click(screen.getByRole('button', { name: /^Frame$/ }))
+    expect(onChromeMode).toHaveBeenCalledWith('frame')
+  })
 })

package/src/__tests__/views/theme-chrome-frame.render.test.tsx

@@ -0,0 +1,304 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import type { PageSection } from '../../lib/page-editor-service.js'
+import { THEME_CHROME_MAIN_ID, type AdminThemeChromeProps } from '../../lib/theme-chrome.js'
+import { ThemeChromeProvider } from '../../views/page-editor/theme-chrome/ThemeChromeProvider.js'
+import { EditorCanvas } from '../../views/page-editor/EditorCanvas.js'
+
+afterEach(cleanup)
+
+const SECTION: PageSection = {
+  id: 's1',
+  sectionType: 'hero',
+  name: 'Hero Banner',
+  visible: true,
+  content: { heading: 'A headline' },
+  settings: {},
+}
+
+const FIFTH: PageSection = {
+  ...SECTION,
+  id: 's5',
+  name: 'Fifth',
+  content: { heading: 'Fifth band' },
+}
+
+function CompliantHeader(props: AdminThemeChromeProps) {
+  return (
+    <header>
+      <p>Acme</p>
+      <nav>
+        <a href="/about">About</a>
+      </nav>
+      <span data-testid="chrome-path">{props.document.path}</span>
+      <span data-testid="chrome-locale">{props.locale}</span>
+    </header>
+  )
+}
+
+function CompliantFooter() {
+  return <footer>© Acme</footer>
+}
+
+function H1Header() {
+  return (
+    <header>
+      <h1>Acme</h1>
+    </header>
+  )
+}
+
+function ThrowingHeader(): never {
+  throw new Error('header boom')
+}
+
+function defaultThemeChrome(
+  extra: Partial<NonNullable<Parameters<typeof EditorCanvas>[0]['themeChrome']>> = {},
+) {
+  return {
+    spec: extra.spec ?? {
+      header: CompliantHeader,
+      footer: CompliantFooter,
+    },
+    enabled: extra.enabled ?? true,
+    mode: extra.mode ?? 'flow',
+    locale: extra.locale ?? 'en',
+    dir: extra.dir ?? 'ltr',
+    document: extra.document ?? {
+      id: 'p1',
+      title: 'About',
+      path: '/about',
+      collection: 'pages',
+    },
+    onNavigate: extra.onNavigate ?? vi.fn(),
+  }
+}
+
+function canvas(overrides: Partial<Parameters<typeof EditorCanvas>[0]> = {}) {
+  const themeChrome = overrides.themeChrome
+    ? defaultThemeChrome(overrides.themeChrome)
+    : defaultThemeChrome()
+  return (
+    <ThemeChromeProvider value={themeChrome.spec}>
+      <EditorCanvas
+        sections={[
+          SECTION,
+          { ...SECTION, id: 's2' },
+          { ...SECTION, id: 's3' },
+          { ...SECTION, id: 's4' },
+          FIFTH,
+        ]}
+        selectedId={null}
+        breakpoint="wide"
+        onSelect={vi.fn()}
+        {...overrides}
+        themeChrome={overrides.themeChrome === undefined ? themeChrome : themeChrome}
+      />
+    </ThemeChromeProvider>
+  )
+}
+
+describe('EditorCanvas theme chrome', () => {
+  it('omits chrome when the prop is not enabled', () => {
+    render(
+      <EditorCanvas sections={[SECTION]} selectedId={null} breakpoint="wide" onSelect={vi.fn()} />,
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeNull()
+    expect(document.getElementById(THEME_CHROME_MAIN_ID)).toBeNull()
+  })
+
+  it('renders header then bands then footer in flow mode', () => {
+    const { container } = render(canvas())
+    const frame = container.querySelector('[data-prenta-theme-chrome-mode="flow"]')
+    expect(frame).toBeTruthy()
+    const header = frame!.querySelector('[data-prenta-theme-chrome="header"]')
+    const main = frame!.querySelector(`#${THEME_CHROME_MAIN_ID}`)
+    const footer = frame!.querySelector('[data-prenta-theme-chrome="footer"]')
+    expect(header).toBeTruthy()
+    expect(main).toBeTruthy()
+    expect(footer).toBeTruthy()
+    expect(header!.compareDocumentPosition(main!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(main!.compareDocumentPosition(footer!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(container.querySelector('.prenta-canvas')?.getAttribute('lang')).toBe('en')
+    expect(container.querySelector('.prenta-canvas')?.getAttribute('dir')).toBe('ltr')
+  })
+
+  it('keeps chrome mounted in frame mode after selecting a middle band', () => {
+    const { rerender } = render(
+      canvas({
+        selectedId: 's5',
+        themeChrome: {
+          spec: { header: CompliantHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'frame',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome-mode="frame"]')).toBeTruthy()
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+    expect(document.querySelector('[data-prenta-theme-chrome="footer"]')).toBeTruthy()
+    rerender(
+      canvas({
+        selectedId: 's5',
+        themeChrome: {
+          spec: { header: CompliantHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'frame',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+  })
+
+  it('still shows chrome when every band is hidden or the list is empty', () => {
+    render(
+      canvas({
+        sections: [],
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+    expect(document.querySelector('[data-prenta-theme-chrome="footer"]')).toBeTruthy()
+    expect(screen.getByText('This template renders no sections')).toBeTruthy()
+  })
+
+  it('opens the edit menu and routes Navigations through onNavigate', () => {
+    const onNavigate = vi.fn()
+    render(
+      <div className="prenta-admin" data-prenta-admin-root="">
+        {canvas({
+          themeChrome: {
+            spec: { header: CompliantHeader, footer: CompliantFooter },
+            enabled: true,
+            mode: 'flow',
+            locale: 'en',
+            dir: 'ltr',
+            document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+            onNavigate,
+          },
+        })}
+      </div>,
+    )
+    // Clicking the chrome surface (logo/name) is the Fortune-500 path — not
+    // only the pencil. Capture-phase opens the controlled menu.
+    fireEvent.click(screen.getByText('Acme'))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Edit navigation' }))
+    expect(onNavigate).toHaveBeenCalledWith('/navigations')
+  })
+
+  it('does not follow a nav href', () => {
+    render(canvas())
+    const link = screen.getByRole('link', { name: 'About' })
+    const event = new MouseEvent('click', { bubbles: true, cancelable: true })
+    link.dispatchEvent(event)
+    expect(event.defaultPrevented).toBe(true)
+    expect(window.location.pathname).not.toBe('/about')
+  })
+
+  it('falls back when the header throws and still paints bands', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: { header: ThrowingHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'flow',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(screen.getByText('Site header')).toBeTruthy()
+    expect(document.querySelector('[data-section-id="s1"]')).toBeTruthy()
+    expect(screen.getByText('© Acme')).toBeTruthy()
+  })
+
+  it('rejects an off-origin previewSrc and shows the placeholder', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: {
+            previewSrc: { header: 'https://evil.example/header' },
+            footer: CompliantFooter,
+          },
+          enabled: true,
+          mode: 'flow',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('iframe')).toBeNull()
+    expect(document.querySelector('[data-prenta-theme-chrome-placeholder="header"]')).toBeTruthy()
+  })
+
+  it('puts locale, dir, and the public path on the frame — not an admin route', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: { header: CompliantHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'flow',
+          locale: 'ar',
+          dir: 'rtl',
+          document: { id: 'p1', title: 'About', path: '/ar/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    const frame = document.querySelector('[data-prenta-theme-chrome-mode]')
+    expect(frame?.getAttribute('data-prenta-theme-chrome-locale')).toBe('ar')
+    expect(frame?.getAttribute('data-prenta-theme-chrome-dir')).toBe('rtl')
+    expect(frame?.getAttribute('data-prenta-theme-chrome-path')).toBe('/ar/about')
+    expect(screen.getByTestId('chrome-path').textContent).toBe('/ar/about')
+    expect(screen.getByTestId('chrome-locale').textContent).toBe('ar')
+  })
+
+  it('warns when the header renders an h1', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: { header: H1Header, footer: CompliantFooter },
+          enabled: true,
+          mode: 'flow',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome-outline-warning]')).toBeTruthy()
+    expect(screen.getByText(/Chrome uses H1/)).toBeTruthy()
+  })
+
+  it('does not warn for a compliant header', () => {
+    render(canvas())
+    expect(document.querySelector('[data-prenta-theme-chrome-outline-warning]')).toBeNull()
+  })
+
+  it('keeps chrome visible in review mode and does not select chrome as a section', () => {
+    const onSelect = vi.fn()
+    render(
+      canvas({
+        reviewing: true,
+        onSelect,
+        reviewBar: <div>Reviewing</div>,
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+    fireEvent.click(screen.getByText('Acme'))
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+})

package/src/index.ts

@@ -14,6 +14,23 @@ export type {
   AdminRenderImageProps,
 } from './views/page-editor/sections/index.js'
 
+export type {
+  AdminThemeChrome,
+  AdminThemeChromeProps,
+  AdminThemeChromeRenderer,
+  ThemeChromeDocument,
+  ThemeChromeEditTarget,
+  ThemeChromeMode,
+  ThemeChromeSurface,
+} from './lib/theme-chrome.js'
+export {
+  isThemeChromeEnabled,
+  isSameOriginPreviewSrc,
+  themeChromeEditPath,
+  THEME_CHROME_MAIN_ID,
+} from './lib/theme-chrome.js'
+export { useThemeChromeContext } from './views/page-editor/theme-chrome/index.js'
+
 export { Layout } from './layout/Layout.js'
 export type { LayoutProps } from './layout/Layout.js'
 export { Sidebar } from './layout/Sidebar.js'

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/page-editor/AddSectionModal.tsx

@@ -1,7 +1,11 @@
 'use client'
 
 import { Modal } from '../../components/ui/Modal.js'
-import { getSectionTypesForScope, type SectionScope, type SectionTypeId } from './section-types.js'
+import {
+  getAddableSectionTypesForScope,
+  type SectionScope,
+  type SectionTypeId,
+} from './section-types.js'
 import { sectionIconFor } from './section-icons.js'
 
 interface AddSectionModalProps {
@@ -22,7 +26,7 @@ interface AddSectionModalProps {
  * model; see the page-editor changeset.)
  */
 export function AddSectionModal({ open, onClose, onAdd, scope = 'page' }: AddSectionModalProps) {
-  const types = getSectionTypesForScope(scope)
+  const types = getAddableSectionTypesForScope(scope)
   return (
     <Modal open={open} onClose={onClose} title="Add a section">
       <p className="text-muted-foreground mb-4 text-sm">