@prenta/admin 1.0.0 → 1.2.0

package/src/AdminRoot.tsx

@@ -42,7 +42,6 @@ import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js'
 import { useAppearanceBootstrap } from './hooks/useAppearanceBootstrap.js'
 import { useIdleLogout } from './hooks/useIdleLogout.js'
 import { PageSectionEditor } from './views/page-editor/PageSectionEditor.js'
-import { PagePreview } from './views/page-editor/PagePreview.js'
 import {
   AdminSectionRenderersProvider,
   type AdminSectionRendererMap,
@@ -56,7 +55,6 @@ import { NewPostPicker } from './views/Posts/NewPostPicker.js'
 import { NewPostTypeInstructions } from './views/Posts/NewPostTypeInstructions.js'
 import { PostSectionEditor } from './views/post-editor/PostSectionEditor.js'
 import { PostTemplateEditor } from './views/post-editor/PostTemplateEditor.js'
-import { PostPreview } from './views/post-editor/PostPreview.js'
 
 export interface AdminRootProps {
   config: any
@@ -172,42 +170,6 @@ function AdminShell({
     await onLogout?.()
   }, [navigate, initialPath, onLogout])
 
-  // Open a preview route in a new browser tab so it behaves like a normal,
-  // shareable page (its own URL, no admin chrome — see the standalone branch
-  // below). The blank tab is opened synchronously inside the click gesture so
-  // popup blockers permit it; `prepare` (e.g. saving an unsaved draft) runs
-  // before we point the tab at the URL, guaranteeing the preview reflects the
-  // latest saved content. If `prepare` rejects, the tab is closed.
-  const openPreview = useCallback(
-    (path: string, prepare?: () => Promise<boolean | void> | boolean | void) => {
-      if (typeof window === 'undefined') 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
-      }
-      const go = (ok: boolean | void) => {
-        if (ok === false) {
-          tab?.close()
-          return
-        }
-        if (tab && !tab.closed) {
-          // Sever the opener link for safety, then load the real URL.
-          try {
-            tab.opener = null
-          } catch {
-            /* cross-origin guard — never throws for same-origin admin */
-          }
-          tab.location.replace(buildHref(path))
-        }
-      }
-      Promise.resolve(prepare?.())
-        .then(go)
-        .catch(() => tab?.close())
-    },
-    [buildHref],
-  )
-
   // Idle auto-logout (Settings → Security). The policy is read from the
   // non-admin-gated /auth/session-policy endpoint so every member's client
   // enforces it, not just admins. When enabled, `timeoutHours` of inactivity
@@ -459,18 +421,6 @@ function AdminShell({
           config={config}
           session={session}
           onNavigate={navigate}
-          onOpenPreview={openPreview}
-        />
-      )
-    }
-    const postPreview = matchRoute('/posts/:type/:id/preview')
-    if (postPreview?.type && postPreview?.id) {
-      return (
-        <PostPreview
-          postType={postPreview.type}
-          documentId={postPreview.id}
-          session={session}
-          onNavigate={navigate}
         />
       )
     }
@@ -483,7 +433,6 @@ function AdminShell({
           config={config}
           session={session}
           onNavigate={navigate}
-          onOpenPreview={openPreview}
         />
       )
     }
@@ -514,14 +463,9 @@ function AdminShell({
           config={config}
           session={session}
           onNavigate={navigate}
-          onOpenPreview={openPreview}
         />
       )
     }
-    const pagePreview = matchRoute('/pages/:id/preview')
-    if (pagePreview?.id) {
-      return <PagePreview documentId={pagePreview.id} onNavigate={navigate} />
-    }
     const pageEdit = matchRoute('/pages/:id/edit')
     if (pageEdit?.id) {
       return (
@@ -530,7 +474,6 @@ function AdminShell({
           config={config}
           session={session}
           onNavigate={navigate}
-          onOpenPreview={openPreview}
         />
       )
     }
@@ -542,7 +485,6 @@ function AdminShell({
           config={config}
           session={session}
           onNavigate={navigate}
-          onOpenPreview={openPreview}
         />
       )
     }
@@ -729,18 +671,6 @@ function AdminShell({
     )
   }
 
-  // Preview routes render as standalone pages (no sidebar/header) so a
-  // new-tab preview looks like the real published page rather than an
-  // embedded admin view. Everything else gets the full admin chrome.
-  // Query string is stripped — currentPath carries it after reloads.
-  if (currentPath.split('?')[0]!.endsWith('/preview')) {
-    return (
-      <div className="bg-background h-full min-h-screen">
-        <ErrorBoundary>{renderView()}</ErrorBoundary>
-      </div>
-    )
-  }
-
   return (
     <Layout
       config={config}

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/canvas-edit-chrome.test.ts

@@ -3,9 +3,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import {
   CANVAS_EDIT_TIP_STORAGE_KEY,
   dismissCanvasEditTip,
-  injectPreviewEditChrome,
   isCanvasEditTipDismissed,
-  PREVIEW_EDITABLE_FIELD_CHROME_CSS,
 } from '../../lib/canvas-edit-chrome.js'
 
 // happy-dom localStorage is non-functional in this Node setup — stub a Map.
@@ -28,29 +26,4 @@ describe('canvas-edit-chrome', () => {
     expect(isCanvasEditTipDismissed()).toBe(true)
     expect(localStorage.getItem(CANVAS_EDIT_TIP_STORAGE_KEY)).toBe('1')
   })
-
-  it('injects editable field chrome into a same-origin iframe document', () => {
-    const iframe = document.createElement('iframe')
-    document.body.appendChild(iframe)
-    const doc = iframe.contentDocument
-    expect(doc).toBeTruthy()
-    if (!doc) return
-
-    expect(injectPreviewEditChrome(iframe)).toBe(true)
-    const style = doc.head.querySelector('style[data-prenta-edit-chrome]')
-    expect(style?.textContent).toContain('[data-cms-field]')
-    expect(style?.textContent).toContain('data-cms-field-kind')
-    expect(PREVIEW_EDITABLE_FIELD_CHROME_CSS.length).toBeGreaterThan(0)
-    expect(doc.documentElement.getAttribute('data-prenta-preview-editing')).toBe('true')
-
-    // Refresh is idempotent — one style tag.
-    expect(injectPreviewEditChrome(iframe)).toBe(true)
-    expect(doc.head.querySelectorAll('style[data-prenta-edit-chrome]')).toHaveLength(1)
-
-    iframe.remove()
-  })
-
-  it('returns false when iframe has no contentDocument', () => {
-    expect(injectPreviewEditChrome(null)).toBe(false)
-  })
 })

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/preview-bridge.test.ts

@@ -1,128 +1,39 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from 'vitest'
 import {
-  canvasOriginFromSrc,
   companionDimensionPaths,
+  fieldPathFromEventTarget,
+  fieldPathLeaf,
   inspectorIdFromFieldPath,
-  isMediaFieldPath,
-  isPreviewBridgeMessage,
-  isPreviewEditMessage,
-  isPreviewModeMessage,
-  isPreviewRequestMediaMessage,
-  PREVIEW_BRIDGE_VERSION,
-  toPreviewSectionPayload,
 } from '../../lib/preview-bridge.js'
 
-describe('preview-bridge', () => {
-  it('accepts versioned prenta-preview messages', () => {
-    expect(
-      isPreviewBridgeMessage({ type: 'prenta-preview:ready', v: PREVIEW_BRIDGE_VERSION }),
-    ).toBe(true)
-    expect(
-      isPreviewBridgeMessage({
-        type: 'prenta-preview:select',
-        v: PREVIEW_BRIDGE_VERSION,
-        sectionId: 'sec-1',
-      }),
-    ).toBe(true)
-  })
-
-  it('rejects legacy or wrong-version payloads', () => {
-    expect(isPreviewBridgeMessage({ type: 'prenta-preview-update', data: {} })).toBe(false)
-    expect(isPreviewBridgeMessage({ type: 'prenta-preview:ready', v: 99 })).toBe(false)
-    expect(isPreviewBridgeMessage(null)).toBe(false)
-  })
-
-  it('parses canvas origin from iframe src', () => {
-    expect(canvasOriginFromSrc('https://cms.example.com/about/?preview=tok')).toBe(
-      'https://cms.example.com',
-    )
-    expect(canvasOriginFromSrc(null)).toBeNull()
-  })
-
+describe('preview-bridge field paths', () => {
   it('maps dotted field paths to unified insp-field ids', () => {
     expect(inspectorIdFromFieldPath('lead')).toBe('insp-field-lead')
     expect(inspectorIdFromFieldPath('stats.0.num')).toBe('insp-field-stats-0-num')
     expect(inspectorIdFromFieldPath('rotateWords.2.word')).toBe('insp-field-rotateWords-2-word')
   })
 
-  it('accepts prenta-preview:sections payloads', () => {
-    expect(
-      isPreviewBridgeMessage({
-        type: 'prenta-preview:sections',
-        v: PREVIEW_BRIDGE_VERSION,
-        sections: [{ id: 's1', sectionType: 'hero', content: { heading: 'Hi' } }],
-      }),
-    ).toBe(true)
-  })
-
-  it('strips editor-only fields from preview section payloads', () => {
-    expect(
-      toPreviewSectionPayload({
-        id: 's1',
-        sectionType: 'hero',
-        name: 'Hero',
-        visible: true,
-        content: { heading: 'Hi' },
-        settings: {},
-        internalLabel: 'team note',
-      }),
-    ).toEqual({
-      id: 's1',
-      sectionType: 'hero',
-      name: 'Hero',
-      visible: true,
-      content: { heading: 'Hi' },
-      settings: {},
-      unmanaged: undefined,
-    })
-  })
-
-  it('validates edit / mode / request-media payloads', () => {
-    expect(
-      isPreviewEditMessage({
-        type: 'prenta-preview:edit',
-        v: PREVIEW_BRIDGE_VERSION,
-        sectionId: 's1',
-        fieldPath: 'lead',
-        value: 'Hello',
-      }),
-    ).toBe(true)
-    expect(
-      isPreviewEditMessage({
-        type: 'prenta-preview:edit',
-        v: PREVIEW_BRIDGE_VERSION,
-        sectionId: 's1',
-        fieldPath: 'lead',
-      }),
-    ).toBe(false)
-    expect(
-      isPreviewModeMessage({
-        type: 'prenta-preview:mode',
-        v: PREVIEW_BRIDGE_VERSION,
-        editing: true,
-      }),
-    ).toBe(true)
-    expect(
-      isPreviewRequestMediaMessage({
-        type: 'prenta-preview:request-media',
-        v: PREVIEW_BRIDGE_VERSION,
-        sectionId: 's1',
-        fieldPath: 'awards.0.imageUrl',
-      }),
-    ).toBe(true)
-  })
-
-  it('detects media field paths and companion dimension paths', () => {
-    expect(isMediaFieldPath('imageUrl')).toBe(true)
-    expect(isMediaFieldPath('awards.0.imageUrl')).toBe(true)
-    expect(isMediaFieldPath('lead')).toBe(false)
-    expect(isMediaFieldPath('ctaUrl')).toBe(false)
-    expect(isMediaFieldPath('url', 'media')).toBe(true)
-    expect(isMediaFieldPath('images.0.url')).toBe(true)
-    expect(isMediaFieldPath('buttonUrl')).toBe(false)
+  it('reads companion dimension paths for media URL fields', () => {
     expect(companionDimensionPaths('awards.0.imageUrl')).toEqual({
       widthPath: 'awards.0.imageWidth',
       heightPath: 'awards.0.imageHeight',
     })
+    expect(companionDimensionPaths('images.0.url')).toEqual({
+      widthPath: 'images.0.width',
+      heightPath: 'images.0.height',
+    })
+    expect(fieldPathLeaf('awards.0.imageUrl')).toBe('imageUrl')
+  })
+
+  it('reads data-cms-field from a click target or its ancestor', () => {
+    const wrap = document.createElement('div')
+    wrap.setAttribute('data-cms-field', 'heading')
+    const inner = document.createElement('span')
+    wrap.appendChild(inner)
+    expect(fieldPathFromEventTarget(inner)).toBe('heading')
+    expect(fieldPathFromEventTarget(wrap)).toBe('heading')
+    expect(fieldPathFromEventTarget(document.createElement('div'))).toBeUndefined()
+    expect(fieldPathFromEventTarget(null)).toBeUndefined()
   })
 })

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

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest'
+import {
+  ADMIN_ORIGIN_SITE_URL_REASON,
+  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('disables View site and Share when the site URL is the admin origin', () => {
+    const chrome = resolveViewSiteChrome({
+      ...base,
+      status: 'DRAFT',
+      matchesAdminOrigin: true,
+    })
+    expect(chrome.viewEnabled).toBe(false)
+    expect(chrome.viewDisabledReason).toBe(ADMIN_ORIGIN_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-review-mode.render.test.tsx

@@ -68,10 +68,23 @@ describe('SectionRenderer — review mode', () => {
 
     fireEvent.click(sectionEl())
 
-    expect(onSelect).toHaveBeenCalledWith('s1')
+    expect(onSelect).toHaveBeenCalledWith('s1', undefined)
     expect(sectionEl().getAttribute('data-editable')).toBe('true')
   })
 
+  it('passes the data-cms-field path when a field inside the section is clicked', () => {
+    const onSelect = vi.fn()
+    render(<SectionRenderer section={SECTION} editable onSelect={onSelect} />)
+
+    const field = document.createElement('h2')
+    field.setAttribute('data-cms-field', 'heading')
+    field.textContent = 'A headline'
+    sectionEl().appendChild(field)
+    fireEvent.click(field)
+
+    expect(onSelect).toHaveBeenCalledWith('s1', 'heading')
+  })
+
   it('names the change in the accessible name, not only in colour and a dashed border', () => {
     render(<SectionRenderer section={SECTION} editable reviewing changed />)
     expect(sectionEl().getAttribute('aria-label')).toBe(

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/)
-  })
 })