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

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."]
+}

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

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { ActivityIndicator, FlatList, Image, Platform, Pressable, RefreshControl, Text, View } from 'react-native';
+import { Stack } from 'expo-router';
+import type { EditorMedia } from '@acms-subir/client';
+import { EditorButton, Notice, Sheet, errorMessage, resolveUrl, useEditorContext, useEditorTheme, useMedia } from '@acms-subir/native/editor';
+import { HeaderActions, useWide } from '../../components/Screen';
+import { TextTabs } from '../../components/TextTabs';
+import { shortDate } from '../../lib/format';
+
+type Kind = 'image' | 'document' | 'all';
+const size = (bytes: number) => (bytes > 1_000_000 ? `${(bytes / 1_000_000).toFixed(1)} MB` : `${Math.max(1, Math.round(bytes / 1000))} KB`);
+
+export default function MediaScreen() {
+  const t = useEditorTheme();
+  const { baseUrl } = useEditorContext();
+  const { width, gutter } = useWide();
+  const [kind, setKind] = useState<Kind>('image');
+  const media = useMedia({ type: kind === 'all' ? undefined : kind });
+  const [open, setOpen] = useState<EditorMedia | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const cols = Math.max(3, Math.min(8, Math.floor((width - gutter * 2) / 150)));
+  const cell = (Math.min(width, 1400) - gutter * 2 - (cols - 1) * 8) / cols;
+  const upload = async (source: 'library' | 'camera') => {
+    setError(null);
+    try { const m = await media.pickAndUpload({ source }); if (m) setOpen(m); }
+    catch (e) { setError(errorMessage(e)); }
+  };
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Media', headerRight: () => <HeaderActions><EditorButton compact variant="primary" label={media.uploading ? 'Uploading…' : 'Upload'} busy={media.uploading} onPress={() => { void upload('library'); }} /></HeaderActions> }} />
+      <FlatList
+        key={cols}
+        numColumns={cols}
+        data={media.items}
+        keyExtractor={(m) => m.id}
+        style={{ backgroundColor: t.colors.panel }}
+        contentContainerStyle={{ padding: gutter, gap: 8, maxWidth: 1400, width: '100%', alignSelf: 'center' }}
+        columnWrapperStyle={{ gap: 8 }}
+        refreshControl={<RefreshControl refreshing={media.isRefetching && !media.isFetchingNextPage} onRefresh={() => media.refetch()} tintColor={t.colors.muted} />}
+        onEndReachedThreshold={0.5}
+        onEndReached={() => { if (media.hasNextPage && !media.isFetchingNextPage) void media.fetchNextPage(); }}
+        ListHeaderComponent={
+          <View style={{ gap: 8, marginBottom: 8 }}>
+            <TextTabs<Kind> accessibilityLabel="Type" value={kind} onChange={setKind} options={[{ value: 'image', label: 'Images' }, { value: 'document', label: 'Documents' }, { value: 'all', label: 'All' }]} />
+            {Platform.OS !== 'web' && <EditorButton label="Take a photo" onPress={() => { void upload('camera'); }} style={{ alignSelf: 'flex-start' }} compact />}
+            {!!error && <Notice tone="error">{error}</Notice>}
+          </View>
+        }
+        ListEmptyComponent={media.isPending ? <ActivityIndicator color={t.colors.muted} /> : media.error ? <Notice tone="error">{errorMessage(media.error)}</Notice> : <Notice>No files yet. Upload the first one.</Notice>}
+        ListFooterComponent={media.isFetchingNextPage ? <ActivityIndicator style={{ margin: 16 }} color={t.colors.muted} /> : null}
+        renderItem={({ item }) => {
+          const thumb = item.variants.find((v) => v.width >= 300)?.url ?? item.url;
+          const image = item.mime.startsWith('image/');
+          return (
+            <Pressable accessibilityRole="button" accessibilityLabel={item.alt || item.filename} onPress={() => setOpen(item)}
+              style={({ pressed }) => ({ width: cell, height: cell, borderRadius: t.radius.control, overflow: 'hidden', backgroundColor: t.colors.sel, opacity: pressed ? 0.85 : 1, alignItems: 'center', justifyContent: 'center' })}>
+              {image ? <Image source={{ uri: resolveUrl(thumb, baseUrl) }} style={{ width: '100%', height: '100%', opacity: t.scheme === 'dark' ? 0.85 : 1 }} resizeMode="cover" />
+                : <Text style={[t.text.meta, { padding: 8, textAlign: 'center' }]} numberOfLines={3}>{item.filename}</Text>}
+            </Pressable>
+          );
+        }}
+      />
+      {open && (
+        <Sheet visible onClose={() => setOpen(null)} title={open.filename}>
+          {open.mime.startsWith('image/') && <Image source={{ uri: resolveUrl(open.url, baseUrl) }} style={{ width: '100%', aspectRatio: open.width && open.height ? open.width / open.height : 4 / 3, borderRadius: t.radius.card, backgroundColor: t.colors.sel }} resizeMode="contain" />}
+          <Text style={t.text.meta}>{[open.width && open.height ? `${open.width} × ${open.height}` : '', size(open.size), shortDate(open.createdAt)].filter(Boolean).join(' · ')}</Text>
+          {!!open.alt && <Text style={t.text.body}>{open.alt}</Text>}
+          <Text selectable style={[t.text.body, { fontSize: 13 }]}>{resolveUrl(open.url, baseUrl)}</Text>
+        </Sheet>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1 @@
+export default { title: 'Media', description: 'Photos and files', href: '/media', order: 50 };

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

@@ -0,0 +1,8 @@
+{
+  "kind": "editor",
+  "title": "Media",
+  "description": "The site's media library as a grid that uses the width on tablets, with photo upload from the library or camera (compressed on the device) and a details sheet.",
+  "packages": ["expo-image-picker"],
+  "routes": ["/media"],
+  "next": ["It appears on Home (tools/media.ts).", "Add \"expo-image-picker\" to app.json plugins with photosPermission and cameraPermission messages for iOS."]
+}

package/mobile-template/recipes/editor-sections/files/app/sections/[pageId]/[sectionId].tsx

@@ -0,0 +1,12 @@
+import { Stack, useLocalSearchParams } from 'expo-router';
+import { SectionEditorPane } from '../../../components/SectionEditorPane';
+
+export default function SectionScreen() {
+  const { pageId, sectionId } = useLocalSearchParams<{ pageId: string; sectionId: string }>();
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Section' }} />
+      <SectionEditorPane pageId={pageId} sectionId={sectionId} />
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { ActivityIndicator, ScrollView, Text, View } from 'react-native';
+import { Stack, router } from 'expo-router';
+import { Card, ListRow, Notice, SectionLabel, StatusText, errorMessage, useEditorTheme, useSectionLayouts } from '@acms-subir/native/editor';
+import { SplitView, useWide } from '../../components/Screen';
+import { SectionEditorPane } from '../../components/SectionEditorPane';
+
+export default function SectionsScreen() {
+  const t = useEditorTheme();
+  const { wide, gutter } = useWide();
+  const layouts = useSectionLayouts();
+  const [selected, setSelected] = useState<{ pageId: string; sectionId: string } | null>(null);
+  const pages = (layouts.data?.pages ?? []).filter((p) => p.mode === 'sections' && p.sections.length);
+  const open = (pageId: string, sectionId: string) => (wide ? setSelected({ pageId, sectionId }) : router.push({ pathname: '/sections/[pageId]/[sectionId]', params: { pageId, sectionId } }));
+  const list = (
+    <ScrollView contentContainerStyle={{ padding: gutter, gap: 8 }}>
+      {layouts.isPending && <ActivityIndicator color={t.colors.muted} />}
+      {layouts.error && <Notice tone="error">{errorMessage(layouts.error)}</Notice>}
+      {layouts.isSuccess && !pages.length && <Notice>No page uses sections yet. An owner sets them up on the website (Design → Pages).</Notice>}
+      {pages.map((p) => (
+        <View key={p.pageId} style={{ gap: 6 }}>
+          <SectionLabel>{p.isHome && p.title.trim().toLowerCase() !== 'home' ? `${p.title} · Home page` : p.title}</SectionLabel>
+          <Card>
+            {p.sections.map((s) => (
+              <ListRow key={s.id} title={s.name} selected={wide && selected?.sectionId === s.id && selected.pageId === p.pageId}
+                accessibilityLabel={`${s.name}${s.locked ? ', locked' : ''}`}
+                onPress={() => open(p.pageId, s.id)}
+                meta={
+                  <Text numberOfLines={1} style={t.text.meta}>
+                    {s.isNew ? <StatusText status="draft" label="New" /> : s.changed ? <StatusText status="draft" label="Not live yet" /> : <StatusText status="published" label="Live" />}
+                    {s.hidden ? '  · Hidden' : ''}{s.locked ? '  · Locked' : ''}{!s.editable ? '  · View only' : ''}
+                  </Text>
+                } />
+            ))}
+          </Card>
+        </View>
+      ))}
+    </ScrollView>
+  );
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Sections' }} />
+      <SplitView list={list} detail={selected ? <SectionEditorPane key={`${selected.pageId}/${selected.sectionId}`} {...selected} /> : (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text style={t.text.meta}>Choose a section on the left.</Text></View>
+      )} />
+    </>
+  );
+}

package/mobile-template/recipes/editor-sections/files/components/SectionEditorPane.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, Dimensions, Keyboard, Platform, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { EditorButton, Notice, SectionFields, StatusText, errorMessage, isForbidden, useAuth, useEditorTheme, useSectionEditor } from '@acms-subir/native/editor';
+import { Screen } from './Screen';
+
+/** one section's form: save stages it, Publish makes just this section live */
+export function SectionEditorPane({ pageId, sectionId }: { pageId: string; sectionId: string }) {
+  const t = useEditorTheme();
+  const insets = useSafeAreaInsets();
+  const keyboard = useKeyboardOverlap();
+  const { role } = useAuth();
+  const ed = useSectionEditor(pageId, sectionId);
+  const [done, setDone] = useState<string | null>(null);
+  const [tried, setTried] = useState(false);
+  if (ed.loading) return <Screen><ActivityIndicator color={t.colors.muted} /></Screen>;
+  if (ed.error || !ed.section) return <Screen><Notice tone="error">{errorMessage(ed.error) || 'This section was removed.'}</Notice></Screen>;
+  if (!ed.definition) return <Screen><Notice tone="warn">This section type isn’t in the site’s theme any more. Its content is kept; an owner can fix it on the website.</Notice></Screen>;
+  const invalid = Object.keys(ed.issues).length > 0;
+  const act = async (what: 'save' | 'publish') => {
+    setDone(null); setTried(true);
+    if (invalid) return;
+    try {
+      if (what === 'save') { await ed.save(); setDone('Saved. It shows on the website after you publish it.'); }
+      else { await ed.publish(); setDone('This section is live.'); }
+    } catch { /* shown below */ }
+  };
+  const readOnly = !ed.permissions.canEditSection;
+  return (
+    <View style={{ flex: 1, paddingBottom: keyboard }}>
+      <Screen>
+        <View style={{ gap: 4 }}>
+          <Text style={t.text.meta}>{ed.page?.title}</Text>
+          <Text accessibilityRole="header" style={t.text.screenTitle}>{ed.section.name}</Text>
+          <Text style={t.text.meta}>
+            {ed.dirty ? <StatusText status="draft" label="Unsaved changes" /> : ed.changed ? <StatusText status="draft" label="Saved · not live yet" /> : <StatusText status="published" label="Live" />}
+            {ed.section.hidden ? '  · Hidden on the website' : ''}
+          </Text>
+        </View>
+        {readOnly && <Notice title="View only">{role === 'editor' ? 'An owner locked this section. You can read it here; ask an owner to change it.' : 'You can’t edit this section.'}</Notice>}
+        {!readOnly && ed.section.isNew && <Notice>This section is new on the page. It goes live when an owner publishes the page design on the website.</Notice>}
+        {ed.conflict && (
+          <Notice tone="warn" title="Someone changed the same fields"
+            action={<View style={{ flexDirection: 'row', gap: 8 }}>
+              <EditorButton compact variant="primary" label="Keep mine" busy={ed.saving} onPress={() => { void ed.keepMine().then(() => setDone('Saved your version.'), () => {}); }} />
+              <EditorButton compact label="Use theirs" onPress={ed.keepTheirs} />
+            </View>}>
+            {`They changed: ${ed.conflict.keys.join(', ')}. Keep mine saves your values over theirs; Use theirs drops your unsaved changes.`}
+          </Notice>
+        )}
+        {!!ed.saveError && !ed.conflict && <Notice tone="error">{isForbidden(ed.saveError) ? `${errorMessage(ed.saveError)} Your role can’t make that change.` : errorMessage(ed.saveError)}</Notice>}
+        {tried && invalid && <Notice tone="error" title="Check these fields">{Object.values(ed.issues).flat().join('\n')}</Notice>}
+        {!!done && <Notice tone="success">{done}</Notice>}
+        <SectionFields definition={ed.definition} data={ed.data} onChange={(k, v) => { setDone(null); ed.setField(k, v); }} permissions={ed.permissions} role={role ?? undefined} showIssues={tried} />
+      </Screen>
+      {!readOnly && (
+        <View style={{ flexDirection: 'row', gap: 10, padding: 12, paddingBottom: 12 + (keyboard ? 0 : insets.bottom), borderTopWidth: 1, borderTopColor: t.colors.line, backgroundColor: t.colors.panel, justifyContent: 'flex-end' }}>
+          <EditorButton label="Reset" variant="ghost" disabled={!ed.dirty || ed.saving} onPress={ed.reset} />
+          <EditorButton label={ed.saving ? 'Saving…' : 'Save'} disabled={!ed.dirty || ed.saving} onPress={() => { void act('save'); }} />
+          <EditorButton label="Publish section" variant="primary" busy={ed.publishing} disabled={ed.publishing || ed.saving || ed.section.isNew || (!ed.dirty && !ed.changed)} onPress={() => { void act('publish'); }} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+/** iOS keyboard overlap, so the action bar stays above it (Android resizes the window itself) */
+function useKeyboardOverlap() {
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    if (Platform.OS !== 'ios') return;
+    const change = Keyboard.addListener('keyboardWillChangeFrame', (e) => setHeight(Math.max(0, Dimensions.get('window').height - e.endCoordinates.screenY)));
+    const hide = Keyboard.addListener('keyboardWillHide', () => setHeight(0));
+    return () => { change.remove(); hide.remove(); };
+  }, []);
+  return height;
+}

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

@@ -0,0 +1 @@
+export default { title: 'Sections', description: 'Edit what the pages say', href: '/sections', order: 30 };

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

@@ -0,0 +1,8 @@
+{
+  "kind": "editor",
+  "title": "Sections",
+  "description": "Pick a page, then a section, and edit its fields with the right input for each type (lists, images with focal points, links, linked calendars); save, then publish that one section. Locked sections and fields are read-only for editors.",
+  "packages": ["expo-image-picker"],
+  "routes": ["/sections", "/sections/[pageId]/[sectionId]"],
+  "next": ["It appears on Home (tools/sections.ts).", "Image fields upload through expo-image-picker; add \"expo-image-picker\" to app.json plugins with a photosPermission message for iOS."]
+}

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

@@ -0,0 +1,63 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, FlatList, RefreshControl, Text, View } from 'react-native';
+import { Stack, router } from 'expo-router';
+import { ListRow, Notice, errorMessage, useEditorTheme, useMe, useTranslationQueue, type TranslationQueueItem } from '@acms-subir/native/editor';
+import { SplitView, useWide } from '../../components/Screen';
+import { TextTabs } from '../../components/TextTabs';
+import { ReviewPane, targetParams } from '../../components/ReviewPane';
+
+type Filter = 'open' | 'missing' | 'ai' | 'outdated' | 'all';
+
+export default function TranslationsScreen() {
+  const t = useEditorTheme();
+  const { wide, gutter } = useWide();
+  const me = useMe();
+  const languages = me.data?.features.languages.extra ?? [];
+  const [locale, setLocale] = useState<string | undefined>();
+  useEffect(() => { if (!locale && languages[0]) setLocale(languages[0].code); }, [languages, locale]);
+  const [filter, setFilter] = useState<Filter>('open');
+  const queue = useTranslationQueue(locale, { all: true });
+  const [selected, setSelected] = useState<TranslationQueueItem | null>(null);
+  const items = useMemo(() => (queue.data ?? []).filter((i) => filter === 'all' ? true : filter === 'open' ? i.open > 0 : i.summary[filter] > 0), [queue.data, filter]);
+  const count = (f: Filter) => (queue.data ?? []).filter((i) => f === 'all' ? true : f === 'open' ? i.open > 0 : i.summary[f] > 0).length;
+  const name = languages.find((l) => l.code === locale)?.name ?? locale ?? '';
+  if (me.isSuccess && !languages.length) return <View style={{ flex: 1, padding: 16, backgroundColor: t.colors.panel }}><Stack.Screen options={{ title: 'Translations' }} /><Notice>This site has one language. Add another in the site’s astro.config.mjs (i18n) to translate here.</Notice></View>;
+  const open = (i: TranslationQueueItem) => (wide ? setSelected(i) : router.push({ pathname: '/translations/review', params: { locale: locale!, ...targetParams(i.target) } }));
+  const list = (
+    <FlatList
+      data={items}
+      keyExtractor={(i) => JSON.stringify(i.target)}
+      contentContainerStyle={{ padding: gutter, gap: 2 }}
+      refreshControl={<RefreshControl refreshing={queue.isRefetching} onRefresh={() => queue.refetch()} tintColor={t.colors.muted} />}
+      ListHeaderComponent={
+        <View style={{ gap: 8, marginBottom: 8 }}>
+          {languages.length > 1 && <TextTabs accessibilityLabel="Language" value={locale ?? ''} onChange={(l) => { setLocale(l); setSelected(null); }} options={languages.map((l) => ({ value: l.code, label: l.name }))} />}
+          <TextTabs<Filter> accessibilityLabel="Show" value={filter} onChange={setFilter} options={[
+            { value: 'open', label: 'To review', count: count('open') }, { value: 'missing', label: 'Missing', count: count('missing') },
+            { value: 'ai', label: 'AI drafts', count: count('ai') }, { value: 'outdated', label: 'Outdated', count: count('outdated') }, { value: 'all', label: 'All', count: count('all') },
+          ]} />
+          {me.data && !me.data.features.aiTranslation && <Text style={t.text.meta}>AI drafts are off on this site; you can still write {name} by hand.</Text>}
+        </View>
+      }
+      ListEmptyComponent={queue.isPending ? <ActivityIndicator color={t.colors.muted} /> : queue.error ? <Notice tone="error">{errorMessage(queue.error)}</Notice> : <Notice tone="success">{`Nothing ${filter === 'all' ? 'to translate' : 'left here'} in ${name}.`}</Notice>}
+      renderItem={({ item }) => (
+        <ListRow title={item.title} selected={wide && JSON.stringify(selected?.target) === JSON.stringify(item.target)} onPress={() => open(item)}
+          meta={<Text numberOfLines={1} style={t.text.meta}>
+            {item.context}
+            {item.summary.missing ? <Text style={{ color: t.colors.red }}>{` · ${item.summary.missing} missing`}</Text> : null}
+            {item.summary.outdated ? <Text style={{ color: t.colors.amber }}>{` · ${item.summary.outdated} outdated`}</Text> : null}
+            {item.summary.ai ? <Text style={{ color: t.colors.accentText }}>{` · ${item.summary.ai} AI`}</Text> : null}
+            {!item.open ? <Text style={{ color: t.colors.green }}>{' · Done'}</Text> : null}
+          </Text>} />
+      )}
+    />
+  );
+  return (
+    <>
+      <Stack.Screen options={{ title: name ? `Review ${name}` : 'Translations' }} />
+      <SplitView list={list} listWidth={400} detail={selected && locale ? <ReviewPane key={JSON.stringify(selected.target) + locale} target={selected.target} locale={locale} title={selected.title} /> : (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text style={t.text.meta}>Choose something to review.</Text></View>
+      )} />
+    </>
+  );
+}

package/mobile-template/recipes/editor-translations/files/app/translations/review.tsx

@@ -0,0 +1,14 @@
+import { Stack, useLocalSearchParams } from 'expo-router';
+import type { DocKind } from '@acms-subir/client';
+import { ReviewPane } from '../../components/ReviewPane';
+
+export default function ReviewScreen() {
+  const p = useLocalSearchParams<{ locale: string; kind?: DocKind; id?: string; pageId?: string; sectionId?: string }>();
+  const target = p.kind && p.id ? { kind: p.kind, id: p.id } : { pageId: p.pageId!, sectionId: p.sectionId! };
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Review' }} />
+      <ReviewPane target={target} locale={p.locale} />
+    </>
+  );
+}

package/mobile-template/recipes/editor-translations/files/components/ReviewPane.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, Text, View } from 'react-native';
+import { EditorButton, FieldInput, Notice, StatusText, errorMessage, useEditorTheme, useMe, useTranslations, htmlToText, type TranslationTarget } from '@acms-subir/native/editor';
+import { Screen, useWide } from './Screen';
+
+export const targetParams = (t: TranslationTarget): Record<string, string> => ('kind' in t ? { kind: t.kind, id: t.id } : { pageId: t.pageId, sectionId: t.sectionId });
+const LABEL: Record<string, string> = { missing: 'Missing', ai: 'AI draft', reviewed: 'Reviewed', outdated: 'Original changed' };
+
+/** every text of one document or section: the original beside the translation */
+export function ReviewPane({ target, locale, title }: { target: TranslationTarget; locale: string; title?: string }) {
+  const t = useEditorTheme();
+  const { wide } = useWide();
+  const me = useMe();
+  const tr = useTranslations(target, locale);
+  const [drafts, setDrafts] = useState<Record<string, string>>({});
+  const [message, setMessage] = useState<{ tone: 'success' | 'error'; text: string } | null>(null);
+  useEffect(() => { setDrafts({}); }, [tr.translation?.revision]);
+  const language = me.data?.features.languages.extra.find((l) => l.code === locale)?.name ?? locale;
+  if (tr.isPending) return <Screen><ActivityIndicator color={t.colors.muted} /></Screen>;
+  if (tr.error && !tr.translation) return <Screen><Notice tone="error">{errorMessage(tr.error)}</Notice></Screen>;
+  const s = tr.summary;
+  const run = async (what: () => Promise<{ changed?: number }>, text: (n: number) => string) => {
+    setMessage(null);
+    try { const r = await what(); setMessage({ tone: 'success', text: text(r.changed ?? 0) }); }
+    catch (e) { setMessage({ tone: 'error', text: errorMessage(e) }); }
+  };
+  const dirty = Object.keys(drafts).length > 0;
+  return (
+    <Screen maxWidth={wide ? 900 : 760} refreshing={tr.isRefetching} onRefresh={() => tr.refetch()}>
+      <View style={{ gap: 4 }}>
+        {!!title && <Text accessibilityRole="header" style={t.text.screenTitle}>{title}</Text>}
+        {s && <Text style={t.text.meta}>{language}: {s.reviewed}/{s.total} reviewed{s.missing ? ` · ${s.missing} missing` : ''}{s.ai ? ` · ${s.ai} AI drafts` : ''}{s.outdated ? ` · ${s.outdated} outdated` : ''}</Text>}
+      </View>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+        {dirty && <EditorButton variant="primary" label="Save changes" busy={tr.pendingOp === 'set'} onPress={() => run(() => tr.set(drafts), (n) => `Saved ${n} ${n === 1 ? 'text' : 'texts'}.`)} />}
+        {me.data?.features.aiTranslation && !!s && (s.missing > 0 || s.outdated > 0) && (
+          <EditorButton label="AI draft what’s missing" busy={tr.pendingOp === 'ai'} disabled={tr.pending} onPress={() => run(() => tr.aiDraft(), (n) => n ? `Drafted ${n} ${n === 1 ? 'text' : 'texts'}. Review them below.` : 'Nothing to draft.')} />
+        )}
+        {!!s && s.ai + s.outdated > 0 && !dirty && (
+          <EditorButton label="Approve all" busy={tr.pendingOp === 'review'} disabled={tr.pending} onPress={() => run(() => tr.markReviewed(), (n) => `Approved ${n} ${n === 1 ? 'text' : 'texts'}.`)} />
+        )}
+      </View>
+      {!!message && <Notice tone={message.tone}>{message.text}</Notice>}
+      {tr.units.length === 0 && <Notice>Nothing to translate here yet.</Notice>}
+      {tr.units.map((u) => {
+        const value = drafts[u.path] ?? u.value;
+        const rich = u.kind === 'richtext';
+        return (
+          <View key={u.path} style={{ gap: 8, paddingVertical: 12, borderTopWidth: 1, borderTopColor: t.colors.line }}>
+            <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 8 }}>
+              <Text style={[t.text.label, { flex: 1 }]} numberOfLines={2}>{u.label}</Text>
+              <StatusText status={drafts[u.path] !== undefined ? 'draft' : u.status} label={drafts[u.path] !== undefined ? 'Edited' : LABEL[u.status]} />
+            </View>
+            <View style={{ flexDirection: wide ? 'row' : 'column', gap: 10 }}>
+              <View style={{ flex: 1, backgroundColor: t.colors.sel, borderRadius: t.radius.input, padding: 10 }}>
+                <Text style={[t.text.body, { fontSize: 14 }]} selectable>{rich ? htmlToText(u.source) : u.source}</Text>
+              </View>
+              <View style={{ flex: 1 }}>
+                <FieldInput field={{ label: `${language}`, type: rich ? 'richtext' : u.kind === 'textarea' ? 'textarea' : 'text' }} value={value}
+                  onChange={(v) => setDrafts((d) => ({ ...d, [u.path]: String(v ?? '') }))} />
+              </View>
+            </View>
+            {(u.status === 'ai' || u.status === 'outdated') && drafts[u.path] === undefined && (
+              <EditorButton compact variant="ghost" label="Approve" style={{ alignSelf: 'flex-start' }} disabled={tr.pending}
+                onPress={() => run(() => tr.markReviewed([u.path]), () => 'Approved.')} />
+            )}
+          </View>
+        );
+      })}
+    </Screen>
+  );
+}

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

@@ -0,0 +1 @@
+export default { title: 'Translations', description: 'Review other languages', href: '/translations', order: 40 };

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

@@ -0,0 +1,8 @@
+{
+  "kind": "editor",
+  "title": "Translations",
+  "description": "A review queue per language (missing, AI drafts, outdated) across sections, pages, posts and events; edit each text beside the original, approve, or ask for AI drafts when the site has AI translation on.",
+  "packages": [],
+  "routes": ["/translations", "/translations/review"],
+  "next": ["It appears on Home (tools/translations.ts). The site needs a second language: acms({ i18n: { locales: ['en', 'es'], defaultLocale: 'en' } })."]
+}

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

@@ -0,0 +1,132 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Text, View } from 'react-native';
+import { Stack, useLocalSearchParams } from 'expo-router';
+import type { DocKind, EditorDocument } from '@acms-subir/client';
+import {
+  EditorButton, EditorInput, FieldInput, Notice, Sheet, StatusText, errorMessage, isConflict, useDocument, useEditorTheme, usePublish,
+} from '@acms-subir/native/editor';
+import { HeaderActions, Screen, useWide } from '../../../components/Screen';
+import { dateTime } from '../../../lib/format';
+
+type Form = { title: string; excerpt: string; bodyHtml: string; tags: string; slug: string };
+const toForm = (d: EditorDocument): Form => ({ title: d.title, excerpt: d.excerpt, bodyHtml: d.bodyHtml, tags: d.tags.join(', '), slug: d.slug });
+const BODY = { label: 'Body', type: 'richtext' as const };
+
+export default function WriteScreen() {
+  const { kind, id } = useLocalSearchParams<{ kind: DocKind; id: string }>();
+  const t = useEditorTheme();
+  const { wide } = useWide();
+  const doc = useDocument(kind, id);
+  const pub = usePublish(kind, id);
+  const [form, setForm] = useState<Form | null>(null);
+  const [base, setBase] = useState<Form | null>(null);
+  const [message, setMessage] = useState<{ tone: 'success' | 'error' | 'warn'; text: string } | null>(null);
+  const [scheduling, setScheduling] = useState(false);
+  const d = doc.document;
+  // start from the loaded copy (and again after "Use theirs")
+  useEffect(() => { if (d && (!base || !form)) { setForm(toForm(d)); setBase(toForm(d)); } }, [d]); // eslint-disable-line react-hooks/exhaustive-deps
+  const changes = useMemo(() => {
+    if (!form || !base || !d) return {};
+    const out: Record<string, unknown> = {};
+    if (form.title !== base.title) out.title = form.title;
+    if (kind !== 'page' && form.excerpt !== base.excerpt) out.excerpt = form.excerpt;
+    if (form.bodyHtml !== base.bodyHtml) out.bodyHtml = form.bodyHtml;
+    if (kind !== 'page' && form.tags !== base.tags) out.tags = form.tags.split(',').map((x) => x.trim()).filter(Boolean);
+    if (form.slug !== base.slug) out.slug = form.slug;
+    return out;
+  }, [form, base, d, kind]);
+  const dirty = Object.keys(changes).length > 0;
+  if (doc.isPending || !form) 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 set = (k: keyof Form) => (v: unknown) => setForm((f) => (f ? { ...f, [k]: String(v ?? '') } : f));
+
+  const save = async () => {
+    setMessage(null);
+    try {
+      const saved = await doc.save(changes as never);
+      setBase(toForm(saved)); setForm(toForm(saved));
+      setMessage({ tone: 'success', text: live ? 'Saved. Publish to make your edits live.' : 'Draft saved.' });
+      return true;
+    } catch (e) {
+      setMessage(isConflict(e) ? null : { tone: 'error', text: errorMessage(e) });
+      return false;
+    }
+  };
+  const publish = async () => {
+    if (dirty && !(await save())) return;
+    try { await pub.publish(); setMessage({ tone: 'success', text: live ? 'Your edits are live.' : 'Published.' }); await doc.refetch(); }
+    catch (e) { setMessage({ tone: 'error', text: errorMessage(e) }); }
+  };
+  const keepMine = async () => {
+    try { const saved = await doc.keepMine(); if (saved) { setBase(toForm(saved)); setForm(toForm(saved)); setMessage({ tone: 'success', text: 'Saved your version.' }); } }
+    catch (e) { setMessage({ tone: 'error', text: errorMessage(e) }); }
+  };
+  const keepTheirs = () => { const server = doc.conflict?.server; doc.keepTheirs(); if (server) { setBase(toForm(server)); setForm(toForm(server)); } setMessage(null); };
+
+  return (
+    <>
+      <Stack.Screen options={{
+        title: '',
+        headerRight: () => (
+          <HeaderActions>
+            <EditorButton compact label={doc.saving ? 'Saving…' : 'Save'} disabled={!dirty || doc.saving} onPress={() => { void save(); }} />
+            <EditorButton compact variant="primary" label={live ? (d.hasChanges || dirty ? 'Update' : 'Live') : 'Publish'} busy={pub.action === 'publish'}
+              disabled={pub.pending || (live && !d.hasChanges && !dirty)} onPress={() => { void publish(); }} />
+          </HeaderActions>
+        ),
+      }} />
+      <Screen maxWidth={wide ? 820 : 760}>
+        <Text style={t.text.meta}>
+          <StatusText status={d.status} suffix={d.status === 'scheduled' && d.scheduledAt ? dateTime(d.scheduledAt) : undefined} />
+          {`  ${dirty ? 'Unsaved changes' : d.hasChanges ? 'Saved · not live yet' : 'Saved'}`}
+        </Text>
+        {doc.conflict && (
+          <Notice tone="warn" title="Someone saved this while you were editing"
+            action={<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+              <EditorButton compact variant="primary" label="Keep mine" busy={doc.saving} onPress={() => { void keepMine(); }} />
+              <EditorButton compact label="Use theirs" onPress={keepTheirs} />
+            </View>}>
+            {`Their version (saved ${dateTime(doc.conflict.server.updatedAt)}) is titled “${doc.conflict.server.title}”. Keep mine saves your changes over it; Use theirs drops your unsaved changes.`}
+          </Notice>
+        )}
+        {!!message && <Notice tone={message.tone}>{message.text}</Notice>}
+        <EditorInput value={form.title} onChangeText={set('title')} placeholder="Title" accessibilityLabel="Title"
+          style={{ fontSize: 22, lineHeight: 28, fontWeight: '700', borderWidth: 0, backgroundColor: 'transparent', paddingHorizontal: 0 }} />
+        {kind !== 'page' && (
+          <FieldInput field={{ label: kind === 'event' ? 'Summary' : 'Excerpt', type: 'textarea', maxLength: 300, help: 'Shown in lists and when shared.' }} value={form.excerpt} onChange={set('excerpt')} />
+        )}
+        <FieldInput field={BODY} value={form.bodyHtml} onChange={set('bodyHtml')} />
+        {kind !== 'page' && <FieldInput field={{ label: 'Tags', type: 'text', help: 'Separate with commas.' }} value={form.tags} onChange={set('tags')} />}
+        <FieldInput field={{ label: 'Address', type: 'text', help: `Part of the link: ${d.url}` }} value={form.slug} onChange={set('slug')} />
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
+          {kind !== 'page' && !live && <EditorButton label="Schedule…" onPress={() => setScheduling(true)} />}
+          {live && <EditorButton label="Unpublish" variant="danger" busy={pub.action === 'unpublish'} onPress={() => { pub.unpublish().then(() => setMessage({ tone: 'success', text: 'Unpublished. It is a draft again.' }), (e) => setMessage({ tone: 'error', text: errorMessage(e) })); }} />}
+          {d.hasChanges && live && <EditorButton label="Discard edits" busy={pub.action === 'discard'} onPress={() => { pub.discard().then((x) => { setBase(toForm(x)); setForm(toForm(x)); setMessage({ tone: 'success', text: 'Edits discarded.' }); }, (e) => setMessage({ tone: 'error', text: errorMessage(e) })); }} />}
+        </View>
+      </Screen>
+      {scheduling && <ScheduleSheet onClose={() => setScheduling(false)} onSchedule={async (at) => {
+        if (dirty && !(await save())) return;
+        await pub.schedule(at).then(() => { setScheduling(false); setMessage({ tone: 'success', text: `Scheduled for ${dateTime(at)}.` }); }, (e) => setMessage({ tone: 'error', text: errorMessage(e) }));
+      }} busy={pub.action === 'schedule'} />}
+    </>
+  );
+}
+
+function ScheduleSheet({ onClose, onSchedule, busy }: { onClose: () => void; onSchedule: (at: string) => void; busy: boolean }) {
+  const t = useEditorTheme();
+  const tomorrow = new Date(Date.now() + 86_400_000);
+  const [date, setDate] = useState(`${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(2, '0')}-${String(tomorrow.getDate()).padStart(2, '0')}`);
+  const [time, setTime] = useState('09:00');
+  const at = /^\d{4}-\d{2}-\d{2}$/.test(date) && /^([01]?\d|2[0-3]):[0-5]\d$/.test(time) ? new Date(`${date}T${time.padStart(5, '0')}`) : null;
+  const ok = !!at && at.getTime() > Date.now();
+  return (
+    <Sheet visible onClose={onClose} title="Schedule" footer={<EditorButton variant="primary" label="Schedule" busy={busy} disabled={!ok} onPress={() => at && onSchedule(at.toISOString())} />}>
+      <View style={{ flexDirection: 'row', gap: 10 }}>
+        <View style={{ flex: 1, gap: 6 }}><Text style={t.text.label}>Date</Text><EditorInput value={date} onChangeText={setDate} accessibilityLabel="Date" keyboardType="numbers-and-punctuation" /></View>
+        <View style={{ flex: 1, gap: 6 }}><Text style={t.text.label}>Time</Text><EditorInput value={time} onChangeText={setTime} accessibilityLabel="Time" keyboardType="numbers-and-punctuation" /></View>
+      </View>
+      <Text style={t.text.meta}>{ok ? `Goes live ${at!.toLocaleString()} (this device’s time zone).` : 'Pick a future date and time.'}</Text>
+    </Sheet>
+  );
+}