@acms-subir/core 0.3.52 → 0.3.54

package/src/components/forms/FormBuildPage.tsx

@@ -2,18 +2,21 @@ 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 FormBuilder, { type SiteLanguage } 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 };
+type Props = { form: Pick<SavedForm, 'id' | 'name' | 'kind' | 'purpose' | 'status' | 'revision'> & { hasDraft: boolean }; definition: FormDefinition; responses?: number;
+  /** the site's other languages and its main one (none: no language switcher) */
+  languages?: SiteLanguage[]; mainLanguage?: SiteLanguage;
+};
 
 /**
  * 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) {
+export default function FormBuildPage({ form, definition, responses = 0, languages = [], mainLanguage }: Props) {
   const [value, setValue] = useState(definition);
   const [name, setName] = useState(form.name);
   const [status, setStatus] = useState(form.status);
@@ -30,6 +33,8 @@ export default function FormBuildPage({ form, definition, responses = 0 }: Props
   const inflight = useRef<Promise<boolean> | null>(null);
   const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
   const template = form.kind === 'template';
+  // language names for "In Español, …" issues (fixed for the page's life)
+  const names = useRef(Object.fromEntries(languages.map(l => [l.code, l.name]))).current;
 
   useEffect(() => { setSlot(document.getElementById('fb-actions')); }, []);
 
@@ -38,7 +43,7 @@ export default function FormBuildPage({ form, definition, responses = 0 }: Props
     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.' : '');
+    const issue = definitionIssue(snapshot.value, names) || (!snapshot.name.trim() ? 'The form needs a name.' : '');
     if (issue) { setState('invalid'); setMessage(issue); return false; }
     setState('saving');
     const run = (async () => {
@@ -138,7 +143,8 @@ export default function FormBuildPage({ form, definition, responses = 0 }: Props
         ? 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') }] : []),
+        ...(!template && live ? [{ label: 'Open public form ↗', run: () => window.open(`/forms/${form.id}`, '_blank', 'noopener') },
+          ...languages.map(l => ({ label: `Open in ${l.name} ↗`, run: () => window.open(`/${l.code}/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 }] : []),
       ]} />
@@ -149,7 +155,7 @@ export default function FormBuildPage({ form, definition, responses = 0 }: Props
     <>
       {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} />
+        responses={responses} preview={preview} onPreviewChange={setPreview} languages={languages} mainLanguage={mainLanguage} />
     </>
   );
 }

package/src/components/forms/FormBuilder.tsx

@@ -1,13 +1,20 @@
 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 { starter, type FieldWords, type FormDefinition, type FormField, type FormWords } from '../../lib/forms/schema';
+import { choicesIn, localizeForm } from '../../lib/forms/localize';
+import { formStrings } from '../../lib/forms/words';
+import { rsvpStrings } from '../../lib/calendar/rsvp-words';
 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 { DEFAULT_EVENT_SYSTEM, META, clean, keyFrom, newField, rememberChoices, switchType, withFieldWords, withFormWords, type FieldType, type Language, type RememberedChoices, type Selection, type SystemField } from './meta';
 import { useFormHistory } from './useFormHistory';
 
+/** A site language: its code and its name in itself ("Español"). */
+export type SiteLanguage = { code: string; name: string };
+const ENGLISH: SiteLanguage = { code: 'en', name: 'English' };
+
 export type FormBuilderProps = {
   value: FormDefinition;
   onChange: (v: FormDefinition) => void;
@@ -24,6 +31,9 @@ export type FormBuilderProps = {
   /** Controlled preview (the Build page drives it from its header). */
   preview?: boolean;
   onPreviewChange?: (on: boolean) => void;
+  /** The site's other languages (lib/i18n.ts extraLocales): a switcher to write the form's words in each. None: no switcher. */
+  languages?: SiteLanguage[];
+  mainLanguage?: SiteLanguage;
 };
 type Layout = 'wide' | 'mid' | 'phone';
 
@@ -32,12 +42,19 @@ type Layout = 'wide' | 'mid' | 'phone';
  * 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) {
+export default function FormBuilder({ value, onChange, event = false, mode, systemFields, name, onNameChange, responses = 0, preview: previewProp, onPreviewChange, languages = [], mainLanguage }: 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;
+  // '' = the main language; another one writes only that language's words
+  // (the questions, their choices and settings stay shared)
+  const [langChoice, setLang] = useState('');
+  const main = mainLanguage ?? ENGLISH;
+  const current = languages.find(l => l.code === langChoice);
+  const lang = current?.code ?? '';
+  const language: Language = { code: lang, name: current?.name ?? main.name, main: main.name, names: Object.fromEntries([main, ...languages].map(l => [l.code, l.name])) };
   const [selection, setSelection] = useState<Selection>(null);
   const [inserting, setInserting] = useState<{ after: string | null } | null>(null);
   const [drawer, setDrawer] = useState(false);
@@ -52,7 +69,7 @@ export default function FormBuilder({ value, onChange, event = false, mode, syst
   // 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[]>());
+  const optionMemory = useRef(new Map<string, RememberedChoices>());
 
   useLayoutEffect(() => {
     const el = rootRef.current; if (!el) return;
@@ -72,6 +89,13 @@ export default function FormBuilder({ value, onChange, event = false, mode, syst
   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]);
+  // the words of the language being written
+  const patchWords = useCallback((next: FormWords, key: string) => {
+    if (lang) commit({ ...valueRef.current, ...withFormWords(valueRef.current, lang, next) }, key);
+  }, [commit, lang]);
+  const patchFieldWords = useCallback((id: string, next: FieldWords, key: string) => {
+    if (lang) setFields(valueRef.current.fields.map(f => f.id === id ? withFieldWords(f, lang, next) : f), key);
+  }, [setFields, lang]);
   const select = (s: Selection) => { setSelection(s); setDrawer(false); if (layout === 'phone' && s) setSheet(true); };
 
   // Focus after React has rendered the moved/new question.
@@ -128,7 +152,7 @@ export default function FormBuilder({ value, onChange, event = false, mode, syst
   };
   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);
+    if (f.options.length) optionMemory.current.set(id, rememberChoices(f));
     setFields(valueRef.current.fields.map(x => x.id === id ? switchType(x, type, optionMemory.current.get(id)) : x));
   };
   const onLabelDone = (id: string) => {
@@ -183,23 +207,46 @@ export default function FormBuilder({ value, onChange, event = false, mode, syst
     return () => document.removeEventListener('keydown', onDoc);
   }, []);
   const openInsert = (after: string | null = selection?.kind === 'field' ? selection.id : null) => { setDrawer(false); setInserting({ after }); };
+  // another language: the list and preview show the form as its visitors see
+  // it; the canvas holds its own words ('' where none yet) over the main ones
+  const shown = lang ? localizeForm(value, lang) : value;
+  const t = (lang && value.translations?.[lang]) || {};
+  const words = lang ? {
+    ...value, title: t.title ?? '', intro: t.intro ?? '', submitLabel: t.submitLabel ?? '', confirmation: t.confirmation ?? '',
+    fields: value.fields.map((f) => {
+      const w = f.translations?.[lang];
+      return { ...f, label: w?.label ?? '', help: w?.help ?? '', options: choicesIn(f, lang), placeholder: w?.placeholder?.trim() || f.placeholder };
+    }),
+  } : value;
+  const canvasEdits = lang ? {
+    patch: (next: Partial<FormDefinition>, key: string) => patchWords(next, `${key}:${lang}`),
+    patchField: (id: string, next: Partial<FormField>, key: string) => patchFieldWords(id, { ...(next.label !== undefined ? { label: next.label } : {}), ...(next.help !== undefined ? { help: next.help } : {}) }, `${key}:${lang}`),
+    onLabelDone: () => {},
+    source: value, words: formStrings(lang), submitFallback: isEvent ? rsvpStrings(lang).confirmSeat : formStrings(lang).submit,
+  } : { patch, patchField, onLabelDone };
+  const langSwitch = languages.length > 0 && (
+    <div className="fb-seg fb-langs" role="group" aria-label="Language">
+      {[main, ...languages].map(l => <button key={l.code} type="button" aria-pressed={l.code === main.code ? !lang : lang === l.code} onClick={() => setLang(l.code === main.code ? '' : l.code)}>{l.name}</button>)}
+    </div>
+  );
   const outline = (
-    <Outline fields={fields} system={system} selection={selection} onSelect={s => {
+    <Outline fields={shown.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') }} />
+      labels={{ title: shown.title, submit: shown.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()} />
+      lockedKeys={lockedKeys} patch={patch} patchField={patchField} setType={setType} onLabelDone={onLabelDone} setKey={setKey} actions={actions} onAdd={() => openInsert()}
+      language={language} patchWords={patchWords} patchFieldWords={patchFieldWords} />
   );
   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} />;
+    ? <Preview value={shown} system={system} event={isEvent} device={layout === 'phone' ? 'phone' : device} lang={lang || main.code} />
+    : <Canvas value={words} system={system} selection={selection} event={isEvent} onSelect={select} {...canvasEdits}
+      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}>
@@ -225,6 +272,7 @@ export default function FormBuilder({ value, onChange, event = false, mode, syst
             <button type="button" aria-pressed={preview} onClick={() => setPreview(true)}>Preview</button>
           </div>
         )}
+        {langSwitch}
         <span className="fb-bar-sp" />
         {preview && layout !== 'phone' && (
           <div className="fb-seg" role="group" aria-label="Preview width">
@@ -249,6 +297,7 @@ export default function FormBuilder({ value, onChange, event = false, mode, syst
             </>)}
             <div className="fb-canvas" onClick={e => { if (e.target === e.currentTarget) setSelection(null); }}>
               {!showBar && <div className="fb-float">{undoRedo}</div>}
+              {!showBar && langSwitch && <div className="fb-float fb-float-l">{langSwitch}</div>}
               {canvas}
             </div>
             {!preview && <aside className="fb-insp" aria-label="Question settings">{inspector}</aside>}

package/src/components/forms/Inspector.tsx

@@ -1,9 +1,11 @@
 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 { FIELD_ID, type FieldWords, type FormDefinition, type FormField, type FormWords } from '../../lib/forms/schema';
+import { formStrings, thanksText } from '../../lib/forms/words';
+import { rsvpStrings } from '../../lib/calendar/rsvp-words';
 import { verticalOnly } from './dnd';
-import { META, TYPE_CHOICES, canOther, fieldIssue, isChoice, takesPlaceholder, type FieldType, type Selection, type SystemField } from './meta';
+import { META, TYPE_CHOICES, canOther, fieldIssue, isChoice, remapChoices, takesPlaceholder, type FieldType, type Language, type Selection, type SystemField } from './meta';
 
 type Props = {
   value: FormDefinition; selection: Selection; system: SystemField[]; event: boolean; phone: boolean;
@@ -13,11 +15,15 @@ type Props = {
   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;
+  language: Language;
+  patchWords: (next: FormWords, key: string) => void;
+  patchFieldWords: (id: string, next: FieldWords, key: string) => 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 (p.language.code) return <WordsInspector {...p} />;
   if (selection?.kind === 'field') {
     const field = value.fields.find(f => f.id === selection.id);
     if (field) return <FieldSettings {...p} field={field} />;
@@ -68,7 +74,7 @@ export function Inspector(p: Props) {
 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 issue = fieldIssue(f, value.fields, p.language.names);
   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.' : '';
@@ -93,7 +99,7 @@ function FieldSettings(p: Props & { field: FormField }) {
       <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)} />}
+      {isChoice(f.type) && <Choices options={f.options} onChange={(options, key, map) => patchField(f.id, { options, ...(map && f.translations ? { translations: remapChoices(f.translations, map) } : {}) }, 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}`)} />
@@ -121,13 +127,106 @@ function FieldSettings(p: Props & { field: FormField }) {
   );
 }
 
+/**
+ * Another language's words for whatever is selected, each under the main
+ * language's. Blank ones show the main language's. The questions themselves
+ * (types, choices, settings) are the same in every language.
+ */
+function WordsInspector(p: Props) {
+  const { value, selection, language } = p;
+  const t = value.translations?.[language.code] ?? {};
+  const own = formStrings(language.code), rsvp = rsvpStrings(language.code);
+  const src = { sourceName: language.main };
+  const blank = <p className="fb-hint">Blank ones show the {language.main}.</p>;
+  if (selection?.kind === 'field') {
+    const field = value.fields.find(f => f.id === selection.id);
+    if (field) return <QuestionWords {...p} field={field} />;
+  }
+  if (selection?.kind === 'form') return (
+    <div className="fb-insp-body">
+      <Head title="Title & introduction" sub={language.name} />
+      <Text label="Form title" value={t.title ?? ''} max={120} source={value.title} {...src} onChange={v => p.patchWords({ title: v }, `title:${language.code}`)} />
+      <Text label="Introduction" value={t.intro ?? ''} max={1000} rows={4} source={value.intro} {...src} onChange={v => p.patchWords({ intro: v }, `intro:${language.code}`)} />
+      {blank}
+    </div>
+  );
+  if (selection?.kind === 'submit') return (
+    <div className="fb-insp-body">
+      <Head title="Submit button" sub={language.name} />
+      <Text label="Button label" value={t.submitLabel ?? ''} max={80} source={value.submitLabel} {...src}
+        placeholder={value.submitLabel ? '' : p.event ? rsvp.confirmSeat + ' / ' + rsvp.requestSeat : own.submit} onChange={v => p.patchWords({ submitLabel: v }, `submit:${language.code}`)} />
+      {blank}
+    </div>
+  );
+  if (selection?.kind === 'thanks') return (
+    <div className="fb-insp-body">
+      <Head title="Thank-you message" sub={language.name} />
+      <Text label="Shown after someone submits" value={t.confirmation ?? ''} max={1000} rows={5} source={value.confirmation} {...src}
+        placeholder={p.event ? 'Uses the booking confirmation message' : thanksText(value.confirmation, own) === own.thanks ? own.thanks : ''} onChange={v => p.patchWords({ confirmation: v }, `confirmation:${language.code}`)} />
+      {blank}
+    </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> Its words are already in each visitor’s language.</p>
+      </div>
+    );
+  }
+  return (
+    <div className="fb-insp-body fb-insp-none">
+      <b>Writing in {language.name}</b>
+      <p>Click a question, the title or the button to write its words in {language.name}. Blank ones show the {language.main}.</p>
+      <p>Questions, choices and settings are the same in every language. Switch to {language.main} to change them.</p>
+    </div>
+  );
+}
+
+function QuestionWords(p: Props & { field: FormField }) {
+  const { field: f, language } = p;
+  const w = f.translations?.[language.code] ?? {};
+  const issue = fieldIssue(f, p.value.fields, language.names);
+  const own = formStrings(language.code);
+  const set = (next: FieldWords, key: string) => p.patchFieldWords(f.id, next, `${key}:${language.code}:${f.id}`);
+  const src = { sourceName: language.main };
+  return (
+    <div className="fb-insp-body">
+      <Head title={w.label?.trim() || f.label || META[f.type].label} sub={`${META[f.type].label} · ${language.name}`} />
+      {issue && <p className="fb-warn" role="alert">{issue}</p>}
+      <Text label={f.type === 'heading' ? 'Heading' : 'Label'} value={w.label ?? ''} max={200} source={f.label} {...src} onChange={v => set({ label: v }, 'label')} />
+      <Text label={f.type === 'heading' ? 'Description' : 'Help text'} value={w.help ?? ''} max={300} rows={2} source={f.help} {...src} onChange={v => set({ help: v }, 'help')} />
+      {takesPlaceholder(f) && <Text label={canOther(f.type) ? '“Other” placeholder' : f.type === 'select' ? 'Empty choice text' : 'Placeholder'} value={w.placeholder ?? ''} max={120} source={f.placeholder} {...src}
+        placeholder={f.placeholder ? '' : f.type === 'select' ? own.choose : canOther(f.type) ? own.typeAnswer : ''} onChange={v => set({ placeholder: v }, 'ph')} />}
+      {isChoice(f.type) && (
+        <div className="fb-f"><span className="fb-lab">Choices <small>· {language.main} on the left</small></span>
+          <div className="fb-tr-choices">
+            {f.options.map((o, i) => (
+              <label key={i} className="fb-tr-choice">
+                <span title={o}>{o}</span>
+                <input value={w.options?.[i] ?? ''} maxLength={200} placeholder={o} aria-label={`${o} in ${language.name}`}
+                  onChange={e => set({ options: f.options.map((_, j) => (j === i ? e.target.value.replace(/[\r\n]+/g, ' ') : w.options?.[j] ?? '')) }, `choice-${i}`)} />
+              </label>
+            ))}
+          </div>
+          {f.allowOther && canOther(f.type) && <small className="fb-hint">“{own.other}” is added in {language.name} for you.</small>}
+        </div>
+      )}
+      <p className="fb-hint">Blank ones show the {language.main}. Answers are saved in {language.main}, so they read the same whatever language people answer in.</p>
+    </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 }) {
+// source: the main language's words while writing another one, shown above the box
+function Text({ label, hint, value, onChange, onBlur, max, rows, placeholder, source, sourceName }: { label: string; hint?: string; value: string; onChange: (v: string) => void; onBlur?: () => void; max: number; rows?: number; placeholder?: string; source?: string; sourceName?: string }) {
   return (
     <label className="fb-f"><span className="fb-lab">{label}{hint && <small> · {hint}</small>}</span>
+      {source?.trim() && <span className="fb-src"><span>{sourceName}</span>{source}</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>
@@ -160,8 +259,13 @@ export function Menu({ items }: { items: { label: string; run: () => void; disab
   );
 }
 
-/** 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 }) {
+/**
+ * Choice list: drag or ⌥↑↓ to reorder, Enter adds below, Backspace on an
+ * empty choice removes it, pasting several lines adds many. `map` (new
+ * position → old, -1 for a new choice) comes with adds, removals and moves,
+ * so translated choices can follow theirs.
+ */
+function Choices({ options, onChange }: { options: string[]; onChange: (options: string[], key: string, map?: number[]) => 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));
@@ -170,7 +274,11 @@ function Choices({ options, onChange }: { options: string[]; onChange: (options:
   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 set = (next: string[], key = 'choices', idList?: string[]) => {
+    const before = ids.current;
+    if (idList) ids.current = idList;
+    onChange(next.slice(0, 50), key, idList ? idList.slice(0, 50).map(id => before.indexOf(id)) : undefined);
+  };
   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)));

package/src/components/forms/TypeIcon.tsx

@@ -12,6 +12,7 @@ const PATHS: Record<FieldType | 'title' | 'submit' | 'thanks', string> = {
   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',
+  time: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM12 7v5l3.5 2',
   consent: 'M5 12.5 9.5 17 19 7',
   checkbox: 'M5 12.5 9.5 17 19 7',
   heading: 'M6 4v16M18 4v16M6 12h12',

package/src/components/forms/meta.ts

@@ -1,10 +1,13 @@
 // 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';
+import { CHOICE_TYPES, FIELD_ID, type FieldWords, type FormDefinition, type FormField, type FormWords } from '../../lib/forms/schema';
+import { choiceClash } from '../../lib/forms/localize';
 
 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 };
+/** The language being written (code '' = the main one) and its name, the main one's, and every language's by code. */
+export type Language = { code: string; name: string; main: string; names: Record<string, 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' },
@@ -17,12 +20,13 @@ export const META: Record<FieldType, { label: string; group: Group; desc: string
   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' },
+  time: { label: 'Time', group: 'Other', desc: 'A time of day, like 6:30 PM. Stored as 18:30.', fresh: 'Time' },
   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 INSERT: FieldType[] = ['text', 'textarea', 'radio', 'checkboxes', 'select', 'email', 'phone', 'url', 'number', 'date', 'time', 'consent', 'heading'];
 export const TYPE_CHOICES: FieldType[] = [...INSERT];
 
 export const isChoice = (t: FieldType) => CHOICE_TYPES.includes(t);
@@ -46,21 +50,77 @@ export function clean(f: FormField): FormField {
   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;
+  const translations = cleanFieldWords(out, f.translations);
+  if (translations) out.translations = translations;
   return out;
 }
 
+const blank = (v: string | undefined) => !v || !v.trim();
+// Another language's words for a question: blank ones (and languages left
+// with none) are dropped, and so are words its type doesn't show. Choices
+// line up with the main ones by position.
+function cleanFieldWords(f: FormField, translations: FormField['translations']): FormField['translations'] {
+  const out: NonNullable<FormField['translations']> = {};
+  for (const [locale, t] of Object.entries(translations ?? {})) {
+    const w: FieldWords = {};
+    if (!blank(t.label)) w.label = t.label;
+    if (!blank(t.help)) w.help = t.help;
+    if (!blank(t.placeholder) && takesPlaceholder(f)) w.placeholder = t.placeholder;
+    if (isChoice(f.type) && t.options?.some(o => !blank(o))) {
+      const options = f.options.map((_, i) => t.options?.[i] ?? '');
+      while (blank(options[options.length - 1])) options.pop();
+      w.options = options;
+    }
+    if (Object.keys(w).length) out[locale] = w;
+  }
+  return Object.keys(out).length ? out : undefined;
+}
+
+/** The question with some of its words in `locale` changed. */
+export const withFieldWords = (f: FormField, locale: string, next: FieldWords): FormField =>
+  clean({ ...f, translations: { ...f.translations, [locale]: { ...f.translations?.[locale], ...next } } });
+
+/** The form's title, introduction, button or thank-you in `locale` changed (blank ones dropped). */
+export function withFormWords(d: FormDefinition, locale: string, next: FormWords): Pick<FormDefinition, 'translations'> {
+  const all = { ...d.translations, [locale]: { ...d.translations?.[locale], ...next } };
+  const out: NonNullable<FormDefinition['translations']> = {};
+  for (const [l, t] of Object.entries(all)) {
+    const w = Object.fromEntries(Object.entries(t).filter(([, v]) => !blank(v)));
+    if (Object.keys(w).length) out[l] = w;
+  }
+  return { translations: Object.keys(out).length ? out : undefined };
+}
+
+/** Each language's choices follow their main choice when choices are added, removed or moved (map: new position → old one, -1 for a new choice). */
+export function remapChoices(translations: FormField['translations'], map: number[]): FormField['translations'] {
+  if (!translations) return translations;
+  return Object.fromEntries(Object.entries(translations).map(([l, t]) => [l, t.options ? { ...t, options: map.map(i => (i >= 0 ? t.options?.[i] ?? '' : '')) } : t]));
+}
+
 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 });
+/** Choices kept while a question is some other type: the main ones and each language's. */
+export interface RememberedChoices { options: string[]; words: Record<string, string[]> }
+export const rememberChoices = (f: FormField): RememberedChoices => ({
+  options: f.options, words: Object.fromEntries(Object.entries(f.translations ?? {}).flatMap(([l, t]) => (t.options?.length ? [[l, t.options]] : []))),
+});
+
+/** Switching type keeps the label/help; choice lists (and their translations) survive between choice types. */
+export function switchType(f: FormField, type: FieldType, remembered?: RememberedChoices): FormField {
+  const restore = isChoice(type) && !f.options.length && !!remembered?.options.length;
+  const options = isChoice(type) ? (f.options.length ? f.options : restore ? remembered!.options : ['Option 1', 'Option 2']) : [];
+  const translations = restore
+    ? Object.fromEntries([...new Set([...Object.keys(f.translations ?? {}), ...Object.keys(remembered!.words)])]
+      .map((l) => [l, { ...(f.translations?.[l] ?? {}), ...(remembered!.words[l] ? { options: remembered!.words[l] } : {}) }]))
+    : f.translations;
+  return clean({ ...f, type, options, translations });
 }
 
-export function fieldIssue(f: FormField, all: FormField[]): string {
+/** names: language names by locale, for a translated choice that reads the same as another one */
+export function fieldIssue(f: FormField, all: FormField[], names: Record<string, string> = {}): 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.';
@@ -68,12 +128,14 @@ export function fieldIssue(f: FormField, all: FormField[]): string {
     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.';
+    const clash = choiceClash(f);
+    if (clash) return `In ${names[clash.locale] ?? clash.locale.toUpperCase()}, “${clash.text.trim()}” is used for two choices.`;
   }
   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}`; }
+export function definitionIssue(d: FormDefinition, names: Record<string, string> = {}): string {
+  for (const f of d.fields) { const issue = fieldIssue(f, d.fields, names); if (issue) return `“${f.label || META[f.type].label}”: ${issue}`; }
   return '';
 }
 

package/src/lib/api.ts

@@ -8,6 +8,9 @@ export class ApiError extends Error {
   /** retryAfter: seconds a 429 should wait (mobile API Retry-After; default 60) */
   constructor(public status: number, message: string, public retryAfter?: number) { super(message); }
 }
+/** An ApiError with a `code` saying why, for pages that word errors themselves (the member pages' words look them up). */
+export const coded = (status: number, code: string, message: string, retryAfter?: number): ApiError & { code: string } =>
+  Object.assign(new ApiError(status, message, retryAfter), { code });
 export const json = (body: unknown, status = 200) => Response.json(body, {
   status, headers: { 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff' },
 });

package/src/lib/backup/content.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import { SavedForm, FormSubmission } from '../forms/schema';
 import { AnnouncementRecord } from '../announcements/types';
-import { Page, Post, Media, Link, Tag, User, NavItem, Redirect, Settings, Calendar, CalEvent, Resource, BookingLink, Booking, Place } from '../schema';
+import { Page, Post, Media, Link, Tag, User, NavItem, Redirect, Settings, Calendar, CalEvent, Resource, BookingLink, Booking, Place, RequestRecord } from '../schema';
 import type { ContentRepository } from '../repo/types';
 
 // backups from before booking approval modes: a link that didn't confirm on
@@ -29,6 +29,7 @@ export const BackupContent = z.object({
   // optional (no version bump): older cores restore such a backup and skip them
   announcements: z.array(AnnouncementRecord).optional(),
   screens: z.array(ScreenRecord).optional(),
+  eventRequests: z.array(RequestRecord).optional(),
 }).superRefine((data, ctx) => {
   if (data.version >= 6 && (!data.forms || !data.formSubmissions)) ctx.addIssue({ code: 'custom', message: 'Version 6 requires forms and their submissions.' });
   if (data.version >= 5 && !data.bookingRequests) ctx.addIssue({ code: 'custom', message: 'Version 5 requires booking retry records.' });
@@ -48,12 +49,13 @@ export async function exportContent(repo: ContentRepository, now = Date.now()) {
     repo.listPlaces(), repo.forms.list(), repo.forms.submissions(undefined, -1),
   ]);
   const [announcements, screens] = await Promise.all([repo.announcements.list(-1), repo.screens.list()]);
+  const eventRequests = await repo.requests.list({ order: 'oldest', limit: -1 });
   return {
     format: 'acms-backup' as const, version: 6, exportedAt: new Date(now).toISOString(),
     settings: { ...settings, live: { ...settings.live, mode: 'off' as const, manual: { watchUrl: '', title: 'We’re live', until: 0 } }, ai: { ...settings.ai, enabled: false, encryptedKey: '' }, agent: { ...settings.agent, enabled: false, keyHash: '', keyPrefix: '', allowPublish: false }, monitoring: { ...settings.monitoring, pushUrl: '' } },
     pages, posts, media, links, tags, navItems, users, redirects,
     calendars: calendars.map(c => ({ ...c, feedToken: '' })), events,
-    resources: resources.map(r => ({ ...r, feedToken: '' })), bookingLinks, ...bookingState, places, forms, formSubmissions, announcements,
+    resources: resources.map(r => ({ ...r, feedToken: '' })), bookingLinks, ...bookingState, places, forms, formSubmissions, announcements, eventRequests,
     screens: screens.map(s => ({ ...s, key: '', lastSeenAt: null })),
   };
 }

package/src/lib/calendar/api.ts

@@ -6,6 +6,7 @@
 import { roomColor, type CalEvent, type Calendar, type MovedDate, type Resource } from '../schema';
 import { calendarFeedUrl, eventIcsUrl, eventUrl, publicEventFields } from './config';
 import { describeRepeat } from './rrule';
+import { localizeForm } from '../forms/localize';
 
 export interface EventJson {
   id: string;
@@ -90,7 +91,8 @@ export function eventToJson(e: CalEvent, origin: string, calendars: Map<string,
     movedDates: movedDatesToJson(e, opts.includePrivate),
     location: e.location,
     cta: e.cta,
-    rsvp: opts.includePrivate ? e.rsvp : (({ notifyStaff: _, ...rsvp }) => rsvp)(e.rsvp),
+    // public: the RSVP form in the main language, without its translations (GET /events/{slug}/rsvp?locale= has it in a language)
+    rsvp: opts.includePrivate ? e.rsvp : (({ notifyStaff: _, ...rsvp }) => (rsvp.form ? { ...rsvp, form: localizeForm(rsvp.form, '') } : rsvp))(e.rsvp),
     image: e.cover ? abs(origin, e.cover) : '',
     imageAlt: e.coverAlt,
     tags: e.tags.filter((t) => !t.startsWith('#')),