@prenta/admin 0.94.0 → 0.95.0

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

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  ChevronDown,
   Copy,
   Eye,
   EyeOff,
@@ -56,6 +57,15 @@ interface SectionsPanelProps {
   onDuplicate?: (id: string) => void
   onRequestDelete?: (id: string) => void
   onAdd?: () => void
+  /**
+   * Renders the selected section's editor as the body of its own row.
+   *
+   * A render prop rather than the form itself, so this list stays a list: it
+   * knows how to open a row and nothing about what a section's fields are.
+   * Omitted by the structural (template) list, which edits through the docked
+   * inspector instead.
+   */
+  renderEditor?: (section: PageSection) => React.ReactNode
 }
 
 /**
@@ -98,6 +108,7 @@ export function SectionsList({
   onDuplicate,
   onRequestDelete,
   onAdd,
+  renderEditor,
 }: SectionsPanelProps) {
   return (
     <>
@@ -121,17 +132,30 @@ export function SectionsList({
           />
         ) : (
           <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}
-              />
-            ))}
+            {sections.map((section) => {
+              const open = section.id === selectedId
+              return (
+                <li key={section.id}>
+                  <SectionRow
+                    section={section}
+                    selected={open}
+                    canEdit={canEdit}
+                    structural={false}
+                    expandable={renderEditor !== undefined}
+                    onSelect={onSelect}
+                    onToggleVisibility={onToggleVisibility}
+                  />
+                  {open && renderEditor && (
+                    <div
+                      id={`section-editor-${section.id}`}
+                      className="border-border overflow-hidden rounded-b-lg border border-t-0"
+                    >
+                      {renderEditor(section)}
+                    </div>
+                  )}
+                </li>
+              )
+            })}
           </ul>
         )}
       </div>
@@ -244,6 +268,8 @@ interface RowProps {
   /** Drag affordance, supplied only by the sortable wrapper. */
   dragHandle?: React.ReactNode
   dragging?: boolean
+  /** The row opens an editor beneath it, so it gets a disclosure control. */
+  expandable?: boolean
 }
 
 function SectionRow({
@@ -251,6 +277,7 @@ function SectionRow({
   selected,
   canEdit,
   structural,
+  expandable = false,
   onSelect,
   onToggleVisibility,
   onDuplicate,
@@ -266,15 +293,21 @@ function SectionRow({
 
   return (
     <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' : ''}`}
+      className={`group flex items-center gap-2 border px-2 py-2 ${
+        // Square off the bottom while the editor is open beneath, so row and
+        // form read as one object rather than two stacked cards.
+        selected && expandable ? 'rounded-t-lg' : 'rounded-lg'
+      } ${selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'} ${
+        dragging ? 'shadow-md' : ''
+      }`}
     >
       {dragHandle}
 
       <button
         type="button"
         onClick={() => onSelect(section.id)}
+        aria-expanded={expandable ? selected : undefined}
+        aria-controls={expandable && selected ? `section-editor-${section.id}` : undefined}
         className="flex min-w-0 flex-1 items-center gap-2 text-left"
       >
         <span className="bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md">
@@ -314,6 +347,29 @@ function SectionRow({
             )}
           </button>
 
+          {/* Disclosure. The row itself already toggles, but a visible chevron
+              is what says the row opens at all — without one the list looks
+              like a set of links to somewhere else, which is what it used to
+              be when the editor lived in a docked panel. */}
+          {expandable && (
+            <button
+              type="button"
+              onClick={() => onSelect(section.id)}
+              aria-expanded={selected}
+              aria-controls={selected ? `section-editor-${section.id}` : undefined}
+              aria-label={selected ? `Close ${section.name}` : `Edit ${section.name}`}
+              title="Edit content"
+              className="prenta-touch-target text-muted-foreground hover:text-foreground shrink-0 rounded p-1"
+            >
+              <ChevronDown
+                className={`h-4 w-4 transition-transform motion-reduce:transition-none ${
+                  selected ? 'rotate-180' : ''
+                }`}
+                aria-hidden
+              />
+            </button>
+          )}
+
           {structural && (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>

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>
+  )
+}