@prenta/admin 0.93.0 → 0.95.0

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

@@ -1,39 +1,13 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { Eye, EyeOff, GripVertical, Lock, 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 { useEffect } from 'react'
+import { Eye, EyeOff, Lock, X } from 'lucide-react'
 import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
-import { Toggle } from '../../components/ui/Toggle.js'
+import { ContentField, FIELD_INPUT, FIELD_LABEL } from './section-fields.js'
 import { RichTextField } from '../../fields/RichTextField.js'
-import { useReflowGuard } from '../../hooks/useReflowGuard.js'
-import { baselineFieldText } from '../../lib/reflow-baseline.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
-import { useReflowContext } from './reflow-context.js'
-import type { ResolvedRepeater, SectionSettings } from './section-types.js'
-import {
-  blankRepeaterRow,
-  getSectionType,
-  resolveRepeaterField,
-  type SectionFieldDef,
-} from './section-types.js'
+import type { SectionSettings } from './section-types.js'
+import { getSectionType } from './section-types.js'
 
 interface SectionInspectorProps {
   section: PageSection
@@ -48,10 +22,10 @@ interface SectionInspectorProps {
   onPostBodyChange?: (html: string) => void
 }
 
-const LABEL = 'text-foreground mb-1 block text-xs font-medium'
-const 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'
-const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+const LABEL = FIELD_LABEL
+const INPUT = FIELD_INPUT
+const INSPECTOR_SHELL =
+  'prenta-editor-inspector bg-card border-border flex h-full flex-col border-l'
 
 function InspectorHeaderActions({
   onClose,
@@ -329,521 +303,3 @@ export function SectionInspector({
     </ResizableAside>
   )
 }
-
-// ─── Field renderers ─────────────────────────────────────────────────
-
-/**
- * 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} />
-  )
-}
-
-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={LABEL} htmlFor={id}>
-          {field.label}
-        </label>
-        <select id={id} className={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={LABEL} htmlFor={id}>
-          {field.label}
-          {field.required && <span className="text-destructive ml-0.5">*</span>}
-        </label>
-        <textarea
-          id={id}
-          className={`${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={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={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={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={LABEL} htmlFor={id}>
-        {field.label}
-      </label>
-      <textarea
-        id={id}
-        className={`${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={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>
-  )
-}