kilo-cms 0.1.0

package/src/admin/CollectionRecordEditor.tsx

@@ -0,0 +1,420 @@
+'use client'
+
+import { useEffect, useState, type ReactNode } from 'react'
+import { useRouter } from 'next/navigation'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { EditorSkeleton } from './EditorSkeleton'
+import { ContentEditorForm } from './ContentEditorForm'
+import { ContentViewSettings as ContentViewSettingsModal } from './ContentViewSettings'
+import { DynamicField } from './DynamicField'
+import { Button } from './Button'
+import { PublishingPanel, type ReviewStatus } from './PublishingPanel'
+import { RecordMeta } from './RecordMeta'
+import { useToast } from './Toast'
+import { useCmsSiteSettings } from './CmsSiteSettingsProvider'
+import { useCmsLocales } from './CmsLocalesProvider'
+import { formatDateTime } from '../format'
+import { contentViewField, defaultContentViewFor, type ContentViewSettings as ContentViewConfig } from '../collections/content-view'
+import { relationFields } from '../collections/registry'
+import { emptyRecord, isFieldVisible } from '../collections/values'
+import { combineScheduledAt } from '../collections/schedule'
+import { workflowColumnKeys, type CollectionConfig, type SelectOption } from '../collections/types'
+
+type Row = Record<string, unknown>
+type UserOption = { id: string; name: string }
+type SavingState = 'draft' | 'publish' | 'unpublish' | 'schedule' | 'unschedule' | 'workflow' | null
+const recordSignature = (row: Row) => JSON.stringify(Object.fromEntries(Object.entries(row).filter(([key]) => key !== 'id' && key !== 'createdAt' && key !== 'updatedAt' && !(workflowColumnKeys as readonly string[]).includes(key))))
+
+export function CollectionRecordEditor({ config, id, userName, currentUserId, canCreate, canUpdate, canPublish, canDelete, allowedFields, canConfigureViews, canSubmitReview, canReview, canApprove, isAdmin }: {
+  config: CollectionConfig
+  id: string
+  userName: string
+  currentUserId: string
+  canCreate: boolean
+  canUpdate: boolean
+  canPublish: boolean
+  canDelete: boolean
+  allowedFields: string[]
+  canConfigureViews: boolean
+  canSubmitReview: boolean
+  canReview: boolean
+  canApprove: boolean
+  isAdmin: boolean
+}) {
+  // The server page already resolved `config` (registry lookups only work server-side —
+  // `defineKiloConfig()` never runs on the client) and passes it down as a prop; `slug` is
+  // just a local alias so every existing `slug`-referencing line below keeps working unchanged.
+  const slug = config.slug
+  const router = useRouter()
+  const toast = useToast()
+  const { settings } = useCmsSiteSettings()
+  const localeConfig = useCmsLocales()
+  const isNew = id === 'new'
+
+  const [record, setRecord] = useState<Row>(() => emptyRecord(config, localeConfig))
+  const [view, setView] = useState<ContentViewConfig>(() => defaultContentViewFor(config))
+  const [relationOptions, setRelationOptions] = useState<Record<string, SelectOption[]>>({})
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [saving, setSaving] = useState<SavingState>(null)
+  const [loading, setLoading] = useState(!isNew)
+  const [status, setStatus] = useState(isNew ? `New ${config.labelSingular.toLowerCase()}` : 'Loading…')
+  const [savedSignature, setSavedSignature] = useState<string | null>(null)
+  const [savedPublished, setSavedPublished] = useState(false)
+  const [savedScheduledAt, setSavedScheduledAt] = useState<string | null>(null)
+  const [viewSettingsOpen, setViewSettingsOpen] = useState(false)
+  const [users, setUsers] = useState<UserOption[]>([])
+
+  useEffect(() => {
+    fetch(`/api/admin/content-views/${slug}`).then((response) => response.ok ? response.json() : null).then((data) => { if (data) setView(data) }).catch(() => {})
+    if (config.workflow?.audit || config.workflow?.review) fetch('/api/admin/users').then((response) => response.ok ? response.json() : []).then(setUsers).catch(() => {})
+
+    async function loadRelationOptions(current: Row) {
+      const entries = await Promise.all(relationFields(config).map(async (field) => {
+        const currentValue = current[field.key]
+        const ids = field.hasMany
+          ? (Array.isArray(currentValue) ? currentValue.filter((item): item is string => typeof item === 'string' && item !== '') : [])
+          : (typeof currentValue === 'string' && currentValue ? [currentValue] : [])
+        const query = ids.length ? `?include=${encodeURIComponent(ids.join(','))}` : ''
+        const options = await fetch(`/api/admin/collections/${field.relationTo}/options${query}`).then((response) => response.ok ? response.json() : []).catch(() => [])
+        return [field.key, options] as const
+      }))
+      setRelationOptions(Object.fromEntries(entries))
+    }
+
+    if (isNew) {
+      const fresh = { ...emptyRecord(config, localeConfig), ...(config.workflow?.audit ? { ownerId: currentUserId } : {}) }
+      setRecord(fresh)
+      setSavedSignature(recordSignature(fresh))
+      setSavedPublished(false)
+      setStatus(`New ${config.labelSingular.toLowerCase()}`)
+      setLoading(false)
+      void loadRelationOptions(fresh)
+      return
+    }
+
+    setLoading(true)
+    fetch(`/api/admin/collections/${slug}/${id}`)
+      .then(async (response) => { if (!response.ok) throw new Error(); return response.json() })
+      .then((data: Row) => {
+        applyServer(data)
+        setStatus(Boolean(data.published) ? 'Published' : 'Draft')
+        void loadRelationOptions(data)
+      })
+      .catch(() => setStatus(`Could not load this ${config.labelSingular.toLowerCase()}`))
+      .finally(() => setLoading(false))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug, id, isNew])
+
+  function update(key: string, value: unknown) {
+    setRecord((current) => ({ ...current, [key]: value }))
+    setErrors((current) => {
+      if (!(key in current)) return current
+      const next = { ...current }
+      delete next[key]
+      return next
+    })
+  }
+
+  function validate(): Record<string, string> {
+    const next: Record<string, string> = {}
+    for (const field of config.fields) {
+      if (field.readOnly || !field.required) continue
+      const value = record[field.key]
+      if (value === null || value === undefined || value === '') next[field.key] = 'This field is required.'
+    }
+    setErrors(next)
+    return next
+  }
+
+  function applyServer(data: Row) {
+    setRecord(data)
+    setSavedSignature(recordSignature(data))
+    setSavedPublished(Boolean(data.published))
+    setSavedScheduledAt((data.scheduledAt as string | null) ?? null)
+    return data
+  }
+
+  async function save(publish = false) {
+    const validationErrors = !config.workflow?.publish || publish ? validate() : {}
+    if (Object.keys(validationErrors).length) {
+      const names = Object.keys(validationErrors).map((key) => contentViewField(view, key)?.label || config.fields.find((field) => field.key === key)?.label || key)
+      toast.error(`Cannot ${publish ? 'publish' : 'save'}. Check: ${names.join(', ')}.`)
+      return
+    }
+    setSaving(config.workflow?.publish ? (publish ? 'publish' : 'draft') : 'draft')
+    setStatus(config.workflow?.publish ? (publish ? 'Publishing…' : 'Saving draft…') : 'Saving…')
+    try {
+      const endpoint = isNew ? `/api/admin/collections/${slug}` : `/api/admin/collections/${slug}/${id}`
+      const response = await fetch(endpoint, { method: isNew ? 'POST' : 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(config.workflow?.publish ? { ...record, published: publish } : record) })
+      const body = await response.text()
+      const data = body ? JSON.parse(body) : null
+      if (!response.ok) throw new Error(data?.error || `Save failed (status ${response.status})`)
+      applyServer(data)
+      setStatus(config.workflow?.publish ? (publish ? 'Published live' : 'Saved as draft') : 'Saved')
+      toast.success(config.workflow?.publish ? (publish ? `${config.labelSingular} published live.` : `${config.labelSingular} saved as draft.`) : `${config.labelSingular} saved.`)
+      if (isNew) router.replace(`/admin/collections/${slug}/${data.id}`)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Could not save'
+      setStatus(message)
+      toast.error(message)
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  async function unpublish() {
+    setSaving('unpublish')
+    setStatus('Unpublishing…')
+    try {
+      const response = await fetch(`/api/admin/collections/${slug}/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ published: false }) })
+      const body = await response.text()
+      const data = body ? JSON.parse(body) : null
+      if (!response.ok) throw new Error(data?.error || `Unpublish failed (status ${response.status})`)
+      applyServer(data)
+      setStatus('Unpublished — saved as draft')
+      toast.success(`${config.labelSingular} unpublished and moved to draft.`)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : `Could not unpublish this ${config.labelSingular.toLowerCase()}`
+      setStatus(message)
+      toast.error(message)
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  async function submitReview(reviewerId: string) {
+    setSaving('workflow')
+    setStatus('Submitting for review…')
+    try {
+      const response = await fetch(`/api/admin/collections/${slug}/${id}/submit-review`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ reviewerId }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data?.error || 'Could not submit for review')
+      applyServer(data)
+      setStatus('In review')
+      toast.success('Submitted for review.')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Could not submit for review')
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  async function reviewDecision(decision: 'approve' | 'request_changes') {
+    setSaving('workflow')
+    setStatus(decision === 'approve' ? 'Passing review…' : 'Requesting changes…')
+    try {
+      const response = await fetch(`/api/admin/collections/${slug}/${id}/review`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ decision }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data?.error || 'Could not update review')
+      applyServer(data)
+      setStatus(decision === 'approve' ? 'Passed review' : 'Sent back to draft')
+      toast.success(decision === 'approve' ? 'Marked as reviewed.' : 'Sent back for changes.')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Could not update review')
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  async function approve() {
+    setSaving('workflow')
+    setStatus('Approving…')
+    try {
+      const response = await fetch(`/api/admin/collections/${slug}/${id}/approve`, { method: 'PATCH' })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data?.error || 'Could not approve')
+      applyServer(data)
+      setStatus('Approved')
+      toast.success(`${config.labelSingular} approved — ready to publish.`)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Could not approve')
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  const scheduling = config.workflow?.scheduling
+  const scheduleIso = scheduling
+    ? combineScheduledAt(
+        typeof record[scheduling.dateField] === 'string' ? (record[scheduling.dateField] as string) : null,
+        scheduling.timeField && typeof record[scheduling.timeField] === 'string' ? (record[scheduling.timeField] as string) : null,
+      )
+    : null
+
+  /** Saves the current edits first (so scheduling can't strand unsaved content), then transitions.
+   *  Mirrors the old BlogEditor.schedule(), which did both in one PUT. */
+  async function schedule() {
+    if (!scheduleIso) { toast.error('Pick a scheduled date first.'); return }
+    const validationErrors = validate()
+    if (Object.keys(validationErrors).length) {
+      const names = Object.keys(validationErrors).map((key) => contentViewField(view, key)?.label || config.fields.find((field) => field.key === key)?.label || key)
+      setStatus('Fix the highlighted fields')
+      toast.error(`Cannot schedule. Check: ${names.join(', ')}.`)
+      return
+    }
+    setSaving('schedule')
+    setStatus('Scheduling…')
+    try {
+      const saveEndpoint = isNew ? `/api/admin/collections/${slug}` : `/api/admin/collections/${slug}/${id}`
+      const saved = await fetch(saveEndpoint, { method: isNew ? 'POST' : 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...record, published: false }) })
+      const savedBody = await saved.text()
+      const savedData = savedBody ? JSON.parse(savedBody) : null
+      if (!saved.ok) throw new Error(savedData?.error || `Save failed (status ${saved.status})`)
+      const targetId = String(savedData.id)
+      const response = await fetch(`/api/admin/collections/${slug}/${targetId}/schedule`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ scheduledAt: scheduleIso }) })
+      const body = await response.text()
+      const data = body ? JSON.parse(body) : null
+      if (!response.ok) throw new Error(data?.error || `Schedule failed (status ${response.status})`)
+      applyServer(data)
+      setStatus('Scheduled')
+      toast.success(`${config.labelSingular} scheduled.`)
+      if (isNew) router.replace(`/admin/collections/${slug}/${targetId}`)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Could not schedule'
+      setStatus(message)
+      toast.error(message)
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  async function unschedule() {
+    setSaving('unschedule')
+    setStatus('Removing schedule…')
+    try {
+      const response = await fetch(`/api/admin/collections/${slug}/${id}/unschedule`, { method: 'PATCH' })
+      const body = await response.text()
+      const data = body ? JSON.parse(body) : null
+      if (!response.ok) throw new Error(data?.error || `Could not unschedule (status ${response.status})`)
+      applyServer(data)
+      setStatus('Draft')
+      toast.success('Schedule removed.')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Could not unschedule'
+      setStatus(message)
+      toast.error(message)
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  async function remove() {
+    if (!confirm(`Delete this ${config.labelSingular.toLowerCase()}? This cannot be undone.`)) return
+    const response = await fetch(`/api/admin/collections/${slug}/${id}`, { method: 'DELETE' })
+    if (response.ok) { toast.success(`${config.labelSingular} deleted.`); router.push(`/admin/collections/${slug}`) }
+    else { const body = await response.json().catch(() => null); toast.error(body?.error || `Could not delete this ${config.labelSingular.toLowerCase()}.`) }
+  }
+
+  async function saveView(next: ContentViewConfig) {
+    const response = await fetch(`/api/admin/content-views/${slug}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(next) })
+    const data = await response.json()
+    if (!response.ok) throw new Error(data.error || 'Could not save view settings.')
+    setView(data)
+    toast.success(`${config.label} view settings saved.`)
+  }
+
+  const dirty = savedSignature !== null && savedSignature !== recordSignature(record)
+  const reviewStatus = isReviewStatus(record.reviewStatus) ? record.reviewStatus : 'draft'
+  const reviewerName = users.find((item) => item.id === record.reviewerId)?.name ?? null
+  const createdByName = users.find((item) => item.id === record.createdBy)?.name ?? null
+  const updatedByName = users.find((item) => item.id === record.updatedBy)?.name ?? null
+  const approvedByName = users.find((item) => item.id === record.approverId)?.name ?? null
+  const canActuallyReview = canReview && (isAdmin || record.reviewerId === currentUserId)
+  const reviewerOptions = users.filter((item) => item.id !== record.createdBy)
+  const requiresApproval = config.workflow?.approval === 'always'
+    ? true
+    : config.workflow?.approval === 'never'
+      ? false
+      : settings.publishingWorkflow.approvalRequired.includes(config.slug)
+
+  const fields: Record<string, ReactNode> = Object.fromEntries(
+    config.fields
+      .filter((field) => !field.hidden && isFieldVisible(field, record) && (field.readOnly || allowedFields.includes(field.key)))
+      .map((field) => [field.key, (
+        <DynamicField
+          key={field.key}
+          field={field}
+          value={record[field.key]}
+          onChange={(value) => update(field.key, value)}
+          label={contentViewField(view, field.key)?.label || field.label}
+          hint={contentViewField(view, field.key)?.description || field.hint}
+          error={errors[field.key]}
+          disabled={!canUpdate && !isNew}
+          relationOptions={field.type === 'relation' ? relationOptions[field.key] : undefined}
+        />
+      )]),
+  )
+
+  const sidePanel = config.workflow?.publish ? (
+    <PublishingPanel
+      published={savedPublished}
+      dirty={dirty}
+      saving={saving}
+      message={status}
+      publishedAt={record.publishedAt as string | null | undefined}
+      scheduledAt={savedScheduledAt}
+      canSchedule={Boolean(scheduleIso)}
+      onSchedule={scheduling && canPublish ? () => void schedule() : undefined}
+      onUnschedule={scheduling && canPublish && !isNew ? () => void unschedule() : undefined}
+      onSaveDraft={() => void save(false)}
+      onPublish={() => void save(true)}
+      onUnpublish={!isNew && canPublish ? () => void unpublish() : undefined}
+      onTrash={isNew || !canDelete ? undefined : () => void remove()}
+      reviewStatus={reviewStatus}
+      requiresApproval={requiresApproval}
+      reviewerName={reviewerName}
+      canSubmitReview={canSubmitReview && !isNew}
+      canReview={canActuallyReview}
+      canApprove={canApprove}
+      reviewers={reviewerOptions}
+      onSubmitReview={(reviewerId) => void submitReview(reviewerId)}
+      onReviewDecision={(decision) => void reviewDecision(decision)}
+      onApprove={() => void approve()}
+    />
+  ) : (
+    <div className="cms-editor-sidebar-stack">
+      <aside className="cms-editor-sidebar">
+        <div className="cms-publishing-heading"><span>{config.labelSingular}</span></div>
+        <div className="cms-publishing-summary">{dirty && <span className="cms-unsaved-status">Unsaved changes</span>}</div>
+        <div className="cms-publishing-actions">
+          <Button variant="positive" disabled={saving !== null || (!isNew && !canUpdate) || (isNew && !canCreate)} onClick={() => void save(false)}>{saving ? 'Saving…' : 'Save'}</Button>
+        </div>
+        {!isNew && canDelete && <Button variant="negative" onClick={() => void remove()}>Delete</Button>}
+        <p className="cms-ai-status">{status}</p>
+      </aside>
+      {!isNew && <aside className="cms-content-records">
+        <div className="cms-records-heading"><strong>Record</strong></div>
+        <section className="cms-record-section">
+          <div className="cms-meta-list">
+            <div><span>ID</span><strong>{String(record.id ?? '—')}</strong></div>
+            {config.fields.some((field) => field.key === 'createdAt') && <div><span>Created</span><strong>{formatDateTime(record.createdAt as string)}</strong></div>}
+            {config.touchUpdatedAt && <div><span>Last updated</span><strong>{formatDateTime(record.updatedAt as string)}</strong></div>}
+          </div>
+        </section>
+      </aside>}
+    </div>
+  )
+
+  return <main className="cms-dashboard">
+    <CmsSidebar active="collections" userName={userName} contentContext={{ title: config.label, backHref: `/admin/collections/${slug}`, backLabel: `All ${config.label.toLowerCase()}`, settings: view }} />
+    <section className="cms-content">
+      <EditorHeader
+        compact
+        title={isNew ? `New ${config.labelSingular.toLowerCase()}` : String(record[config.titleField] ?? config.labelSingular)}
+        backHref={`/admin/collections/${slug}`}
+        backLabel={`All ${config.label.toLowerCase()}`}
+        actions={canConfigureViews ? <Button type="button" variant="secondary" className="cms-view-settings-button" icon="⚙" iconPosition="before" onClick={() => setViewSettingsOpen(true)}>View settings</Button> : undefined}
+      />
+      {loading ? <EditorSkeleton /> : <div className="cms-editor-layout">
+        <ContentEditorForm settings={view} fields={fields} groupExtras={{ record: <RecordMeta createdByName={createdByName} updatedByName={updatedByName} approvedByName={approvedByName} ownerId={typeof record.ownerId === 'string' ? record.ownerId : null} owners={users} onOwnerChange={(ownerId) => update('ownerId', ownerId || null)} /> }} />
+        {sidePanel}
+      </div>}
+    </section>
+    {viewSettingsOpen && <ContentViewSettingsModal title={config.label} value={view} onClose={() => setViewSettingsOpen(false)} onSave={saveView} />}
+  </main>
+}
+
+function isReviewStatus(value: unknown): value is ReviewStatus {
+  return value === 'draft' || value === 'in_review' || value === 'reviewed' || value === 'approved'
+}

package/src/admin/ContentEditorForm.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { ContentViewSettings } from '../collections/content-view'
+
+type Props = { settings: ContentViewSettings; fields: Record<string, ReactNode>; groupExtras?: Record<string, ReactNode> }
+
+export function ContentEditorForm({ settings, fields, groupExtras }: Props) {
+  return <div className="cms-editor-form cms-content-editor-form">
+    {settings.groups.map((group) => {
+      const groupFields = settings.fields.filter((field) => field.groupId === group.id && fields[field.key])
+      const extra = groupExtras?.[group.id]
+      if (!groupFields.length && !extra) return null
+      return <section className="cms-section cms-content-field-group" id={`cms-group-${group.id}`} key={group.id}>
+        <div className="cms-section-heading"><p className="section-label">{group.label}</p>{group.description && <p>{group.description}</p>}</div>
+        {groupFields.length > 0 && <div className="cms-content-field-grid">{groupFields.map((field) => <div id={`cms-field-${field.key}`} key={field.key} className={`cms-content-field cms-content-field-${field.width}`}>{fields[field.key]}</div>)}</div>}
+        {extra}
+      </section>
+    })}
+  </div>
+}

package/src/admin/ContentViewSettings.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useState, type DragEvent } from 'react'
+import { Reorder, useDragControls } from 'framer-motion'
+import { CloseButton } from './CloseButton'
+import { Button } from './Button'
+import { Portal } from './Portal'
+import { useBodyScrollLock } from '../useBodyScrollLock'
+import type { ContentViewField, ContentViewGroup, ContentViewSettings, ContentViewFieldWidth } from '../collections/content-view'
+
+type Props = { title: string; value: ContentViewSettings; onClose: () => void; onSave: (value: ContentViewSettings) => Promise<void> }
+const widths: { value: ContentViewFieldWidth; label: string }[] = [{ value: 'full', label: 'Full' }, { value: 'half', label: '½' }, { value: 'third', label: '⅓' }]
+
+function DragHandle() { return <svg viewBox="0 0 12 16" aria-hidden="true"><circle cx="3" cy="2" r="1.4" /><circle cx="9" cy="2" r="1.4" /><circle cx="3" cy="8" r="1.4" /><circle cx="9" cy="8" r="1.4" /><circle cx="3" cy="14" r="1.4" /><circle cx="9" cy="14" r="1.4" /></svg> }
+
+function FieldCard({ field, assigned, onUpdate, onRemove, onDropBefore, onDragStart }: { field: ContentViewField; assigned: boolean; onUpdate: (patch: Partial<ContentViewField>) => void; onRemove: () => void; onDropBefore: (event: DragEvent<HTMLElement>) => void; onDragStart: (event: DragEvent<HTMLElement>) => void }) {
+  return <article className={`content-view-field content-view-field-${field.width}`} draggable onDragStart={onDragStart} onDragOver={(event) => event.preventDefault()} onDrop={onDropBefore}>
+    <span className="content-view-field-grip" title="Drag to move"><DragHandle /></span>
+    <div className="content-view-field-name"><input value={field.label} aria-label={`${field.key} label`} onChange={(event) => onUpdate({ label: event.target.value })} /><input className="content-view-description-input" value={field.description || ''} aria-label={`${field.key} description`} onChange={(event) => onUpdate({ description: event.target.value })} placeholder="Short helper description (optional)" /><small>{field.key}</small></div>
+    <div className="content-view-width" aria-label={`${field.label} width`}>{widths.map((width) => <button type="button" key={width.value} className={field.width === width.value ? 'active' : ''} onClick={() => onUpdate({ width: width.value })}>{width.label}</button>)}</div>
+    {assigned && <button type="button" className="content-view-field-remove" onClick={onRemove} aria-label={`Move ${field.label} to available fields`} title="Move to available fields">×</button>}
+  </article>
+}
+
+function GroupCard({ group, fields, canRemove, onRename, onDescribe, onRemove, onFieldDrop, onFieldUpdate, onFieldRemove, onCardDrop, onDragStart }: { group: ContentViewGroup; fields: ContentViewField[]; canRemove: boolean; onRename: (label: string) => void; onDescribe: (description: string) => void; onRemove: () => void; onFieldDrop: (event: DragEvent<HTMLElement>) => void; onFieldUpdate: (key: string, patch: Partial<ContentViewField>) => void; onFieldRemove: (key: string) => void; onCardDrop: (event: DragEvent<HTMLElement>, field: ContentViewField) => void; onDragStart: (event: DragEvent<HTMLElement>, key: string) => void }) {
+  const controls = useDragControls()
+  return <Reorder.Item value={group} dragListener={false} dragControls={controls} className="content-view-group">
+    <div className="content-view-group-head"><button type="button" className="content-view-group-grip" onPointerDown={(event) => controls.start(event)} aria-label={`Drag to reorder ${group.label}`}><DragHandle /></button><div><input value={group.label} aria-label="Group name" onChange={(event) => onRename(event.target.value)} /><input className="content-view-description-input" value={group.description || ''} aria-label="Group description" onChange={(event) => onDescribe(event.target.value)} placeholder="Short group description (optional)" /></div><button type="button" className="content-view-group-remove" disabled={!canRemove} onClick={onRemove} title="Remove group">×</button></div>
+    <div className="content-view-group-drop" onDragOver={(event) => event.preventDefault()} onDrop={onFieldDrop}>{fields.length ? fields.map((field) => <FieldCard key={field.key} field={field} assigned onUpdate={(patch) => onFieldUpdate(field.key, patch)} onRemove={() => onFieldRemove(field.key)} onDropBefore={(event) => onCardDrop(event, field)} onDragStart={(event) => onDragStart(event, field.key)} />) : <p>Drop fields here</p>}</div>
+  </Reorder.Item>
+}
+
+export function ContentViewSettings({ title, value, onClose, onSave }: Props) {
+  const [settings, setSettings] = useState<ContentViewSettings>(value)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  useBodyScrollLock(true)
+
+  function updateField(key: string, patch: Partial<ContentViewField>) { setSettings((current) => ({ ...current, fields: current.fields.map((field) => field.key === key ? { ...field, ...patch } : field) })) }
+  function placeField(key: string, groupId: string | null, beforeKey?: string) { setSettings((current) => { const moving = current.fields.find((field) => field.key === key); if (!moving) return current; const rest = current.fields.filter((field) => field.key !== key); const field = { ...moving, groupId }; const beforeIndex = beforeKey ? rest.findIndex((item) => item.key === beforeKey) : -1; const lastInGroup = groupId ? rest.reduce((last, item, index) => item.groupId === groupId ? index : last, -1) : rest.length - 1; const index = beforeIndex >= 0 ? beforeIndex : lastInGroup + 1; rest.splice(index, 0, field); return { ...current, fields: rest } }) }
+  function fieldKey(event: DragEvent<HTMLElement>) { return event.dataTransfer.getData('application/x-cms-field') || event.dataTransfer.getData('text/plain') }
+  function startFieldDrag(event: DragEvent<HTMLElement>, key: string) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('application/x-cms-field', key); event.dataTransfer.setData('text/plain', key) }
+  function addGroup() { setSettings((current) => ({ ...current, groups: [...current.groups, { id: `group-${crypto.randomUUID().slice(0, 8)}`, label: 'New group' }] })) }
+  function removeGroup(id: string) { setSettings((current) => ({ groups: current.groups.filter((group) => group.id !== id), fields: current.fields.map((field) => field.groupId === id ? { ...field, groupId: null } : field) })) }
+  async function save() { setSaving(true); setError(''); try { await onSave(settings); onClose() } catch (caught) { setError(caught instanceof Error ? caught.message : 'Could not save view settings.') } finally { setSaving(false) } }
+  const available = settings.fields.filter((field) => !field.groupId)
+
+  return <Portal><div className="content-view-settings-modal" role="dialog" aria-modal="true" aria-label={`${title} view settings`} onClick={onClose}><section className="content-view-settings-panel" onClick={(event) => event.stopPropagation()}>
+    <header><div><p className="section-label">Content model</p><strong>{title} view settings</strong></div><div className="content-view-header-actions"><Button variant="primary" type="button" disabled={saving} onClick={() => void save()} icon="↗">{saving ? 'Saving…' : 'Save settings'}</Button><CloseButton onClick={onClose} /></div></header>
+    <p className="content-view-settings-intro">Drag fields from Available fields into a group. Field labels update the matching listing-table labels for every CMS user.</p>
+    <div className="content-view-workspace"><section className="content-view-group-column"><div className="content-view-settings-title"><p className="listing-settings-label">Editor groups</p><Button variant="secondary" compact type="button" onClick={addGroup}>+ Add group</Button></div><Reorder.Group axis="y" values={settings.groups} onReorder={(groups) => setSettings((current) => ({ ...current, groups }))} className="content-view-groups">{settings.groups.map((group) => <GroupCard key={group.id} group={group} fields={settings.fields.filter((field) => field.groupId === group.id)} canRemove={settings.groups.length > 1} onRename={(label) => setSettings((current) => ({ ...current, groups: current.groups.map((item) => item.id === group.id ? { ...item, label } : item) }))} onDescribe={(description) => setSettings((current) => ({ ...current, groups: current.groups.map((item) => item.id === group.id ? { ...item, description } : item) }))} onRemove={() => removeGroup(group.id)} onFieldDrop={(event) => { event.preventDefault(); const key = fieldKey(event); if (key) placeField(key, group.id) }} onFieldUpdate={updateField} onFieldRemove={(key) => placeField(key, null)} onCardDrop={(event, field) => { event.preventDefault(); const key = fieldKey(event); if (key && key !== field.key) placeField(key, group.id, field.key) }} onDragStart={startFieldDrag} />)}</Reorder.Group></section>
+      <section className="content-view-available-column"><p className="listing-settings-label">Available fields</p><p className="content-view-available-hint">These fields are hidden from the editor until dropped into a group.</p><div className="content-view-available-drop" onDragOver={(event) => event.preventDefault()} onDrop={(event) => { event.preventDefault(); const key = fieldKey(event); if (key) placeField(key, null) }}>{available.length ? available.map((field) => <FieldCard key={field.key} field={field} assigned={false} onUpdate={(patch) => updateField(field.key, patch)} onRemove={() => undefined} onDropBefore={(event) => { event.preventDefault(); const key = fieldKey(event); if (key && key !== field.key) placeField(key, null, field.key) }} onDragStart={(event) => startFieldDrag(event, field.key)} />) : <p>All fields are in groups</p>}</div></section></div>
+    {error && <p className="content-view-settings-error">{error}</p>}
+  </section></div></Portal>
+}