@acms-subir/core 0.3.52 → 0.3.53

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/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('#')),

package/src/lib/dynamicBlocks.ts

@@ -5,6 +5,7 @@ import { formatDate } from './dates';
 import { CONTENT, collectionUrl } from './content';
 import { renderCalendarBlock, isNativeSource } from './calendar/render';
 import { renderEventCards, type EventCardAttrs } from './calendar/cards';
+import { localePath } from './i18n';
 
 // Dynamic blocks: bodyHtml is a save-time cache, so cards whose content must
 // stay fresh (post lists, calendars) serialize as placeholder divs and get
@@ -131,7 +132,8 @@ function eventCardAttrs(tag: string): EventCardAttrs {
   };
 }
 
-export async function expandDynamicBlocks(html: string, repo: ContentRepository): Promise<string> {
+// locale: the page's language; a form block opens the form in it (/es/forms/<id>)
+export async function expandDynamicBlocks(html: string, repo: ContentRepository, locale = ''): Promise<string> {
   html = stampHeadingAnchors(html);
   const hasForms = html.includes('data-dyn="form"');
   const hasPostList = html.includes('data-dyn="post-list"');
@@ -168,7 +170,7 @@ export async function expandDynamicBlocks(html: string, repo: ContentRepository)
       // A same-origin frame gives each visitor an uncached form/receipt even
       // when the containing content page is served from a shared cache.
       calendarHtml.set(tag, form?.kind === 'form' && form.purpose === 'general' && form.status === 'published'
-        ? `<iframe class="pc-form-embed" src="/forms/${encodeURIComponent(form.id)}?embed=1" title="${esc(form.definition.title || form.name)}" loading="lazy"></iframe>` : '');
+        ? `<iframe class="pc-form-embed" src="${localePath(`/forms/${encodeURIComponent(form.id)}`, locale)}?embed=1" title="${esc(form.definition.title || form.name)}" loading="lazy"></iframe>` : '');
     }));
   }
   const anchored = html;

package/src/lib/forms/fields.ts

@@ -1,13 +1,18 @@
 import { hasOther, isHalf, type FormDefinition, type FormField } from './schema';
 import { OTHER } from './validate';
+import { formStrings, type FormStrings } from './words';
+import { fill } from '../live/words';
 export const escapeForm = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 const e = escapeForm;
-const inputType: Partial<Record<FormField['type'], string>> = { phone: 'tel', email: 'email', number: 'number', date: 'date' };
+const inputType: Partial<Record<FormField['type'], string>> = { phone: 'tel', email: 'email', number: 'number', date: 'date', time: 'time' };
 // Websites use a text box so "example.org" can be typed; the server adds https://.
 const autocomplete: Partial<Record<FormField['type'], string>> = { email: 'email', phone: 'tel', url: 'url' };
+// Questions arrive in the page's language already (localize.ts localizeForm);
+// `w` is the form's own words around them (words.ts), English by default.
+const english = formStrings('en');
 
 /** The answer control alone (input, select, textarea or option list). The builder canvas reuses it under editable labels. */
-export function renderControl(f: FormField, value: string, id: string): string {
+export function renderControl(f: FormField, value: string, id: string, w: FormStrings = english): string {
   const describe = f.help ? ` aria-describedby="${e(id)}-help"` : '';
   const attrs = `id="${e(id)}" name="q_${e(f.id)}"${f.required ? ' required' : ''}${describe}`;
   const ph = f.placeholder ? ` placeholder="${e(f.placeholder)}"` : '';
@@ -17,31 +22,31 @@ export function renderControl(f: FormField, value: string, id: string): string {
     // A required checkbox group can't be enforced natively; the server checks it.
     const req = radio && f.required ? ' required' : '';
     const option = (o: string, i: number) => `<label class="pc-bk-option"><input type="${radio ? 'radio' : 'checkbox'}" id="${e(id)}-${i}" name="q_${e(f.id)}" value="${e(o)}"${req}${chosen.includes(o) ? ' checked' : ''}/><span>${e(o)}</span></label>`;
-    const other = hasOther(f) ? `<label class="pc-bk-option pc-bk-other"><input type="${radio ? 'radio' : 'checkbox'}" name="q_${e(f.id)}" value="${OTHER}"${req}${extra ? ' checked' : ''}/><span>Other</span><input type="text" name="o_${e(f.id)}" maxlength="200" aria-label="Other answer for ${e(f.label)}" placeholder="${e(f.placeholder || 'Type your answer')}" value="${e(extra)}"/></label>` : '';
+    const other = hasOther(f) ? `<label class="pc-bk-option pc-bk-other"><input type="${radio ? 'radio' : 'checkbox'}" name="q_${e(f.id)}" value="${OTHER}"${req}${extra ? ' checked' : ''}/><span>${e(w.other)}</span><input type="text" name="o_${e(f.id)}" maxlength="200" aria-label="${e(fill(w.otherAnswer, { label: f.label }))}" placeholder="${e(f.placeholder || w.typeAnswer)}" value="${e(extra)}"/></label>` : '';
     return `<div class="pc-bk-options">${f.options.map(option).join('')}${other}</div>`;
   }
   if (f.type === 'textarea') return `<textarea ${attrs}${ph} maxlength="2000" rows="3">${e(value)}</textarea>`;
-  if (f.type === 'select') return `<select ${attrs}><option value="">${e(f.placeholder || 'Choose…')}</option>${f.options.map(o => `<option value="${e(o)}" ${o === value ? 'selected' : ''}>${e(o)}</option>`).join('')}</select>`;
+  if (f.type === 'select') return `<select ${attrs}><option value="">${e(f.placeholder || w.choose)}</option>${f.options.map(o => `<option value="${e(o)}" ${o === value ? 'selected' : ''}>${e(o)}</option>`).join('')}</select>`;
   const ac = (autocomplete[f.type] ? ` autocomplete="${autocomplete[f.type]}"` : '') + (f.type === 'url' ? ' inputmode="url" spellcheck="false"' : '');
   return `<input ${attrs}${ph}${ac} type="${inputType[f.type] ?? 'text'}"${f.type === 'number' ? ' step="any"' : ''} maxlength="${f.type === 'phone' ? 40 : 2000}" value="${e(value)}"/>`;
 }
 
-export function renderField(f: FormField, value: string, prefix: string): string {
+export function renderField(f: FormField, value: string, prefix: string, w: FormStrings = english): string {
   const id = `${prefix}-${f.id}`, half = isHalf(f) ? ' is-half' : '';
   const help = f.help ? `<small id="${e(id)}-help">${e(f.help)}</small>` : '';
   const label = `${e(f.label)}${f.required ? ' *' : ''}`;
   if (f.type === 'heading') return `<div class="pc-form-heading" id="${e(id)}"><h3>${e(f.label)}</h3>${f.help ? `<p>${e(f.help)}</p>` : ''}</div>`;
   if (f.type === 'checkbox' || f.type === 'consent') return `<label class="pc-bk-check${half}" for="${e(id)}"><input type="checkbox" id="${e(id)}" name="q_${e(f.id)}" ${f.required ? 'required' : ''} ${f.help ? `aria-describedby="${e(id)}-help"` : ''} value="yes" ${value === 'yes' ? 'checked' : ''}/><span>${label}${help}</span></label>`;
-  if (f.type === 'radio' || f.type === 'checkboxes') return `<fieldset class="pc-bk-field pc-bk-choices${half}"${f.help ? ` aria-describedby="${e(id)}-help"` : ''}><legend>${label}</legend>${renderControl(f, value, id)}${help}</fieldset>`;
-  return `<label class="pc-bk-field${half}" for="${e(id)}"><span>${label}</span>${renderControl(f, value, id)}${help}</label>`;
+  if (f.type === 'radio' || f.type === 'checkboxes') return `<fieldset class="pc-bk-field pc-bk-choices${half}"${f.help ? ` aria-describedby="${e(id)}-help"` : ''}><legend>${label}</legend>${renderControl(f, value, id, w)}${help}</fieldset>`;
+  return `<label class="pc-bk-field${half}" for="${e(id)}"><span>${label}</span>${renderControl(f, value, id, w)}${help}</label>`;
 }
 
 /** Two consecutive half-width questions share a `.pc-form-row` (side by side when there's room). */
-export function renderFields(definition: FormDefinition, values: Record<string, string> = {}, prefix = 'form'): string {
+export function renderFields(definition: FormDefinition, values: Record<string, string> = {}, prefix = 'form', w: FormStrings = english): string {
   const out: string[] = []; let row: string[] = [];
   const flush = () => { if (row.length) out.push(`<div class="pc-form-row">${row.join('')}</div>`); row = []; };
   for (const f of definition.fields) {
-    const html = renderField(f, values[f.id] ?? '', prefix);
+    const html = renderField(f, values[f.id] ?? '', prefix, w);
     if (isHalf(f)) { row.push(html); if (row.length === 2) flush(); }
     else { flush(); out.push(html); }
   }

package/src/lib/forms/localize.ts

@@ -0,0 +1,68 @@
+// A form in one of the site's other languages (schema.ts `translations`):
+// the translated words laid over the main ones, word by word, so anything
+// not translated yet stays in the main language. Pure (the builder uses it
+// too); the caller picks the locale.
+import type { FormDefinition, FormField } from './schema';
+
+type Choices = Pick<FormField, 'options' | 'translations'>;
+const pick = (v: string | undefined, fallback: string) => (v && v.trim() ? v : fallback);
+
+/** A question's choices in one language, in the main order; untranslated ones stay as they are. */
+export const choicesIn = (f: Choices, locale: string | null | undefined): string[] => {
+  const t = locale ? f.translations?.[locale]?.options : undefined;
+  return f.options.map((o, i) => t?.[i]?.trim() || o);
+};
+
+/** The main-language choice an answer stands for: itself, or the choice a translation of it sits in for. Undefined when it's neither. */
+export function mainChoice(f: Choices, value: string): string | undefined {
+  if (f.options.includes(value)) return value;
+  for (const t of Object.values(f.translations ?? {})) {
+    const i = t.options?.findIndex(o => o.trim() === value) ?? -1;
+    if (i >= 0 && i < f.options.length) return f.options[i];
+  }
+  return undefined;
+}
+
+/** A language in which a choice reads the same as a different choice (in any language), with that text; null when every text means one choice. */
+export function choiceClash(f: Choices): { locale: string; text: string } | null {
+  const seen = new Map(f.options.map((o, i) => [o.trim(), i]));
+  for (const locale of Object.keys(f.translations ?? {})) {
+    for (const [i, text] of choicesIn(f, locale).entries()) {
+      const at = seen.get(text.trim());
+      if (at !== undefined && at !== i) return { locale, text };
+      seen.set(text.trim(), i);
+    }
+  }
+  return null;
+}
+
+/** The form as visitors in `locale` see it (main-language words where it has none), without any translations. */
+export function localizeForm(d: FormDefinition, locale: string | null | undefined): FormDefinition {
+  const t = locale ? d.translations?.[locale] : undefined;
+  const { translations: _, ...rest } = d;
+  return {
+    ...rest,
+    title: pick(t?.title, d.title), intro: pick(t?.intro, d.intro),
+    submitLabel: pick(t?.submitLabel, d.submitLabel), confirmation: pick(t?.confirmation, d.confirmation),
+    fields: d.fields.map((f) => {
+      const w = locale ? f.translations?.[locale] : undefined;
+      const { translations: _, ...field } = f;
+      const placeholder = pick(w?.placeholder, f.placeholder ?? '');
+      return { ...field, label: pick(w?.label, f.label), help: pick(w?.help, f.help), options: choicesIn(f, locale), ...(placeholder ? { placeholder } : {}) };
+    }),
+  };
+}
+
+/**
+ * What a form's version is made of (service.ts formVersion): the questions,
+ * and the choices in each language (an answer names one), but none of the
+ * other words. A form without translated choices hashes as it always did.
+ */
+export function withoutWords(d: FormDefinition): FormDefinition {
+  const { translations: _, ...rest } = d;
+  return { ...rest, fields: d.fields.map(({ translations, ...f }) => {
+    const choices = Object.entries(translations ?? {}).filter(([, t]) => t.options?.some((o) => o.trim())).map(([l, t]) => [l, t.options!] as const);
+    return choices.length ? { ...f, choiceWords: Object.fromEntries(choices) } as FormField : f;
+  }) };
+}
+

package/src/lib/forms/render.ts

@@ -1,11 +1,17 @@
 import type { FormDefinition } from './schema';
 import { formVersion } from './service';
 import { escapeForm, renderFields } from './fields';
+import { localizeForm } from './localize';
+import { formStrings } from './words';
 export { escapeForm, renderFields } from './fields';
 export function hiddenFields(version: string, requestId: string) {
   return `<input type="hidden" name="formVersion" value="${escapeForm(version)}"><input type="hidden" name="requestId" value="${escapeForm(requestId)}"><div class="pc-form-trap" aria-hidden="true"><label>Leave empty<input name="website" tabindex="-1" autocomplete="off"></label></div>`;
 }
-export async function renderForm(id: string, definition: FormDefinition, values: Record<string, string> = {}, error = '', requestId: string = crypto.randomUUID(), embed = false) {
+// locale: the form's language (its translations, '' = the main one); lang:
+// the language of the page's own words; action: where it posts (/es/forms/<id>)
+export async function renderForm(id: string, definition: FormDefinition, values: Record<string, string> = {}, error = '', requestId: string = crypto.randomUUID(), embed = false, o: { locale?: string; lang?: string; action?: string } = {}) {
   const e = escapeForm;
-  return `<section class="pc-simple-form">${definition.title ? `<h2>${e(definition.title)}</h2>` : ''}${definition.intro ? `<p>${e(definition.intro)}</p>` : ''}<form method="post" action="/forms/${e(id)}${embed ? '?embed=1' : ''}">${error ? `<p class="pc-bk-error" role="alert">${e(error)}</p>` : ''}${hiddenFields(await formVersion(definition), requestId)}${renderFields(definition, values, `f-${id}`)}<button type="submit" class="pc-bk-submit">${e(definition.submitLabel || 'Submit')}</button></form></section>`;
+  const d = localizeForm(definition, o.locale), w = formStrings(o.lang);
+  const action = (o.action ?? `/forms/${encodeURIComponent(id)}`) + (embed ? '?embed=1' : '');
+  return `<section class="pc-simple-form">${d.title ? `<h2>${e(d.title)}</h2>` : ''}${d.intro ? `<p>${e(d.intro)}</p>` : ''}<form method="post" action="${e(action)}">${error ? `<p class="pc-bk-error" role="alert">${e(error)}</p>` : ''}${hiddenFields(await formVersion(definition), requestId)}${renderFields(d, values, `f-${id}`, w)}<button type="submit" class="pc-bk-submit">${e(d.submitLabel || w.submit)}</button></form></section>`;
 }

package/src/lib/forms/schema.ts

@@ -1,11 +1,34 @@
 import { z } from 'zod';
+import { choiceClash } from './localize';
 
 // `checkbox` and `consent` both mean "must tick to agree" (consent is what the
 // builder inserts; checkbox stays valid for existing data). `heading` has no
 // answer: it is a section title (label) with an optional description (help).
-export const FIELD_TYPES = ['text', 'textarea', 'email', 'phone', 'number', 'select', 'checkbox', 'date', 'radio', 'checkboxes', 'url', 'consent', 'heading'] as const;
+// `time` is stored as 24-hour HH:mm, like `date` as YYYY-MM-DD.
+export const FIELD_TYPES = ['text', 'textarea', 'email', 'phone', 'number', 'select', 'checkbox', 'date', 'radio', 'checkboxes', 'url', 'consent', 'heading', 'time'] as const;
 export const CHOICE_TYPES: readonly string[] = ['select', 'radio', 'checkboxes'];
 export const FIELD_ID = /^[a-zA-Z][a-zA-Z0-9_-]{0,79}$/;
+// The site's other languages (lib/i18n.ts), by locale like DocTranslations:
+//   question: translations: { es: { label, help, placeholder, options } }
+//   form:     translations: { es: { title, intro, submitLabel, confirmation } }
+// Every word is optional; a blank or missing one shows the main language's
+// (lib/forms/localize.ts). A translated choice is the choice at the same
+// position, and answers always store the main-language one, so Responses,
+// CSV and alerts read the same whatever language someone answered in.
+const byLocale = <T extends z.ZodTypeAny>(words: T) =>
+  z.record(z.string().regex(/^[a-z]{2,3}(-[a-z0-9]{2,8})?$/), words).refine(r => Object.keys(r).length <= 20, 'Too many languages.');
+export const FieldWords = z.object({
+  label: z.string().trim().max(200).optional(), help: z.string().max(300).optional(),
+  placeholder: z.string().max(120).optional(),
+  // by position; '' = this choice isn't translated yet
+  options: z.array(z.string().trim().max(200).regex(/^[^\r\n]*$/, 'Each choice must be one line.')).max(50).optional(),
+});
+export type FieldWords = z.infer<typeof FieldWords>;
+export const FormWords = z.object({
+  title: z.string().max(120).optional(), intro: z.string().max(1000).optional(),
+  submitLabel: z.string().max(80).optional(), confirmation: z.string().max(1000).optional(),
+});
+export type FormWords = z.infer<typeof FormWords>;
 export const FormField = z.object({
   id: z.string().regex(FIELD_ID),
   type: z.enum(FIELD_TYPES), label: z.string().trim().min(1).max(200),
@@ -18,15 +41,21 @@ export const FormField = z.object({
   placeholder: z.string().max(120).optional(),
   width: z.enum(['full', 'half']).optional(),
   allowOther: z.boolean().optional(),
+  translations: byLocale(FieldWords).optional(),
 });
 export type FormField = z.infer<typeof FormField>;
+/** a new form's thank-you; untouched, it shows in the page's language (words.ts thanksText) */
+export const DEFAULT_THANKS = 'Thank you. Your response has been received.';
 export const FormDefinition = z.object({
   title: z.string().max(120).default(''), intro: z.string().max(1000).default(''),
-  submitLabel: z.string().max(80).default(''), confirmation: z.string().max(1000).default('Thank you. Your response has been received.'),
+  submitLabel: z.string().max(80).default(''), confirmation: z.string().max(1000).default(DEFAULT_THANKS),
   fields: z.array(FormField).max(30).default([]),
+  translations: byLocale(FormWords).optional(),
 }).superRefine((d, ctx) => {
   if (new Set(d.fields.map(f => f.id)).size !== d.fields.length) ctx.addIssue({ code: 'custom', message: 'Field IDs must be unique.' });
   for (const f of d.fields) if (CHOICE_TYPES.includes(f.type) && (!f.options.length || new Set(f.options).size !== f.options.length)) ctx.addIssue({ code: 'custom', message: `“${f.label}” needs unique choices.` });
+  // one text, one choice: a translated answer must map back to a single choice
+  for (const f of d.fields) if (CHOICE_TYPES.includes(f.type) && choiceClash(f)) ctx.addIssue({ code: 'custom', message: `“${f.label}” has a translated choice that reads the same as another choice.` });
 });
 export type FormDefinition = z.infer<typeof FormDefinition>;
 export const isHalf = (f: Pick<FormField, 'width' | 'type'>) => f.width === 'half' && f.type !== 'heading';

package/src/lib/forms/service.ts

@@ -2,8 +2,16 @@ import { ApiError } from '../api';
 import { sha256Hex } from '../api-keys';
 import { FormDefinition, answerFields, type FormResponse } from './schema';
 import { AnswerError, checkAnswer } from './validate';
+import { withoutWords } from './localize';
 
-export const formVersion = (definition: FormDefinition) => sha256Hex(JSON.stringify(FormDefinition.parse(definition)));
+// The version is the questions and their choices in each language, not the
+// other translated words: rewording a label, help or title doesn't change
+// what's asked, so a page or app that loaded the form before still sends its
+// answers (no 409). A choice is answered in any language and stored as the
+// main-language one, so rewording a translated choice does change the
+// version: an answer in the old words gets the 409 and a reload, never a
+// wrong answer. Definitions without translated choices hash as before.
+export const formVersion = (definition: FormDefinition) => sha256Hex(JSON.stringify(withoutWords(FormDefinition.parse(definition))));
 export async function collectResponse(definition: FormDefinition, input: Record<string, string>, version?: string): Promise<FormResponse> {
   definition = FormDefinition.parse(definition);
   const current = await formVersion(definition);