@prenta/admin 1.1.0 → 1.2.0

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

@@ -27,13 +27,11 @@ import {
   savePageDraft,
   toggleSectionVisibility,
   updateSectionContent,
-  updateSectionContentAtPath,
   updateSectionMeta,
   validatePage,
   type EditorPage,
   type ValidationResult,
 } from '../../lib/page-editor-service.js'
-import { MediaPickerModal } from '../../components/MediaPickerModal.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'
@@ -61,7 +59,7 @@ import { SectionEditForm } from './SectionEditForm.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
 import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
-import { companionDimensionPaths, inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
+import { inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 
 interface PageSectionEditorProps {
   /** undefined when creating a new page (`/pages/new`) */
@@ -134,13 +132,6 @@ export function PageSectionEditor({
   const [selectedId, setSelectedId] = useState<string | null>(null)
   /** Canvas field click — focused after the inspector mounts for `selectedId`. */
   const [pendingFocusPath, setPendingFocusPath] = useState<string | null>(null)
-  /** Bump to skip the next `prenta-preview:sections` echo after a canvas text edit. */
-  const [suppressSectionsEcho, setSuppressSectionsEcho] = useState(0)
-  /** Canvas image Replace — opens MediaPickerModal for this field path. */
-  const [canvasMediaTarget, setCanvasMediaTarget] = useState<{
-    sectionId: string
-    fieldPath: string
-  } | null>(null)
   const [viewport, setViewport] = useState<ViewportId>(DEFAULT_VIEWPORT)
   const [zoom, setZoom] = useState<Zoom>('fit')
   /**
@@ -227,7 +218,7 @@ export function PageSectionEditor({
 
   const { canEdit, canPublish, canCreateRedirect } = useMemo(() => deriveCan(session), [session])
   const customRenderers = useAdminSectionRenderers()
-  const { siteUrl: publicSiteUrl } = usePublicSiteUrl(config?.seo?.siteUrl)
+  const { siteUrl: publicSiteUrl, matchesAdminOrigin } = usePublicSiteUrl(config?.seo?.siteUrl)
 
   // A misconfigured `pages` collection (missing the fields the editor
   // writes) would silently drop content on save — detect it up front.
@@ -716,39 +707,14 @@ export function PageSectionEditor({
       // rail has no close affordance at all — the chevron and the row both
       // re-select what is already selected and nothing happens.
       //
-      // Except when a fieldPath came with it: that is the site preview saying
-      // "the editor clicked THIS field", which must open and focus it. Making
-      // that toggle would close the form on the second click of a field the
-      // user is trying to edit.
+      // Except when a fieldPath came with it: a canvas field click must open
+      // and focus that input. Toggling would close the form on the second
+      // click of a field the user is trying to inspect.
       if (fieldPath) return id
       return current === id ? null : id
     })
   }, [])
 
-  // `effectiveCanEdit`, not `canEdit`: the site preview is a second editing
-  // surface, so a role check alone let it write through both the version-review
-  // lock and the builder-owned lock the rest of the editor honours.
-  const handleCanvasEdit = useCallback(
-    (edit: { sectionId: string; fieldPath: string; value: string }) => {
-      if (!effectiveCanEdit) return
-      setSuppressSectionsEcho((n) => n + 1)
-      mutateSections((s) =>
-        updateSectionContentAtPath(s, edit.sectionId, edit.fieldPath, edit.value),
-      )
-      setSelectedId(edit.sectionId)
-    },
-    [effectiveCanEdit, mutateSections],
-  )
-
-  const handleCanvasRequestMedia = useCallback(
-    (request: { sectionId: string; fieldPath: string }) => {
-      if (!effectiveCanEdit) return
-      setSelectedId(request.sectionId)
-      setCanvasMediaTarget(request)
-    },
-    [effectiveCanEdit],
-  )
-
   // After a canvas field click, focus the matching inspector input once painted.
   useEffect(() => {
     if (!pendingFocusPath || !selectedId) return
@@ -878,6 +844,7 @@ export function PageSectionEditor({
           onViewOnSite={page.id && page.slug ? handleViewOnSite : undefined}
           onShare={page.id ? handleShare : undefined}
           hasPublicSiteUrl={Boolean(publicSiteUrl)}
+          matchesAdminOrigin={matchesAdminOrigin}
           historyOpen={historyOpen}
           onHistory={page.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
@@ -1114,30 +1081,6 @@ export function PageSectionEditor({
         cancelLabel="Stay"
         destructive
       />
-
-      <MediaPickerModal
-        open={canvasMediaTarget !== null}
-        onClose={() => setCanvasMediaTarget(null)}
-        accept="image/*"
-        onSelectItem={(item) => {
-          if (!canvasMediaTarget) return
-          const { sectionId, fieldPath } = canvasMediaTarget
-          const { widthPath, heightPath } = companionDimensionPaths(fieldPath)
-          // Media Replace must echo sections so the canvas image updates.
-          mutateSections((s) => {
-            let next = updateSectionContentAtPath(s, sectionId, fieldPath, item.url)
-            if (typeof item.width === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, widthPath, item.width)
-            }
-            if (typeof item.height === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, heightPath, item.height)
-            }
-            return next
-          })
-          setCanvasMediaTarget(null)
-        }}
-        onSelect={() => setCanvasMediaTarget(null)}
-      />
     </ErrorBoundary>
   )
 }

package/src/views/page-editor/sections/SectionRenderer.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Puzzle } from 'lucide-react'
+import { fieldPathFromEventTarget } from '../../../lib/preview-bridge.js'
 import type { PageSection } from '../../../lib/page-editor-service.js'
 import { ErrorBoundary } from '../../../components/ErrorBoundary.js'
 import { getSectionType } from '../section-types.js'
@@ -163,7 +164,7 @@ export interface SectionRendererProps {
    *  renders hidden sections muted instead of removing them. */
   editable?: boolean
   selected?: boolean
-  onSelect?: (id: string) => void
+  onSelect?: (id: string, fieldPath?: string) => void
   /** Lets the canvas register the DOM node for scroll-to-section. */
   registerRef?: (id: string, el: HTMLElement | null) => void
   /** Live post data for post-oriented section renderers (pages omit this). */
@@ -234,7 +235,9 @@ export function SectionRenderer({
               ? 'outline-transparent hover:outline hover:outline-[color-mix(in_oklab,var(--acc)_40%,transparent)]'
               : 'outline-transparent'
       }`}
-      onClick={interactive ? () => onSelect?.(section.id) : undefined}
+      onClick={
+        interactive ? (e) => onSelect?.(section.id, fieldPathFromEventTarget(e.target)) : undefined
+      }
       // Selection is a convenience in the editor; the section list is the
       // primary, fully-accessible control surface, so this stays a region.
       aria-label={

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -17,7 +17,7 @@ interface PostEditorCanvasProps {
   selectedId: string | null
   viewport: ViewportId
   zoom?: Zoom
-  onSelect: (id: string) => void
+  onSelect: (id: string, fieldPath?: string) => void
   onScaleChange?: (scale: number) => void
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Add-section CTA on the empty canvas. Omitted by design-owned editors. */

package/src/views/post-editor/PostSectionEditor.tsx

@@ -20,14 +20,12 @@ import {
   savePostDraft,
   toggleSectionVisibility,
   updateSectionContent,
-  updateSectionContentAtPath,
   updateSectionMeta,
   validatePost,
   type EditorPost,
   type PostHeaderConfig,
   type ValidationResult,
 } from '../../lib/post-editor-service.js'
-import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SharePreviewLinkDialog } from '../../components/SharePreviewLinkDialog.js'
 import { defaultPostHeader } from '@prenta/core/page-sections'
 import { openPublicSiteTab } from '../../lib/open-public-site-tab.js'
@@ -47,7 +45,7 @@ import { buildEditorContentHtml, computeLiveSeoScore } from '../../lib/editor-se
 import { snapshotBaseline, type ReflowBaseline } from '../../lib/reflow-baseline.js'
 import { ReflowContext } from '../page-editor/reflow-context.js'
 import type { Zoom } from '../../lib/breakpoints.js'
-import { companionDimensionPaths, inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
+import { inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
 
@@ -108,13 +106,6 @@ export function PostSectionEditor({
   const [selectedId, setSelectedId] = useState<string | null>(null)
   /** Canvas field click — focused after the inspector mounts for `selectedId`. */
   const [pendingFocusPath, setPendingFocusPath] = useState<string | null>(null)
-  /** Bump to skip the next `prenta-preview:sections` echo after a canvas text edit. */
-  const [suppressSectionsEcho, setSuppressSectionsEcho] = useState(0)
-  /** Canvas image Replace — opens MediaPickerModal for this field path. */
-  const [canvasMediaTarget, setCanvasMediaTarget] = useState<{
-    sectionId: string
-    fieldPath: string
-  } | null>(null)
   const [viewport, setViewport] = useState<ViewportId>(DEFAULT_VIEWPORT)
   const [zoom, setZoom] = useState<Zoom>('fit')
   /** Scale the canvas measured — reported upward so the zoom chip shows a real %. */
@@ -158,7 +149,7 @@ export function PostSectionEditor({
 
   const { canEdit, canPublish } = useMemo(() => deriveCan(session), [session])
   const customRenderers = useAdminSectionRenderers()
-  const { siteUrl: publicSiteUrl } = usePublicSiteUrl(config?.seo?.siteUrl)
+  const { siteUrl: publicSiteUrl, matchesAdminOrigin } = usePublicSiteUrl(config?.seo?.siteUrl)
 
   const typeLabel = useMemo(() => {
     const col = config?.collections?.[postType]
@@ -485,32 +476,11 @@ export function PostSectionEditor({
     setRailTab('sections')
     setPendingFocusPath(fieldPath ?? null)
     // Toggles, because selection is now disclosure — see the note on the page
-    // editor's copy. A `fieldPath` means the site preview is pointing at a
-    // specific field, which must open rather than toggle.
+    // editor's copy. A `fieldPath` means a canvas field click, which must
+    // open rather than toggle.
     setSelectedId((current) => (fieldPath ? id : current === id ? null : id))
   }, [])
 
-  const handleCanvasEdit = useCallback(
-    (edit: { sectionId: string; fieldPath: string; value: string }) => {
-      if (!canEdit) return
-      setSuppressSectionsEcho((n) => n + 1)
-      mutateSections((s) =>
-        updateSectionContentAtPath(s, edit.sectionId, edit.fieldPath, edit.value),
-      )
-      setSelectedId(edit.sectionId)
-    },
-    [canEdit, mutateSections],
-  )
-
-  const handleCanvasRequestMedia = useCallback(
-    (request: { sectionId: string; fieldPath: string }) => {
-      if (!canEdit) return
-      setSelectedId(request.sectionId)
-      setCanvasMediaTarget(request)
-    },
-    [canEdit],
-  )
-
   // After a canvas field click, focus the matching inspector input once painted.
   useEffect(() => {
     if (!pendingFocusPath || !selectedId) return
@@ -634,6 +604,7 @@ export function PostSectionEditor({
           onViewOnSite={post.id && post.slug ? handleViewOnSite : undefined}
           onShare={post.id ? handleShare : undefined}
           hasPublicSiteUrl={Boolean(publicSiteUrl)}
+          matchesAdminOrigin={matchesAdminOrigin}
           onHistory={post.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setFieldsOpen(true)}
           onOpenSeo={handleToggleSeo}
@@ -817,29 +788,6 @@ export function PostSectionEditor({
         cancelLabel="Stay"
         destructive
       />
-
-      <MediaPickerModal
-        open={canvasMediaTarget !== null}
-        onClose={() => setCanvasMediaTarget(null)}
-        accept="image/*"
-        onSelectItem={(item) => {
-          if (!canvasMediaTarget) return
-          const { sectionId, fieldPath } = canvasMediaTarget
-          const { widthPath, heightPath } = companionDimensionPaths(fieldPath)
-          mutateSections((s) => {
-            let next = updateSectionContentAtPath(s, sectionId, fieldPath, item.url)
-            if (typeof item.width === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, widthPath, item.width)
-            }
-            if (typeof item.height === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, heightPath, item.height)
-            }
-            return next
-          })
-          setCanvasMediaTarget(null)
-        }}
-        onSelect={() => setCanvasMediaTarget(null)}
-      />
     </ErrorBoundary>
   )
 }

package/src/views/settings/SeoSettingsTab.tsx

@@ -13,6 +13,7 @@ import {
   Upload,
   X,
 } from 'lucide-react'
+import { siteUrlMatchesAdminOrigin } from '../../lib/preview-link.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SEOConfigPanel } from '../../components/SEOConfigPanel.js'
 import {
@@ -125,6 +126,26 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
 
       <SettingsValidationSummary issues={seo.issues} />
 
+      {!seo.siteUrl ? (
+        <div
+          role="status"
+          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+        >
+          <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+          Set the public site URL in Settings → General. View site and Share stay disabled until it
+          is set.
+        </div>
+      ) : siteUrlMatchesAdminOrigin(seo.siteUrl) ? (
+        <div
+          role="status"
+          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+        >
+          <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+          This origin is the admin, not the public site. Set the public site URL to the live apex —
+          View site and Share stay disabled while it matches this CMS host.
+        </div>
+      ) : null}
+
       <MetaDefaultsCard seo={seo} canEdit={canEdit} />
       <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />

package/src/views/settings/SiteInformationCard.tsx

@@ -2,6 +2,7 @@
 
 import { useId } from 'react'
 import { CheckCircle2 } from 'lucide-react'
+import { siteUrlMatchesAdminOrigin } from '../../lib/preview-link.js'
 import { SettingsCard, SettingsSourceBadge } from './components.js'
 import type {
   GeneralSettingsForm,
@@ -37,6 +38,7 @@ export function SiteInformationCard({
   const urlIssue = issues.find((i) => i.field === 'siteUrl')
   const urlEditable = sources.siteUrl?.editable !== false && canEdit
   const urlValid = !urlIssue && form.siteUrl.trim().length > 0
+  const urlIsAdminOrigin = siteUrlMatchesAdminOrigin(form.siteUrl)
 
   return (
     <SettingsCard title="Site Information" description="Your site's name, tagline, and public URL.">
@@ -99,6 +101,11 @@ export function SiteInformationCard({
             >
               {urlIssue.message}
             </p>
+          ) : urlIsAdminOrigin ? (
+            <p role="status" className="text-warning mt-1 text-sm">
+              This origin is the admin, not the public site. Set the public apex (Astro or the live
+              Next site), not this CMS host — View site and Share will stay disabled until you do.
+            </p>
           ) : urlValid ? (
             <p className="text-muted-foreground mt-1 flex items-center gap-1.5 text-sm">
               <CheckCircle2 size={13} className="text-success" aria-hidden="true" />