@prenta/admin 1.0.0 → 1.1.0

package/src/styles/theme.css

@@ -174,8 +174,8 @@
  * `views/page-editor/sections/` must use `@pv-*`, never `sm:`/`md:`/`lg:`.
  *
  * Values come from the page-builder design handoff. Any element carrying
- * these variants needs an ancestor with `@container` — EditorCanvas,
- * PostEditorCanvas, PagePreview and PostPreview all declare it.
+ * these variants needs an ancestor with `@container` — EditorCanvas
+ * and PostEditorCanvas both declare it.
  */
 @theme {
   --container-pv-sm: 460px; /* below: stats 1-up, buttons full width */
@@ -281,8 +281,8 @@
   /*
    * The canvas is the query container for every previewed section (`@pv-*`
    * variants — see the step scale above). It lives here rather than as an
-   * `@container` utility on each host because FOUR surfaces render these
-   * sections — EditorCanvas, PostEditorCanvas, PagePreview, PostPreview — and
+   * `@container` utility on each host because TWO surfaces render these
+   * sections — EditorCanvas and PostEditorCanvas — and
    * a host that forgets it degrades silently: with no container ancestor,
    * every `@pv-*` variant simply never matches and the page renders at its
    * narrowest layout regardless of the selected breakpoint. Tying containment

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

@@ -18,7 +18,6 @@ interface EditorCanvasProps {
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
-  sitePreviewAvailable?: boolean
   /**
    * Read-only render of a past version. Suppresses selection and the editing
    * affordances, and turns on the changed-section outlines.
@@ -50,7 +49,6 @@ export function EditorCanvas({
   onScaleChange,
   onCanvasElement,
   structuralTypes = [],
-  sitePreviewAvailable = false,
   reviewing = false,
   changedSectionIds,
   reviewBar,
@@ -84,10 +82,7 @@ export function EditorCanvas({
           ) : (
             <>
               <CanvasEditTip />
-              <StructureNotice
-                structuralTypes={structuralTypes}
-                sitePreviewAvailable={sitePreviewAvailable}
-              />
+              <StructureNotice structuralTypes={structuralTypes} />
             </>
           )
         }

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

@@ -1,21 +1,24 @@
 'use client'
 
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
   Calendar,
   Check,
+  ChevronDown,
   ExternalLink,
-  Eye,
-  Globe,
   History,
   Loader2,
   Settings2,
+  Share2,
   TriangleAlert,
 } from 'lucide-react'
 import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js'
 import { BreakpointPicker } from '../../components/BreakpointPicker.js'
 import { ZoomChip } from '../../components/ZoomChip.js'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { PageStatus } from '../../lib/page-editor-service.js'
 import type { Zoom } from '../../lib/breakpoints.js'
+import { resolveViewSiteChrome, type ViewSiteIntent } from '../../lib/view-site-chrome.js'
 import { type ViewportId } from './viewports.js'
 
 export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
@@ -33,7 +36,7 @@ interface EditorTopBarProps {
   /** Shown on hover/focus when publish is blocked by validation (not role). */
   publishDisabledReason?: string
   viewport: ViewportId
-  /** Canvas zoom mode; omit to hide the zoom chip (e.g. the site-preview iframe). */
+  /** Canvas zoom mode; omit to hide the zoom chip. */
   zoom?: Zoom
   /** Scale the canvas actually measured, 0–1 — displayed by the zoom chip. */
   canvasScale?: number
@@ -42,13 +45,16 @@ interface EditorTopBarProps {
   backLabel?: string
   onViewport: (v: ViewportId) => void
   onBack: () => void
-  onPreview: () => void
   /**
-   * Open the draft on the public site (real front-end) in a new tab. When
-   * omitted the "View on site" button is hidden — e.g. for unsaved documents
-   * or installs without a public URL.
+   * Open the public site in a new tab. Called with `preview-draft` or
+   * `view-live` depending on status and dirty. Omitted for unsaved documents
+   * (no id/slug yet) — View site / Share / View live are then hidden.
    */
-  onViewOnSite?: () => void
+  onViewOnSite?: (intent: ViewSiteIntent) => void
+  /** Copy a shareable draft preview link. Hidden when `shareVisible` is false. */
+  onShare?: () => void
+  /** When false, View site and Share are disabled with the SEO settings reason. */
+  hasPublicSiteUrl?: boolean
   /**
    * Toggle the version history panel. When omitted the History button is
    * hidden — e.g. for unsaved documents that have no versions yet.
@@ -60,13 +66,6 @@ interface EditorTopBarProps {
    * is nothing in the chrome saying which mode the editor is in.
    */
   historyOpen?: boolean
-  /** Whether the inline site preview (iframe of the public site) is showing. */
-  sitePreview?: boolean
-  /**
-   * Toggle the inline site preview — renders the draft through the consumer's
-   * real public route inside the editor. Hidden when omitted (unsaved docs).
-   */
-  onToggleSitePreview?: () => void
   onOpenSettings: () => void
   /** Open the document SEO panel (meta, social, schema, analysis). */
   onOpenSeo?: () => void
@@ -90,9 +89,8 @@ interface EditorTopBarProps {
   scheduledUnpublishAt?: string | null
   /**
    * Section types the canvas renders as placeholders (custom / unmanaged).
-   * When non-empty the editor is in "structure" mode: the eye preview is
-   * labeled as a structure preview and "View on site" is promoted to a
-   * labeled button as the primary design preview.
+   * Used for structure notice / other chrome. View site is always a labeled
+   * button regardless of this list.
    */
   structuralTypes?: string[]
 }
@@ -121,12 +119,11 @@ export function EditorTopBar({
   backLabel = 'Pages',
   onViewport,
   onBack,
-  onPreview,
   onViewOnSite,
+  onShare,
+  hasPublicSiteUrl,
   onHistory,
   historyOpen = false,
-  sitePreview = false,
-  onToggleSitePreview,
   onOpenSettings,
   onOpenSeo,
   seoOpen = false,
@@ -138,19 +135,16 @@ export function EditorTopBar({
   scheduleReady = true,
   scheduledAt = null,
   scheduledUnpublishAt = null,
-  structuralTypes = [],
 }: EditorTopBarProps) {
   const statusInfo = STATUS_TEXT[status]
-  // With custom section types on the page the canvas (and the eye preview,
-  // which reuses the admin renderers) only shows structure — the real design
-  // preview is the public site, so promote "View on site" to a labeled button.
-  const structural = structuralTypes.length > 0
-  const previewLabel = structural
-    ? 'Preview structure (custom sections show placeholders)'
-    : 'Preview page'
-  // For a published document the external-link button opens the LIVE page (no
-  // preview token); otherwise it opens a token-gated preview of the draft.
-  const isLive = status === 'PUBLISHED'
+  const chrome = onViewOnSite
+    ? resolveViewSiteChrome({
+        status,
+        dirty,
+        hasPublicSiteUrl: Boolean(hasPublicSiteUrl),
+        hasIdentity: true,
+      })
+    : null
 
   const publishBlocked = !canPublish || !publishReady || publishing || saveState === 'saving'
   const publishTitle = publishing
@@ -281,63 +275,68 @@ export function EditorTopBar({
           </button>
         )}
 
-        <button
-          type="button"
-          onClick={onPreview}
-          aria-label={previewLabel}
-          title={previewLabel}
-          className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
-        >
-          <Eye className="h-4 w-4" aria-hidden />
-        </button>
-
-        {onToggleSitePreview && (
-          <button
-            type="button"
-            onClick={onToggleSitePreview}
-            aria-pressed={sitePreview}
-            aria-label={sitePreview ? 'Back to editor canvas' : 'Inline site preview'}
-            title={
-              sitePreview
-                ? 'Back to editor canvas'
-                : 'Inline site preview — render the draft through your public site, in place'
-            }
-            className={`prenta-touch-target rounded-lg p-2 transition-colors ${
-              sitePreview
-                ? 'bg-primary text-primary-foreground'
-                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-            }`}
-          >
-            <Globe className="h-4 w-4" aria-hidden />
-          </button>
-        )}
-
-        {onViewOnSite &&
-          (structural ? (
+        {chrome && (
+          <>
             <button
               type="button"
-              onClick={onViewOnSite}
+              onClick={() => onViewOnSite?.(chrome.primaryIntent)}
+              disabled={!chrome.viewEnabled}
               title={
-                isLive
-                  ? 'Open the live published page in a new tab'
-                  : 'Open the draft on your public site — the real design preview'
+                chrome.viewDisabledReason ??
+                (chrome.primaryIntent === 'view-live'
+                  ? 'Open the published page in a new tab.'
+                  : 'Open the draft on your site in a new tab.')
               }
-              className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
+              className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
             >
               <ExternalLink className="h-3.5 w-3.5" aria-hidden />
-              {isLive ? 'View live' : 'View on site'}
+              {chrome.primaryIntent === 'view-live' ? 'View live' : 'View site'}
             </button>
-          ) : (
-            <button
-              type="button"
-              onClick={onViewOnSite}
-              aria-label={isLive ? 'View live page' : 'View draft on site'}
-              title={isLive ? 'View live page' : 'View draft on site'}
-              className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
-            >
-              <ExternalLink className="h-4 w-4" aria-hidden />
-            </button>
-          ))}
+            {chrome.showViewLive && (
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <button
+                    type="button"
+                    disabled={!chrome.viewEnabled}
+                    aria-label="More view options"
+                    className="prenta-touch-target border-border text-foreground hover:bg-accent inline-flex h-[34px] items-center rounded-lg border px-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    <ChevronDown className="h-3.5 w-3.5" aria-hidden />
+                  </button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Portal container={adminPortalContainer()}>
+                  <DropdownMenu.Content
+                    align="end"
+                    sideOffset={6}
+                    className="border-border bg-popover z-[120] rounded-[10px] border p-[5px] shadow-[0_12px_34px_rgba(26,24,39,0.17)]"
+                  >
+                    <DropdownMenu.Item
+                      onSelect={() => onViewOnSite?.('view-live')}
+                      className="hover:bg-accent focus:bg-accent cursor-pointer rounded-md px-2.5 py-1.5 text-sm outline-none"
+                    >
+                      View live
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Root>
+            )}
+            {chrome.shareVisible && onShare && (
+              <button
+                type="button"
+                onClick={onShare}
+                disabled={!chrome.viewEnabled}
+                title={
+                  chrome.viewDisabledReason ??
+                  'Copy a link so someone can view this draft without signing in.'
+                }
+                className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <Share2 className="h-3.5 w-3.5" aria-hidden />
+                Share
+              </button>
+            )}
+          </>
+        )}
 
         <button
           type="button"

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

@@ -34,11 +34,9 @@ import {
   type ValidationResult,
 } from '../../lib/page-editor-service.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
-import {
-  buildPublicPreviewUrl,
-  buildPublicUrl,
-  createPreviewToken,
-} from '../../lib/preview-link.js'
+import { SharePreviewLinkDialog } from '../../components/SharePreviewLinkDialog.js'
+import { openPublicSiteTab } from '../../lib/open-public-site-tab.js'
+import type { ViewSiteIntent } from '../../lib/view-site-chrome.js'
 import { usePublicSiteUrl } from '../../hooks/usePublicSiteUrl.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from './viewports.js'
 import type { Zoom } from '../../lib/breakpoints.js'
@@ -59,12 +57,9 @@ import { EditorTopBar, type SaveState } from './EditorTopBar.js'
 import { SectionsList } from './SectionsPanel.js'
 import { EditorCanvas } from './EditorCanvas.js'
 import { ReflowContext } from './reflow-context.js'
-import { SitePreviewFrame } from './SitePreviewFrame.js'
-import { useSitePreview } from './useSitePreview.js'
 import { SectionEditForm } from './SectionEditForm.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
-import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
 import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
 import { companionDimensionPaths, inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 
@@ -80,12 +75,6 @@ interface PageSectionEditorProps {
   config?: any
   session?: any
   onNavigate: (path: string) => void
-  /**
-   * Open a preview route in a new browser tab. `prepare` runs before the tab
-   * navigates (used to save an unsaved draft first); returning `false` cancels
-   * the open. Falls back to in-tab navigation when not provided.
-   */
-  onOpenPreview?: (path: string, prepare?: () => Promise<boolean | void> | boolean | void) => void
 }
 
 /**
@@ -137,7 +126,6 @@ export function PageSectionEditor({
   config,
   session,
   onNavigate,
-  onOpenPreview,
 }: PageSectionEditorProps) {
   const [page, setPage] = useState<EditorPage | null>(null)
   const [loading, setLoading] = useState(true)
@@ -165,8 +153,7 @@ export function PageSectionEditor({
   const [canvasScale, setCanvasScale] = useState(1)
   /**
    * The live canvas surface, for the reflow guard to clone. State rather than a
-   * ref because the context value has to update when it mounts — the canvas
-   * unmounts whenever the site-preview frame takes over.
+   * ref because the context value has to update when it mounts.
    */
   const [canvasEl, setCanvasEl] = useState<HTMLElement | null>(null)
   /**
@@ -234,6 +221,7 @@ export function PageSectionEditor({
   const [restoring, setRestoring] = useState(false)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
+  const [shareOpen, setShareOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
@@ -579,22 +567,6 @@ export function PageSectionEditor({
     }
   }, [page, documentId, onNavigate, saveDirectives, acceptPage])
 
-  // Inline branded preview — Next builder canvas (same origin as admin), not
-  // the Astro public apex. "View on site" still uses publicSiteUrl below.
-  const sitePreview = useSitePreview({
-    collection: 'pages',
-    documentId: page?.id,
-    slug: page?.slug,
-    path: page?.path,
-    urlPrefix: '',
-    dirty,
-    saveState,
-    saveDraft: handleSaveDraft,
-    defaultActive: resolveDefaultSitePreview(config?.admin?.editor, 'pages'),
-  })
-
-  const sitePreviewAvailable = Boolean(page?.id && page?.slug)
-
   const requestPublish = useCallback(() => {
     if (!page) return
     const result = validatePage(page, true)
@@ -797,82 +769,36 @@ export function PageSectionEditor({
     [dirty, onNavigate],
   )
 
-  const handlePreview = useCallback(() => {
-    if (!page?.id) {
-      toast.error('Save the page before previewing')
-      return
-    }
-    const path = `/pages/${page.id}/preview`
-    // New-tab preview: save first when there are unsaved edits so the preview
-    // (which reads the persisted document) reflects what's on screen.
-    if (onOpenPreview) {
-      onOpenPreview(path, dirty ? handleSaveDraft : undefined)
-    } else {
-      guardedNavigate(path)
-    }
-  }, [page, dirty, onOpenPreview, handleSaveDraft, guardedNavigate])
-
-  // "View on site": render the draft through the consumer's real public route
-  // via a signed preview token. The blank tab is opened synchronously inside
-  // the click (popup-safe), then pointed at the public URL once any unsaved
-  // draft is persisted and the token is minted.
-  const handleViewOnSite = useCallback(() => {
-    if (!page?.id || !page.slug) {
-      toast.error('Save the page before viewing it on the site')
-      return
-    }
-    // Published → jump straight to the LIVE page: no preview token, no forced
-    // save. This is the fast "see it live" path. Pending edits stay previewable
-    // via the eye (canvas) and globe (inline site preview).
-    if (page.status === 'PUBLISHED') {
-      window.open(
-        buildPublicUrl({
-          siteUrl: publicSiteUrl,
-          urlPrefix: '',
-          slug: page.slug,
-          path: page.path,
-        }),
-        '_blank',
-        'noopener',
-      )
-      return
-    }
-    // Not yet public (draft / scheduled / archived) → token-gated preview of
-    // the current draft through the real front-end.
-    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
-    }
-    void (async () => {
-      try {
-        if (dirty) {
-          const ok = await handleSaveDraft()
-          if (!ok) {
-            tab.close()
-            return
-          }
-        }
-        const { token } = await createPreviewToken('pages', page.id!)
-        const target = buildPublicPreviewUrl({
-          siteUrl: publicSiteUrl,
-          urlPrefix: '',
-          slug: page.slug,
-          path: page.path,
-          token,
-        })
-        try {
-          tab.opener = null
-        } catch {
-          /* same-origin guard */
-        }
-        tab.location.replace(target)
-      } catch (err) {
-        tab.close()
-        toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
+  const handleViewOnSite = useCallback(
+    (intent: ViewSiteIntent) => {
+      if (!page?.id || !page.slug) {
+        toast.error('Save the page before viewing it on the site')
+        return
       }
-    })()
-  }, [page, dirty, handleSaveDraft, publicSiteUrl])
+      void openPublicSiteTab({
+        intent,
+        siteUrl: publicSiteUrl,
+        collection: 'pages',
+        documentId: page.id,
+        slug: page.slug,
+        path: page.path,
+        dirty,
+        saveDraft: handleSaveDraft,
+      }).catch((err) => {
+        toast.error(err instanceof Error ? err.message : 'Failed to open the site')
+      })
+    },
+    [page, dirty, handleSaveDraft, publicSiteUrl],
+  )
+
+  const handleShare = useCallback(async () => {
+    if (!page?.id) return
+    if (dirty) {
+      const ok = await handleSaveDraft()
+      if (!ok) return
+    }
+    setShareOpen(true)
+  }, [page, dirty, handleSaveDraft])
 
   // ─── Render states ───────────────────────────────────────────────────
   if (loading) {
@@ -945,16 +871,13 @@ export function PageSectionEditor({
           publishDisabledReason={publishDisabledReason}
           viewport={viewport}
           onViewport={setViewport}
-          {...(sitePreview.active
-            ? // The site preview is an iframe of the real front end, not a
-              // scaled canvas — a zoom percentage there would be a lie.
-              {}
-            : { zoom, canvasScale, onZoom: setZoom })}
+          zoom={zoom}
+          canvasScale={canvasScale}
+          onZoom={setZoom}
           onBack={() => guardedNavigate('/pages')}
-          onPreview={handlePreview}
-          onViewOnSite={page.id ? handleViewOnSite : undefined}
-          sitePreview={sitePreview.active}
-          onToggleSitePreview={page.id && page.slug ? sitePreview.toggle : undefined}
+          onViewOnSite={page.id && page.slug ? handleViewOnSite : undefined}
+          onShare={page.id ? handleShare : undefined}
+          hasPublicSiteUrl={Boolean(publicSiteUrl)}
           historyOpen={historyOpen}
           onHistory={page.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
@@ -1105,46 +1028,30 @@ export function PageSectionEditor({
             </EditorRail>
 
             <div className="flex-1 overflow-hidden">
-              {sitePreview.active ? (
-                <SitePreviewFrame
-                  src={sitePreview.url}
-                  viewport={viewport}
-                  reloadKey={sitePreview.reloadKey}
-                  title={`Site preview: ${page.title || 'Untitled page'}`}
-                  selectedId={selectedId}
-                  sections={page.sections}
-                  suppressSectionsEcho={suppressSectionsEcho}
-                  onSelectSection={handleSelectSection}
-                  onCanvasEdit={handleCanvasEdit}
-                  onCanvasRequestMedia={handleCanvasRequestMedia}
-                />
-              ) : (
-                <EditorCanvas
-                  sections={canvasSections}
-                  selectedId={selectedId}
-                  breakpoint={viewport}
-                  zoom={zoom}
-                  onScaleChange={setCanvasScale}
-                  onCanvasElement={setCanvasEl}
-                  onSelect={handleSelectSection}
-                  structuralTypes={structuralTypes}
-                  sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
-                  reviewing={reviewing}
-                  changedSectionIds={reviewChangedIds}
-                  reviewBar={
-                    reviewVersion ? (
-                      <ReviewBar
-                        version={reviewVersion}
-                        changedCount={reviewChangedIds.size}
-                        onRestore={() => void handleRestoreVersion(reviewVersion)}
-                        onBackToCurrent={() => setVersionIndex(0)}
-                        restoring={restoring}
-                        canRestore={canRestoreVersion}
-                      />
-                    ) : null
-                  }
-                />
-              )}
+              <EditorCanvas
+                sections={canvasSections}
+                selectedId={selectedId}
+                breakpoint={viewport}
+                zoom={zoom}
+                onScaleChange={setCanvasScale}
+                onCanvasElement={setCanvasEl}
+                onSelect={handleSelectSection}
+                structuralTypes={structuralTypes}
+                reviewing={reviewing}
+                changedSectionIds={reviewChangedIds}
+                reviewBar={
+                  reviewVersion ? (
+                    <ReviewBar
+                      version={reviewVersion}
+                      changedCount={reviewChangedIds.size}
+                      onRestore={() => void handleRestoreVersion(reviewVersion)}
+                      onBackToCurrent={() => setVersionIndex(0)}
+                      restoring={restoring}
+                      canRestore={canRestoreVersion}
+                    />
+                  ) : null
+                }
+              />
             </div>
           </div>
         </ReflowContext.Provider>
@@ -1179,6 +1086,19 @@ export function PageSectionEditor({
         />
       )}
 
+      {page.id && (
+        <SharePreviewLinkDialog
+          collectionSlug="pages"
+          documentId={page.id}
+          documentSlug={page.slug}
+          documentPath={page.path}
+          siteUrl={publicSiteUrl}
+          urlPrefix=""
+          open={shareOpen}
+          onClose={() => setShareOpen(false)}
+        />
+      )}
+
       <ConfirmDialog
         open={leaveTarget !== null}
         onClose={() => setLeaveTarget(null)}

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

@@ -4,48 +4,12 @@ import { Puzzle } from 'lucide-react'
 
 /**
  * Banner shown above the canvas surface when the document contains section
- * types the canvas can only render as placeholders (custom / unmanaged
- * types), or when Site preview is available for accurate styling.
+ * types the canvas can only render as placeholders (custom / unmanaged types).
  */
-export function StructureNotice({
-  structuralTypes,
-  sitePreviewAvailable = false,
-}: {
-  structuralTypes: string[]
-  /** When true, nudge editors toward the Site preview toggle for WYSIWYG. */
-  sitePreviewAvailable?: boolean
-}) {
-  if (structuralTypes.length === 0 && !sitePreviewAvailable) return null
-
-  if (structuralTypes.length > 0) {
-    const count = structuralTypes.length
-    return (
-      <div
-        role="note"
-        className="border-border bg-card text-muted-foreground mx-auto mb-4 flex w-fit max-w-full items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
-      >
-        <Puzzle className="h-3.5 w-3.5 shrink-0" aria-hidden />
-        <span>
-          <span className="text-foreground font-medium">Structure view</span> — {count} custom
-          section type{count > 1 ? 's' : ''} shown as placeholders.
-          {sitePreviewAvailable ? (
-            <>
-              {' '}
-              Use <span className="text-foreground font-medium">Site preview</span> for accurate
-              styling.
-            </>
-          ) : (
-            <>
-              {' '}
-              Use <span className="text-foreground font-medium">View on site</span> for the real
-              design.
-            </>
-          )}
-        </span>
-      </div>
-    )
-  }
+export function StructureNotice({ structuralTypes }: { structuralTypes: string[] }) {
+  if (structuralTypes.length === 0) return null
 
+  const count = structuralTypes.length
   return (
     <div
       role="note"
@@ -53,8 +17,9 @@ export function StructureNotice({
     >
       <Puzzle className="h-3.5 w-3.5 shrink-0" aria-hidden />
       <span>
-        <span className="text-foreground font-medium">Structure preview</span> — use{' '}
-        <span className="text-foreground font-medium">Site preview</span> for accurate styling.
+        <span className="text-foreground font-medium">Structure view</span> — {count} custom section
+        type{count > 1 ? 's' : ''} shown as placeholders. Use{' '}
+        <span className="text-foreground font-medium">View site</span> for the real design.
       </span>
     </div>
   )