@prenta/admin 0.92.0 → 0.93.0

package/src/styles/theme.css

@@ -162,6 +162,29 @@
   --text-xs: var(--fs-hint);
 }
 
+/*
+ * Canvas reflow steps — the container-query breakpoints the previewed PAGE
+ * reflows at, as distinct from Tailwind's `sm:`/`md:` viewport breakpoints,
+ * which describe the admin chrome around it.
+ *
+ * The canvas renders at a device's real CSS width and is scaled with a
+ * transform, so a viewport query there is meaningless: it would report the
+ * editor window's width, and picking "Mobile" on a wide monitor would render
+ * a 390px-wide canvas still laid out for desktop. Section renderers under
+ * `views/page-editor/sections/` must use `@pv-*`, never `sm:`/`md:`/`lg:`.
+ *
+ * Values come from the page-builder design handoff. Any element carrying
+ * these variants needs an ancestor with `@container` — EditorCanvas,
+ * PostEditorCanvas, PagePreview and PostPreview all declare it.
+ */
+@theme {
+  --container-pv-sm: 460px; /* below: stats 1-up, buttons full width */
+  --container-pv-md: 700px; /* below: image+text stacks, quotes 1-up */
+  --container-pv-lg: 900px; /* below: quote grid 2-up, stats collapse */
+  --container-pv-xl: 1100px; /* below: general step-down */
+  --container-pv-2xl: 2000px; /* above: type and padding scale up */
+}
+
 @layer base {
   .prenta-admin * {
     @apply border-border outline-ring/50;
@@ -255,6 +278,23 @@
    * The canvas re-establishes the site's typographic context: headings and
    * body text fall back to inheritance rather than the admin scale above.
    */
+  /*
+   * The canvas is the query container for every previewed section (`@pv-*`
+   * variants — see the step scale above). It lives here rather than as an
+   * `@container` utility on each host because FOUR surfaces render these
+   * sections — EditorCanvas, PostEditorCanvas, PagePreview, PostPreview — and
+   * a host that forgets it degrades silently: with no container ancestor,
+   * every `@pv-*` variant simply never matches and the page renders at its
+   * narrowest layout regardless of the selected breakpoint. Tying containment
+   * to the class that defines the surface makes that unforgettable.
+   *
+   * `inline-size` only: the canvas must stay free to grow as tall as its
+   * content, which `size` containment would prevent.
+   */
+  .prenta-admin .prenta-canvas {
+    container-type: inline-size;
+  }
+
   .prenta-admin .prenta-canvas :is(h1, h2, h3, h4) {
     font-size: revert-layer;
     font-weight: revert-layer;
@@ -383,6 +423,96 @@
     border-radius: var(--radius-md);
     margin: 1em 0;
   }
+
+  /*
+   * Structure canvas — lite hover outline on editable sections.
+   * Selected section chrome stays on the element (Tailwind outline-violet).
+   * Field-level chrome applies when renderers expose data-cms-field.
+   */
+  .prenta-admin .prenta-canvas [data-section-id][data-editable='true']:not([data-selected='true']) {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+    transition: outline-color 120ms ease;
+  }
+
+  .prenta-admin
+    .prenta-canvas
+    [data-section-id][data-editable='true']:not([data-selected='true']):hover {
+    outline-color: color-mix(in oklab, var(--acc) 40%, transparent);
+  }
+
+  .prenta-admin .prenta-canvas [data-cms-field] {
+    outline: 1px solid transparent;
+    outline-offset: 2px;
+    border-radius: 2px;
+    transition: outline-color 120ms ease;
+    cursor: text;
+  }
+
+  .prenta-admin .prenta-canvas [data-cms-field]:hover,
+  .prenta-admin .prenta-canvas [data-cms-field]:focus,
+  .prenta-admin .prenta-canvas [data-cms-field]:focus-within {
+    outline-color: color-mix(in oklab, var(--acc) 45%, transparent);
+  }
+
+  .prenta-admin .prenta-canvas [data-cms-field][data-cms-field-kind='media'] {
+    cursor: pointer;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .prenta-admin .prenta-canvas [data-section-id][data-editable='true'],
+    .prenta-admin .prenta-canvas [data-cms-field] {
+      transition: none;
+    }
+  }
+}
+
+/*
+ * Restore the stock Tailwind type scale inside the canvas.
+ *
+ * The `@theme inline` block above deliberately remaps six size keys onto admin
+ * design tokens so `text-base` means "admin body text, 13px" across the shell.
+ * That aliasing is right for admin chrome and wrong for the canvas, which
+ * renders the consumer's WEBSITE: there, `text-base` must mean 16px, the size
+ * a visitor actually reads. Left unscoped, every section renderer styles
+ * website copy on the admin scale — body text 3px small, `text-2xl` headings
+ * at 21px instead of 24px.
+ *
+ * This matters beyond looks. The reflow guard measures how copy wraps by
+ * laying it out in the canvas's own class chain; if the canvas renders type at
+ * the admin scale, every line count it reports is measured against a font size
+ * the live page never uses, and the guard is confidently wrong.
+ *
+ * Must live in `@layer utilities`, not `@layer base`: layer order beats
+ * specificity, so a base-layer rule — however specific — loses to the utility
+ * it is trying to correct. Inside the same layer, specificity decides, and
+ * three classes beat one.
+ *
+ * Only `font-size` is restated. The line-height half of each utility is a
+ * unitless ratio that scales correctly on its own.
+ *
+ * Values are Tailwind's defaults; the remapped keys are the only ones listed,
+ * because every other step (`text-3xl` and up) was never aliased.
+ */
+@layer utilities {
+  .prenta-admin .prenta-canvas .text-xs {
+    font-size: 0.75rem;
+  }
+  .prenta-admin .prenta-canvas .text-sm {
+    font-size: 0.875rem;
+  }
+  .prenta-admin .prenta-canvas .text-base {
+    font-size: 1rem;
+  }
+  .prenta-admin .prenta-canvas .text-lg {
+    font-size: 1.125rem;
+  }
+  .prenta-admin .prenta-canvas .text-xl {
+    font-size: 1.25rem;
+  }
+  .prenta-admin .prenta-canvas .text-2xl {
+    font-size: 1.5rem;
+  }
 }
 
 .prenta-admin.reduce-motion,

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

@@ -0,0 +1,50 @@
+'use client'
+
+import { Laptop, Monitor, Smartphone, Tablet, type LucideIcon } from 'lucide-react'
+import type { Breakpoint } from '../../lib/breakpoints.js'
+
+const ICONS: Record<string, LucideIcon> = {
+  monitor: Monitor,
+  laptop: Laptop,
+  tablet: Tablet,
+  smartphone: Smartphone,
+}
+
+interface CanvasMetaLineProps {
+  breakpoint: Breakpoint
+  /** Unscaled page height in px, measured from the canvas surface. */
+  pageHeight: number
+  /** Current transform scale, 0–1. */
+  scale: number
+}
+
+/**
+ * Reads out what the canvas is currently showing:
+ * `▣ Wide Screen | 1920 × 2174 px | 42% scale`.
+ *
+ * The dimensions are the page's own, before scaling — the number an editor
+ * needs when reasoning about the live page. The scale is the separate fact
+ * that the preview is shrunk to fit.
+ */
+export function CanvasMetaLine({ breakpoint, pageHeight, scale }: CanvasMetaLineProps) {
+  const Icon = ICONS[breakpoint.icon] ?? Monitor
+  const percent = Math.round(scale * 100)
+
+  return (
+    <p
+      className="text-muted-foreground mb-3 inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-[0.3px] whitespace-nowrap"
+      // The canvas is decorative chrome around the real content; announcing
+      // these numbers on every keystroke would flood a screen reader.
+      aria-hidden
+    >
+      <Icon className="h-3 w-3" />
+      <span className="text-foreground/70">{breakpoint.name}</span>
+      <span aria-hidden>|</span>
+      <span className="tabular-nums">
+        {breakpoint.width} × {pageHeight ? Math.round(pageHeight) : '—'} px
+      </span>
+      <span aria-hidden>|</span>
+      <span className="tabular-nums">{percent}% scale</span>
+    </p>
+  )
+}

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

@@ -1,71 +1,100 @@
 '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
 }
 
 /**
- * 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,
 }: 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 +103,61 @@ 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="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 />
       ) : (
         <>
+          <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="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',
               }}
@@ -118,25 +180,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
@@ -63,7 +66,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 +91,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,6 +109,9 @@ export function EditorTopBar({
   publishReady = true,
   publishDisabledReason,
   viewport,
+  zoom,
+  canvasScale,
+  onZoom,
   backLabel = 'Pages',
   onViewport,
   onBack,
@@ -117,7 +123,8 @@ export function EditorTopBar({
   onOpenSettings,
   onOpenSeo,
   seoOpen = false,
-  seoScore = 0,
+  seoScore,
+  seoScoreBand,
   onSaveDraft,
   onPublish,
   onSchedule,
@@ -209,32 +216,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
@@ -252,15 +238,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>
         )}