@prenta/admin 0.92.0 → 0.94.0

package/src/views/page-editor/sections/admin-renderers.tsx

@@ -1,29 +1,36 @@
 'use client'
 
 /**
- * Pluggable canvas renderers for custom section types.
+ * Pluggable canvas renderers for the editor canvas and the eye preview.
  *
- * By default the editor canvas renders custom (config-declared) and unmanaged
- * section types as structural placeholders. Projects that want a real design
- * preview inside the admin can pass renderers to `<AdminRoot
- * sectionRenderers={...}>`; the canvas and the eye preview then use them in
- * place of the placeholder.
+ * RESOLUTION ORDER — supplied renderer → built-in → placeholder.
+ *
+ * A renderer passed to `<AdminRoot sectionRenderers>` wins for EVERY section
+ * type, including the built-ins. Before v0.93 the map was consulted only for
+ * types the canvas did not already know, so a consumer passing the public
+ * renderer map had their hero, text, feature, stats and cta silently ignored
+ * while the canvas rendered the admin's own approximations — different font
+ * size, weight and breakpoints — and presented itself as a preview.
+ *
+ * With nothing supplied, built-in types fall back to those approximations and
+ * custom (config-declared) or unmanaged types render as a structural
+ * placeholder.
  *
  * The renderer signature is a structural mirror of `SectionRenderer` from
- * `@prenta/sections-react` (cms-admin depends on cms-core only, so the
- * type is duplicated rather than imported). Because the shapes match, a
- * consumer can hand `AdminRoot` the exact same components it registers for
- * the public site:
+ * `@prenta/sections-react` (cms-admin depends on cms-core only, so the type is
+ * duplicated rather than imported). `admin-renderer-compat.test.ts` performs
+ * the assignment that keeps the two shapes compatible.
  *
  * ```tsx
- * import { OPAL_RENDERERS } from './sections' // SectionRendererMap
- * <AdminRoot sectionRenderers={OPAL_RENDERERS} ... />
+ * import { DEFAULT_SECTION_RENDERERS } from '@prenta/sections-react'
+ * import { OPAL_RENDERERS } from './sections'
+ * <AdminRoot sectionRenderers={{ ...DEFAULT_SECTION_RENDERERS, ...OPAL_RENDERERS }} />
  * ```
  *
  * Renderers run inside the admin bundle, so they must be client-safe (no
- * server-only imports). Each one is wrapped in an error boundary — a throwing
- * renderer falls back to the structural placeholder instead of taking down
- * the editor.
+ * server-only imports). Each is wrapped in an error boundary — a throwing
+ * renderer falls back to the built-in for that type, or to the placeholder if
+ * the type has no built-in, instead of taking down the editor.
  */
 import { createContext, useContext, type ReactNode } from 'react'
 
@@ -50,6 +57,16 @@ export interface AdminSectionPostContext {
   relatedPosts?: Array<{ title: string; url?: string; excerpt?: string }>
 }
 
+/**
+ * Structural mirror of `LcpController`. The canvas has no Largest-Contentful-
+ * Paint budget to protect, but sections-react renderers call `claim()` during
+ * render, so the shape must exist or a real renderer throws on its first image.
+ */
+export interface AdminLcpController {
+  claim(): boolean
+  readonly claimed: boolean
+}
+
 /** Props passed to an admin section renderer (mirrors `SectionRendererProps`). */
 export interface AdminSectionRendererProps {
   section: {
@@ -65,6 +82,23 @@ export interface AdminSectionRendererProps {
     sanitizeHtml: (html: string) => string
     baseUrl: string
     renderImage: (props: AdminRenderImageProps) => ReactNode
+    /** Mirrors `ResolvedRenderOptions.lcp`. */
+    lcp: AdminLcpController
+    /**
+     * Mirrors `ResolvedRenderOptions.prefetchedForms`. Always empty in the
+     * canvas: the admin does not prefetch form schemas, so a form section
+     * falls back to its client island exactly as an un-prefetched page does.
+     *
+     * Typed `any` rather than `unknown` deliberately. Renderers are function
+     * types, so `strictFunctionTypes` compares their parameters
+     * contravariantly — a `Record<string, unknown>` here would make
+     * `SectionRendererMap` from @prenta/sections-react UNASSIGNABLE to this
+     * map, defeating the entire point of the mirror. The value is never read
+     * in the canvas, so the looser type costs nothing.
+     * See `admin-renderer-compat.test.ts`.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    prefetchedForms: Record<string, any>
   }
 }
 
@@ -83,6 +117,11 @@ export type AdminSectionRendererMap = Record<string, AdminSectionRenderer>
 export const ADMIN_RENDER_OPTIONS: AdminSectionRendererProps['options'] = {
   sanitizeHtml: (html) => html,
   baseUrl: '',
+  // Never grants the priority slot. On a public page exactly one image may
+  // load eagerly; in the canvas nothing competes for bandwidth and every
+  // image should lazy-load, so `claim()` always declines.
+  lcp: { claim: () => false, claimed: true },
+  prefetchedForms: {},
   renderImage: ({ src, alt, className, priority, width, height }) => (
     <img
       src={src}

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

@@ -9,6 +9,11 @@
  * page; the surrounding editor UI still uses the admin design tokens.
  */
 import type { SectionSettings } from '../section-types.js'
+import {
+  backgroundPreset,
+  isDarkBackground as coreIsDarkBackground,
+  type BackgroundPreset,
+} from '@prenta/core/page-sections'
 
 /**
  * Live post data passed to the post-oriented section renderers
@@ -46,33 +51,54 @@ export function paddingClass(settings: SectionSettings): string {
     case 'md':
       return 'py-12'
     case 'xl':
-      return 'py-20 sm:py-28'
+      return 'py-20 @pv-md:py-28 @pv-2xl:py-36'
     case 'lg':
     default:
-      return 'py-16 sm:py-20'
+      return 'py-16 @pv-md:py-20 @pv-2xl:py-28'
   }
 }
 
 /** Returns true when the section background is the dark/purple treatment. */
 export function isDarkBackground(settings: SectionSettings): boolean {
-  return (
-    (settings.backgroundType === 'solid' || settings.backgroundType === 'gradient') &&
-    settings.backgroundColor === 'purple'
-  )
+  return coreIsDarkBackground(settings)
+}
+
+/**
+ * The canvas's section backgrounds — deliberately the SITE's palette, not the
+ * admin's theme tokens.
+ *
+ * ── Why not theme tokens ──────────────────────────────────────────────────
+ *
+ * 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.
+ *
+ * ── Why the strings are duplicated from sections-react ────────────────────
+ *
+ * They have to be. Tailwind generates utilities by scanning source text, and
+ * the admin's stylesheet scans only the admin's `src/` tree. Importing the
+ * literals from sections-react (or from core) would leave them generated by
+ * nobody, and every canvas section would render with no background — silently,
+ * with correct markup. `backgroundPreset` in core owns the DECISION so the two
+ * cannot diverge, the `Record` below is exhaustive over it, and
+ * `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',
 }
 
-/** Background utility classes derived from settings. */
 export function backgroundClass(settings: SectionSettings): string {
-  if (settings.backgroundType === 'gradient' && settings.backgroundColor === 'purple') {
-    return 'bg-gradient-to-br from-violet-600 to-violet-700 text-white'
-  }
-  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'purple') {
-    return 'bg-brand text-white'
-  }
-  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'muted') {
-    return 'bg-muted text-foreground'
-  }
-  return 'bg-card text-foreground'
+  return PRESET_CLASSES[backgroundPreset(settings)]
 }
 
 /**
@@ -90,8 +116,10 @@ export function PreviewButton({
   tone?: 'primary' | 'onDark' | 'ghost'
 }) {
   if (!label) return null
+  // Handoff: buttons go full width below 460. `w-full` on an inline-flex
+  // element still fills its line box, so the narrow case needs no extra wrapper.
   const base =
-    'inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium transition-colors'
+    '@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'

package/src/views/page-editor/viewports.ts

@@ -1,26 +1,13 @@
-/** Preview viewport presets for the page editor canvas. */
-export type ViewportId = '4k' | '1080p' | 'laptop' | 'tablet' | 'mobile'
-
-export interface Viewport {
-  id: ViewportId
-  label: string
-  /** lucide-react icon name */
-  icon: string
-  /** logical CSS width of the preview surface, in px */
-  width: number
-}
-
-export const VIEWPORTS: Viewport[] = [
-  { id: '4k', label: '4K', icon: 'monitor', width: 1920 },
-  { id: '1080p', label: '1080p', icon: 'monitor', width: 1440 },
-  { id: 'laptop', label: 'Laptop', icon: 'laptop', width: 1280 },
-  { id: 'tablet', label: 'Tablet', icon: 'tablet', width: 768 },
-  { id: 'mobile', label: 'Mobile', icon: 'smartphone', width: 390 },
-]
-
-/** Default working width — near 1:1 in a typical editor pane; device toggles scale-to-fit. */
-export const DEFAULT_VIEWPORT: ViewportId = '1080p'
-
-export function getViewport(id: ViewportId): Viewport {
-  return VIEWPORTS.find((v) => v.id === id) ?? VIEWPORTS[1]!
-}
+/**
+ * @deprecated Moved to `src/lib/breakpoints.ts` when the post editor adopted
+ * the same canvas — presets are shared editor infrastructure, not a page-editor
+ * detail. This module re-exports under the old names so nothing breaks
+ * mid-migration; import from `../../lib/breakpoints.js` in new code.
+ */
+export {
+  BREAKPOINTS as VIEWPORTS,
+  DEFAULT_BREAKPOINT as DEFAULT_VIEWPORT,
+  getBreakpoint as getViewport,
+  type Breakpoint as Viewport,
+  type BreakpointId as ViewportId,
+} from '../../lib/breakpoints.js'

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { FileText, Plus } from 'lucide-react'
+import { CanvasEditTip } from '../../components/CanvasEditTip.js'
 import type { PageSection, PostHeaderConfig } from '../../lib/post-editor-service.js'
 import { SectionRenderer, type PostRenderContext } from '../page-editor/sections/index.js'
 import { StructureNotice } from '../page-editor/StructureNotice.js'
@@ -15,7 +16,8 @@ interface PostEditorCanvasProps {
   selectedId: string | null
   viewport: ViewportId
   onSelect: (id: string) => void
-  onAddSection: () => void
+  /** Add-section CTA on the empty canvas. Omitted by design-owned editors. */
+  onAddSection?: () => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
   /** Site preview toggle is available — show WYSIWYG nudge on the canvas. */
@@ -77,6 +79,7 @@ export function PostEditorCanvas({
 
   return (
     <div ref={containerRef} className="bg-muted h-full overflow-auto p-6">
+      {sections.length > 0 && <CanvasEditTip />}
       <StructureNotice
         structuralTypes={structuralTypes}
         sitePreviewAvailable={sitePreviewAvailable}
@@ -112,7 +115,7 @@ export function PostEditorCanvas({
   )
 }
 
-function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
+function EmptyBody({ onAddSection }: { onAddSection?: () => void }) {
   // This block sits inside the fixed-white preview surface, so the neutral
   // greys intentionally match the website-preview palette used by PostHeader
   // and the section renderers (not the admin theme tokens, which flip in dark
@@ -125,16 +128,20 @@ function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
         <FileText className="text-muted-foreground h-5 w-5" aria-hidden />
       </span>
       <p className="text-muted-foreground text-sm">
-        The header is set by the template. Add body sections to build out this post.
+        {onAddSection
+          ? 'The header is set by the template. Add body sections to build out this post. Hover sections for a light outline, click to select, and edit in the inspector — or use Site preview to click text and images in place.'
+          : 'This post’s template renders no body sections. Layout is design-owned — sections come from the template in code. Pick a different template in Post settings, or edit the template itself.'}
       </p>
-      <button
-        type="button"
-        onClick={onAddSection}
-        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
-      >
-        <Plus className="h-4 w-4" aria-hidden />
-        Add Section
-      </button>
+      {onAddSection && (
+        <button
+          type="button"
+          onClick={onAddSection}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+        >
+          <Plus className="h-4 w-4" aria-hidden />
+          Add Section
+        </button>
+      )}
     </div>
   )
 }

package/src/views/post-editor/PostSectionEditor.tsx

@@ -10,17 +10,11 @@ import { EditorSeoAside } from '../../components/EditorSeoAside.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistory } from '../../components/VersionHistory.js'
 import {
-  addSection,
-  createSection,
-  duplicateSection,
   emptyPostFromTemplate,
   fetchPostForEditor,
   fetchTemplateForEditor,
   missingPostFields,
-  moveSection,
   publishPost,
-  removeSection,
-  reorderSections,
   savePostDraft,
   toggleSectionVisibility,
   updateSectionContent,
@@ -40,7 +34,7 @@ import {
   createPreviewToken,
 } from '../../lib/preview-link.js'
 import { usePublicSiteUrl } from '../../hooks/usePublicSiteUrl.js'
-import type { SectionSettings, SectionTypeId } from '../page-editor/section-types.js'
+import type { SectionSettings } from '../page-editor/section-types.js'
 import {
   hasCanvasRenderer,
   useAdminSectionRenderers,
@@ -52,7 +46,6 @@ import { SitePreviewFrame } from '../page-editor/SitePreviewFrame.js'
 import { useSitePreview } from '../page-editor/useSitePreview.js'
 import { SectionsPanel } from '../page-editor/SectionsPanel.js'
 import { SectionInspector } from '../page-editor/SectionInspector.js'
-import { AddSectionModal } from '../page-editor/AddSectionModal.js'
 import { ValidationSummary } from '../page-editor/ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
 import { computeLiveSeoScore } from '../../lib/editor-seo-content.js'
@@ -137,11 +130,9 @@ export function PostSectionEditor({
   const [saveState, setSaveState] = useState<SaveState>('idle')
   const [publishing, setPublishing] = useState(false)
 
-  const [addOpen, setAddOpen] = useState(false)
   const [fieldsOpen, setFieldsOpen] = useState(false)
   const [seoOpen, setSeoOpen] = useState(false)
   const [historyOpen, setHistoryOpen] = useState(false)
-  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
@@ -268,34 +259,10 @@ export function PostSectionEditor({
     [],
   )
 
-  const handleAdd = useCallback(
-    (type: SectionTypeId) => {
-      const section = createSection(type)
-      mutateSections((s) => addSection(s, section))
-      setSelectedId(section.id)
-      setAddOpen(false)
-    },
-    [mutateSections],
-  )
-
-  const handleReorder = useCallback(
-    (orderedIds: string[]) => mutateSections((s) => reorderSections(s, orderedIds)),
-    [mutateSections],
-  )
   const handleToggleVisibility = useCallback(
     (id: string) => mutateSections((s) => toggleSectionVisibility(s, id)),
     [mutateSections],
   )
-  const handleDuplicate = useCallback(
-    (id: string) => mutateSections((s) => duplicateSection(s, id)),
-    [mutateSections],
-  )
-  const confirmDelete = useCallback(() => {
-    if (!deleteTargetId) return
-    mutateSections((s) => removeSection(s, deleteTargetId))
-    setSelectedId((cur) => (cur === deleteTargetId ? null : cur))
-    setDeleteTargetId(null)
-  }, [deleteTargetId, mutateSections])
 
   const handleContentChange = useCallback(
     (patch: Record<string, unknown>) => {
@@ -709,11 +676,7 @@ export function PostSectionEditor({
             selectedId={selectedId}
             canEdit={canEdit}
             onSelect={handleSelectSection}
-            onReorder={handleReorder}
             onToggleVisibility={handleToggleVisibility}
-            onDuplicate={handleDuplicate}
-            onRequestDelete={(id) => setDeleteTargetId(id)}
-            onAdd={() => setAddOpen(true)}
           />
 
           <div className="flex-1 overflow-hidden">
@@ -738,7 +701,6 @@ export function PostSectionEditor({
                 selectedId={selectedId}
                 viewport={viewport}
                 onSelect={handleSelectSection}
-                onAddSection={() => setAddOpen(true)}
                 structuralTypes={structuralTypes}
                 sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
               />
@@ -778,13 +740,6 @@ export function PostSectionEditor({
         </div>
       </div>
 
-      <AddSectionModal
-        open={addOpen}
-        scope="post"
-        onClose={() => setAddOpen(false)}
-        onAdd={handleAdd}
-      />
-
       {post.id && (
         <VersionHistory
           collectionSlug={postType}
@@ -804,16 +759,6 @@ export function PostSectionEditor({
         onSave={handleFields}
       />
 
-      <ConfirmDialog
-        open={deleteTargetId !== null}
-        onClose={() => setDeleteTargetId(null)}
-        onConfirm={confirmDelete}
-        title="Delete section?"
-        description="This removes the section from the post. You can undo by leaving without saving."
-        confirmLabel="Delete"
-        destructive
-      />
-
       <ConfirmDialog
         open={confirmPublish}
         onClose={() => setConfirmPublish(false)}

package/src/views/post-editor/PostTemplateEditor.tsx

@@ -247,6 +247,9 @@ export function PostTemplateEditor({
             sections={template.sections}
             selectedId={selectedSectionId}
             canEdit={canEdit}
+            // The template editor is where structure is authored — it is the
+            // one surface that opts into add / reorder / duplicate / delete.
+            structural
             onSelect={(id) => setSelected({ kind: 'section', id })}
             onReorder={(ids) => mutateSections((s) => reorderSections(s, ids))}
             onToggleVisibility={(id) => mutateSections((s) => toggleSectionVisibility(s, id))}