@acms-subir/core 0.3.34 → 0.3.36

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @acms-subir/core
 
+## 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
+
+- 85f91a1: A new automatic notification in **Admin → Mobile app**: **When an event changes**, off unless you choose calendars (all public calendars or some, like "Starting soon"). People hear when a published event's next date or time moves ("Now Sun, Oct 26, 10:30 AM (was 9:00 AM)"), its place changes ("New place: Fellowship Hall"), the whole event is cancelled, or a date of a repeating event is cancelled ("Cancelled on Sun, Oct 26", which opens that date). It goes out in each phone's language (English, Spanish, French, German or Portuguese, with the event's translated title) 10 minutes after the last edit, compared with what people last knew, so several quick edits send one notice and an edit undone in time sends none. When the date it touches starts within 3 hours, it waits only a minute, and it isn't sent once that date has started (for a move, once the new time has started).
+
+  - **Only events tagged** narrows the rule to events with one of a few tags (any case), and **Send to** picks topics instead of the event's own (Events and its calendar), for example classes tagged "Class" in a shared rooms calendar, sent to a site topic `classes`.
+  - Every way of changing an event counts: the editor's Update, dragging on the schedule, cancelling a date, the API and agents. Other edits, restoring a date, un-cancelling, past events and events in private or unlisted calendars never notify.
+  - No double push: the change notice is skipped when an announcement whose button opens the same event went up with a push in the last hour, and the announcement composer says when an automatic change notice for the event it links to went out in the last 2 hours.
+  - While the rule sends to the event's own topics, the Events topic is called "Events and changes" in apps (also in Spanish, French, German and Portuguese).
+  - Taps open the event as before; `data.change` says what changed and `source` is `change`. Migration 59.
+
+- 6b83f1e: The website's built-in words now follow the page's language, in English, Spanish, French, German and Portuguese (other languages stay in English). On `/es` pages, and on a site whose main language is Spanish, these were still in English: the live bar, header marker and floating player; the live video card, including its times ("empezó hace 5 min", "en 3 h") and the updates it shows while the page is open; the skip link; the menu and dark-mode buttons; the footer's Read and Site columns; the automatic Privacy, Terms, Search, Home and Links labels; the code copy button; and the gallery's close button. Screen-reader labels are translated too. Live times use the page's language. Search also comes in French, German and Portuguese now. Menu items you created keep their own labels.
+
 ## 0.3.34
 
 ### Patch Changes

package/cli/migrations.generated.mjs

@@ -1105,7 +1105,13 @@ var MIGRATIONS = [
     ...contentVersionTriggers("settings", [...CONTENT_VERSION_COLUMNS.settings, "links_verified", "links_avatar_shape", "links_avatar_fit", "links_avatar_scale", "legal"])
   ] },
   // announcements show on public pages, the banner and the app API
-  { version: 58, statements: [...ANNOUNCEMENT_TABLE, ...contentVersionTriggers("announcements", ANNOUNCEMENT_VISIBLE_COLUMNS)] }
+  { version: 58, statements: [...ANNOUNCEMENT_TABLE, ...contentVersionTriggers("announcements", ANNOUNCEMENT_VISIBLE_COLUMNS)] },
+  // event-change notices (PushAuto.eventChanges) wait in push_queue until the
+  // edits settle: payload = the schedule people last knew, due_at = send time
+  { version: 59, statements: [
+    `ALTER TABLE push_queue ADD COLUMN payload TEXT`,
+    `ALTER TABLE push_queue ADD COLUMN due_at INTEGER`
+  ] }
 ];
 var CURRENT_CONTENT_VERSION_COLUMNS = {
   ...CONTENT_VERSION_COLUMNS,

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)
@@ -272,8 +275,8 @@ keyed by `locale`.
 ## Push notifications
 
 Optional; the owner sends them from **Admin → Mobile app** (manual messages
-plus automatic ones: new post, new event, "starting soon", "we're live"). The
-app only registers and chooses topics; it never sends.
+plus automatic ones: new post, new event, "starting soon", event changes,
+"we're live"). The app only registers and chooses topics; it never sends.
 
 1. Site: `acms({ mobile: { push: true } })` in `astro.config.mjs` (off by
    default; `/api/v1/devices` and `/api/v1/push/topics` 404 until then).

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,270 @@
+import { 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, answerProblems, seatChoices, useCancelBooking, useGuest, useManagedBooking, useRsvp, useRsvpStatus, useSite, 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.
+
+// 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 problemText = (f: Pick<FormField, 'type'>, problem: 'required' | 'invalid') => problem === 'required' ? 'Please answer this.'
+  : f.type === 'email' ? 'Enter an email address.' : f.type === 'number' ? 'Enter a number.' : f.type === 'phone' ? 'Enter a phone number.'
+  : f.type === 'date' ? 'Use YYYY-MM-DD, for example 2026-10-05.' : 'Check this answer.';
+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 ?? '');
+};
+const seatsText = (n: number) => (n === 1 ? '1 seat' : `${n} seats`);
+
+export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
+  const t = useTheme();
+  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('Your RSVP is cancelled.');
+  }, [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 going = (
+    <Text style={t.styles.text.body}>
+      <Text style={{ fontWeight: '700' }}>{s.going}</Text> going
+      {s.left !== null && <> · <Text style={{ fontWeight: '700' }}>{s.left}</Text> {s.left === 1 ? 'spot' : 'spots'} 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}>Your RSVP</Text>
+      <Text style={t.styles.text.muted}>Couldn’t load it right now.</Text>
+      <Button label="Try again" 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 ? 'Your RSVP' : state === 'confirmed' ? 'Confirmed' : 'Request sent'}</Text>
+        <Text style={[t.styles.text.label, { color: t.colors.ink }]}>
+          {seatsText(mine?.booking.seats ?? made!.seats)} · {state === 'confirmed' ? 'Confirmed' : state === 'pending' ? 'Waiting for approval' : 'Not confirmed'}
+        </Text>
+        <Text style={t.styles.text.body}>
+          {state === 'confirmed' ? thanks || `A confirmation is on its way to ${who}.`
+            : state === 'pending' ? `We’ll email ${who} once it’s approved.` : 'Sorry, the organiser couldn’t confirm it.'}
+        </Text>
+        {state === 'declined' && <Button label="RSVP again" 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}>Cancel your RSVP for {seatsText(mine!.booking.seats)}?</Text>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
+              <Button label={cancel.isPending ? 'Cancelling…' : 'Yes, cancel it'} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
+              <Button label="Keep it" variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
+            </View>
+          </View>
+        ) : <Button label="Cancel my RSVP" variant="outline" onPress={() => setConfirming(true)} />)}
+        {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? 'Check your connection and try again.' : cancel.error.message}</Text>}
+        {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>The confirmation email has a link to change or cancel it.</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' ? 'Full' : s.reason === 'cancelled' ? 'This date is cancelled' : 'RSVPs are closed'}</Text>
+      {s.reason === 'full' ? going : <Text style={t.styles.text.muted}>{s.reason === 'cancelled' ? 'Nobody needs to RSVP for it.' : 'This date has already happened.'}</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() ? 'Add your name.' : '';
+  const emailProblem = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()) ? 'Add a valid email address.' : '';
+  // 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="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] ? problemText(f, problems[f.id]) : '';
+    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 ? 'Other' : o}</Text>
+              </Pressable>
+            ))}
+          </View>
+          {isOn(OTHER) && (
+            <TextInput value={others[f.id] ?? ''} onChangeText={(v) => setOthers((x) => ({ ...x, [f.id]: v }))} placeholder="Other" accessibilityLabel={`${f.label}: other`}
+              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' ? 'YYYY-MM-DD' : 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 || 'Save your seat'}</Text>
+        {going}
+        {!!notice && <Text style={t.styles.text.muted}>{notice}</Text>}
+        {!!form?.intro && <Text style={t.styles.text.muted}>{form.intro}</Text>}
+      </View>
+      {text('Your name', name, setName, { required: true, auto: 'name', problem: tried ? nameProblem : '' })}
+      {text('Email', email, setEmail, { required: true, keyboard: 'email-address', auto: 'email', problem: tried ? emailProblem : '' })}
+      {askPhone && text('Phone (optional)', phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+      {s.maxSeats > 1 && (
+        <View style={{ gap: 6 }}>
+          {label('Seats', 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' }]}>{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' }]}>That didn’t go through.</Text>
+          <Text style={t.styles.text.muted}>
+            {isAcmsError(error) && error.status === 0 ? 'Check your connection and try again. You won’t be registered twice.' : error.message}
+          </Text>
+        </View>
+      )}
+      {tried && (nameProblem || emailProblem || Object.keys(problems).length > 0) && <Text style={errorText}>Check the answers marked above.</Text>}
+      <Button label={rsvp.isPending ? 'Sending…' : form?.submitLabel || (s.autoConfirm ? 'Confirm my seat' : 'Request a seat')} disabled={rsvp.isPending} onPress={submit} />
+      <Text style={t.styles.text.small}>Your details go only to the organiser of this event.</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"
   ]
 }