@prenta/admin 0.92.0 → 0.93.0

package/src/__tests__/views/page-tab.render.test.tsx

@@ -0,0 +1,226 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { DEFAULT_DIRECTIVES, type RobotsPermissions } from '@prenta/core/seo/robots-directives'
+import { PageTab } from '../../views/page-editor/PageTab.js'
+import type { EditorPage } from '../../lib/page-editor-service.js'
+
+const page: EditorPage = {
+  id: 'p1',
+  title: 'About Us',
+  slug: 'about',
+  path: '/about',
+  status: 'PUBLISHED',
+  parentPageId: null,
+  sections: [],
+  seoTitle: '',
+  seoDescription: '',
+  publishedAt: '2026-05-15T10:00:00.000Z',
+  updatedAt: '2026-06-01T09:30:00.000Z',
+  scheduledAt: null,
+  scheduledUnpublishAt: null,
+  authorName: '',
+  authorId: '',
+  builderOwned: false,
+}
+
+function renderTab(
+  overrides: {
+    page?: Partial<EditorPage>
+    directives?: Partial<RobotsPermissions>
+    publishedPath?: string | null
+    onDirectivesChange?: (d: RobotsPermissions) => void
+    onPageChange?: (p: Partial<EditorPage>) => void
+  } = {},
+) {
+  return render(
+    <PageTab
+      page={{ ...page, ...overrides.page }}
+      canEdit
+      publishedPath={overrides.publishedPath === undefined ? '/about' : overrides.publishedPath}
+      siteUrl="https://example.com"
+      directives={{ ...DEFAULT_DIRECTIVES, ...overrides.directives }}
+      onDirectivesChange={overrides.onDirectivesChange ?? (() => {})}
+      redirectOnPublish
+      onRedirectOnPublishChange={() => {}}
+      onPageChange={overrides.onPageChange ?? (() => {})}
+      onDuplicate={() => {}}
+      onTrash={() => {}}
+    />,
+  )
+}
+
+/**
+ * Only Address and Publishing are open by default; the rest are collapsed, and
+ * Radix unmounts closed content. Tests that assert on a collapsed group must
+ * open it first — which is also the interaction a real editor performs.
+ */
+function openGroup(name: RegExp) {
+  fireEvent.click(screen.getByRole('button', { name }))
+}
+
+describe('PageTab — address', () => {
+  it('says nothing about redirects while the page has not moved', () => {
+    renderTab()
+    expect(screen.queryByText(/URL CHANGED/)).toBeNull()
+    expect(screen.queryByText(/301 redirect/)).toBeNull()
+    cleanup()
+  })
+
+  it('offers a 301 naming both paths once a live page moves', () => {
+    renderTab({ page: { path: '/about-us' } })
+    expect(screen.getByText('URL CHANGED')).toBeTruthy()
+    expect(screen.getByText(/Create a 301 redirect on publish/)).toBeTruthy()
+    expect(screen.getByText('/about → /about-us')).toBeTruthy()
+    cleanup()
+  })
+
+  it('keeps path in lockstep when the slug was driving it', () => {
+    // The displayed URL and the 301 detector both read `path`. Updating only
+    // `slug` left a live `/about` → slug `about-us` with no warning and a
+    // full URL that still said /about.
+    const onPageChange = vi.fn()
+    renderTab({ onPageChange })
+    fireEvent.change(screen.getByLabelText(/URL slug/i), { target: { value: 'about-us' } })
+    expect(onPageChange).toHaveBeenCalledWith({ slug: 'about-us', path: '/about-us' })
+    cleanup()
+  })
+
+  it('leaves a custom path alone when the slug changes', () => {
+    const onPageChange = vi.fn()
+    renderTab({ page: { slug: 'about', path: '/team/about' }, onPageChange })
+    fireEvent.change(screen.getByLabelText(/URL slug/i), { target: { value: 'about-us' } })
+    expect(onPageChange).toHaveBeenCalledWith({ slug: 'about-us' })
+    cleanup()
+  })
+
+  it('warns without promising a 301 when the user cannot create redirects', () => {
+    render(
+      <PageTab
+        page={{ ...page, path: '/about-us' }}
+        canEdit
+        publishedPath="/about"
+        siteUrl="https://example.com"
+        directives={DEFAULT_DIRECTIVES}
+        onDirectivesChange={() => {}}
+        redirectOnPublish
+        onRedirectOnPublishChange={() => {}}
+        canCreateRedirect={false}
+        onPageChange={() => {}}
+        onDuplicate={() => {}}
+        onTrash={() => {}}
+      />,
+    )
+    expect(screen.getByText('URL CHANGED')).toBeTruthy()
+    expect(screen.queryByText(/Create a 301 redirect on publish/)).toBeNull()
+    expect(screen.getByText(/Ask an admin to create a 301/)).toBeTruthy()
+    cleanup()
+  })
+
+  it('stays quiet when a page that was never live changes its slug', () => {
+    // Nothing points at the old path. Warning here would train editors to
+    // dismiss the warning that matters.
+    renderTab({ page: { path: '/about-us', status: 'DRAFT' }, publishedPath: null })
+    expect(screen.queryByText(/URL CHANGED/)).toBeNull()
+    cleanup()
+  })
+})
+
+describe('PageTab — search directives', () => {
+  it('summarises how many directives are restricted', () => {
+    renderTab()
+    expect(screen.getByText('OPEN')).toBeTruthy()
+    cleanup()
+
+    renderTab({ directives: { index: false, snippet: false } })
+    // `noindex` subsumes the snippet token, but both are still restrictions the
+    // editor chose, so the count reports two.
+    expect(screen.getByText('2 RESTRICTED')).toBeTruthy()
+    cleanup()
+  })
+
+  it('previews the exact head line, composed by the renderer’s own function', () => {
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(screen.getByText('<meta name="robots" content="noindex" />')).toBeTruthy()
+    cleanup()
+
+    renderTab()
+    openGroup(/Search directives/)
+    // Nothing is emitted when everything is permissive, and the preview says
+    // so rather than showing a blank box.
+    expect(screen.getByText(/no robots meta/)).toBeTruthy()
+    cleanup()
+  })
+
+  it('shows each switch’s literal directive token', () => {
+    // The failure this prevents is flipping a switch whose consequence you
+    // could not name. `noindex` beside it makes the consequence the label.
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(screen.getByText('noindex')).toBeTruthy()
+    expect(screen.getByText('follow')).toBeTruthy()
+    cleanup()
+  })
+
+  it('disables snippet and archive under noindex', () => {
+    // They have no effect once the page is out of the index, and an enabled
+    // control that changes nothing is a lie about what it does.
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(
+      screen.getByRole('switch', { name: /Allow text snippets/ }).hasAttribute('disabled'),
+    ).toBe(true)
+    expect(
+      screen.getByRole('switch', { name: /Allow cached copies/ }).hasAttribute('disabled'),
+    ).toBe(true)
+    cleanup()
+  })
+
+  it('warns that publishing will not make a noindexed page findable', () => {
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(screen.getByText(/hidden from search/)).toBeTruthy()
+    cleanup()
+  })
+
+  it('reports a toggle as a permission, not a restriction', () => {
+    const onDirectivesChange = vi.fn()
+    renderTab({ onDirectivesChange })
+    openGroup(/Search directives/)
+    fireEvent.click(screen.getByRole('switch', { name: /Show in search results/ }))
+    expect(onDirectivesChange).toHaveBeenCalledWith(
+      expect.objectContaining({ index: false, follow: true }),
+    )
+    cleanup()
+  })
+})
+
+describe('PageTab — danger zone', () => {
+  it('asks before trashing, and says when the page is live', () => {
+    const onTrash = vi.fn()
+    render(
+      <PageTab
+        page={page}
+        canEdit
+        publishedPath="/about"
+        siteUrl="https://example.com"
+        directives={DEFAULT_DIRECTIVES}
+        onDirectivesChange={() => {}}
+        redirectOnPublish
+        onRedirectOnPublishChange={() => {}}
+        onPageChange={() => {}}
+        onDuplicate={() => {}}
+        onTrash={onTrash}
+      />,
+    )
+    openGroup(/Danger zone/)
+    fireEvent.click(screen.getByRole('button', { name: /Move to trash/ }))
+    expect(onTrash).not.toHaveBeenCalled()
+    expect(screen.getByText(/It is live, and will stop being served/)).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Move to trash' }))
+    expect(onTrash).toHaveBeenCalled()
+    cleanup()
+  })
+})

package/src/__tests__/views/section-class-parity.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest'
+import {
+  paddingClass as sitePadding,
+  backgroundClass as siteBackground,
+  isDark as siteIsDark,
+} from '@prenta/sections-react'
+import {
+  paddingClass as adminPadding,
+  backgroundClass as adminBackground,
+  isDarkBackground as adminIsDark,
+} from '../../views/page-editor/sections/parts.js'
+import { BACKGROUND_PRESETS, backgroundPreset } from '@prenta/core/page-sections'
+import type { SectionSettings } from '@prenta/core/page-sections'
+
+/**
+ * The editor canvas wraps each section itself rather than using `<Sections>`,
+ * so the admin applies ITS wrapper classes around a body rendered by
+ * sections-react. Two implementations, one rendered result.
+ *
+ * They are duplicated because they have to be: Tailwind generates utilities by
+ * scanning source text, and each package's stylesheet scans only its own `src/`
+ * tree. A literal shared from a third package is generated by nobody, and the
+ * section renders with no background — silently, with correct markup. So
+ * `@prenta/core` owns the DECISION (`backgroundPreset`) and each side maps it
+ * to its own strings; this file asserts the strings stayed in step.
+ */
+const settings = (over: Partial<SectionSettings> = {}) => over as SectionSettings
+
+/** One settings object per preset, so coverage follows the preset list. */
+const SETTINGS_FOR: Record<string, SectionSettings> = {
+  'gradient-purple': settings({ backgroundType: 'gradient', backgroundColor: 'purple' }),
+  'solid-purple': settings({ backgroundType: 'solid', backgroundColor: 'purple' }),
+  'solid-muted': settings({ backgroundType: 'solid', backgroundColor: 'muted' }),
+  plain: settings({ backgroundType: 'none' }),
+}
+
+describe('section wrapper classes', () => {
+  it('pads identically in the canvas and on the site', () => {
+    for (const paddingY of ['sm', 'md', 'lg', 'xl', undefined]) {
+      const s = settings({ paddingY } as Partial<SectionSettings>)
+      expect(adminPadding(s), `paddingY: ${paddingY}`).toBe(sitePadding(s as never))
+    }
+  })
+
+  it('pads with container steps, never viewport breakpoints', () => {
+    // A viewport step here would reflow the canvas against the editor window
+    // and undo the whole point of the container migration.
+    const xl = adminPadding(settings({ paddingY: 'xl' } as Partial<SectionSettings>))
+    expect(xl).toContain('@pv-')
+    expect(xl).not.toMatch(/(^|\s)(sm|md|lg|xl):/)
+  })
+
+  it('covers every declared preset', () => {
+    // Guards the fixture table itself: add a preset in core and this fails
+    // until it has settings here, so the assertions below cannot quietly stop
+    // covering it.
+    for (const preset of BACKGROUND_PRESETS) {
+      const s = SETTINGS_FOR[preset]
+      expect(s, `no settings fixture for preset "${preset}"`).toBeDefined()
+      expect(backgroundPreset(s!), `settings for ${preset}`).toBe(preset)
+    }
+  })
+
+  it('paints every preset identically in the canvas and on the site', () => {
+    // The canvas is a preview of the public page. It previously used admin
+    // theme tokens, so in dark mode it showed a hero in `#9D71F0` on dark body
+    // sections while the live page rendered violet-600 on white — a page no
+    // visitor would ever see.
+    for (const preset of BACKGROUND_PRESETS) {
+      const s = SETTINGS_FOR[preset]!
+      expect(adminBackground(s), `background for ${preset}`).toBe(siteBackground(s as never))
+    }
+  })
+
+  it('never paints the canvas with admin theme tokens', () => {
+    // The specific regression: theme tokens follow the editor's light/dark
+    // preference, and the live site does not.
+    for (const preset of BACKGROUND_PRESETS) {
+      const cls = adminBackground(SETTINGS_FOR[preset]!)
+      expect(cls, preset).not.toMatch(/\b(bg-card|bg-brand|bg-muted|text-foreground)\b/)
+    }
+  })
+
+  it('agrees on which backgrounds are dark', () => {
+    for (const preset of BACKGROUND_PRESETS) {
+      const s = SETTINGS_FOR[preset]!
+      expect(adminIsDark(s), preset).toBe(siteIsDark(s as never))
+    }
+  })
+
+  it('falls back to the plain preset for an unrecognised colour', () => {
+    // A consumer can put any string in `backgroundColor`. It must land on the
+    // default background rather than losing the background rules entirely.
+    const odd = settings({ backgroundType: 'solid', backgroundColor: 'chartreuse' })
+    expect(backgroundPreset(odd)).toBe('plain')
+    expect(adminBackground(odd)).toBe(siteBackground(odd as never))
+  })
+})

package/src/__tests__/views/sections-panel-design-owned.render.test.tsx

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { SectionsPanel } from '../../views/page-editor/SectionsPanel.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+/**
+ * Pages and posts are design-owned: the section list comes from the template in
+ * code. `SectionsPanel` therefore defaults to read-only, and only the template
+ * editor — the surface that authors a template — passes `structural`.
+ *
+ * The default direction is the point. A future consumer that forgets the flag
+ * must get the safe behaviour, not an editor that can silently restructure a
+ * design-owned page.
+ */
+
+function section(over: Partial<PageSection> = {}): PageSection {
+  return {
+    id: 's1',
+    sectionType: 'hero',
+    name: 'Hero Banner',
+    visible: true,
+    content: {},
+    settings: {},
+    ...over,
+  } as PageSection
+}
+
+function renderPanel(over: Partial<Parameters<typeof SectionsPanel>[0]> = {}) {
+  return render(
+    <SectionsPanel
+      sections={[section(), section({ id: 's2', name: 'Mission' })]}
+      selectedId={null}
+      canEdit
+      onSelect={vi.fn()}
+      onToggleVisibility={vi.fn()}
+      {...over}
+    />,
+  )
+}
+
+describe('SectionsPanel — design-owned by default', () => {
+  it('offers no add, reorder, duplicate, or delete', () => {
+    renderPanel()
+    expect(screen.queryByRole('button', { name: /add section/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /drag to reorder/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /more actions/i })).toBeNull()
+  })
+
+  it('keeps the visibility toggle — the one structural property an editor owns', () => {
+    renderPanel()
+    expect(screen.getByRole('button', { name: 'Hide Hero Banner' })).toBeTruthy()
+  })
+
+  it('keeps sections selectable for editing', () => {
+    const onSelect = vi.fn()
+    renderPanel({ onSelect })
+    screen.getByText('Hero Banner').click()
+    expect(onSelect).toHaveBeenCalledWith('s1')
+  })
+
+  it('explains the absence rather than looking broken', () => {
+    // Without this the panel reads as a regression — "where did Add Section go"
+    // is the first thing a returning editor asks.
+    renderPanel()
+    expect(screen.getByText(/Layout is design-owned/i)).toBeTruthy()
+    expect(screen.getByText(/Hide a section to drop it from the live page/i)).toBeTruthy()
+  })
+
+  it('says the template renders nothing rather than inviting a first section', () => {
+    renderPanel({ sections: [] })
+    expect(screen.getByText(/template renders no sections/i)).toBeTruthy()
+    expect(screen.queryByText(/add one below/i)).toBeNull()
+  })
+})
+
+describe('SectionsPanel — structural opt-in', () => {
+  it('restores every structural affordance when asked', () => {
+    renderPanel({
+      structural: true,
+      onReorder: vi.fn(),
+      onDuplicate: vi.fn(),
+      onRequestDelete: vi.fn(),
+      onAdd: vi.fn(),
+    })
+    expect(screen.getByRole('button', { name: /add section/i })).toBeTruthy()
+    expect(screen.getAllByRole('button', { name: /drag to reorder/i })).toHaveLength(2)
+    expect(screen.getAllByRole('button', { name: /more actions/i })).toHaveLength(2)
+    expect(screen.queryByText(/Layout is design-owned/i)).toBeNull()
+  })
+
+  it('still locks externally-managed sections', () => {
+    // `unmanaged` sections are read-only even where structural editing is
+    // allowed — they are owned by a system outside the CMS.
+    renderPanel({
+      structural: true,
+      sections: [section({ unmanaged: true } as Partial<PageSection>)],
+      onReorder: vi.fn(),
+      onAdd: vi.fn(),
+    })
+    expect(screen.queryByRole('button', { name: /more actions/i })).toBeNull()
+    expect(screen.getByLabelText(/managed outside the editor/i)).toBeTruthy()
+  })
+})

package/src/components/BreakpointPicker.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useState } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronDown } from 'lucide-react'
+import { adminPortalContainer } from '../lib/portal-container.js'
+import {
+  BREAKPOINT_GROUPS,
+  breakpointsInGroup,
+  getBreakpoint,
+  type BreakpointId,
+} from '../lib/breakpoints.js'
+import { breakpointIcon } from './breakpoint-icons.js'
+
+export interface BreakpointPickerProps {
+  value: BreakpointId
+  onChange: (id: BreakpointId) => void
+  disabled?: boolean
+}
+
+/**
+ * Preview-breakpoint selector for the editor header.
+ *
+ * A dropdown rather than a segmented row: six presets with names like "Tablet
+ * Landscape" do not fit a header strip, and the grouped menu is what makes the
+ * DESKTOP / TABLET / MOBILE structure legible.
+ *
+ * Radix owns the menu behaviour — outside-click, Escape, roving focus, and
+ * `aria-expanded` on the trigger — rather than a hand-rolled popover.
+ */
+export function BreakpointPicker({ value, onChange, disabled }: BreakpointPickerProps) {
+  const [open, setOpen] = useState(false)
+  const active = getBreakpoint(value)
+  const ActiveIcon = breakpointIcon(active.icon)
+
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={`Preview breakpoint: ${active.name}, ${active.width} pixels`}
+          className={`border-border flex h-[34px] items-center gap-1.5 rounded-lg border px-2.5 text-[12.5px] font-medium transition-colors disabled:opacity-50 ${
+            open
+              ? 'border-brand bg-accent text-accent-foreground'
+              : 'bg-card text-foreground hover:bg-accent'
+          }`}
+        >
+          <ActiveIcon className={`h-4 w-4 shrink-0 ${open ? '' : 'text-brand'}`} aria-hidden />
+          {/* The name is the useful label; below `lg` the header is too tight
+              for it, so fall back to the two-letter form rather than truncating. */}
+          <span className="hidden lg:inline">{active.name}</span>
+          <span className="lg:hidden">{active.abbr}</span>
+          <span className="text-muted-foreground hidden text-[11.5px] tabular-nums xl:inline">
+            {active.width}
+          </span>
+          <ChevronDown
+            className={`h-3.5 w-3.5 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`}
+            aria-hidden
+          />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal container={adminPortalContainer()}>
+        <DropdownMenu.Content
+          align="end"
+          sideOffset={6}
+          className="border-border bg-popover data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1 z-[120] w-[272px] rounded-[10px] border p-[5px] shadow-[0_12px_34px_rgba(26,24,39,0.17)] duration-[130ms]"
+        >
+          {BREAKPOINT_GROUPS.map((group) => (
+            <DropdownMenu.Group key={group}>
+              <DropdownMenu.Label className="text-muted-foreground px-2.5 pt-2 pb-1 text-[10px] font-bold tracking-[0.6px]">
+                {group}
+              </DropdownMenu.Label>
+              {breakpointsInGroup(group).map((bp) => {
+                const Icon = breakpointIcon(bp.icon)
+                const selected = bp.id === value
+                return (
+                  <DropdownMenu.Item
+                    key={bp.id}
+                    onSelect={() => onChange(bp.id)}
+                    className={`focus:bg-accent flex cursor-pointer items-center gap-2 rounded-[7px] px-2.5 py-[7px] outline-none ${
+                      selected ? 'bg-accent' : ''
+                    }`}
+                  >
+                    <Icon
+                      className={`h-4 w-4 shrink-0 ${selected ? 'text-brand' : 'text-muted-foreground'}`}
+                      aria-hidden
+                    />
+                    <span
+                      className={`flex-1 text-[13px] ${selected ? 'text-brand font-semibold' : 'text-foreground'}`}
+                    >
+                      {bp.name}
+                    </span>
+                    <span className="text-muted-foreground text-[11.5px] tabular-nums">
+                      {bp.width}
+                    </span>
+                    {/* Not aria-hidden: the check is the only thing marking the
+                        current selection, and Radix menu items expose no
+                        selected state of their own. */}
+                    <Check
+                      className={`text-brand h-3.5 w-3.5 shrink-0 ${selected ? '' : 'invisible'}`}
+                      aria-label={selected ? 'Selected' : undefined}
+                    />
+                  </DropdownMenu.Item>
+                )
+              })}
+            </DropdownMenu.Group>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}

package/src/components/CanvasEditTip.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { MousePointerClick, X } from 'lucide-react'
+import { dismissCanvasEditTip, isCanvasEditTipDismissed } from '../lib/canvas-edit-chrome.js'
+
+/**
+ * One-time tip above the page/post canvas explaining how to edit.
+ * Dismiss persists in localStorage (`prenta.canvasEditTip.dismissed`).
+ */
+export function CanvasEditTip() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    setVisible(!isCanvasEditTipDismissed())
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <div
+      role="note"
+      className="border-border bg-card text-muted-foreground mx-auto mb-4 flex w-fit max-w-full items-start gap-2 rounded-lg border px-3 py-2 text-xs"
+    >
+      <MousePointerClick className="text-foreground mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+      <p className="min-w-0 flex-1 leading-[1.5]">
+        <span className="text-foreground font-medium">Editing tip</span>
+        {' — '}
+        Hover sections for a light outline, then click to select. Edit copy and images in the
+        inspector. Use <span className="text-foreground font-medium">Site preview</span> to click
+        text and images in place.
+      </p>
+      <button
+        type="button"
+        aria-label="Dismiss editing tip"
+        onClick={() => {
+          dismissCanvasEditTip()
+          setVisible(false)
+        }}
+        className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring -mt-0.5 -mr-0.5 shrink-0 rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+      >
+        <X className="h-3.5 w-3.5" aria-hidden />
+      </button>
+    </div>
+  )
+}