@acms-subir/core 0.3.5 → 0.3.7

package/src/components/forms/FormBuildPage.tsx

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { actions, isActionError } from 'astro:actions';
+import type { FormDefinition, SavedForm } from '../../lib/forms/schema';
+import FormBuilder from './FormBuilder';
+import { Menu } from './Inspector';
+import { definitionIssue } from './meta';
+
+type SaveState = 'saved' | 'dirty' | 'saving' | 'error' | 'invalid' | 'conflict';
+type Props = { form: Pick<SavedForm, 'id' | 'name' | 'kind' | 'purpose' | 'status' | 'revision'> & { hasDraft: boolean }; definition: FormDefinition; responses?: number };
+
+/**
+ * The Build page island: the builder plus autosave (1.2s after the last
+ * change), Publish, and the header actions (portaled into FormHeader's slot).
+ */
+export default function FormBuildPage({ form, definition, responses = 0 }: Props) {
+  const [value, setValue] = useState(definition);
+  const [name, setName] = useState(form.name);
+  const [status, setStatus] = useState(form.status);
+  const [hasDraft, setHasDraft] = useState(form.hasDraft);
+  const [state, setState] = useState<SaveState>('saved');
+  const [message, setMessage] = useState('');
+  const [preview, setPreview] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [slot, setSlot] = useState<HTMLElement | null>(null);
+  const revision = useRef(form.revision);
+  const latest = useRef({ value, name });
+  latest.current = { value, name };
+  const saved = useRef(JSON.stringify({ value: definition, name: form.name }));
+  const inflight = useRef<Promise<boolean> | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const template = form.kind === 'template';
+
+  useEffect(() => { setSlot(document.getElementById('fb-actions')); }, []);
+
+  const send = useCallback(async (op: 'save' | 'publish' | 'archive'): Promise<boolean> => {
+    // One request at a time, so revisions stay in order.
+    while (inflight.current) await inflight.current;
+    const snapshot = latest.current, json = JSON.stringify(snapshot);
+    if (op === 'save' && json === saved.current) { setState('saved'); return true; }
+    const issue = definitionIssue(snapshot.value) || (!snapshot.name.trim() ? 'The form needs a name.' : '');
+    if (issue) { setState('invalid'); setMessage(issue); return false; }
+    setState('saving');
+    const run = (async () => {
+      const { data, error } = await actions.forms.save({ id: form.id, revision: revision.current, name: snapshot.name.trim(), definition: snapshot.value, op });
+      if (error) {
+        if (isActionError(error) && error.code === 'CONFLICT') { setState('conflict'); setMessage('This form changed in another window. Reload the page to keep editing.'); }
+        else { setState('error'); setMessage(error.message || 'Could not save.'); }
+        return false;
+      }
+      revision.current = data.revision;
+      saved.current = json;
+      setStatus(data.status); setHasDraft(data.hasDraft);
+      setState(JSON.stringify(latest.current) === json ? 'saved' : 'dirty');
+      return true;
+    })();
+    inflight.current = run;
+    try { return await run; } finally { inflight.current = null; }
+  }, [form.id]);
+
+  // Autosave after a pause in editing.
+  useEffect(() => {
+    if (state === 'conflict') return;
+    if (JSON.stringify({ value, name }) === saved.current) return;
+    setState(s => s === 'saving' ? s : 'dirty');
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => { void send('save'); }, 1200);
+    return () => clearTimeout(timer.current);
+  }, [value, name, send]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const warn = (e: BeforeUnloadEvent) => { if (JSON.stringify(latest.current) !== saved.current) e.preventDefault(); };
+    addEventListener('beforeunload', warn);
+    return () => removeEventListener('beforeunload', warn);
+  }, []);
+
+  // Keep the server-rendered header (name + status) in step.
+  useEffect(() => {
+    const h1 = document.querySelector('.fh-row h1'); if (h1 && name.trim()) h1.textContent = name;
+    const crumb = document.querySelector('.fh-crumb'); const link = crumb?.querySelector('a');
+    if (crumb && link && name.trim()) { crumb.replaceChildren(link, document.createTextNode(` / ${name}`)); }
+  }, [name]);
+  useEffect(() => {
+    const badge = document.querySelector('.fh-status'); if (!badge) return;
+    const label = status === 'published' ? (hasDraft ? 'Edited' : 'Published') : status === 'archived' ? 'Archived' : 'Draft';
+    const marker = document.createElement('i'); marker.setAttribute('aria-hidden', 'true');
+    badge.replaceChildren(marker, document.createTextNode(label));
+    badge.className = `fh-status fst ${label === 'Published' ? 'fst-green' : label === 'Edited' ? 'fst-amber' : 'fst-muted'}`;
+  }, [status, hasDraft]);
+
+  const publish = async () => {
+    clearTimeout(timer.current); setBusy(true);
+    const ok = await send('publish');
+    setBusy(false);
+    if (ok) setMessage('');
+  };
+  const archive = async () => {
+    if (!window.confirm('Archive this form? It stops accepting responses. Existing responses are kept.')) return;
+    clearTimeout(timer.current);
+    if (await send('archive')) location.reload();
+  };
+  const saveAsTemplate = async () => {
+    setBusy(true);
+    const { data, error } = await actions.forms.saveTemplate({ name: `${name.trim().slice(0, 110)} template`, definition: latest.current.value, purpose: form.purpose });
+    setBusy(false);
+    if (error) { setState('error'); setMessage(error.message); return; }
+    location.href = `/admin/forms/${data.form.id}`;
+  };
+  const useTemplate = async () => {
+    clearTimeout(timer.current);
+    if (!(await send('save'))) return;
+    setBusy(true);
+    const { data, error } = await actions.forms.useTemplate({ id: form.id, name: name.trim().replace(/ template$/i, '') || name });
+    setBusy(false);
+    if (error) { setState('error'); setMessage(error.message); return; }
+    location.href = `/admin/forms/${data.id}`;
+  };
+
+  const live = status === 'published';
+  const text = state === 'saving' ? 'Saving…'
+    : state === 'dirty' ? 'Unsaved changes'
+    : state === 'invalid' ? `Not saved · ${message}`
+    : state === 'error' ? `Couldn’t save · ${message}`
+    : state === 'conflict' ? message
+    : template ? 'Saved'
+    : live ? (hasDraft ? 'Unpublished changes' : 'All changes live')
+    : status === 'archived' ? 'Saved · archived' : 'Draft saved';
+  const tone = state === 'invalid' || state === 'error' || state === 'conflict' ? 'bad' : (state === 'saved' && live && hasDraft) ? 'warn' : '';
+  const canPublish = !template && status !== 'archived' && state !== 'conflict' && (!live || hasDraft || state !== 'saved');
+
+  const headerActions = (
+    <div className="fb-actions">
+      <span className={`fb-state ${tone}`} role="status" aria-live="polite">{text}</span>
+      {state === 'conflict' && <button type="button" className="btn sm" onClick={() => location.reload()}>Reload</button>}
+      {state === 'error' && <button type="button" className="btn sm" onClick={() => void send('save')}>Retry</button>}
+      <button type="button" className="btn" aria-pressed={preview} onClick={() => setPreview(p => !p)}>{preview ? 'Edit' : 'Preview'}</button>
+      {template
+        ? form.purpose === 'general' && <button type="button" className="btn primary" disabled={busy || state === 'conflict'} onClick={useTemplate}>Use template</button>
+        : <button type="button" className="btn primary" disabled={busy || !canPublish} onClick={publish}>{live ? 'Publish changes' : 'Publish'}</button>}
+      <Menu items={[
+        ...(!template && live ? [{ label: 'Open public form ↗', run: () => window.open(`/forms/${form.id}`, '_blank', 'noopener') }] : []),
+        { label: template ? 'Duplicate template' : 'Save as new template', disabled: busy, run: saveAsTemplate },
+        ...(status !== 'archived' ? [{ label: template ? 'Archive template' : 'Archive form', danger: true, run: archive }] : []),
+      ]} />
+    </div>
+  );
+
+  return (
+    <>
+      {slot && createPortal(headerActions, slot)}
+      <FormBuilder value={value} onChange={setValue} mode={form.purpose === 'event' ? 'event' : 'standalone'} name={name} onNameChange={setName}
+        responses={responses} preview={preview} onPreviewChange={setPreview} />
+    </>
+  );
+}

package/src/components/forms/FormBuilder.tsx

@@ -0,0 +1,283 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { arrayMove } from '@dnd-kit/sortable';
+import { starter, type FormDefinition, type FormField } from '../../lib/forms/schema';
+import { Canvas, Preview } from './Canvas';
+import { Inspector } from './Inspector';
+import { InsertMenu } from './InsertMenu';
+import { Outline } from './Outline';
+import { DEFAULT_EVENT_SYSTEM, META, clean, keyFrom, newField, switchType, type FieldType, type Selection, type SystemField } from './meta';
+import { useFormHistory } from './useFormHistory';
+
+export type FormBuilderProps = {
+  value: FormDefinition;
+  onChange: (v: FormDefinition) => void;
+  /** @deprecated use mode="event" */
+  event?: boolean;
+  mode?: 'standalone' | 'event';
+  /** Locked rows shown first (event registration: Name, Email, Seats). Defaults to those in event mode. */
+  systemFields?: SystemField[];
+  /** Admin-only name, edited with the title (Build page). */
+  name?: string;
+  onNameChange?: (name: string) => void;
+  /** With responses, answer keys of existing questions are locked. */
+  responses?: number;
+  /** Controlled preview (the Build page drives it from its header). */
+  preview?: boolean;
+  onPreviewChange?: (on: boolean) => void;
+};
+type Layout = 'wide' | 'mid' | 'phone';
+
+/**
+ * Three-pane form builder: outline · live canvas · inspector. Collapses to
+ * canvas + inspector (outline in a drawer) under 1100px of its own width, and
+ * to a question list with a bottom-sheet inspector under 760px.
+ */
+export default function FormBuilder({ value, onChange, event = false, mode, systemFields, name, onNameChange, responses = 0, preview: previewProp, onPreviewChange }: FormBuilderProps) {
+  const isEvent = mode ? mode === 'event' : event;
+  const system = systemFields ?? (isEvent ? DEFAULT_EVENT_SYSTEM : []);
+  const history = useFormHistory(value, onChange);
+  const { commit } = history;
+  const valueRef = useRef(value); valueRef.current = value;
+  const [selection, setSelection] = useState<Selection>(null);
+  const [inserting, setInserting] = useState<{ after: string | null } | null>(null);
+  const [drawer, setDrawer] = useState(false);
+  const [sheet, setSheet] = useState(false);
+  const [toast, setToast] = useState<{ text: string; undo?: () => void } | null>(null);
+  const [previewOwn, setPreviewOwn] = useState(false);
+  const preview = previewProp ?? previewOwn;
+  const setPreview = (on: boolean) => { if (onPreviewChange) onPreviewChange(on); else setPreviewOwn(on); };
+  const [device, setDevice] = useState<'desktop' | 'phone'>('desktop');
+  const [layout, setLayout] = useState<Layout>('wide');
+  const rootRef = useRef<HTMLDivElement>(null);
+  // Keys of questions that already existed when there were responses stay fixed; label edits keep new questions' keys in sync until a key is typed by hand.
+  const lockedKeys = useMemo(() => new Set(responses > 0 ? value.fields.map(f => f.id) : []), [responses]); // eslint-disable-line react-hooks/exhaustive-deps
+  const autoKeys = useRef(new Set<string>());
+  const optionMemory = useRef(new Map<string, string[]>());
+
+  useLayoutEffect(() => {
+    const el = rootRef.current; if (!el) return;
+    const measure = (w: number) => setLayout(w >= 1100 ? 'wide' : w >= 760 ? 'mid' : 'phone');
+    measure(el.getBoundingClientRect().width);
+    const ro = new ResizeObserver(([entry]) => measure(entry.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 6000); return () => clearTimeout(t); }, [toast]);
+  // Drop a selection that no longer exists (after undo, for example).
+  useEffect(() => { if (selection?.kind === 'field' && !value.fields.some(f => f.id === selection.id)) { setSelection(null); setSheet(false); } }, [value, selection]);
+
+  const fields = value.fields;
+  const setFields = useCallback((next: FormField[], key?: string) => commit({ ...valueRef.current, fields: next }, key), [commit]);
+  const patch = useCallback((next: Partial<FormDefinition>, key: string) => commit({ ...valueRef.current, ...next }, key), [commit]);
+  const patchField = useCallback((id: string, next: Partial<FormField>, key: string) => {
+    setFields(valueRef.current.fields.map(f => f.id === id ? clean({ ...f, ...next }) : f), key);
+  }, [setFields]);
+  const select = (s: Selection) => { setSelection(s); setDrawer(false); if (layout === 'phone' && s) setSheet(true); };
+
+  // Focus after React has rendered the moved/new question.
+  const [focusTarget, setFocusTarget] = useState<{ id: string } | null>(null);
+  const focusItem = (id: string) => setFocusTarget({ id });
+  useEffect(() => {
+    if (!focusTarget) return;
+    const root = rootRef.current;
+    const el = root?.querySelector<HTMLElement>(layout === 'phone' ? `[data-field="${CSS.escape(focusTarget.id)}"]` : `[data-item="${CSS.escape(focusTarget.id)}"]`);
+    if (el) { el.focus({ preventScroll: true }); el.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); }
+    else root?.focus({ preventScroll: true });
+    setFocusTarget(null);
+  }, [focusTarget, layout]);
+  const insert = (type: FieldType, after: string | null) => {
+    const current = valueRef.current.fields;
+    if (current.length >= 30) return;
+    const f = newField(type, current.map(x => x.id));
+    autoKeys.current.add(f.id);
+    const at = after ? current.findIndex(x => x.id === after) + 1 : current.length;
+    const next = [...current]; next.splice(at || current.length, 0, f);
+    setFields(next);
+    setInserting(null);
+    setSelection({ kind: 'field', id: f.id });
+    if (layout === 'phone') setSheet(true);
+    else focusItem(f.id);
+  };
+  const actions = {
+    move: (id: string, dir: -1 | 1) => {
+      const i = valueRef.current.fields.findIndex(f => f.id === id), j = i + dir;
+      if (i < 0 || j < 0 || j >= valueRef.current.fields.length) return;
+      setFields(arrayMove(valueRef.current.fields, i, j));
+      focusItem(id);
+    },
+    duplicate: (id: string) => {
+      const current = valueRef.current.fields, i = current.findIndex(f => f.id === id);
+      if (i < 0 || current.length >= 30) return;
+      const copy = { ...current[i], options: [...current[i].options], id: keyFrom(current[i].label, current.map(f => f.id)) };
+      autoKeys.current.add(copy.id);
+      const next = [...current]; next.splice(i + 1, 0, copy);
+      setFields(next);
+      setSelection({ kind: 'field', id: copy.id });
+      focusItem(copy.id);
+    },
+    remove: (id: string) => {
+      const current = valueRef.current.fields, i = current.findIndex(f => f.id === id);
+      if (i < 0) return;
+      setFields(current.filter(f => f.id !== id));
+      const neighbour = current[i + 1] ?? current[i - 1];
+      setSelection(neighbour && layout !== 'phone' ? { kind: 'field', id: neighbour.id } : null);
+      setSheet(false);
+      setToast({ text: `Deleted “${current[i].label}”.`, undo: () => { history.undo(); setSelection({ kind: 'field', id }); } });
+      if (neighbour && layout !== 'phone') focusItem(neighbour.id); else rootRef.current?.focus();
+    },
+  };
+  const setType = (id: string, type: FieldType) => {
+    const f = valueRef.current.fields.find(x => x.id === id); if (!f) return;
+    if (f.options.length) optionMemory.current.set(id, f.options);
+    setFields(valueRef.current.fields.map(x => x.id === id ? switchType(x, type, optionMemory.current.get(id)) : x));
+  };
+  const onLabelDone = (id: string) => {
+    const f = valueRef.current.fields.find(x => x.id === id); if (!f) return;
+    // Never leave a question without a label; keep fresh questions' keys readable.
+    const label = f.label.trim() || META[f.type].fresh;
+    let nextId = id;
+    if (autoKeys.current.has(id) && !lockedKeys.has(id)) {
+      nextId = keyFrom(label, valueRef.current.fields.filter(x => x.id !== id).map(x => x.id));
+      if (nextId !== id) { autoKeys.current.delete(id); autoKeys.current.add(nextId); }
+    }
+    if (label === f.label && nextId === id) return;
+    setFields(valueRef.current.fields.map(x => x.id === id ? { ...x, label, id: nextId } : x), `label:${id}`);
+    if (nextId !== id) setSelection(s => s?.kind === 'field' && s.id === id ? { kind: 'field', id: nextId } : s);
+  };
+  const setKey = (id: string, key: string) => {
+    autoKeys.current.delete(id);
+    setFields(valueRef.current.fields.map(x => x.id === id ? { ...x, id: key } : x));
+    setSelection({ kind: 'field', id: key });
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (inserting) return;
+    const t = e.target as HTMLElement;
+    const typing = t.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(t.tagName);
+    const mod = e.metaKey || e.ctrlKey;
+    const fieldId = selection?.kind === 'field' ? selection.id : null;
+    if (mod && !typing && e.key.toLowerCase() === 'z') { e.preventDefault(); if (e.shiftKey) history.redo(); else history.undo(); return; }
+    if (mod && !typing && e.key.toLowerCase() === 'y') { e.preventDefault(); history.redo(); return; }
+    // Question shortcuts only from the canvas/list, never from settings controls.
+    if (typing || preview || t.closest('.fb-insp, .fb-sheet, .fb-menu, .fb-bar')) return;
+    if (e.key === '/' && !mod) { e.preventDefault(); setInserting({ after: fieldId }); return; }
+    if (e.key === 'Escape' && (selection || drawer)) { setDrawer(false); setSelection(null); return; }
+    if (!fieldId) return;
+    if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) { e.preventDefault(); actions.move(fieldId, e.key === 'ArrowUp' ? -1 : 1); return; }
+    if (mod && e.key.toLowerCase() === 'd') { e.preventDefault(); actions.duplicate(fieldId); return; }
+    if (e.key === 'Backspace' || e.key === 'Delete') { e.preventDefault(); actions.remove(fieldId); return; }
+    if (!e.altKey && !mod && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      const i = fields.findIndex(f => f.id === fieldId), next = fields[i + (e.key === 'ArrowUp' ? -1 : 1)];
+      if (next) { e.preventDefault(); setSelection({ kind: 'field', id: next.id }); focusItem(next.id); }
+    }
+  };
+
+  const keyRef = useRef(onKeyDown); keyRef.current = onKeyDown;
+  useEffect(() => {
+    // If focus fell back to <body> (after a delete, say), shortcuts still reach the builder.
+    const onDoc = (e: KeyboardEvent) => {
+      if (document.activeElement !== document.body || !rootRef.current?.offsetParent) return;
+      keyRef.current({ ...e, target: rootRef.current, key: e.key, metaKey: e.metaKey, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, altKey: e.altKey, preventDefault: () => e.preventDefault() } as unknown as React.KeyboardEvent);
+    };
+    document.addEventListener('keydown', onDoc);
+    return () => document.removeEventListener('keydown', onDoc);
+  }, []);
+  const openInsert = (after: string | null = selection?.kind === 'field' ? selection.id : null) => { setDrawer(false); setInserting({ after }); };
+  const outline = (
+    <Outline fields={fields} system={system} selection={selection} onSelect={s => {
+      select(s);
+      // Picking from the list brings the question into view on the canvas.
+      if (s?.kind === 'field' && layout !== 'phone') requestAnimationFrame(() => rootRef.current?.querySelector(`[data-item="${CSS.escape(s.id)}"]`)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }));
+    }} phone={layout === 'phone'}
+      onReorder={(from, to) => setFields(arrayMove(valueRef.current.fields, from, to))} onAdd={() => openInsert()} actions={actions}
+      labels={{ title: value.title, submit: value.submitLabel || (isEvent ? 'Confirm my seat' : 'Submit') }} />
+  );
+  const inspector = (
+    <Inspector value={value} selection={selection} system={system} event={isEvent} phone={layout === 'phone'} name={name} onNameChange={onNameChange}
+      lockedKeys={lockedKeys} patch={patch} patchField={patchField} setType={setType} onLabelDone={onLabelDone} setKey={setKey} actions={actions} onAdd={() => openInsert()} />
+  );
+  const canvas = preview
+    ? <Preview value={value} system={system} event={isEvent} device={layout === 'phone' ? 'phone' : device} />
+    : <Canvas value={value} system={system} selection={selection} event={isEvent} onSelect={select} patch={patch} patchField={patchField}
+      onLabelDone={onLabelDone} onInsertAfter={after => openInsert(after)} onDuplicate={actions.duplicate} onRemove={actions.remove} />;
+
+  const undoRedo = <>
+    <button type="button" className="fb-icon" aria-label="Undo" title="Undo (⌘Z)" disabled={!history.canUndo} onClick={history.undo}>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" /></svg>
+    </button>
+    <button type="button" className="fb-icon" aria-label="Redo" title="Redo (⇧⌘Z)" disabled={!history.canRedo} onClick={history.redo}>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 14 5-5-5-5" /><path d="M20 9H9.5a5.5 5.5 0 0 0 0 11H13" /></svg>
+    </button>
+  </>;
+  // On the wide Build page the header owns Preview, so undo/redo float on the canvas instead of taking a bar.
+  const showBar = layout !== 'wide' || preview || previewProp === undefined;
+  return (
+    <div ref={rootRef} className={`fb fb-${layout}${preview ? ' is-preview' : ''}`} onKeyDown={onKeyDown} tabIndex={-1}>
+      {showBar && <div className="fb-bar">
+        {layout === 'mid' && !preview && (
+          <button type="button" className="fb-btn sm" aria-expanded={drawer} onClick={() => setDrawer(d => !d)}>
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h10" /></svg> Questions <small>{fields.length}</small>
+          </button>
+        )}
+        {layout === 'phone' && (
+          <div className="fb-seg" role="group" aria-label="View">
+            <button type="button" aria-pressed={!preview} onClick={() => setPreview(false)}>Questions</button>
+            <button type="button" aria-pressed={preview} onClick={() => setPreview(true)}>Preview</button>
+          </div>
+        )}
+        <span className="fb-bar-sp" />
+        {preview && layout !== 'phone' && (
+          <div className="fb-seg" role="group" aria-label="Preview width">
+            <button type="button" aria-pressed={device === 'desktop'} onClick={() => setDevice('desktop')}>Desktop</button>
+            <button type="button" aria-pressed={device === 'phone'} onClick={() => setDevice('phone')}>Phone</button>
+          </div>
+        )}
+        {preview && layout !== 'phone' && <button type="button" className="fb-btn sm" onClick={() => setPreview(false)}>Back to editing</button>}
+        {!preview && <>
+          {undoRedo}
+          {previewProp === undefined && layout !== 'phone' && <button type="button" className="fb-btn sm" onClick={() => setPreview(true)}>Preview</button>}
+        </>}
+      </div>}
+
+      {layout === 'phone'
+        ? <div className="fb-main">{preview ? <div className="fb-canvas">{canvas}</div> : outline}</div>
+        : (
+          <div className="fb-main">
+            {!preview && (layout === 'wide' ? outline : drawer && <>
+              <div className="fb-drawer-back" onClick={() => setDrawer(false)} />
+              <div className="fb-drawer">{outline}</div>
+            </>)}
+            <div className="fb-canvas" onClick={e => { if (e.target === e.currentTarget) setSelection(null); }}>
+              {!showBar && <div className="fb-float">{undoRedo}</div>}
+              {canvas}
+            </div>
+            {!preview && <aside className="fb-insp" aria-label="Question settings">{inspector}</aside>}
+          </div>
+        )}
+
+      {layout === 'phone' && sheet && selection && !preview && (
+        <div className="fb-sheet-back" onMouseDown={e => { if (e.target === e.currentTarget) setSheet(false); }}>
+          <div className="fb-sheet" role="dialog" aria-modal="true" aria-label="Edit" onKeyDown={e => { if (e.key === 'Escape') { e.stopPropagation(); setSheet(false); } }}>
+            <div className="fb-sheet-grab" aria-hidden="true" />
+            <div className="fb-sheet-top"><button type="button" className="fb-btn sm primary" onClick={() => setSheet(false)}>Done</button></div>
+            <div className="fb-sheet-body">{inspector}</div>
+          </div>
+        </div>
+      )}
+      {inserting && <InsertMenu onPick={type => insert(type, inserting.after)} onClose={() => { setInserting(null); rootRef.current?.focus(); }} />}
+      {toast && (
+        <div className="fb-toast" role="status">
+          <span>{toast.text}</span>
+          {toast.undo && <button type="button" onClick={() => { toast.undo?.(); setToast(null); }}>Undo</button>}
+          <button type="button" className="fb-toast-x" aria-label="Dismiss" onClick={() => setToast(null)}>✕</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FormEditor({ definition, event = false }: { definition: FormDefinition; event?: boolean }) {
+  const [value, setValue] = useState(definition);
+  return <><input type="hidden" name="definition" value={JSON.stringify(value)} /><FormBuilder value={value} onChange={setValue} event={event} /></>;
+}
+export { starter };

package/src/components/forms/FormHeader.astro

@@ -0,0 +1,31 @@
+---
+// Shared head for one form: breadcrumb, name, status and the
+// Build · Responses · Share text tabs. Templates only have Build.
+import type { SavedForm } from '../../lib/forms/schema';
+import '../../styles/forms-admin.css';
+
+interface Props {
+  form: SavedForm;
+  active: 'build' | 'responses' | 'share';
+  responses?: number;
+}
+const { form, active, responses } = Astro.props;
+const base = `/admin/forms/${form.id}`;
+const status = form.status === 'published' ? (form.draft ? 'Edited' : 'Published') : form.status === 'archived' ? 'Archived' : 'Draft';
+const tone = status === 'Published' ? 'fst-green' : status === 'Edited' ? 'fst-amber' : 'fst-muted';
+---
+<div class="fh">
+  <p class="sub fh-crumb"><a href={`/admin/forms${form.kind === 'template' ? '?tab=templates' : ''}`}>{form.kind === 'template' ? 'Templates' : 'Forms'}</a> / {form.name}</p>
+  <div class="fh-row">
+    <h1>{form.name}</h1>
+    <span class={`fh-status fst ${tone}`}><i aria-hidden="true" />{status}</span>
+    <div class="fh-actions"><slot name="actions" /></div>
+  </div>
+  {form.kind === 'form' && (
+    <nav class="ptabs fh-tabs" aria-label="Form">
+      <a href={base} aria-current={active === 'build' ? 'page' : undefined}>Build</a>
+      <a href={`${base}/submissions`} aria-current={active === 'responses' ? 'page' : undefined}>Responses{responses !== undefined && <small>{responses}</small>}</a>
+      <a href={`${base}/share`} aria-current={active === 'share' ? 'page' : undefined}>Share</a>
+    </nav>
+  )}
+</div>

package/src/components/forms/InsertMenu.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { renderControl } from '../../lib/forms/fields';
+import { TypeIcon } from './TypeIcon';
+import { INSERT, META, newField, type FieldType, type Group } from './meta';
+
+const GROUPS: Group[] = ['Basics', 'Contact', 'Other'];
+
+/** Tally-style "Add question" menu: search, grouped list, ↑↓ ↵ Esc, 1–5 for the basics, and a small preview. */
+export function InsertMenu({ onPick, onClose }: { onPick: (type: FieldType) => void; onClose: () => void }) {
+  const [query, setQuery] = useState('');
+  const [active, setActive] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+  const items = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return INSERT;
+    // Label matches first (starts-with beats contains), then group/description matches.
+    const rank = (t: FieldType) => { const l = META[t].label.toLowerCase(); return l.startsWith(q) ? 0 : l.includes(q) ? 1 : `${META[t].group} ${t} ${META[t].desc}`.toLowerCase().includes(q) ? 2 : 3; };
+    return INSERT.filter(t => rank(t) < 3).sort((a, b) => rank(a) - rank(b));
+  }, [query]);
+  const current = items[Math.min(active, items.length - 1)];
+  useEffect(() => { setActive(0); }, [query]);
+  useEffect(() => { listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' }); }, [active]);
+
+  const onKey = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); if (items.length) setActive(i => (i + (e.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length); }
+    else if (e.key === 'Enter') { e.preventDefault(); if (current) onPick(current); }
+    else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); onClose(); }
+    else if (!query && /^[1-5]$/.test(e.key)) { e.preventDefault(); onPick(INSERT[Number(e.key) - 1]); }
+  };
+  const sample = current ? { ...newField(current, []), label: META[current].fresh, options: ['Option A', 'Option B'] } : null;
+
+  return (
+    <div className="fb-ins-back" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
+      <div className="fb-ins" role="dialog" aria-modal="true" aria-label="Add question" onKeyDown={onKey}>
+        <div className="fb-ins-search">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
+          <input autoFocus value={query} onChange={e => setQuery(e.target.value)} placeholder="Find a question type…" aria-label="Find a question type" role="combobox" aria-expanded="true" aria-controls="fb-ins-list" aria-activedescendant={current ? `fb-ins-${current}` : undefined} />
+          <kbd>esc</kbd>
+        </div>
+        <div className="fb-ins-list" id="fb-ins-list" role="listbox" ref={listRef}>
+          {!items.length && <p className="fb-ins-empty">No question type matches “{query}”.</p>}
+          {(query.trim() ? ['Results'] : GROUPS).map(g => {
+            const inGroup = g === 'Results' ? items : items.filter(t => META[t].group === g);
+            if (!inGroup.length) return null;
+            return (
+              <div key={g} role="group" aria-label={g}>
+                <p className="fb-ins-g">{g}</p>
+                {inGroup.map(t => {
+                  const i = items.indexOf(t), n = INSERT.indexOf(t);
+                  return (
+                    <div key={t} id={`fb-ins-${t}`} role="option" aria-selected={i === active} className="fb-ins-item" onMouseMove={() => setActive(i)} onClick={() => onPick(t)}>
+                      <TypeIcon type={t} />{META[t].label}{!query && n < 5 && <kbd>{n + 1}</kbd>}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+        {current && sample && (
+          <div className="fb-ins-pv" aria-live="polite">
+            <b>{META[current].label}</b>
+            <p>{META[current].desc}</p>
+            <div className="fb-paper fb-ins-sample" inert>
+              {current === 'heading'
+                ? <div className="pc-form-heading"><h3>Section title</h3><p>A short description.</p></div>
+                : current === 'consent'
+                  ? <div className="pc-bk-check"><input type="checkbox" readOnly /><span>{sample.label}</span></div>
+                  : <div className="pc-bk-field"><span>{sample.label}</span><div dangerouslySetInnerHTML={{ __html: renderControl(sample, '', `fb-ins-s-${current}`) }} /></div>}
+            </div>
+            <button type="button" className="fb-btn primary sm" onClick={() => onPick(current)}>Insert <span aria-hidden="true">↵</span></button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}