@prenta/admin 1.0.0 → 1.1.0

package/src/__tests__/components/breakpoint-controls.render.test.tsx

@@ -5,11 +5,13 @@ import { BreakpointPicker } from '../../components/BreakpointPicker.js'
 import { ZoomChip } from '../../components/ZoomChip.js'
 
 describe('BreakpointPicker', () => {
-  it('names the current breakpoint and its width to assistive tech', () => {
+  it('names canvas width, not a live preview', () => {
     render(<BreakpointPicker value="tabletL" onChange={vi.fn()} />)
-    // The visible label collapses to an abbreviation at narrow header widths,
-    // so the accessible name has to carry the full fact on its own.
-    expect(screen.getByRole('button', { name: /Tablet Landscape, 1024 pixels/i })).toBeTruthy()
+    expect(
+      screen.getByRole('button', {
+        name: 'Canvas width: Tablet Landscape, 1024 pixels. First-party layout only — use View site for the live design.',
+      }),
+    ).toBeTruthy()
   })
 
   it('renders 4K at 2560, not the physical pixel count', () => {

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

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const createPreviewToken = vi.fn()
+vi.mock('../../lib/preview-link.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../lib/preview-link.js')>()
+  return { ...actual, createPreviewToken }
+})
+
+const { openPublicSiteTab } = await import('../../lib/open-public-site-tab.js')
+const { NO_PUBLIC_SITE_URL_REASON } = await import('../../lib/view-site-chrome.js')
+
+function mockTab() {
+  return { close: vi.fn(), location: { replace: vi.fn() }, opener: {} as unknown }
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  createPreviewToken.mockReset()
+})
+
+const base = {
+  siteUrl: 'https://example.com',
+  collection: 'pages',
+  documentId: 'p1',
+  slug: 'about',
+  path: '/about',
+  dirty: false,
+  saveDraft: vi.fn().mockResolvedValue(true),
+}
+
+describe('openPublicSiteTab', () => {
+  it('refuses to open the admin host when siteUrl is empty', async () => {
+    const open = vi.fn()
+    vi.stubGlobal('window', { open })
+    await expect(openPublicSiteTab({ ...base, siteUrl: '', intent: 'view-live' })).rejects.toThrow(
+      NO_PUBLIC_SITE_URL_REASON,
+    )
+    expect(open).not.toHaveBeenCalled()
+  })
+
+  it('opens the live URL with no token', async () => {
+    const open = vi.fn()
+    vi.stubGlobal('window', { open })
+    await openPublicSiteTab({ ...base, intent: 'view-live' })
+    expect(open).toHaveBeenCalledWith('https://example.com/about', '_blank', 'noopener')
+    expect(createPreviewToken).not.toHaveBeenCalled()
+    expect(base.saveDraft).not.toHaveBeenCalled()
+  })
+
+  it('saves a dirty draft, mints a token, and replaces about:blank', async () => {
+    const tab = mockTab()
+    const open = vi.fn().mockReturnValue(tab)
+    vi.stubGlobal('window', { open })
+    createPreviewToken.mockResolvedValue({ token: 'tok', expiresAt: 'x' })
+    await openPublicSiteTab({ ...base, intent: 'preview-draft', dirty: true })
+    expect(open).toHaveBeenCalledWith('about:blank', '_blank')
+    expect(base.saveDraft).toHaveBeenCalledOnce()
+    expect(createPreviewToken).toHaveBeenCalledWith('pages', 'p1')
+    expect(tab.location.replace).toHaveBeenCalledWith('https://example.com/about?preview=tok')
+  })
+
+  it('closes the blank tab when save fails', async () => {
+    const tab = mockTab()
+    vi.stubGlobal('window', { open: vi.fn().mockReturnValue(tab) })
+    await openPublicSiteTab({
+      ...base,
+      intent: 'preview-draft',
+      dirty: true,
+      saveDraft: vi.fn().mockResolvedValue(false),
+    })
+    expect(tab.close).toHaveBeenCalledOnce()
+    expect(createPreviewToken).not.toHaveBeenCalled()
+  })
+})

package/src/__tests__/lib/view-site-chrome.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import { NO_PUBLIC_SITE_URL_REASON, resolveViewSiteChrome } from '../../lib/view-site-chrome.js'
+
+const base = {
+  dirty: false,
+  hasPublicSiteUrl: true,
+  hasIdentity: true,
+}
+
+describe('resolveViewSiteChrome', () => {
+  it('previews a draft and shows Share', () => {
+    expect(resolveViewSiteChrome({ ...base, status: 'DRAFT' })).toEqual({
+      viewEnabled: true,
+      primaryIntent: 'preview-draft',
+      showViewLive: false,
+      shareVisible: true,
+    })
+  })
+
+  it('treats scheduled and archived like a draft', () => {
+    for (const status of ['SCHEDULED', 'ARCHIVED'] as const) {
+      expect(resolveViewSiteChrome({ ...base, status }).primaryIntent).toBe('preview-draft')
+      expect(resolveViewSiteChrome({ ...base, status }).shareVisible).toBe(true)
+    }
+  })
+
+  it('opens live on a clean published document and hides Share', () => {
+    expect(resolveViewSiteChrome({ ...base, status: 'PUBLISHED' })).toEqual({
+      viewEnabled: true,
+      primaryIntent: 'view-live',
+      showViewLive: false,
+      shareVisible: false,
+    })
+  })
+
+  it('previews unpublished changes when published and dirty, and keeps View live + Share', () => {
+    expect(resolveViewSiteChrome({ ...base, status: 'PUBLISHED', dirty: true })).toEqual({
+      viewEnabled: true,
+      primaryIntent: 'preview-draft',
+      showViewLive: true,
+      shareVisible: true,
+    })
+  })
+
+  it('disables View site and Share when the public site URL is missing', () => {
+    const chrome = resolveViewSiteChrome({
+      ...base,
+      status: 'DRAFT',
+      hasPublicSiteUrl: false,
+    })
+    expect(chrome.viewEnabled).toBe(false)
+    expect(chrome.viewDisabledReason).toBe(NO_PUBLIC_SITE_URL_REASON)
+    expect(chrome.shareVisible).toBe(true)
+  })
+
+  it('hides View site and Share when the document is unsaved', () => {
+    const chrome = resolveViewSiteChrome({
+      ...base,
+      status: 'DRAFT',
+      hasIdentity: false,
+    })
+    expect(chrome.viewEnabled).toBe(false)
+    expect(chrome.shareVisible).toBe(false)
+  })
+})

package/src/__tests__/router/admin-routes.test.ts

@@ -71,4 +71,9 @@ describe('ADMIN_STATIC_ROUTE_PATTERNS stays in sync with AdminRoot', () => {
     const missing = [...new Set(literals)].filter((p) => !known.has(p))
     expect(missing).toEqual([])
   })
+
+  it('does not keep the retired admin-renderer preview routes', () => {
+    expect(ADMIN_STATIC_ROUTE_PATTERNS).not.toContain('/pages/:id/preview')
+    expect(ADMIN_STATIC_ROUTE_PATTERNS).not.toContain('/posts/:type/:id/preview')
+  })
 })

package/src/__tests__/views/canvas-surface-shared.test.ts

@@ -58,23 +58,4 @@ describe('canvas surface is shared, not copied', () => {
       expect(read(rel), `${rel} re-implements the scale`).not.toMatch(/fitScale/)
     }
   })
-
-  /**
-   * `SitePreviewFrame` was the third copy of `clientWidth - 48` and the one
-   * followup 2 left alone, because it scales an IFRAME rather than a rendered
-   * surface and cannot render `CanvasSurface`. It can still measure the same
-   * way, and now does: the padding arithmetic is gone even though the
-   * component is not shared.
-   *
-   * Kept apart from CANVASES on purpose — the assertion here is about the
-   * measurement, not about rendering the shared surface, and folding it in
-   * would make the other two tests claim something untrue about it.
-   */
-  it('the site preview measures from a sentinel too, though it cannot share the surface', () => {
-    const preview = read('src/views/page-editor/SitePreviewFrame.tsx')
-    expect(preview, 'SitePreviewFrame still does padding arithmetic').not.toMatch(
-      /clientWidth\s*-\s*\d/,
-    )
-    expect(preview, 'SitePreviewFrame does not measure from a sentinel').toMatch(/sentinelRef/)
-  })
 })

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,93 @@ 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 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 +200,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 () => {
@@ -233,3 +239,30 @@ describe('PageSectionEditor section disclosure', () => {
     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/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
+  }
+}

package/src/lib/view-site-chrome.ts

@@ -0,0 +1,34 @@
+import type { PageStatus } from './page-editor-service.js'
+
+export type ViewSiteIntent = 'preview-draft' | 'view-live'
+
+export const NO_PUBLIC_SITE_URL_REASON =
+  'Set the public site URL in Settings → SEO to open the live design.'
+
+export function resolveViewSiteChrome(input: {
+  status: PageStatus
+  dirty: boolean
+  hasPublicSiteUrl: boolean
+  hasIdentity: boolean
+}): {
+  viewEnabled: boolean
+  viewDisabledReason?: string
+  primaryIntent: ViewSiteIntent
+  showViewLive: boolean
+  shareVisible: boolean
+} {
+  const unpublished = input.status !== 'PUBLISHED' || input.dirty
+  const primaryIntent: ViewSiteIntent =
+    input.status === 'PUBLISHED' && !input.dirty ? 'view-live' : 'preview-draft'
+  const shareVisible = input.hasIdentity && unpublished
+  const viewEnabled = input.hasIdentity && input.hasPublicSiteUrl
+
+  return {
+    viewEnabled,
+    viewDisabledReason:
+      input.hasIdentity && !input.hasPublicSiteUrl ? NO_PUBLIC_SITE_URL_REASON : undefined,
+    primaryIntent,
+    showViewLive: input.hasIdentity && input.status === 'PUBLISHED' && input.dirty,
+    shareVisible,
+  }
+}

package/src/router/admin-routes.ts

@@ -40,14 +40,12 @@ export const ADMIN_STATIC_ROUTE_PATTERNS: readonly string[] = [
   '/pages',
   '/pages/:id',
   '/pages/:id/edit',
-  '/pages/:id/preview',
   '/pages/new',
   '/pages/tags',
   '/pages/tags/:id/edit',
   '/pages/tags/new',
   '/posts',
   '/posts/:type/:id/edit',
-  '/posts/:type/:id/preview',
   '/posts/:type/new',
   '/posts/new',
   '/posts/types',