@prenta/admin 0.92.0 → 0.94.0

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

@@ -37,24 +37,161 @@ interface SectionsPanelProps {
   selectedId: string | null
   canEdit: boolean
   onSelect: (id: string) => void
-  onReorder: (orderedIds: string[]) => void
   onToggleVisibility: (id: string) => void
-  onDuplicate: (id: string) => void
-  onRequestDelete: (id: string) => void
-  onAdd: () => void
+  /**
+   * Permit structural editing — add, reorder, duplicate, delete.
+   *
+   * Defaults to FALSE. Pages and posts are design-owned: their section list
+   * comes from the template in code, and an editor changes copy, CTAs and
+   * imagery, never layout or order. Only the template editor — the surface
+   * that authors the template itself — opts in.
+   *
+   * The default is the restrictive one on purpose: a new consumer of this
+   * panel that forgets the flag gets the safe behaviour, not an editor that
+   * can quietly restructure a design-owned page.
+   */
+  structural?: boolean
+  /** Required when `structural`. */
+  onReorder?: (orderedIds: string[]) => void
+  onDuplicate?: (id: string) => void
+  onRequestDelete?: (id: string) => void
+  onAdd?: () => void
 }
 
-export function SectionsPanel({
+/**
+ * Standalone panel — its own aside, header, and width. Used by the post
+ * TEMPLATE editor, which has no rail. The page and post editors render
+ * `SectionsList` inside `EditorRail` instead, so the rail owns the chrome.
+ */
+export function SectionsPanel(props: SectionsPanelProps) {
+  return (
+    <aside
+      className="bg-card border-border flex h-full w-72 shrink-0 flex-col border-r"
+      aria-label="Page sections"
+    >
+      <div className="border-border flex items-center justify-between border-b px-6 py-4">
+        <div className="flex items-center gap-2">
+          <h2 className="text-foreground text-sm font-medium">Sections</h2>
+          <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums">
+            {props.sections.length}
+          </span>
+        </div>
+      </div>
+      <SectionsList {...props} />
+    </aside>
+  )
+}
+
+/**
+ * The section outline itself — list plus footer. Fills whatever container it
+ * is given, so it works both inside the standalone panel above and inside the
+ * editor rail's Sections tab.
+ */
+export function SectionsList({
   sections,
   selectedId,
   canEdit,
   onSelect,
-  onReorder,
   onToggleVisibility,
+  structural = false,
+  onReorder,
   onDuplicate,
   onRequestDelete,
   onAdd,
 }: SectionsPanelProps) {
+  return (
+    <>
+      <div className="min-h-0 flex-1 overflow-y-auto p-2">
+        {sections.length === 0 ? (
+          <p className="text-muted-foreground px-2 py-6 text-center text-sm">
+            {structural
+              ? 'No sections yet. Add one below to get started.'
+              : 'This template renders no sections.'}
+          </p>
+        ) : structural ? (
+          <StructuralList
+            sections={sections}
+            selectedId={selectedId}
+            canEdit={canEdit}
+            onSelect={onSelect}
+            onReorder={onReorder}
+            onToggleVisibility={onToggleVisibility}
+            onDuplicate={onDuplicate}
+            onRequestDelete={onRequestDelete}
+          />
+        ) : (
+          <ul className="space-y-1">
+            {sections.map((section) => (
+              <SectionRow
+                key={section.id}
+                section={section}
+                selected={section.id === selectedId}
+                canEdit={canEdit}
+                structural={false}
+                onSelect={onSelect}
+                onToggleVisibility={onToggleVisibility}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {structural ? (
+        <div className="border-border border-t p-3">
+          <button
+            type="button"
+            onClick={onAdd}
+            disabled={!canEdit}
+            className="border-border text-foreground hover:bg-accent flex w-full items-center justify-center gap-2 rounded-lg border border-dashed px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Plus className="h-4 w-4" aria-hidden />
+            Add Section
+          </button>
+        </div>
+      ) : (
+        <DesignOwnedNote />
+      )}
+    </>
+  )
+}
+
+/**
+ * Explains the absence of add / reorder / delete. Without it the panel reads
+ * as broken rather than deliberate — "where did Add Section go" is the first
+ * question a returning editor asks.
+ */
+function DesignOwnedNote() {
+  return (
+    <div className="border-border bg-background text-muted-foreground flex gap-2 border-t px-3 py-3 text-[11.5px] leading-normal">
+      <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+      <p>
+        <strong className="text-foreground font-semibold">Layout is design-owned.</strong> Sections
+        and styling are built in code — here you edit headings, body copy, CTAs, and imagery. Hide a
+        section to drop it from the live page.
+      </p>
+    </div>
+  )
+}
+
+function StructuralList({
+  sections,
+  selectedId,
+  canEdit,
+  onSelect,
+  onReorder,
+  onToggleVisibility,
+  onDuplicate,
+  onRequestDelete,
+}: {
+  sections: PageSection[]
+  selectedId: string | null
+  canEdit: boolean
+  onSelect: (id: string) => void
+  onReorder?: (orderedIds: string[]) => void
+  onToggleVisibility: (id: string) => void
+  onDuplicate?: (id: string) => void
+  onRequestDelete?: (id: string) => void
+}) {
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -70,171 +207,121 @@ export function SectionsPanel({
     const next = ids.slice()
     const [moved] = next.splice(from, 1)
     next.splice(to, 0, moved!)
-    onReorder(next)
+    onReorder?.(next)
   }
 
   return (
-    <aside
-      className="bg-card border-border flex h-full w-72 shrink-0 flex-col border-r"
-      aria-label="Page sections"
-    >
-      <div className="border-border flex items-center justify-between border-b px-6 py-4">
-        <div className="flex items-center gap-2">
-          <h2 className="text-foreground text-sm font-medium">Sections</h2>
-          <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums">
-            {sections.length}
-          </span>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto p-2">
-        {sections.length === 0 ? (
-          <p className="text-muted-foreground px-2 py-6 text-center text-sm">
-            No sections yet. Add one below to get started.
-          </p>
-        ) : (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-          >
-            <SortableContext
-              items={sections.map((s) => s.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <ul className="space-y-1">
-                {sections.map((section) => (
-                  <SortableSectionItem
-                    key={section.id}
-                    section={section}
-                    selected={section.id === selectedId}
-                    canEdit={canEdit}
-                    onSelect={onSelect}
-                    onToggleVisibility={onToggleVisibility}
-                    onDuplicate={onDuplicate}
-                    onRequestDelete={onRequestDelete}
-                  />
-                ))}
-              </ul>
-            </SortableContext>
-          </DndContext>
-        )}
-      </div>
-
-      <div className="border-border border-t p-3">
-        <button
-          type="button"
-          onClick={onAdd}
-          disabled={!canEdit}
-          className="border-border text-foreground hover:bg-accent flex w-full items-center justify-center gap-2 rounded-lg border border-dashed px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          <Plus className="h-4 w-4" aria-hidden />
-          Add Section
-        </button>
-      </div>
-    </aside>
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={sections.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+        <ul className="space-y-1">
+          {sections.map((section) => (
+            <SortableSectionItem
+              key={section.id}
+              section={section}
+              selected={section.id === selectedId}
+              canEdit={canEdit}
+              onSelect={onSelect}
+              onToggleVisibility={onToggleVisibility}
+              onDuplicate={onDuplicate}
+              onRequestDelete={onRequestDelete}
+            />
+          ))}
+        </ul>
+      </SortableContext>
+    </DndContext>
   )
 }
 
-interface SortableItemProps {
+interface RowProps {
   section: PageSection
   selected: boolean
   canEdit: boolean
+  structural: boolean
   onSelect: (id: string) => void
   onToggleVisibility: (id: string) => void
-  onDuplicate: (id: string) => void
-  onRequestDelete: (id: string) => void
+  onDuplicate?: (id: string) => void
+  onRequestDelete?: (id: string) => void
+  /** Drag affordance, supplied only by the sortable wrapper. */
+  dragHandle?: React.ReactNode
+  dragging?: boolean
 }
 
-function SortableSectionItem({
+function SectionRow({
   section,
   selected,
   canEdit,
+  structural,
   onSelect,
   onToggleVisibility,
   onDuplicate,
   onRequestDelete,
-}: SortableItemProps) {
-  // Unmanaged (externally-managed) sections are read-only: no drag, duplicate,
-  // delete, or visibility toggle — only selectable to view the read-only notice.
+  dragHandle,
+  dragging,
+}: RowProps) {
+  // Unmanaged (externally-managed) sections are read-only even in a structural
+  // panel: no drag, duplicate, delete, or visibility toggle — only selectable
+  // to view the read-only notice.
   const locked = section.unmanaged === true
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: section.id,
-    disabled: !canEdit || locked,
-  })
   const Icon = sectionIconFor(section.sectionType)
 
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    zIndex: isDragging ? 10 : undefined,
-  }
-
   return (
-    <li ref={setNodeRef} style={style}>
-      <div
-        className={`group flex items-center gap-2 rounded-lg border px-2 py-2 ${
-          selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'
-        } ${isDragging ? 'shadow-md' : ''}`}
+    <div
+      className={`group flex items-center gap-2 rounded-lg border px-2 py-2 ${
+        selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'
+      } ${dragging ? 'shadow-md' : ''}`}
+    >
+      {dragHandle}
+
+      <button
+        type="button"
+        onClick={() => onSelect(section.id)}
+        className="flex min-w-0 flex-1 items-center gap-2 text-left"
       >
-        <button
-          type="button"
-          className="text-muted-foreground hover:text-foreground shrink-0 cursor-grab touch-none disabled:cursor-not-allowed disabled:opacity-40"
-          aria-label={`Drag to reorder ${section.name}`}
-          disabled={!canEdit || locked}
-          {...attributes}
-          {...listeners}
+        <span className="bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md">
+          <Icon className="h-4 w-4" aria-hidden />
+        </span>
+        <span
+          className={`truncate text-sm ${section.visible ? 'text-foreground' : 'text-muted-foreground line-through'}`}
         >
-          <GripVertical className="h-4 w-4" aria-hidden />
-        </button>
+          {section.name}
+        </span>
+      </button>
 
-        <button
-          type="button"
-          onClick={() => onSelect(section.id)}
-          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+      {locked ? (
+        <span
+          className="text-muted-foreground shrink-0 p-1"
+          title="Managed outside the editor — read-only"
+          aria-label={`${section.name} is managed outside the editor and is read-only`}
         >
-          <span className="bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md">
-            <Icon className="h-4 w-4" aria-hidden />
-          </span>
-          <span
-            className={`truncate text-sm ${section.visible ? 'text-foreground' : 'text-muted-foreground line-through'}`}
-          >
-            {section.name}
-          </span>
-        </button>
-
-        {locked ? (
-          <span
-            className="text-muted-foreground shrink-0 p-1"
-            title="Managed outside the editor — read-only"
-            aria-label={`${section.name} is managed outside the editor and is read-only`}
+          <Lock className="h-4 w-4" aria-hidden />
+        </span>
+      ) : (
+        <>
+          {/* Visibility survives the design-owned lockdown: `visible` is the one
+              structural property the content model gives an editor. */}
+          <button
+            type="button"
+            onClick={() => onToggleVisibility(section.id)}
+            disabled={!canEdit}
+            aria-pressed={!section.visible}
+            aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
+            className="prenta-touch-target text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
           >
-            <Lock className="h-4 w-4" aria-hidden />
-          </span>
-        ) : (
-          <>
-            <button
-              type="button"
-              onClick={() => onToggleVisibility(section.id)}
-              disabled={!canEdit}
-              aria-pressed={!section.visible}
-              aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
-              className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
-            >
-              {section.visible ? (
-                <Eye className="h-4 w-4" aria-hidden />
-              ) : (
-                <EyeOff className="h-4 w-4" aria-hidden />
-              )}
-            </button>
+            {section.visible ? (
+              <Eye className="h-4 w-4" aria-hidden />
+            ) : (
+              <EyeOff className="h-4 w-4" aria-hidden />
+            )}
+          </button>
 
+          {structural && (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
                 <button
                   type="button"
                   disabled={!canEdit}
                   aria-label={`More actions for ${section.name}`}
-                  className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
+                  className="prenta-touch-target text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
                 >
                   <MoreVertical className="h-4 w-4" aria-hidden />
                 </button>
@@ -243,21 +330,75 @@ function SortableSectionItem({
                 <DropdownMenu.Content
                   align="end"
                   sideOffset={4}
-                  className="border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md"
+                  className="border-border bg-popover z-70 min-w-44 rounded-lg border p-1 shadow-md"
                 >
-                  <MenuItem onSelect={() => onDuplicate(section.id)} icon={Copy}>
+                  <MenuItem onSelect={() => onDuplicate?.(section.id)} icon={Copy}>
                     Duplicate
                   </MenuItem>
                   <DropdownMenu.Separator className="bg-border my-1 h-px" />
-                  <MenuItem onSelect={() => onRequestDelete(section.id)} icon={Trash2} destructive>
+                  <MenuItem
+                    onSelect={() => onRequestDelete?.(section.id)}
+                    icon={Trash2}
+                    destructive
+                  >
                     Delete
                   </MenuItem>
                 </DropdownMenu.Content>
               </DropdownMenu.Portal>
             </DropdownMenu.Root>
-          </>
-        )}
-      </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+function SortableSectionItem({
+  section,
+  selected,
+  canEdit,
+  onSelect,
+  onToggleVisibility,
+  onDuplicate,
+  onRequestDelete,
+}: Omit<RowProps, 'structural' | 'dragHandle' | 'dragging'>) {
+  const locked = section.unmanaged === true
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: section.id,
+    disabled: !canEdit || locked,
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
+  }
+
+  return (
+    <li ref={setNodeRef} style={style}>
+      <SectionRow
+        section={section}
+        selected={selected}
+        canEdit={canEdit}
+        structural
+        onSelect={onSelect}
+        onToggleVisibility={onToggleVisibility}
+        onDuplicate={onDuplicate}
+        onRequestDelete={onRequestDelete}
+        dragging={isDragging}
+        dragHandle={
+          <button
+            type="button"
+            className="text-muted-foreground hover:text-foreground shrink-0 cursor-grab touch-none disabled:cursor-not-allowed disabled:opacity-40"
+            aria-label={`Drag to reorder ${section.name}`}
+            disabled={!canEdit || locked}
+            {...attributes}
+            {...listeners}
+          >
+            <GripVertical className="h-4 w-4" aria-hidden />
+          </button>
+        }
+      />
     </li>
   )
 }

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Loader2 } from 'lucide-react'
+import { injectPreviewEditChrome } from '../../lib/canvas-edit-chrome.js'
 import {
   canvasOriginFromSrc,
   isPreviewBridgeMessage,
@@ -145,6 +146,8 @@ export function SitePreviewFrame({
       editing: true,
     }
     win.postMessage(msg, canvasOrigin)
+    // Same-origin only — cross-origin previews skip silently.
+    injectPreviewEditChrome(iframeRef.current)
   }, [canvasOrigin, loaded, canvasReady, reloadKey])
 
   // Admin → canvas: highlight the selected section.