@prenta/admin 0.92.0 → 0.93.0

package/src/__tests__/lib/rail-width.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest'
+import {
+  RAIL_DEFAULT_WIDTH,
+  RAIL_MAX_WIDTH,
+  RAIL_MIN_WIDTH,
+  clampRailWidth,
+  readRailWidth,
+  writeRailWidth,
+} from '../../lib/rail-width.js'
+
+function fakeStorage(initial: Record<string, string> = {}) {
+  const map = new Map(Object.entries(initial))
+  return {
+    getItem: (k: string) => map.get(k) ?? null,
+    setItem: (k: string, v: string) => void map.set(k, v),
+    read: (k: string) => map.get(k) ?? null,
+  }
+}
+
+describe('clampRailWidth', () => {
+  it('holds the rail inside its usable range', () => {
+    expect(clampRailWidth(200)).toBe(RAIL_MIN_WIDTH)
+    expect(clampRailWidth(900)).toBe(RAIL_MAX_WIDTH)
+    expect(clampRailWidth(420)).toBe(420)
+  })
+
+  it('rounds to whole pixels', () => {
+    // Pointer deltas are fractional on scaled displays; a fractional width
+    // makes the rail's border land between device pixels and shimmer.
+    expect(clampRailWidth(420.6)).toBe(421)
+  })
+
+  it('falls back to the default on junk rather than producing NaN width', () => {
+    expect(clampRailWidth(Number.NaN)).toBe(RAIL_DEFAULT_WIDTH)
+    expect(clampRailWidth(Number.POSITIVE_INFINITY)).toBe(RAIL_DEFAULT_WIDTH)
+  })
+})
+
+describe('readRailWidth', () => {
+  it('returns the default when nothing is stored', () => {
+    expect(readRailWidth(fakeStorage())).toBe(RAIL_DEFAULT_WIDTH)
+  })
+
+  it('reads a stored width', () => {
+    expect(readRailWidth(fakeStorage({ 'pb.panelW': '480' }))).toBe(480)
+  })
+
+  it('clamps a stored width that is out of range', () => {
+    // A width persisted before the range changed, or hand-edited in devtools,
+    // must not be able to render an unusable rail.
+    expect(readRailWidth(fakeStorage({ 'pb.panelW': '5000' }))).toBe(RAIL_MAX_WIDTH)
+    expect(readRailWidth(fakeStorage({ 'pb.panelW': '10' }))).toBe(RAIL_MIN_WIDTH)
+  })
+
+  it('survives a non-numeric stored value', () => {
+    expect(readRailWidth(fakeStorage({ 'pb.panelW': 'wide' }))).toBe(RAIL_DEFAULT_WIDTH)
+  })
+
+  it('survives storage that throws', () => {
+    // Safari in private mode throws on getItem. A rail that cannot size itself
+    // must not take down the editor.
+    const hostile = {
+      getItem: () => {
+        throw new Error('SecurityError')
+      },
+    }
+    expect(readRailWidth(hostile)).toBe(RAIL_DEFAULT_WIDTH)
+  })
+})
+
+describe('writeRailWidth', () => {
+  it('persists the clamped value, not the raw one', () => {
+    const store = fakeStorage()
+    writeRailWidth(9000, store)
+    expect(store.read('pb.panelW')).toBe(String(RAIL_MAX_WIDTH))
+  })
+
+  it('swallows a storage failure', () => {
+    const hostile = {
+      setItem: () => {
+        throw new Error('QuotaExceededError')
+      },
+    }
+    expect(() => writeRailWidth(400, hostile)).not.toThrow()
+  })
+})

package/src/__tests__/lib/reflow-baseline.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import type { PageSection } from '@prenta/core/page-sections'
+import { baselineFieldText, snapshotBaseline } from '../../lib/reflow-baseline.js'
+
+const sections = [
+  {
+    id: 's1',
+    sectionType: 'hero',
+    name: 'Hero',
+    visible: true,
+    content: {
+      heading: 'Ship content without layout drift',
+      body: 'A design-owned authoring surface.',
+      stats: [{ label: 'Uptime', value: '99.9%' }],
+      count: 3,
+    },
+    settings: {},
+  },
+] as unknown as PageSection[]
+
+describe('reflow baseline', () => {
+  it('captures nothing for a page that is not live', () => {
+    // A draft has no published layout to break. An empty snapshot would be
+    // worse than none: it reads as "every field was blank", so every line of
+    // existing copy is reported as newly added.
+    expect(snapshotBaseline(sections, 'DRAFT')).toBeNull()
+    expect(snapshotBaseline(sections, 'SCHEDULED')).toBeNull()
+    expect(snapshotBaseline(sections, 'PUBLISHED')).not.toBeNull()
+  })
+
+  it('is a copy, so later edits to the draft do not move it', () => {
+    // The baseline is what is live. If it aliased the section's content object,
+    // editing the draft would silently drag the baseline along and the guard
+    // would report that nothing ever changed.
+    const baseline = snapshotBaseline(sections, 'PUBLISHED')
+    ;(sections[0]!.content as Record<string, unknown>).heading = 'Edited in the draft'
+
+    expect(baselineFieldText(baseline, 's1', 'heading')).toBe('Ship content without layout drift')
+    // Restore for the remaining cases.
+    ;(sections[0]!.content as Record<string, unknown>).heading = 'Ship content without layout drift'
+  })
+
+  it('resolves repeater paths the renderers emit', () => {
+    const baseline = snapshotBaseline(sections, 'PUBLISHED')
+    expect(baselineFieldText(baseline, 's1', 'stats.0.label')).toBe('Uptime')
+  })
+
+  it('returns undefined for anything that is not baseline text', () => {
+    const baseline = snapshotBaseline(sections, 'PUBLISHED')
+
+    // No snapshot at all.
+    expect(baselineFieldText(null, 's1', 'heading')).toBeUndefined()
+    // Section added since publish.
+    expect(baselineFieldText(baseline, 'brand-new', 'heading')).toBeUndefined()
+    // Field that did not exist.
+    expect(baselineFieldText(baseline, 's1', 'subheading')).toBeUndefined()
+    // Path that runs off the end of a scalar.
+    expect(baselineFieldText(baseline, 's1', 'heading.nope')).toBeUndefined()
+    // Present but not a string — a count has no wrapping to compare.
+    expect(baselineFieldText(baseline, 's1', 'count')).toBeUndefined()
+    // Index past the end of a repeater.
+    expect(baselineFieldText(baseline, 's1', 'stats.7.label')).toBeUndefined()
+  })
+})

package/src/__tests__/lib/reflow-probe.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest'
+import {
+  linesFromMetrics,
+  reflowSeverity,
+  worstBreakpoint,
+  type FieldLineCount,
+} from '../../lib/reflow-probe.js'
+
+describe('linesFromMetrics', () => {
+  it('divides height by line height', () => {
+    expect(linesFromMetrics(72, 24, 16)).toBe(3)
+  })
+
+  it('rounds rather than floors', () => {
+    // Sub-pixel line heights accumulate; 2.97 lines is three lines on screen,
+    // and flooring would under-report exactly the overflow being guarded.
+    expect(linesFromMetrics(71.3, 24, 16)).toBe(3)
+  })
+
+  it('falls back to a ratio when line-height computes to normal', () => {
+    // `parseFloat('normal')` is NaN — every element that never set a
+    // line-height would otherwise measure as one line forever.
+    expect(linesFromMetrics(60, Number.NaN, 16)).toBe(3)
+  })
+
+  it('never reports zero lines', () => {
+    // An empty field still occupies a line's worth of intent, and zero would
+    // read as "this shrank" against any baseline.
+    expect(linesFromMetrics(0, 24, 16)).toBe(1)
+    expect(linesFromMetrics(0, 0, 0)).toBe(1)
+  })
+})
+
+describe('reflowSeverity', () => {
+  it('flags one extra line as growth and two as bad', () => {
+    expect(reflowSeverity(3, 2)).toBe('grew')
+    expect(reflowSeverity(4, 2)).toBe('grew-badly')
+  })
+
+  it('stays quiet when copy shrinks', () => {
+    // Shorter copy cannot break a layout that already held the longer version.
+    // Flagging it would put a warning on the edit the editor was asked to make.
+    expect(reflowSeverity(1, 3)).toBe('same')
+    expect(reflowSeverity(2, 2)).toBe('same')
+  })
+})
+
+describe('worstBreakpoint', () => {
+  const at = (pairs: Array<[string, number]>): FieldLineCount[] =>
+    pairs.map(([id, lines]) => ({ id, lines }) as FieldLineCount)
+
+  it('picks the biggest jump', () => {
+    const worst = worstBreakpoint(
+      at([
+        ['wide', 3],
+        ['laptop', 5],
+        ['mobile', 4],
+      ]),
+      at([
+        ['wide', 3],
+        ['laptop', 3],
+        ['mobile', 3],
+      ]),
+    )
+    expect(worst).toBe('laptop')
+  })
+
+  it('breaks a tie toward the narrowest width', () => {
+    // The same damage at several sizes is most likely to look broken where
+    // there is least room.
+    const worst = worstBreakpoint(
+      at([
+        ['4k', 4],
+        ['laptop', 4],
+        ['mobile', 4],
+      ]),
+      at([
+        ['4k', 3],
+        ['laptop', 3],
+        ['mobile', 3],
+      ]),
+    )
+    expect(worst).toBe('mobile')
+  })
+
+  it('returns nothing when no breakpoint grew', () => {
+    expect(worstBreakpoint(at([['wide', 2]]), at([['wide', 3]]))).toBeNull()
+  })
+
+  it('ignores breakpoints missing from the baseline', () => {
+    // A baseline captured before a preset existed must not make that preset
+    // look like a regression.
+    expect(worstBreakpoint(at([['4k', 9]]), at([['wide', 1]]))).toBeNull()
+  })
+})

package/src/__tests__/styles/canvas-container-queries.test.ts

@@ -0,0 +1,103 @@
+import { readFileSync, readdirSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * The editor canvas renders a page at a device's real CSS width and scales it
+ * with a transform, so the page must reflow against the CANVAS width, not the
+ * browser viewport. Two invariants make that work, and both fail silently:
+ *
+ *   1. `.prenta-canvas` must establish an inline-size query container. Without
+ *      it, `@pv-*` variants never match and every breakpoint renders the
+ *      narrowest layout — which looks plausible enough to ship.
+ *   2. Section renderers must not use viewport variants (`sm:`, `md:`, `lg:`).
+ *      Those resolve against the editor window, so picking "Mobile" on a wide
+ *      monitor yields a 390px canvas still laid out for desktop — the exact
+ *      bug that made the old preview decorative.
+ */
+
+const SECTIONS_DIR = fileURLToPath(new URL('../../views/page-editor/sections/', import.meta.url))
+const THEME_CSS = fileURLToPath(new URL('../../styles/theme.css', import.meta.url))
+
+/** Viewport variants in a className position. Matches `sm:`…`2xl:` prefixes. */
+const VIEWPORT_VARIANT = /(?<![\w@[-])(?:sm|md|lg|xl|2xl):[a-z0-9[]/g
+
+function sectionFiles(): string[] {
+  return readdirSync(SECTIONS_DIR).filter((f) => f.endsWith('.tsx') || f.endsWith('.ts'))
+}
+
+describe('canvas container queries', () => {
+  it('makes .prenta-canvas an inline-size query container', () => {
+    const css = readFileSync(THEME_CSS, 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+    expect(css).toMatch(/\.prenta-canvas\s*\{[^}]*container-type:\s*inline-size/)
+  })
+
+  it('defines every reflow step the handoff specifies', () => {
+    const css = readFileSync(THEME_CSS, 'utf8')
+    for (const [name, value] of [
+      ['--container-pv-sm', '460px'],
+      ['--container-pv-md', '700px'],
+      ['--container-pv-lg', '900px'],
+      ['--container-pv-xl', '1100px'],
+      ['--container-pv-2xl', '2000px'],
+    ]) {
+      expect(css, `${name} is missing or has moved`).toContain(`${name}: ${value}`)
+    }
+  })
+
+  it('uses no viewport breakpoints in any section renderer', () => {
+    const offenders: string[] = []
+    for (const file of sectionFiles()) {
+      const source = readFileSync(SECTIONS_DIR + file, 'utf8')
+      for (const match of source.matchAll(VIEWPORT_VARIANT)) {
+        offenders.push(`${file}: ${match[0]}`)
+      }
+    }
+    expect(
+      offenders,
+      'Section renderers must reflow on the canvas width. Use the @pv-* container ' +
+        'steps (theme.css) instead of sm:/md:/lg:.',
+    ).toEqual([])
+  })
+
+  it('restores the stock type scale inside the canvas, in the utilities layer', () => {
+    // The admin remaps six Tailwind size keys onto its own tokens (text-base =
+    // 13px). The canvas renders the consumer's website, where text-base must
+    // be 16px — and the reflow guard measures wrapping against these sizes, so
+    // a canvas on the admin scale makes every line count wrong.
+    const css = readFileSync(THEME_CSS, 'utf8')
+
+    // Layer order beats specificity: in @layer base this override would lose
+    // to the very utility it corrects.
+    const utilities = css.slice(css.indexOf('@layer utilities'))
+    expect(utilities, 'canvas type restoration must be in @layer utilities').toContain(
+      '.prenta-admin .prenta-canvas .text-base',
+    )
+
+    for (const [utility, size] of [
+      ['text-xs', '0.75rem'],
+      ['text-sm', '0.875rem'],
+      ['text-base', '1rem'],
+      ['text-lg', '1.125rem'],
+      ['text-xl', '1.25rem'],
+      ['text-2xl', '1.5rem'],
+    ]) {
+      const rule = new RegExp(
+        `\\.prenta-canvas \\.${utility}\\s*\\{[^}]*font-size:\\s*${size!.replace('.', '\\.')}`,
+      )
+      expect(utilities, `${utility} is not restored to its stock size`).toMatch(rule)
+    }
+  })
+
+  it('only references container steps that exist', () => {
+    const declared = new Set(['@pv-sm', '@pv-md', '@pv-lg', '@pv-xl', '@pv-2xl'])
+    const used = new Set<string>()
+    for (const file of sectionFiles()) {
+      const source = readFileSync(SECTIONS_DIR + file, 'utf8')
+      for (const match of source.matchAll(/@pv-[\w-]+?(?=:)/g)) used.add(match[0])
+    }
+    // A typo'd step (`@pv-xxl:`) compiles to nothing and silently never applies.
+    expect([...used].filter((u) => !declared.has(u))).toEqual([])
+    expect(used.size).toBeGreaterThan(0)
+  })
+})

package/src/__tests__/styles/packaging.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import pkg from '../../../package.json' with { type: 'json' }
+
+/**
+ * `@prenta/admin` exports a precompiled stylesheet
+ * (`@prenta/admin/styles/precompiled.css`) that consumers import purely for its
+ * side effects. `sideEffects: false` tells a bundler such an import is safe to
+ * eliminate — the admin would then render unstyled, with no error anywhere.
+ *
+ * The field is currently ABSENT, which is the safe default: bundlers assume
+ * side effects. This test exists so it stays safe. `@prenta/sections-react` hit
+ * exactly this problem and had to be corrected before publish.
+ *
+ * If someone does add the field to enable tree-shaking, it must be an array
+ * that keeps CSS side-effectful, not `false`.
+ */
+describe('@prenta/admin packaging', () => {
+  it('never declares itself free of side effects', () => {
+    const sideEffects = (pkg as { sideEffects?: unknown }).sideEffects
+    expect(
+      sideEffects,
+      'sideEffects: false lets bundlers drop the precompiled CSS import',
+    ).not.toBe(false)
+  })
+
+  it('keeps CSS side-effectful if the field is ever narrowed to an array', () => {
+    const sideEffects = (pkg as { sideEffects?: unknown }).sideEffects
+    if (!Array.isArray(sideEffects)) return
+    expect(
+      sideEffects.some((p) => String(p).endsWith('.css')),
+      'an array form must still list CSS',
+    ).toBe(true)
+  })
+
+  it('still exports the stylesheet consumers import', () => {
+    expect(pkg.exports['./styles/precompiled.css']).toBe('./dist/prenta-admin.css')
+  })
+})

package/src/__tests__/styles/tokens-drift.test.ts

@@ -0,0 +1,110 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+// @ts-expect-error — plain .mjs build script, intentionally untyped
+import { OUTPUTS, buildAll, readTokens } from '../../../scripts/generate-tokens.mjs'
+
+/**
+ * The token files are generated from design-system/tokens.json. Before the
+ * generator existed, the runtime copy (src/styles/prenta-tokens.css) was a
+ * hand transcription of the handoff copy (design-system/tokens.css) and the
+ * two silently diverged — the radius scale was renamed in one and not the
+ * other, and the WCAG correction to `--muted` lived only downstream where a
+ * re-import of the handoff would have reverted it without anyone noticing.
+ *
+ * This suite fails if a generated file is edited by hand, if tokens.json
+ * changes without regenerating, or if the two CSS copies stop agreeing.
+ */
+
+const PKG = fileURLToPath(new URL('../../../', import.meta.url))
+
+const read = (rel: string) => readFileSync(PKG + rel, 'utf8')
+
+/** Declarations only — comments legitimately differ between the two copies. */
+function declarationMap(css: string): Map<string, string> {
+  const body = css.replace(/\/\*[\s\S]*?\*\//g, '')
+  const out = new Map<string, string>()
+  for (const match of body.matchAll(/(--[\w-]+)\s*:\s*([^;}]+)[;}]/g)) {
+    const name = match[1]!
+    const value = match[2]!
+    // Later declarations win in CSS; the dark block legitimately re-declares
+    // names from the light block, so keep the first (light) binding per file
+    // section by only recording a name once per call.
+    if (!out.has(name)) out.set(name, value.trim())
+  }
+  return out
+}
+
+describe('design token generation', () => {
+  it('every generated file matches a fresh run of the generator', async () => {
+    const built = await buildAll(await readTokens())
+
+    for (const rel of Object.values(OUTPUTS) as string[]) {
+      const committed = read(rel)
+      expect(built[rel], `${rel} is out of date. Run: pnpm --filter @prenta/admin generate`).toBe(
+        committed,
+      )
+    }
+  })
+
+  it('marks generated files so they are not hand-edited', () => {
+    for (const rel of Object.values(OUTPUTS) as string[]) {
+      expect(read(rel), `${rel} is missing its generated-file banner`).toContain(
+        'GENERATED FILE — DO NOT EDIT',
+      )
+    }
+  })
+
+  it('the handoff copy and the runtime copy carry identical values', () => {
+    const handoff = declarationMap(read(OUTPUTS.tokensCss))
+    const runtime = declarationMap(read(OUTPUTS.runtimeCss))
+
+    expect(runtime.size).toBeGreaterThan(60)
+    expect([...handoff.keys()].sort()).toEqual([...runtime.keys()].sort())
+    for (const [name, value] of handoff) {
+      expect(runtime.get(name), `${name} differs between the two token copies`).toBe(value)
+    }
+  })
+
+  it('scopes the runtime copy to .prenta-admin and never to :root', () => {
+    const runtime = read(OUTPUTS.runtimeCss).replace(/\/\*[\s\S]*?\*\//g, '')
+    expect(runtime).toContain('.prenta-admin {')
+    expect(runtime).not.toMatch(/(^|\s):root\s*[,{]/)
+  })
+
+  it('keeps deprecated aliases resolving to their canonical token', () => {
+    const runtime = declarationMap(read(OUTPUTS.runtimeCss))
+    // `--r-control` and `--motion-*` are the pre-2.0 names. 72 call sites still
+    // read `--motion-fast`; the aliases are what make the rename non-breaking.
+    expect(runtime.get('--r-control')).toBe('var(--r-ctl)')
+    expect(runtime.get('--motion-fast')).toBe('var(--mo-fast)')
+    expect(runtime.get('--motion-base')).toBe('var(--mo-base)')
+  })
+
+  it('keeps --muted above the WCAG AA threshold in both themes', () => {
+    // The handoff specifies #B0ADBE (2.2:1 on white). The admin renders --muted
+    // as real text, so the generator ships a corrected value recorded in
+    // tokens.json as a `designValue` deviation. If someone re-imports the
+    // handoff verbatim, this fails rather than shipping illegible hints.
+    const css = read(OUTPUTS.runtimeCss)
+    const [light, dark] = css.split('.prenta-admin[data-theme=')
+    const mutedOf = (block: string) => declarationMap(block).get('--muted')
+
+    expect(contrast(mutedOf(light!)!, '#ffffff')).toBeGreaterThanOrEqual(4.5)
+    expect(contrast(mutedOf(dark!)!, '#1c1a2e')).toBeGreaterThanOrEqual(4.5)
+  })
+})
+
+/** WCAG 2.1 relative-luminance contrast ratio between two hex colors. */
+function contrast(a: string, b: string): number {
+  const lum = (hex: string) => {
+    const n = hex.trim().replace('#', '')
+    const channels = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16) / 255)
+    const [r, g, bl] = channels.map((c) =>
+      c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4,
+    )
+    return 0.2126 * r! + 0.7152 * g! + 0.0722 * bl!
+  }
+  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x)
+  return (hi! + 0.05) / (lo! + 0.05)
+}

package/src/__tests__/views/admin-renderer-compat.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { DEFAULT_SECTION_RENDERERS } from '@prenta/sections-react'
+import type { AdminSectionRendererMap } from '../../views/page-editor/sections/admin-renderers.js'
+import { ADMIN_RENDER_OPTIONS } from '../../views/page-editor/sections/admin-renderers.js'
+
+/**
+ * `AdminSectionRendererMap` is a hand-maintained structural mirror of
+ * `SectionRendererMap` from @prenta/sections-react — cms-admin depends on
+ * cms-core only, so the type is duplicated rather than imported.
+ *
+ * The mirror exists so a consumer can hand `<AdminRoot sectionRenderers>` the
+ * same components it registers for the public site and have the editor canvas
+ * preview what actually ships. That only works while the two shapes stay
+ * assignable, and nothing else in the build checks it — the duplication is
+ * invisible to the compiler until someone tries the assignment.
+ *
+ * This file IS that assignment. If the shapes drift, the type-check fails here
+ * rather than in a consumer's project.
+ */
+
+describe('admin renderer contract', () => {
+  it('accepts a real @prenta/sections-react renderer map', () => {
+    // The assignment is the assertion — this line fails `tsc` if the mirror
+    // drifts. Renderers are function types, so their parameters compare
+    // contravariantly: widening a field on the ADMIN side is what breaks it.
+    const supplied: AdminSectionRendererMap = DEFAULT_SECTION_RENDERERS
+
+    expect(Object.keys(supplied)).toContain('hero')
+    expect(typeof supplied.hero).toBe('function')
+  })
+
+  it('supplies every option a public renderer resolves', () => {
+    // sections-react's `ResolvedRenderOptions` — a missing key throws at
+    // render time, not compile time, because renderers destructure it.
+    for (const key of ['sanitizeHtml', 'baseUrl', 'renderImage', 'lcp', 'prefetchedForms']) {
+      expect(ADMIN_RENDER_OPTIONS, `ADMIN_RENDER_OPTIONS is missing ${key}`).toHaveProperty(key)
+    }
+  })
+
+  it('never grants the LCP priority slot in the canvas', () => {
+    // On a public page exactly one image loads eagerly. The canvas has no
+    // such budget to protect and nothing competing for bandwidth, so every
+    // image should lazy-load — `claim()` always declines.
+    expect(ADMIN_RENDER_OPTIONS.lcp.claim()).toBe(false)
+    expect(ADMIN_RENDER_OPTIONS.lcp.claim()).toBe(false)
+    expect(ADMIN_RENDER_OPTIONS.lcp.claimed).toBe(true)
+  })
+})

package/src/__tests__/views/admin-section-renderers.test.tsx

@@ -84,9 +84,20 @@ describe('pluggable admin section renderers', () => {
     })
   })
 
-  it('does not affect built-in section types', () => {
+  it('overrides built-in section types too', () => {
+    // REVERSED from the original behaviour, which consulted the map only for
+    // types the built-in switch did not know.
+    //
+    // The point of `<AdminRoot sectionRenderers>` is to hand the admin the
+    // same components the public site registers, so the canvas previews what
+    // actually ships. Excluding the built-ins made that impossible for the
+    // twelve types that matter most: a consumer passing
+    // `DEFAULT_SECTION_RENDERERS` from `@prenta/sections-react` had their
+    // hero, text, feature, stats and cta silently dropped, and the canvas
+    // rendered the admin's own approximations — different font size, weight
+    // and breakpoints — while presenting itself as a preview.
     const renderers: AdminSectionRendererMap = {
-      hero: () => <div data-testid="hijacked-hero" />,
+      hero: () => <div data-testid="supplied-hero" />,
     }
     render(
       <AdminSectionRenderersProvider value={renderers}>
@@ -95,7 +106,62 @@ describe('pluggable admin section renderers', () => {
         />
       </AdminSectionRenderersProvider>,
     )
-    // Built-in types always use the built-in canvas component.
-    expect(screen.queryByTestId('hijacked-hero')).toBeNull()
+    expect(screen.getByTestId('supplied-hero')).toBeTruthy()
+  })
+
+  it('falls back to the built-in when a supplied renderer for a built-in type throws', () => {
+    // A broken consumer renderer must degrade to the admin's own component,
+    // not to the "custom section" placeholder — the type IS known here.
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    const renderers: AdminSectionRendererMap = {
+      hero: () => {
+        throw new Error('consumer hero exploded')
+      },
+    }
+    render(
+      <AdminSectionRenderersProvider value={renderers}>
+        <SectionRenderer
+          section={customSection({
+            sectionType: 'hero',
+            name: 'Hero',
+            content: { heading: 'Built-in hero copy' },
+          })}
+        />
+      </AdminSectionRenderersProvider>,
+    )
+    expect(screen.getByText('Built-in hero copy')).toBeTruthy()
+    vi.restoreAllMocks()
+  })
+
+  it('supplies the render options a public renderer expects', () => {
+    // sections-react renderers call `options.lcp.claim()` during render (hero,
+    // feature, gallery). A missing controller would throw on the first image,
+    // so the mirror must carry the whole shape, not just renderImage.
+    let seen: Record<string, unknown> | null = null
+    const renderers: AdminSectionRendererMap = {
+      hero: ({ options }) => {
+        seen = options as unknown as Record<string, unknown>
+        return <div />
+      },
+    }
+    render(
+      <AdminSectionRenderersProvider value={renderers}>
+        <SectionRenderer section={customSection({ sectionType: 'hero', content: {} })} />
+      </AdminSectionRenderersProvider>,
+    )
+    const options = seen as unknown as {
+      lcp: { claim: () => boolean }
+      prefetchedForms: Record<string, unknown>
+      renderImage: unknown
+      sanitizeHtml: unknown
+      baseUrl: string
+    }
+    expect(typeof options.lcp.claim).toBe('function')
+    // The canvas never grants the priority slot — nothing competes for
+    // bandwidth there, so every image should lazy-load.
+    expect(options.lcp.claim()).toBe(false)
+    expect(options.prefetchedForms).toEqual({})
+    expect(typeof options.renderImage).toBe('function')
+    expect(typeof options.sanitizeHtml).toBe('function')
   })
 })

package/src/__tests__/views/editor-top-bar.render.test.tsx

@@ -12,7 +12,7 @@ const baseProps = {
   publishing: false,
   canEdit: true,
   canPublish: true,
-  viewport: '1080p' as const,
+  viewport: 'wide' as const,
   onViewport: vi.fn(),
   onBack: vi.fn(),
   onPreview: vi.fn(),