kilo-cms 0.1.0

package/src/admin/Field.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { ChangeEvent, ComponentProps, KeyboardEvent, ReactNode, useEffect, useId, useRef, useState } from 'react'
+import { Portal } from './Portal'
+import { Button } from './Button'
+import { monthGrid, parseISODate, toISODate, weekdayLabels } from '../calendar-grid'
+
+// Leaflet touches `window` at module load — never render it during SSR.
+const MapPicker = dynamic(() => import('./MapPicker'), { ssr: false })
+
+type FieldProps = { label: string; required?: boolean; hint?: string; error?: string; children: ReactNode }
+
+export function Field({ label, required, hint, error, children }: FieldProps) {
+  return <div className={`cms-field ${error ? 'has-error' : ''}`}>
+    <div className="cms-field-label"><span>{label}{required && <b className="required-mark">*</b>}</span>{hint && <small>{hint}</small>}</div>
+    {children}
+    {error && <small className="field-error">{error}</small>}
+  </div>
+}
+
+type TextFieldProps = Omit<ComponentProps<'input'>, 'children'> & Omit<FieldProps, 'children'>
+export function TextField({ label, required, hint, error, ...props }: TextFieldProps) { return <Field label={label} required={required} hint={hint} error={error}><span className="cms-input-shell"><input aria-label={label} {...props} /></span></Field> }
+
+type PasswordFieldProps = Omit<ComponentProps<'input'>, 'children' | 'type'> & Omit<FieldProps, 'children'>
+export function PasswordField({ label, required, hint, error, ...props }: PasswordFieldProps) {
+  const [visible, setVisible] = useState(false)
+  return <Field label={label} required={required} hint={hint} error={error}><span className="cms-input-shell cms-password-shell"><input type={visible ? 'text' : 'password'} aria-label={label} autoComplete="off" {...props} /><Button type="button" variant="ghost" iconOnly compact aria-label={visible ? 'Hide value' : 'Show value'} onClick={() => setVisible((current) => !current)} icon={<span aria-hidden="true">{visible ? '🙈' : '👁'}</span>} /></span></Field>
+}
+
+type RangeFieldProps = Omit<FieldProps, 'children'> & { value: number; onChange: (value: number) => void; min?: number; max?: number; step?: number; disabled?: boolean }
+export function RangeField({ label, required, hint, error, value, onChange, min = 0, max = 100, step = 1, disabled }: RangeFieldProps) {
+  return <Field label={label} required={required} hint={hint} error={error}><div className="cms-range-control"><input type="range" aria-label={label} min={min} max={max} step={step} value={value} disabled={disabled} onChange={(event) => onChange(Number(event.target.value))} /><span className="cms-range-value">{value}</span></div></Field>
+}
+
+type RatingFieldProps = Omit<FieldProps, 'children'> & { value: number; onChange: (value: number) => void; max?: number; disabled?: boolean }
+export function RatingField({ label, required, hint, error, value, onChange, max = 5, disabled }: RatingFieldProps) {
+  return <Field label={label} required={required} hint={hint} error={error}><div className="cms-rating-control" role="radiogroup" aria-label={label}>{Array.from({ length: max }, (_, index) => index + 1).map((star) => <button key={star} type="button" className={`cms-rating-star ${star <= value ? 'is-filled' : ''}`} aria-label={`${star} star${star === 1 ? '' : 's'}`} aria-pressed={star === value} disabled={disabled} onClick={() => onChange(star === value ? 0 : star)}>★</button>)}</div></Field>
+}
+
+type TextAreaFieldProps = ComponentProps<'textarea'> & Omit<FieldProps, 'children'>
+export function TextAreaField({ label, required, hint, error, ...props }: TextAreaFieldProps) { return <Field label={label} required={required} hint={hint} error={error}><span className="cms-input-shell cms-textarea-shell"><textarea aria-label={label} {...props} /></span></Field> }
+
+type SelectFieldProps = ComponentProps<'select'> & Omit<FieldProps, 'children'> & { options: Array<{ label: string; value: string }> }
+export function SelectField({ label, required, hint, error, options, ...props }: SelectFieldProps) { return <Field label={label} required={required} hint={hint} error={error}><span className="cms-input-shell cms-select-shell"><select aria-label={label} {...props}>{options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select></span></Field> }
+
+type RadioFieldProps = Omit<FieldProps, 'children'> & { value: string; onChange: (value: string) => void; options: Array<{ label: string; value: string }>; disabled?: boolean }
+export function RadioField({ label, required, hint, error, value, onChange, options, disabled }: RadioFieldProps) {
+  const groupName = useId()
+  return <Field label={label} required={required} hint={hint} error={error}><div className="cms-radio-group" role="radiogroup" aria-label={label}>{options.map((option) => <label key={option.value} className={disabled ? 'is-disabled' : ''}><input type="radio" name={groupName} value={option.value} checked={value === option.value} disabled={disabled} onChange={() => onChange(option.value)} />{option.label}</label>)}</div></Field>
+}
+
+type Category = { id: string; name: string; slug: string }
+type CategoryFieldProps = Omit<FieldProps, 'children' | 'label'> & { label?: string; value: string; options: Category[]; onChange: (value: string) => void; onCreate: (name: string) => Promise<Category | null> }
+export function CategoryField({ label = 'Category', required, hint, error, value, options, onChange, onCreate }: CategoryFieldProps) {
+  const [adding, setAdding] = useState(false); const [name, setName] = useState(''); const [message, setMessage] = useState(''); const [loading, setLoading] = useState(false)
+  const hasValue = value && !options.some((category) => category.name === value)
+  async function addCategory() { if (!name.trim()) { setMessage('Enter a category name.'); return }; setLoading(true); setMessage(''); const category = await onCreate(name); setLoading(false); if (!category) { setMessage('Could not add category.'); return }; onChange(category.name); setName(''); setAdding(false) }
+  return <Field label={label} required={required} hint={hint} error={error}><div className="cms-category-control"><span className="cms-input-shell cms-select-shell"><select aria-label={label} value={value} onChange={(event) => { if (event.target.value === '__new__') setAdding(true); else onChange(event.target.value) }}><option value="">Select a category</option>{hasValue && <option value={value}>{value}</option>}{options.map((category) => <option key={category.id} value={category.name}>{category.name}</option>)}<option value="__new__">+ Create new category</option></select></span>{adding && <div className="cms-inline-create"><input aria-label="New category" value={name} onChange={(event) => setName(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') { event.preventDefault(); void addCategory() } }} placeholder="e.g. Brand strategy" /><Button variant="positive" compact type="button" onClick={() => void addCategory()} disabled={loading}>{loading ? 'Adding…' : '+ Add'}</Button><Button variant="ghost" compact type="button" className="cms-inline-cancel" onClick={() => { setAdding(false); setMessage('') }}>Cancel</Button></div>}{message && <small className="field-error">{message}</small>}</div></Field>
+}
+
+type TagsFieldProps = Omit<FieldProps, 'children' | 'label' | 'hint'> & { label?: string; hint?: string; value: string[]; onChange: (value: string[]) => void }
+export function TagsField({ label = 'Tags', required, hint = 'Press Enter or Add after each tag', error, value, onChange }: TagsFieldProps) {
+  const [input, setInput] = useState(''); const [message, setMessage] = useState('')
+  function add() { const tag = input.trim().replace(/\s+/g, ' '); if (!tag) return; if (value.some((item) => item.toLowerCase() === tag.toLowerCase())) { setMessage('That tag is already added.'); return }; if (value.length >= 20) { setMessage('Maximum 20 tags.'); return }; onChange([...value, tag]); setInput(''); setMessage('') }
+  function keyDown(event: KeyboardEvent<HTMLInputElement>) { if (event.key === 'Enter' || event.key === ',') { event.preventDefault(); add() } }
+  return <Field label={label} required={required} hint={hint} error={error}><div className="cms-tags-control"><div className="cms-tags">{value.map((tag) => <span className="cms-tag" key={tag}>{tag}<Button variant="ghost" iconOnly compact type="button" aria-label={`Remove ${tag}`} onClick={() => onChange(value.filter((item) => item !== tag))} icon={<span aria-hidden="true">×</span>} /></span>)}</div><div className="cms-tag-entry"><input aria-label="New tag" value={input} onChange={(event) => setInput(event.target.value)} onKeyDown={keyDown} placeholder="Type a tag" /><Button variant="positive" compact type="button" onClick={add}>+ Add</Button></div></div>{message && <small className="field-error">{message}</small>}</Field>
+}
+
+type ToggleFieldProps = Omit<FieldProps, 'children'> & { checked: boolean; onChange: (checked: boolean) => void }
+export function ToggleField({ label, required, hint, error, checked, onChange }: ToggleFieldProps) {
+  return <Field label={label} required={required} hint={hint} error={error}><button type="button" role="switch" aria-checked={checked} aria-label={label} className={`cms-toggle ${checked ? 'is-on' : ''}`} onClick={() => onChange(!checked)}><span className="cms-toggle-thumb" /></button></Field>
+}
+
+type CheckboxFieldProps = Omit<FieldProps, 'children'> & { checked: boolean; onChange: (checked: boolean) => void; description?: string }
+export function CheckboxField({ label, required, hint, error, checked, onChange, description }: CheckboxFieldProps) {
+  return <Field label={label} required={required} hint={hint} error={error}><label className="cms-checkbox-control"><input type="checkbox" checked={checked} onChange={(event) => onChange(event.target.checked)} aria-label={label} />{description && <span>{description}</span>}</label></Field>
+}
+
+type CheckboxGroupFieldProps = Omit<FieldProps, 'children'> & { value: string[]; onChange: (value: string[]) => void; options: Array<{ value: string; label: string }> }
+export function CheckboxGroupField({ label, required, hint, error, value, onChange, options }: CheckboxGroupFieldProps) {
+  function toggle(optionValue: string) { onChange(value.includes(optionValue) ? value.filter((item) => item !== optionValue) : [...value, optionValue]) }
+  return <Field label={label} required={required} hint={hint} error={error}><div className="cms-checkbox-group">{options.map((option) => <button type="button" key={option.value} className={`cms-checkbox-pill ${value.includes(option.value) ? 'is-checked' : ''}`} aria-pressed={value.includes(option.value)} onClick={() => toggle(option.value)}>{option.label}</button>)}</div></Field>
+}
+
+type TimeFieldProps = Omit<FieldProps, 'children'> & { value: string | null; onChange: (value: string | null) => void }
+export function TimeField({ label, required, hint, error, value, onChange }: TimeFieldProps) {
+  return <Field label={label} required={required} hint={hint} error={error}><span className="cms-input-shell"><input type="time" aria-label={label} value={value ?? ''} onChange={(event) => onChange(event.target.value || null)} /></span></Field>
+}
+
+/** ISO string -> local 'YYYY-MM-DDTHH:mm' for <input type=datetime-local> (which has no timezone
+ *  concept of its own — it always shows/edits in the browser's local time). */
+function toDateTimeLocal(iso: string | null): string {
+  if (!iso) return ''
+  const date = new Date(iso)
+  if (isNaN(date.getTime())) return ''
+  const pad = (value: number) => String(value).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+type DateTimeFieldProps = Omit<FieldProps, 'children'> & { value: string | null; onChange: (value: string | null) => void }
+export function DateTimeField({ label, required, hint, error, value, onChange }: DateTimeFieldProps) {
+  return <Field label={label} required={required} hint={hint} error={error}><span className="cms-input-shell"><input type="datetime-local" aria-label={label} value={toDateTimeLocal(value)} onChange={(event) => onChange(event.target.value ? new Date(event.target.value).toISOString() : null)} /></span></Field>
+}
+
+const hexColorPattern = /^#[0-9a-fA-F]{6}$/
+type ColorFieldProps = Omit<FieldProps, 'children'> & { value: string; onChange: (value: string) => void; disabled?: boolean }
+export function ColorField({ label, required, hint, error, value, onChange, disabled }: ColorFieldProps) {
+  const swatch = hexColorPattern.test(value) ? value : '#000000'
+  return <Field label={label} required={required} hint={hint} error={error}><div className="cms-color-control"><input type="color" aria-label={label} value={swatch} disabled={disabled} onChange={(event) => onChange(event.target.value)} /><span className="cms-input-shell cms-color-hex"><input type="text" aria-label={`${label} hex code`} value={value} disabled={disabled} placeholder="#3366ff" onChange={(event) => onChange(event.target.value)} /></span></div></Field>
+}
+
+function CalendarDateControl({ label, value, onChange }: { label: string; value: string | null; onChange: (value: string | null) => void }) {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null)
+  const selected = parseISODate(value)
+  const [viewMonth, setViewMonth] = useState(() => selected ?? new Date())
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handleOutside(event: MouseEvent) { const target = event.target as Node; if (triggerRef.current?.contains(target) || popoverRef.current?.contains(target)) return; setOpen(false) }
+    function handleKey(event: globalThis.KeyboardEvent) { if (event.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', handleOutside)
+    document.addEventListener('keydown', handleKey)
+    return () => { document.removeEventListener('mousedown', handleOutside); document.removeEventListener('keydown', handleKey) }
+  }, [open])
+
+  function toggleOpen() {
+    if (!open && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect()
+      setViewMonth(selected ?? new Date())
+      setPosition({ top: rect.bottom + 6, left: Math.max(8, Math.min(rect.left, window.innerWidth - 268)) })
+    }
+    setOpen((current) => !current)
+  }
+
+  const cells = monthGrid(viewMonth)
+  const todayIso = toISODate(new Date())
+
+  return <div className="cms-calendar-control">
+    <Button ref={triggerRef} type="button" variant="secondary" className="cms-calendar-trigger" onClick={toggleOpen} aria-label={label}>{selected ? selected.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' }) : 'Select a date'}</Button>
+    {open && position && <Portal><div ref={popoverRef} className="cms-calendar-popover" style={{ position: 'fixed', top: position.top, left: position.left }}>
+      <div className="cms-calendar-header"><Button type="button" variant="secondary" iconOnly compact onClick={() => setViewMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1))} aria-label="Previous month" icon="‹" /><strong>{viewMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}</strong><Button type="button" variant="secondary" iconOnly compact onClick={() => setViewMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1))} aria-label="Next month" icon="›" /></div>
+      <div className="cms-calendar-weekdays">{weekdayLabels.map((day) => <span key={day}>{day}</span>)}</div>
+      <div className="cms-calendar-grid">{cells.map((date, index) => { if (!date) return <span key={index} />; const iso = toISODate(date); return <button type="button" key={index} className={`${iso === value ? 'is-selected' : ''} ${iso === todayIso ? 'is-today' : ''}`} onClick={() => { onChange(iso); setOpen(false) }}>{date.getDate()}</button> })}</div>
+      {value && <Button type="button" variant="ghost" compact onClick={() => { onChange(null); setOpen(false) }}>Clear date</Button>}
+    </div></Portal>}
+  </div>
+}
+
+type DateFieldProps = Omit<FieldProps, 'children'> & { value: string | null; onChange: (value: string | null) => void; variant?: 'input' | 'calendar' }
+export function DateField({ label, required, hint, error, value, onChange, variant = 'input' }: DateFieldProps) {
+  if (variant === 'calendar') return <Field label={label} required={required} hint={hint} error={error}><CalendarDateControl label={label} value={value} onChange={onChange} /></Field>
+  return <Field label={label} required={required} hint={hint} error={error}><span className="cms-input-shell"><input type="date" aria-label={label} value={value ?? ''} onChange={(event) => onChange(event.target.value || null)} /></span></Field>
+}
+
+type FileFieldProps = Omit<FieldProps, 'children'> & { value: string; onChange: (value: string) => void; disabled?: boolean; accept?: string }
+export function FileField({ label, required, hint, error, value, onChange, disabled, accept }: FileFieldProps) {
+  const [status, setStatus] = useState('')
+  async function handleFile(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    event.target.value = ''
+    if (!file) return
+    setStatus('Uploading…')
+    const form = new FormData(); form.append('file', file); form.append('folder', 'uploads')
+    try {
+      const response = await fetch('/api/admin/upload', { method: 'POST', body: form })
+      const data = await response.json() as { url?: string; error?: string }
+      if (!response.ok || !data.url) throw new Error(data.error || 'Could not upload file.')
+      onChange(data.url)
+      setStatus('')
+    } catch (caught) { setStatus(caught instanceof Error ? caught.message : 'Could not upload file.') }
+  }
+  return <Field label={label} required={required} hint={hint} error={error}>
+    <div className="cms-file-control">
+      {value && <a href={value} target="_blank" rel="noreferrer" className="cms-file-current">{value.split('/').pop()}</a>}
+      {!disabled && <input type="file" accept={accept} aria-label={label} onChange={(event) => void handleFile(event)} />}
+      {value && !disabled && <Button type="button" variant="ghost" compact onClick={() => onChange('')}>Remove file</Button>}
+    </div>
+    {status && <small className={status.startsWith('Could not') ? 'field-error' : 'cms-file-status'}>{status}</small>}
+  </Field>
+}
+
+/** Local text state resynced from `value` only when it changes for a reason other than this
+ *  component's own last edit — same pattern as `useKeyedRows` — so a valid keystroke doesn't get
+ *  immediately re-formatted by `JSON.stringify` and jump the cursor. */
+type JsonFieldProps = Omit<FieldProps, 'children'> & { value: unknown; onChange: (value: unknown) => void; disabled?: boolean }
+export function JsonField({ label, required, hint, error, value, onChange, disabled }: JsonFieldProps) {
+  const [text, setText] = useState(() => JSON.stringify(value, null, 2))
+  const [parseError, setParseError] = useState('')
+  const lastEmitted = useRef(value)
+  useEffect(() => { if (value !== lastEmitted.current) { setText(JSON.stringify(value, null, 2)); lastEmitted.current = value } }, [value])
+  function handleChange(next: string) {
+    setText(next)
+    try { const parsed = JSON.parse(next); setParseError(''); lastEmitted.current = parsed; onChange(parsed) } catch { setParseError('Invalid JSON.') }
+  }
+  return <Field label={label} required={required} hint={hint} error={error || parseError}>
+    <span className="cms-input-shell cms-textarea-shell cms-json-shell"><textarea aria-label={label} value={text} disabled={disabled} spellCheck={false} onChange={(event) => handleChange(event.target.value)} /></span>
+  </Field>
+}
+
+type PointFieldProps = Omit<FieldProps, 'children'> & { value: { lat: number; lng: number }; onChange: (value: { lat: number; lng: number }) => void; disabled?: boolean }
+export function PointField({ label, required, hint, error, value, onChange, disabled }: PointFieldProps) {
+  return <Field label={label} required={required} hint={hint} error={error}>
+    <div className="cms-point-field">
+      <div className="cms-point-control">
+        <span className="cms-input-shell"><input type="number" step="any" aria-label={`${label} latitude`} placeholder="Latitude" value={value.lat} disabled={disabled} onChange={(event) => onChange({ ...value, lat: Number(event.target.value) })} /></span>
+        <span className="cms-input-shell"><input type="number" step="any" aria-label={`${label} longitude`} placeholder="Longitude" value={value.lng} disabled={disabled} onChange={(event) => onChange({ ...value, lng: Number(event.target.value) })} /></span>
+      </div>
+      <MapPicker lat={value.lat} lng={value.lng} disabled={disabled} onChange={(lat, lng) => onChange({ lat, lng })} />
+    </div>
+  </Field>
+}

package/src/admin/FilterBuilder.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from './Button'
+
+export type FilterOperator = 'is' | 'isNot' | 'isEmpty' | 'isNotEmpty'
+export type FilterFieldDef = {
+  key: string
+  label: string
+  type: 'text' | 'select'
+  options?: { value: string; label: string }[]
+  supportsEmpty?: boolean
+}
+export type FilterRule = { id: string; field: string; operator: FilterOperator; value: string }
+
+const operatorLabel: Record<FilterOperator, string> = { is: 'is', isNot: 'is not', isEmpty: 'is empty', isNotEmpty: 'has a value' }
+const needsValue = (operator: FilterOperator) => operator === 'is' || operator === 'isNot'
+
+function valueLabelFor(fieldDef: FilterFieldDef | undefined, value: string) {
+  return fieldDef?.options?.find((option) => option.value === value)?.label ?? value
+}
+
+export function FilterBuilder({ fields, rules, onAdd, onRemove }: { fields: FilterFieldDef[]; rules: FilterRule[]; onAdd: (rule: FilterRule) => void; onRemove: (id: string) => void }) {
+  const [adding, setAdding] = useState(false)
+  const [field, setField] = useState(fields[0]?.key ?? '')
+  const [operator, setOperator] = useState<FilterOperator>('is')
+  const [value, setValue] = useState('')
+  const fieldDef = fields.find((item) => item.key === field)
+
+  function startAdding() { setField(fields[0]?.key ?? ''); setOperator('is'); setValue(''); setAdding(true) }
+  function changeField(nextField: string) { setField(nextField); setOperator('is'); setValue('') }
+  function submit() {
+    onAdd({ id: crypto.randomUUID(), field, operator, value: needsValue(operator) ? value : '' })
+    setAdding(false)
+  }
+
+  return <div className="cms-filters">
+    {rules.map((rule) => {
+      const def = fields.find((item) => item.key === rule.field)
+      return <span className="cms-filter-chip" key={rule.id}>
+        <b>{def?.label ?? rule.field}</b> {operatorLabel[rule.operator]}{needsValue(rule.operator) ? ` "${valueLabelFor(def, rule.value)}"` : ''}
+        <button type="button" onClick={() => onRemove(rule.id)} aria-label="Remove filter">×</button>
+      </span>
+    })}
+    {adding
+      ? <span className="cms-filter-builder">
+        <select value={field} onChange={(event) => changeField(event.target.value)}>{fields.map((item) => <option key={item.key} value={item.key}>{item.label}</option>)}</select>
+        <select value={operator} onChange={(event) => setOperator(event.target.value as FilterOperator)}>
+          <option value="is">is</option>
+          <option value="isNot">is not</option>
+          {fieldDef?.supportsEmpty && <option value="isEmpty">is empty</option>}
+          {fieldDef?.supportsEmpty && <option value="isNotEmpty">has a value</option>}
+        </select>
+        {needsValue(operator) && (fieldDef?.type === 'select'
+          ? <select value={value} onChange={(event) => setValue(event.target.value)}><option value="">Choose…</option>{fieldDef.options?.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select>
+          : <input value={value} onChange={(event) => setValue(event.target.value)} placeholder="Value" autoFocus />)}
+        <Button variant="positive" compact type="button" onClick={submit} disabled={needsValue(operator) && !value}>Add</Button>
+        <Button variant="ghost" compact type="button" onClick={() => setAdding(false)}>Cancel</Button>
+      </span>
+      : <Button variant="secondary" compact type="button" onClick={startAdding}>+ Add filter</Button>}
+  </div>
+}

package/src/admin/GroupField.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { DynamicField } from './DynamicField'
+import { Field } from './Field'
+import type { FieldConfig } from '../collections/types'
+import { formatFieldValue, isFieldVisible } from '../collections/values'
+
+type GroupFieldConfig = Extract<FieldConfig, { type: 'group' }>
+type Row = Record<string, unknown>
+
+/** A nested object WITHOUT repetition — one occurrence, unlike `array`/`blocks`. Visually it's
+ *  "one ArrayField row with no add/remove/reorder chrome", so it reuses the same
+ *  `cms-content-field-grid` layout and `cms-array-row`-family CSS. */
+export function GroupField({ field, value, onChange, label, hint, error, disabled }: {
+  field: GroupFieldConfig
+  value: Row
+  onChange: (value: Row) => void
+  label: string
+  hint?: string
+  error?: string
+  disabled?: boolean
+}) {
+  const visibleFields = field.fields.filter((subfield) => isFieldVisible(subfield, value))
+
+  if (disabled) {
+    return (
+      <Field label={label} required={field.required} hint={hint} error={error}>
+        <div className="cms-array-field cms-array-readonly">
+          <div className="cms-array-row cms-array-row-readonly">
+            {visibleFields.map((subfield) => (
+              <div className="cms-array-readonly-cell" key={subfield.key}>
+                <span className="cms-array-readonly-label">{subfield.label}</span>
+                <span>{formatFieldValue(subfield, value[subfield.key])}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Field>
+    )
+  }
+
+  return (
+    <Field label={label} required={field.required} hint={hint} error={error}>
+      <div className="cms-array-row cms-group-row">
+        <div className="cms-content-field-grid">
+          {visibleFields.map((subfield) => (
+            <div key={subfield.key} className={`cms-content-field cms-content-field-${subfield.width ?? 'full'}`}>
+              <DynamicField
+                field={subfield}
+                value={value[subfield.key]}
+                onChange={(next) => onChange({ ...value, [subfield.key]: next })}
+                label={subfield.label}
+                hint={subfield.hint}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </Field>
+  )
+}

package/src/admin/ImageUploader.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { ChangeEvent, DragEvent, MouseEvent, useState } from 'react'
+import Cropper, { Area } from 'react-easy-crop'
+import imageCompression from 'browser-image-compression'
+import { useBodyScrollLock } from '../useBodyScrollLock'
+import { Portal } from './Portal'
+import { CloseButton } from './CloseButton'
+import { Button } from './Button'
+
+type Folder = { id: string; name: string; slug: string }
+type Media = { id: string; filename: string; url: string; folder: string; mimeType: string }
+type Props = {
+  value: string
+  onChange: (url: string) => void
+  label?: string
+  title?: string
+  compact?: boolean
+  aspect?: number
+  allowRemove?: boolean
+}
+
+const ACCEPTED_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+
+async function croppedFile(source: string, area: Area, filename: string) {
+  const image = new Image()
+  image.src = source
+  await new Promise<void>((resolve, reject) => { image.onload = () => resolve(); image.onerror = () => reject(new Error('Could not load image')) })
+  const canvas = document.createElement('canvas')
+  canvas.width = area.width
+  canvas.height = area.height
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Canvas is unavailable')
+  context.drawImage(image, area.x, area.y, area.width, area.height, 0, 0, area.width, area.height)
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/webp', 0.86))
+  if (!blob) throw new Error('Could not crop image')
+  return new File([blob], `${filename.replace(/\.[^.]+$/, '')}.webp`, { type: 'image/webp' })
+}
+
+function UploadIcon() {
+  return <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 15V4" /><path d="M7.5 8.5 12 4l4.5 4.5" /><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+  </svg>
+}
+
+export function ImageUploader({ value, onChange, label = 'Choose media', title, compact = false, aspect = 4 / 3, allowRemove = true }: Props) {
+  const [picker, setPicker] = useState(false)
+  const [tab, setTab] = useState<'library' | 'upload'>('library')
+  const [folders, setFolders] = useState<Folder[]>([])
+  const [media, setMedia] = useState<Media[]>([])
+  const [folder, setFolder] = useState('uploads')
+  const [newFolder, setNewFolder] = useState('')
+  const [source, setSource] = useState('')
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [area, setArea] = useState<Area | null>(null)
+  const [filename, setFilename] = useState('image')
+  const [status, setStatus] = useState('')
+  const [dragActive, setDragActive] = useState(false)
+  useBodyScrollLock(picker || !!source)
+
+  async function load(nextFolder = folder) {
+    const response = await fetch(`/api/admin/media?folder=${encodeURIComponent(nextFolder)}`)
+    const data = await response.json()
+    if (!response.ok) { setStatus(data.error || 'Could not load media'); return }
+    setFolders(data.folders)
+    setMedia((data.media as Media[]).filter((item) => item.mimeType.startsWith('image/')))
+    setFolder(nextFolder)
+  }
+
+  async function open() { setStatus(''); await load('uploads'); setPicker(true) }
+
+  async function createFolder() {
+    const response = await fetch('/api/admin/media', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: newFolder }) })
+    const data = await response.json()
+    if (!response.ok) { setStatus(data.error || 'Could not create folder'); return }
+    setNewFolder('')
+    await load(data.slug)
+  }
+
+  async function handleFile(file: File) {
+    if (!ACCEPTED_TYPES.includes(file.type)) { setStatus('Use JPEG, PNG, or WebP.'); return }
+    try {
+      setStatus('Optimizing image…')
+      const optimized = await imageCompression(file, { maxSizeMB: 1, maxWidthOrHeight: 1920, useWebWorker: true })
+      setFilename(optimized.name || 'image')
+      setSource(URL.createObjectURL(optimized))
+      setCrop({ x: 0, y: 0 })
+      setZoom(1)
+      setPicker(false)
+      setStatus('')
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : 'Could not optimize image.')
+    }
+  }
+
+  async function select(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    event.target.value = ''
+    if (!file) return
+    await handleFile(file)
+  }
+
+  function onDragOver(event: DragEvent<HTMLDivElement>) { event.preventDefault(); if (!compact) setDragActive(true) }
+  function onDragLeave(event: DragEvent<HTMLDivElement>) { event.preventDefault(); setDragActive(false) }
+  async function onDrop(event: DragEvent<HTMLDivElement>) {
+    event.preventDefault()
+    setDragActive(false)
+    if (compact) return
+    const file = event.dataTransfer.files?.[0]
+    if (file) await handleFile(file)
+  }
+
+  function remove(event: MouseEvent) { event.stopPropagation(); onChange('') }
+
+  async function upload() {
+    if (!source || !area) return
+    try {
+      setStatus('Uploading…')
+      const file = await croppedFile(source, area, filename)
+      const form = new FormData()
+      form.append('file', file)
+      form.append('folder', folder)
+      const response = await fetch('/api/admin/upload', { method: 'POST', body: form })
+      const data = await response.json() as { url?: string; error?: string }
+      if (!response.ok || !data.url) throw new Error(data.error)
+      onChange(data.url)
+      URL.revokeObjectURL(source)
+      setSource('')
+      setStatus('Uploaded')
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : 'Could not upload image.')
+    }
+  }
+
+  return <div className={`image-uploader ${compact ? 'image-uploader-compact' : ''}`}>
+    {compact
+      ? <div className="image-upload-actions">
+          <Button type="button" variant="secondary" title={title} aria-label={title || label} className="cms-upload-button cms-richtext-media-trigger" onClick={open}>{label}</Button>
+        </div>
+      : <div
+          className={`cms-media-field ${value ? 'has-value' : ''} ${dragActive ? 'is-drag-active' : ''}`}
+          style={{ aspectRatio: value ? aspect : undefined }}
+          role="button"
+          tabIndex={0}
+          title={title}
+          aria-label={title || label}
+          onClick={open}
+          onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); void open() } }}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={(event) => void onDrop(event)}
+        >
+          {value
+            ? <>
+                <img src={value} alt="Current media" className="cms-media-field-preview" />
+                <div className="cms-media-field-overlay"><span>Replace image</span></div>
+                {allowRemove && <button type="button" className="cms-media-field-remove" onClick={remove} aria-label="Remove image">×</button>}
+              </>
+            : <div className="cms-media-field-empty">
+                <UploadIcon />
+                <strong>{label}</strong>
+                <span>Drag &amp; drop an image, or click to browse your library</span>
+              </div>}
+        </div>}
+    {!compact && status && <p className="image-upload-status">{status}</p>}
+    {picker && <Portal><div className="media-picker-modal" role="dialog" aria-modal="true" aria-label="Choose media">
+      <div className="media-picker">
+        <header><strong>Choose media</strong><CloseButton onClick={() => setPicker(false)} /></header>
+        <div className="media-picker-tabs">
+          <button className={tab === 'library' ? 'active' : ''} onClick={() => setTab('library')}>Media library</button>
+          <button className={tab === 'upload' ? 'active' : ''} onClick={() => setTab('upload')}>Upload file</button>
+        </div>
+        <div className="media-folder-row">
+          <select value={folder} onChange={(event) => void load(event.target.value)}>{folders.map((item) => <option key={item.id} value={item.slug}>{item.name}</option>)}</select>
+          <input value={newFolder} onChange={(event) => setNewFolder(event.target.value)} placeholder="New folder" />
+          <Button variant="positive" compact onClick={createFolder}>Create</Button>
+        </div>
+        {tab === 'library'
+          ? <div className="media-picker-grid">
+              {media.map((item) => <button key={item.id} onClick={() => { onChange(item.url); setPicker(false) }}><img src={item.url} alt={item.filename} /><span>{item.filename}</span></button>)}
+              {!media.length && <p>No images in this folder.</p>}
+            </div>
+          : <label className="media-dropzone"><UploadIcon /><strong>Select image from files</strong><span>JPEG, PNG, or WebP</span><input type="file" accept="image/jpeg,image/png,image/webp" onChange={(event) => void select(event)} /></label>}
+      </div>
+    </div></Portal>}
+    {source && <Portal><div className="crop-modal" role="dialog" aria-modal="true" aria-label="Crop image">
+      <div className="crop-panel">
+        <div className="crop-stage"><Cropper image={source} crop={crop} zoom={zoom} aspect={aspect} onCropChange={setCrop} onZoomChange={setZoom} onCropComplete={(_, pixels) => setArea(pixels)} /></div>
+        <label>Zoom<input type="range" min={1} max={3} step={0.1} value={zoom} onChange={(event) => setZoom(Number(event.target.value))} /></label>
+        <div className="crop-actions">
+          <Button type="button" variant="secondary" onClick={() => { URL.revokeObjectURL(source); setSource('') }}>Cancel</Button>
+          <Button type="button" variant="primary" onClick={upload} icon="↗">Crop &amp; upload</Button>
+        </div>
+      </div>
+    </div></Portal>}
+  </div>
+}

package/src/admin/ListingSettingsModal.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { Reorder, useDragControls } from 'framer-motion'
+import { Portal } from './Portal'
+import { CloseButton } from './CloseButton'
+import { useBodyScrollLock } from '../useBodyScrollLock'
+import type { Column } from './ListingView'
+import { Button } from './Button'
+
+type Density = 'compact' | 'comfortable' | 'spacious'
+type View = 'table' | 'grid'
+const densityOptions: { value: Density; label: string }[] = [
+  { value: 'compact', label: 'Compact' },
+  { value: 'comfortable', label: 'Comfortable' },
+  { value: 'spacious', label: 'Spacious' },
+]
+const viewOptions: { value: View; label: string }[] = [
+  { value: 'table', label: 'Table' },
+  { value: 'grid', label: 'Grid' },
+]
+
+type ListingSettingsModalProps<T> = {
+  onClose: () => void
+  view: View
+  onViewChange: (view: View) => void
+  density: Density
+  onDensityChange: (density: Density) => void
+  columns: Column<T>[]
+  hidden: string[]
+  labels: Record<string, string>
+  onToggleColumn: (key: string) => void
+  onReorderColumns: (keys: string[]) => void
+  onRenameColumn: (key: string, label: string) => void
+}
+
+function FieldRow<T>({ column, label, checked, onToggle, onRename }: { column: Column<T>; label: string; checked: boolean; onToggle: () => void; onRename: (label: string) => void }) {
+  const controls = useDragControls()
+  return <Reorder.Item value={column.key} dragListener={false} dragControls={controls} className="cms-columns-row" whileDrag={{ scale: 1.02, boxShadow: '0 8px 20px rgba(23,23,23,.18)' }}>
+    <button type="button" className="cms-columns-drag-handle" onPointerDown={(event) => controls.start(event)} aria-label={`Drag to reorder ${label}`}>
+      <svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor"><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>
+    </button>
+    <span className="cms-columns-check"><input type="checkbox" aria-label={`Show ${label} field`} checked={checked} onChange={onToggle} /><input className="cms-columns-rename" value={label} onChange={(event) => onRename(event.target.value)} /></span>
+  </Reorder.Item>
+}
+
+export function ListingSettingsModal<T>({ onClose, view, onViewChange, density, onDensityChange, columns, hidden, labels, onToggleColumn, onReorderColumns, onRenameColumn }: ListingSettingsModalProps<T>) {
+  useBodyScrollLock(true)
+  return <Portal><div className="listing-settings-modal" role="dialog" aria-modal="true" aria-label="View settings" onClick={onClose}><div className="listing-settings-panel" onClick={(event) => event.stopPropagation()}>
+    <header><strong>View settings</strong><CloseButton onClick={onClose} /></header>
+
+    <section>
+      <p className="listing-settings-label">Layout</p>
+      <div className="cms-density-toggle listing-settings-density">{viewOptions.map((option) => <Button key={option.value} variant="secondary" compact type="button" className={view === option.value ? 'active' : ''} onClick={() => onViewChange(option.value)}>{option.label}</Button>)}</div>
+    </section>
+
+    <section>
+      <p className="listing-settings-label">Density</p>
+      <div className="cms-density-toggle listing-settings-density">{densityOptions.map((option) => <Button key={option.value} variant="secondary" compact type="button" className={density === option.value ? 'active' : ''} onClick={() => onDensityChange(option.value)}>{option.label}</Button>)}</div>
+    </section>
+
+    <section>
+      <p className="listing-settings-label">Fields</p>
+      <Reorder.Group axis="y" values={columns.map((column) => column.key)} onReorder={onReorderColumns} className="listing-settings-columns">
+        {columns.map((column) => <FieldRow key={column.key} column={column} label={labels[column.key] || column.label} checked={!hidden.includes(column.key)} onToggle={() => onToggleColumn(column.key)} onRename={(label) => onRenameColumn(column.key, label)} />)}
+      </Reorder.Group>
+    </section>
+  </div></div></Portal>
+}