@acms-subir/core 0.3.35 → 0.3.37

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @acms-subir/core
 
+## 0.3.37
+
+### Patch Changes
+
+- 12fdb58: RSVPs now follow the page's or the app's language, in English, Spanish, French, German and Portuguese (other languages stay in English). On `/es` event pages, and on a site whose main language is Spanish, the RSVP block still said "going", "spots left", "Save my seat", "Your name", "Email", "Seats", "Confirm my seat" or "Request a seat", "This event is full." and "RSVPs are closed." in English; now it says "van", "lugares disponibles", "Apartar mi lugar" and so on. RSVPing from an `/es` page lands on the RSVP's own page in Spanish too: the heading, status, details, Add to calendar, the cancel button, the event's title and the link back, with the date in Spanish. Room booking pages stay in English.
+
+  `GET /api/v1/events/:slug/rsvp` names the built-in button ("Confirm my seat", or "Request a seat" when the organiser approves RSVPs) in the `locale` the app asks for, or the site's main language. A button label you wrote stays as you wrote it.
+
+  The RSVP panel in the app recipes (`components/RsvpPanel.tsx`) takes every word from `useStrings()`, including screen-reader labels and the errors next to answers, so it speaks the app's language (English and Spanish built in; pass `strings` to `<AcmsProvider>` for others), with numbers in the app's format. The event's own form title, questions and button keep your words. Apps that already have the panel, from the `events` or the `rsvp` recipe, can update it with `npx acms mobile recipe add rsvp --force`. That overwrites `components/RsvpPanel.tsx`, including any changes you made to it, and needs this release's `@acms-subir/native`.
+
+## 0.3.36
+
+### Patch Changes
+
+- fe964b1: Apps can RSVP to events on any site with the calendar on, not only on sites with bookings, with the same rules as the event's page: open until the date ends, capacity per date, and RSVPs the organiser approves stay pending until then.
+
+  - New `GET /api/v1/events/:slug/rsvp?start=…` (the date's start exactly as `/api/v1/events` lists it): whether a date takes RSVPs (or why not: turned off, cancelled, ended or full), the seats going and left right now, how many seats one RSVP may take, and the event's questions with their version. It's never cached. `site.features.rsvp` says it's there.
+  - `POST /api/v1/bookings` takes RSVPs on calendar-only sites; room bookings still need bookings on. An RSVP to an event with questions must send that `formVersion`, so changed questions answer 409 as on the website, and checkbox groups can send their answers as a list.
+  - Bookings and RSVPs from apps are recorded as coming from the app: the booking details in the admin say "App" (and "Website", "Staff", "API" or "Agent" for the others), and webhooks carry `source: "app"`.
+  - `GET /api/v1/bookings/manage` returns `confirmation`, the message the booking's web page shows once it's confirmed.
+  - The App store answers in Settings → Legal list RSVPs among what the app collects whenever the calendar is on, and the privacy notice says the app keeps an RSVP's or booking's private key in the phone's secure storage.
+  - RSVPs in the app recipes: `components/RsvpPanel.tsx` shows going and spots left, seats, the event's questions with inline errors, then the person's RSVP with a way to cancel it (its private token stays in `expo-secure-store`), or why a date is full or closed. It fills in the email of someone signed in for My bookings. New apps get it on the events recipe's event screen (which now also installs `expo-crypto` and `expo-secure-store`); an app with its own event screen runs `npx acms mobile recipe add rsvp` and mounts `<RsvpPanel slug start />`. The events list strikes through a single cancelled date of a repeating event too.
+
+- d06240a: Theme header and footer templates get the page's language and core's own labels: `site.lang` and `site.words` (`main`, `openMenu`, `closeMenu`, `scheme`, `language`, `social`, `menu`, `skip`, `read`, `site`, `privacy`, `terms`, …) in English, Spanish, French, German or Portuguese, so a custom header's buttons and landmarks read in the visitor's language like the built-in one. `siteStrings(lang)` and the `SiteStrings` type are exported from `@acms-subir/core/theme`.
+
 ## 0.3.35
 
 ### Patch Changes

package/docs/mobile.md

@@ -105,20 +105,22 @@ Read the app's `AGENTS.md` too: it holds the same rules, next to the code.
     Every screen needs loading, error (`<ErrorView error retry>`) and empty states,
     and pull to refresh (`useRefresh()`).
 13. **Bookings are idempotent.** Use `useBooking({ createKey: randomUUID })`
-    (expo-crypto): the same details reuse one Idempotency-Key until success,
-    so retries never double-book. Never put the manage token, email or key in
+    and `useRsvp(slug, start, { createKey: randomUUID })` (expo-crypto): the
+    same details reuse one Idempotency-Key until success, so retries never
+    double-book. Never put the manage token, email or key in
     a URL, log or analytics; keep the manage token in `expo-secure-store`.
 
 ## Hooks at a glance
 
 | Hook | For |
 | --- | --- |
-| `useSite()` | name, menu, languages, features (`calendar`, `bookings`, `blog`, `search`, `bookingChanges`, `guestSignIn`, `forms`, `links`, `live`) |
+| `useSite()` | name, menu, languages, features (`calendar`, `bookings`, `rsvp`, `blog`, `search`, `bookingChanges`, `guestSignIn`, `forms`, `links`, `live`) |
 | `usePage(slug)` | a published page: `mode` (`sections`/`content`), `sections`, `body.html`; 404 when missing |
 | `usePosts({ collection, limit, q })` / `usePost(slug)` | posts (infinite: `items`, `fetchNextPage`); `q` gives ranked search matches |
 | `useSearch(text, { types, collection, limit })` | site-wide search: `data.posts`, `data.pages`, `data.events` (each with `snippet.text` + `snippet.highlights`), `data.more`; debounced, blank text fetches nothing |
 | `useEvents({ calendar, from, to, limit, q })` | `data.occurrences[]` (`start`, `end`, `allDay`, `event`) in a window (default 30 days, max 90). `from`/`to` take a site-local day (`'2026-10-01'`) or an ISO date-time with a zone (`new Date().toISOString()`) |
 | `useEvent(slug)` | one event |
+| `useRsvpStatus(slug, start)` / `useRsvp(slug, start)` | RSVP to one date (`start` exactly as `useEvents` returns it, a UTC ISO string) when `event.rsvp.enabled`: `open` or `reason` (`full`, `ended`, `cancelled`, `disabled`), live `going`/`left`, `maxSeats`, the questions in `form`; `answerProblems(form.fields, answers)` for inline errors. Needs only the calendar (`features.rsvp`). Keep `manageToken` in `expo-secure-store` to show or cancel the RSVP later (`useManagedBooking`, `useCancelBooking`) |
 | `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") |
 | `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` |
@@ -140,7 +142,8 @@ Ready-made screens; add them instead of writing from scratch:
 
 ```sh
 npx acms mobile recipe list
-npx acms mobile recipe add events    # list, detail, add to calendar  (expo-calendar)
+npx acms mobile recipe add events    # list, detail with RSVP, add to calendar  (expo-calendar, expo-crypto, expo-secure-store)
+npx acms mobile recipe add rsvp      # just the RSVP panel, for your own event screen: <RsvpPanel slug start />  (expo-crypto, expo-secure-store)
 npx acms mobile recipe add news      # posts list, article
 npx acms mobile recipe add booking   # resources → slots → form → confirmation  (expo-crypto)
 npx acms mobile recipe add push      # notifications: turn on, topic toggles, taps open the page  (expo-notifications, expo-device)

package/docs/theme-authoring.md

@@ -61,7 +61,7 @@ Options default to `{ limit: 6, horizonDays: 400 }`. The limit must be a non-neg
 
 Template filenames: `home.astro`, `event.astro`, `header.astro`, `footer.astro`, `post-<name>.astro`, `page-<name>.astro`.
 
-`header.astro` and `footer.astro` replace the site header and footer on every public page. They receive `ChromeProps` — one `site` prop (`SiteChrome`) with everything already resolved for the request: `title`, `tagline`, `logo`, `logoDark`, `homeUrl`, `links` (header nav, each `{ label, url, current, external }`, already localized), `footerLinks`, `social` (with inline SVG `icon`), `readLinks`, `footerHtml`, `languages` (`{ code, label, url, current }`, where `label` is the language's own name, e.g. "Español"), `search` (`{ url, label }` or null), `schemeToggle`, `liveHeader`, `headerStyle`, `footerStyle`. Core behaviors attach through data hooks, so keep them on your own elements: `data-search-open` (opens search), `data-scheme-toggle` (light/dark), `data-menu-open` (phone menu sheet, built from `site.links`) and a hidden `data-live-header` link (shown during a live stream).
+`header.astro` and `footer.astro` replace the site header and footer on every public page. They receive `ChromeProps` — one `site` prop (`SiteChrome`) with everything already resolved for the request: `title`, `tagline`, `logo`, `logoDark`, `homeUrl`, `links` (header nav, each `{ label, url, current, external }`, already localized), `footerLinks`, `social` (with inline SVG `icon`), `readLinks`, `footerHtml`, `languages` (`{ code, label, url, current }`, where `label` is the language's own name, e.g. "Español"), `search` (`{ url, label }` or null), `schemeToggle`, `liveHeader`, `headerStyle`, `footerStyle`, `lang` (the page's language, as on `<html lang>`) and `words`: core's own labels in that language (English, Spanish, French, German or Portuguese, otherwise English), so your controls read the same as the built-in header for people using screen readers: `skip`, `main`, `menu`, `language`, `social`, `openMenu`, `closeMenu`, `scheme`, `read`, `site`, `privacy`, `terms`, `home`, `links`, `copy`, `copied`, `close`. `siteStrings(lang)` from `@acms-subir/core/theme` returns the same words for any language. Core behaviors attach through data hooks, so keep them on your own elements: `data-search-open` (opens search), `data-scheme-toggle` (light/dark), `data-menu-open` (phone menu sheet, built from `site.links`) and a hidden `data-live-header` link (shown during a live stream).
 
 Owners upload **Logo (dark mode)** beside Logo in Design → Brand and publish it with the design. `site.logoDark` is an empty string when unset; use the regular logo as the fallback. The built-in header/footer and the `SiteLogo` component below switch without image filters, following the site’s forced scheme, visitor toggle, or OS preference. Custom markup can use `html[data-scheme="dark"]` / `html[data-scheme="light"]`, falling back to `prefers-color-scheme` when the attribute is absent. `/api/v1/site` also returns `logoDark` as an absolute URL (or `""` when unset).
 
@@ -73,10 +73,11 @@ const { site } = Astro.props as ChromeProps;
 ---
 <header class="gh-head">
   <a class="brand" href={site.homeUrl}><SiteLogo title={site.title} logo={site.logo} logoDark={site.logoDark} /></a>
-  <nav>{site.links.map((l) => <a href={l.url} aria-current={l.current ? 'page' : undefined}>{l.label}</a>)}</nav>
-  {site.languages.map((l) => <a href={l.url} lang={l.code} aria-current={l.current ? 'true' : undefined}>{l.label}</a>)}
+  <nav aria-label={site.words.main}>{site.links.map((l) => <a href={l.url} aria-current={l.current ? 'page' : undefined}>{l.label}</a>)}</nav>
+  <span role="group" aria-label={site.words.language}>{site.languages.map((l) => <a href={l.url} lang={l.code} aria-current={l.current ? 'true' : undefined}>{l.label}</a>)}</span>
   {site.search && <a href={site.search.url} data-search-open>{site.search.label}</a>}
-  <button type="button" data-menu-open aria-label="Open menu">Menu</button>
+  {site.schemeToggle && <button type="button" data-scheme-toggle aria-label={site.words.scheme}>◐</button>}
+  <button type="button" data-menu-open aria-label={site.words.openMenu}>{site.words.menu}</button>
 </header>
 ``` Post/page variants are selected in the content editor. Core owns routes, auth, SEO and published-content queries. Templates only replace their documented content area. Never query private data from a public section or insert untrusted strings with set:html. The core's rendered `html`/`bodyHtml` is the intended rich-content handoff.
 

package/integration.mjs

@@ -834,6 +834,9 @@ export default function acms(options = {}) {
       ['/embed/calendar/[slug]', 'embed/calendar/[slug].astro'],
       ['/api/v1/events', 'api/v1/events.ts'],
       ['/api/v1/calendars', 'api/v1/calendars.ts'],
+      // RSVPs from apps: a date's status, then POST /bookings (room bookings there need bookings on)
+      ['/api/v1/events/[slug]/rsvp', 'api/v1/events/[slug]/rsvp.ts'],
+      ['/api/v1/bookings', 'api/v1/bookings.ts'],
       ['/api/calendar/events', 'api/calendar/events/index.ts'],
       ['/api/calendar/calendars', 'api/calendar/calendars.ts'],
       ['/admin/calendar', 'admin/calendar/index.astro'],
@@ -866,7 +869,6 @@ export default function acms(options = {}) {
         ['/embed/book/[resource]/[link]', 'embed/book/[resource]/[link].astro'],
         ['/api/v1/resources', 'api/v1/resources.ts'],
         ['/api/v1/availability', 'api/v1/availability.ts'],
-        ['/api/v1/bookings', 'api/v1/bookings.ts'],
         ['/api/calendar/availability', 'api/calendar/availability.ts'],
         ['/api/calendar/bookings', 'api/calendar/bookings/index.ts'],
         ['/api/calendar/bookings/[id]', 'api/calendar/bookings/[id].ts'],

package/mobile-template/client/AGENTS.md

@@ -72,7 +72,8 @@ Add ready-made screens from the site folder instead of writing them from scratch
 
 ```sh
 npx acms mobile recipe list
-npx acms mobile recipe add events    # events list, detail, add to calendar
+npx acms mobile recipe add events    # events list, detail with RSVP, add to calendar
+npx acms mobile recipe add rsvp      # just the RSVP panel for your own event screen: <RsvpPanel slug start />
 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)

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
+npx acms mobile recipe add events   # also: news, booking, push, rsvp, announcements
 ```
 
 Build your own with the hooks from `@acms-subir/native`. `AGENTS.md` has the

package/mobile-template/recipes/events/files/app/events/[slug].tsx

@@ -1,41 +1,69 @@
-import { ActivityIndicator, Image, Linking, ScrollView, Text, View } from 'react-native';
+import { ActivityIndicator, Image, KeyboardAvoidingView, Linking, Platform, ScrollView, Text, View } from 'react-native';
 import { Stack, useLocalSearchParams } from 'expo-router';
-import { Button, ErrorView, EventDate, resolveUrl, useAcmsContext, useEvent, useLayout, useTheme } from '@acms-subir/native';
+import { Button, ErrorView, EventDate, resolveUrl, useAcmsContext, useEvent, useEvents, useLayout, useTheme } from '@acms-subir/native';
 import { addToCalendar } from '../../lib/addToCalendar';
+import { RsvpPanel } from '../../components/RsvpPanel';
 
 export default function EventScreen() {
   const t = useTheme();
   const { baseUrl } = useAcmsContext();
   const { gutter } = useLayout();
-  const params = useLocalSearchParams<{ slug: string; start?: string; end?: string; allDay?: string }>();
+  // `on`: the website's ?on=YYYY-MM-DD, when a shared link opens the app
+  const params = useLocalSearchParams<{ slug: string; start?: string; end?: string; allDay?: string; cancelled?: string; on?: string }>();
   // Search from the chosen occurrence's day so later occurrences are found too.
   const from = params.start ? params.start.slice(0, 10) : undefined;
   const { data: event, error, isPending, refetch } = useEvent(params.slug, from ? { from } : {});
   if (error && !event) return <ErrorView error={error} retry={refetch} />;
   if (isPending || !event) return <ActivityIndicator style={{ marginTop: 48 }} color={t.colors.accent} />;
   const occurrence = { start: params.start ?? event.start, end: params.end ?? event.end, allDay: params.start ? params.allDay === '1' : event.allDay };
+  // a single date of a repeating event can be cancelled on its own
+  const dateCancelled = params.start ? params.cancelled === '1' : false;
+  const cancelled = event.cancelled || dateCancelled;
   const image = resolveUrl(event.image, baseUrl);
   const cta = event.cta.label ? resolveUrl(event.cta.href, baseUrl) : undefined;
   return (
-    <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 760, alignSelf: 'center' }}>
-      <Stack.Screen options={{ title: event.title }} />
-      {image && <Image source={{ uri: image }} accessibilityLabel={event.imageAlt} style={{ width: '100%', aspectRatio: 16 / 9, borderRadius: t.radius, backgroundColor: t.colors.soft }} />}
-      <EventDate {...occurrence} timezone={event.timezone} style={{ color: t.colors.accent }} />
-      <Text accessibilityRole="header" style={t.styles.text.display}>{event.title}</Text>
-      {event.cancelled && <Text style={t.styles.text.heading}>This event is cancelled.</Text>}
-      {!!event.repeats && <Text style={t.styles.text.small}>{event.repeats}</Text>}
-      {!!(event.location.name || event.location.address) && (
-        <View style={{ gap: 2 }}>
-          {!!event.location.name && <Text style={t.styles.text.body}>{event.location.name}</Text>}
-          {!!event.location.address && <Text style={t.styles.text.muted}>{event.location.address}</Text>}
+    <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+      <ScrollView keyboardShouldPersistTaps="handled" style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 760, alignSelf: 'center' }}>
+        <Stack.Screen options={{ title: event.title }} />
+        {image && <Image source={{ uri: image }} accessibilityLabel={event.imageAlt} style={{ width: '100%', aspectRatio: 16 / 9, borderRadius: t.radius, backgroundColor: t.colors.soft }} />}
+        <EventDate {...occurrence} timezone={event.timezone} style={[{ color: t.colors.accent }, dateCancelled && { textDecorationLine: 'line-through' }]} />
+        <Text accessibilityRole="header" style={t.styles.text.display}>{event.title}</Text>
+        {event.cancelled ? <Text style={t.styles.text.heading}>This event is cancelled.</Text> : dateCancelled && <Text style={t.styles.text.heading}>This date is cancelled.</Text>}
+        {!!event.repeats && <Text style={t.styles.text.small}>{event.repeats}</Text>}
+        {!!(event.location.name || event.location.address) && (
+          <View style={{ gap: 2 }}>
+            {!!event.location.name && <Text style={t.styles.text.body}>{event.location.name}</Text>}
+            {!!event.location.address && <Text style={t.styles.text.muted}>{event.location.address}</Text>}
+          </View>
+        )}
+        {!!event.excerpt && <Text style={t.styles.text.body}>{event.excerpt}</Text>}
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
+          {!cancelled && <Button label="Add to calendar" onPress={() => addToCalendar(event, occurrence)} />}
+          {cta && !event.rsvp?.enabled && <Button label={event.cta.label} variant="outline" onPress={() => Linking.openURL(cta)} />}
+          <Button label="Open on website" variant="outline" onPress={() => Linking.openURL(event.url)} />
         </View>
-      )}
-      {!!event.excerpt && <Text style={t.styles.text.body}>{event.excerpt}</Text>}
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
-        {!event.cancelled && <Button label="Add to calendar" onPress={() => addToCalendar(event, occurrence)} />}
-        {cta && <Button label={event.cta.label} variant="outline" onPress={() => Linking.openURL(cta)} />}
-        <Button label="Open on website" variant="outline" onPress={() => Linking.openURL(event.url)} />
-      </View>
-    </ScrollView>
+        {/* RSVP replaces the event's button, as on the website */}
+        {event.rsvp?.enabled && !cancelled && (params.start ? <RsvpPanel slug={event.slug} start={params.start} /> : <NextDateRsvp slug={event.slug} from={params.on} repeats={!!event.rrule} />)}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const day = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+// Opened without a date (a shared link or a push): RSVP to its next date in the coming 60 days
+// (named, for a repeating event).
+function NextDateRsvp({ slug, from, repeats }: { slug: string; from?: string; repeats: boolean }) {
+  const t = useTheme();
+  const first = from && /^\d{4}-\d{2}-\d{2}$/.test(from) ? from : day(new Date());
+  const to = new Date(`${first}T12:00:00`);
+  to.setDate(to.getDate() + 60);
+  const { data } = useEvents({ from: first, to: day(to), limit: 50 });
+  const next = data?.occurrences.find((o) => o.event.slug === slug && !o.cancelled && Date.parse(o.end) > Date.now());
+  if (!next) return null;
+  return (
+    <View style={{ gap: 8 }}>
+      {repeats && <EventDate start={next.start} end={next.end} allDay={next.allDay} timezone={next.event.timezone} style={{ color: t.colors.accent }} />}
+      <RsvpPanel slug={slug} start={next.start} />
+    </View>
   );
 }

package/mobile-template/recipes/events/files/app/events/index.tsx

@@ -33,13 +33,14 @@ export default function EventsScreen() {
           renderItem={({ item: o }) => (
             <Pressable
               accessibilityRole="button"
-              onPress={() => router.push({ pathname: '/events/[slug]', params: { slug: o.event.slug, start: o.start, end: o.end, allDay: o.allDay ? '1' : '' } })}
+              onPress={() => router.push({ pathname: '/events/[slug]', params: { slug: o.event.slug, start: o.start, end: o.end, allDay: o.allDay ? '1' : '', cancelled: o.cancelled ? '1' : '' } })}
               style={({ pressed }) => [t.styles.card, { flex: 1, gap: 4, opacity: pressed ? 0.85 : 1 }]}
             >
               <EventDate start={o.start} end={o.end} allDay={o.allDay} timezone={o.event.timezone} style={{ color: t.colors.accent }} />
-              <Text style={[t.styles.text.heading, o.event.cancelled && { textDecorationLine: 'line-through' }]}>{o.event.title}</Text>
+              {/* o.cancelled: the whole event or just this date */}
+              <Text style={[t.styles.text.heading, o.cancelled && { textDecorationLine: 'line-through' }]}>{o.event.title}</Text>
               {!!o.event.location.name && <Text style={t.styles.text.small}>{o.event.location.name}</Text>}
-              {o.event.cancelled && <Text style={[t.styles.text.label, { color: t.colors.ink }]}>Cancelled</Text>}
+              {o.cancelled && <Text style={[t.styles.text.label, { color: t.colors.ink }]}>Cancelled</Text>}
             </Pressable>
           )}
           ListFooterComponent={<View style={{ height: 24 }} />}

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

@@ -0,0 +1,274 @@
+import { Fragment, useEffect, useState } from 'react';
+import { ActivityIndicator, Platform, Pressable, Switch, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
+import * as Crypto from 'expo-crypto';
+import * as SecureStore from 'expo-secure-store';
+import { isAcmsError, type FormField } from '@acms-subir/client';
+import { Button, answerProblemText, answerProblems, countWords, fill, seatChoices, useCancelBooking, useGuest, useLocale, useManagedBooking, useRsvp, useRsvpStatus, useSite, useStrings, useTheme } from '@acms-subir/native';
+
+// RSVP to one date of an event: <RsvpPanel slug={event.slug} start={occurrence.start} />,
+// with `start` exactly as useEvents returns it. Shows going and spots left,
+// seats, contact details and the event's questions, then the person's RSVP
+// with a way to cancel it; or why the date takes no RSVPs. Same rules as the
+// event's web page: open until the date ends, and the organiser may approve
+// each RSVP. useRsvp keeps one idempotency key per RSVP, so sending again
+// after a timeout can't register anyone twice. Its words come from
+// useStrings() in the app's language; the event's own form title, labels and
+// button win when the site has them.
+
+// The RSVP's private manage token, one per event date, lives only in secure
+// storage (never a URL or log). Keys allow letters, digits, ".", "-" and "_".
+// Web has no secure storage: there the confirmation email's link is the way back.
+const tokenKey = (eventId: string, start: string) => `rsvp.${eventId}.${start}`.replace(/[^A-Za-z0-9._-]/g, '_');
+const keychain = { keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY };
+const tokens = {
+  get: async (key: string) => (Platform.OS === 'web' ? null : SecureStore.getItemAsync(key, keychain).catch(() => null)),
+  set: async (key: string, token: string) => { if (Platform.OS !== 'web') await SecureStore.setItemAsync(key, token, keychain).catch(() => {}); },
+  remove: async (key: string) => { if (Platform.OS !== 'web') await SecureStore.deleteItemAsync(key, keychain).catch(() => {}); },
+};
+
+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' };
+// "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; }
+  return value === OTHER ? other.trim() : (value ?? '');
+};
+// a count in bold inside its words ("{count} going")
+const bold = (template: string, n: string) => template.split('{count}').map((part, i) => (i ? <Fragment key={i}><Text style={{ fontWeight: '700' }}>{n}</Text>{part}</Fragment> : part));
+
+export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
+  const t = useTheme();
+  const words = useStrings();
+  const { locale } = useLocale();
+  const { data: site } = useSite();
+  const guest = useGuest();
+  const status = useRsvpStatus(slug, start);
+  const rsvp = useRsvp(slug, start, { createKey: Crypto.randomUUID });
+  const s = status.data;
+  const key = s ? tokenKey(s.event.id, s.start) : null;
+  // undefined until secure storage has answered
+  const [stored, setStored] = useState<string | null | undefined>(undefined);
+  const changes = site?.features.bookingChanges === true;
+  const managed = useManagedBooking(changes ? stored : null);
+  const cancel = useCancelBooking(stored);
+  const [confirming, setConfirming] = useState(false);
+  const [notice, setNotice] = useState('');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [seats, setSeats] = useState(1);
+  const [values, setValues] = useState<Answers>({});
+  const [others, setOthers] = useState<Record<string, string>>({});
+  const [tried, setTried] = useState(false);
+
+  useEffect(() => {
+    if (!key) return;
+    let live = true;
+    void tokens.get(key).then((token) => { if (live) setStored(token); });
+    return () => { live = false; };
+  }, [key]);
+  // signed in for "My bookings": that's their email (guest sign-in knows no name)
+  useEffect(() => {
+    if (site?.features.guestSignIn && guest.email) setEmail((e) => e || guest.email!);
+  }, [site?.features.guestSignIn, guest.email]);
+  // cancelled (here, from the email link or by the organiser) or gone: forget the token
+  const gone = managed.data?.booking.status === 'cancelled' || (isAcmsError(managed.error) && managed.error.status === 404);
+  useEffect(() => {
+    if (!key || !stored || !gone) return;
+    void tokens.remove(key);
+    setStored(null);
+    setConfirming(false);
+    rsvp.reset();
+    if (managed.data?.booking.status === 'cancelled') setNotice(words.rsvpCancelled);
+  }, [key, stored, gone]);
+
+  if (!s) return status.isPending ? <ActivityIndicator color={t.colors.accent} /> : null;
+  const input = { borderWidth: 1, borderColor: t.colors.line, borderRadius: Math.min(t.radius, 10), padding: 12, fontSize: 16, color: t.colors.ink, backgroundColor: t.colors.panel } as const;
+  const chip = (on: boolean) => ({ paddingVertical: 10, paddingHorizontal: 12, borderRadius: Math.min(t.radius, 10), 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 num = (n: number) => n.toLocaleString(locale);
+  const seatsText = (n: number) => countWords(n, words.seat, words.seats, locale);
+  const going = (
+    <Text style={t.styles.text.body}>
+      {bold(s.going === 1 ? words.personGoing : words.peopleGoing, num(s.going))}
+      {s.left !== null && <> · {bold(s.left === 1 ? words.spotLeft : words.spotsLeft, num(s.left))}</>}
+    </Text>
+  );
+
+  // ---- their RSVP: just sent, or kept from before ----
+  const mine = managed.data && managed.data.booking.status !== 'cancelled' ? managed.data : null;
+  const made = rsvp.data?.booking;
+  if (stored === undefined || (stored && changes && managed.isPending && !made)) return <ActivityIndicator color={t.colors.accent} />;
+  // offline or busy: say so rather than offer a second RSVP
+  if (stored && changes && managed.error && !gone && !made) return (
+    <View style={[t.styles.card, { gap: 8 }]}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{words.yourRsvp}</Text>
+      <Text style={t.styles.text.muted}>{words.loadError}</Text>
+      <Button label={words.tryAgain} variant="outline" onPress={() => void managed.refetch()} />
+    </View>
+  );
+  if ((stored && mine) || made) {
+    const state = mine?.booking.status ?? made!.status;
+    const who = mine?.booking.email ?? made!.email;
+    const thanks = mine ? mine.confirmation : made!.formResponse?.definition.confirmation || null;
+    const canCancel = !!stored && changes && (mine ? mine.can.cancel : false);
+    return (
+      <View style={[t.styles.card, { gap: 8 }]}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? words.yourRsvp : state === 'confirmed' ? words.confirmed : words.requestSent}</Text>
+        <Text style={[t.styles.text.label, { color: t.colors.ink }]}>
+          {seatsText(mine?.booking.seats ?? made!.seats)} · {state === 'confirmed' ? words.confirmed : state === 'pending' ? words.awaitingApproval : words.notConfirmed}
+        </Text>
+        <Text style={t.styles.text.body}>
+          {state === 'confirmed' ? thanks || fill(words.confirmationOnItsWay, { email: who })
+            : state === 'pending' ? fill(words.emailWhenApproved, { email: who }) : words.rsvpDeclined}
+        </Text>
+        {state === 'declined' && <Button label={words.rsvpAgain} variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
+        {canCancel && state !== 'declined' && (confirming ? (
+          <View style={{ gap: 8 }}>
+            <Text style={t.styles.text.body}>{fill(words.cancelRsvpFor, { seats: seatsText(mine!.booking.seats) })}</Text>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
+              <Button label={cancel.isPending ? words.cancelling : words.yesCancel} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
+              <Button label={words.keepIt} variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
+            </View>
+          </View>
+        ) : <Button label={words.cancelRsvp} variant="outline" onPress={() => setConfirming(true)} />)}
+        {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? words.checkConnection : cancel.error.message}</Text>}
+        {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>{words.changeByEmail}</Text>}
+      </View>
+    );
+  }
+
+  if (s.reason === 'disabled') return null;
+  if (!s.open) return (
+    <View style={[t.styles.card, { gap: 6 }]}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{s.reason === 'full' ? words.full : s.reason === 'cancelled' ? words.dateCancelled : words.rsvpClosed}</Text>
+      {s.reason === 'full' ? going : <Text style={t.styles.text.muted}>{s.reason === 'cancelled' ? words.noRsvpNeeded : words.dateEnded}</Text>}
+    </View>
+  );
+
+  // ---- the form ----
+  const form = s.form;
+  const fields = form?.fields ?? [];
+  const answers: Answers = Object.fromEntries(fields.filter((f) => f.type !== 'heading').map((f) => [f.id, withOther(f, values[f.id], others[f.id] ?? '')]));
+  const problems = answerProblems(fields, answers);
+  const nameProblem = !name.trim() ? words.nameProblem : '';
+  const emailProblem = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()) ? words.emailProblem : '';
+  // the form may ask for a phone itself
+  const askPhone = !fields.some((f) => f.type === 'phone');
+  const chosen = Math.min(seats, s.maxSeats) || 1;
+  const submit = () => {
+    setTried(true);
+    setNotice('');
+    if (nameProblem || emailProblem || Object.keys(problems).length) return;
+    rsvp.mutate({ name, email, phone: askPhone ? phone : '', seats: chosen, answers }, {
+      onSuccess: (data) => { if (key) void tokens.set(key, data.manageToken); setStored(data.manageToken); },
+    });
+  };
+  const set = (id: string, v: string | string[]) => setValues((a) => ({ ...a, [id]: v }));
+  const label = (text: string, required: boolean) => (
+    <Text style={t.styles.text.label}>{text}{required ? <Text accessibilityLabel={words.required}> *</Text> : ''}</Text>
+  );
+  const text = (lbl: string, value: string, onChange: (v: string) => void, o: { required?: boolean; keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel'; placeholder?: string; help?: string; problem?: string } = {}) => (
+    <View key={lbl} style={{ gap: 6 }}>
+      {label(lbl, !!o.required)}
+      {!!o.help && <Text style={t.styles.text.small}>{o.help}</Text>}
+      <TextInput value={value} onChangeText={onChange} keyboardType={o.keyboard} multiline={o.multiline} autoComplete={o.auto} placeholder={o.placeholder}
+        autoCapitalize={o.auto === 'email' || o.keyboard === 'email-address' || o.keyboard === 'url' ? 'none' : 'sentences'} placeholderTextColor={t.colors.muted}
+        accessibilityLabel={lbl} accessibilityHint={o.problem}
+        style={[input, o.multiline && { minHeight: 96, textAlignVertical: 'top' }, !!o.problem && { borderColor: t.colors.ink }]} />
+      {!!o.problem && <Text style={errorText}>{o.problem}</Text>}
+    </View>
+  );
+  const field = (f: FormField) => {
+    const problem = tried && problems[f.id] ? answerProblemText(f, problems[f.id], words) : '';
+    if (f.type === 'heading') return (
+      <View key={f.id} style={{ gap: 2, paddingTop: 4 }}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{f.label}</Text>
+        {!!f.help && <Text style={t.styles.text.muted}>{f.help}</Text>}
+      </View>
+    );
+    if (f.type === 'checkbox' || f.type === 'consent') return (
+      <View key={f.id} style={{ gap: 6 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <Text style={[t.styles.text.body, { flex: 1 }]}>{f.label}{f.required ? ' *' : ''}</Text>
+          <Switch accessibilityLabel={f.label} value={values[f.id] === 'yes'} onValueChange={(v) => set(f.id, v ? 'yes' : '')} trackColor={{ true: t.colors.accent }} />
+        </View>
+        {!!f.help && <Text style={t.styles.text.small}>{f.help}</Text>}
+        {!!problem && <Text style={errorText}>{problem}</Text>}
+      </View>
+    );
+    if (f.type === 'select' || f.type === 'radio' || f.type === 'checkboxes') {
+      const many = f.type === 'checkboxes';
+      const current = values[f.id];
+      const isOn = (o: string) => (many ? Array.isArray(current) && current.includes(o) : current === o);
+      const toggle = (o: string) => {
+        if (!many) return set(f.id, current === o && !f.required ? '' : o);
+        const list = Array.isArray(current) ? current : [];
+        set(f.id, list.includes(o) ? list.filter((x) => x !== o) : [...list, o]);
+      };
+      const choices = f.allowOther && f.type !== 'select' ? [...f.options, OTHER] : f.options;
+      return (
+        <View key={f.id} style={{ gap: 6 }}>
+          {label(f.label, f.required)}
+          {!!f.help && <Text style={t.styles.text.small}>{f.help}</Text>}
+          <View accessibilityRole={many ? undefined : 'radiogroup'} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            {choices.map((o) => (
+              <Pressable key={o} accessibilityRole={many ? 'checkbox' : 'radio'} accessibilityState={{ checked: isOn(o) }} onPress={() => toggle(o)} style={chip(isOn(o))}>
+                <Text style={[t.styles.text.body, isOn(o) && { fontWeight: '600' }]}>{o === OTHER ? words.other : o}</Text>
+              </Pressable>
+            ))}
+          </View>
+          {isOn(OTHER) && (
+            <TextInput value={others[f.id] ?? ''} onChangeText={(v) => setOthers((x) => ({ ...x, [f.id]: v }))} placeholder={words.other} accessibilityLabel={fill(words.otherAnswer, { label: f.label })}
+              placeholderTextColor={t.colors.muted} style={input} />
+          )}
+          {!!problem && <Text style={errorText}>{problem}</Text>}
+        </View>
+      );
+    }
+    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,
+    });
+  };
+
+  const error = rsvp.error;
+  return (
+    <View style={[t.styles.card, { gap: 16 }]}>
+      <View style={{ gap: 4 }}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || words.rsvpTitle}</Text>
+        {going}
+        {!!notice && <Text style={t.styles.text.muted}>{notice}</Text>}
+        {!!form?.intro && <Text style={t.styles.text.muted}>{form.intro}</Text>}
+      </View>
+      {text(words.nameField, name, setName, { required: true, auto: 'name', problem: tried ? nameProblem : '' })}
+      {text(words.emailField, email, setEmail, { required: true, keyboard: 'email-address', auto: 'email', problem: tried ? emailProblem : '' })}
+      {askPhone && text(words.phoneField, phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+      {s.maxSeats > 1 && (
+        <View style={{ gap: 6 }}>
+          {label(words.seatsField, false)}
+          <View accessibilityRole="radiogroup" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            {seatChoices(s).map((n) => (
+              <Pressable key={n} accessibilityRole="radio" accessibilityLabel={seatsText(n)} accessibilityState={{ checked: n === chosen }} onPress={() => setSeats(n)} style={[chip(n === chosen), { minWidth: 48, alignItems: 'center' }]}>
+                <Text style={[t.styles.text.body, n === chosen && { fontWeight: '600' }]}>{num(n)}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      )}
+      {fields.map(field)}
+      {error && (
+        <View style={{ backgroundColor: t.colors.soft, borderRadius: Math.min(t.radius, 10), padding: 12, gap: 4 }}>
+          <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{words.notSent}</Text>
+          <Text style={t.styles.text.muted}>
+            {isAcmsError(error) && error.status === 0 ? words.offlineRetry : error.message}
+          </Text>
+        </View>
+      )}
+      {tried && (nameProblem || emailProblem || Object.keys(problems).length > 0) && <Text style={errorText}>{words.checkAnswers}</Text>}
+      <Button label={rsvp.isPending ? words.sending : form?.submitLabel || (s.autoConfirm ? words.confirmSeat : words.requestSeat)} disabled={rsvp.isPending} onPress={submit} />
+      <Text style={t.styles.text.small}>{words.rsvpPrivacy}</Text>
+    </View>
+  );
+}

package/mobile-template/recipes/events/recipe.json

@@ -1,9 +1,11 @@
 {
   "kind": "client",
   "title": "Events",
-  "description": "Upcoming events list, event detail and add to calendar (with a share fallback).",
+  "description": "Upcoming events list, event detail with RSVP (seats, the event's questions, confirmation) and add to calendar (with a share fallback).",
   "packages": [
-    "expo-calendar"
+    "expo-calendar",
+    "expo-crypto",
+    "expo-secure-store"
   ],
   "routes": [
     "/events",
@@ -11,6 +13,7 @@
   ],
   "next": [
     "Link to it from a screen: <Link href=\"/events\">Events</Link> (expo-router)",
-    "Add to calendar needs a development build (npx expo run:ios / run:android); in Expo Go it falls back to sharing"
+    "Add to calendar needs a development build (npx expo run:ios / run:android); in Expo Go it falls back to sharing",
+    "RSVP (components/RsvpPanel.tsx) shows on events with RSVPs turned on and needs only the calendar, not bookings. It keeps each RSVP's private manage token in expo-secure-store, so people can see and cancel their RSVP in the app as well as from the confirmation email"
   ]
 }