@acms-subir/core 0.3.54 → 0.3.56

package/docs/server.md

@@ -41,6 +41,12 @@ moveOccurrenceBack(repo: Repo, who: ServerUser | null | typeof GOOGLE_SYNC, even
 eventRoomClashes(repo: Repo, event: string | CalEvent, opts?: { horizonDays?: number; now?: Date | number }): Promise<EventClash[]>
 roomBusy(repo: Repo, q: { roomIds: string[]; from: Date | number; to: Date | number; ignore?: { eventId: string; key?: string } }): Promise<BusySlot[]>
 
+// Google Calendar sync (acms docs google-calendar): read-only, names Google calendars, staff only
+googleCopies(repo: Repo, eventId: string): Promise<GoogleCopy[]>
+googleSyncHistory(repo: Repo, opts?: { eventId?: string; limit?: number }): Promise<{ id: number; at: number; eventId: string; direction: 'in' | 'out' | 'clash' | 'info'; action: string; title: string; summary: string; resolved: boolean }[]>
+syncGoogleCalendar(repo: Repo, ctx: { locals: unknown }): Promise<number>
+GOOGLE_BOOKING_TAG = '#google-booking'
+
 // event requests: `who` is currentUser()'s result (anything with `id` and `can()` works)
 listMyEvents(repo: Repo, who: ServerUser | null): Promise<CalEvent[]>
 listEventRequests(repo: Repo, who: ServerUser | null): Promise<CalEvent[]>
@@ -60,6 +66,16 @@ withdrawDateRequest(repo: Repo, who: ServerUser | null, requestId: string): Prom
 approveDateRequest(repo: Repo, who: ServerUser | null, requestId: string, ctx: WriteContext, seen?: number): Promise<{ request: RequestRecord; moved: MoveResult }>
 declineDateRequest(repo: Repo, who: ServerUser | null, requestId: string, reply: string, ctx: WriteContext, seen?: number): Promise<RequestRecord>
 
+// requests without an account (acms({ requests })): asking needs no account; listing needs
+// content.edit, answering content.publish
+requestOptions(repo: Repo, locale?: string): Promise<{ open: boolean; types: { id: string; label: string }[]; rooms: { slug: string; name: string; color: string }[]; replyTime: string; notice: string; phone: string; timezone: string; events: { slug: string; title: string; dates: string[] }[] }>
+submitRequest(repo: Repo, input: RequestInput, opts: { key: string; address: string; context: WriteContext }): Promise<{ id: string; created: boolean }>
+listRequests(repo: Repo, who: ServerUser | null, q?: { states?: RequestState[]; kinds?: RequestKind[]; sources?: RequestSource[]; eventId?: string; userId?: string; order?: 'oldest' | 'newest' | 'decided'; limit?: number; offset?: number }): Promise<RequestRecord[]>
+approveRequest(repo: Repo, who: ServerUser | null, id: string, ctx: WriteContext, seen?: number, opts?: { message?: string; email?: boolean }): Promise<{ request: RequestRecord; event: CalEvent | null; next: string }>
+declineRequest(repo: Repo, who: ServerUser | null, id: string, reason: string, ctx: WriteContext, seen?: number, opts?: { email?: boolean }): Promise<RequestRecord>
+deleteRequest(repo: Repo, who: ServerUser | null, id: string): Promise<void>
+replyToRequest(repo: Repo, who: ServerUser | null, id: string, message: string, ctx: WriteContext): Promise<RequestRecord>
+
 type Role = 'owner' | 'administrator' | 'editor' | 'author' | 'contributor' | (string & {})
 interface ServerUser { id: string; email: string; name: string; role: Role; staff: boolean; can(permission: string): boolean }
 interface Occurrence { event: CalEvent; start: number; end: number; allDay: boolean; days: number; key: string; cancelled: boolean; roomIds: string[]; moved?: { from: { start: number; end: number }; note: string; location?: EventLocation } }
@@ -72,6 +88,7 @@ interface Hold { resourceId: string; eventId: string; key: string; title: string
 interface EventClash { hold: Hold; other: Hold }
 interface BusySlot { resourceId: string; start: number; end: number; kind: 'event' | 'booking' | 'block' | 'calendar'; title: string; eventId?: string; key?: string; bookingId?: string }
 interface WriteContext { url: URL; locals: unknown }
+interface GoogleCopy { googleCalendar: string; googleCalendarId: string; htmlLink: string; syncedAt: number; descriptionFromGoogle: boolean; booking: boolean; clash: { field: string; site: string; google: string; at: number } | null }
 ```
 
 The types `Repo`, `Role`, `ServerUser`, `CalEvent`, `Occurrence`, `ListEventsOptions`,
@@ -453,3 +470,44 @@ if (Astro.request.method === 'POST') {
 
 `/classes/mine` would list `listMyEvents(repo, me)` and show `e.request?.state`
 (`'pending'`, `'declined'` with `e.request.reply`, or no request once approved).
+
+## Requests without an account
+
+With `acms({ requests })`, anyone can ask for an event or a change to one (see `npx
+acms docs calendar`). The built-in form at `/request` and `POST /api/v1/requests` use
+these functions, and so can a site's own form:
+
+- **`requestOptions(repo, locale)`**: whether requests are open, the kinds, requestable
+  rooms and the events a change can be about (with their next dates), and the site's
+  reply time, notice and phone, in that language.
+- **`submitRequest(repo, input, { key, address, context })`**: `input` is the same as
+  the API body (`kind: 'new'` or `'change'`, `name`, `email`…). `key` is a random UUID v4
+  your page keeps for this form, so a double submit stores one request. `address` is
+  `Astro.clientAddress`, for the 10-a-minute limit. Refusals throw with a `status` and a
+  `code` (`RequestRefusal`: `title`, `start`, `past`, `room`, `email`, `closed`,
+  `busy`…). Show your own words for each code.
+- **`listRequests(repo, who, q)`**: for staff (`content.edit`). `states: ['pending']`
+  comes oldest first.
+- **`approveRequest`**, **`declineRequest`** and **`replyToRequest`** answer one (`content.publish`) and
+  email the person in their language (approve and decline take `email: false` to stay quiet).
+  **`deleteRequest`** removes spam from the app or the website without an email. Pass `seen` (the `updatedAt` you showed) and an
+  edited request answers 409 instead.
+
+```astro
+---
+// src/pages/ask.astro: the site's own request form
+import { getRepo, submitRequest } from '@acms-subir/core/server';
+const repo = await getRepo(Astro.locals);
+let done = false, problem = '';
+if (Astro.request.method === 'POST') {
+  const f = await Astro.request.formData();
+  try {
+    await submitRequest(repo, {
+      kind: 'new', title: String(f.get('title')), start: `${f.get('date')}T${f.get('from')}`, end: String(f.get('to')),
+      name: String(f.get('name')), email: String(f.get('email')),
+    }, { key: String(f.get('key')), address: Astro.clientAddress, context: { url: Astro.url, locals: Astro.locals } });
+    done = true;
+  } catch (e) { problem = (e as { code?: string }).code ?? 'failed'; }
+}
+---
+```

package/integration.mjs

@@ -448,6 +448,20 @@ function resolveMembers(members, calendar) {
   // the built-in pages are "My events": they need the calendar
   return { enabled: calendar.enabled, base, notify: notify.map((e) => e.trim().toLowerCase()), hostMoves };
 }
+function resolveRequests(requests, calendar, reserved) {
+  if (requests === undefined || requests === false) return { enabled: false, path: '/request', page: true };
+  if (requests === true) requests = {};
+  if (!requests || typeof requests !== 'object' || Array.isArray(requests)) throw new Error('acms: requests must be true, false or an object');
+  unknownKeys('requests', requests, ['path', 'page']);
+  const path = requests.path ?? '/request';
+  if (typeof path !== 'string' || !/^\/[a-z0-9-]+(\/[a-z0-9-]+)*$/.test(path)) {
+    throw new Error(`acms: requests.path must start with "/" and use lowercase letters, digits, and hyphens (no trailing slash) — got "${path}"`);
+  }
+  if (RESERVED_BASES.has(path) || reserved.includes(path)) throw new Error(`acms: requests.path "${path}" collides with another route — pick another path`);
+  if (requests.page !== undefined && typeof requests.page !== 'boolean') throw new Error('acms: requests.page must be true or false');
+  // requests become calendar events: they need the calendar
+  return { enabled: calendar.enabled, path, page: requests.page ?? true };
+}
 function resolveAnnouncements(announcements, reserved) {
   if (announcements === undefined || announcements === false) return { enabled: false, base: '/announcements', pages: true, topics: {} };
   if (announcements === true) announcements = {};
@@ -713,6 +727,14 @@ function acmsVitePlugin(userConfig) {
  *   `topics` picks the push topic each kind starts with in the composer, e.g.
  *   `{ registration: 'registrations', help: 'help' }` (otherwise a topic named
  *   after the kind, such as `events` or `help`, else everyone).
+ * @param {boolean | {path?: string, page?: boolean}} [options.requests]
+ *   Event requests without an account (off by default; needs the calendar):
+ *   anyone asks for a new event or a change to one from the app
+ *   (GET /api/v1/requests/options, POST /api/v1/requests) or the website's
+ *   form (default path '/request', also under each language's prefix). Staff
+ *   answer them on Calendar → Requests, where approving makes a filled-in
+ *   draft event. `page: false` keeps the API and the admin but drops the
+ *   built-in form, so a site can build its own on the same server API.
  * @param {string[]} [options.signedRoutes]
  *   The site's own routes that receive posts from another server and check
  *   its signature themselves (an SMS or payment provider's webhook), as route
@@ -741,6 +763,7 @@ export default function acms(options = {}) {
     if (clash) throw new Error(`acms: members.base "${members.base}" collides with another configured path — pick another`);
   }
   const announcements = resolveAnnouncements(options.announcements, [...contentBases.keys(), ...(calendar.enabled ? [calendar.base, calendar.eventsBase, calendar.bookBase] : []), ...(members.enabled ? [members.base] : [])]);
+  const requests = resolveRequests(options.requests, calendar, [...contentBases.keys(), ...(calendar.enabled ? [calendar.base, calendar.eventsBase, calendar.bookBase] : []), ...(members.enabled ? [members.base] : []), ...(announcements.enabled ? [announcements.base] : [])]);
   const roles = resolveRoles(options.roles, members);
   const permissions = resolvePermissions(options.permissions, roles);
   const maps = resolveMaps(options.maps);
@@ -771,6 +794,7 @@ export default function acms(options = {}) {
     permissions,
     members,
     announcements,
+    requests,
   };
   const routes = [...ROUTES,
     ['/api/v1/site', 'api/v1/site.ts'],
@@ -888,6 +912,10 @@ export default function acms(options = {}) {
       ['/admin/calendar/events/[id]', 'admin/calendar/events/[id].astro'],
       ['/admin/calendar/calendars', 'admin/calendar/calendars.astro'],
       ['/admin/calendar/integrations', 'admin/calendar/integrations.astro'],
+      // two-way Google Calendar sync: the forms' handler, the first-match review, Google's sign-in callback
+      ['/admin/calendar/google', 'admin/calendar/google.astro'],
+      ['/admin/calendar/google/match', 'admin/calendar/google/match.astro'],
+      ['/api/calendar/google/oauth/callback', 'api/calendar/google/oauth/callback.ts'],
       ['/api/calendar/docs', 'api/calendar/docs.ts'],
       [`${calendar.bookBase}/manage/[token]`, 'book/manage/[token].astro'],
       // the booker's own booking from an app (token in the Booking-Token header)
@@ -938,6 +966,16 @@ export default function acms(options = {}) {
     );
     if (announcements.pages) routes.push([announcements.base, 'announcements/index.astro'], [`${announcements.base}/[id]`, 'announcements/[id].astro']);
   }
+  // event requests from people without an account (acms({ requests })): the
+  // app API, Calendar → Requests and, unless page: false, the public form
+  if (requests.enabled) {
+    routes.push(
+      ['/admin/calendar/requests', 'admin/calendar/requests.astro'],
+      ['/api/v1/requests', 'api/v1/requests/index.ts'],
+      ['/api/v1/requests/options', 'api/v1/requests/options.ts'],
+    );
+    if (requests.page) routes.push([requests.path, 'request/index.astro']);
+  }
   // "My events" for signed-in members (acms({ members })): thin pages over
   // lib/calendar/requests.ts. A site file at any of these paths replaces that
   // page; `members: false` drops them all (members.enabled needs the calendar).

package/mobile-template/client/AGENTS.md

@@ -78,6 +78,7 @@ npx acms mobile recipe add news      # posts list and article
 npx acms mobile recipe add booking   # resources → slots → form → confirmation
 npx acms mobile recipe add push      # notifications: turn on, topics, taps (site needs push on)
 npx acms mobile recipe add announcements  # list, detail, home banners (site needs announcements on)
+npx acms mobile recipe add event-request  # Request an event: screen, More row, events-list link (site needs requests on)
 ```
 
 Each recipe prints the extra Expo packages to install (`npx expo install ...`).

package/mobile-template/client/README.md

@@ -28,7 +28,7 @@ site) and `.env.local` (written by `acms mobile dev`, not committed).
 ## Add screens
 
 ```sh
-npx acms mobile recipe add events   # also: news, booking, push, rsvp, announcements
+npx acms mobile recipe add events   # also: news, booking, push, rsvp, announcements, event-request
 ```
 
 Build your own with the hooks from `@acms-subir/native`. `AGENTS.md` has the

package/mobile-template/recipes/event-request/files/app/request.tsx

@@ -0,0 +1,305 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { ActivityIndicator, KeyboardAvoidingView, Linking, Platform, Pressable, ScrollView, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
+import { Stack, router } from 'expo-router';
+import * as Crypto from 'expo-crypto';
+import * as SecureStore from 'expo-secure-store';
+import type { RequestInput } from '@acms-subir/client';
+import { Button, ErrorView, fill, formatClock, formatEventDate, localDay, parseClock, requestEnd, requestProblemText, requestProblems, requestSummary, siteInstant, useDebounced, useGuest, useLayout, useLocale, useRequestOptions, useRoomFree, useSite, useStrings, useSubmitRequest, useTheme, type RequestField, type RequestProblem } from '@acms-subir/native';
+import { DayPicker } from '../components/DayPicker';
+
+// Request an event, without an account: something new (what, kind, when,
+// how it repeats, rooms with a live "looks free" line, people) or a change
+// to one of the site's events, then how to reach them. Staff answer in the
+// site's Calendar → Requests; nothing is on the calendar until they approve
+// it. While the site isn't taking requests the screen still opens and says
+// so, with the office phone: keep the More row that leads here, so App Review
+// always finds it. useSubmitRequest keeps one idempotency key per request, so
+// sending again after a timeout never asks twice. Words: useStrings(), in the
+// app's language (the website's form says the same).
+
+// Name, email and phone stay on this phone for next time: secure storage,
+// this device only, never sent anywhere but the site. Web keeps nothing.
+const CONTACT_KEY = 'acms.request.contact';
+const keychain = { keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY };
+type Contact = { name: string; email: string; phone: string };
+const contact = {
+  get: async (): Promise<Contact | null> => {
+    if (Platform.OS === 'web') return null;
+    try {
+      const v = JSON.parse((await SecureStore.getItemAsync(CONTACT_KEY, keychain)) ?? 'null');
+      return v && typeof v.name === 'string' && typeof v.email === 'string' ? { name: v.name, email: v.email, phone: typeof v.phone === 'string' ? v.phone : '' } : null;
+    } catch { return null; }
+  },
+  set: async (c: Contact) => { if (Platform.OS !== 'web') await SecureStore.setItemAsync(CONTACT_KEY, JSON.stringify(c), keychain).catch(() => {}); },
+};
+
+const call = (phone: string) => { Linking.openURL(`tel:${phone.replace(/[^\d+]/g, '')}`).catch(() => {}); };
+type Repeat = 'once' | 'weekly' | 'other';
+const UNSURE = '__unsure__';
+
+export default function RequestScreen() {
+  const t = useTheme();
+  const words = useStrings();
+  const { locale } = useLocale();
+  const { gutter } = useLayout();
+  const { data: site } = useSite();
+  const guest = useGuest();
+  const options = useRequestOptions();
+  const send = useSubmitRequest({ createKey: Crypto.randomUUID });
+  const o = options.data;
+  const tz = o?.timezone ?? 'UTC';
+  const [kind, setKind] = useState<'new' | 'change'>('new');
+  const [title, setTitle] = useState('');
+  const [type, setType] = useState('');
+  const [date, setDate] = useState('');
+  const [starts, setStarts] = useState('');
+  const [ends, setEnds] = useState('');
+  const [repeat, setRepeat] = useState<Repeat>('once');
+  const [repeatText, setRepeatText] = useState('');
+  const [rooms, setRooms] = useState<string[]>([]);
+  const [unsure, setUnsure] = useState(false);
+  const [people, setPeople] = useState('');
+  const [message, setMessage] = useState('');
+  const [event, setEvent] = useState('');
+  const [eventDate, setEventDate] = useState('');
+  const [change, setChange] = useState('');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [tried, setTried] = useState(false);
+
+  // details from last time, else the email they signed in with for "My bookings"
+  useEffect(() => {
+    let live = true;
+    void contact.get().then((c) => {
+      if (!live || !c) return;
+      setName((v) => v || c.name); setEmail((v) => v || c.email); setPhone((v) => v || c.phone);
+    });
+    return () => { live = false; };
+  }, []);
+  useEffect(() => {
+    if (site?.features.guestSignIn && guest.email) setEmail((v) => v || guest.email!);
+  }, [site?.features.guestSignIn, guest.email]);
+
+  // ---- what goes out ----
+  const startTime = parseClock(starts), endTime = parseClock(ends);
+  const count = people.replace(/\D/g, '');
+  const input: RequestInput = kind === 'new'
+    ? { kind, type: type || undefined, title, start: date && startTime ? `${date}T${startTime}` : '', end: endTime ?? '', repeat, repeatText,
+      rooms: unsure ? [] : rooms, roomsUnsure: unsure, people: count ? Number(count) : null, message, name, email, phone }
+    : { kind, event, date: eventDate || undefined, message: change, name, email, phone };
+  const local = requestProblems(input, o);
+  // the site's answer shows by its field until the next send
+  const problems: Partial<Record<RequestField, RequestProblem>> = tried ? { ...local, ...(send.field && send.problem ? { [send.field]: send.problem } : {}) } : {};
+  const invalid = tried && Object.keys(problems).length > 0;
+
+  // the live "looks free" line (needs bookings on the site): the first date's times as instants, since rooms/free needs a zone
+  const check = input.kind === 'new' && !local.start && !local.end && !unsure && rooms.length > 0 && site?.features.bookings === true;
+  const from = check ? siteInstant(input.start, tz) : null, to = check ? siteInstant(requestEnd(input.start, input.end), tz) : null;
+  const span = from && to ? `${from}|${to}` : '';
+  // asked once typing settles (30 checks a minute per address)
+  const checked = useDebounced(span, 400);
+
+  const submit = () => {
+    setTried(true);
+    if (Object.keys(local).length) return;
+    send.mutate(input, { onSuccess: () => { void contact.set({ name: name.trim(), email: email.trim(), phone: phone.trim() }); } });
+  };
+  const startOver = () => {
+    send.reset(); setTried(false);
+    setTitle(''); setType(''); setDate(''); setStarts(''); setEnds(''); setRepeat('once'); setRepeatText(''); setRooms([]); setUnsure(false);
+    setPeople(''); setMessage(''); setEvent(''); setEventDate(''); setChange('');
+  };
+
+  const screen = (children: ReactNode) => (
+    <KeyboardAvoidingView style={{ flex: 1, backgroundColor: t.colors.bg }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+      <Stack.Screen options={{ title: words.requestEvent }} />
+      <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ padding: gutter, gap: 20, width: '100%', maxWidth: 640, alignSelf: 'center' }}>{children}</ScrollView>
+    </KeyboardAvoidingView>
+  );
+  const officePhone = o?.phone ?? '';
+  const phoneLink = (text: string) => (
+    <Pressable accessibilityRole="link" onPress={() => call(officePhone)} style={{ minHeight: 44, justifyContent: 'center' }}>
+      <Text style={t.styles.text.link}>{text}</Text>
+    </Pressable>
+  );
+
+  // ---- loading, off or closed, sent ----
+  if (!site || (site.features.requests && options.isPending && !options.off)) return screen(<ActivityIndicator style={{ marginTop: 32 }} color={t.colors.accent} />);
+  if (options.error && !options.off && !o) return screen(<ErrorView error={options.error} retry={() => void options.refetch()} />);
+  if (options.off || o?.open === false || send.problem === 'closed') return screen(
+    <View style={[t.styles.card, { gap: 8 }]}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{words.requestClosed}</Text>
+      {!!officePhone && phoneLink(fill(words.requestCall, { phone: officePhone }))}
+    </View>,
+  );
+  if (send.data && send.variables) {
+    const sent = send.variables;
+    const eventTitle = sent.kind === 'change' ? o?.events.find((e) => e.slug === sent.event)?.title : undefined;
+    const lines = requestSummary(sent, words, { options: o, locale, eventTitle });
+    const to = sent.email.trim();
+    return screen(<>
+      <View style={{ gap: 8 }}>
+        <Text accessibilityRole="header" style={t.styles.text.display}>{words.requestSentTitle}</Text>
+        <Text style={t.styles.text.body}>{o?.replyTime ? fill(words.requestAnswerWithin, { time: o.replyTime, email: to }) : fill(words.requestAnswerBy, { email: to })}</Text>
+      </View>
+      <View style={[t.styles.card, { gap: 4 }]}>
+        <Text style={t.styles.text.label}>{words.requestYours}</Text>
+        {lines.map((line, i) => <Text key={i} style={i ? t.styles.text.muted : t.styles.text.heading}>{line}</Text>)}
+      </View>
+      <View style={{ gap: 4 }}>
+        <Text style={t.styles.text.muted}>{words.requestNotYet}</Text>
+        {!!officePhone && phoneLink(fill(words.requestSooner, { phone: officePhone }))}
+      </View>
+      <View style={{ gap: 10 }}>
+        <Button label={words.requestDone} onPress={() => { if (router.canGoBack()) router.back(); else startOver(); }} />
+        <Button label={words.requestAnother} variant="outline" onPress={startOver} />
+      </View>
+    </>);
+  }
+
+  // ---- the form ----
+  const radius = Math.min(t.radius, 10);
+  const field = { borderWidth: 1, borderColor: t.colors.line, borderRadius: radius, padding: 12, fontSize: 16, color: t.colors.ink, backgroundColor: t.colors.panel } as const;
+  const chip = (on: boolean) => ({ paddingVertical: 10, paddingHorizontal: 12, minHeight: 44, justifyContent: 'center' as const, borderRadius: radius, borderWidth: 1, borderColor: on ? t.colors.accent : t.colors.line, backgroundColor: on ? t.colors.soft : t.colors.panel });
+  const errorText = [t.styles.text.small, { color: t.colors.ink, fontWeight: '600' as const }];
+  const problem = (f: RequestField) => (problems[f] ? <Text style={errorText}>{requestProblemText(problems[f]!, words)}</Text> : null);
+  const label = (text: string, optional = false) => (
+    <Text style={t.styles.text.label}>{text}{optional ? <Text style={{ fontWeight: '400' }}> · {words.requestOptional}</Text> : null}</Text>
+  );
+  const text = (lbl: string, value: string, onChange: (v: string) => void, f: RequestField | null, x: { optional?: boolean; keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel'; placeholder?: string; onBlur?: () => void } = {}) => (
+    <View style={{ gap: 6 }}>
+      {label(lbl, x.optional)}
+      <TextInput value={value} onChangeText={onChange} onBlur={x.onBlur} keyboardType={x.keyboard} multiline={x.multiline} autoComplete={x.auto} placeholder={x.placeholder}
+        autoCapitalize={x.auto === 'email' ? 'none' : 'sentences'} autoCorrect={x.auto !== 'email'} placeholderTextColor={t.colors.muted}
+        accessibilityLabel={lbl} accessibilityHint={f && problems[f] ? requestProblemText(problems[f]!, words) : undefined}
+        style={[field, x.multiline && { minHeight: 96, textAlignVertical: 'top' }, !!f && !!problems[f] && { borderColor: t.colors.ink }]} />
+      {f && problem(f)}
+    </View>
+  );
+  const choices = <V extends string>(lbl: string, list: { value: V; label: string }[], isOn: (v: V) => boolean, toggle: (v: V) => void, many = false) => (
+    <View accessibilityRole={many ? undefined : 'radiogroup'} accessibilityLabel={lbl} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+      {list.map((c) => (
+        <Pressable key={c.value} accessibilityRole={many ? 'checkbox' : 'radio'} accessibilityState={{ checked: isOn(c.value) }} onPress={() => toggle(c.value)} style={chip(isOn(c.value))}>
+          <Text style={[t.styles.text.body, isOn(c.value) && { fontWeight: '600' }]}>{c.label}</Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+  // times show back in the app's format once typed ("18:30" → "6:30 PM")
+  const tidy = (raw: string, set: (v: string) => void) => () => { const v = parseClock(raw); if (v) set(formatClock(v, locale)); };
+  const today = localDay(new Date().toISOString(), tz);
+  // the change picker: the site's public events, each with its next dates (the site's days)
+  const choosable = o?.events ?? [];
+  const chosen = choosable.find((e) => e.slug === event);
+  const showDay = (d: string) => formatEventDate({ start: `${d}T00:00:00.000Z`, allDay: true }, locale);
+
+  return screen(<>
+    <Text style={t.styles.text.muted}>{o?.notice || words.requestNotice}</Text>
+    <View accessibilityRole="radiogroup" style={{ flexDirection: 'row', borderWidth: 1, borderColor: t.colors.line, borderRadius: radius, overflow: 'hidden' }}>
+      {(['new', 'change'] as const).map((k, i) => (
+        <Pressable key={k} accessibilityRole="radio" accessibilityState={{ checked: kind === k }} onPress={() => { setKind(k); setTried(false); if (send.error) send.reset(); }}
+          style={{ flex: 1, minHeight: 44, paddingHorizontal: 8, alignItems: 'center', justifyContent: 'center', backgroundColor: kind === k ? t.colors.soft : t.colors.panel, borderLeftWidth: i ? 1 : 0, borderLeftColor: t.colors.line }}>
+          <Text style={[t.styles.text.body, { textAlign: 'center' }, kind === k && { fontWeight: '600' }]}>{k === 'new' ? words.requestNew : words.requestChange}</Text>
+        </Pressable>
+      ))}
+    </View>
+
+    {kind === 'new' ? (<>
+      {text(words.requestWhat, title, setTitle, 'title')}
+      {!!o?.types.length && (
+        <View style={{ gap: 6 }}>
+          {label(words.requestKind)}
+          {choices(words.requestKind, o.types.map((x) => ({ value: x.id, label: x.label })), (v) => v === type, (v) => setType(v === type ? '' : v))}
+          {problem('type')}
+        </View>
+      )}
+      <View style={{ gap: 6 }}>
+        {label(words.requestDate)}
+        <DayPicker value={date} onChange={setDate} min={today} max={`${Number(today.slice(0, 4)) + 2}${today.slice(4)}`} />
+      </View>
+      {/* no time picker in the template: typed times, read forgivingly ("6:30 pm", "18:30", "18h30") */}
+      <View style={{ flexDirection: 'row', gap: 12 }}>
+        <View style={{ flex: 1 }}>{text(words.requestStarts, starts, setStarts, 'start', { keyboard: 'numbers-and-punctuation', placeholder: formatClock('18:00', locale), onBlur: tidy(starts, setStarts) })}</View>
+        <View style={{ flex: 1 }}>{text(words.requestEnds, ends, setEnds, 'end', { keyboard: 'numbers-and-punctuation', placeholder: formatClock('20:00', locale), onBlur: tidy(ends, setEnds) })}</View>
+      </View>
+      <View style={{ gap: 6 }}>
+        {label(words.requestRepeats)}
+        {choices<Repeat>(words.requestRepeats, [{ value: 'once', label: words.requestOnce }, { value: 'weekly', label: words.requestWeekly }, { value: 'other', label: words.requestRepeatOther }], (v) => v === repeat, setRepeat)}
+        {repeat === 'other' && (
+          <TextInput value={repeatText} onChangeText={setRepeatText} placeholder={words.requestRepeatHint} accessibilityLabel={words.requestRepeatHint} placeholderTextColor={t.colors.muted}
+            style={[field, !!problems.repeat && { borderColor: t.colors.ink }]} />
+        )}
+        {problem('repeat')}
+      </View>
+      {!!o?.rooms.length && (
+        <View style={{ gap: 6 }}>
+          {label(words.requestRoom)}
+          {/* rooms, or Not sure (not both) */}
+          {choices(words.requestRoom, [...o.rooms.map((r) => ({ value: r.slug, label: r.name })), { value: UNSURE, label: words.requestNotSure }],
+            (v) => (v === UNSURE ? unsure : !unsure && rooms.includes(v)),
+            (v) => { if (v === UNSURE) { setUnsure(!unsure); return; } setUnsure(false); setRooms(rooms.includes(v) ? rooms.filter((x) => x !== v) : [...rooms, v]); }, true)}
+          {problem('room')}
+          {!!checked && checked === span && rooms.map((slug) => (
+            <RoomLine key={slug} room={slug} name={o.rooms.find((r) => r.slug === slug)?.name ?? slug} start={checked.split('|')[0]} end={checked.split('|')[1]} />
+          ))}
+        </View>
+      )}
+      <View style={{ maxWidth: 200 }}>{text(words.requestPeople, people, (v) => setPeople(v.replace(/\D/g, '')), 'people', { optional: true, keyboard: 'number-pad' })}</View>
+      {text(words.requestMessage, message, setMessage, null, { optional: true, multiline: true })}
+    </>) : (<>
+      <View style={{ gap: 6 }}>
+        {label(words.requestWhichEvent)}
+        {!choosable.length ? <Text style={t.styles.text.muted}>{words.requestNoEvents}</Text> : (
+          <View accessibilityRole="radiogroup" accessibilityLabel={words.requestPickEvent} style={[t.styles.card, { paddingVertical: 4, paddingHorizontal: 0 }]}>
+            {choosable.map((e, i) => (
+              <Pressable key={e.slug} accessibilityRole="radio" accessibilityState={{ checked: e.slug === event }} onPress={() => { setEvent(e.slug); setEventDate(''); }}
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 48, paddingHorizontal: 16, borderTopWidth: i ? 1 : 0, borderTopColor: t.colors.line, backgroundColor: e.slug === event ? t.colors.soft : undefined }}>
+                <Text style={[t.styles.text.body, { flex: 1 }, e.slug === event && { fontWeight: '600' }]}>{e.title}</Text>
+                {e.slug === event && <Text style={[t.styles.text.body, { color: t.colors.accent }]} importantForAccessibility="no" accessibilityElementsHidden>✓</Text>}
+              </Pressable>
+            ))}
+          </View>
+        )}
+        {problem('event')}
+      </View>
+      {!!chosen && (
+        <View style={{ gap: 6 }}>
+          {label(words.requestWhichDate)}
+          {choices(words.requestWhichDate, [{ value: '', label: words.requestEveryDate }, ...chosen.dates.slice(0, 12).map((d) => ({ value: d, label: showDay(d) }))], (v) => v === eventDate, setEventDate)}
+          {problem('date')}
+        </View>
+      )}
+      {text(words.requestWhatChange, change, setChange, 'what', { multiline: true })}
+    </>)}
+
+    <View style={{ gap: 12 }}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{words.requestContact}</Text>
+      {text(words.requestName, name, setName, 'name', { auto: 'name' })}
+      {text(words.requestEmail, email, setEmail, 'email', { auto: 'email', keyboard: 'email-address' })}
+      {text(words.requestPhone, phone, setPhone, 'phone', { auto: 'tel', keyboard: 'phone-pad', optional: true })}
+      <Text style={t.styles.text.small}>
+        {words.requestContactWhy}
+        {!!site.legal.privacy && <> <Text accessibilityRole="link" style={[t.styles.text.small, { color: t.colors.accent, textDecorationLine: 'underline' }]} onPress={() => { Linking.openURL(site.legal.privacy!).catch(() => {}); }}>{words.requestPrivacy}</Text></>}
+      </Text>
+    </View>
+
+    {!!send.problem && !send.field && (
+      <View accessibilityRole="alert" style={{ backgroundColor: t.colors.soft, borderRadius: radius, padding: 12, gap: 4 }}>
+        <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{requestProblemText(send.problem, words)}</Text>
+      </View>
+    )}
+    {invalid && <Text accessibilityRole="alert" style={errorText}>{words.requestCheck}</Text>}
+    <Button label={send.isPending ? words.sending : words.requestSend} disabled={send.isPending} onPress={submit} />
+  </>);
+}
+
+// "Hall looks free then." for one chosen room, over the first date's times (free or busy only, never what)
+function RoomLine({ room, name, start, end }: { room: string; name: string; start: string; end: string }) {
+  const t = useTheme();
+  const words = useStrings();
+  const free = useRoomFree({ room, start, end });
+  // nothing while it loads, or when the site can't say (an error, too many checks)
+  if (!free.data) return null;
+  return <Text style={t.styles.text.small}>{fill(free.data.free ? words.requestRoomFree : words.requestRoomTaken, { room: name })}</Text>;
+}

package/mobile-template/recipes/event-request/files/components/DayPicker.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useLocale, useTheme } from '@acms-subir/native';
+
+// One month to pick a day from (YYYY-MM-DD), with no native date picker to
+// install: ‹ › change the month, and days before `min` or after `max` can't
+// be picked. Days are plain calendar days (the site's, for requests), so
+// everything here is UTC and never shifts with the phone's time zone.
+const pad = (n: number) => String(n).padStart(2, '0');
+const iso = (y: number, m: number, d: number) => new Date(Date.UTC(y, m - 1, d)).toISOString().slice(0, 10);
+
+export function DayPicker({ value, onChange, min, max }: { value: string; onChange: (day: string) => void; min: string; max?: string }) {
+  const t = useTheme();
+  const { locale } = useLocale();
+  const [month, setMonth] = useState(() => (value || min).slice(0, 7));
+  const [y, m] = month.split('-').map(Number);
+  const f = (o: Intl.DateTimeFormatOptions) => {
+    try { return new Intl.DateTimeFormat(locale, { ...o, timeZone: 'UTC' }); } catch { return new Intl.DateTimeFormat(undefined, { ...o, timeZone: 'UTC' }); }
+  };
+  const monthName = f({ month: 'long', year: 'numeric' });
+  const at = (n: number) => new Date(Date.UTC(y, m - 1 + n, 1));
+  const shift = (n: number) => setMonth(`${at(n).getUTCFullYear()}-${pad(at(n).getUTCMonth() + 1)}`);
+  const earlier = month > min.slice(0, 7), later = !max || month < max.slice(0, 7);
+  const length = new Date(Date.UTC(y, m, 0)).getUTCDate();
+  // weeks start on Sunday
+  const cells = [...Array<string | null>(at(0).getUTCDay()).fill(null), ...Array.from({ length }, (_, i) => iso(y, m, i + 1))];
+  const weekday = f({ weekday: 'short' });
+  const fullDay = f({ weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+  const radius = Math.min(t.radius, 10);
+  const arrow = (n: number, on: boolean, glyph: string) => (
+    // read out as the month it goes to ("December 2026"), so it needs no words of its own
+    <Pressable accessibilityRole="button" accessibilityLabel={monthName.format(at(n))} accessibilityState={{ disabled: !on }} disabled={!on} onPress={() => shift(n)}
+      style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center', opacity: on ? 1 : 0.3 }}>
+      <Text style={[t.styles.text.heading, { color: t.colors.accent }]}>{glyph}</Text>
+    </Pressable>
+  );
+  return (
+    <View style={[t.styles.card, { padding: 8, gap: 4 }]}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {arrow(-1, earlier, '‹')}
+        <Text accessibilityRole="header" style={[t.styles.text.body, { flex: 1, textAlign: 'center', fontWeight: '600' }]}>{monthName.format(at(0))}</Text>
+        {arrow(1, later, '›')}
+      </View>
+      <View style={{ flexDirection: 'row' }} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+        {/* 2026-01-04 was a Sunday */}
+        {Array.from({ length: 7 }, (_, i) => (
+          <Text key={i} style={[t.styles.text.small, { width: `${100 / 7}%`, textAlign: 'center' }]}>{weekday.format(new Date(Date.UTC(2026, 0, 4 + i)))}</Text>
+        ))}
+      </View>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+        {cells.map((d, i) => {
+          if (!d) return <View key={`_${i}`} style={{ width: `${100 / 7}%`, height: 44 }} />;
+          const off = d < min || (!!max && d > max), on = d === value;
+          return (
+            <Pressable key={d} accessibilityRole="button" accessibilityLabel={fullDay.format(new Date(`${d}T00:00:00Z`))} accessibilityState={{ selected: on, disabled: off }}
+              disabled={off} onPress={() => onChange(d)} style={{ width: `${100 / 7}%`, height: 44, padding: 2 }}>
+              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: radius, backgroundColor: on ? t.colors.accent : undefined }}>
+                <Text style={[t.styles.text.body, { color: on ? t.colors.onAccent : off ? t.colors.line : t.colors.ink }, on && { fontWeight: '600' }]}>{Number(d.slice(8))}</Text>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/mobile-template/recipes/event-request/files/components/RequestEventLink.tsx

@@ -0,0 +1,19 @@
+import { Pressable, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { Link } from 'expo-router';
+import { useStrings, useTheme } from '@acms-subir/native';
+
+// "Planning something? Request an event" for the end of the events list,
+// e.g. ListFooterComponent={<RequestEventLink />} in app/events/index.tsx.
+export function RequestEventLink({ style }: { style?: StyleProp<ViewStyle> }) {
+  const t = useTheme();
+  const words = useStrings();
+  return (
+    <Link href="/request" asChild>
+      <Pressable accessibilityRole="link" style={({ pressed }) => [{ minHeight: 44, paddingVertical: 16, justifyContent: 'center', opacity: pressed ? 0.7 : 1 }, style]}>
+        <Text style={[t.styles.text.muted, { textAlign: 'center' }]}>
+          {words.requestPlanning} <Text style={{ color: t.colors.accent, fontWeight: '600' }}>{words.requestEvent}</Text>
+        </Text>
+      </Pressable>
+    </Link>
+  );
+}

package/mobile-template/recipes/event-request/files/components/RequestEventRow.tsx

@@ -0,0 +1,20 @@
+import { Pressable, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { Link } from 'expo-router';
+import { useStrings, useTheme } from '@acms-subir/native';
+
+// The More tab's row that opens /request: "Request an event" ("Solicitar un
+// evento"). Always shown, even while the site isn't taking requests: the
+// screen then says so and gives the office phone. Hiding it would hide a
+// feature from App Review, so don't wrap it in a check.
+export function RequestEventRow({ style }: { style?: StyleProp<ViewStyle> }) {
+  const t = useTheme();
+  const words = useStrings();
+  return (
+    <Link href="/request" asChild>
+      <Pressable accessibilityRole="button" style={({ pressed }) => [{ flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 52, paddingVertical: 12, opacity: pressed ? 0.7 : 1 }, style]}>
+        <Text style={[t.styles.text.body, { flex: 1 }]}>{words.requestEvent}</Text>
+        <Text style={[t.styles.text.heading, { color: t.colors.muted }]} importantForAccessibility="no" accessibilityElementsHidden>›</Text>
+      </Pressable>
+    </Link>
+  );
+}

package/mobile-template/recipes/event-request/recipe.json

@@ -0,0 +1,21 @@
+{
+  "kind": "client",
+  "title": "Event requests",
+  "description": "Request an event without an account: something new (what, kind, date and times, repeats, rooms with a live \"looks free\" line, people) or a change to an event, then name, email and phone, and Request sent with the reply time. When the site isn't taking requests the screen still opens and says so, with the office phone. Includes a row for the More tab and a link for the end of the events list. Needs requests turned on for the site.",
+  "packages": [
+    "expo-crypto",
+    "expo-secure-store"
+  ],
+  "routes": [
+    "/request"
+  ],
+  "next": [
+    "Turn requests on for the site: acms({ requests: true }) in astro.config.mjs (needs the calendar), then restart or deploy. Set the notice, reply time, office phone, kinds and the rooms people may ask for in Admin → Calendar → Requests; staff answer requests there",
+    "Add the row to your More tab: import { RequestEventRow } from '../../components/RequestEventRow' in app/(tabs)/more.tsx (or '../components/RequestEventRow' from a screen in app/) and render <RequestEventRow /> in its list. Keep it there even while requests are closed: the screen says so and gives the office phone, and App Review looks for it",
+    "Optional, at the end of the events list: ListFooterComponent={<RequestEventLink />} in app/events/index.tsx (from '../../components/RequestEventLink')",
+    "Open the screen from site links: in onNavigate, send '/request' (or your acms({ requests: { path } }); '/es/request' in Spanish) to router.push('/request')",
+    "The live \"looks free\" line under the rooms needs bookings on the site (it uses GET /api/v1/rooms/free, free or busy only); without them the screen works the same, without that line",
+    "App Store Connect → App Review Information → Notes: \"Request an event: open the More tab and tap Request an event. No sign-in is needed. The screen asks for a name, an email address, an optional phone number and details or a message about the event (something new, or a change to an existing event). Staff review every request on the website before anything goes on the calendar, and answer by email. If you send a test request, please write App Review in the message so staff can decline it.\"",
+    "App Privacy (App Store Connect) and Data safety (Google Play) for what the screen sends: Contact Info → Name, Email Address, Phone Number (Play: Personal info → Name, Email address, Phone number) and User Content → Other User Content (Play: App activity → Other user-generated content). Purpose: App Functionality; linked to the person; not used for tracking; not shared; optional (people choose to send it). Name, email and phone also stay on the phone in secure storage for next time"
+  ]
+}

package/package.json

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