@prenta/admin 1.9.2 → 1.10.0

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