@acms-subir/core 0.3.3-next.20260929113209 → 0.3.3

package/mobile-template/editor/lib/format.ts

@@ -0,0 +1,24 @@
+// Dates for staff screens, in the device's language and time zone.
+export function shortDate(iso: string | null | undefined, locale?: string): string {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '';
+  const sameYear = d.getFullYear() === new Date().getFullYear();
+  return d.toLocaleDateString(locale, { month: 'short', day: 'numeric', ...(sameYear ? {} : { year: 'numeric' }) });
+}
+export function dateTime(iso: string | null | undefined, locale?: string): string {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleString(locale, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+/** "just now", "5 min ago", "3 h ago", else a short date */
+export function ago(iso: string | null | undefined, now = Date.now()): string {
+  if (!iso) return '';
+  const ms = now - new Date(iso).getTime();
+  if (!Number.isFinite(ms)) return '';
+  if (ms < 60_000) return 'just now';
+  if (ms < 3_600_000) return `${Math.floor(ms / 60_000)} min ago`;
+  if (ms < 86_400_000) return `${Math.floor(ms / 3_600_000)} h ago`;
+  return shortDate(iso);
+}

package/mobile-template/editor/lib/tools.ts

@@ -0,0 +1,16 @@
+// Screens the app offers on Home. Each recipe adds one file to tools/
+// (e.g. tools/content.ts) exporting { title, description, href, order }, so
+// Home lists it without you editing this file. Add your own the same way.
+export interface Tool { title: string; description: string; href: string; order?: number }
+
+// require.context is Metro's static folder import (enabled with expo-router)
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const context = require.context('../tools', false, /\.tsx?$/);
+
+export const tools: (Tool & { name: string })[] = context.keys()
+  .map((key: string) => ({ name: key.replace(/^\.\/|\.tsx?$/g, ''), ...(context(key).default as Tool) }))
+  .filter((t: Tool) => t && typeof t.href === 'string')
+  .sort((a: Tool, b: Tool) => (a.order ?? 50) - (b.order ?? 50) || a.title.localeCompare(b.title));
+
+export const hasTool = (name: string) => tools.some((t) => t.name === name);

package/mobile-template/editor/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "__ACMS_APP_SLUG__",
+  "version": "1.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "acms": { "app": "editor", "template": 1 },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "typecheck": "tsc --noEmit",
+    "doctor": "npx expo-doctor"
+  },
+  "dependencies": {
+    "@acms-subir/client": "^0.1.0",
+    "@acms-subir/native": "^0.1.0",
+    "@tanstack/react-query": "^5.104.0",
+    "expo": "~57.0.26",
+    "expo-constants": "~57.0.20",
+    "expo-crypto": "~57.0.3",
+    "expo-device": "~57.0.2",
+    "expo-linking": "~57.0.11",
+    "expo-router": "~57.0.24",
+    "expo-secure-store": "~57.0.4",
+    "expo-status-bar": "~57.0.1",
+    "expo-system-ui": "~57.0.4",
+    "expo-web-browser": "~57.0.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
+    "react-native-web": "~0.21.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "typescript": "~6.0.3"
+  }
+}

package/mobile-template/editor/tools/README.md

@@ -0,0 +1,2 @@
+Each file here adds a row to Home: `export default { title, description, href, order }`.
+Recipes (`npx acms mobile recipe add editor-content`, …) drop their file in.

package/mobile-template/editor/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

package/mobile-template/recipes/booking/files/app/book/[resource].tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
+import { Stack, router, useLocalSearchParams } from 'expo-router';
+import { ErrorView, useAvailability, useLayout, useLocale, useResources, useTheme } from '@acms-subir/native';
+
+// Open slots for one booking link over the next two weeks.
+export default function SlotsScreen() {
+  const t = useTheme();
+  const { locale } = useLocale();
+  const { gutter } = useLayout();
+  const { resource, link } = useLocalSearchParams<{ resource: string; link: string }>();
+  const resources = useResources();
+  const r = resources.data?.resources.find((x) => x.slug === resource);
+  const l = r?.links.find((x) => x.slug === link);
+  const [minutes, setMinutes] = useState<number | undefined>();
+  const length = minutes ?? l?.lengths[0];
+  const slots = useAvailability(resource && link ? { resource, link, days: 14, minutes: length } : null);
+  if (slots.error && !slots.data) return <ErrorView error={slots.error} retry={() => slots.refetch()} />;
+  const tz = slots.data?.timezone;
+  const day = (date: string) => new Date(`${date}T12:00:00Z`).toLocaleDateString(locale, { weekday: 'long', month: 'short', day: 'numeric', timeZone: 'UTC' });
+  const time = (iso: string) => new Date(iso).toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit', timeZone: tz });
+  const days = (slots.data?.days ?? []).filter((d) => d.slots.length);
+  return (
+    <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 20, width: '100%', maxWidth: 840, alignSelf: 'center' }}>
+      <Stack.Screen options={{ title: l?.name ?? 'Choose a time' }} />
+      {r && <Text style={t.styles.text.muted}>{r.name}{tz ? ` · times in ${tz}` : ''}</Text>}
+      {!!l && l.lengths.length > 1 && (
+        <View style={{ flexDirection: 'row', gap: 16 }} accessibilityRole="tablist">
+          {l.lengths.map((m) => (
+            <Pressable key={m} accessibilityRole="tab" accessibilityState={{ selected: m === length }} onPress={() => setMinutes(m)} hitSlop={8}>
+              <Text style={[t.styles.text.body, { color: m === length ? t.colors.ink : t.colors.muted, fontWeight: m === length ? '700' : '400' }]}>{m} min</Text>
+            </Pressable>
+          ))}
+        </View>
+      )}
+      {slots.isPending && <ActivityIndicator color={t.colors.accent} />}
+      {!slots.isPending && !days.length && <Text style={t.styles.text.muted}>No open times in the next two weeks.</Text>}
+      {days.map((d) => (
+        <View key={d.date} style={{ gap: 10 }}>
+          <Text style={t.styles.text.heading}>{day(d.date)}</Text>
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            {d.slots.map((s) => (
+              <Pressable
+                key={s.start}
+                accessibilityRole="button"
+                onPress={() => router.push({ pathname: '/book/details', params: { resource, link, start: s.start, end: s.end, minutes: String(s.minutes) } })}
+                style={({ pressed }) => ({ minWidth: 96, paddingVertical: 10, paddingHorizontal: 12, borderRadius: Math.min(t.radius, 10), borderWidth: 1, borderColor: t.colors.line, backgroundColor: pressed ? t.colors.soft : t.colors.panel, alignItems: 'center' })}
+              >
+                <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{time(s.start)}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      ))}
+    </ScrollView>
+  );
+}

package/mobile-template/recipes/booking/files/app/book/details.tsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { KeyboardAvoidingView, Platform, Pressable, ScrollView, Switch, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
+import { Stack, router, useLocalSearchParams } from 'expo-router';
+import * as Crypto from 'expo-crypto';
+import { isAcmsError } from '@acms-subir/client';
+import { Button, formatEventDate, useBooking, useLayout, useLocale, useResources, useTheme } from '@acms-subir/native';
+
+// Details form and confirmation. useBooking keeps one idempotency key per
+// booking intent, so pressing "Book" again after a timeout can't double-book.
+export default function DetailsScreen() {
+  const t = useTheme();
+  const { locale } = useLocale();
+  const { gutter } = useLayout();
+  const p = useLocalSearchParams<{ resource: string; link: string; start: string; end: string; minutes: string }>();
+  const r = useResources().data?.resources.find((x) => x.slug === p.resource);
+  const l = r?.links.find((x) => x.slug === p.link);
+  const booking = useBooking({ createKey: Crypto.randomUUID });
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const when = formatEventDate({ start: p.start, end: p.end, timezone: r?.timezone }, locale);
+
+  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 field = (label: string, value: string, onChange: (v: string) => void, opts: { keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel' } = {}) => (
+    <View key={label} style={{ gap: 6 }}>
+      <Text style={t.styles.text.label}>{label}</Text>
+      <TextInput value={value} onChangeText={onChange} keyboardType={opts.keyboard} multiline={opts.multiline} autoComplete={opts.auto}
+        autoCapitalize={opts.auto === 'email' ? 'none' : 'sentences'} placeholderTextColor={t.colors.muted}
+        style={[input, opts.multiline && { minHeight: 96, textAlignVertical: 'top' }]} />
+    </View>
+  );
+
+  if (booking.data) {
+    const b = booking.data.booking;
+    return (
+      <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 12, width: '100%', maxWidth: 640, alignSelf: 'center' }}>
+        <Stack.Screen options={{ title: 'Booked', headerBackVisible: false }} />
+        <Text accessibilityRole="header" style={t.styles.text.display}>{b.status === 'confirmed' ? 'You’re booked' : 'Request sent'}</Text>
+        <Text style={t.styles.text.body}>{l?.name} · {when}</Text>
+        <Text style={t.styles.text.muted}>
+          {b.status === 'confirmed' ? `A confirmation is on its way to ${b.email}.` : `We’ll email ${b.email} once it’s confirmed.`}
+        </Text>
+        <Button label="Done" onPress={() => { booking.reset(); router.dismissAll(); }} />
+      </ScrollView>
+    );
+  }
+
+  const error = booking.error;
+  const submit = () => booking.mutate({ resource: p.resource, link: p.link, start: p.start, minutes: Number(p.minutes) || undefined, name: name.trim(), email: email.trim(), ...(phone.trim() ? { phone: phone.trim() } : {}), answers });
+  return (
+    <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: 640, alignSelf: 'center' }}>
+        <Stack.Screen options={{ title: 'Your details' }} />
+        <View style={[t.styles.card, { gap: 2 }]}>
+          <Text style={t.styles.text.heading}>{l?.name ?? 'Booking'}</Text>
+          <Text style={t.styles.text.muted}>{r?.name} · {when}</Text>
+        </View>
+        {field('Name', name, setName, { auto: 'name' })}
+        {field('Email', email, setEmail, { keyboard: 'email-address', auto: 'email' })}
+        {l?.askPhone && field('Phone', phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+        {l?.questions.map((q) => {
+          const label = q.label + (q.required ? '' : ' (optional)');
+          const set = (v: string) => setAnswers((a) => ({ ...a, [q.id]: v }));
+          if (q.type === 'checkbox') return (
+            <View key={q.id} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+              <Text style={[t.styles.text.body, { flex: 1 }]}>{label}</Text>
+              <Switch value={answers[q.id] === 'yes'} onValueChange={(v) => set(v ? 'yes' : '')} trackColor={{ true: t.colors.accent }} />
+            </View>
+          );
+          if (q.type === 'select') return (
+            <View key={q.id} style={{ gap: 6 }}>
+              <Text style={t.styles.text.label}>{label}</Text>
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                {q.options.map((o) => {
+                  const on = answers[q.id] === o;
+                  return (
+                    <Pressable key={o} accessibilityRole="radio" accessibilityState={{ checked: on }} onPress={() => set(o)}
+                      style={{ 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 }}>
+                      <Text style={[t.styles.text.body, on && { fontWeight: '600' }]}>{o}</Text>
+                    </Pressable>
+                  );
+                })}
+              </View>
+            </View>
+          );
+          return field(label, answers[q.id] ?? '', set, {
+            multiline: q.type === 'textarea',
+            keyboard: q.type === 'email' ? 'email-address' : q.type === 'phone' ? 'phone-pad' : q.type === 'number' ? 'numeric' : undefined,
+          });
+        })}
+        {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 booked twice.' : error.message}
+            </Text>
+          </View>
+        )}
+        <Button label={booking.isPending ? 'Booking…' : 'Book'} disabled={booking.isPending || !name.trim() || !email.trim()} onPress={submit} />
+        <Text style={t.styles.text.small}>Your details go only to the organiser of this booking.</Text>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

package/mobile-template/recipes/booking/files/app/book/index.tsx

@@ -0,0 +1,38 @@
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
+import { Stack, router } from 'expo-router';
+import { ErrorView, useLayout, useResources, useTheme } from '@acms-subir/native';
+
+// Everything the site lets people book, grouped by resource.
+export default function BookScreen() {
+  const t = useTheme();
+  const { gutter, wide } = useLayout();
+  const { data, error, isPending, refetch } = useResources();
+  if (error && !data) return <ErrorView error={error} retry={refetch} />;
+  const resources = (data?.resources ?? []).filter((r) => r.links.length);
+  return (
+    <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 1040, alignSelf: 'center' }}>
+      <Stack.Screen options={{ title: 'Book' }} />
+      {isPending && <ActivityIndicator color={t.colors.accent} />}
+      {!isPending && !resources.length && <Text style={t.styles.text.muted}>Nothing is open for booking right now.</Text>}
+      <View style={{ flexDirection: wide ? 'row' : 'column', flexWrap: 'wrap', gap: 16 }}>
+        {resources.map((r) => (
+          <View key={r.id} style={[t.styles.card, { gap: 10, width: wide ? '48.5%' : '100%' }]}>
+            <Text style={t.styles.text.heading}>{r.name}</Text>
+            {!!r.description && <Text style={t.styles.text.muted}>{r.description}</Text>}
+            {r.links.map((l) => (
+              <Pressable
+                key={l.id}
+                accessibilityRole="button"
+                onPress={() => router.push({ pathname: '/book/[resource]', params: { resource: r.slug, link: l.slug } })}
+                style={({ pressed }) => ({ borderColor: t.colors.line, borderWidth: 1, borderRadius: Math.min(t.radius, 10), padding: 12, gap: 2, opacity: pressed ? 0.85 : 1 })}
+              >
+                <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{l.name}</Text>
+                <Text style={t.styles.text.small}>{l.lengths.length ? l.lengths.map((m) => `${m} min`).join(' · ') : l.mode}</Text>
+              </Pressable>
+            ))}
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,17 @@
+{
+  "kind": "client",
+  "title": "Booking",
+  "description": "Resources and booking links → open slots → details form → confirmation, with retry-safe submits.",
+  "packages": [
+    "expo-crypto"
+  ],
+  "routes": [
+    "/book",
+    "/book/[resource]",
+    "/book/details"
+  ],
+  "next": [
+    "Link to it from a screen: <Link href=\"/book\">Book</Link> (expo-router)",
+    "Bookings must be enabled on the site (Admin → Bookings) with at least one public booking link."
+  ]
+}

package/mobile-template/recipes/editor-bookings/files/app/bookings/index.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { ActivityIndicator, FlatList, RefreshControl, ScrollView, Text, View } from 'react-native';
+import { Stack } from 'expo-router';
+import type { EditorBooking } from '@acms-subir/client';
+import { Card, EditorButton, EditorInput, ListRow, Notice, Sheet, StatusText, errorMessage, useBookingsInbox, useEditorTheme, useMe } from '@acms-subir/native/editor';
+import { SplitView, useWide } from '../../components/Screen';
+import { TextTabs } from '../../components/TextTabs';
+import { dateTime } from '../../lib/format';
+
+type Filter = 'pending' | 'active' | 'confirmed' | 'cancelled' | 'all';
+type Action = 'approve' | 'decline' | 'cancel';
+
+export default function BookingsScreen() {
+  const t = useEditorTheme();
+  const { wide, gutter } = useWide();
+  const me = useMe();
+  const [filter, setFilter] = useState<Filter>('active');
+  const inbox = useBookingsInbox({ status: filter });
+  const [selected, setSelected] = useState<string | null>(null);
+  const [asking, setAsking] = useState<{ booking: EditorBooking; action: Action } | null>(null);
+  const current = inbox.items.find((b) => b.id === selected) ?? null;
+  if (me.isSuccess && !me.data.permissions.bookings) return <View style={{ flex: 1, padding: 16, backgroundColor: t.colors.panel }}><Stack.Screen options={{ title: 'Bookings' }} /><Notice>Bookings are off for this site.</Notice></View>;
+  const list = (
+    <FlatList
+      data={inbox.items}
+      keyExtractor={(b) => b.id}
+      contentContainerStyle={{ padding: gutter, gap: 2 }}
+      refreshControl={<RefreshControl refreshing={inbox.isRefetching && !inbox.isFetchingNextPage} onRefresh={() => inbox.refetch()} tintColor={t.colors.muted} />}
+      onEndReachedThreshold={0.4}
+      onEndReached={() => { if (inbox.hasNextPage && !inbox.isFetchingNextPage) void inbox.fetchNextPage(); }}
+      ListHeaderComponent={
+        <View style={{ gap: 8, marginBottom: 8 }}>
+          <TextTabs<Filter> accessibilityLabel="Show" value={filter} onChange={(f) => { setFilter(f); setSelected(null); }} options={[
+            { value: 'active', label: 'Inbox' }, { value: 'pending', label: 'Pending', count: inbox.pending || undefined }, { value: 'confirmed', label: 'Confirmed' },
+            { value: 'cancelled', label: 'Cancelled' }, { value: 'all', label: 'All' },
+          ]} />
+          {!!inbox.pending && filter === 'active' && <Text style={[t.text.meta, { color: t.colors.accentText }]}>{inbox.pending} waiting for an answer</Text>}
+        </View>
+      }
+      ListEmptyComponent={inbox.isPending ? <ActivityIndicator color={t.colors.muted} /> : inbox.error ? <Notice tone="error">{errorMessage(inbox.error)}</Notice> : <Notice>No bookings here.</Notice>}
+      renderItem={({ item }) => (
+        wide ? (
+          <ListRow title={item.name} selected={selected === item.id} onPress={() => setSelected(item.id)}
+            meta={<Text numberOfLines={1} style={t.text.meta}><StatusText status={item.status} />{`  ${dateTime(item.start)} · ${item.title}`}</Text>} />
+        ) : (
+          <BookingCard booking={item} expanded={selected === item.id} onToggle={() => setSelected(selected === item.id ? null : item.id)} onAct={(action) => setAsking({ booking: item, action })} acting={inbox.acting?.id === item.id} />
+        )
+      )}
+    />
+  );
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Bookings' }} />
+      <SplitView list={list} detail={current ? (
+        <ScrollView contentContainerStyle={{ padding: 24, maxWidth: 720 }}>
+          <BookingCard booking={current} expanded onAct={(action) => setAsking({ booking: current, action })} acting={inbox.acting?.id === current.id} />
+        </ScrollView>
+      ) : <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text style={t.text.meta}>Choose a booking on the left.</Text></View>} />
+      {asking && <AnswerSheet {...asking} onClose={() => setAsking(null)} onConfirm={async (message) => {
+        const { booking, action } = asking;
+        await (action === 'approve' ? inbox.approve(booking.id, message) : action === 'decline' ? inbox.decline(booking.id, message) : inbox.cancel(booking.id, message));
+        setAsking(null);
+      }} />}
+    </>
+  );
+}
+
+function BookingCard({ booking: b, expanded, onToggle, onAct, acting }: { booking: EditorBooking; expanded: boolean; onToggle?: () => void; onAct: (a: Action) => void; acting: boolean }) {
+  const t = useEditorTheme();
+  const upcoming = new Date(b.end).getTime() > Date.now();
+  return (
+    <Card style={{ marginBottom: 8 }}>
+      <ListRow title={b.name} onPress={onToggle} accessibilityLabel={`${b.name}, ${b.status}, ${dateTime(b.start)}`}
+        meta={<Text numberOfLines={1} style={t.text.meta}><StatusText status={b.status} />{`  ${dateTime(b.start)}`}</Text>}
+        right={b.seats > 1 ? <Text style={t.text.meta}>{b.seats} seats</Text> : undefined} />
+      {expanded && (
+        <View style={{ paddingHorizontal: 14, paddingBottom: 14, gap: 8 }}>
+          <Text style={t.text.body}>{b.title}{b.kind === 'rsvp' ? ' (RSVP)' : ''}</Text>
+          <Text selectable style={t.text.body}>{b.email}{b.phone ? `\n${b.phone}` : ''}</Text>
+          {Object.entries(b.answers).map(([q, a]) => <Text key={q} style={t.text.meta}><Text style={{ fontWeight: '600', color: t.colors.text2 }}>{q}: </Text>{a}</Text>)}
+          {!!b.notes && <Text style={t.text.meta}>Notes: {b.notes}</Text>}
+          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
+            {b.status === 'pending' && <EditorButton variant="primary" label="Approve" busy={acting} onPress={() => onAct('approve')} />}
+            {b.status === 'pending' && <EditorButton label="Decline" disabled={acting} onPress={() => onAct('decline')} />}
+            {b.status === 'confirmed' && upcoming && <EditorButton variant="danger" label="Cancel booking" disabled={acting} onPress={() => onAct('cancel')} />}
+          </View>
+        </View>
+      )}
+    </Card>
+  );
+}
+
+function AnswerSheet({ booking, action, onClose, onConfirm }: { booking: EditorBooking; action: Action; onClose: () => void; onConfirm: (message?: string) => Promise<void> }) {
+  const t = useEditorTheme();
+  const [message, setMessage] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const verb = action === 'approve' ? 'Approve' : action === 'decline' ? 'Decline' : 'Cancel booking';
+  return (
+    <Sheet visible onClose={onClose} title={`${verb}: ${booking.name}`} footer={
+      <EditorButton variant={action === 'approve' ? 'primary' : 'danger'} label={verb} busy={busy} onPress={async () => {
+        setBusy(true); setError(null);
+        try { await onConfirm(message.trim() || undefined); } catch (e) { setError(errorMessage(e)); } finally { setBusy(false); }
+      }} />
+    }>
+      <Text style={t.text.body}>{booking.title} · {dateTime(booking.start)}</Text>
+      <Text style={t.text.label}>Message to {booking.name} (optional)</Text>
+      <EditorInput multiline value={message} onChangeText={setMessage} placeholder={action === 'approve' ? 'See you then!' : 'Sorry, that time doesn’t work.'} accessibilityLabel="Message" maxLength={1000} />
+      <Text style={t.text.meta}>{booking.name} gets an email{action === 'approve' ? ' confirming the booking' : ''}.</Text>
+      {!!error && <Notice tone="error">{error}</Notice>}
+    </Sheet>
+  );
+}

package/mobile-template/recipes/editor-bookings/files/tools/bookings.ts

@@ -0,0 +1 @@
+export default { title: 'Bookings', description: 'Approve and answer requests', href: '/bookings', order: 60 };

package/mobile-template/recipes/editor-bookings/recipe.json

@@ -0,0 +1,8 @@
+{
+  "kind": "editor",
+  "title": "Bookings",
+  "description": "The bookings inbox: pending requests first, then upcoming; approve, decline or cancel with an optional message to the guest. Tablets show list + detail.",
+  "packages": [],
+  "routes": ["/bookings"],
+  "next": ["It appears on Home (tools/bookings.ts). Bookings must be on for the site (calendar + booking links)."]
+}

package/mobile-template/recipes/editor-content/files/app/content/[kind]/[id].tsx

@@ -0,0 +1,13 @@
+import { Stack, useLocalSearchParams } from 'expo-router';
+import type { DocKind } from '@acms-subir/client';
+import { DocumentDetail } from '../../../components/DocumentDetail';
+
+export default function ContentDetailScreen() {
+  const { kind, id } = useLocalSearchParams<{ kind: DocKind; id: string }>();
+  return (
+    <>
+      <Stack.Screen options={{ title: kind === 'page' ? 'Page' : kind === 'event' ? 'Event' : 'Post' }} />
+      <DocumentDetail kind={kind} id={id} />
+    </>
+  );
+}

package/mobile-template/recipes/editor-content/files/app/content/index.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { ActivityIndicator, FlatList, RefreshControl, Text, View } from 'react-native';
+import { Stack, router } from 'expo-router';
+import type { DocKind } from '@acms-subir/client';
+import { EditorButton, EditorInput, ListRow, Notice, StatusText, errorMessage, useDocuments, useEditorTheme, useMe } from '@acms-subir/native/editor';
+import { HeaderActions, SplitView, useWide } from '../../components/Screen';
+import { TextTabs } from '../../components/TextTabs';
+import { DocumentDetail } from '../../components/DocumentDetail';
+import { hasTool } from '../../lib/tools';
+import { ago } from '../../lib/format';
+
+type Status = 'all' | 'draft' | 'scheduled' | 'published' | 'changed';
+
+export default function ContentScreen() {
+  const t = useEditorTheme();
+  const { wide, gutter } = useWide();
+  const me = useMe();
+  const [kind, setKind] = useState<DocKind>('post');
+  const [collection, setCollection] = useState<string>('');
+  const [status, setStatus] = useState<Status>('all');
+  const [q, setQ] = useState('');
+  const [selected, setSelected] = useState<{ kind: DocKind; id: string } | null>(null);
+  const collections = me.data?.features.collections ?? [];
+  const docs = useDocuments({ kind, status: status === 'all' ? undefined : status, q: q.trim() || undefined, collection: kind === 'post' && collection ? collection : undefined, limit: 30 });
+  const kinds: { value: DocKind; label: string }[] = [
+    { value: 'post', label: collections.length === 1 ? collections[0].plural : 'Posts' },
+    { value: 'page', label: 'Pages' },
+    ...(me.data?.features.calendar ? [{ value: 'event' as const, label: 'Events' }] : []),
+  ];
+  const open = (d: { kind: DocKind; id: string }) => (wide ? setSelected(d) : router.push({ pathname: '/content/[kind]/[id]', params: d }));
+
+  const list = (
+    <FlatList
+      data={docs.items}
+      keyExtractor={(d) => d.id}
+      contentContainerStyle={{ padding: gutter, gap: 2 }}
+      keyboardShouldPersistTaps="handled"
+      refreshControl={<RefreshControl refreshing={docs.isRefetching && !docs.isFetchingNextPage} onRefresh={() => docs.refetch()} tintColor={t.colors.muted} />}
+      onEndReachedThreshold={0.4}
+      onEndReached={() => { if (docs.hasNextPage && !docs.isFetchingNextPage) void docs.fetchNextPage(); }}
+      ListHeaderComponent={
+        <View style={{ gap: 10, marginBottom: 8 }}>
+          <TextTabs accessibilityLabel="Kind" value={kind} options={kinds} onChange={(k) => { setKind(k); setSelected(null); }} />
+          {kind === 'post' && collections.length > 1 && (
+            <TextTabs accessibilityLabel="Collection" value={collection} onChange={setCollection}
+              options={[{ value: '', label: 'All collections' }, ...collections.map((c) => ({ value: c.key, label: c.plural }))]} />
+          )}
+          <TextTabs<Status> accessibilityLabel="Status" value={status} onChange={setStatus} options={[
+            { value: 'all', label: 'All' }, { value: 'draft', label: 'Drafts' }, { value: 'scheduled', label: 'Scheduled' },
+            { value: 'published', label: 'Published' }, { value: 'changed', label: 'Changed' },
+          ]} />
+          <EditorInput placeholder="Search titles" value={q} onChangeText={setQ} accessibilityLabel="Search" autoCapitalize="none" returnKeyType="search" clearButtonMode="while-editing" />
+          {docs.isSuccess && <Text style={t.text.meta}>{docs.total} {docs.total === 1 ? 'item' : 'items'}</Text>}
+        </View>
+      }
+      ListEmptyComponent={docs.isPending ? <ActivityIndicator color={t.colors.muted} /> : docs.error ? <Notice tone="error">{errorMessage(docs.error)}</Notice> : <Notice>Nothing here yet.</Notice>}
+      ListFooterComponent={docs.isFetchingNextPage ? <ActivityIndicator style={{ margin: 16 }} color={t.colors.muted} /> : null}
+      renderItem={({ item }) => (
+        <ListRow
+          title={item.title || 'Untitled'}
+          selected={wide && selected?.id === item.id}
+          onPress={() => open({ kind: item.kind, id: item.id })}
+          meta={<Text numberOfLines={1} style={t.text.meta}><StatusText status={item.status} suffix={item.hasChanges ? 'edited' : undefined} />{`  ${ago(item.updatedAt)}`}</Text>}
+        />
+      )}
+    />
+  );
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Content', headerRight: hasTool('writer') ? () => <HeaderActions><EditorButton label="New" variant="primary" compact onPress={() => router.push('/write/new')} /></HeaderActions> : undefined }} />
+      <SplitView list={list} detail={selected ? <DocumentDetail key={selected.id} kind={selected.kind} id={selected.id} /> : (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 }}><Text style={t.text.meta}>Choose something on the left.</Text></View>
+      )} />
+    </>
+  );
+}

package/mobile-template/recipes/editor-content/files/components/DocumentDetail.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { ActivityIndicator, Linking, Text, View } from 'react-native';
+import { router } from 'expo-router';
+import type { DocKind } from '@acms-subir/client';
+import { Card, EditorButton, htmlToText, ListRow, Notice, StatusText, errorMessage, isConflict, resolveUrl, useDocument, useEditorContext, useEditorTheme, usePublish } from '@acms-subir/native/editor';
+import { Screen } from './Screen';
+import { hasTool } from '../lib/tools';
+import { dateTime } from '../lib/format';
+
+/** a document's status, words and publish actions (the content recipe's detail) */
+export function DocumentDetail({ kind, id }: { kind: DocKind; id: string }) {
+  const t = useEditorTheme();
+  const { baseUrl } = useEditorContext();
+  const doc = useDocument(kind, id);
+  const pub = usePublish(kind, id);
+  const [message, setMessage] = useState<string | null>(null);
+  const d = doc.document;
+  if (doc.isPending) return <Screen><ActivityIndicator color={t.colors.muted} /></Screen>;
+  if (!d) return <Screen><Notice tone="error">{errorMessage(doc.error) || 'Not found.'}</Notice></Screen>;
+  const live = d.status === 'published' || d.status === 'scheduled';
+  const run = async (what: () => Promise<unknown>, done: string) => {
+    setMessage(null);
+    try { await what(); setMessage(done); } catch (e) { setMessage(isConflict(e) ? 'This changed on the site. It has been reloaded; try again.' : errorMessage(e)); }
+  };
+  const preview = htmlToText(d.bodyHtml).slice(0, 600);
+  return (
+    <Screen refreshing={doc.isRefetching} onRefresh={() => doc.refetch()}>
+      <View style={{ gap: 6 }}>
+        <Text accessibilityRole="header" style={t.text.screenTitle}>{d.title || 'Untitled'}</Text>
+        <Text style={t.text.meta}>
+          <StatusText status={d.status} suffix={d.status === 'scheduled' && d.scheduledAt ? dateTime(d.scheduledAt) : d.hasChanges ? 'unpublished edits' : undefined} />
+          {`  Updated ${dateTime(d.updatedAt)}`}
+        </Text>
+      </View>
+      {!!message && <Notice tone={/couldn|changed|error|failed|isn/i.test(message) ? 'warn' : 'success'}>{message}</Notice>}
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+        {hasTool('writer') && <EditorButton label="Edit" variant="primary" onPress={() => router.push({ pathname: '/write/[kind]/[id]', params: { kind, id } })} />}
+        {(!live || d.hasChanges) && d.status !== 'scheduled' && (
+          <EditorButton label={live ? 'Publish edits' : 'Publish'} busy={pub.action === 'publish'} disabled={pub.pending} variant={hasTool('writer') ? 'secondary' : 'primary'}
+            onPress={() => run(pub.publish, live ? 'Your edits are live.' : 'Published.')} />
+        )}
+        {d.hasChanges && live && <EditorButton label="Discard edits" busy={pub.action === 'discard'} disabled={pub.pending} onPress={() => run(pub.discard, 'Edits discarded.')} />}
+        {live && <EditorButton label="Unpublish" variant="danger" busy={pub.action === 'unpublish'} disabled={pub.pending} onPress={() => run(pub.unpublish, 'Unpublished. It is a draft again.')} />}
+      </View>
+      <Card>
+        <ListRow title="Address" meta={d.url} onPress={d.status === 'published' ? () => { const u = resolveUrl(d.url, baseUrl); if (u) void Linking.openURL(u); } : undefined} />
+        {!!d.excerpt && <ListRow title="Summary" meta={d.excerpt} />}
+        {kind === 'event' && d.event && <ListRow title="When" meta={`${d.event.allDay ? d.event.start.slice(0, 10) : dateTime(d.event.start)}${d.event.location.name ? ` · ${d.event.location.name}` : ''}`} />}
+        {d.tags.length > 0 && <ListRow title="Tags" meta={d.tags.join(', ')} />}
+        {d.languages.length > 0 && <ListRow title="Languages" meta={d.languages.join(', ')} />}
+      </Card>
+      {!!preview && <Text style={t.text.body} numberOfLines={14}>{preview}</Text>}
+    </Screen>
+  );
+}

package/mobile-template/recipes/editor-content/files/tools/content.ts

@@ -0,0 +1 @@
+export default { title: 'Content', description: 'Posts, pages and events', href: '/content', order: 10 };

package/mobile-template/recipes/editor-content/recipe.json

@@ -0,0 +1,8 @@
+{
+  "kind": "editor",
+  "title": "Content",
+  "description": "Posts, pages and events: kind and status filters, search, infinite scroll; publish, unpublish and discard staged edits. Tablets show list + detail side by side.",
+  "packages": [],
+  "routes": ["/content", "/content/[kind]/[id]"],
+  "next": ["It appears on Home (tools/content.ts). Add editor-writer to edit text from the detail screen."]
+}