@prenta/admin 0.92.0 → 0.94.0

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

@@ -1,71 +1,116 @@
 'use client'
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { LayoutTemplate, Plus } from 'lucide-react'
+import { LayoutTemplate } from 'lucide-react'
+import { CanvasEditTip } from '../../components/CanvasEditTip.js'
+import { CanvasMetaLine } from './CanvasMetaLine.js'
+import { fitScale, getBreakpoint, type BreakpointId, type Zoom } from '../../lib/breakpoints.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
 import { SectionRenderer } from './sections/index.js'
 import { StructureNotice } from './StructureNotice.js'
-import { getViewport, type ViewportId } from './viewports.js'
 
 interface EditorCanvasProps {
   sections: PageSection[]
   selectedId: string | null
-  viewport: ViewportId
+  breakpoint: BreakpointId
+  zoom?: Zoom
   onSelect: (id: string) => void
-  onAddSection: () => void
+  /**
+   * Reports the measured scale so the header's zoom chip can show a real
+   * percentage. Only the canvas knows the available width, so the number has
+   * to travel up rather than being recomputed by the header.
+   */
+  onScaleChange?: (scale: number) => void
+  /**
+   * Reports the canvas surface element, so the reflow guard can clone it. The
+   * guard needs the real element rather than a `document.querySelector`, which
+   * would also match the site-preview frame's canvas when that is mounted.
+   */
+  onCanvasElement?: (el: HTMLElement | null) => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
   sitePreviewAvailable?: boolean
+  /**
+   * Read-only render of a past version. Suppresses selection and the editing
+   * affordances, and turns on the changed-section outlines.
+   */
+  reviewing?: boolean
+  /** Sections that differ from the version before the one being reviewed. */
+  changedSectionIds?: ReadonlySet<string>
+  /**
+   * Rendered in place of the editing tip / structure notice while reviewing.
+   * Passed in rather than built here because the review bar's actions belong
+   * to the editor's history state, which the canvas knows nothing about.
+   */
+  reviewBar?: React.ReactNode
 }
 
 /**
- * The preview canvas. Renders the page at the selected viewport's logical
- * width and scales it down with a CSS transform so wide viewports (1440px,
- * 1920px) fit inside the available canvas column. Scale is recomputed from
- * a ResizeObserver so it stays correct as panels open/close.
+ * The preview canvas.
+ *
+ * The canvas renders at the breakpoint's **real CSS width** and is scaled down
+ * with a transform. Combined with `container-type: inline-size`, that makes the
+ * page reflow against its own width — the same container queries that style the
+ * live page decide the layout. A max-width clamp cannot do this: it yields a
+ * narrow desktop layout rather than the mobile one.
+ *
+ * Two measurement rules, both learned the hard way:
+ *
+ *   1. Available width comes from a **zero-height sentinel** rendered as the
+ *      panel's first child, not from `panel.clientWidth - padding`. The two
+ *      disagree once a scrollbar appears or the host scales the preview, and
+ *      the padding arithmetic silently rots whenever the gutter changes.
+ *   2. Both measurements are re-taken on **every render**, not only from the
+ *      ResizeObserver. Page height changes with every text edit, image swap and
+ *      show/hide — none of which resize the observed elements. The observer
+ *      exists for later window resizes; its first callback is not a substitute.
  */
 export function EditorCanvas({
   sections,
   selectedId,
-  viewport,
+  breakpoint,
+  zoom = 'fit',
   onSelect,
-  onAddSection,
+  onScaleChange,
+  onCanvasElement,
   structuralTypes = [],
   sitePreviewAvailable = false,
+  reviewing = false,
+  changedSectionIds,
+  reviewBar,
 }: EditorCanvasProps) {
-  const vp = getViewport(viewport)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const bp = getBreakpoint(breakpoint)
+  const sentinelRef = useRef<HTMLDivElement>(null)
   const surfaceRef = useRef<HTMLDivElement>(null)
   const sectionRefs = useRef<Map<string, HTMLElement>>(new Map())
-  const [scale, setScale] = useState(1)
-  const [surfaceHeight, setSurfaceHeight] = useState<number | null>(null)
+
+  const [available, setAvailable] = useState(0)
+  const [pageHeight, setPageHeight] = useState(0)
 
   const registerRef = useCallback((id: string, el: HTMLElement | null) => {
     if (el) sectionRefs.current.set(id, el)
     else sectionRefs.current.delete(id)
   }, [])
 
-  // Recompute scale + scaled height from the container width.
+  // No dependency array: page height changes on edits that resize nothing the
+  // observer watches. Both setters bail when the value is unchanged, so this
+  // settles after one extra pass instead of looping.
   useLayoutEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-
-    const recompute = () => {
-      // 48px breathing room so the surface never kisses the column edges.
-      const available = container.clientWidth - 48
-      const next = Math.min(1, available / vp.width)
-      setScale(next > 0 ? next : 1)
-      if (surfaceRef.current) {
-        setSurfaceHeight(surfaceRef.current.offsetHeight * (next > 0 ? next : 1))
-      }
+    const measure = () => {
+      const sentinelWidth = sentinelRef.current?.offsetWidth ?? 0
+      if (sentinelWidth > 0) setAvailable((prev) => (prev === sentinelWidth ? prev : sentinelWidth))
+
+      const height = surfaceRef.current?.offsetHeight ?? 0
+      if (height > 0) setPageHeight((prev) => (prev === height ? prev : height))
     }
 
-    recompute()
-    const ro = new ResizeObserver(recompute)
-    ro.observe(container)
+    measure()
+
+    const ro = new ResizeObserver(measure)
+    if (sentinelRef.current) ro.observe(sentinelRef.current)
     if (surfaceRef.current) ro.observe(surfaceRef.current)
     return () => ro.disconnect()
-  }, [vp.width, sections])
+  })
 
   // Scroll the selected section into view within the canvas.
   useEffect(() => {
@@ -74,28 +119,70 @@ export function EditorCanvas({
     if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
   }, [selectedId])
 
+  const scale = fitScale(available, bp.width, zoom)
+
+  useEffect(() => {
+    onScaleChange?.(scale)
+  }, [scale, onScaleChange])
+
   return (
-    <div ref={containerRef} className="bg-muted h-full overflow-auto p-6">
+    <div className="prenta-canvas-scroll bg-muted h-full overflow-auto px-6 pt-4.5 pb-10 text-center">
+      {/*
+       * Zero-height sentinel. Its offsetWidth IS the usable width — it is
+       * subject to exactly the same padding, scrollbar and host scaling as the
+       * canvas, so there is no arithmetic to get wrong. Must stay the first
+       * child and must stay zero-height.
+       */}
+      <div ref={sentinelRef} aria-hidden className="h-0" />
+
       {sections.length === 0 ? (
-        <EmptyCanvas onAddSection={onAddSection} />
+        <EmptyCanvas />
       ) : (
         <>
-          <StructureNotice
-            structuralTypes={structuralTypes}
-            sitePreviewAvailable={sitePreviewAvailable}
-          />
+          {/* The review bar REPLACES the editing chrome rather than joining it:
+              a tip about clicking sections to edit them is actively wrong while
+              the canvas is showing a version you cannot edit. */}
+          {reviewing ? (
+            reviewBar
+          ) : (
+            <>
+              <CanvasEditTip />
+              <StructureNotice
+                structuralTypes={structuralTypes}
+                sitePreviewAvailable={sitePreviewAvailable}
+              />
+            </>
+          )}
+          <CanvasMetaLine breakpoint={bp} pageHeight={pageHeight} scale={scale} />
+
+          {/*
+           * Fit box: reserves the scaled footprint so the surrounding scroll
+           * area sizes correctly against a transformed child. Deliberately has
+           * NO width/height transition — a transition frozen mid-flight (a
+           * preview that is not visible never finishes one) reports a bogus
+           * height and corrupts the next measurement.
+           */}
           <div
-            className="mx-auto"
-            style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}
+            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. */}
             <div
-              ref={surfaceRef}
-              className="prenta-canvas border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
+              ref={(el) => {
+                surfaceRef.current = el
+                onCanvasElement?.(el)
+              }}
+              // `prenta-canvas` 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.
+              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: vp.width,
+                width: bp.width,
                 transform: `scale(${scale})`,
                 transformOrigin: 'top left',
               }}
@@ -105,6 +192,8 @@ export function EditorCanvas({
                   key={section.id}
                   section={section}
                   editable
+                  reviewing={reviewing}
+                  changed={changedSectionIds?.has(section.id) ?? false}
                   selected={section.id === selectedId}
                   onSelect={onSelect}
                   registerRef={registerRef}
@@ -118,25 +207,22 @@ export function EditorCanvas({
   )
 }
 
-function EmptyCanvas({ onAddSection }: { onAddSection: () => void }) {
+/**
+ * Design-owned pages always ship the template's sections, so an empty canvas
+ * means the template resolved to nothing — a configuration problem, not an
+ * invitation to add a section. There is deliberately no "Add section" button.
+ */
+function EmptyCanvas() {
   return (
     <div className="mx-auto flex h-full max-w-md flex-col items-center justify-center text-center">
       <div className="bg-card border-border mb-4 flex h-14 w-14 items-center justify-center rounded-full border">
         <LayoutTemplate className="text-muted-foreground h-6 w-6" aria-hidden />
       </div>
-      <h2 className="text-foreground text-lg font-medium">This page has no sections yet</h2>
-      <p className="text-muted-foreground mt-1 mb-5 text-sm">
-        Add your first section to start building the page. You can reorder, hide, and edit sections
-        at any time.
+      <h2 className="text-foreground text-lg font-medium">This template renders no sections</h2>
+      <p className="text-muted-foreground mt-1 text-sm">
+        Layout is design-owned — sections come from the page's template in code. Check that the page
+        has a template assigned, or pick a different one in Page settings.
       </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>
     </div>
   )
 }

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

@@ -7,18 +7,16 @@ import {
   Eye,
   Globe,
   History,
-  Laptop,
   Loader2,
-  type LucideIcon,
-  Monitor,
   Settings2,
-  Smartphone,
-  Tablet,
   TriangleAlert,
 } from 'lucide-react'
 import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js'
+import { BreakpointPicker } from '../../components/BreakpointPicker.js'
+import { ZoomChip } from '../../components/ZoomChip.js'
 import type { PageStatus } from '../../lib/page-editor-service.js'
-import { VIEWPORTS, type ViewportId } from './viewports.js'
+import type { Zoom } from '../../lib/breakpoints.js'
+import { type ViewportId } from './viewports.js'
 
 export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
 
@@ -35,6 +33,11 @@ interface EditorTopBarProps {
   /** Shown on hover/focus when publish is blocked by validation (not role). */
   publishDisabledReason?: string
   viewport: ViewportId
+  /** Canvas zoom mode; omit to hide the zoom chip (e.g. the site-preview iframe). */
+  zoom?: Zoom
+  /** Scale the canvas actually measured, 0–1 — displayed by the zoom chip. */
+  canvasScale?: number
+  onZoom?: (zoom: Zoom) => void
   /** Breadcrumb root label + back-button text (e.g. "Pages" or "Posts"). */
   backLabel?: string
   onViewport: (v: ViewportId) => void
@@ -47,10 +50,16 @@ interface EditorTopBarProps {
    */
   onViewOnSite?: () => void
   /**
-   * Open the version history panel. When omitted the History button is
+   * Toggle the version history panel. When omitted the History button is
    * hidden — e.g. for unsaved documents that have no versions yet.
    */
   onHistory?: () => void
+  /**
+   * Whether history is showing. History takes over the rail rather than
+   * opening a dialog, so the button needs a pressed state — without one there
+   * is nothing in the chrome saying which mode the editor is in.
+   */
+  historyOpen?: boolean
   /** Whether the inline site preview (iframe of the public site) is showing. */
   sitePreview?: boolean
   /**
@@ -63,7 +72,14 @@ interface EditorTopBarProps {
   onOpenSeo?: () => void
   seoOpen?: boolean
   /** Live 0–100 SEO score shown left of the SEO label. */
+  /**
+   * 0-100 for the header chip. `undefined` means not known yet — the chip
+   * renders without a number rather than defaulting to 0, which would read as
+   * a catastrophic score for a page nobody has audited.
+   */
   seoScore?: number
+  /** Band for `seoScore`; omit to derive from the content-analysis scale. */
+  seoScoreBand?: 'good' | 'fair' | 'poor'
   onSaveDraft: () => void
   onPublish: () => void
   /** Open the schedule-publish dialog. Omitted when the document is unsaved. */
@@ -81,13 +97,6 @@ interface EditorTopBarProps {
   structuralTypes?: string[]
 }
 
-const VIEWPORT_ICONS: Record<string, LucideIcon> = {
-  monitor: Monitor,
-  laptop: Laptop,
-  tablet: Tablet,
-  smartphone: Smartphone,
-}
-
 const STATUS_TEXT: Record<PageStatus, { label: string; className: string }> = {
   DRAFT: { label: 'Draft', className: 'text-warning dark:text-amber-400' },
   PUBLISHED: { label: 'Published', className: 'text-emerald-600 dark:text-emerald-400' },
@@ -106,18 +115,23 @@ export function EditorTopBar({
   publishReady = true,
   publishDisabledReason,
   viewport,
+  zoom,
+  canvasScale,
+  onZoom,
   backLabel = 'Pages',
   onViewport,
   onBack,
   onPreview,
   onViewOnSite,
   onHistory,
+  historyOpen = false,
   sitePreview = false,
   onToggleSitePreview,
   onOpenSettings,
   onOpenSeo,
   seoOpen = false,
-  seoScore = 0,
+  seoScore,
+  seoScoreBand,
   onSaveDraft,
   onPublish,
   onSchedule,
@@ -170,7 +184,7 @@ export function EditorTopBar({
               : 'Schedule a future publish date'
 
   return (
-    <header className="bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
+    <header className="prenta-editor-header bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
       {/* Breadcrumb + status */}
       <div className="flex min-w-0 items-center gap-2">
         <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
@@ -209,32 +223,11 @@ export function EditorTopBar({
 
       {/* Right controls */}
       <div className="flex items-center gap-2">
-        <div
-          className="border-border bg-background hidden items-center gap-0.5 rounded-lg border p-0.5 md:flex"
-          role="group"
-          aria-label="Preview viewport"
-        >
-          {VIEWPORTS.map((v) => {
-            const Icon = VIEWPORT_ICONS[v.icon] ?? Monitor
-            const active = v.id === viewport
-            return (
-              <button
-                key={v.id}
-                type="button"
-                onClick={() => onViewport(v.id)}
-                aria-pressed={active}
-                title={`${v.label} (${v.width}px)`}
-                className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors ${
-                  active
-                    ? 'bg-primary text-primary-foreground'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                }`}
-              >
-                <Icon className="h-3.5 w-3.5" aria-hidden />
-                <span className="hidden lg:inline">{v.label}</span>
-              </button>
-            )
-          })}
+        <div className="hidden items-center gap-1.5 md:flex">
+          <BreakpointPicker value={viewport} onChange={onViewport} />
+          {zoom !== undefined && onZoom && (
+            <ZoomChip zoom={zoom} scale={canvasScale ?? 1} onChange={onZoom} />
+          )}
         </div>
 
         <button
@@ -242,7 +235,7 @@ export function EditorTopBar({
           onClick={onOpenSettings}
           aria-label="Page settings"
           title="Page settings"
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+          className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
         >
           <Settings2 className="h-4 w-4" aria-hidden />
         </button>
@@ -252,15 +245,21 @@ export function EditorTopBar({
             type="button"
             onClick={onOpenSeo}
             aria-pressed={seoOpen}
-            aria-label={`SEO, score ${seoScore} out of 100`}
-            title={`SEO — score ${seoScore}/100. Meta tags, social preview, schema, and analysis.`}
+            aria-label={seoScore === undefined ? 'SEO' : `SEO, score ${seoScore} out of 100`}
+            title={
+              seoScore === undefined
+                ? 'SEO — meta tags, social preview, schema, and analysis.'
+                : `SEO — score ${seoScore}/100. Meta tags, social preview, schema, and analysis.`
+            }
             className={`inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors ${
               seoOpen
                 ? 'bg-primary text-primary-foreground'
                 : 'text-muted-foreground hover:text-foreground hover:bg-accent'
             }`}
           >
-            <EditorSeoScoreBadge score={seoScore} inverted={seoOpen} />
+            {seoScore !== undefined && (
+              <EditorSeoScoreBadge score={seoScore} band={seoScoreBand} inverted={seoOpen} />
+            )}
             <span className="hidden sm:inline">SEO</span>
           </button>
         )}
@@ -269,9 +268,14 @@ export function EditorTopBar({
           <button
             type="button"
             onClick={onHistory}
+            aria-pressed={historyOpen}
             aria-label="Version history"
-            title="Version history"
-            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+            title={historyOpen ? 'Close version history' : 'Version history'}
+            className={`prenta-touch-target rounded-lg p-2 transition-colors ${
+              historyOpen
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            }`}
           >
             <History className="h-4 w-4" aria-hidden />
           </button>
@@ -282,7 +286,7 @@ export function EditorTopBar({
           onClick={onPreview}
           aria-label={previewLabel}
           title={previewLabel}
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+          className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
         >
           <Eye className="h-4 w-4" aria-hidden />
         </button>
@@ -298,7 +302,7 @@ export function EditorTopBar({
                 ? 'Back to editor canvas'
                 : 'Inline site preview — render the draft through your public site, in place'
             }
-            className={`rounded-lg p-2 transition-colors ${
+            className={`prenta-touch-target rounded-lg p-2 transition-colors ${
               sitePreview
                 ? 'bg-primary text-primary-foreground'
                 : 'text-muted-foreground hover:text-foreground hover:bg-accent'
@@ -329,7 +333,7 @@ export function EditorTopBar({
               onClick={onViewOnSite}
               aria-label={isLive ? 'View live page' : 'View draft on site'}
               title={isLive ? 'View live page' : 'View draft on site'}
-              className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+              className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
             >
               <ExternalLink className="h-4 w-4" aria-hidden />
             </button>