@prenta/admin 1.9.1 → 1.10.0

package/src/views/page-editor/theme-chrome/ThemeChromeFrame.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
+import {
+  THEME_CHROME_MAIN_ID,
+  type AdminThemeChrome,
+  type AdminThemeChromeProps,
+  type ThemeChromeDocument,
+  type ThemeChromeEditTarget,
+  type ThemeChromeMode,
+  type ThemeChromeSlotStatus,
+} from '../../../lib/theme-chrome.js'
+import type { BreakpointId } from '../../../lib/breakpoints.js'
+import { ThemeChromeSlot } from './ThemeChromeSlot.js'
+
+export interface ThemeChromeHealthState {
+  header: ThemeChromeSlotStatus
+  footer: ThemeChromeSlotStatus
+  outlineWarning: boolean
+}
+
+export interface ThemeChromeFrameProps {
+  spec: AdminThemeChrome
+  mode: ThemeChromeMode
+  breakpoint: BreakpointId
+  locale: string
+  dir: 'ltr' | 'rtl'
+  document: ThemeChromeDocument
+  onEditChrome: (target: ThemeChromeEditTarget) => void
+  onHealthChange?: (health: ThemeChromeHealthState) => void
+  children: ReactNode
+}
+
+export function ThemeChromeFrame({
+  spec,
+  mode,
+  breakpoint,
+  locale,
+  dir,
+  document,
+  onEditChrome,
+  onHealthChange,
+  children,
+}: ThemeChromeFrameProps) {
+  const [headerStatus, setHeaderStatus] = useState<ThemeChromeSlotStatus>('placeholder')
+  const [footerStatus, setFooterStatus] = useState<ThemeChromeSlotStatus>('placeholder')
+  const [headerH1, setHeaderH1] = useState(false)
+  const [footerH1, setFooterH1] = useState(false)
+
+  const chromeProps = useMemo<Omit<AdminThemeChromeProps, 'region'>>(
+    () => ({
+      breakpoint,
+      mode,
+      preview: true,
+      locale,
+      dir,
+      document,
+      onEditChrome,
+    }),
+    [breakpoint, mode, locale, dir, document, onEditChrome],
+  )
+
+  const onHeaderOutline = useCallback((hasH1: boolean) => setHeaderH1(hasH1), [])
+  const onFooterOutline = useCallback((hasH1: boolean) => setFooterH1(hasH1), [])
+
+  useEffect(() => {
+    onHealthChange?.({
+      header: headerStatus,
+      footer: footerStatus,
+      outlineWarning: headerH1 || footerH1,
+    })
+  }, [headerStatus, footerStatus, headerH1, footerH1, onHealthChange])
+
+  const headerProps: AdminThemeChromeProps = { ...chromeProps, region: 'header' }
+  const footerProps: AdminThemeChromeProps = { ...chromeProps, region: 'footer' }
+
+  const frameClass = mode === 'frame' ? 'flex h-full min-h-0 flex-col' : 'flex min-h-0 flex-col'
+
+  return (
+    <div
+      className={frameClass}
+      data-prenta-theme-chrome-mode={mode}
+      data-prenta-theme-chrome-locale={locale}
+      data-prenta-theme-chrome-dir={dir}
+      data-prenta-theme-chrome-path={document.path}
+    >
+      <a
+        href={`#${THEME_CHROME_MAIN_ID}`}
+        className="bg-primary text-primary-foreground sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-30 focus:rounded-md focus:px-3 focus:py-1.5 focus:text-sm"
+      >
+        Skip to content
+      </a>
+      <div className={mode === 'frame' ? 'shrink-0' : undefined}>
+        <ThemeChromeSlot
+          region="header"
+          spec={spec}
+          chromeProps={headerProps}
+          onOutlineIssue={onHeaderOutline}
+          onStatus={setHeaderStatus}
+        />
+      </div>
+      <div
+        id={THEME_CHROME_MAIN_ID}
+        className={mode === 'frame' ? 'min-h-0 flex-1 overflow-auto' : undefined}
+      >
+        {children}
+      </div>
+      <div className={mode === 'frame' ? 'shrink-0' : undefined}>
+        <ThemeChromeSlot
+          region="footer"
+          spec={spec}
+          chromeProps={footerProps}
+          onOutlineIssue={onFooterOutline}
+          onStatus={setFooterStatus}
+        />
+      </div>
+    </div>
+  )
+}

package/src/views/page-editor/theme-chrome/ThemeChromeHealth.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import type { ThemeChromeSlotStatus } from '../../../lib/theme-chrome.js'
+
+export interface ThemeChromeHealthProps {
+  locale: string
+  dir: 'ltr' | 'rtl'
+  header: ThemeChromeSlotStatus
+  footer: ThemeChromeSlotStatus
+  outlineWarning: boolean
+  navLinkCount?: number
+  brandPresent?: boolean
+}
+
+const STATUS_LABEL: Record<ThemeChromeSlotStatus, string> = {
+  ok: 'ok',
+  preview: 'preview',
+  fallback: 'fallback',
+  placeholder: 'View site',
+}
+
+export function ThemeChromeHealth({
+  locale,
+  dir,
+  header,
+  footer,
+  outlineWarning,
+  navLinkCount,
+  brandPresent,
+}: ThemeChromeHealthProps) {
+  return (
+    <p
+      className="text-muted-foreground mb-3 flex flex-wrap items-center justify-center gap-x-1.5 gap-y-1 text-[11px] font-medium tracking-[0.3px]"
+      data-prenta-theme-chrome-health=""
+      aria-live="polite"
+    >
+      <span className="text-foreground/70 uppercase">
+        {locale} · {dir.toUpperCase()}
+      </span>
+      <span aria-hidden>|</span>
+      <span>Header {STATUS_LABEL[header]}</span>
+      <span aria-hidden>|</span>
+      <span>Footer {STATUS_LABEL[footer]}</span>
+      {typeof navLinkCount === 'number' ? (
+        <>
+          <span aria-hidden>|</span>
+          <span>Nav: {navLinkCount} links</span>
+        </>
+      ) : null}
+      {brandPresent === true ? (
+        <>
+          <span aria-hidden>|</span>
+          <span>Brand</span>
+        </>
+      ) : null}
+      {outlineWarning ? (
+        <>
+          <span aria-hidden>|</span>
+          <span className="text-destructive" data-prenta-theme-chrome-outline-warning="">
+            Chrome uses H1 — page outline will be wrong
+          </span>
+        </>
+      ) : null}
+    </p>
+  )
+}

package/src/views/page-editor/theme-chrome/ThemeChromeModeToggle.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import type { ThemeChromeMode } from '../../../lib/theme-chrome.js'
+
+export interface ThemeChromeModeToggleProps {
+  mode: ThemeChromeMode
+  onChange: (mode: ThemeChromeMode) => void
+}
+
+/**
+ * Page = real document scroll (sellable preview). Frame = pinned chrome
+ * for authoring. Frame is a working view, not the live page.
+ */
+export function ThemeChromeModeToggle({ mode, onChange }: ThemeChromeModeToggleProps) {
+  return (
+    <div
+      role="group"
+      aria-label="Canvas layout. Page scrolls like the live site. Frame pins the header and footer."
+      className="border-border bg-card inline-flex h-[34px] overflow-hidden rounded-lg border"
+    >
+      <ModeButton
+        label="Page"
+        pressed={mode === 'flow'}
+        title="Page — header, bands, and footer scroll together like the live site."
+        onClick={() => onChange('flow')}
+      />
+      <ModeButton
+        label="Frame"
+        pressed={mode === 'frame'}
+        title="Frame — header and footer stay pinned while bands scroll. Authoring view, not the live page."
+        onClick={() => onChange('frame')}
+      />
+    </div>
+  )
+}
+
+function ModeButton({
+  label,
+  pressed,
+  title,
+  onClick,
+}: {
+  label: string
+  pressed: boolean
+  title: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={pressed}
+      title={title}
+      onClick={onClick}
+      className={`h-full px-2.5 text-[12.5px] font-medium transition-colors ${
+        pressed
+          ? 'bg-primary text-primary-foreground'
+          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+      }`}
+    >
+      {label}
+    </button>
+  )
+}

package/src/views/page-editor/theme-chrome/ThemeChromeProvider.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { createContext, useContext, type ReactNode } from 'react'
+import type { AdminThemeChrome, AdminThemeChromeProps } from '../../../lib/theme-chrome.js'
+
+const ThemeChromeSpecContext = createContext<AdminThemeChrome | null>(null)
+
+export function ThemeChromeProvider({
+  value,
+  children,
+}: {
+  value: AdminThemeChrome | null
+  children: ReactNode
+}) {
+  return <ThemeChromeSpecContext.Provider value={value}>{children}</ThemeChromeSpecContext.Provider>
+}
+
+/** The `themeChrome` prop passed to `<AdminRoot>`, or null when omitted. */
+export function useThemeChromeSpec(): AdminThemeChrome | null {
+  return useContext(ThemeChromeSpecContext)
+}
+
+const ThemeChromeRenderContext = createContext<AdminThemeChromeProps | null>(null)
+
+export function ThemeChromeRenderProvider({
+  value,
+  children,
+}: {
+  value: AdminThemeChromeProps
+  children: ReactNode
+}) {
+  return (
+    <ThemeChromeRenderContext.Provider value={value}>{children}</ThemeChromeRenderContext.Provider>
+  )
+}
+
+/**
+ * Fields passed to a consumer `SiteHeader` / `SiteFooter` so they can
+ * highlight the current path and locale without prop-drilling.
+ */
+export function useThemeChromeContext(): AdminThemeChromeProps | null {
+  return useContext(ThemeChromeRenderContext)
+}

package/src/views/page-editor/theme-chrome/ThemeChromeSlot.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useCallback, useLayoutEffect, useRef, useState, type MouseEvent } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Pencil } from 'lucide-react'
+import { ErrorBoundary } from '../../../components/ErrorBoundary.js'
+import { adminPortalContainer } from '../../../lib/portal-container.js'
+import {
+  closestAnchor,
+  isSameOriginPreviewSrc,
+  type AdminThemeChrome,
+  type AdminThemeChromeProps,
+  type ThemeChromeSlotStatus,
+} from '../../../lib/theme-chrome.js'
+import { ThemeChromeRenderProvider } from './ThemeChromeProvider.js'
+
+interface ThemeChromeSlotProps {
+  region: 'header' | 'footer'
+  spec: AdminThemeChrome
+  chromeProps: AdminThemeChromeProps
+  onOutlineIssue: (hasH1: boolean) => void
+  onStatus: (status: ThemeChromeSlotStatus) => void
+}
+
+export function ThemeChromeSlot({
+  region,
+  spec,
+  chromeProps,
+  onOutlineIssue,
+  onStatus,
+}: ThemeChromeSlotProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  useLayoutEffect(() => {
+    onOutlineIssue(Boolean(rootRef.current?.querySelector('h1')))
+  })
+
+  const openEditMenu = useCallback(() => {
+    setMenuOpen(true)
+  }, [])
+
+  const onClickCapture = useCallback(
+    (event: MouseEvent) => {
+      const target = event.target
+      if (target instanceof Element && target.closest('[data-prenta-theme-chrome-edit]')) {
+        return
+      }
+      if (closestAnchor(target)) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      openEditMenu()
+    },
+    [openEditMenu],
+  )
+
+  const onAuxClickCapture = useCallback((event: MouseEvent) => {
+    if (closestAnchor(event.target)) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }, [])
+
+  const label = region === 'header' ? 'Site header' : 'Site footer'
+  const renderer = region === 'header' ? spec.header : spec.footer
+  const previewSrc = region === 'header' ? spec.previewSrc?.header : spec.previewSrc?.footer
+
+  return (
+    <ThemeChromeRenderProvider value={chromeProps}>
+      <div
+        ref={rootRef}
+        data-prenta-theme-chrome={region}
+        aria-label={label}
+        className="relative"
+        onClickCapture={onClickCapture}
+        onAuxClickCapture={onAuxClickCapture}
+      >
+        <ErrorBoundary
+          fallback={
+            <ChromeFallback
+              region={region}
+              spec={spec}
+              chromeProps={chromeProps}
+              previewSrc={previewSrc}
+              onStatus={onStatus}
+            />
+          }
+        >
+          <ChromeBody
+            region={region}
+            renderer={renderer}
+            fallback={spec.fallback}
+            previewSrc={previewSrc}
+            chromeProps={chromeProps}
+            onStatus={onStatus}
+          />
+        </ErrorBoundary>
+
+        <DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenu.Trigger asChild>
+            <button
+              type="button"
+              data-prenta-theme-chrome-edit=""
+              aria-label={`Edit ${label.toLowerCase()}`}
+              title={`Edit ${label.toLowerCase()}`}
+              className="border-border bg-card text-foreground hover:bg-accent focus-visible:outline-ring absolute top-2 right-2 z-20 inline-flex h-9 w-9 items-center justify-center rounded-md border shadow-sm"
+            >
+              <Pencil size={16} aria-hidden />
+            </button>
+          </DropdownMenu.Trigger>
+          <ChromeEditMenu onEditChrome={chromeProps.onEditChrome} />
+        </DropdownMenu.Root>
+      </div>
+    </ThemeChromeRenderProvider>
+  )
+}
+
+function ChromeEditMenu({ onEditChrome }: { onEditChrome: AdminThemeChromeProps['onEditChrome'] }) {
+  const menu = (
+    <DropdownMenu.Content
+      align="end"
+      sideOffset={6}
+      className="border-border bg-popover z-[120] min-w-[12rem] rounded-[10px] border p-[5px] shadow-[0_12px_34px_rgba(26,24,39,0.17)]"
+    >
+      <ChromeEditItem onSelect={() => onEditChrome('navigations')} label="Edit navigation" />
+      <ChromeEditItem onSelect={() => onEditChrome('appearance')} label="Edit appearance" />
+      <ChromeEditItem onSelect={() => onEditChrome('settings')} label="Edit site settings" />
+    </DropdownMenu.Content>
+  )
+  const portalRoot = adminPortalContainer()
+  return portalRoot ? (
+    <DropdownMenu.Portal container={portalRoot}>{menu}</DropdownMenu.Portal>
+  ) : (
+    menu
+  )
+}
+
+function ChromeEditItem({ onSelect, label }: { onSelect: () => void; label: string }) {
+  return (
+    <DropdownMenu.Item
+      onSelect={onSelect}
+      className="hover:bg-accent focus:bg-accent cursor-pointer rounded-md px-2.5 py-1.5 text-sm outline-none"
+    >
+      {label}
+    </DropdownMenu.Item>
+  )
+}
+
+function ChromeBody({
+  region,
+  renderer,
+  fallback,
+  previewSrc,
+  chromeProps,
+  onStatus,
+}: {
+  region: 'header' | 'footer'
+  renderer?: AdminThemeChrome['header']
+  fallback?: AdminThemeChrome['fallback']
+  previewSrc?: string
+  chromeProps: AdminThemeChromeProps
+  onStatus: (status: ThemeChromeSlotStatus) => void
+}) {
+  useLayoutEffect(() => {
+    if (renderer) onStatus('ok')
+  }, [renderer, onStatus])
+
+  if (renderer) {
+    return <>{renderer(chromeProps)}</>
+  }
+  return (
+    <ChromeFallback
+      region={region}
+      spec={{ fallback, previewSrc: previewSrc ? { [region]: previewSrc } : undefined }}
+      chromeProps={chromeProps}
+      previewSrc={previewSrc}
+      onStatus={onStatus}
+    />
+  )
+}
+
+function ChromeFallback({
+  region,
+  spec,
+  chromeProps,
+  previewSrc,
+  onStatus,
+}: {
+  region: 'header' | 'footer'
+  spec: Pick<AdminThemeChrome, 'fallback' | 'previewSrc'>
+  chromeProps: AdminThemeChromeProps
+  previewSrc?: string
+  onStatus: (status: ThemeChromeSlotStatus) => void
+}) {
+  const usePreview = Boolean(previewSrc && isSameOriginPreviewSrc(previewSrc))
+  const useFallback = Boolean(!usePreview && spec.fallback)
+
+  useLayoutEffect(() => {
+    if (usePreview) onStatus('preview')
+    else if (useFallback) onStatus('fallback')
+    else onStatus('placeholder')
+  }, [usePreview, useFallback, onStatus])
+
+  if (usePreview && previewSrc) {
+    return (
+      <iframe
+        src={previewSrc}
+        title={region === 'header' ? 'Site header preview' : 'Site footer preview'}
+        sandbox="allow-same-origin"
+        className="block w-full border-0"
+      />
+    )
+  }
+  if (useFallback && spec.fallback) {
+    return <>{spec.fallback(chromeProps)}</>
+  }
+  return <ChromePlaceholder region={region} />
+}
+
+function ChromePlaceholder({ region }: { region: 'header' | 'footer' }) {
+  const label = region === 'header' ? 'Site header' : 'Site footer'
+  return (
+    <div
+      data-prenta-theme-chrome-placeholder={region}
+      className="border-border bg-muted text-muted-foreground flex flex-col items-start gap-1 border-b px-6 py-4 text-left text-sm"
+    >
+      <p className="text-foreground font-medium">{label}</p>
+      <p>
+        This site has not supplied a client-safe {region} for the canvas. Use{' '}
+        <span className="text-foreground">View site</span> to see the live page.
+      </p>
+    </div>
+  )
+}

package/src/views/page-editor/theme-chrome/index.ts

@@ -0,0 +1,12 @@
+export {
+  ThemeChromeProvider,
+  useThemeChromeSpec,
+  useThemeChromeContext,
+} from './ThemeChromeProvider.js'
+export { ThemeChromeFrame } from './ThemeChromeFrame.js'
+export type { ThemeChromeFrameProps, ThemeChromeHealthState } from './ThemeChromeFrame.js'
+export { ThemeChromeHealth } from './ThemeChromeHealth.js'
+export type { ThemeChromeHealthProps } from './ThemeChromeHealth.js'
+export { ThemeChromeModeToggle } from './ThemeChromeModeToggle.js'
+export type { ThemeChromeModeToggleProps } from './ThemeChromeModeToggle.js'
+export { useThemeChromeMode } from './useThemeChromeMode.js'

package/src/views/page-editor/theme-chrome/useThemeChromeMode.ts

@@ -0,0 +1,24 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import {
+  readStoredChromeMode,
+  writeStoredChromeMode,
+  type ThemeChromeMode,
+} from '../../../lib/theme-chrome.js'
+
+export function useThemeChromeMode(defaultMode: ThemeChromeMode = 'flow') {
+  const [mode, setModeState] = useState<ThemeChromeMode>(defaultMode)
+
+  useEffect(() => {
+    const stored = readStoredChromeMode()
+    if (stored) setModeState(stored)
+  }, [])
+
+  const setMode = useCallback((next: ThemeChromeMode) => {
+    setModeState(next)
+    writeStoredChromeMode(next)
+  }, [])
+
+  return [mode, setMode] as const
+}