@prenta/admin 1.0.0 → 1.2.0

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

@@ -15,7 +15,6 @@ const baseProps = {
   viewport: 'wide' as const,
   onViewport: vi.fn(),
   onBack: vi.fn(),
-  onPreview: vi.fn(),
   onOpenSettings: vi.fn(),
   onSaveDraft: vi.fn(),
   onPublish: vi.fn(),
@@ -88,25 +87,112 @@ describe('EditorTopBar publish gating', () => {
   })
 })
 
-describe('EditorTopBar view-on-site vs view-live', () => {
-  it('labels the external-link button "View draft on site" for a draft', () => {
-    render(<EditorTopBar {...baseProps} status="DRAFT" onViewOnSite={vi.fn()} />)
-    expect(screen.getByRole('button', { name: 'View draft on site' })).toBeTruthy()
-    expect(screen.queryByRole('button', { name: 'View live page' })).toBeNull()
+describe('EditorTopBar view site / share', () => {
+  it('does not render the eye or the globe', () => {
+    render(
+      <EditorTopBar {...baseProps} onViewOnSite={vi.fn()} onShare={vi.fn()} hasPublicSiteUrl />,
+    )
+    expect(screen.queryByRole('button', { name: /Preview page|Preview structure/ })).toBeNull()
   })
 
-  it('labels it "View live page" for a published document and calls the handler', () => {
+  it('labels View site on a draft and calls with preview-draft', () => {
     const onViewOnSite = vi.fn()
-    render(<EditorTopBar {...baseProps} status="PUBLISHED" onViewOnSite={onViewOnSite} />)
-    const btn = screen.getByRole('button', { name: 'View live page' })
-    fireEvent.click(btn)
-    expect(onViewOnSite).toHaveBeenCalledOnce()
-    expect(screen.queryByRole('button', { name: 'View draft on site' })).toBeNull()
+    render(
+      <EditorTopBar
+        {...baseProps}
+        status="DRAFT"
+        onViewOnSite={onViewOnSite}
+        onShare={vi.fn()}
+        hasPublicSiteUrl
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'View site' }))
+    expect(onViewOnSite).toHaveBeenCalledWith('preview-draft')
+    expect(screen.getByRole('button', { name: 'Share' })).toBeTruthy()
+  })
+
+  it('labels View live on a clean published document and hides Share', () => {
+    const onViewOnSite = vi.fn()
+    render(
+      <EditorTopBar
+        {...baseProps}
+        status="PUBLISHED"
+        onViewOnSite={onViewOnSite}
+        onShare={vi.fn()}
+        hasPublicSiteUrl
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'View live' }))
+    expect(onViewOnSite).toHaveBeenCalledWith('view-live')
+    expect(screen.queryByRole('button', { name: 'Share' })).toBeNull()
+  })
+
+  it('keeps View live as a second action when published and dirty', () => {
+    const onViewOnSite = vi.fn()
+    render(
+      <EditorTopBar
+        {...baseProps}
+        status="PUBLISHED"
+        dirty
+        onViewOnSite={onViewOnSite}
+        onShare={vi.fn()}
+        hasPublicSiteUrl
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'View site' }))
+    expect(onViewOnSite).toHaveBeenCalledWith('preview-draft')
+    // Radix DropdownMenu opens on pointerdown (not click), which happy-dom
+    // doesn't synthesize from fireEvent.click — open via keyboard instead.
+    fireEvent.keyDown(screen.getByRole('button', { name: 'More view options' }), {
+      key: 'Enter',
+    })
+    fireEvent.click(screen.getByRole('menuitem', { name: 'View live' }))
+    expect(onViewOnSite).toHaveBeenCalledWith('view-live')
+    expect(screen.getByRole('button', { name: 'Share' })).toBeTruthy()
+  })
+
+  it('disables View site and Share when the site URL is the admin origin', () => {
+    render(
+      <EditorTopBar
+        {...baseProps}
+        onViewOnSite={vi.fn()}
+        onShare={vi.fn()}
+        hasPublicSiteUrl
+        matchesAdminOrigin
+      />,
+    )
+    const view = screen.getByRole('button', { name: 'View site' }) as HTMLButtonElement
+    const share = screen.getByRole('button', { name: 'Share' }) as HTMLButtonElement
+    expect(view.disabled).toBe(true)
+    expect(share.disabled).toBe(true)
+    expect(view.getAttribute('title')).toBe(
+      'This origin is the admin, not the public site. Set the public site URL in Settings → SEO.',
+    )
+  })
+
+  it('disables View site and Share when the public site URL is missing', () => {
+    render(
+      <EditorTopBar
+        {...baseProps}
+        onViewOnSite={vi.fn()}
+        onShare={vi.fn()}
+        hasPublicSiteUrl={false}
+      />,
+    )
+    const view = screen.getByRole('button', { name: 'View site' }) as HTMLButtonElement
+    const share = screen.getByRole('button', { name: 'Share' }) as HTMLButtonElement
+    expect(view.disabled).toBe(true)
+    expect(share.disabled).toBe(true)
+    expect(view.getAttribute('title')).toBe(
+      'Set the public site URL in Settings → SEO to open the live design.',
+    )
   })
 
-  it('hides the button when onViewOnSite is omitted (unsaved doc)', () => {
+  it('hides View site and Share when onViewOnSite is omitted (unsaved doc)', () => {
     render(<EditorTopBar {...baseProps} status="PUBLISHED" />)
-    expect(screen.queryByRole('button', { name: /View (live|draft)/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'View site' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'View live' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Share' })).toBeNull()
   })
 })
 
@@ -133,19 +219,15 @@ describe('EditorTopBar history button', () => {
     render(
       <EditorTopBar
         {...baseProps}
+        status="PUBLISHED"
+        dirty
+        hasPublicSiteUrl
         onHistory={vi.fn()}
         onViewOnSite={vi.fn()}
-        onToggleSitePreview={vi.fn()}
       />,
     )
 
-    for (const name of [
-      'Page settings',
-      'Version history',
-      'Preview page',
-      'Inline site preview',
-      'View draft on site',
-    ]) {
+    for (const name of ['Page settings', 'Version history', 'More view options']) {
       const button = screen.getByRole('button', { name })
       expect(button.className, `${name} has no touch target`).toContain('prenta-touch-target')
     }

package/src/__tests__/views/page-section-editor.test.tsx

@@ -3,11 +3,20 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 const fetchPageForEditor = vi.fn()
+const savePageDraft = vi.fn(async (page: unknown) => page)
 vi.mock('../../lib/page-editor-service.js', async (importOriginal) => {
   const actual = await importOriginal<typeof import('../../lib/page-editor-service.js')>()
   return {
     ...actual,
-    fetchPageForEditor: (...args: unknown[]) => fetchPageForEditor(...args),
+    fetchPageForEditor,
+    savePageDraft,
+  }
+})
+vi.mock('../../lib/seo-service.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../lib/seo-service.js')>()
+  return {
+    ...actual,
+    updateSeoFields: vi.fn(async () => ({})),
   }
 })
 
@@ -32,6 +41,7 @@ const validConfig = {
 
 afterEach(() => {
   fetchPageForEditor.mockReset()
+  savePageDraft.mockClear()
 })
 
 describe('PageSectionEditor schema guard', () => {
@@ -112,9 +122,8 @@ describe('PageSectionEditor structure mode', () => {
 
     await screen.findByText('Sections')
     expect(screen.queryByText(/Structure view/)).toBeNull()
-    // "View on site" stays an icon-only button.
-    expect(screen.getByRole('button', { name: 'View draft on site' })).toBeTruthy()
-    expect(screen.getByRole('button', { name: 'Preview page' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'View site' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Share' })).toBeTruthy()
   })
 
   it('shows the structure notice and promotes "View on site" for custom section types', async () => {
@@ -130,10 +139,7 @@ describe('PageSectionEditor structure mode', () => {
 
     await screen.findByText('Sections')
     expect(screen.getByText(/Structure view/)).toBeTruthy()
-    // Promoted to a labeled button — the primary design preview.
-    expect(screen.getByRole('button', { name: /View on site/ })).toBeTruthy()
-    // Eye preview is relabeled to set expectations.
-    expect(screen.getByRole('button', { name: /Preview structure/ })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'View site' })).toBeTruthy()
   })
 
   it('stays out of structure mode when a custom renderer is registered for the type', async () => {
@@ -161,7 +167,7 @@ describe('PageSectionEditor structure mode', () => {
     // structural for this page.
     expect(screen.getByTestId('opal-canvas')).toBeTruthy()
     expect(screen.queryByText(/Structure view/)).toBeNull()
-    expect(screen.getByRole('button', { name: 'View draft on site' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'View site' })).toBeTruthy()
   })
 
   it('exposes a version history button for saved pages', async () => {
@@ -207,12 +213,22 @@ describe('PageSectionEditor section disclosure', () => {
     expect(screen.queryByLabelText('Section name')).toBeNull()
   })
 
-  it('keeps the row open when the site preview points at one of its fields', async () => {
+  it('keeps the row open when a canvas field click targets the same section', async () => {
     // A `fieldPath` means "the editor clicked THIS field" — toggling there
-    // would close the form on the second click of a field being edited.
-    fetchPageForEditor.mockResolvedValue(
-      loadedPage([{ id: 's1', sectionType: 'hero', name: 'Hero' }]),
-    )
+    // would close the form on the second click of a field being inspected.
+    fetchPageForEditor.mockResolvedValue({
+      ...loadedPage([{ id: 's1', sectionType: 'hero', name: 'Hero' }]),
+      sections: [
+        {
+          id: 's1',
+          sectionType: 'hero',
+          name: 'Hero',
+          visible: true,
+          content: { heading: 'Welcome' },
+          settings: {},
+        },
+      ],
+    })
     render(
       <PageSectionEditor documentId="p1" config={validConfig} onNavigate={() => {}} session={{}} />,
     )
@@ -221,15 +237,42 @@ describe('PageSectionEditor section disclosure', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Edit Hero' }))
     await screen.findByRole('button', { name: 'Close Hero' })
 
-    // Same section, arriving with a field path, twice.
-    for (let i = 0; i < 2; i++) {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: { v: 1, type: 'prenta-preview:select', sectionId: 's1', fieldPath: 'heading' },
-        }),
-      )
-    }
+    const section = document.querySelector('[data-section-id="s1"]')
+    expect(section).toBeTruthy()
+    const field = document.createElement('h2')
+    field.setAttribute('data-cms-field', 'heading')
+    field.textContent = 'Welcome'
+    section?.appendChild(field)
+    fireEvent.click(field)
+    fireEvent.click(field)
 
     expect(screen.getByRole('button', { name: 'Close Hero' })).toBeTruthy()
   })
 })
+
+describe('PageSectionEditor Share', () => {
+  const configWithSite = { ...validConfig, seo: { siteUrl: 'https://example.com' } }
+
+  it('saves a dirty draft before opening Share', async () => {
+    const page = loadedPage([{ id: 's1', sectionType: 'hero', name: 'Hero' }])
+    fetchPageForEditor.mockResolvedValue(page)
+    savePageDraft.mockResolvedValue(page)
+
+    render(
+      <PageSectionEditor
+        documentId="p1"
+        config={configWithSite}
+        onNavigate={() => {}}
+        session={{}}
+      />,
+    )
+    await screen.findByText('Sections')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit Hero' }))
+    fireEvent.change(await screen.findByLabelText('Section name'), { target: { value: 'Intro' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Share' }))
+
+    await waitFor(() => expect(savePageDraft).toHaveBeenCalledOnce())
+    expect(await screen.findByRole('dialog', { name: 'Share preview link' })).toBeTruthy()
+  })
+})

package/src/__tests__/views/post-section-editor.test.tsx

@@ -4,12 +4,14 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 const fetchPostForEditor = vi.fn()
 const fetchTemplateForEditor = vi.fn()
+const savePostDraft = vi.fn()
 vi.mock('../../lib/post-editor-service.js', async (importOriginal) => {
   const actual = await importOriginal<typeof import('../../lib/post-editor-service.js')>()
   return {
     ...actual,
     fetchPostForEditor: (...args: unknown[]) => fetchPostForEditor(...args),
     fetchTemplateForEditor: (...args: unknown[]) => fetchTemplateForEditor(...args),
+    savePostDraft: (...args: unknown[]) => savePostDraft(...args),
   }
 })
 
@@ -62,6 +64,7 @@ function loadedPost(
 afterEach(() => {
   fetchPostForEditor.mockReset()
   fetchTemplateForEditor.mockReset()
+  savePostDraft.mockReset()
 })
 
 describe('PostSectionEditor schema guard', () => {
@@ -126,6 +129,9 @@ describe('PostSectionEditor new post', () => {
     )
     await screen.findByText('Sections')
     expect(screen.queryByRole('dialog', { name: 'Post details' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'View site' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Share' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: /Preview page/ })).toBeNull()
   })
 })
 
@@ -201,6 +207,35 @@ describe('PostSectionEditor section disclosure', () => {
   })
 })
 
+describe('PostSectionEditor Share', () => {
+  it('saves a dirty draft before opening Share', async () => {
+    const post = loadedPost([{ id: 's1', sectionType: 'quote', name: 'Quote' }])
+    fetchTemplateForEditor.mockRejectedValue(new Error('no template'))
+    fetchPostForEditor.mockResolvedValue(post)
+    savePostDraft.mockResolvedValue(post)
+
+    render(
+      <PostSectionEditor
+        postType="blog"
+        documentId="p1"
+        config={{ ...validConfig, seo: { siteUrl: 'https://example.com' } }}
+        onNavigate={() => {}}
+        session={{}}
+      />,
+    )
+    await screen.findByText('Sections')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit Quote' }))
+    fireEvent.change(await screen.findByLabelText('Section name'), {
+      target: { value: 'Pull quote' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Share' }))
+
+    await waitFor(() => expect(savePostDraft).toHaveBeenCalledOnce())
+    expect(await screen.findByRole('dialog', { name: 'Share preview link' })).toBeTruthy()
+  })
+})
+
 /**
  * The post editor was the last screen still on the pre-handoff panel: a fixed
  * 288px aside with no resize, no collapse and no tabs, with SEO in a

package/src/components/BreakpointPicker.tsx

@@ -19,11 +19,12 @@ export interface BreakpointPickerProps {
 }
 
 /**
- * Preview-breakpoint selector for the editor header.
+ * Canvas-width 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.
+ * DESKTOP / TABLET / MOBILE structure legible. This only sizes the first-party
+ * canvas — it is not a live-site viewport.
  *
  * Radix owns the menu behaviour — outside-click, Escape, roving focus, and
  * `aria-expanded` on the trigger — rather than a hand-rolled popover.
@@ -32,6 +33,7 @@ export function BreakpointPicker({ value, onChange, disabled }: BreakpointPicker
   const [open, setOpen] = useState(false)
   const active = getBreakpoint(value)
   const ActiveIcon = breakpointIcon(active.icon)
+  const canvasWidthLabel = `Canvas width: ${active.name}, ${active.width} pixels. First-party layout only — use View site for the live design.`
 
   return (
     <DropdownMenu.Root open={open} onOpenChange={setOpen}>
@@ -39,7 +41,8 @@ export function BreakpointPicker({ value, onChange, disabled }: BreakpointPicker
         <button
           type="button"
           disabled={disabled}
-          aria-label={`Preview breakpoint: ${active.name}, ${active.width} pixels`}
+          aria-label={canvasWidthLabel}
+          title={canvasWidthLabel}
           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'

package/src/components/CanvasEditTip.tsx

@@ -27,8 +27,8 @@ export function CanvasEditTip() {
         <span className="text-foreground font-medium">Editing tip</span>
         {' — '}
         Click a section on the canvas, or in the list, to open its copy and images in the section
-        list. Use <span className="text-foreground font-medium">Site preview</span> to click text
-        and images in place.
+        list. Use <span className="text-foreground font-medium">View site</span> for the live
+        design.
       </p>
       <button
         type="button"

package/src/lib/canvas-edit-chrome.ts

@@ -1,70 +1,6 @@
-/**
- * Shared edit affordances for the page/post canvas and Site preview iframe.
- *
- * Structure canvas: section hover is styled in `theme.css` under `.prenta-canvas`.
- * Site preview: the same field chrome is injected into the iframe document when
- * same-origin (CMS-host preview) so consumers get hover borders without shipping CSS.
- */
-
 /** localStorage key for the dismissible canvas tip. */
 export const CANVAS_EDIT_TIP_STORAGE_KEY = 'prenta.canvasEditTip.dismissed'
 
-/**
- * CSS injected into the Site preview iframe while editing is enabled.
- * Uses system colors so it works without admin theme tokens in the iframe.
- */
-export const PREVIEW_EDITABLE_FIELD_CHROME_CSS = `
-/* Prenta Site preview — editable field hover chrome (injected by @prenta/admin) */
-[data-cms-field] {
-  outline: 1px solid transparent;
-  outline-offset: 2px;
-  border-radius: 2px;
-  transition: outline-color 120ms ease;
-  cursor: text;
-}
-[data-cms-field]:hover,
-[data-cms-field]:focus,
-[data-cms-field]:focus-within {
-  outline-color: color-mix(in oklab, CanvasText 24%, transparent);
-}
-[data-cms-field][data-cms-field-kind="media"] {
-  cursor: pointer;
-}
-[data-cms-field][data-cms-field-kind="media"]:hover,
-[data-cms-field][data-cms-field-kind="media"]:focus {
-  outline-color: color-mix(in oklab, CanvasText 32%, transparent);
-}
-@media (prefers-reduced-motion: reduce) {
-  [data-cms-field] {
-    transition: none;
-  }
-}
-`.trim()
-
-const STYLE_ATTR = 'data-prenta-edit-chrome'
-
-/**
- * Inject (or refresh) editable-field hover chrome into a same-origin preview
- * iframe. No-ops on cross-origin frames (browser blocks contentDocument).
- */
-export function injectPreviewEditChrome(iframe: HTMLIFrameElement | null): boolean {
-  try {
-    const doc = iframe?.contentDocument
-    if (!doc?.head) return false
-    let style = doc.head.querySelector<HTMLStyleElement>(`style[${STYLE_ATTR}]`)
-    if (!style) {
-      style = doc.createElement('style')
-      style.setAttribute(STYLE_ATTR, '1')
-      doc.head.appendChild(style)
-    }
-    style.textContent = PREVIEW_EDITABLE_FIELD_CHROME_CSS
-    doc.documentElement.setAttribute('data-prenta-preview-editing', 'true')
-    return true
-  } catch {
-    return false
-  }
-}
-
 export function isCanvasEditTipDismissed(): boolean {
   try {
     return localStorage.getItem(CANVAS_EDIT_TIP_STORAGE_KEY) === '1'

package/src/lib/editor-preview.ts

@@ -1,6 +1,9 @@
 import type { AdminEditorConfig } from '@prenta/core'
 
-/** Resolve whether a section editor should open with Site preview active. */
+/**
+ * Ignored by the editors; returns the old boolean for compatibility only.
+ * The page and post editors no longer mount an inline site-preview iframe.
+ */
 export function resolveDefaultSitePreview(
   editor: AdminEditorConfig | undefined,
   kind: 'pages' | 'posts',

package/src/lib/open-public-site-tab.ts

@@ -0,0 +1,57 @@
+import { toast } from 'sonner'
+import { buildPublicPreviewUrl, buildPublicUrl, createPreviewToken } from './preview-link.js'
+import { NO_PUBLIC_SITE_URL_REASON, type ViewSiteIntent } from './view-site-chrome.js'
+
+export async function openPublicSiteTab(opts: {
+  intent: ViewSiteIntent
+  siteUrl: string
+  collection: string
+  documentId: string
+  slug: string
+  path?: string | null
+  urlPrefix?: string
+  data?: Record<string, unknown> | null
+  dirty: boolean
+  saveDraft: () => Promise<boolean>
+}): Promise<void> {
+  const siteUrl = opts.siteUrl.trim()
+  if (!siteUrl) throw new Error(NO_PUBLIC_SITE_URL_REASON)
+
+  const parts = {
+    siteUrl,
+    urlPrefix: opts.urlPrefix ?? '',
+    slug: opts.slug,
+    path: opts.path,
+    data: opts.data,
+  }
+
+  if (opts.intent === 'view-live') {
+    window.open(buildPublicUrl(parts), '_blank', 'noopener')
+    return
+  }
+
+  const tab = window.open('about:blank', '_blank')
+  if (!tab) {
+    toast.error('Enable pop-ups for this site to open the preview in a new tab.')
+    return
+  }
+  try {
+    if (opts.dirty) {
+      const ok = await opts.saveDraft()
+      if (!ok) {
+        tab.close()
+        return
+      }
+    }
+    const { token } = await createPreviewToken(opts.collection, opts.documentId)
+    try {
+      tab.opener = null
+    } catch {
+      /* same-origin guard */
+    }
+    tab.location.replace(buildPublicPreviewUrl({ ...parts, token }))
+  } catch (err) {
+    tab.close()
+    throw err
+  }
+}