@acms-subir/core 0.3.51 → 0.3.53

package/src/components/forms/Canvas.tsx

@@ -2,6 +2,8 @@ import { Fragment, useId, useLayoutEffect, useRef, useState } from 'react';
 import { escapeForm, renderControl, renderField, renderFields } from '../../lib/forms/fields';
 import { isHalf, type FormDefinition, type FormField } from '../../lib/forms/schema';
 import { answersFrom, firstError } from '../../lib/forms/validate';
+import { formStrings, thanksText, type FormStrings } from '../../lib/forms/words';
+import { rsvpStrings } from '../../lib/calendar/rsvp-words';
 import { META, type Selection, type SystemField } from './meta';
 
 /** Plain-text contentEditable that doesn't fight the caret: the DOM is only rewritten when the value changes from outside. */
@@ -37,20 +39,22 @@ type CanvasProps = {
   onSelect: (s: Selection) => void; patch: (next: Partial<FormDefinition>, key: string) => void;
   patchField: (id: string, next: Partial<FormField>, key: string) => void; onLabelDone: (id: string) => void;
   onInsertAfter: (id: string | null) => void; onDuplicate: (id: string) => void; onRemove: (id: string) => void;
+  /** writing another language: `value` holds its words ('' = not written yet), `source` the main form, whose words show where it has none */
+  source?: FormDefinition; words?: FormStrings; submitFallback?: string;
 };
 
 /** The form drawn with the public form markup/classes; labels, help, title, intro and the button edit in place. */
 export function Canvas(p: CanvasProps) {
-  const { value, system, selection, event, onSelect } = p;
+  const { value, system, selection, event, onSelect, source } = p;
   const prefix = useId().replace(/:/g, '');
   const sel = (s: Selection) => JSON.stringify(s) === JSON.stringify(selection);
-  const submitFallback = event ? 'Confirm my seat' : 'Submit';
+  const submitFallback = p.submitFallback ?? (event ? 'Confirm my seat' : 'Submit');
 
   if (selection?.kind === 'thanks') return (
     <div className="fb-paper fb-paper-done">
       <p className="fb-paper-tag">After someone submits</p>
-      <h2 className="fb-title">{value.title || 'Thank you'}</h2>
-      <p className={`fb-thanks on`}><Inline value={value.confirmation} onChange={v => p.patch({ confirmation: v }, 'confirmation')} placeholder={event ? 'Uses the booking confirmation message' : 'Thank you. Your response has been received.'} max={1000} multiline label="Thank-you message" /></p>
+      <h2 className="fb-title">{value.title || source?.title || 'Thank you'}</h2>
+      <p className={`fb-thanks on`}><Inline value={value.confirmation} onChange={v => p.patch({ confirmation: v }, 'confirmation')} placeholder={event ? source?.confirmation || 'Uses the booking confirmation message' : thanksText(source?.confirmation ?? '', p.words ?? formStrings('en'))} max={1000} multiline label="Thank-you message" /></p>
       <button type="button" className="fb-link" onClick={() => onSelect(null)}>← Back to the questions</button>
     </div>
   );
@@ -66,8 +70,8 @@ export function Canvas(p: CanvasProps) {
   return (
     <div className="fb-paper" onClick={e => { if (e.target === e.currentTarget) onSelect(null); }}>
       <div className={`fb-item fb-head${sel({ kind: 'form' }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'form' })}>
-        <h2 className="fb-title"><Inline value={value.title} onChange={v => p.patch({ title: v }, 'title')} placeholder="Form title" max={120} label="Form title" /></h2>
-        <p className="fb-intro"><Inline value={value.intro} onChange={v => p.patch({ intro: v }, 'intro')} placeholder="Add an introduction (optional)" max={1000} multiline label="Introduction" /></p>
+        <h2 className="fb-title"><Inline value={value.title} onChange={v => p.patch({ title: v }, 'title')} placeholder={source?.title || 'Form title'} max={120} label="Form title" /></h2>
+        <p className="fb-intro"><Inline value={value.intro} onChange={v => p.patch({ intro: v }, 'intro')} placeholder={source?.intro || 'Add an introduction (optional)'} max={1000} multiline label="Introduction" /></p>
       </div>
       {system.map((f, i) => (
         <div key={`sys-${i}`} className={`fb-item fb-sys${sel({ kind: 'system', index: i }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'system', index: i })} title="Always asked">
@@ -81,27 +85,30 @@ export function Canvas(p: CanvasProps) {
         </button>
       )}
       <div className={`fb-item fb-submit-wrap${sel({ kind: 'submit' }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'submit' })}>
-        <div className="pc-bk-submit fb-submit"><Inline value={value.submitLabel} onChange={v => p.patch({ submitLabel: v }, 'submit')} placeholder={submitFallback} max={80} label="Submit button label" /></div>
+        <div className="pc-bk-submit fb-submit"><Inline value={value.submitLabel} onChange={v => p.patch({ submitLabel: v }, 'submit')} placeholder={source?.submitLabel || submitFallback} max={80} label="Submit button label" /></div>
       </div>
     </div>
   );
 }
 
-function Item({ field: f, prefix, on, onSelect, patchField, onLabelDone, onInsertAfter, onDuplicate, onRemove }: CanvasProps & { field: FormField; prefix: string; on: boolean }) {
+function Item({ field: f, prefix, on, onSelect, patchField, onLabelDone, onInsertAfter, onDuplicate, onRemove, source, words }: CanvasProps & { field: FormField; prefix: string; on: boolean }) {
   const id = `${prefix}-${f.id}`;
-  const label = <Inline value={f.label} onChange={v => patchField(f.id, { label: v }, `label:${f.id}`)} onDone={() => onLabelDone(f.id)} placeholder={META[f.type].fresh} max={200} label={`${META[f.type].label} label`} />;
+  // the main-language question while writing another language
+  const main = source?.fields.find(x => x.id === f.id);
+  const hasHelp = Boolean(f.help || main?.help || on);
+  const label = <Inline value={f.label} onChange={v => patchField(f.id, { label: v }, `label:${f.id}`)} onDone={() => onLabelDone(f.id)} placeholder={main?.label || META[f.type].fresh} max={200} label={`${META[f.type].label} label`} />;
   const req = f.required ? <span className="fb-req-mark" aria-hidden="true"> *</span> : null;
-  const help = (f.help || on) ? <small className="fb-help"><Inline value={f.help} onChange={v => patchField(f.id, { help: v }, `help:${f.id}`)} placeholder={f.type === 'heading' ? 'Add a description (optional)' : 'Add help text (optional)'} max={300} label="Help text" /></small> : null;
-  const control = <div className="fb-control" inert dangerouslySetInnerHTML={{ __html: renderControl(f, '', id) }} />;
+  const help = hasHelp ? <small className="fb-help"><Inline value={f.help} onChange={v => patchField(f.id, { help: v }, `help:${f.id}`)} placeholder={main?.help || (f.type === 'heading' ? 'Add a description (optional)' : 'Add help text (optional)')} max={300} label="Help text" /></small> : null;
+  const control = <div className="fb-control" inert dangerouslySetInnerHTML={{ __html: renderControl(f, '', id, words) }} />;
   const body = f.type === 'heading'
-    ? <div className="pc-form-heading"><h3>{label}</h3>{(f.help || on) && <p><Inline value={f.help} onChange={v => patchField(f.id, { help: v }, `help:${f.id}`)} placeholder="Add a description (optional)" max={300} label="Section description" /></p>}</div>
+    ? <div className="pc-form-heading"><h3>{label}</h3>{hasHelp && <p><Inline value={f.help} onChange={v => patchField(f.id, { help: v }, `help:${f.id}`)} placeholder={main?.help || 'Add a description (optional)'} max={300} label="Section description" /></p>}</div>
     : f.type === 'checkbox' || f.type === 'consent'
       ? <div className="pc-bk-check"><input type="checkbox" tabIndex={-1} aria-hidden="true" readOnly checked={false} /><span>{label}{req}{help}</span></div>
       : f.type === 'radio' || f.type === 'checkboxes'
         ? <div className="pc-bk-field pc-bk-choices"><div className="fb-legend">{label}{req}</div>{control}{help}</div>
         : <div className="pc-bk-field"><span>{label}{req}</span>{control}{help}</div>;
   return (
-    <div className={`fb-item${on ? ' on' : ''}${isHalf(f) ? ' is-half' : ''}`} data-item={f.id} tabIndex={-1} aria-label={`${META[f.type].label}: ${f.label}`}
+    <div className={`fb-item${on ? ' on' : ''}${isHalf(f) ? ' is-half' : ''}`} data-item={f.id} tabIndex={-1} aria-label={`${META[f.type].label}: ${f.label || main?.label || ''}`}
       onClick={e => { onSelect({ kind: 'field', id: f.id }); if (!(e.target as HTMLElement).closest('.fb-inline, button')) e.currentTarget.focus({ preventScroll: true }); }}>
       {body}
       {on && (
@@ -119,13 +126,18 @@ function Item({ field: f, prefix, on, onSelect, patchField, onLabelDone, onInser
   );
 }
 
-/** Interactive preview: type, tick and press the button to check validation. Nothing is sent. */
-export function Preview({ value, system, event, device }: { value: FormDefinition; system: SystemField[]; event: boolean; device: 'desktop' | 'phone' }) {
+/**
+ * Interactive preview: type, tick and press the button to check validation.
+ * Nothing is sent. lang: the language previewed (`value` is already in it),
+ * for the form's own words around the questions.
+ */
+export function Preview({ value, system, event, device, lang = '' }: { value: FormDefinition; system: SystemField[]; event: boolean; device: 'desktop' | 'phone'; lang?: string }) {
   const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const e = escapeForm;
-  const sys = system.map((f, i) => renderField({ id: `sys${i}`, type: f.type, label: f.label, required: f.type !== 'select', help: '', options: f.type === 'select' ? ['1', '2'] : [] }, '', 'pv-sys')).join('');
-  const html = `${value.title ? `<h2>${e(value.title)}</h2>` : ''}${value.intro ? `<p class="fb-pv-intro">${e(value.intro)}</p>` : ''}${sys}${renderFields(value, {}, 'pv')}`;
+  const w = formStrings(lang), rsvp = rsvpStrings(lang);
+  const sys = system.map((f, i) => renderField({ id: `sys${i}`, type: f.type, label: f.label, required: f.type !== 'select', help: '', options: f.type === 'select' ? ['1', '2'] : [] }, '', 'pv-sys', w)).join('');
+  const html = `${value.title ? `<h2>${e(value.title)}</h2>` : ''}${value.intro ? `<p class="fb-pv-intro">${e(value.intro)}</p>` : ''}${sys}${renderFields(value, {}, 'pv', w)}`;
   const key = JSON.stringify(value);
   return (
     <div className={`fb-pv-frame ${device}`}>
@@ -136,13 +148,13 @@ export function Preview({ value, system, event, device }: { value: FormDefinitio
           const data = new FormData(ev.currentTarget);
           try {
             const error = firstError(value, answersFrom(name => data.getAll(name), value));
-            setResult(error ? { ok: false, text: error } : { ok: true, text: value.confirmation || (event ? 'Your seat is saved.' : 'Thank you. Your response has been received.') });
+            setResult(error ? { ok: false, text: error } : { ok: true, text: event ? value.confirmation || 'Your seat is saved.' : thanksText(value.confirmation, w) });
           } catch (err) { setResult({ ok: false, text: err instanceof Error ? err.message : 'Invalid answer.' }); }
         }}
       >
         <div dangerouslySetInnerHTML={{ __html: html }} />
         {result && <p className={`fb-pv-result ${result.ok ? 'ok' : 'bad'}`} role="status">{result.ok ? <><b>Looks good.</b> Visitors would see: “{result.text}” Nothing was sent.</> : result.text}</p>}
-        <button type="submit" className="pc-bk-submit">{value.submitLabel || (event ? 'Confirm my seat' : 'Submit')}</button>
+        <button type="submit" className="pc-bk-submit">{value.submitLabel || (event ? rsvp.confirmSeat : w.submit)}</button>
       </form>
     </div>
   );

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',