@prenta/admin 0.93.0 → 0.95.0

package/src/views/page-editor/section-fields.tsx

@@ -0,0 +1,563 @@
+'use client'
+
+/**
+ * Schema-driven field renderers for a section's content.
+ *
+ * Extracted from `SectionInspector` so the inline editor in the rail and the
+ * template editor's inspector render fields through ONE implementation. The
+ * two surfaces disagree about chrome — an accordion body versus a docked panel
+ * — and about nothing else, and this codebase has twice paid for a second copy
+ * of a renderer drifting from the first (see the `paddingClass` and
+ * mirror-renderer entries in docs/page-builder-handoff-followups.md).
+ */
+import { GripVertical, Plus, X } from 'lucide-react'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { MediaBlock } from '../../components/MediaBlock.js'
+import { ReflowMeter } from '../../components/ReflowMeter.js'
+import { Toggle } from '../../components/ui/Toggle.js'
+import { useReflowGuard } from '../../hooks/useReflowGuard.js'
+import { baselineFieldText } from '../../lib/reflow-baseline.js'
+import { useReflowContext } from './reflow-context.js'
+import type { ResolvedRepeater } from './section-types.js'
+import { blankRepeaterRow, resolveRepeaterField, type SectionFieldDef } from './section-types.js'
+
+/** Shared control classes, so every field surface looks identical. */
+export const FIELD_LABEL = 'text-foreground mb-1 block text-xs font-medium'
+export const FIELD_INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+/**
+ * Field types the reflow guard measures.
+ *
+ * Text that wraps, and nothing else. A `select` has a fixed set of values the
+ * design already accounts for; a `boolean` has no text; `media` wraps nothing.
+ *
+ * `richText` is excluded deliberately. The probe establishes a baseline by
+ * writing the published string into the cloned element, which for rich text
+ * would mean injecting stored markup into the DOM — and the whole body is one
+ * marker, so a line count across several paragraphs answers no question an
+ * editor is asking.
+ */
+const GUARDED_FIELD_TYPES = new Set(['text', 'textarea', 'url'])
+
+/**
+ * Attaches the reflow readout under a field.
+ *
+ * Renders nothing at all when the guard has no rows — the section may be drawn
+ * by a consumer's renderer that carries no `data-cms-field` markers, and an
+ * empty row of dots would read as "measured, all fine" rather than "not
+ * measured".
+ */
+function FieldReflow({ fieldPath, value }: { fieldPath: string; value: string }) {
+  const ctx = useReflowContext()
+  const guard = useReflowGuard({
+    canvas: ctx.canvas,
+    sectionId: ctx.sectionId ?? '',
+    fieldPath,
+    value,
+    baseline: baselineFieldText(ctx.baseline, ctx.sectionId ?? '', fieldPath),
+    enabled: Boolean(ctx.canvas && ctx.sectionId),
+  })
+
+  if (guard.rows.length === 0) return null
+  return (
+    <ReflowMeter guard={guard} length={value.length} device={ctx.device} onProof={ctx.onProof} />
+  )
+}
+
+export function ContentField({
+  field,
+  value,
+  onChange,
+  onPatch,
+  id: idProp,
+  fieldPath,
+}: {
+  field: SectionFieldDef
+  value: unknown
+  onChange: (v: unknown) => void
+  /**
+   * Optional multi-key patch sink — lets media fields persist companion
+   * dimension keys (width/height) atomically with the URL.
+   */
+  onPatch?: (patch: Record<string, unknown>) => void
+  /** Explicit input id (repeater rows pass a row-scoped id to stay unique). */
+  id?: string
+  /**
+   * Dotted `data-cms-field` path for the reflow guard. Differs from `field.key`
+   * inside a repeater, where the marker is `stats.0.label`. Defaults to the
+   * key, which is right for every top-level field.
+   */
+  fieldPath?: string
+}) {
+  const id = idProp ?? `insp-field-${field.key}`
+  const path = fieldPath ?? field.key
+  const text = typeof value === 'string' ? value : ''
+  const guarded = GUARDED_FIELD_TYPES.has(field.type)
+
+  const repeater = resolveRepeaterField(field)
+  if (repeater) {
+    return (
+      <RepeaterField
+        fieldKey={field.key}
+        label={field.label}
+        repeater={repeater}
+        value={value}
+        onChange={onChange}
+      />
+    )
+  }
+
+  if (field.type === 'boolean') {
+    return <BooleanField id={id} field={field} value={value === true} onChange={onChange} />
+  }
+
+  if (field.type === 'relationship') {
+    return <RelationshipField id={id} field={field} value={value} onChange={onChange} />
+  }
+
+  if (field.type === 'media') {
+    return <MediaField id={id} field={field} value={text} onChange={onChange} onPatch={onPatch} />
+  }
+
+  if (field.type === 'select') {
+    return (
+      <div>
+        <label className={FIELD_LABEL} htmlFor={id}>
+          {field.label}
+        </label>
+        <select
+          id={id}
+          className={FIELD_INPUT}
+          value={text}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {field.options?.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    )
+  }
+
+  if (field.type === 'textarea' || field.type === 'richText') {
+    return (
+      <div>
+        <label className={FIELD_LABEL} htmlFor={id}>
+          {field.label}
+          {field.required && <span className="text-destructive ml-0.5">*</span>}
+        </label>
+        <textarea
+          id={id}
+          className={`${FIELD_INPUT} resize-y ${field.type === 'richText' ? 'min-h-[140px]' : 'min-h-[72px]'}`}
+          value={text}
+          placeholder={field.placeholder}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {guarded && <FieldReflow fieldPath={path} value={text} />}
+        {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <label className={FIELD_LABEL} htmlFor={id}>
+        {field.label}
+        {field.required && <span className="text-destructive ml-0.5">*</span>}
+      </label>
+      <input
+        id={id}
+        type={field.type === 'url' ? 'url' : 'text'}
+        className={FIELD_INPUT}
+        value={text}
+        placeholder={field.placeholder}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      {guarded && <FieldReflow fieldPath={path} value={text} />}
+      {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
+    </div>
+  )
+}
+
+/**
+ * Companion content keys that hold an image field's intrinsic dimensions.
+ * Picking from the media library persists width/height alongside the URL so the
+ * public renderer can use the CLS-safe `next/image` path without waiting on
+ * read-time `/resolve` enrichment. Mirrors the keys the section renderers read:
+ *   `imageUrl` → `imageWidth` / `imageHeight`; `url` (gallery row) → `width` / `height`.
+ */
+export function companionDimensionKeys(fieldKey: string): { width: string; height: string } {
+  if (fieldKey === 'url') return { width: 'width', height: 'height' }
+  if (fieldKey.endsWith('Url')) {
+    const base = fieldKey.slice(0, -'Url'.length)
+    return { width: `${base}Width`, height: `${base}Height` }
+  }
+  return { width: `${fieldKey}Width`, height: `${fieldKey}Height` }
+}
+
+function MediaField({
+  id,
+  field,
+  value,
+  onChange,
+  onPatch,
+}: {
+  id: string
+  field: SectionFieldDef
+  value: string
+  onChange: (v: unknown) => void
+  /**
+   * When provided, picking from the library applies a multi-key patch (URL +
+   * intrinsic width/height) in one update. Falls back to `onChange` (URL only)
+   * when no patch sink is wired.
+   */
+  onPatch?: (patch: Record<string, unknown>) => void
+}) {
+  return (
+    <div>
+      {/* Not `htmlFor` — the block is a composite of buttons, not a single
+          labellable control. The label names the group; each control inside
+          carries its own accessible name. */}
+      <span className={FIELD_LABEL} id={`${id}-label`}>
+        {field.label}
+      </span>
+      <MediaBlock
+        value={value}
+        label={field.label}
+        onChange={(url, item) => {
+          if (!onPatch) {
+            onChange(url)
+            return
+          }
+          // Persist the intrinsic dimensions alongside the URL so the public
+          // renderer can use the CLS-safe path without a read-time lookup.
+          const { width: wKey, height: hKey } = companionDimensionKeys(field.key)
+          const patch: Record<string, unknown> = { [field.key]: url }
+          if (typeof item?.width === 'number') patch[wKey] = item.width
+          if (typeof item?.height === 'number') patch[hKey] = item.height
+          // Clearing the slot clears the dimensions with it — leaving them
+          // behind would size the next image by the previous one's box.
+          if (!url) {
+            patch[wKey] = undefined
+            patch[hKey] = undefined
+          }
+          onPatch(patch)
+        }}
+      />
+      {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
+    </div>
+  )
+}
+
+function BooleanField({
+  id,
+  field,
+  value,
+  onChange,
+}: {
+  id: string
+  field: SectionFieldDef
+  value: boolean
+  onChange: (v: unknown) => void
+}) {
+  return (
+    <div>
+      <div className="border-border text-foreground flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm">
+        <span>{field.label}</span>
+        <Toggle
+          id={id}
+          checked={value}
+          onCheckedChange={(v) => onChange(v)}
+          aria-label={field.label}
+        />
+      </div>
+      {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
+    </div>
+  )
+}
+
+function RelationshipField({
+  id,
+  field,
+  value,
+  onChange,
+}: {
+  id: string
+  field: SectionFieldDef
+  value: unknown
+  onChange: (v: unknown) => void
+}) {
+  // Stored as an array of slugs; edited as a newline/comma-separated list
+  // so authors can hand-pick referenced documents without a live picker.
+  const slugs = Array.isArray(value) ? (value as string[]) : []
+  const text = slugs.join('\n')
+  return (
+    <div>
+      <label className={FIELD_LABEL} htmlFor={id}>
+        {field.label}
+      </label>
+      <textarea
+        id={id}
+        className={`${FIELD_INPUT} min-h-[72px] resize-y`}
+        placeholder="one-slug-per-line"
+        value={text}
+        onChange={(e) =>
+          onChange(
+            e.target.value
+              .split(/[\n,]/)
+              .map((s) => s.trim())
+              .filter(Boolean),
+          )
+        }
+      />
+      {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
+    </div>
+  )
+}
+
+type RowRecord = Record<string, unknown>
+
+// Field types whose values are short enough to scan in a row header. Long-form
+// fields (textarea, richText) and non-text values (media, url) stay out.
+const SUMMARY_FIELD_TYPES = new Set(['text', 'select'])
+const SUMMARY_MAX_LENGTH = 60
+
+/**
+ * Derive a scannable one-line summary for a repeater row from its first two
+ * short text values — e.g. a pricing row renders as "Pro · $79/mo" instead of
+ * "Plan 2". Returns `null` when the row has no usable values yet, so the
+ * caller falls back to the positional "Plan 2" label.
+ */
+export function repeaterRowSummary(fields: SectionFieldDef[], row: RowRecord): string | null {
+  const parts: string[] = []
+  for (const field of fields) {
+    if (parts.length >= 2) break
+    if (!SUMMARY_FIELD_TYPES.has(field.type)) continue
+    const raw = row[field.key]
+    const value = typeof raw === 'string' ? raw.trim() : typeof raw === 'number' ? String(raw) : ''
+    if (!value) continue
+    if (field.type === 'select') {
+      const option = field.options?.find((o) => o.value === value)
+      parts.push(option?.label ?? value)
+    } else {
+      parts.push(value)
+    }
+  }
+  if (parts.length === 0) return null
+  const joined = parts.join(' · ')
+  return joined.length > SUMMARY_MAX_LENGTH
+    ? `${joined.slice(0, SUMMARY_MAX_LENGTH - 1).trimEnd()}…`
+    : joined
+}
+
+/**
+ * Generic repeater editor: an orderable list of rows, each row a small form of
+ * the repeater's sub-fields. Drives the generic `repeater` field type and the
+ * `stats` / `gallery` shorthands (resolved upstream to the same row model), so
+ * there's one editor for every structured-array field.
+ *
+ * Rows are stored as a plain array on `content[fieldKey]`. Drag/reorder uses an
+ * index-derived row id (`row-0`, `row-1`, …); since every edit commits a fresh
+ * array this stays consistent and matches the prior stats/gallery behavior.
+ */
+function RepeaterField({
+  fieldKey,
+  label,
+  repeater,
+  value,
+  onChange,
+}: {
+  fieldKey: string
+  label: string
+  repeater: ResolvedRepeater
+  value: unknown
+  onChange: (v: unknown) => void
+}) {
+  const rows: RowRecord[] = Array.isArray(value) ? (value as RowRecord[]) : []
+  const atCap = typeof repeater.maxRows === 'number' && rows.length >= repeater.maxRows
+  const rowKey = (i: number): string => `row-${i}`
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+
+  function commit(next: RowRecord[]) {
+    onChange(next)
+  }
+  function update(index: number, patch: RowRecord) {
+    commit(rows.map((r, i) => (i === index ? { ...r, ...patch } : r)))
+  }
+  function remove(index: number) {
+    commit(rows.filter((_, i) => i !== index))
+  }
+  function add() {
+    if (atCap) return
+    commit([...rows, blankRepeaterRow(repeater.fields)])
+  }
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    // Map the dnd id (index-derived rowKey) back to array positions.
+    const ids = rows.map((_, i) => rowKey(i))
+    const from = ids.indexOf(String(active.id))
+    const to = ids.indexOf(String(over.id))
+    if (from === -1 || to === -1) return
+    const next = rows.slice()
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved!)
+    commit(next)
+  }
+
+  const lower = repeater.rowLabel.toLowerCase()
+
+  return (
+    <div>
+      <span className={FIELD_LABEL}>{label}</span>
+      {rows.length === 0 ? (
+        <p className="border-border text-muted-foreground mb-2 rounded-md border border-dashed px-2 py-3 text-center text-xs">
+          No {lower}s yet.
+        </p>
+      ) : (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext
+            items={rows.map((_, i) => rowKey(i))}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-3">
+              {rows.map((row, i) => (
+                <SortableRepeaterRow
+                  key={rowKey(i)}
+                  id={rowKey(i)}
+                  index={i}
+                  fieldKey={fieldKey}
+                  rowLabel={repeater.rowLabel}
+                  fields={repeater.fields}
+                  row={row}
+                  reorderable={rows.length > 1}
+                  onPatch={(patch) => update(i, patch)}
+                  onRemove={() => remove(i)}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      )}
+      <button
+        type="button"
+        onClick={add}
+        disabled={atCap}
+        className="border-border text-foreground hover:bg-accent mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-2 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <Plus className="h-3.5 w-3.5" aria-hidden />
+        Add {lower}
+      </button>
+      {atCap && (
+        <p className="text-muted-foreground mt-1 text-xs">Maximum of {repeater.maxRows} reached.</p>
+      )}
+    </div>
+  )
+}
+
+function SortableRepeaterRow({
+  id,
+  index,
+  fieldKey,
+  rowLabel,
+  fields,
+  row,
+  reorderable,
+  onPatch,
+  onRemove,
+}: {
+  id: string
+  index: number
+  fieldKey: string
+  rowLabel: string
+  fields: SectionFieldDef[]
+  row: RowRecord
+  reorderable: boolean
+  onPatch: (patch: RowRecord) => void
+  onRemove: () => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    disabled: !reorderable,
+  })
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
+  }
+
+  const summary = repeaterRowSummary(fields, row)
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`border-border rounded-md border p-2 ${isDragging ? 'bg-card shadow-md' : ''}`}
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <span className="flex items-center gap-1">
+          {reorderable && (
+            <button
+              type="button"
+              aria-label={`Drag to reorder ${rowLabel} ${index + 1}`}
+              className="text-muted-foreground hover:text-foreground cursor-grab touch-none"
+              {...attributes}
+              {...listeners}
+            >
+              <GripVertical className="h-3.5 w-3.5" aria-hidden />
+            </button>
+          )}
+          <span
+            className="text-muted-foreground max-w-[200px] truncate text-xs"
+            title={summary ? `${rowLabel} ${index + 1}: ${summary}` : undefined}
+          >
+            {summary ?? `${rowLabel} ${index + 1}`}
+          </span>
+        </span>
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${rowLabel.toLowerCase()} ${index + 1}`}
+          className="text-muted-foreground hover:text-destructive rounded p-0.5"
+        >
+          <X className="h-3.5 w-3.5" aria-hidden />
+        </button>
+      </div>
+      <div className="space-y-2">
+        {fields.map((sub) => (
+          <ContentField
+            key={sub.key}
+            id={`insp-field-${fieldKey}-${index}-${sub.key}`}
+            fieldPath={`${fieldKey}.${index}.${sub.key}`}
+            field={sub}
+            value={row[sub.key]}
+            onChange={(v) => onPatch({ [sub.key]: v })}
+            onPatch={(patch) => onPatch(patch)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -42,7 +42,7 @@ export function ArticleBodySection({
         <p className="text-muted-foreground text-base leading-relaxed italic">
           {source === 'field'
             ? "This will show the post's Body content."
-            : 'Add body copy in the inspector.'}
+            : 'Add body copy in the section list.'}
         </p>
       )}
     </div>

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

@@ -164,6 +164,18 @@ export interface SectionRendererProps {
   registerRef?: (id: string, el: HTMLElement | null) => void
   /** Live post data for post-oriented section renderers (pages omit this). */
   context?: PostRenderContext
+  /**
+   * Reviewing a past version: the canvas is a read-only render of a snapshot.
+   *
+   * A SEPARATE flag from `editable`, not a second use of it. Both modes
+   * suppress click-to-select and the hover outline, so it is tempting to fold
+   * them together — but review mode has to keep showing a label on the
+   * sections that changed, which is the entire reason it exists. One shared
+   * suppression rule hides exactly the thing the mode is for.
+   */
+  reviewing?: boolean
+  /** This section differs from the version immediately before the one shown. */
+  changed?: boolean
 }
 
 /**
@@ -179,41 +191,70 @@ export function SectionRenderer({
   onSelect,
   registerRef,
   context,
+  reviewing = false,
+  changed = false,
 }: SectionRendererProps) {
   const settings = section.settings ?? {}
-  const hidden = editable && !section.visible
+  // A snapshot's hidden sections stay muted: the page is still being shown as
+  // the editor's own view of it, and a hidden section that rendered solid here
+  // would misreport what was live at that moment.
+  const chromed = editable || reviewing
+  const hidden = chromed && !section.visible
+  // Review mode is read-only. Click-to-select would edit the CURRENT page
+  // while the canvas shows a past one.
+  const interactive = editable && !reviewing
 
   return (
     <section
       ref={(el) => registerRef?.(section.id, el)}
       data-section-id={section.id}
-      data-editable={editable ? 'true' : undefined}
-      data-selected={selected ? 'true' : undefined}
+      data-editable={interactive ? 'true' : undefined}
+      data-selected={interactive && selected ? 'true' : undefined}
+      data-reviewing={reviewing ? 'true' : undefined}
+      data-changed={reviewing && changed ? 'true' : undefined}
       id={settings.anchorId || undefined}
       className={`relative ${backgroundClass(settings)} ${paddingClass(settings)} ${
         settings.cssClass ?? ''
       } ${hidden ? 'opacity-40' : ''} ${
-        editable
+        interactive
           ? 'cursor-pointer outline-2 -outline-offset-2 motion-safe:transition-[outline-color] motion-safe:duration-150'
           : ''
       } ${
-        selected
-          ? 'outline outline-violet-500'
-          : editable
-            ? 'outline-transparent hover:outline hover:outline-[color-mix(in_oklab,var(--acc)_40%,transparent)]'
+        reviewing
+          ? changed
+            ? 'outline-warning outline-2 -outline-offset-2 outline-dashed'
             : 'outline-transparent'
+          : selected
+            ? 'outline outline-violet-500'
+            : interactive
+              ? 'outline-transparent hover:outline hover:outline-[color-mix(in_oklab,var(--acc)_40%,transparent)]'
+              : 'outline-transparent'
       }`}
-      onClick={editable ? () => onSelect?.(section.id) : undefined}
+      onClick={interactive ? () => onSelect?.(section.id) : 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={editable ? `${section.name} section` : undefined}
+      aria-label={
+        reviewing && changed
+          ? `${section.name} section — changed in this version`
+          : interactive
+            ? `${section.name} section`
+            : undefined
+      }
     >
-      {editable && selected && (
+      {interactive && selected && (
         <span className="bg-brand pointer-events-none absolute top-0 left-0 z-10 rounded-br-md px-2 py-0.5 text-xs font-medium text-white">
           {section.name}
         </span>
       )}
-      {editable && hidden && (
+      {/* Persistent, not hover-revealed: while reviewing, this label IS the
+          finding. Unchanged sections get no label at all, so the marked ones
+          are legible at a glance down a scaled-down page. */}
+      {reviewing && changed && (
+        <span className="bg-warning text-warning-foreground pointer-events-none absolute top-0 left-0 z-10 rounded-br-md px-2 py-0.5 text-xs font-medium">
+          {section.name} — changed
+        </span>
+      )}
+      {chromed && hidden && (
         <span className="bg-foreground pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md px-2 py-0.5 text-xs font-medium text-white">
           Hidden
         </span>

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

@@ -129,7 +129,7 @@ function EmptyBody({ onAddSection }: { onAddSection?: () => void }) {
       </span>
       <p className="text-muted-foreground text-sm">
         {onAddSection
-          ? 'The header is set by the template. Add body sections to build out this post. Hover sections for a light outline, click to select, and edit in the inspector — or use Site preview to click text and images in place.'
+          ? 'The header is set by the template. Add body sections to build out this post. Hover sections for a light outline, click to open its editor in the section list — or use Site preview to click text and images in place.'
           : 'This post’s template renders no body sections. Layout is design-owned — sections come from the template in code. Pick a different template in Post settings, or edit the template itself.'}
       </p>
       {onAddSection && (