npm - @acms-subir/core - Versions diffs - 0.3.6 → 0.3.7 - Mend

@acms-subir/core 0.3.6 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/CHANGELOG.md +17 -0
package/integration.mjs +38 -2
package/package.json +1 -1
package/src/actions/index.ts +146 -2
package/src/components/EventPage.astro +25 -5
package/src/components/calendar/BookingsHead.astro +4 -3
package/src/components/calendar/RoomHolds.tsx +13 -8
package/src/components/editor/EventPanel.tsx +9 -383
package/src/components/editor/LivePane.tsx +16 -3
package/src/components/editor/PostEditor.tsx +59 -46
package/src/components/editor/PreviewOverlay.tsx +7 -1
package/src/components/editor/event/EventSheet.tsx +136 -0
package/src/components/editor/event/LocationField.tsx +266 -0
package/src/components/editor/event/OrganizeCard.tsx +87 -0
package/src/components/editor/event/RegistrationCard.tsx +114 -0
package/src/components/editor/event/RegistrationFormEditor.tsx +142 -0
package/src/components/editor/event/Section.tsx +27 -0
package/src/components/editor/event/WhenCard.tsx +217 -0
package/src/components/editor/event/dates.ts +28 -0
package/src/components/editor/event/registration.ts +39 -0
package/src/components/editor/extensions/form.tsx +60 -0
package/src/components/editor/extensions/slash.tsx +5 -0
package/src/components/editor/frameNav.ts +20 -0
package/src/components/forms/Canvas.tsx +149 -0
package/src/components/forms/FormBuildPage.tsx +155 -0
package/src/components/forms/FormBuilder.tsx +283 -0
package/src/components/forms/FormHeader.astro +31 -0
package/src/components/forms/InsertMenu.tsx +77 -0
package/src/components/forms/Inspector.tsx +232 -0
package/src/components/forms/Outline.tsx +93 -0
package/src/components/forms/ResponsesTable.tsx +123 -0
package/src/components/forms/TypeIcon.tsx +24 -0
package/src/components/forms/dnd.ts +3 -0
package/src/components/forms/meta.ts +84 -0
package/src/components/forms/useFormHistory.ts +41 -0
package/src/layouts/Admin.astro +3 -2
package/src/lib/backup/content.ts +10 -5
package/src/lib/booking/service.ts +6 -2
package/src/lib/calendar/agent-schema.ts +7 -1
package/src/lib/calendar/agent.ts +28 -3
package/src/lib/calendar/api.ts +2 -0
package/src/lib/calendar/ics-write.ts +2 -0
package/src/lib/calendar/ics.ts +4 -0
package/src/lib/calendar/import.ts +3 -3
package/src/lib/calendar/schedule.ts +6 -2
package/src/lib/calendar/seo.ts +4 -1
package/src/lib/content-service.ts +30 -4
package/src/lib/drafts.ts +9 -1
package/src/lib/dynamicBlocks.ts +14 -3
package/src/lib/editor/documents.ts +12 -3
package/src/lib/editor/schemas.ts +4 -3
package/src/lib/forms/events.ts +40 -0
package/src/lib/forms/export.ts +62 -0
package/src/lib/forms/fields.ts +50 -0
package/src/lib/forms/http.ts +29 -0
package/src/lib/forms/render.ts +11 -0
package/src/lib/forms/schema.ts +56 -0
package/src/lib/forms/service.ts +38 -0
package/src/lib/forms/store.ts +78 -0
package/src/lib/forms/validate.ts +71 -0
package/src/lib/maps/config.ts +64 -0
package/src/lib/maps/migration.ts +12 -0
package/src/lib/maps/parse.ts +180 -0
package/src/lib/maps/places.ts +109 -0
package/src/lib/maps/providers/geoapify.ts +36 -0
package/src/lib/maps/providers/google.ts +54 -0
package/src/lib/maps/providers/http.ts +96 -0
package/src/lib/maps/providers/index.ts +37 -0
package/src/lib/maps/providers/locationiq.ts +35 -0
package/src/lib/maps/providers/mapbox.ts +38 -0
package/src/lib/maps/providers/osm.ts +59 -0
package/src/lib/maps/providers/pelias.ts +51 -0
package/src/lib/maps/service.ts +281 -0
package/src/lib/maps/types.ts +35 -0
package/src/lib/mobile/bookings.ts +1 -1
package/src/lib/mobile/schemas.ts +2 -2
package/src/lib/repo/migrations.ts +8 -0
package/src/lib/repo/sql.ts +99 -10
package/src/lib/repo/types.ts +21 -1
package/src/lib/schema.ts +38 -0
package/src/lib/umami.ts +8 -1
package/src/pages/admin/calendar/bookings.astro +12 -7
package/src/pages/admin/calendar/events/[id].astro +5 -2
package/src/pages/admin/calendar/events/index.astro +3 -0
package/src/pages/admin/calendar/resources/[id].astro +11 -0
package/src/pages/admin/calendar/settings.astro +140 -3
package/src/pages/admin/forms/[id]/share.astro +121 -0
package/src/pages/admin/forms/[id]/submissions.astro +143 -0
package/src/pages/admin/forms/[id].astro +27 -0
package/src/pages/admin/forms/index.astro +198 -0
package/src/pages/admin/integrations.astro +57 -0
package/src/pages/api/agent/index.ts +1 -1
package/src/pages/api/calendar/docs.ts +2 -0
package/src/pages/api/calendar/events/[id].ts +1 -1
package/src/pages/api/calendar/events/index.ts +1 -1
package/src/pages/api/mcp.ts +1 -1
package/src/pages/book/manage/[token].astro +4 -4
package/src/pages/events/[slug].astro +24 -10
package/src/pages/forms/[id].astro +27 -0
package/src/styles/admin.css +2 -2
package/src/styles/editor.css +275 -34
package/src/styles/form-block.css +38 -0
package/src/styles/forms-admin.css +184 -0
package/src/styles/forms.css +281 -0
package/src/styles/site.css +43 -0
package/src/virtual.d.ts +2 -0

package/src/components/forms/Inspector.tsx ADDED Viewed

@@ -0,0 +1,232 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { FIELD_ID, type FormDefinition, type FormField } from '../../lib/forms/schema';
+import { verticalOnly } from './dnd';
+import { META, TYPE_CHOICES, canOther, fieldIssue, isChoice, takesPlaceholder, type FieldType, type Selection, type SystemField } from './meta';
+type Props = {
+  value: FormDefinition; selection: Selection; system: SystemField[]; event: boolean; phone: boolean;
+  name?: string; onNameChange?: (name: string) => void; lockedKeys: Set<string>;
+  patch: (next: Partial<FormDefinition>, key: string) => void;
+  patchField: (id: string, next: Partial<FormField>, key: string) => void;
+  setType: (id: string, type: FieldType) => void; onLabelDone: (id: string) => void; setKey: (id: string, key: string) => void;
+  actions: { move: (id: string, dir: -1 | 1) => void; duplicate: (id: string) => void; remove: (id: string) => void };
+  onAdd: () => void;
+};
+/** Settings for whatever is selected: a question, the title/intro, the button, the thank-you message or a locked system question. */
+export function Inspector(p: Props) {
+  const { value, selection } = p;
+  if (selection?.kind === 'field') {
+    const field = value.fields.find(f => f.id === selection.id);
+    if (field) return <FieldSettings {...p} field={field} />;
+  }
+  if (selection?.kind === 'form') return (
+    <div className="fb-insp-body">
+      <Head title="Title & introduction" />
+      {p.onNameChange && <Text label="Name in the admin" hint="Only you see this" value={p.name ?? ''} max={120} onChange={p.onNameChange} />}
+      <Text label="Form title" value={value.title} max={120} onChange={v => p.patch({ title: v }, 'title')} />
+      <Text label="Introduction" value={value.intro} max={1000} rows={4} onChange={v => p.patch({ intro: v }, 'intro')} />
+      {p.event && <p className="fb-note">On the event page, the title and introduction appear above the registration fields.</p>}
+    </div>
+  );
+  if (selection?.kind === 'submit') return (
+    <div className="fb-insp-body">
+      <Head title="Submit button" />
+      <Text label="Button label" value={value.submitLabel} max={80} placeholder={p.event ? 'Confirm my seat / Request a seat' : 'Submit'} onChange={v => p.patch({ submitLabel: v }, 'submit')} />
+      {p.event && <p className="fb-note">Leave empty to use “Confirm my seat”, or “Request a seat” when RSVPs need approval.</p>}
+    </div>
+  );
+  if (selection?.kind === 'thanks') return (
+    <div className="fb-insp-body">
+      <Head title="Thank-you message" />
+      <Text label="Shown after someone submits" value={value.confirmation} max={1000} rows={5} placeholder={p.event ? 'Uses the booking confirmation message' : 'Thank you. Your response has been received.'} onChange={v => p.patch({ confirmation: v }, 'confirmation')} />
+    </div>
+  );
+  if (selection?.kind === 'system') {
+    const f = p.system[selection.index];
+    if (f) return (
+      <div className="fb-insp-body">
+        <Head title={f.label} sub={META[f.type].label} />
+        <p className="fb-note"><b>Always asked.</b> {f.note || 'This question is part of every registration and can’t be changed here.'}</p>
+      </div>
+    );
+  }
+  return (
+    <div className="fb-insp-body fb-insp-none">
+      <b>Nothing selected</b>
+      <p>Click a question on the form or in the list to edit it. Press <kbd>/</kbd> to add one.</p>
+      <button type="button" className="fb-btn sm" onClick={p.onAdd} disabled={value.fields.length >= 30}>+ Add question</button>
+      {!p.phone && <dl className="fb-keys">
+        <div><dt>⌥↑ ⌥↓</dt><dd>Move</dd></div><div><dt>⌘D</dt><dd>Duplicate</dd></div><div><dt>⌫</dt><dd>Delete</dd></div><div><dt>⌘Z ⇧⌘Z</dt><dd>Undo, redo</dd></div>
+      </dl>}
+    </div>
+  );
+}
+function FieldSettings(p: Props & { field: FormField }) {
+  const { field: f, value, patchField } = p;
+  const index = value.fields.findIndex(x => x.id === f.id);
+  const issue = fieldIssue(f, value.fields);
+  const [key, setKey] = useState(f.id);
+  useEffect(() => setKey(f.id), [f.id]);
+  const keyError = key === f.id ? '' : !FIELD_ID.test(key) ? 'Start with a letter; use letters, numbers, - or _.' : value.fields.some(x => x.id === key) ? 'Another question uses this key.' : '';
+  const locked = p.lockedKeys.has(f.id);
+  const several = f.type === 'checkboxes';
+  return (
+    <div className="fb-insp-body">
+      <Head title={f.label || META[f.type].label} sub={META[f.type].label}>
+        <Menu items={[
+          { label: 'Move up', disabled: index <= 0, run: () => p.actions.move(f.id, -1) },
+          { label: 'Move down', disabled: index >= value.fields.length - 1, run: () => p.actions.move(f.id, 1) },
+          { label: 'Duplicate', disabled: value.fields.length >= 30, run: () => p.actions.duplicate(f.id) },
+          { label: 'Delete', danger: true, run: () => p.actions.remove(f.id) },
+        ]} />
+      </Head>
+      {issue && <p className="fb-warn" role="alert">{issue}</p>}
+      <label className="fb-f"><span className="fb-lab">Type</span>
+        <select value={f.type} onChange={e => p.setType(f.id, e.target.value as FieldType)}>
+          {(TYPE_CHOICES.includes(f.type) ? TYPE_CHOICES : [f.type, ...TYPE_CHOICES]).map(t => <option key={t} value={t}>{META[t].label}</option>)}
+        </select>
+      </label>
+      <Text label={f.type === 'heading' ? 'Heading' : 'Label'} value={f.label} max={200} onChange={v => patchField(f.id, { label: v }, `label:${f.id}`)} onBlur={() => p.onLabelDone(f.id)} />
+      <Text label={f.type === 'heading' ? 'Description' : 'Help text'} value={f.help} max={300} rows={2} onChange={v => patchField(f.id, { help: v }, `help:${f.id}`)} />
+      {takesPlaceholder(f) && <Text label={canOther(f.type) ? '“Other” placeholder' : f.type === 'select' ? 'Empty choice text' : 'Placeholder'} value={f.placeholder ?? ''} max={120} placeholder={f.type === 'select' ? 'Choose…' : canOther(f.type) ? 'Type your answer' : ''} onChange={v => patchField(f.id, { placeholder: v }, `ph:${f.id}`)} />}
+      {isChoice(f.type) && <Choices options={f.options} onChange={(options, key) => patchField(f.id, { options }, key)} />}
+      {f.type !== 'heading' && (
+        <div className="fb-opts">
+          <Switch label="Required" hint={f.type === 'consent' || f.type === 'checkbox' ? 'People must tick it to send' : f.type === 'checkboxes' ? 'At least one choice' : undefined} on={f.required} onChange={v => patchField(f.id, { required: v }, `req:${f.id}`)} />
+          {(f.type === 'radio' || f.type === 'checkboxes') && <Switch label="Allow several" hint="Checkboxes instead of one choice" on={several} onChange={v => p.setType(f.id, v ? 'checkboxes' : 'radio')} />}
+          {canOther(f.type) && <Switch label="“Other” with text" hint="Adds an Other option with a text box" on={Boolean(f.allowOther)} onChange={v => patchField(f.id, { allowOther: v }, `other:${f.id}`)} />}
+        </div>
+      )}
+      {f.type !== 'heading' && (
+        <div className="fb-f"><span className="fb-lab" id={`w-${f.id}`}>Width</span>
+          <div className="fb-seg" role="group" aria-labelledby={`w-${f.id}`}>
+            <button type="button" aria-pressed={f.width !== 'half'} onClick={() => patchField(f.id, { width: undefined }, `w:${f.id}`)}>Full</button>
+            <button type="button" aria-pressed={f.width === 'half'} onClick={() => patchField(f.id, { width: 'half' }, `w:${f.id}`)}>Half</button>
+          </div>
+          <small className="fb-hint">Two half-width questions in a row sit side by side on wider screens.</small>
+        </div>
+      )}
+      <label className="fb-f"><span className="fb-lab">Answer key <small>· used in CSV and webhooks</small></span>
+        <input className="fb-mono" value={key} maxLength={80} readOnly={locked} aria-invalid={Boolean(keyError) || undefined}
+          onChange={e => setKey(e.target.value.replace(/\s+/g, '_'))}
+          onBlur={() => { if (!keyError && key !== f.id) p.setKey(f.id, key); else setKey(f.id); }}
+          onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur(); if (e.key === 'Escape') { setKey(f.id); } }} />
+        {keyError ? <small className="fb-err">{keyError}</small> : locked ? <small className="fb-hint">Locked because this form already has responses.</small> : null}
+      </label>
+    </div>
+  );
+}
+function Head({ title, sub, children }: { title: string; sub?: string; children?: React.ReactNode }) {
+  return <div className="fb-insp-h"><div><b>{title}</b>{sub && <small>{sub}</small>}</div>{children}</div>;
+}
+function Text({ label, hint, value, onChange, onBlur, max, rows, placeholder }: { label: string; hint?: string; value: string; onChange: (v: string) => void; onBlur?: () => void; max: number; rows?: number; placeholder?: string }) {
+  return (
+    <label className="fb-f"><span className="fb-lab">{label}{hint && <small> · {hint}</small>}</span>
+      {rows ? <textarea rows={rows} maxLength={max} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)} onBlur={onBlur} />
+        : <input maxLength={max} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)} onBlur={onBlur} />}
+    </label>
+  );
+}
+function Switch({ label, hint, on, onChange }: { label: string; hint?: string; on: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <label className="fb-sw-row"><span><b>{label}</b>{hint && <small>{hint}</small>}</span>
+      <button type="button" role="switch" aria-checked={on} className="fb-switch" onClick={() => onChange(!on)}><i /></button>
+    </label>
+  );
+}
+export function Menu({ items }: { items: { label: string; run: () => void; disabled?: boolean; danger?: boolean }[] }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const close = (e: PointerEvent) => { if (!ref.current?.contains(e.target as Node)) setOpen(false); };
+    const esc = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('pointerdown', close); document.addEventListener('keydown', esc);
+    return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', esc); };
+  }, [open]);
+  return (
+    <div className="fb-more" ref={ref}>
+      <button type="button" className="fb-icon" aria-label="More actions" aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>⋯</button>
+      {open && <div className="fb-menu" role="menu">{items.map(i => <button key={i.label} type="button" role="menuitem" className={i.danger ? 'danger' : undefined} disabled={i.disabled} onClick={() => { setOpen(false); i.run(); }}>{i.label}</button>)}</div>}
+    </div>
+  );
+}
+/** Choice list: drag or ⌥↑↓ to reorder, Enter adds below, Backspace on an empty choice removes it, pasting several lines adds many. */
+function Choices({ options, onChange }: { options: string[]; onChange: (options: string[], key: string) => void }) {
+  const ids = useRef<string[]>([]);
+  // Stable ids for drag + focus while texts change.
+  while (ids.current.length < options.length) ids.current.push(Math.random().toString(36).slice(2));
+  ids.current.length = options.length;
+  const listRef = useRef<HTMLDivElement>(null);
+  const focusAt = (i: number) => requestAnimationFrame(() => listRef.current?.querySelectorAll<HTMLInputElement>('input')[i]?.focus());
+  const dndId = useId();
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+  const set = (next: string[], key = 'choices', idList?: string[]) => { if (idList) ids.current = idList; onChange(next.slice(0, 50), key); };
+  const insertAt = (i: number, values: string[]) => {
+    const next = [...options]; next.splice(i, 0, ...values);
+    const nextIds = [...ids.current]; nextIds.splice(i, 0, ...values.map(() => Math.random().toString(36).slice(2)));
+    set(next, 'choices-add', nextIds);
+  };
+  const removeAt = (i: number) => { const nextIds = ids.current.filter((_, j) => j !== i); set(options.filter((_, j) => j !== i), 'choices-remove', nextIds); };
+  const onDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    const from = ids.current.indexOf(String(active.id)), to = ids.current.indexOf(String(over.id));
+    set(arrayMove(options, from, to), 'choices-move', arrayMove(ids.current, from, to));
+  };
+  const dupes = new Set(options.filter((o, i) => o.trim() && options.findIndex(x => x.trim() === o.trim()) !== i).map(o => o.trim()));
+  return (
+    <div className="fb-f"><span className="fb-lab">Choices <small>· {options.length} of 50</small></span>
+      <DndContext id={dndId} sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd} modifiers={[verticalOnly]}>
+        <SortableContext items={ids.current} strategy={verticalListSortingStrategy}>
+          <div className="fb-choices" ref={listRef}>
+            {options.map((o, i) => (
+              <Choice key={ids.current[i]} id={ids.current[i]} value={o} index={i} invalid={!o.trim() || dupes.has(o.trim())}
+                onChange={v => { const next = [...options]; next[i] = v; set(next, `choice:${ids.current[i]}`); }}
+                onEnter={() => { if (options.length < 50) { insertAt(i + 1, ['']); focusAt(i + 1); } }}
+                onRemove={(focusPrev) => { if (options.length > 1) { removeAt(i); if (focusPrev) focusAt(Math.max(0, i - 1)); } }}
+                onMove={dir => { const j = i + dir; if (j < 0 || j >= options.length) return; set(arrayMove(options, i, j), 'choices-move', arrayMove(ids.current, i, j)); focusAt(j); }}
+                onPasteLines={lines => { const next = [...options]; const empty = !o.trim(); const fresh = lines.filter(l => !options.includes(l)); if (empty) { next.splice(i, 1, ...fresh); const nextIds = [...ids.current]; nextIds.splice(i, 1, ...fresh.map(() => Math.random().toString(36).slice(2))); set(next, 'choices-add', nextIds); } else insertAt(i + 1, fresh); }}
+                onBlurEmpty={() => { if (options.length > 1 && !o.trim()) removeAt(i); }} />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+      <p className="fb-choice-add"><button type="button" className="fb-link" disabled={options.length >= 50} onClick={() => { insertAt(options.length, ['']); focusAt(options.length); }}>+ Add choice</button> <small>· paste a list to add many</small></p>
+    </div>
+  );
+}
+function Choice({ id, value, index, invalid, onChange, onEnter, onRemove, onMove, onPasteLines, onBlurEmpty }: {
+  id: string; value: string; index: number; invalid: boolean; onChange: (v: string) => void; onEnter: () => void; onRemove: (focusPrev: boolean) => void;
+  onMove: (dir: -1 | 1) => void; onPasteLines: (lines: string[]) => void; onBlurEmpty: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const { role: _r, tabIndex: _t, ...a11y } = attributes;
+  return (
+    <div ref={setNodeRef} className={`fb-choice${isDragging ? ' dragging' : ''}`} style={{ transform: transform ? `translate3d(0, ${Math.round(transform.y)}px, 0)` : undefined, transition }}>
+      <span className="fb-grip" aria-hidden="true" {...a11y} {...listeners}>⋮⋮</span>
+      <input value={value} maxLength={200} aria-label={`Choice ${index + 1}`} aria-invalid={invalid || undefined}
+        onChange={e => onChange(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === 'Enter') { e.preventDefault(); onEnter(); }
+          else if (e.key === 'Backspace' && !value) { e.preventDefault(); onRemove(true); }
+          else if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) { e.preventDefault(); e.stopPropagation(); onMove(e.key === 'ArrowUp' ? -1 : 1); }
+        }}
+        onPaste={e => {
+          const lines = e.clipboardData.getData('text/plain').split(/\r?\n/).map(l => l.replace(/^\s*(?:[-*•]|\d+[.)])\s+/, '').trim()).filter(Boolean);
+          if (lines.length > 1) { e.preventDefault(); onPasteLines([...new Set(lines)].map(l => l.slice(0, 200))); }
+        }}
+        onBlur={onBlurEmpty} />
+      <button type="button" className="fb-icon sm" aria-label={`Remove ${value || 'choice'}`} onClick={() => onRemove(false)}>✕</button>
+    </div>
+  );
+}

package/src/components/forms/Outline.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { verticalOnly } from './dnd';
+import type { FormField } from '../../lib/forms/schema';
+import { TypeIcon } from './TypeIcon';
+import { META, fieldIssue, type Selection, type SystemField } from './meta';
+type RowActions = { move: (id: string, dir: -1 | 1) => void; duplicate: (id: string) => void; remove: (id: string) => void };
+/** Question list: locked system rows, sortable questions, add button and the "after submit" item. Also the phone layout's main view. */
+export function Outline({ fields, system, selection, onSelect, onReorder, onAdd, actions, phone, labels }: {
+  fields: FormField[]; system: SystemField[]; selection: Selection; onSelect: (s: Selection) => void;
+  onReorder: (from: number, to: number) => void; onAdd: () => void; actions: RowActions; phone: boolean;
+  labels: { title: string; submit: string };
+}) {
+  const dndId = useId();
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+  const onDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    const from = fields.findIndex(f => f.id === active.id), to = fields.findIndex(f => f.id === over.id);
+    if (from >= 0 && to >= 0) onReorder(from, to);
+  };
+  const is = (s: Selection) => JSON.stringify(s) === JSON.stringify(selection);
+  return (
+    <nav className="fb-out" aria-label="Questions">
+      {phone && <>
+        <p className="fb-out-h"><span>Form</span></p>
+        <button type="button" className={`fb-q fb-q-plain${is({ kind: 'form' }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'form' })}><span /><TypeIcon type="title" /><span className="fb-q-l">{labels.title || 'Title & introduction'}</span><span /></button>
+      </>}
+      <p className="fb-out-h"><span>Questions</span><span>{fields.length + system.length}</span></p>
+      {system.map((f, i) => (
+        <button key={`sys-${i}`} type="button" className={`fb-q sys${is({ kind: 'system', index: i }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'system', index: i })} aria-label={`${f.label} (always asked)`}>
+          <span className="fb-grip" aria-hidden="true" /><TypeIcon type={f.type} /><span className="fb-q-l">{f.label}</span>
+          <svg className="fb-lock" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>
+        </button>
+      ))}
+      <DndContext id={dndId} sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd} modifiers={[verticalOnly]}>
+        <SortableContext items={fields.map(f => f.id)} strategy={verticalListSortingStrategy}>
+          <div className="fb-q-list">
+            {fields.map((f, i) => <Row key={f.id} field={f} index={i} count={fields.length} on={is({ kind: 'field', id: f.id })} issue={fieldIssue(f, fields)} onSelect={() => onSelect({ kind: 'field', id: f.id })} actions={actions} phone={phone} />)}
+          </div>
+        </SortableContext>
+      </DndContext>
+      {!fields.length && <p className="fb-out-empty">{system.length ? "No extra questions yet." : "No questions yet."}</p>}
+      <button type="button" className="fb-add" onClick={onAdd} disabled={fields.length >= 30}>
+        <span aria-hidden="true">+</span> Add question {!phone && <kbd>/</kbd>}
+      </button>
+      {fields.length >= 30 && <p className="fb-out-empty">A form can have up to 30 questions.</p>}
+      {phone && <button type="button" className={`fb-q fb-q-plain${is({ kind: 'submit' }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'submit' })}><span /><TypeIcon type="submit" /><span className="fb-q-l">Button · {labels.submit}</span><span /></button>}
+      <p className="fb-out-h fb-out-after"><span>After submit</span></p>
+      <button type="button" className={`fb-q fb-q-plain${is({ kind: 'thanks' }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'thanks' })}><span /><TypeIcon type="thanks" /><span className="fb-q-l">Thank-you message</span><span /></button>
+    </nav>
+  );
+}
+function Row({ field, index, count, on, issue, onSelect, actions, phone }: { field: FormField; index: number; count: number; on: boolean; issue: string; onSelect: () => void; actions: RowActions; phone: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: field.id });
+  const [menu, setMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!menu) return;
+    const close = (e: PointerEvent) => { if (!menuRef.current?.contains(e.target as Node)) setMenu(false); };
+    document.addEventListener('pointerdown', close);
+    return () => document.removeEventListener('pointerdown', close);
+  }, [menu]);
+  const style = { transform: transform ? `translate3d(0, ${Math.round(transform.y)}px, 0)` : undefined, transition };
+  // Desktop: the whole row drags (after 5px). Phone: only the grip, so the list still scrolls.
+  const { role: _role, tabIndex: _tab, ...a11y } = attributes;
+  return (
+    <div ref={setNodeRef} style={style} className={`fb-q-wrap${isDragging ? ' dragging' : ''}`}>
+      <button type="button" className={`fb-q${on ? ' on' : ''}`} data-field={field.id} onClick={onSelect} aria-current={on || undefined} {...a11y} {...(phone ? {} : listeners)} aria-roledescription="sortable question">
+        <span className="fb-grip" aria-hidden="true" {...(phone ? listeners : {})}>⋮⋮</span>
+        <TypeIcon type={field.type} />
+        <span className="fb-q-l">{field.label || META[field.type].label}</span>
+        <span className="fb-q-m">{issue ? <span className="fb-issue" title={issue} aria-label={issue}>!</span> : field.required ? <span className="fb-req" aria-label="required">*</span> : null}</span>
+      </button>
+      {phone && (
+        <div className="fb-q-more" ref={menuRef}>
+          <button type="button" className="fb-icon" aria-label={`More for ${field.label}`} aria-expanded={menu} onClick={() => setMenu(m => !m)}>⋯</button>
+          {menu && (
+            <div className="fb-menu" role="menu">
+              <button type="button" role="menuitem" disabled={!index} onClick={() => { setMenu(false); actions.move(field.id, -1); }}>Move up</button>
+              <button type="button" role="menuitem" disabled={index === count - 1} onClick={() => { setMenu(false); actions.move(field.id, 1); }}>Move down</button>
+              <button type="button" role="menuitem" disabled={count >= 30} onClick={() => { setMenu(false); actions.duplicate(field.id); }}>Duplicate</button>
+              <button type="button" role="menuitem" className="danger" onClick={() => { setMenu(false); actions.remove(field.id); }}>Delete</button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/forms/ResponsesTable.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from 'react';
+export interface ResponseRow {
+  id: string;
+  when: string;          // "Today 10:42"
+  full: string;          // "Thu, Oct 1, 2026, 10:42 AM"
+  version: string;       // "v3"
+  cells: string[];       // one per current question
+  answers: [string, string][];
+  older: [string, string][];
+}
+// POST back to the page with a throwaway form so the server handlers (and
+// their origin check) stay the single source of truth.
+function post(fields: [string, string][]) {
+  const f = document.createElement('form');
+  f.method = 'post'; f.hidden = true;
+  for (const [k, v] of fields) { const i = document.createElement('input'); i.type = 'hidden'; i.name = k; i.value = v; f.append(i); }
+  document.body.append(f); f.submit(); setTimeout(() => f.remove(), 1000);
+}
+export function ResponsesTable({ columns, rows, formName }: { columns: { id: string; label: string }[]; rows: ResponseRow[]; formName: string }) {
+  const [open, setOpen] = useState<number | null>(null);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [ask, setAsk] = useState<{ text: string; run: () => void } | null>(null);
+  const [copied, setCopied] = useState(false);
+  const confirmRef = useRef<HTMLDialogElement>(null);
+  const drawerRef = useRef<HTMLElement>(null);
+  const row = open === null ? null : rows[open] ?? null;
+  useEffect(() => {
+    const d = confirmRef.current; if (!d) return;
+    if (ask && !d.open) d.showModal(); else if (!ask && d.open) d.close();
+  }, [ask]);
+  useEffect(() => { if (row) drawerRef.current?.focus(); setCopied(false); }, [open]);
+  useEffect(() => {
+    if (open === null) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (ask || (e.target instanceof HTMLElement && e.target.matches('input, textarea, select'))) return;
+      if (e.key === 'Escape') setOpen(null);
+      if (e.key === 'ArrowDown' || e.key === 'j') { e.preventDefault(); setOpen(i => Math.min(rows.length - 1, (i ?? 0) + 1)); }
+      if (e.key === 'ArrowUp' || e.key === 'k') { e.preventDefault(); setOpen(i => Math.max(0, (i ?? 0) - 1)); }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, ask, rows.length]);
+  const toggle = (id: string) => setPicked(p => { const n = new Set(p); n.has(id) ? n.delete(id) : n.add(id); return n; });
+  const all = picked.size === rows.length;
+  const title = (r: ResponseRow) => r.answers.find(([, v]) => v && v !== '—')?.[1]?.split('\n')[0]?.slice(0, 80) || 'Response';
+  const copy = async (r: ResponseRow) => {
+    const text = [`${formName} · ${r.full} · ${r.version} · ref ${r.id.slice(0, 8)}`, '', ...[...r.answers, ...r.older].map(([q, a]) => `${q}: ${a}`)].join('\n');
+    try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1600); } catch { /* clipboard blocked */ }
+  };
+  const remove = (ids: string[]) => setAsk({
+    text: ids.length === 1 ? 'Permanently delete this response? This can’t be undone.' : `Permanently delete ${ids.length} responses? This can’t be undone.`,
+    run: () => post(ids.length === 1 ? [['op', 'delete'], ['id', ids[0]]] : [['op', 'bulkDelete'], ...ids.map(id => ['ids', id] as [string, string])]),
+  });
+  return <div className={`fr${row ? ' has-drawer' : ''}`}>
+    <div className="fr-table-wrap">
+      <table className="fr-table">
+        <thead><tr>
+          <th className="fr-check"><input type="checkbox" aria-label="Select all on this page" checked={all && rows.length > 0} ref={el => { if (el) el.indeterminate = picked.size > 0 && !all; }} onChange={() => setPicked(all ? new Set() : new Set(rows.map(r => r.id)))} /></th>
+          <th>Submitted</th>
+          {columns.map(c => <th key={c.id} title={c.label}>{c.label}</th>)}
+        </tr></thead>
+        <tbody>
+          {rows.map((r, i) => <tr key={r.id} tabIndex={0} aria-selected={open === i} className={`${open === i ? 'is-open' : ''}${picked.has(r.id) ? ' is-picked' : ''}`}
+            onClick={e => { if (!(e.target as HTMLElement).closest('.fr-check')) setOpen(i); }}
+            onKeyDown={e => { if (e.key === 'Enter' && e.target === e.currentTarget) setOpen(i); }}>
+            <td className="fr-check" onClick={e => e.stopPropagation()}><input type="checkbox" aria-label={`Select response from ${r.when}`} checked={picked.has(r.id)} onChange={() => toggle(r.id)} /></td>
+            <td className="fr-when" title={r.full}>{r.when}</td>
+            {r.cells.map((c, j) => <td key={j} title={c.length > 24 ? c : undefined} className={!c || c === '—' ? 'is-empty' : ''}>{c || '—'}</td>)}
+          </tr>)}
+        </tbody>
+      </table>
+    </div>
+    {row && <aside className="fr-drawer" ref={drawerRef} tabIndex={-1} role="dialog" aria-label={`Response: ${title(row)}`}>
+      <div className="fr-drawer-head">
+        <b>{title(row)}</b>
+        <div className="fr-drawer-nav">
+          <button type="button" className="icon-btn" aria-label="Previous response" disabled={open === 0} onClick={() => setOpen(i => Math.max(0, (i ?? 0) - 1))}>‹</button>
+          <button type="button" className="icon-btn" aria-label="Next response" disabled={open === rows.length - 1} onClick={() => setOpen(i => Math.min(rows.length - 1, (i ?? 0) + 1))}>›</button>
+          <button type="button" className="icon-btn" aria-label="Close" onClick={() => setOpen(null)}>✕</button>
+        </div>
+      </div>
+      <p className="fr-drawer-meta">{row.full} · form {row.version} · ref {row.id.slice(0, 8)}</p>
+      <div className="fr-drawer-body">
+        <dl className="fr-dl">{row.answers.map(([q, a]) => <div key={q}><dt>{q}</dt><dd className={a === '—' ? 'is-empty' : ''}>{a}</dd></div>)}</dl>
+        {row.older.length > 0 && <>
+          <p className="fr-older">Older questions <small>Removed or changed since this response</small></p>
+          <dl className="fr-dl">{row.older.map(([q, a]) => <div key={q}><dt>{q}</dt><dd className={a === '—' ? 'is-empty' : ''}>{a}</dd></div>)}</dl>
+        </>}
+      </div>
+      <div className="fr-drawer-foot">
+        <button type="button" className="btn" onClick={() => copy(row)}>{copied ? 'Copied' : 'Copy'}</button>
+        <button type="button" className="btn danger" onClick={() => remove([row.id])}>Delete</button>
+      </div>
+    </aside>}
+    <div className="bulkbar fr-bulk" hidden={!picked.size}>
+      <b>{picked.size} selected</b>
+      <button type="button" className="btn sm" onClick={() => post([['op', 'export'], ...[...picked].map(id => ['ids', id] as [string, string])])}>Export</button>
+      <button type="button" className="btn sm danger" onClick={() => remove([...picked])}>Delete</button>
+      <button type="button" className="icon-btn" aria-label="Clear selection" onClick={() => setPicked(new Set())}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18" /></svg>
+      </button>
+    </div>
+    <dialog className="modal" ref={confirmRef} onClose={() => setAsk(null)} onClick={e => { if (e.target === e.currentTarget) setAsk(null); }}>
+      <div className="modal-head"><span>Delete response{ask?.text.includes('responses') ? 's' : ''}?</span><button type="button" className="modal-x" aria-label="Close" onClick={() => setAsk(null)}>✕</button></div>
+      <div className="modal-body">
+        <p className="fr-confirm">{ask?.text}</p>
+        <div className="modal-foot">
+          <button type="button" className="btn" onClick={() => setAsk(null)}>Cancel</button>
+          <button type="button" className="btn fr-danger" onClick={() => { ask?.run(); }}>Delete</button>
+        </div>
+      </div>
+    </dialog>
+  </div>;
+}

package/src/components/forms/TypeIcon.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import type { FieldType } from './meta';
+// 24-unit line icons (DESIGN.md: stroke 1.8, round caps), one per question type.
+const PATHS: Record<FieldType | 'title' | 'submit' | 'thanks', string> = {
+  text: 'M5 7V5h14v2M12 5v14M9 19h6',
+  textarea: 'M4 6h16M4 10h16M4 14h16M4 18h10',
+  radio: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z',
+  checkboxes: 'M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2ZM8.5 12l2.5 2.5 4.5-5',
+  select: 'M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2ZM14 11l2 2 2-2',
+  email: 'M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0ZM16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.6 7.2',
+  phone: 'M8 3H5.5A1.5 1.5 0 0 0 4 4.6 16 16 0 0 0 19.4 20a1.5 1.5 0 0 0 1.6-1.5V16l-4-1.5-2 2a12 12 0 0 1-5-5l2-2L10.5 5 8 3Z',
+  url: 'M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1',
+  number: 'M5 9h14M5 15h14M10 4 8 20M16 4l-2 16',
+  date: 'M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2ZM3 10h18M8 3v4M16 3v4',
+  consent: 'M5 12.5 9.5 17 19 7',
+  checkbox: 'M5 12.5 9.5 17 19 7',
+  heading: 'M6 4v16M18 4v16M6 12h12',
+  title: 'M4 6h16M4 11h10M4 16h13',
+  submit: 'M5 12h13M13 7l5 5-5 5',
+  thanks: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM8 12.5l2.5 2.5L16 9.5',
+};
+export function TypeIcon({ type }: { type: keyof typeof PATHS }) {
+  return <i className="fb-ty" aria-hidden="true"><svg viewBox="0 0 24 24"><path d={PATHS[type]} /></svg></i>;
+}

package/src/components/forms/dnd.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { Modifier } from '@dnd-kit/core';
+/** Lists only reorder vertically (keeps drags from wandering sideways). */
+export const verticalOnly: Modifier = ({ transform }) => ({ ...transform, x: 0 });

package/src/components/forms/meta.ts ADDED Viewed

@@ -0,0 +1,84 @@
+// Question types, defaults and small pure helpers shared by the builder panes.
+import { CHOICE_TYPES, FIELD_ID, type FormDefinition, type FormField } from '../../lib/forms/schema';
+export type FieldType = FormField['type'];
+export type Group = 'Basics' | 'Contact' | 'Other';
+export type Selection = { kind: 'field'; id: string } | { kind: 'form' } | { kind: 'submit' } | { kind: 'thanks' } | { kind: 'system'; index: number } | null;
+export type SystemField = { label: string; type: FieldType; note?: string };
+export const META: Record<FieldType, { label: string; group: Group; desc: string; fresh: string }> = {
+  text: { label: 'Short text', group: 'Basics', desc: 'A single line, like a name or a title.', fresh: 'Short answer' },
+  textarea: { label: 'Long text', group: 'Basics', desc: 'A few sentences or a message.', fresh: 'Long answer' },
+  radio: { label: 'Multiple choice', group: 'Basics', desc: 'People pick one option. Turn on “Allow several” for checkboxes.', fresh: 'Pick one' },
+  checkboxes: { label: 'Checkboxes', group: 'Basics', desc: 'People tick as many options as apply.', fresh: 'Pick any that apply' },
+  select: { label: 'Dropdown', group: 'Basics', desc: 'One option from a compact list. Good for long lists.', fresh: 'Choose one' },
+  email: { label: 'Email', group: 'Contact', desc: 'Checks that the address looks real.', fresh: 'Email' },
+  phone: { label: 'Phone', group: 'Contact', desc: 'Digits, spaces, + ( ) and dashes.', fresh: 'Phone' },
+  url: { label: 'Website', group: 'Contact', desc: 'A web address. “example.org” is accepted too.', fresh: 'Website' },
+  number: { label: 'Number', group: 'Other', desc: 'Any number, like a count or an age.', fresh: 'Number' },
+  date: { label: 'Date', group: 'Other', desc: 'A calendar date picker.', fresh: 'Date' },
+  consent: { label: 'Agree checkbox', group: 'Other', desc: 'One box to tick. When required, people must tick it to send.', fresh: 'I agree to the terms' },
+  heading: { label: 'Section heading', group: 'Other', desc: 'A title and description that splits a long form into parts. Not a question.', fresh: 'New section' },
+  checkbox: { label: 'Checkbox', group: 'Other', desc: 'One box to tick.', fresh: 'Checkbox' },
+};
+/** Insert menu order (`checkbox` stays valid for old data but isn't offered). */
+export const INSERT: FieldType[] = ['text', 'textarea', 'radio', 'checkboxes', 'select', 'email', 'phone', 'url', 'number', 'date', 'consent', 'heading'];
+export const TYPE_CHOICES: FieldType[] = [...INSERT];
+export const isChoice = (t: FieldType) => CHOICE_TYPES.includes(t);
+export const canOther = (t: FieldType) => t === 'radio' || t === 'checkboxes';
+export const takesPlaceholder = (f: Pick<FormField, 'type' | 'allowOther'>) => ['text', 'textarea', 'email', 'phone', 'number', 'url', 'select'].includes(f.type) || (canOther(f.type) && Boolean(f.allowOther));
+/** Readable, unique answer key from a label: "Which team?" → "which_team". */
+export function keyFrom(label: string, taken: Iterable<string>): string {
+  const used = new Set(taken);
+  let base = label.normalize('NFKD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '').slice(0, 40).replace(/_+$/, '');
+  if (!base) base = 'question';
+  if (!/^[a-z]/.test(base)) base = `q_${base}`;
+  let key = base, n = 2;
+  while (used.has(key)) key = `${base}_${n++}`;
+  return key;
+}
+/** Drops optional props that are at their default so stored JSON stays lean. */
+export function clean(f: FormField): FormField {
+  const out: FormField = { id: f.id, type: f.type, label: f.label, required: f.type === 'heading' ? false : f.required, help: f.help, options: isChoice(f.type) ? f.options : [] };
+  if (f.placeholder && takesPlaceholder(f)) out.placeholder = f.placeholder;
+  if (f.width === 'half' && f.type !== 'heading') out.width = 'half';
+  if (f.allowOther && canOther(f.type)) out.allowOther = true;
+  return out;
+}
+export function newField(type: FieldType, taken: string[]): FormField {
+  const label = META[type].fresh;
+  return clean({ id: keyFrom(label, taken), type, label, required: false, help: '', options: isChoice(type) ? ['Option 1', 'Option 2'] : [] });
+}
+/** Switching type keeps the label/help; choice lists survive between choice types. */
+export function switchType(f: FormField, type: FieldType, remembered?: string[]): FormField {
+  const options = isChoice(type) ? (f.options.length ? f.options : remembered?.length ? remembered : ['Option 1', 'Option 2']) : [];
+  return clean({ ...f, type, options });
+}
+export function fieldIssue(f: FormField, all: FormField[]): string {
+  if (!f.label.trim()) return 'Needs a label.';
+  if (!FIELD_ID.test(f.id)) return 'Answer key must start with a letter and use letters, numbers, - or _.';
+  if (all.filter(x => x.id === f.id).length > 1) return 'Answer key is used twice.';
+  if (isChoice(f.type)) {
+    if (!f.options.length) return 'Add at least one choice.';
+    if (f.options.some(o => !o.trim())) return 'A choice is empty.';
+    if (new Set(f.options.map(o => o.trim())).size !== f.options.length) return 'Two choices are the same.';
+  }
+  return '';
+}
+export function definitionIssue(d: FormDefinition): string {
+  for (const f of d.fields) { const issue = fieldIssue(f, d.fields); if (issue) return `“${f.label || META[f.type].label}”: ${issue}`; }
+  return '';
+}
+export const DEFAULT_EVENT_SYSTEM: SystemField[] = [
+  { label: 'Your name', type: 'text', note: 'Bookings uses this to list who is coming.' },
+  { label: 'Email', type: 'email', note: 'Confirmations and changes are sent here.' },
+  { label: 'Seats', type: 'select', note: 'Follows the event’s “Max per person” setting.' },
+];

package/src/components/forms/useFormHistory.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { useCallback, useReducer, useRef } from 'react';
+import type { FormDefinition } from '../../lib/forms/schema';
+/**
+ * Undo/redo for a controlled definition. Commits with the same `key` inside
+ * a second are merged, so typing a label is one undo step, not one per letter.
+ */
+export function useFormHistory(value: FormDefinition, onChange: (v: FormDefinition) => void) {
+  const past = useRef<FormDefinition[]>([]);
+  const future = useRef<FormDefinition[]>([]);
+  const last = useRef<{ key?: string; at: number }>({ at: 0 });
+  const current = useRef(value);
+  const emit = useRef(onChange);
+  current.current = value;
+  emit.current = onChange;
+  const [, rerender] = useReducer((n: number) => n + 1, 0);
+  const commit = useCallback((next: FormDefinition, key?: string) => {
+    const now = Date.now();
+    const merge = key && last.current.key === key && now - last.current.at < 1000;
+    if (!merge) { past.current.push(current.current); if (past.current.length > 150) past.current.shift(); }
+    last.current = { key, at: now };
+    future.current = [];
+    current.current = next;
+    emit.current(next);
+    rerender();
+  }, []);
+  const step = useCallback((from: typeof past, to: typeof past) => {
+    const target = from.current.pop();
+    if (!target) return false;
+    to.current.push(current.current);
+    last.current = { at: 0 };
+    current.current = target;
+    emit.current(target);
+    rerender();
+    return true;
+  }, []);
+  const undo = useCallback(() => step(past, future), [step]);
+  const redo = useCallback(() => step(future, past), [step]);
+  return { commit, undo, redo, canUndo: past.current.length > 0, canRedo: future.current.length > 0 };
+}