@actuate-media/cms-admin 0.38.1 → 0.40.0

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

@@ -1,11 +1,32 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Eye, EyeOff, Plus, X } from 'lucide-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 { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
-import type { SectionSettings } from './section-types.js'
-import { getSectionType, type SectionFieldDef } from './section-types.js'
+import type { ResolvedRepeater, SectionSettings } from './section-types.js'
+import {
+  blankRepeaterRow,
+  getSectionType,
+  resolveRepeaterField,
+  type SectionFieldDef,
+} from './section-types.js'
 
 interface SectionInspectorProps {
   section: PageSection
@@ -41,6 +62,53 @@ export function SectionInspector({
     return () => document.removeEventListener('keydown', onKey)
   }, [onClose])
 
+  // Unmanaged sections (no registered type) are read-only: show why instead of
+  // editable controls, so the externally-managed content is never altered here.
+  if (section.unmanaged) {
+    return (
+      <aside
+        role="dialog"
+        aria-label={`${section.name} (read-only)`}
+        className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+      >
+        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="min-w-0">
+            <h2 className="text-foreground truncate text-sm font-medium">{section.name}</h2>
+            <p className="text-muted-foreground text-xs">Managed outside the editor</p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close inspector"
+            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </button>
+        </div>
+        <div className="flex-1 space-y-3 overflow-y-auto p-4">
+          <div className="border-border bg-muted text-muted-foreground space-y-2 rounded-md border p-3 text-sm">
+            <p className="text-foreground flex items-center gap-2 font-medium">
+              <Lock size={14} aria-hidden /> Read-only section
+            </p>
+            <p>
+              The section type{' '}
+              <code className="bg-background rounded px-1 py-0.5 text-xs">
+                {section.sectionType}
+              </code>{' '}
+              isn&apos;t registered in this CMS, so it can&apos;t be edited here. It is preserved
+              exactly as-is on every save.
+            </p>
+            <p>
+              Edit it in your seed script or code, or register it via{' '}
+              <code className="bg-background rounded px-1 py-0.5 text-xs">sections.types</code> in
+              your config to make it editable.
+            </p>
+          </div>
+        </div>
+      </aside>
+    )
+  }
+
   return (
     <aside
       role="dialog"
@@ -234,20 +302,28 @@ function ContentField({
   field,
   value,
   onChange,
+  id: idProp,
 }: {
   field: SectionFieldDef
   value: unknown
   onChange: (v: unknown) => void
+  /** Explicit input id (repeater rows pass a row-scoped id to stay unique). */
+  id?: string
 }) {
-  const id = `insp-field-${field.key}`
+  const id = idProp ?? `insp-field-${field.key}`
   const text = typeof value === 'string' ? value : ''
 
-  if (field.type === 'stats') {
-    return <StatsField label={field.label} value={value} onChange={onChange} />
-  }
-
-  if (field.type === 'gallery') {
-    return <GalleryField label={field.label} value={value} onChange={onChange} />
+  const repeater = resolveRepeaterField(field)
+  if (repeater) {
+    return (
+      <RepeaterField
+        fieldKey={field.key}
+        label={field.label}
+        repeater={repeater}
+        value={value}
+        onChange={onChange}
+      />
+    )
   }
 
   if (field.type === 'boolean') {
@@ -447,153 +523,191 @@ function RelationshipField({
   )
 }
 
-interface ImageRow {
-  url?: string
-  alt?: string
-  caption?: string
-}
-
-function GalleryField({
+type RowRecord = Record<string, unknown>
+
+/**
+ * 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: ImageRow[] = Array.isArray(value) ? (value as ImageRow[]) : []
+  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 update(index: number, patch: Partial<ImageRow>) {
-    onChange(rows.map((r, i) => (i === index ? { ...r, ...patch } : r)))
+  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) {
-    onChange(rows.filter((_, i) => i !== index))
+    commit(rows.filter((_, i) => i !== index))
   }
   function add() {
-    onChange([...rows, { url: '', alt: '', caption: '' }])
+    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>
-      <div className="space-y-3">
-        {rows.map((row, i) => (
-          <div key={i} className="border-border rounded-md border p-2">
-            <div className="mb-2 flex items-center justify-between">
-              <span className="text-muted-foreground text-xs">Image {i + 1}</span>
-              <button
-                type="button"
-                onClick={() => remove(i)}
-                aria-label={`Remove image ${i + 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">
-              <input
-                className={INPUT}
-                placeholder="Image URL (https://…)"
-                value={row.url ?? ''}
-                onChange={(e) => update(i, { url: e.target.value })}
-                aria-label={`Image ${i + 1} URL`}
-              />
-              <input
-                className={INPUT}
-                placeholder="Alt text (for accessibility)"
-                value={row.alt ?? ''}
-                onChange={(e) => update(i, { alt: e.target.value })}
-                aria-label={`Image ${i + 1} alt text`}
-              />
+      {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>
-          </div>
-        ))}
-      </div>
+          </SortableContext>
+        </DndContext>
+      )}
       <button
         type="button"
         onClick={add}
-        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={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 image
+        Add {lower}
       </button>
+      {atCap && (
+        <p className="text-muted-foreground mt-1 text-xs">Maximum of {repeater.maxRows} reached.</p>
+      )}
     </div>
   )
 }
 
-interface StatRow {
-  value?: string
-  label?: string
-  description?: string
-}
-
-function StatsField({
-  label,
-  value,
-  onChange,
+function SortableRepeaterRow({
+  id,
+  index,
+  fieldKey,
+  rowLabel,
+  fields,
+  row,
+  reorderable,
+  onPatch,
+  onRemove,
 }: {
-  label: string
-  value: unknown
-  onChange: (v: unknown) => void
+  id: string
+  index: number
+  fieldKey: string
+  rowLabel: string
+  fields: SectionFieldDef[]
+  row: RowRecord
+  reorderable: boolean
+  onPatch: (patch: RowRecord) => void
+  onRemove: () => void
 }) {
-  const rows: StatRow[] = Array.isArray(value) ? (value as StatRow[]) : []
-
-  function update(index: number, patch: Partial<StatRow>) {
-    const next = rows.map((r, i) => (i === index ? { ...r, ...patch } : r))
-    onChange(next)
-  }
-  function remove(index: number) {
-    onChange(rows.filter((_, i) => i !== index))
-  }
-  function add() {
-    onChange([...rows, { value: '', label: '', description: '' }])
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    disabled: !reorderable,
+  })
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
   }
 
   return (
-    <div>
-      <span className={LABEL}>{label}</span>
-      <div className="space-y-3">
-        {rows.map((row, i) => (
-          <div key={i} className="border-border rounded-md border p-2">
-            <div className="mb-2 flex items-center justify-between">
-              <span className="text-muted-foreground text-xs">Stat {i + 1}</span>
-              <button
-                type="button"
-                onClick={() => remove(i)}
-                aria-label={`Remove stat ${i + 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">
-              <input
-                className={INPUT}
-                placeholder="Value (e.g. 99.99%)"
-                value={row.value ?? ''}
-                onChange={(e) => update(i, { value: e.target.value })}
-                aria-label={`Stat ${i + 1} value`}
-              />
-              <input
-                className={INPUT}
-                placeholder="Label (e.g. Uptime)"
-                value={row.label ?? ''}
-                onChange={(e) => update(i, { label: e.target.value })}
-                aria-label={`Stat ${i + 1} label`}
-              />
-            </div>
-          </div>
+    <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 text-xs">
+            {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-${fieldKey}-${index}-${sub.key}`}
+            field={sub}
+            value={row[sub.key]}
+            onChange={(v) => onPatch({ [sub.key]: v })}
+          />
         ))}
       </div>
-      <button
-        type="button"
-        onClick={add}
-        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"
-      >
-        <Plus className="h-3.5 w-3.5" aria-hidden />
-        Add stat
-      </button>
     </div>
   )
 }

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

@@ -5,6 +5,7 @@ import {
   Eye,
   EyeOff,
   GripVertical,
+  Lock,
   type LucideIcon,
   MoreVertical,
   Plus,
@@ -153,9 +154,12 @@ function SortableSectionItem({
   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.
+  const locked = section.unmanaged === true
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: section.id,
-    disabled: !canEdit,
+    disabled: !canEdit || locked,
   })
   const Icon = sectionIconFor(section.sectionType)
 
@@ -176,7 +180,7 @@ function SortableSectionItem({
           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}
+          disabled={!canEdit || locked}
           {...attributes}
           {...listeners}
         >
@@ -198,48 +202,60 @@ function SortableSectionItem({
           </span>
         </button>
 
-        <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>
-
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
+        {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>
+        ) : (
+          <>
             <button
               type="button"
+              onClick={() => onToggleVisibility(section.id)}
               disabled={!canEdit}
-              aria-label={`More actions for ${section.name}`}
+              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"
             >
-              <MoreVertical className="h-4 w-4" aria-hidden />
+              {section.visible ? (
+                <Eye className="h-4 w-4" aria-hidden />
+              ) : (
+                <EyeOff className="h-4 w-4" aria-hidden />
+              )}
             </button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content
-              align="end"
-              sideOffset={4}
-              className="border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md"
-            >
-              <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>
-                Delete
-              </MenuItem>
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Root>
+
+            <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"
+                >
+                  <MoreVertical className="h-4 w-4" aria-hidden />
+                </button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content
+                  align="end"
+                  sideOffset={4}
+                  className="border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md"
+                >
+                  <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>
+                    Delete
+                  </MenuItem>
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+          </>
+        )}
       </div>
     </li>
   )

package/src/views/page-editor/section-types.ts

@@ -13,6 +13,9 @@ export {
   getSectionTypesForScope,
   sectionTypeLabel,
   isKnownSectionType,
+  resolveRepeaterField,
+  isRepeaterField,
+  blankRepeaterRow,
 } from '@actuate-media/cms-core/page-sections'
 
 export type {
@@ -22,6 +25,8 @@ export type {
   SectionFieldDef,
   SectionSettings,
   SectionTypeDef,
+  ResolvedRepeater,
+  RepeaterRow,
   PostHeaderConfig,
   PostTemplate,
 } from '@actuate-media/cms-core/page-sections'

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

@@ -1,6 +1,8 @@
 'use client'
 
+import { Puzzle } from 'lucide-react'
 import type { PageSection } from '../../../lib/page-editor-service.js'
+import { getSectionType } from '../section-types.js'
 import { backgroundClass, paddingClass, type PostRenderContext } from './parts.js'
 import { HeroBannerSection } from './HeroBannerSection.js'
 import { MissionSection } from './MissionSection.js'
@@ -37,10 +39,32 @@ function SectionBody({ section, context }: { section: PageSection; context?: Pos
     case 'gallery':
       return <GallerySection section={section} />
     default:
-      return null
+      // Custom (config-declared) types and unmanaged (externally-managed)
+      // sections have no built-in body component. Render a neutral placeholder
+      // so the canvas reflects their presence + order instead of a blank gap.
+      return <PlaceholderSection section={section} />
   }
 }
 
+/** Fallback canvas card for section types without a built-in renderer. */
+function PlaceholderSection({ section }: { section: PageSection }) {
+  const def = getSectionType(section.sectionType)
+  const label = def?.name ?? section.name
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 px-6 py-12 text-center">
+      <span className="bg-muted text-muted-foreground flex h-10 w-10 items-center justify-center rounded-lg">
+        <Puzzle className="h-5 w-5" aria-hidden />
+      </span>
+      <p className="text-foreground text-sm font-medium">{label}</p>
+      <p className="text-muted-foreground text-xs">
+        {section.unmanaged
+          ? `Managed outside the editor (${section.sectionType}) — preview not available here.`
+          : `Custom section "${section.sectionType}" — rendered by your site's renderer.`}
+      </p>
+    </div>
+  )
+}
+
 export interface SectionRendererProps {
   section: PageSection
   /** Editor mode: adds click-to-select, the selection outline + label, and