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

package/mobile-template/client/eas.json

@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 16.0.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

package/mobile-template/client/env.example

@@ -0,0 +1,3 @@
+# Your ACMS site (public origin). Only public values belong here: EXPO_PUBLIC_*
+# variables are bundled into the app. Never put admin passwords or API keys in it.
+EXPO_PUBLIC_ACMS_URL=https://example.com

package/mobile-template/client/gitignore

@@ -0,0 +1,42 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+
+# generated native folders
+/ios
+/android

package/mobile-template/client/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "__ACMS_APP_SLUG__",
+  "version": "1.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "acms": { "app": "client", "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-linking": "~57.0.11",
+    "expo-router": "~57.0.24",
+    "expo-status-bar": "~57.0.1",
+    "expo-system-ui": "~57.0.4",
+    "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-svg": "15.15.4",
+    "react-native-web": "~0.21.0",
+    "react-native-webview": "13.16.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "typescript": "~6.0.3"
+  }
+}

package/mobile-template/client/sections/index.ts

@@ -0,0 +1,11 @@
+import { defineSectionRegistry } from '@acms-subir/native';
+// acms:imports (npx acms section add|new adds imports above this line)
+
+// Native section components for this app, keyed by section type or
+// "type:variant". The site's library sections (hero-banner, team, pricing, …)
+// already render natively from @acms-subir/native/sections; add an entry here
+// to replace one, or to give the site's own coded sections a native look.
+// Sections without a native component show as the website renders them.
+export const sections = defineSectionRegistry({
+  // acms:sections
+});

package/mobile-template/client/tsconfig.json

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

package/mobile-template/editor/AGENTS.md

@@ -0,0 +1,66 @@
+# Agent rules for this app
+
+Full guide: run `npx acms docs mobile` from the **site** folder (the folder
+that contains this app; all `acms` commands run there, not in this folder). Finish
+every change with `npx acms mobile doctor` (no failures).
+
+This is the **editor app** for the ACMS site at `__ACMS_SITE_URL__`: an Expo
+app for the site's staff (owners and editors) to write, edit sections,
+review translations, manage media and answer bookings. It signs in through
+the site (OAuth + PKCE in the system browser) and calls the bearer-only
+`/api/v1/admin/*` API. It lives beside the website as a separate project.
+
+## Security rules (non-negotiable)
+
+1. **Never handle passwords.** No login form, no password field, no
+   "remember me". Sign-in is `useAuth().signIn()`, which opens the site.
+2. **Tokens only in secure storage.** `<EditorProvider>` keeps them in
+   `expo-secure-store` (sessionStorage on the web). Never read them into
+   state, never put them in AsyncStorage, files, URLs, analytics or logs.
+   Never `console.log` a token, a code, an API response with a token, or
+   a request's headers.
+3. **Use the hooks, never raw fetch.** `@acms-subir/native/editor` (`useAuth`,
+   `useMe`, `useDocuments`, `useDocument`, `usePublish`, `useSectionEditor`,
+   `useTranslations`, `useTranslationQueue`, `useMedia`, `useBookingsInbox`) or
+   `useEditorClient()` inside a TanStack Query hook for anything else. They
+   refresh tokens and sign out when the site revokes the device.
+4. **Respect roles.** The server enforces every rule, but the UI must hide
+   what the person can't do: read `useMe().data.permissions`, and in section
+   forms `canEdit(fieldKey)` / `permissions.canEditRows(key)`. Editors can't
+   edit locked sections or fields, or change layout, style or visibility.
+5. **Handle conflicts.** Saves send a revision. A 409 means someone saved
+   first: show `conflict` from `useDocument` / `useSectionEditor` with
+   "Keep mine" and "Use theirs"; never retry blindly over someone's work.
+6. **No secrets in the app.** `EXPO_PUBLIC_*` values are bundled and readable.
+   No API keys, no agent tokens, no admin routes other than `/api/v1/admin/*`.
+
+## Design rules
+
+- Default look is the admin's "Inset Paper" (`useEditorTheme()`: `colors`,
+  `text`, `radius`), light and dark. Use the building blocks (`EditorButton`,
+  `EditorInput`, `Segmented`, `Notice`, `StatusText`, `ListRow`, `Card`,
+  `Sheet`, `FieldInput`, `SectionFields`).
+- No pill-shaped chips, badges or filters (8–12px rectangles, text tabs,
+  marker + text). Status is colored text. No colored left-edge stripes for
+  selection or callouts (tinted fill instead). No gradient-squircle logos.
+- Phones and tablets: `useWide()` from `components/Screen.tsx`; on ≥768
+  use the width (`SplitView`: list + detail), never a stretched phone column.
+  Touch targets at least 44pt.
+
+## Where things are
+
+- `app/_layout.tsx`: `<EditorProvider>` (site URL, client id, redirect URI) and
+  the signed-out / signed-in switch.
+- `app/index.tsx`: Home (who is signed in, tools, appearance, sign out).
+- `app/auth.tsx`: the sign-in return address route.
+- `lib/config.ts`: site URL, scheme, redirect URI, client id.
+- `tools/*.ts`: one file per Home entry (`{ title, description, href, order }`).
+- `components/Screen.tsx`: `Screen`, `SplitView`, `useWide`.
+
+## Before you finish
+
+- `npm run typecheck` passes; `npx expo export --platform web` bundles.
+- Try it signed in as an **editor** and as an **owner** (locked sections,
+  publish rights), in light and dark, on a phone and a tablet width.
+- `npx acms mobile doctor` (from the site folder) passes: redirect URI listed
+  on the site, secure storage installed, no tokens in AsyncStorage or logs.

package/mobile-template/editor/README.md

@@ -0,0 +1,73 @@
+# __ACMS_APP_NAME__
+
+A blank Expo app for the staff of your ACMS site (`__ACMS_SITE_URL__`). People
+sign in with their site account through the website itself, and the app
+already knows who they are and what their role allows. What it does after
+that is yours to build: add ready-made screens with recipes, or write your own
+with the hooks from `@acms-subir/native/editor`.
+
+It is separate from the client app (the one your visitors use). Both can live
+beside the site.
+
+## Let the site accept this app
+
+The site only signs in apps whose return address it knows. Add this app's
+address to the site's `astro.config.mjs` and restart (or deploy) the site:
+
+```js
+acms({ mobile: { editor: { name: '__ACMS_APP_NAME__', redirectUris: ['__ACMS_REDIRECT_URI__'] } } })
+```
+
+For the web version, also list its address, e.g. `https://staff.example.com/auth`
+(`http://localhost/auth` covers local development on any port).
+
+## Run it
+
+From your **site** folder (starts the site too, and points the app at an
+address your phone can reach):
+
+```sh
+cd __ACMS_APP_DIR__ && npm install && cd ..
+npx acms mobile dev --dir __ACMS_APP_DIR__
+```
+
+Scan the QR code with Expo Go, or press `i` / `a` / `w`. Tap **Sign in**: the
+site opens in the browser, you approve this device, and you're back in the app.
+
+## Add screens
+
+```sh
+npx acms mobile recipe list
+npx acms mobile recipe add editor-content --dir __ACMS_APP_DIR__        # posts, pages, events: list, filters, search
+npx acms mobile recipe add editor-writer --dir __ACMS_APP_DIR__         # write, save drafts, publish, conflicts
+npx acms mobile recipe add editor-sections --dir __ACMS_APP_DIR__       # edit a page's sections, publish one
+npx acms mobile recipe add editor-translations --dir __ACMS_APP_DIR__   # review another language
+npx acms mobile recipe add editor-media --dir __ACMS_APP_DIR__          # media grid + photo upload
+npx acms mobile recipe add editor-bookings --dir __ACMS_APP_DIR__       # approve / decline bookings
+```
+
+Each shows up on Home automatically (a file in `tools/`).
+
+## Security
+
+- Nobody types a password into this app. Sign-in happens on the website.
+- Tokens live only in the device's secure storage (Keychain / Keystore via
+  `expo-secure-store`); on the web, in the tab's sessionStorage.
+- The site decides what each person may do on every request. The app hides
+  what a role can't do, but never relies on that.
+- Staff can sign a device out from the site (Users page), and changing a
+  password signs every device out.
+
+## Check it
+
+```sh
+npx acms mobile doctor --dir __ACMS_APP_DIR__
+```
+
+## Ship it
+
+Builds and store submission use [EAS](https://docs.expo.dev/build/introduction/).
+Staff apps are often distributed internally (TestFlight, internal testing
+track, or `eas build --profile preview`). Check `app.json` first:
+`ios.bundleIdentifier` / `android.package` (`__ACMS_BUNDLE_ID__`) and `scheme`
+can't change without updating the site's `redirectUris`.

package/mobile-template/editor/app/_layout.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+import { ActivityIndicator, Text, View } from 'react-native';
+import { DarkTheme, DefaultTheme, Stack, ThemeProvider } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { EditorProvider, completeAuthRedirect, useAuth, useEditorTheme } from '@acms-subir/native/editor';
+import { siteUrl, clientId, redirectUri } from '../lib/config';
+import { AppearanceProvider, useAppearance } from '../lib/appearance';
+import { SignIn } from '../components/SignIn';
+
+// Web only: the sign-in popup hands its result back to the app and closes.
+completeAuthRedirect();
+
+export default function RootLayout() {
+  if (!siteUrl) return <MissingUrl />;
+  return (
+    <SafeAreaProvider>
+      <AppearanceProvider>
+        <Provider />
+      </AppearanceProvider>
+    </SafeAreaProvider>
+  );
+}
+
+function Provider() {
+  const { appearance } = useAppearance();
+  return (
+    <EditorProvider baseUrl={siteUrl!} clientId={clientId} redirectUri={redirectUri} colorScheme={appearance === 'auto' ? undefined : appearance}>
+      <Gate />
+    </EditorProvider>
+  );
+}
+
+// Signed out → the sign-in screen; signed in → the app. The server checks
+// every request anyway; this only decides what to show.
+function Gate() {
+  const t = useEditorTheme();
+  const auth = useAuth();
+  const navTheme = useMemo(() => {
+    const base = t.scheme === 'dark' ? DarkTheme : DefaultTheme;
+    return { ...base, colors: { ...base.colors, primary: t.colors.accent, background: t.colors.panel, card: t.colors.panel, text: t.colors.text, border: t.colors.line, notification: t.colors.accent } };
+  }, [t]);
+  return (
+    <ThemeProvider value={navTheme}>
+      <StatusBar style={t.scheme === 'dark' ? 'light' : 'dark'} />
+      {auth.status === 'loading' ? (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: t.colors.panel }}><ActivityIndicator color={t.colors.muted} /></View>
+      ) : !auth.signedIn ? <SignIn /> : (
+        <Stack
+          screenOptions={{
+            headerStyle: { backgroundColor: t.colors.panel },
+            headerTintColor: t.colors.text,
+            headerTitleStyle: { fontWeight: '600' },
+            headerShadowVisible: false,
+            headerBackTitle: 'Back',
+            contentStyle: { backgroundColor: t.colors.panel },
+          }}
+        >
+          <Stack.Screen name="index" options={{ title: 'Home' }} />
+          <Stack.Screen name="auth" options={{ headerShown: false }} />
+        </Stack>
+      )}
+    </ThemeProvider>
+  );
+}
+
+function MissingUrl() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', padding: 24, gap: 8 }}>
+      <Text style={{ fontSize: 18, fontWeight: '600' }}>Connect your site</Text>
+      <Text style={{ fontSize: 15, lineHeight: 22 }}>
+        Set EXPO_PUBLIC_ACMS_URL in .env (for example https://example.com), or run `npx acms mobile dev` from your site folder, then restart Expo.
+      </Text>
+    </View>
+  );
+}

package/mobile-template/editor/app/auth.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { router } from 'expo-router';
+import { useEditorTheme } from '@acms-subir/native/editor';
+
+// The sign-in return address (<scheme>://auth, or /auth on the web). The
+// browser session normally catches it before this screen shows; if the link
+// opens the app directly, just go Home.
+export default function AuthReturn() {
+  const t = useEditorTheme();
+  useEffect(() => { const id = setTimeout(() => router.replace('/'), 300); return () => clearTimeout(id); }, []);
+  return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: t.colors.panel }}><ActivityIndicator color={t.colors.muted} /></View>;
+}

package/mobile-template/editor/app/index.tsx

@@ -0,0 +1,55 @@
+import { Text, View } from 'react-native';
+import { router } from 'expo-router';
+import { Card, EditorButton, ListRow, SectionLabel, Segmented, errorMessage, useAuth, useEditorTheme, useMe } from '@acms-subir/native/editor';
+import { Screen, useWide } from '../components/Screen';
+import { tools } from '../lib/tools';
+import { useAppearance, type Appearance } from '../lib/appearance';
+
+// Home: who is signed in, and the screens this app offers (one per file in
+// tools/). Blank on purpose: add screens with recipes or build your own.
+export default function Home() {
+  const t = useEditorTheme();
+  const auth = useAuth();
+  const me = useMe();
+  const { wide } = useWide();
+  const { appearance, setAppearance } = useAppearance();
+  const staffRole = me.data?.user.role ?? auth.role;
+  const role = staffRole ? staffRole[0].toUpperCase() + staffRole.slice(1) : 'Staff';
+  return (
+    <Screen refreshing={me.isRefetching} onRefresh={() => me.refetch()}>
+      <View style={{ gap: 4 }}>
+        <Text style={t.text.meta}>{me.data?.site.name ?? ' '}</Text>
+        <Text accessibilityRole="header" style={t.text.screenTitle}>Signed in as {auth.user?.name}</Text>
+        <Text style={t.text.body}>{role} · {auth.user?.email}</Text>
+      </View>
+      {me.isError && <Text style={[t.text.meta, { color: t.colors.red }]}>{errorMessage(me.error)}</Text>}
+
+      <SectionLabel>Tools</SectionLabel>
+      {tools.length ? (
+        <Card style={wide ? { flexDirection: 'row', flexWrap: 'wrap' } : undefined}>
+          {tools.map((tool) => (
+            <View key={tool.name} style={wide ? { width: '50%' } : undefined}>
+              <ListRow title={tool.title} meta={tool.description} onPress={() => router.push(tool.href as never)} right={<Text style={t.text.meta}>›</Text>} />
+            </View>
+          ))}
+        </Card>
+      ) : (
+        <View style={{ backgroundColor: t.colors.sel, borderRadius: t.radius.card, padding: 14, gap: 6 }}>
+          <Text style={t.text.row}>Nothing here yet</Text>
+          <Text style={t.text.body}>This app is connected and signed in. Add screens from the site folder, for example:</Text>
+          <Text style={[t.text.meta, { fontFamily: 'Menlo' }]}>npx acms mobile recipe add editor-content</Text>
+        </View>
+      )}
+
+      <SectionLabel>Appearance</SectionLabel>
+      <Segmented<Appearance> accessibilityLabel="Appearance" value={appearance} onChange={setAppearance}
+        options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }, { value: 'auto', label: 'Auto' }]} />
+
+      <SectionLabel>This device</SectionLabel>
+      <Card>
+        <ListRow title={auth.device?.name ?? 'This device'} meta="Signed in through the website. Sign out here or from the site’s Users page." />
+      </Card>
+      <EditorButton variant="danger" label="Sign out" onPress={() => { void auth.signOut(); }} />
+    </Screen>
+  );
+}

package/mobile-template/editor/app.json

@@ -0,0 +1,21 @@
+{
+  "expo": {
+    "name": "__ACMS_APP_NAME__",
+    "slug": "__ACMS_APP_SLUG__",
+    "version": "1.0.0",
+    "scheme": "__ACMS_APP_SCHEME__",
+    "orientation": "default",
+    "userInterfaceStyle": "automatic",
+    "ios": {
+      "bundleIdentifier": "__ACMS_BUNDLE_ID__",
+      "supportsTablet": true
+    },
+    "android": {
+      "package": "__ACMS_BUNDLE_ID__"
+    },
+    "web": {
+      "output": "single"
+    },
+    "plugins": ["expo-router", "expo-secure-store"]
+  }
+}

package/mobile-template/editor/components/Screen.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import { Platform, RefreshControl, ScrollView, View, useWindowDimensions, type ScrollViewProps } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useEditorTheme } from '@acms-subir/native/editor';
+
+/** ≥ 768pt: tablets and desktop web use the width (list + detail), phones stack */
+export function useWide() {
+  const { width } = useWindowDimensions();
+  return { wide: width >= 768, width, gutter: width >= 768 ? 24 : 16 };
+}
+
+/** a scrolling screen on the Inset Paper panel, readable width on big screens */
+export function Screen({ children, refreshing, onRefresh, maxWidth = 760, ...rest }: ScrollViewProps & { children: ReactNode; refreshing?: boolean; onRefresh?: () => void; maxWidth?: number }) {
+  const t = useEditorTheme();
+  const { gutter } = useWide();
+  const insets = useSafeAreaInsets();
+  return (
+    <ScrollView
+      style={{ flex: 1, backgroundColor: t.colors.panel }}
+      contentContainerStyle={{ padding: gutter, paddingBottom: gutter + insets.bottom, gap: 16, width: '100%', maxWidth, alignSelf: 'center' }}
+      keyboardShouldPersistTaps="handled"
+      automaticallyAdjustKeyboardInsets
+      refreshControl={onRefresh ? <RefreshControl refreshing={!!refreshing} onRefresh={onRefresh} tintColor={t.colors.muted} /> : undefined}
+      {...rest}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+/**
+ * List + detail. On tablets both show side by side (the list keeps a
+ * comfortable width, the detail uses the rest); on phones only the list shows
+ * and rows open their own screen.
+ */
+export function SplitView({ list, detail, listWidth = 380 }: { list: ReactNode; detail: ReactNode; listWidth?: number }) {
+  const t = useEditorTheme();
+  const { wide } = useWide();
+  if (!wide) return <View style={{ flex: 1, backgroundColor: t.colors.panel }}>{list}</View>;
+  return (
+    <View style={{ flex: 1, flexDirection: 'row', backgroundColor: t.colors.shell }}>
+      <View style={{ width: listWidth, backgroundColor: t.colors.panel, borderRightWidth: 1, borderRightColor: t.colors.line }}>{list}</View>
+      <View style={{ flex: 1, backgroundColor: t.colors.panel }}>{detail}</View>
+    </View>
+  );
+}
+
+/** buttons in a screen header (the web header has no right inset of its own) */
+export function HeaderActions({ children }: { children: ReactNode }) {
+  return <View style={{ flexDirection: 'row', gap: 8, marginRight: Platform.OS === 'web' ? 16 : 0 }}>{children}</View>;
+}

package/mobile-template/editor/components/SignIn.tsx

@@ -0,0 +1,36 @@
+import { ActivityIndicator, Image, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { EditorButton, Notice, resolveUrl, useAuth, useEditorTheme, useSiteInfo } from '@acms-subir/native/editor';
+import { siteUrl } from '../lib/config';
+import { useWide } from './Screen';
+
+// Staff sign in on the website itself (system browser): the app never sees a
+// password. The site shows an approve screen, then returns here with a code.
+export function SignIn() {
+  const t = useEditorTheme();
+  const auth = useAuth();
+  const site = useSiteInfo();
+  const insets = useSafeAreaInsets();
+  const { wide } = useWide();
+  const name = site.data?.name ?? '';
+  const logo = resolveUrl(site.data?.logo || site.data?.icon, siteUrl!);
+  const busy = auth.status === 'signingIn';
+  return (
+    <View style={{ flex: 1, backgroundColor: wide ? t.colors.shell : t.colors.panel, alignItems: 'center', justifyContent: 'center', padding: 24, paddingTop: 24 + insets.top }}>
+      <View style={{ width: '100%', maxWidth: 420, gap: 20, ...(wide ? { backgroundColor: t.colors.panel, borderRadius: t.radius.sheet, padding: 32, borderWidth: 1, borderColor: t.colors.line } : {}) }}>
+        <View style={{ gap: 12 }}>
+          {logo ? <Image source={{ uri: logo }} accessibilityLabel={name} style={{ height: 48, width: 160 }} resizeMode="contain" /> : null}
+          {site.isPending ? <ActivityIndicator color={t.colors.muted} style={{ alignSelf: 'flex-start' }} /> : (
+            <Text accessibilityRole="header" style={t.text.screenTitle}>{name || 'Your site'}</Text>
+          )}
+          <Text style={t.text.body}>Sign in with your {name || 'site'} account to write, edit sections and answer bookings from this device.</Text>
+        </View>
+        {!!auth.signedOutReason && <Notice tone="warn" title="Signed out">{auth.signedOutReason}</Notice>}
+        {!!auth.error && <Notice tone="error" title="Couldn’t sign in">{auth.error}</Notice>}
+        {site.isError && <Notice tone="warn">Can’t reach {siteUrl}. Check the address in .env and your connection.</Notice>}
+        <EditorButton variant="primary" label={busy ? 'Waiting for the browser…' : `Sign in with ${name || 'the site'}`} busy={busy} disabled={busy} onPress={() => { void auth.signIn(); }} />
+        <Text style={t.text.meta}>You’ll approve this device on the website. The app never sees your password, and you can sign it out any time from the site’s Users page.</Text>
+      </View>
+    </View>
+  );
+}

package/mobile-template/editor/components/TextTabs.tsx

@@ -0,0 +1,27 @@
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { useEditorTheme } from '@acms-subir/native/editor';
+
+/**
+ * Filters as text tabs (never pills): the active one is stronger text with a
+ * short underline. Scrolls sideways when there are many.
+ */
+export function TextTabs<T extends string>({ value, options, onChange, accessibilityLabel }: {
+  value: T; options: { value: T; label: string; count?: number }[]; onChange: (v: T) => void; accessibilityLabel?: string;
+}) {
+  const t = useEditorTheme();
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} accessibilityRole="tablist" accessibilityLabel={accessibilityLabel} contentContainerStyle={{ gap: 18, paddingRight: 8 }}>
+      {options.map((o) => {
+        const on = o.value === value;
+        return (
+          <Pressable key={o.value} accessibilityRole="tab" accessibilityState={{ selected: on }} onPress={() => onChange(o.value)} style={{ minHeight: 40, justifyContent: 'center' }}>
+            <Text style={{ color: on ? t.colors.text : t.colors.muted, fontWeight: on ? '700' : '500', fontSize: 15 }}>
+              {o.label}{o.count !== undefined ? <Text style={{ color: t.colors.muted, fontWeight: '500' }}>{` ${o.count}`}</Text> : null}
+            </Text>
+            <View style={{ height: 2, borderRadius: 1, marginTop: 4, backgroundColor: on ? t.colors.accent : 'transparent' }} />
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}

package/mobile-template/editor/eas.json

@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 16.0.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

package/mobile-template/editor/env.example

@@ -0,0 +1,5 @@
+# Your ACMS site (public origin). Only public values belong here: EXPO_PUBLIC_*
+# variables are bundled into the app. Never put passwords, API keys or tokens
+# in it: staff sign in through the site in the browser, and the app keeps
+# its per-device tokens in secure storage.
+EXPO_PUBLIC_ACMS_URL=https://example.com

package/mobile-template/editor/gitignore

@@ -0,0 +1,42 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+
+# generated native folders
+/ios
+/android

package/mobile-template/editor/lib/appearance.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+
+// Light / Dark / Auto for this session (Auto follows the device). Persist it
+// with expo-secure-store or AsyncStorage if people should keep their choice.
+export type Appearance = 'light' | 'dark' | 'auto';
+const Ctx = createContext<{ appearance: Appearance; setAppearance: (a: Appearance) => void }>({ appearance: 'auto', setAppearance: () => {} });
+
+export function AppearanceProvider({ children }: { children: ReactNode }) {
+  const [appearance, setAppearance] = useState<Appearance>('auto');
+  return <Ctx.Provider value={{ appearance, setAppearance }}>{children}</Ctx.Provider>;
+}
+export const useAppearance = () => useContext(Ctx);

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

@@ -0,0 +1,17 @@
+import Constants from 'expo-constants';
+import { redirectUriFor } from '@acms-subir/native/editor';
+
+// Set in .env (production site) or .env.local (written by `npx acms mobile dev`).
+export const siteUrl = process.env.EXPO_PUBLIC_ACMS_URL;
+
+// The app's scheme (app.json) doubles as its sign-in return address:
+//   iOS/Android: <scheme>://auth       web: <this web app's origin>/auth
+// Both must be listed in the site's astro.config.mjs:
+//   acms({ mobile: { editor: { redirectUris: ['<scheme>://auth'] } } })
+const configured = Constants.expoConfig?.scheme;
+export const scheme = (Array.isArray(configured) ? configured[0] : configured) || '__ACMS_APP_SCHEME__';
+export const redirectUri = redirectUriFor(scheme);
+
+// Shown on the site's approve screen and device list. The bundle id is a good,
+// stable choice (letters, digits, . _ : -).
+export const clientId = '__ACMS_BUNDLE_ID__';