@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

package/src/components/sections/SectionFields.tsx

@@ -0,0 +1,560 @@
+import { useEffect, useRef, useState, type ReactNode, type PointerEvent as ReactPointerEvent } from 'react';
+import { DndContext, PointerSensor, KeyboardSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { defaultValue, fieldVisible, itemTitle, newRowId, normalizeValue, SOURCE_LIMIT_MAX } from '../../theme-sdk/fields.mjs';
+
+// Inputs for every section field type. Values follow theme-sdk/fields.mjs;
+// each input receives the normalized value and reports the whole new value.
+
+export type ScalarType = 'text' | 'textarea' | 'richtext' | 'image' | 'url' | 'link' | 'select' | 'number' | 'toggle' | 'date' | 'time';
+export type Scalar = string | number | boolean;
+export interface LinkValue { label: string; href: string; ref?: string }
+export interface VisibleIf { field: string; equals?: unknown; notEquals?: unknown; in?: unknown[] }
+export interface ScalarFieldDef { label: string; type: ScalarType; default?: unknown; options?: string[]; help?: string; placeholder?: string; visibleIf?: VisibleIf; required?: boolean; maxLength?: number; aiHint?: string; locked?: boolean }
+export interface ListFieldDef { label: string; type: 'list'; fields: Record<string, ScalarFieldDef>; itemLabel?: string; min?: number; max?: number; help?: string; default?: unknown; visibleIf?: VisibleIf; locked?: boolean }
+export interface SourceFieldDef { label: string; type: 'source'; source: 'events' | 'posts' | 'bookings'; help?: string; default?: unknown; visibleIf?: VisibleIf; locked?: boolean }
+export type FieldDef = ScalarFieldDef | ListFieldDef | SourceFieldDef;
+export type Row = Record<string, unknown>;
+
+export interface SectionTargets {
+  links: { ref: string; label: string; url: string; group: string }[];
+  calendars: { slug: string; name: string }[];
+  collections: { key: string; label: string }[];
+  tags: string[];
+  resources: { slug: string; name: string }[];
+  features: { events: boolean; bookings: boolean };
+  ai?: { enabled: boolean; languages: string[] };
+  i18n?: { defaultLocale: string; locales: { code: string; name: string }[]; drafts: boolean };
+}
+
+export const EMPTY_TARGETS: SectionTargets = { links: [], calendars: [], collections: [], tags: [], resources: [], features: { events: false, bookings: false }, ai: { enabled: false, languages: [] }, i18n: { defaultLocale: '', locales: [], drafts: false } };
+
+interface InputProps<F, V> {
+  id: string;
+  field: F;
+  value: V;
+  onChange: (v: unknown) => void;
+  targets: SectionTargets;
+  /** open the media picker; `apply` receives the chosen image URL */
+  pickImage: (apply: (src: string) => void) => void;
+  /** the section's other filled-in text, for AI help ("Heading: Join us") */
+  context?: string;
+  /** image fields: stored focal point ("30% 20%") and its setter */
+  focal?: string;
+  onFocal?: (v: string | undefined) => void;
+}
+
+const Help = ({ text }: { text?: string }) => (text ? <small className="hint te-help">{text}</small> : null);
+/** live character counter for fields with a maxLength */
+const Count = ({ max, value }: { max?: number; value: string }) =>
+  max ? <b className={`te-count-chars ${value.length > max ? 'is-over' : ''}`}>{value.length} / {max}</b> : null;
+
+export function FieldInput(props: InputProps<FieldDef, unknown>) {
+  const { field } = props;
+  if (field.type === 'list') return <ListInput {...props} field={field} value={props.value as Row[]} />;
+  if (field.type === 'source') return <SourceInput {...props} field={field} value={props.value as Row} />;
+  return <ScalarInput {...props} field={field} />;
+}
+
+function ScalarInput({ id, field, value, onChange, targets, pickImage, context, focal, onFocal }: InputProps<ScalarFieldDef, unknown>) {
+  const str = typeof value === 'string' ? value : value === undefined || value === null ? '' : String(value);
+  switch (field.type) {
+    case 'textarea':
+      return (
+        <label className="field" htmlFor={id}>
+          <span className="te-label">{field.label}{field.required && <i className="te-req"> required</i>}<Count max={field.maxLength} value={str} /></span>
+          <textarea id={id} rows={3} value={str} placeholder={field.placeholder} onChange={(e) => onChange(e.target.value)} />
+          <Help text={field.help} />
+          <AiAssist kind="textarea" field={field} value={str} onChange={onChange} targets={targets} context={context} />
+        </label>
+      );
+    case 'richtext':
+      return (
+        <div className="field te-rich-field">
+          <label htmlFor={id}><span>{field.label}</span></label>
+          <RichTextInput id={id} value={str} onChange={onChange} />
+          <Help text={field.help} />
+          <AiAssist kind="richtext" field={field} value={str} onChange={onChange} targets={targets} context={context} />
+        </div>
+      );
+    case 'number':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input id={id} type="number" value={typeof value === 'number' ? String(value) : ''} onChange={(e) => {
+            const n = e.target.valueAsNumber;
+            onChange(e.target.value === '' || !Number.isFinite(n) ? 0 : n);
+          }} />
+          <Help text={field.help} />
+        </label>
+      );
+    case 'toggle':
+      return (
+        <div className="field te-toggle-field">
+          <button id={id} type="button" role="switch" aria-checked={value === true} className={`te-switch ${value === true ? 'on' : ''}`} onClick={() => onChange(value !== true)}>
+            <i aria-hidden="true" />
+          </button>
+          <label htmlFor={id}>{field.label}</label>
+          <Help text={field.help} />
+        </div>
+      );
+    case 'date':
+    case 'time':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input id={id} type={field.type} value={str} onChange={(e) => onChange(e.target.value)} />
+          <Help text={field.help} />
+        </label>
+      );
+    case 'select': {
+      const opts = field.options ?? [];
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <select id={id} value={str} onChange={(e) => onChange(e.target.value)}>
+            {!opts.includes(str) && <option value={str}>{str === '' ? 'Choose…' : `${str} (not an option)`}</option>}
+            {opts.map((o) => <option key={o} value={o}>{o}</option>)}
+          </select>
+          <Help text={field.help} />
+        </label>
+      );
+    }
+    case 'image':
+      return (
+        <div className="field te-image">
+          <label htmlFor={id}><span>{field.label}</span></label>
+          <div className="te-image-row">
+            {str !== '' && <img className="te-thumb" src={str} alt="" />}
+            <input id={id} className="mono" type="url" placeholder="https://" value={str} onChange={(e) => onChange(e.target.value)} />
+            <button className="btn sm" type="button" onClick={() => pickImage((src) => onChange(src))}>Choose…</button>
+          </div>
+          {str !== '' && onFocal && <FocalPoint src={str} value={focal} onChange={onFocal} />}
+          <Help text={field.help} />
+        </div>
+      );
+    case 'url':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input id={id} className="mono" type="url" placeholder={field.placeholder ?? 'https:// or /path'} value={str} onChange={(e) => onChange(e.target.value)} />
+          <Help text={field.help} />
+        </label>
+      );
+    case 'link':
+      return <LinkInput id={id} label={field.label} help={field.help} value={value as LinkValue} onChange={onChange} targets={targets} />;
+    default:
+      return (
+        <label className="field" htmlFor={id}>
+          <span className="te-label">{field.label}{field.required && <i className="te-req"> required</i>}<Count max={field.maxLength} value={str} /></span>
+          <input id={id} type="text" value={str} placeholder={field.placeholder} onChange={(e) => onChange(e.target.value)} />
+          <Help text={field.help} />
+          <AiAssist kind="text" field={field} value={str} onChange={onChange} targets={targets} context={context} />
+        </label>
+      );
+  }
+}
+
+// ---- image focal point -----------------------------------------------------
+
+function FocalPoint({ src, value, onChange }: { src: string; value?: string; onChange: (v: string | undefined) => void }) {
+  const [open, setOpen] = useState(false);
+  const m = /^(\d+)% (\d+)%$/.exec(value ?? '');
+  const x = m ? Number(m[1]) : 50, y = m ? Number(m[2]) : 50;
+  const label = !m || (x === 50 && y === 50) ? 'center' : `${x < 34 ? 'left' : x > 66 ? 'right' : 'middle'} · ${y < 34 ? 'top' : y > 66 ? 'bottom' : 'middle'}`;
+  const set = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    const nx = Math.round(((e.clientX - r.left) / r.width) * 100), ny = Math.round(((e.clientY - r.top) / r.height) * 100);
+    onChange(`${Math.max(0, Math.min(100, nx))}% ${Math.max(0, Math.min(100, ny))}%`);
+  };
+  return (
+    <div className="te-focal">
+      <button type="button" className="te-focal-toggle" aria-expanded={open} onClick={() => setOpen(!open)}>
+        Focus: {label} · {open ? 'Done' : 'Set focus'}
+      </button>
+      {open && (
+        <>
+          <div className="te-focal-img" onPointerDown={set} role="application" aria-label="Click the most important part of the photo">
+            <img src={src} alt="" draggable={false} />
+            <span className="te-focal-dot" style={{ left: `${x}%`, top: `${y}%` }} aria-hidden="true" />
+          </div>
+          <div className="te-focal-preview" aria-hidden="true">
+            {[['Wide', '16 / 7'], ['Card', '4 / 3'], ['Phone', '3 / 4']].map(([n, r]) => (
+              <span key={n}><img src={src} alt="" style={{ aspectRatio: r, objectPosition: `${x}% ${y}%` }} /><small>{n}</small></span>
+            ))}
+          </div>
+          <small className="hint te-help">Click the part that must never be cropped, like a face. {m && <button type="button" className="te-reset-inline" onClick={() => onChange(undefined)}>Reset to center</button>}</small>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ---- AI help ("Help me write") ---------------------------------------------
+
+type AiAction = 'shorter' | 'friendlier' | 'clearer' | 'translate' | 'draft';
+function AiAssist({ kind, field, value, onChange, targets, context }: {
+  kind: 'text' | 'textarea' | 'richtext'; field: ScalarFieldDef; value: string; onChange: (v: unknown) => void; targets: SectionTargets; context?: string;
+}) {
+  const [menu, setMenu] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+  const [lang, setLang] = useState('');
+  const [suggestion, setSuggestion] = useState<{ text: string; action: AiAction } | null>(null);
+  const box = useRef<HTMLSpanElement>(null);
+  useEffect(() => {
+    if (!menu) return;
+    const close = (e: MouseEvent) => { if (!box.current?.contains(e.target as Node)) setMenu(false); };
+    addEventListener('mousedown', close);
+    return () => removeEventListener('mousedown', close);
+  }, [menu]);
+  if (!targets.ai?.enabled) return null;
+  const empty = !value.replace(/<[^>]+>/g, '').trim();
+  const run = async (action: AiAction, language = lang) => {
+    setMenu(false); setBusy(true); setErr('');
+    try {
+      const res = await fetch('/api/design/ai', {
+        method: 'POST', headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ action, text: value, label: field.label, kind, hint: field.aiHint, maxLength: field.maxLength, language: action === 'translate' ? language : undefined, context }),
+      });
+      const body = await res.json().catch(() => ({})) as { text?: string; error?: string };
+      if (!res.ok || !body.text) { setErr(body.error || `AI help failed (${res.status}).`); return; }
+      setSuggestion({ text: body.text, action });
+    } catch { setErr('Couldn’t reach the server.'); } finally { setBusy(false); }
+  };
+  const item = (label: string, action: AiAction, disabled = false) => (
+    <button type="button" role="menuitem" disabled={disabled} onClick={(e) => { e.preventDefault(); void run(action); }}>{label}</button>
+  );
+  return (
+    <span className={`te-ai ${menu || busy || suggestion || err ? 'is-active' : ''}`} ref={box}>
+      <button type="button" className="te-ai-btn" aria-haspopup="menu" aria-expanded={menu} disabled={busy} onClick={(e) => { e.preventDefault(); setMenu(!menu); }}>
+        {busy ? 'Writing…' : '✦ Help me write'}
+      </button>
+      {menu && (
+        <span className="te-ai-menu" role="menu">
+          {empty ? item('Write a first draft', 'draft') : (
+            <>
+              {item('Make it shorter', 'shorter')}
+              {item('Make it friendlier', 'friendlier')}
+              {item('Fix spelling and clarity', 'clearer')}
+              <span className="te-ai-translate">
+                <select aria-label="Translate to" value={lang} onChange={(e) => { setLang(e.target.value); if (e.target.value) void run('translate', e.target.value); }}>
+                  <option value="">Translate to…</option>
+                  {targets.ai.languages.map((l) => <option key={l} value={l}>{l}</option>)}
+                </select>
+              </span>
+              {item('Rewrite from scratch', 'draft')}
+            </>
+          )}
+          <small>Uses your AI provider. You review it before anything changes.</small>
+        </span>
+      )}
+      {err && <small className="te-error">{err}</small>}
+      {suggestion && (
+        <span className="te-ai-suggest" role="status">
+          {kind === 'richtext'
+            ? <span className="te-ai-text" dangerouslySetInnerHTML={{ __html: suggestion.text }} />
+            : <span className="te-ai-text">{suggestion.text}</span>}
+          <span className="te-ai-actions">
+            <button type="button" className="btn sm primary" onClick={(e) => { e.preventDefault(); onChange(suggestion.text); setSuggestion(null); }}>Use this</button>
+            <button type="button" className="btn sm" onClick={(e) => { e.preventDefault(); void run(suggestion.action); }}>Try again</button>
+            <button type="button" className="btn sm ghost" onClick={(e) => { e.preventDefault(); setSuggestion(null); }}>Dismiss</button>
+          </span>
+        </span>
+      )}
+    </span>
+  );
+}
+
+// ---- link -----------------------------------------------------------------
+
+const CUSTOM = '__custom';
+
+function LinkInput({ id, label, help, value, onChange, targets }: { id: string; label: string; help?: string; value: LinkValue; onChange: (v: unknown) => void; targets: SectionTargets }) {
+  const v = value ?? { label: '', href: '' };
+  const target = v.ref ? targets.links.find((t) => t.ref === v.ref) : undefined;
+  // a ref whose target vanished (unpublished/deleted) keeps its stored href
+  const choice = target ? target.ref : v.ref ? `${v.ref}` : CUSTOM;
+  const groups = [...new Set(targets.links.map((t) => t.group))];
+  return (
+    <fieldset className="field te-link">
+      <legend>{label}</legend>
+      <div className="te-link-row">
+        <input id={id} type="text" aria-label={`${label} text`} placeholder="Button text" value={v.label} onChange={(e) => onChange({ ...v, label: e.target.value })} />
+        <select aria-label={`${label} goes to`} value={choice} onChange={(e) => {
+          const t = targets.links.find((x) => x.ref === e.target.value);
+          onChange(t ? { label: v.label || t.label, href: t.url, ref: t.ref } : { label: v.label, href: v.href });
+        }}>
+          <option value={CUSTOM}>Custom URL…</option>
+          {v.ref && !target && <option value={v.ref}>Missing: {v.href || v.ref}</option>}
+          {groups.map((g) => (
+            <optgroup key={g} label={g}>
+              {targets.links.filter((t) => t.group === g).map((t) => <option key={t.ref} value={t.ref}>{t.label}</option>)}
+            </optgroup>
+          ))}
+        </select>
+      </div>
+      {choice === CUSTOM ? (
+        <input className="mono te-link-url" type="url" aria-label={`${label} URL`} placeholder="https:// or /path" value={v.href} onChange={(e) => onChange({ label: v.label, href: e.target.value })} />
+      ) : (
+        <small className="hint te-help">{target ? `Goes to ${target.url} · follows the page if its address changes` : 'That page is no longer published; the saved address is used.'}</small>
+      )}
+      <Help text={help} />
+    </fieldset>
+  );
+}
+
+// ---- source (linked data) -------------------------------------------------
+
+function SourceInput({ id, field, value, onChange, targets }: InputProps<SourceFieldDef, Row>) {
+  const v = value ?? {};
+  const set = (patch: Row) => {
+    const next: Row = { ...v, ...patch };
+    for (const k of Object.keys(next)) if (next[k] === '' || next[k] === undefined) delete next[k];
+    onChange(next);
+  };
+  const limit = typeof v.limit === 'number' ? v.limit : 3;
+  const off = (field.source === 'events' && !targets.features.events) || (field.source === 'bookings' && !targets.features.bookings);
+  let from = '';
+  let picker: ReactNode = null;
+  if (field.source === 'events') {
+    const cal = targets.calendars.find((c) => c.slug === v.calendar);
+    from = `Calendar${cal ? ` → ${cal.name}` : ' · all public calendars'}`;
+    picker = (
+      <select id={id} aria-label="Calendar" value={String(v.calendar ?? '')} onChange={(e) => set({ calendar: e.target.value })}>
+        <option value="">All public calendars</option>
+        {targets.calendars.map((c) => <option key={c.slug} value={c.slug}>{c.name}</option>)}
+      </select>
+    );
+  } else if (field.source === 'posts') {
+    const col = targets.collections.find((c) => c.key === (v.collection ?? 'posts'));
+    from = `${col?.label ?? 'Posts'}${v.tag ? ` tagged “${v.tag}”` : ''}`;
+    picker = (
+      <>
+        <select id={id} aria-label="Collection" value={String(v.collection ?? 'posts')} onChange={(e) => set({ collection: e.target.value === 'posts' ? '' : e.target.value })}>
+          {targets.collections.map((c) => <option key={c.key} value={c.key}>{c.label}</option>)}
+        </select>
+        <select aria-label="Tag" value={String(v.tag ?? '')} onChange={(e) => set({ tag: e.target.value })}>
+          <option value="">Any tag</option>
+          {targets.tags.map((t) => <option key={t} value={t}>{t}</option>)}
+        </select>
+      </>
+    );
+  } else {
+    const res = targets.resources.find((r) => r.slug === v.resource);
+    from = `Booking${res ? ` → ${res.name}` : ' · every public resource'}`;
+    picker = (
+      <select id={id} aria-label="Resource" value={String(v.resource ?? '')} onChange={(e) => set({ resource: e.target.value })}>
+        <option value="">Every public resource</option>
+        {targets.resources.map((r) => <option key={r.slug} value={r.slug}>{r.name}</option>)}
+      </select>
+    );
+  }
+  return (
+    <fieldset className="field te-source">
+      <legend>{field.label}</legend>
+      {off ? (
+        <p className="notice warn te-note">{field.source === 'events' ? 'The calendar is turned off in this site’s config, so this shows nothing.' : 'Bookings are turned off in this site’s config, so this shows nothing.'}</p>
+      ) : (
+        <>
+          <div className="te-source-row">
+            {picker}
+            <label className="te-source-limit">
+              <span>Show</span>
+              <input type="number" min={1} max={SOURCE_LIMIT_MAX} value={limit} onChange={(e) => {
+                const n = Math.round(e.target.valueAsNumber);
+                set({ limit: Number.isFinite(n) ? Math.max(1, Math.min(SOURCE_LIMIT_MAX, n)) : 3 });
+              }} />
+            </label>
+          </div>
+          <p className="te-linked"><b>Linked</b> · {from}. Updates on its own when that content changes.</p>
+        </>
+      )}
+      <Help text={field.help} />
+    </fieldset>
+  );
+}
+
+// ---- rich text ------------------------------------------------------------
+
+export function RichTextInput({ id, value, onChange }: { id: string; value: string; onChange: (v: unknown) => void }) {
+  const last = useRef(value);
+  const editor = useEditor({
+    extensions: [StarterKit.configure({ heading: { levels: [3, 4] }, codeBlock: false, horizontalRule: false, link: { openOnClick: false, autolink: true } })],
+    content: value || '',
+    immediatelyRender: false,
+    editorProps: { attributes: { id, class: 'te-rich-body', role: 'textbox', 'aria-multiline': 'true' } },
+    onUpdate: ({ editor }) => {
+      const html = editor.isEmpty ? '' : editor.getHTML();
+      last.current = html;
+      onChange(html);
+    },
+  });
+  // inside a disabled (locked) fieldset the editor is read-only too
+  useEffect(() => {
+    if (!editor) return;
+    const locked = Boolean(editor.view.dom.closest('fieldset:disabled'));
+    if (editor.isEditable === locked) editor.setEditable(!locked);
+  });
+  // outside changes (discard, reload) replace the document
+  useEffect(() => {
+    if (editor && value !== last.current) {
+      last.current = value;
+      editor.commands.setContent(value || '', { emitUpdate: false });
+    }
+  }, [editor, value]);
+  const btn = (label: string, title: string, active: boolean, run: () => void) => (
+    <button type="button" className={`te-rich-btn ${active ? 'on' : ''}`} title={title} aria-label={title} aria-pressed={active} onMouseDown={(e) => e.preventDefault()} onClick={run}>{label}</button>
+  );
+  return (
+    <div className="te-rich">
+      {editor && (
+        <div className="te-rich-bar" role="toolbar" aria-label="Formatting">
+          {btn('B', 'Bold', editor.isActive('bold'), () => editor.chain().focus().toggleBold().run())}
+          {btn('I', 'Italic', editor.isActive('italic'), () => editor.chain().focus().toggleItalic().run())}
+          {btn('•', 'Bulleted list', editor.isActive('bulletList'), () => editor.chain().focus().toggleBulletList().run())}
+          {btn('1.', 'Numbered list', editor.isActive('orderedList'), () => editor.chain().focus().toggleOrderedList().run())}
+          {btn('↗', editor.isActive('link') ? 'Remove link' : 'Link', editor.isActive('link'), () => {
+            if (editor.isActive('link')) { editor.chain().focus().unsetLink().run(); return; }
+            const href = window.prompt('Link to (https://… or /path)');
+            if (href && /^(https?:\/\/|mailto:|tel:|\/(?!\/)|#)/i.test(href.trim())) editor.chain().focus().setLink({ href: href.trim() }).run();
+          })}
+        </div>
+      )}
+      <EditorContent editor={editor} />
+    </div>
+  );
+}
+
+// ---- list (repeater) ------------------------------------------------------
+
+/** "Services" → "service", "People" → "person", "Photos" → "photo" */
+const singular = (label: string) => {
+  const w = label.trim().toLowerCase();
+  if (w === 'people') return 'person';
+  if (/(ies)$/.test(w)) return w.replace(/ies$/, 'y');
+  if (/(ches|shes|sses|xes)$/.test(w)) return w.replace(/es$/, '');
+  return w.endsWith('s') && !w.endsWith('ss') ? w.slice(0, -1) : w || 'item';
+};
+
+let rowSeq = 0;
+const rowId = () => `row-${++rowSeq}`;
+
+function ListInput({ id, field, value, onChange, targets, pickImage }: InputProps<ListFieldDef, Row[]>) {
+  const rows = Array.isArray(value) ? value : [];
+  const max = field.max ?? 50;
+  // dnd-kit needs stable ids; rows are plain data, so ids live beside them
+  const [ids, setIds] = useState<string[]>(() => rows.map(rowId));
+  const [open, setOpen] = useState<string | null>(null);
+  useEffect(() => {
+    if (ids.length !== rows.length) setIds(rows.map(rowId));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rows.length]);
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+  const commit = (next: Row[], nextIds: string[]) => { setIds(nextIds); onChange(next); };
+  // rows carry a stable hidden id so their translations follow them when reordered
+  const newRow = (): Row => ({ _id: newRowId(), ...Object.fromEntries(Object.entries(field.fields).map(([k, f]) => [k, defaultValue(f)])) });
+  const add = () => {
+    const nid = rowId();
+    commit([...rows, newRow()], [...ids, nid]);
+    setOpen(nid);
+  };
+  const remove = (i: number) => {
+    if (!window.confirm(`Remove “${itemTitle(field, rows[i], i)}”?`)) return;
+    commit(rows.filter((_, j) => j !== i), ids.filter((_, j) => j !== i));
+  };
+  const duplicate = (i: number) => {
+    const nid = rowId();
+    commit([...rows.slice(0, i + 1), { ...structuredClone(rows[i]), _id: newRowId() }, ...rows.slice(i + 1)], [...ids.slice(0, i + 1), nid, ...ids.slice(i + 1)]);
+    setOpen(nid);
+  };
+  const setCell = (i: number, key: string, v: unknown) => onChange(rows.map((r, j) => {
+    if (j !== i) return r;
+    const next = { ...r, [key]: v };
+    if (v === undefined) delete next[key];
+    return next;
+  }));
+  const onDragEnd = (e: DragEndEvent) => {
+    if (!e.over || e.active.id === e.over.id) return;
+    const from = ids.indexOf(String(e.active.id));
+    const to = ids.indexOf(String(e.over.id));
+    if (from < 0 || to < 0) return;
+    commit(arrayMove(rows, from, to), arrayMove(ids, from, to));
+  };
+  const safeIds = ids.length === rows.length ? ids : rows.map((_, i) => `pending-${i}`);
+  return (
+    <fieldset className="field te-list-field">
+      <legend>{field.label} <span className="te-count">{rows.length} of {max}</span></legend>
+      <div className="te-rows">
+        {rows.length === 0 && <p className="te-muted te-rows-empty">Nothing here yet.</p>}
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+          <SortableContext items={safeIds} strategy={verticalListSortingStrategy}>
+            {rows.map((row, i) => (
+              <ListRow
+                key={safeIds[i]}
+                sortId={safeIds[i]}
+                title={itemTitle(field, row, i)}
+                open={open === safeIds[i]}
+                onToggle={() => setOpen(open === safeIds[i] ? null : safeIds[i])}
+                onRemove={() => remove(i)}
+                onDuplicate={rows.length < max ? () => duplicate(i) : undefined}
+              >
+                {Object.entries(field.fields).filter(([, sub]) => fieldVisible(sub, row)).map(([key, sub]) => (
+                  <FieldInput
+                    key={key}
+                    id={`${id}-${safeIds[i]}-${key}`}
+                    field={sub}
+                    value={normalizeValue(sub, row[key])}
+                    onChange={(v) => setCell(i, key, v)}
+                    targets={targets}
+                    pickImage={pickImage}
+                    focal={sub.type === 'image' ? String(row[`${key}__focus`] ?? '') : undefined}
+                    onFocal={sub.type === 'image' ? (v) => setCell(i, `${key}__focus`, v) : undefined}
+                  />
+                ))}
+              </ListRow>
+            ))}
+          </SortableContext>
+        </DndContext>
+        <button className="te-row-add" type="button" onClick={add} disabled={rows.length >= max}>
+          + Add {singular(field.label)}
+        </button>
+      </div>
+      {field.min !== undefined && rows.length < field.min && <small className="hint te-help te-warn">Needs at least {field.min}.</small>}
+      <Help text={field.help} />
+    </fieldset>
+  );
+}
+
+function ListRow({ sortId, title, open, onToggle, onRemove, onDuplicate, children }: {
+  sortId: string; title: string; open: boolean; onToggle: () => void; onRemove: () => void; onDuplicate?: () => void; children: ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sortId });
+  return (
+    <div ref={setNodeRef} className={`te-row ${open ? 'is-open' : ''} ${isDragging ? 'is-dragging' : ''}`} style={{ transform: CSS.Transform.toString(transform), transition }}>
+      <div className="te-row-head">
+        <button className="te-grip" type="button" aria-label={`Reorder ${title}`} {...attributes} {...listeners}>⋮⋮</button>
+        <button className="te-row-title" type="button" aria-expanded={open} onClick={onToggle}>{title}</button>
+        <svg className="te-row-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
+      </div>
+      {open && (
+        <>
+          <div className="te-sheet-backdrop" onClick={onToggle} aria-hidden="true" />
+          <div className="te-row-body" role="group" aria-label={title}>
+            <div className="te-sheet-head"><b>{title}</b></div>
+            {children}
+            <div className="te-row-foot">
+              <button className="btn sm ghost te-delete" type="button" onClick={onRemove}>Remove</button>
+              {onDuplicate && <button className="btn sm ghost" type="button" onClick={onDuplicate}>Duplicate</button>}
+              <button className="btn sm primary te-sheet-done" type="button" onClick={onToggle}>Done</button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}