@prenta/admin 1.1.0 → 1.2.0

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

@@ -1,5 +1,9 @@
 import { describe, expect, it } from 'vitest'
-import { NO_PUBLIC_SITE_URL_REASON, resolveViewSiteChrome } from '../../lib/view-site-chrome.js'
+import {
+  ADMIN_ORIGIN_SITE_URL_REASON,
+  NO_PUBLIC_SITE_URL_REASON,
+  resolveViewSiteChrome,
+} from '../../lib/view-site-chrome.js'
 
 const base = {
   dirty: false,
@@ -53,6 +57,17 @@ describe('resolveViewSiteChrome', () => {
     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,

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/editor-top-bar.render.test.tsx

@@ -151,6 +151,25 @@ describe('EditorTopBar view site / share', () => {
     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

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

@@ -213,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={{}} />,
     )
@@ -227,14 +237,14 @@ 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()
   })

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

@@ -1,140 +1,11 @@
 /**
- * Versioned postMessage protocol between the page editor (parent) and the
- * Next editing canvas (iframe). Namespaced with colons so it does not collide
- * with the legacy `prenta-preview-update` DocumentEdit bus.
+ * Field-path helpers shared by the editor canvas and the inspector.
  *
- * @see prenta docs/superpowers/specs/2026-07-29-visual-editing-design.md
+ * The old `prenta-preview:*` postMessage protocol is gone — View site opens a
+ * normal tab and does not talk back. `data-cms-field` on first-party section
+ * renderers still feeds the reflow guard and canvas field-focus.
  */
 
-export const PREVIEW_BRIDGE_VERSION = 1 as const
-
-/** Debounce for live section pushes while typing in the inspector. */
-export const PREVIEW_SECTIONS_DEBOUNCE_MS = 120
-
-export type PreviewBridgeMessageType =
-  | 'prenta-preview:ready'
-  | 'prenta-preview:select'
-  | 'prenta-preview:highlight'
-  | 'prenta-preview:sections'
-  | 'prenta-preview:mode'
-  | 'prenta-preview:edit'
-  | 'prenta-preview:request-media'
-
-export interface PreviewBridgeEnvelope {
-  type: PreviewBridgeMessageType
-  v: typeof PREVIEW_BRIDGE_VERSION
-}
-
-export interface PreviewReadyMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:ready'
-}
-
-export interface PreviewSelectMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:select'
-  sectionId: string
-  fieldPath?: string
-}
-
-export interface PreviewHighlightMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:highlight'
-  sectionId: string | null
-}
-
-/**
- * Opaque JSON object on the wire. Uses `object` (not `Record<string, unknown>`)
- * so concrete editor interfaces like `SectionSettings` remain assignable.
- */
-export type PreviewObjectPayload = object
-
-/** Wire shape for live canvas updates — matches `PublicSection` / editor sections. */
-export interface PreviewSectionPayload {
-  id: string
-  sectionType: string
-  name?: string
-  visible?: boolean
-  content?: PreviewObjectPayload
-  settings?: PreviewObjectPayload
-  unmanaged?: boolean
-}
-
-export interface PreviewSectionsMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:sections'
-  sections: PreviewSectionPayload[]
-}
-
-/** Admin → canvas: enable/disable inline editing affordances. */
-export interface PreviewModeMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:mode'
-  editing: boolean
-}
-
-/** Canvas → admin: text field edit from contenteditable. */
-export interface PreviewEditMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:edit'
-  sectionId: string
-  fieldPath: string
-  value: string
-}
-
-/** Canvas → admin: open media picker for an image field. */
-export interface PreviewRequestMediaMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:request-media'
-  sectionId: string
-  fieldPath: string
-}
-
-export type PreviewBridgeMessage =
-  | PreviewReadyMessage
-  | PreviewSelectMessage
-  | PreviewHighlightMessage
-  | PreviewSectionsMessage
-  | PreviewModeMessage
-  | PreviewEditMessage
-  | PreviewRequestMediaMessage
-
-export function isPreviewBridgeMessage(data: unknown): data is PreviewBridgeMessage {
-  if (!data || typeof data !== 'object') return false
-  const msg = data as Record<string, unknown>
-  if (msg.v !== PREVIEW_BRIDGE_VERSION) return false
-  if (typeof msg.type !== 'string' || !msg.type.startsWith('prenta-preview:')) return false
-  return true
-}
-
-export function isPreviewEditMessage(data: unknown): data is PreviewEditMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:edit') return false
-  return (
-    typeof data.sectionId === 'string' &&
-    data.sectionId.length > 0 &&
-    typeof data.fieldPath === 'string' &&
-    data.fieldPath.length > 0 &&
-    typeof data.value === 'string'
-  )
-}
-
-export function isPreviewRequestMediaMessage(data: unknown): data is PreviewRequestMediaMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:request-media') return false
-  return (
-    typeof data.sectionId === 'string' &&
-    data.sectionId.length > 0 &&
-    typeof data.fieldPath === 'string' &&
-    data.fieldPath.length > 0
-  )
-}
-
-export function isPreviewModeMessage(data: unknown): data is PreviewModeMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:mode') return false
-  return typeof data.editing === 'boolean'
-}
-
-export function canvasOriginFromSrc(src: string | null | undefined): string | null {
-  if (!src) return null
-  try {
-    return new URL(src, typeof window !== 'undefined' ? window.location.origin : undefined).origin
-  } catch {
-    return null
-  }
-}
-
 /**
  * Map a dotted content field path (`lead`, `stats.0.num`) to the inspector
  * input id (`insp-field-lead`, `insp-field-stats-0-num`). Same string shape
@@ -181,29 +52,12 @@ export function companionDimensionPaths(fieldPath: string): {
 }
 
 /**
- * Media URL slots are not contenteditable. Prefer `data-cms-field-kind="media"`
- * on the canvas; fall back to common image field leaf names.
+ * Read `data-cms-field` from a canvas click target (or its ancestor).
+ * Used so a field click opens the accordion on the matching inspector input.
  */
-export function isMediaFieldPath(fieldPath: string, kindAttr?: string | null): boolean {
-  if (kindAttr === 'media') return true
-  if (kindAttr === 'text') return false
-  const leaf = fieldPathLeaf(fieldPath)
-  if (leaf === 'imageUrl' || leaf.endsWith('ImageUrl') || leaf === 'featuredImage') return true
-  // Gallery rows use `images.N.url` (not link CTAs).
-  return leaf === 'url' && fieldPath.includes('images.')
-}
-
-/** Strip editor chrome to the public wire shape before posting to the canvas. */
-export function toPreviewSectionPayload(
-  section: PreviewSectionPayload & { internalLabel?: string },
-): PreviewSectionPayload {
-  return {
-    id: section.id,
-    sectionType: section.sectionType,
-    name: section.name,
-    visible: section.visible,
-    content: section.content ?? {},
-    settings: section.settings ?? {},
-    unmanaged: section.unmanaged,
-  }
+export function fieldPathFromEventTarget(target: EventTarget | null): string | undefined {
+  if (!(target instanceof Element)) return undefined
+  const field = target.closest('[data-cms-field]')
+  const path = field?.getAttribute('data-cms-field')?.trim()
+  return path || undefined
 }

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

@@ -5,11 +5,16 @@ 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 const ADMIN_ORIGIN_SITE_URL_REASON =
+  'This origin is the admin, not the public site. Set the public site URL in Settings → SEO.'
+
 export function resolveViewSiteChrome(input: {
   status: PageStatus
   dirty: boolean
   hasPublicSiteUrl: boolean
   hasIdentity: boolean
+  /** True when the configured site URL is the CMS host (Astro-split misconfig). */
+  matchesAdminOrigin?: boolean
 }): {
   viewEnabled: boolean
   viewDisabledReason?: string
@@ -21,12 +26,19 @@ export function resolveViewSiteChrome(input: {
   const primaryIntent: ViewSiteIntent =
     input.status === 'PUBLISHED' && !input.dirty ? 'view-live' : 'preview-draft'
   const shareVisible = input.hasIdentity && unpublished
-  const viewEnabled = input.hasIdentity && input.hasPublicSiteUrl
+  const usablePublicUrl = input.hasPublicSiteUrl && !input.matchesAdminOrigin
+  const viewEnabled = input.hasIdentity && usablePublicUrl
+
+  let viewDisabledReason: string | undefined
+  if (input.hasIdentity && !input.hasPublicSiteUrl) {
+    viewDisabledReason = NO_PUBLIC_SITE_URL_REASON
+  } else if (input.hasIdentity && input.matchesAdminOrigin) {
+    viewDisabledReason = ADMIN_ORIGIN_SITE_URL_REASON
+  }
 
   return {
     viewEnabled,
-    viewDisabledReason:
-      input.hasIdentity && !input.hasPublicSiteUrl ? NO_PUBLIC_SITE_URL_REASON : undefined,
+    viewDisabledReason,
     primaryIntent,
     showViewLive: input.hasIdentity && input.status === 'PUBLISHED' && input.dirty,
     shareVisible,

package/src/views/page-editor/EditorCanvas.tsx

@@ -13,7 +13,7 @@ interface EditorCanvasProps {
   selectedId: string | null
   breakpoint: BreakpointId
   zoom?: Zoom
-  onSelect: (id: string) => void
+  onSelect: (id: string, fieldPath?: string) => void
   onScaleChange?: (scale: number) => void
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */

package/src/views/page-editor/EditorTopBar.tsx

@@ -55,6 +55,8 @@ interface EditorTopBarProps {
   onShare?: () => void
   /** When false, View site and Share are disabled with the SEO settings reason. */
   hasPublicSiteUrl?: boolean
+  /** When true, View site and Share stay disabled — the URL is the CMS host. */
+  matchesAdminOrigin?: boolean
   /**
    * Toggle the version history panel. When omitted the History button is
    * hidden — e.g. for unsaved documents that have no versions yet.
@@ -122,6 +124,7 @@ export function EditorTopBar({
   onViewOnSite,
   onShare,
   hasPublicSiteUrl,
+  matchesAdminOrigin,
   onHistory,
   historyOpen = false,
   onOpenSettings,
@@ -142,6 +145,7 @@ export function EditorTopBar({
         status,
         dirty,
         hasPublicSiteUrl: Boolean(hasPublicSiteUrl),
+        matchesAdminOrigin: Boolean(matchesAdminOrigin),
         hasIdentity: true,
       })
     : null