@acms-subir/core 0.3.52 → 0.3.53

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @acms-subir/core
 
+## 0.3.53
+
+### Patch Changes
+
+- 1b8201d: Forms get a **Time** question and can speak every language your site has.
+
+  **Time questions.** Add one from the builder's question menu (next to Date). Visitors pick a time with their browser's time picker; it's saved as a 24-hour time like `18:30` and shows that way in Responses, CSV exports and alert emails. Required works like any other question, and anything that isn't a real time is refused. Event registration forms can ask it too.
+
+  **Forms in your site's other languages.** On a site with more than one language, the form builder now has a language switcher (English · Español …) above the canvas, and so does an event's registration form. Pick a language to write its words: the title, introduction, button and thank-you message, and each question's label, help text, placeholder and choices. You type straight onto the form, with the main language showing in grey where you haven't written anything yet, and the side panel shows the main language's words above each box. Anything left blank shows the main language. The questions themselves (types, order, choices, Required and the other settings) stay the same in every language, and when you add, remove or reorder choices, their translations move with them. Translation changes to a published form go live with **Publish changes**, and the menu opens the live form in each language.
+
+  - `/es/forms/<id>` shows the form in Spanish, and a Form block on a Spanish page, post, event or home page opens it in Spanish. Event pages in another language show the registration questions in that language too.
+  - The form's own words around your questions ("Submit", "Choose…", "Other", "Send another response" and the default thank-you) follow the page's language in English, Spanish, French, German and Portuguese. Error messages are still in English.
+  - Answers are always saved with the main-language choice, so Responses, exports and alerts read the same whatever language someone answered in. A translated choice can't read the same as a different choice, so every answer maps back to exactly one.
+  - Rewording a translated label, help text or title doesn't change a form's version, so someone halfway through the form, on the website or in an app, can still send it. Rewording a translated choice does, so an answer in the old words is sent back for a reload instead of being stored as the wrong choice. Sending the same website response again (a refresh after sending) shows the thank-you again and stores it once.
+
+  **API:** `GET /api/v1/forms/{id}` takes an optional `locale` and returns the form's words in that language (the main language's where it has none); `version` is the same in every language. `POST /api/v1/forms/{id}/responses` accepts a choice in the language it was shown in or in the main one, and an optional `?locale=` for the receipt's thank-you. `GET /api/v1/events/{slug}/rsvp?locale=` returns the registration questions in that language, and RSVPs may send their choices the same way. Field `type` can now be `time` (24-hour `HH:mm`). Stored forms gain optional `translations` on the form and on each question; nothing changes for forms without them, and no migration is needed.
+
 ## 0.3.52
 
 ### Patch Changes

package/docs/mobile.md

@@ -124,7 +124,7 @@ Read the app's `AGENTS.md` too: it holds the same rules, next to the code.
 | `useManagedBooking(token)` / `useCancelBooking` / `useRescheduleBooking` / `useRescheduleAvailability` | the booker's own booking (from `book()`'s `manageToken`): `can.cancel`, `can.reschedule`, `can.closed` (change cutoff passed: show "Contact us") |
 | `useConfirmBooking(token)` | an RSVP on a waitlist: `waitlisted` shows "#3 in line · 2 seats" (`waitlistLineText(booking, words, locale)`) and can leave (`useCancelBooking`); `offered` holds a spot until `booking.holdUntil` (`holdText`: "We're holding it until Fri, Oct 24 at 9 PM") and `can.confirm` takes it. `isReleased(error)`: the hold ran out (410) and the spot went to the next person |
 | `useGuest()` / `useMyBookings({ when })` | guest sign-in with an emailed code, then every booking made with that email; check `features.guestSignIn` |
-| `useLinks()` / `useForm(id)` / `useSubmitForm(id)` | the links page; published forms and sending answers; check `features.links` / `features.forms` |
+| `useLinks()` / `useForm(id)` / `useSubmitForm(id)` | the links page; published forms (in the app's language where the form has its words) and sending answers (choices as shown; `time` answers are 24-hour `HH:mm`, and `answerProblems` checks them); check `features.links` / `features.forms`. Ask a question type you don't know as short text |
 | `useLive()` | live video: `snapshot`, `status` (`live`/`upcoming`/`offline`), `isLive`, localized `view` text, the owner's `display` choices (`style`, `bar`, `header`, `dock`). Polls every 30 s only in the foreground, rechecks on resume, drops an expired "live" even offline; idle while `features.live` is false. Render `<LiveCard>` / `<LiveTag>` |
 | `useResources()` / `useAvailability({ resource, link })` / `useBooking()` | bookings |
 | `useRoomFree({ room, start, end })` | bookings: is a requestable room free (no names) |

package/mobile-template/recipes/events/files/components/RsvpPanel.tsx

@@ -32,7 +32,7 @@ const tokens = {
 
 type Answers = Record<string, string | string[]>;
 const OTHER = '__other__';
-const keyboards: Partial<Record<FormField['type'], KeyboardTypeOptions>> = { email: 'email-address', phone: 'phone-pad', number: 'numeric', url: 'url' };
+const keyboards: Partial<Record<FormField['type'], KeyboardTypeOptions>> = { email: 'email-address', phone: 'phone-pad', number: 'numeric', url: 'url', time: 'numbers-and-punctuation' };
 // "Other" choices send the typed text instead
 const withOther = (f: FormField, value: string | string[] | undefined, other: string): string | string[] => {
   if (f.type === 'checkboxes') { const list = Array.isArray(value) ? value : []; return list.includes(OTHER) ? [...list.filter((v) => v !== OTHER), other.trim()] : list; }
@@ -269,7 +269,7 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
     }
     return text(f.label, String(values[f.id] ?? ''), (v) => set(f.id, v), {
       required: f.required, help: f.help, problem, multiline: f.type === 'textarea', keyboard: keyboards[f.type],
-      placeholder: f.placeholder || (f.type === 'date' ? words.datePlaceholder : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
+      placeholder: f.placeholder || (f.type === 'date' ? words.datePlaceholder : f.type === 'time' ? words.timePlaceholder : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
     });
   };
 

package/mobile-template/recipes/rsvp/files/components/RsvpPanel.tsx

@@ -32,7 +32,7 @@ const tokens = {
 
 type Answers = Record<string, string | string[]>;
 const OTHER = '__other__';
-const keyboards: Partial<Record<FormField['type'], KeyboardTypeOptions>> = { email: 'email-address', phone: 'phone-pad', number: 'numeric', url: 'url' };
+const keyboards: Partial<Record<FormField['type'], KeyboardTypeOptions>> = { email: 'email-address', phone: 'phone-pad', number: 'numeric', url: 'url', time: 'numbers-and-punctuation' };
 // "Other" choices send the typed text instead
 const withOther = (f: FormField, value: string | string[] | undefined, other: string): string | string[] => {
   if (f.type === 'checkboxes') { const list = Array.isArray(value) ? value : []; return list.includes(OTHER) ? [...list.filter((v) => v !== OTHER), other.trim()] : list; }
@@ -269,7 +269,7 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
     }
     return text(f.label, String(values[f.id] ?? ''), (v) => set(f.id, v), {
       required: f.required, help: f.help, problem, multiline: f.type === 'textarea', keyboard: keyboards[f.type],
-      placeholder: f.placeholder || (f.type === 'date' ? words.datePlaceholder : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
+      placeholder: f.placeholder || (f.type === 'date' ? words.datePlaceholder : f.type === 'time' ? words.timePlaceholder : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
     });
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.52",
+  "version": "0.3.53",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ThemeSections.astro

@@ -19,11 +19,11 @@ const { page, settings } = Astro.props;
 const theme = getTheme(settings.activeTheme);
 const layout = settings.sectionPages[page.id];
 const repo = await getRepo(Astro.locals);
-const bodyHtml = page.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';
+const locale = Astro.props.locale ?? requestLocale(Astro.url, Astro.locals);
+const bodyHtml = page.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo, locale)) : '';
 // admin design preview: sections carry their ids so the Design screen can
 // open the one you click (see Site.astro's preview script)
 const editable = Astro.props.editable ?? (await resolvePreview(Astro.url, Astro.cookies, Astro.locals)).role === 'admin';
-const locale = Astro.props.locale ?? requestLocale(Astro.url, Astro.locals);
 const now = Date.now();
 const nowWall = wallNow(settings.timezone || 'UTC', now);
 // another language: dates/times format in it (components read settings.locale)

package/src/components/editor/PostEditor.tsx

@@ -1162,6 +1162,8 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
                 eventId={docId}
                 title={meta.title}
                 status={meta.status}
+                languages={languages}
+                mainLanguage={mainLanguage}
                 tags={<TagInput tags={meta.tags} suggestions={tagSuggestions} onChange={(tags) => setMeta({ tags })} />}
               />
             </div>

package/src/components/editor/event/EventSheet.tsx

@@ -13,6 +13,7 @@ import { RegistrationCard } from './RegistrationCard';
 import { WhenCard } from './WhenCard';
 import { SingleDates } from './SingleDates';
 import { registrationMode } from './registration';
+import type { SiteLanguage } from '../../forms/FormBuilder';
 
 // Every event setting, on the page above the event's own content, as one
 // settings column: When · Where · CTA · Organize · Status, with a
@@ -31,6 +32,9 @@ interface Props {
   title: string;
   status: string;
   tags?: ReactNode;
+  /** the site's other languages and its main one, for the registration form's words in each */
+  languages?: SiteLanguage[];
+  mainLanguage?: SiteLanguage;
 }
 
 const SECTIONS = [
@@ -43,7 +47,7 @@ const SECTIONS = [
 
 const jump = (id: string) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
 
-export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, maps, eventId, title, status, tags }: Props) {
+export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, maps, eventId, title, status, tags, languages, mainLanguage }: Props) {
   const [places, setPlaces] = useState<Place[]>([]);
   const [current, setCurrent] = useState<string>(SECTIONS[0].id);
   const root = useRef<HTMLDivElement>(null);
@@ -129,7 +133,7 @@ export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, ma
             onLocation={(name) => onChange({ location: { ...meta.location, name, placeId: '' } })}
           />
         </Section>
-        <RegistrationCard meta={meta} onChange={onChange} eventId={eventId} title={title} />
+        <RegistrationCard meta={meta} onChange={onChange} eventId={eventId} title={title} languages={languages} mainLanguage={mainLanguage} />
         <OrganizeCard meta={meta} onChange={onChange} calendars={calendars} fields={fields} tags={tags} />
         <StatusSection meta={meta} onChange={onChange} />
       </div>

package/src/components/editor/event/RegistrationCard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { starter } from '../../forms/FormBuilder';
+import { starter, type SiteLanguage } from '../../forms/FormBuilder';
 import type { EventCta } from '../../../lib/schema';
 import type { EventMeta } from '../EventPanel';
 import { Section } from './Section';
@@ -13,7 +13,7 @@ const MODES: { id: RegistrationMode; label: string; sub: string }[] = [
   { id: 'rsvp', label: 'Built-in form', sub: 'Collect RSVPs here' },
 ];
 
-export function RegistrationCard({ meta, onChange, eventId, title = '' }: { eventId?: string; title?: string; meta: EventMeta; onChange: (patch: Partial<EventMeta>) => void }) {
+export function RegistrationCard({ meta, onChange, eventId, title = '', languages, mainLanguage }: { eventId?: string; title?: string; meta: EventMeta; onChange: (patch: Partial<EventMeta>) => void; languages?: SiteLanguage[]; mainLanguage?: SiteLanguage }) {
   // "Link button" with nothing typed yet is still link mode, so keep the
   // choice locally and only fall back to the derived one on first render
   const [mode, setMode] = useState<RegistrationMode>(() => registrationMode(meta));
@@ -94,7 +94,7 @@ export function RegistrationCard({ meta, onChange, eventId, title = '' }: { even
               <button type="button" className="pe-btn sm" aria-haspopup="dialog" onClick={() => setEditing(true)}>Edit form</button>
             </div>
           </div>
-          {editing && <RegistrationFormEditor form={form} maxSeats={meta.rsvp.maxSeats} eventTitle={title} onClose={() => setEditing(false)} onChange={(f) => onChange({ rsvp: { ...meta.rsvp, form: f } })} />}
+          {editing && <RegistrationFormEditor form={form} maxSeats={meta.rsvp.maxSeats} eventTitle={title} languages={languages} mainLanguage={mainLanguage} onClose={() => setEditing(false)} onChange={(f) => onChange({ rsvp: { ...meta.rsvp, form: f } })} />}
         </div>
       )}
     </Section>

package/src/components/editor/event/RegistrationFormEditor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { actions } from 'astro:actions';
-import FormBuilder, { starter } from '../../forms/FormBuilder';
+import FormBuilder, { starter, type SiteLanguage } from '../../forms/FormBuilder';
 import type { SystemField } from '../../forms/meta';
 import type { FormDefinition, SavedForm } from '../../../lib/forms/schema';
 import '../../../styles/forms.css';
@@ -10,12 +10,15 @@ type Choice = { id: string; name: string; note: string; definition: () => FormDe
 // The event's own registration questions in the full forms builder, on top
 // of the event editor. Edits go straight into the event's meta (its own copy);
 // the event's Update/autosave persists them, so "Done" only closes.
-export function RegistrationFormEditor({ form, onChange, onClose, maxSeats, eventTitle }: {
+export function RegistrationFormEditor({ form, onChange, onClose, maxSeats, eventTitle, languages, mainLanguage }: {
   form: FormDefinition;
   onChange: (form: FormDefinition) => void;
   onClose: () => void;
   maxSeats: number;
   eventTitle: string;
+  /** the site's other languages: the builder's switcher writes the questions' words in each */
+  languages?: SiteLanguage[];
+  mainLanguage?: SiteLanguage;
 }) {
   const ref = useRef<HTMLDialogElement>(null);
   const [templates, setTemplates] = useState<SavedForm[]>([]);
@@ -135,7 +138,7 @@ export function RegistrationFormEditor({ form, onChange, onClose, maxSeats, even
         </div>
       )}
       <div className="pe-evr-body">
-        <FormBuilder value={form} onChange={onChange} mode="event" systemFields={system} />
+        <FormBuilder value={form} onChange={onChange} mode="event" systemFields={system} languages={languages} mainLanguage={mainLanguage} />
       </div>
     </dialog>
   );

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>}