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

package/mobile-template/recipes/editor-writer/files/app/write/new.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { Text, View } from 'react-native';
+import { Stack, router } from 'expo-router';
+import type { DocKind } from '@acms-subir/client';
+import { EditorButton, EditorInput, Notice, OptionGrid, Segmented, errorMessage, useCreateDocument, useEditorTheme, useMe } from '@acms-subir/native/editor';
+import { Screen } from '../../components/Screen';
+
+export default function NewDocumentScreen() {
+  const t = useEditorTheme();
+  const me = useMe();
+  const create = useCreateDocument();
+  const [kind, setKind] = useState<DocKind>('post');
+  const [title, setTitle] = useState('');
+  const collections = me.data?.features.collections ?? [];
+  const [collection, setCollection] = useState('');
+  const [date, setDate] = useState('');
+  const [time, setTime] = useState('');
+  const validDate = /^\d{4}-\d{2}-\d{2}$/.test(date), validTime = !time || /^([01]?\d|2[0-3]):[0-5]\d$/.test(time);
+  const ready = title.trim() && (kind !== 'event' || (validDate && validTime));
+  const submit = async () => {
+    const input = kind === 'post' ? { kind, title: title.trim(), ...(collection ? { collection } : {}) }
+      : kind === 'page' ? { kind, title: title.trim() }
+      : { kind, title: title.trim(), start: time ? `${date}T${time.padStart(5, '0')}` : date, allDay: !time };
+    const doc = await create.mutateAsync(input as never).catch(() => null);
+    if (doc) router.replace({ pathname: '/write/[kind]/[id]', params: { kind: doc.kind, id: doc.id } });
+  };
+  return (
+    <Screen maxWidth={640}>
+      <Stack.Screen options={{ title: 'New' }} />
+      <Segmented<DocKind> accessibilityLabel="What to write" value={kind} onChange={setKind} options={[
+        { value: 'post', label: collections.length === 1 ? collections[0].singular : 'Post' }, { value: 'page', label: 'Page' },
+        ...(me.data?.features.calendar ? [{ value: 'event' as const, label: 'Event' }] : []),
+      ]} />
+      <View style={{ gap: 6 }}>
+        <Text style={t.text.label}>Title</Text>
+        <EditorInput autoFocus value={title} onChangeText={setTitle} placeholder="A clear, short title" accessibilityLabel="Title" returnKeyType="next" />
+      </View>
+      {kind === 'post' && collections.length > 1 && (
+        <View style={{ gap: 6 }}>
+          <Text style={t.text.label}>Collection</Text>
+          <OptionGrid value={collection || collections[0].key} onChange={setCollection} options={collections.map((c) => ({ value: c.key, label: c.singular }))} />
+        </View>
+      )}
+      {kind === 'event' && (
+        <View style={{ flexDirection: 'row', gap: 10 }}>
+          <View style={{ flex: 1, gap: 6 }}>
+            <Text style={t.text.label}>Date</Text>
+            <EditorInput value={date} onChangeText={setDate} placeholder="YYYY-MM-DD" keyboardType="numbers-and-punctuation" invalid={!!date && !validDate} accessibilityLabel="Date" />
+          </View>
+          <View style={{ flex: 1, gap: 6 }}>
+            <Text style={t.text.label}>Start time</Text>
+            <EditorInput value={time} onChangeText={setTime} placeholder="19:30 (empty = all day)" keyboardType="numbers-and-punctuation" invalid={!validTime} accessibilityLabel="Start time" />
+          </View>
+        </View>
+      )}
+      {create.error && <Notice tone="error">{errorMessage(create.error)}</Notice>}
+      <EditorButton variant="primary" label="Create draft" busy={create.isPending} disabled={!ready || create.isPending} onPress={() => { void submit(); }} />
+      <Text style={t.text.meta}>It starts as a draft. Nothing is public until you publish.</Text>
+    </Screen>
+  );
+}

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

@@ -0,0 +1 @@
+export default { title: 'Write', description: 'Start a post, page or event', href: '/write/new', order: 20 };

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

@@ -0,0 +1,8 @@
+{
+  "kind": "editor",
+  "title": "Writer",
+  "description": "Start a post, page or event; edit title, summary, body (bold, italic, links, lists), tags and address; save drafts, publish or schedule; a clear “Keep mine / Use theirs” when someone saved first.",
+  "packages": [],
+  "routes": ["/write/new", "/write/[kind]/[id]"],
+  "next": ["It appears on Home (tools/writer.ts). With editor-content, the detail screen gets an Edit button.", "Bodies with images, embeds or cards from the website editor open read-only here (edit those on the website)."]
+}

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

@@ -0,0 +1,41 @@
+import { ActivityIndicator, Image, Linking, ScrollView, Text, View } from 'react-native';
+import { Stack, useLocalSearchParams } from 'expo-router';
+import { Button, ErrorView, EventDate, resolveUrl, useAcmsContext, useEvent, useLayout, useTheme } from '@acms-subir/native';
+import { addToCalendar } from '../../lib/addToCalendar';
+
+export default function EventScreen() {
+  const t = useTheme();
+  const { baseUrl } = useAcmsContext();
+  const { gutter } = useLayout();
+  const params = useLocalSearchParams<{ slug: string; start?: string; end?: string; allDay?: string }>();
+  // Search from the chosen occurrence's day so later occurrences are found too.
+  const from = params.start ? params.start.slice(0, 10) : undefined;
+  const { data: event, error, isPending, refetch } = useEvent(params.slug, from ? { from } : {});
+  if (error && !event) return <ErrorView error={error} retry={refetch} />;
+  if (isPending || !event) return <ActivityIndicator style={{ marginTop: 48 }} color={t.colors.accent} />;
+  const occurrence = { start: params.start ?? event.start, end: params.end ?? event.end, allDay: params.start ? params.allDay === '1' : event.allDay };
+  const image = resolveUrl(event.image, baseUrl);
+  const cta = event.cta.label ? resolveUrl(event.cta.href, baseUrl) : undefined;
+  return (
+    <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 760, alignSelf: 'center' }}>
+      <Stack.Screen options={{ title: event.title }} />
+      {image && <Image source={{ uri: image }} accessibilityLabel={event.imageAlt} style={{ width: '100%', aspectRatio: 16 / 9, borderRadius: t.radius, backgroundColor: t.colors.soft }} />}
+      <EventDate {...occurrence} timezone={event.timezone} style={{ color: t.colors.accent }} />
+      <Text accessibilityRole="header" style={t.styles.text.display}>{event.title}</Text>
+      {event.cancelled && <Text style={t.styles.text.heading}>This event is cancelled.</Text>}
+      {!!event.repeats && <Text style={t.styles.text.small}>{event.repeats}</Text>}
+      {!!(event.location.name || event.location.address) && (
+        <View style={{ gap: 2 }}>
+          {!!event.location.name && <Text style={t.styles.text.body}>{event.location.name}</Text>}
+          {!!event.location.address && <Text style={t.styles.text.muted}>{event.location.address}</Text>}
+        </View>
+      )}
+      {!!event.excerpt && <Text style={t.styles.text.body}>{event.excerpt}</Text>}
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
+        {!event.cancelled && <Button label="Add to calendar" onPress={() => addToCalendar(event, occurrence)} />}
+        {cta && <Button label={event.cta.label} variant="outline" onPress={() => Linking.openURL(cta)} />}
+        <Button label="Open on website" variant="outline" onPress={() => Linking.openURL(event.url)} />
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { FlatList, Pressable, RefreshControl, Text, View } from 'react-native';
+import { Stack, router } from 'expo-router';
+import { EventDate, ErrorView, useEvents, useLayout, useRefresh, useTheme } from '@acms-subir/native';
+
+// Next 60 days of events from the site's public calendars.
+const DAYS = 60;
+// Calendar days on this phone (the site reads them in its own time zone), not UTC:
+// in the evening UTC is already tomorrow, which would skip tonight's events.
+const day = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+const today = () => day(new Date());
+const plusDays = (n: number) => { const d = new Date(); d.setDate(d.getDate() + n); return day(d); };
+
+export default function EventsScreen() {
+  const t = useTheme();
+  const { columns, gutter, maxWidth } = useLayout();
+  const { refreshing, refresh } = useRefresh();
+  const { data, isPending, error, refetch } = useEvents({ from: today(), to: plusDays(DAYS), limit: 50 });
+  const cols = Math.min(columns, 2);
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Events' }} />
+      {error && !data ? <ErrorView error={error} retry={refetch} /> : (
+        <FlatList
+          key={cols}
+          numColumns={cols}
+          data={data?.occurrences ?? []}
+          keyExtractor={(o) => o.id}
+          style={{ backgroundColor: t.colors.bg }}
+          contentContainerStyle={{ padding: gutter, gap: 12, width: '100%', maxWidth, alignSelf: 'center' }}
+          columnWrapperStyle={cols > 1 ? { gap: 12 } : undefined}
+          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={refresh} tintColor={t.colors.muted} />}
+          ListEmptyComponent={isPending ? null : <Text style={t.styles.text.muted}>Nothing scheduled right now.</Text>}
+          renderItem={({ item: o }) => (
+            <Pressable
+              accessibilityRole="button"
+              onPress={() => router.push({ pathname: '/events/[slug]', params: { slug: o.event.slug, start: o.start, end: o.end, allDay: o.allDay ? '1' : '' } })}
+              style={({ pressed }) => [t.styles.card, { flex: 1, gap: 4, opacity: pressed ? 0.85 : 1 }]}
+            >
+              <EventDate start={o.start} end={o.end} allDay={o.allDay} timezone={o.event.timezone} style={{ color: t.colors.accent }} />
+              <Text style={[t.styles.text.heading, o.event.cancelled && { textDecorationLine: 'line-through' }]}>{o.event.title}</Text>
+              {!!o.event.location.name && <Text style={t.styles.text.small}>{o.event.location.name}</Text>}
+              {o.event.cancelled && <Text style={[t.styles.text.label, { color: t.colors.ink }]}>Cancelled</Text>}
+            </Pressable>
+          )}
+          ListFooterComponent={<View style={{ height: 24 }} />}
+        />
+      )}
+    </>
+  );
+}

package/mobile-template/recipes/events/files/lib/addToCalendar.ts

@@ -0,0 +1,27 @@
+import { Platform, Share } from 'react-native';
+import * as Calendar from 'expo-calendar';
+import type { Event } from '@acms-subir/client';
+
+// Opens the system "add event" sheet (no calendar permission needed). Where
+// that is unavailable (web, older devices) it falls back to sharing the event.
+export async function addToCalendar(event: Event, occurrence: { start: string; end: string; allDay: boolean }) {
+  const details = {
+    title: event.title,
+    startDate: new Date(occurrence.start),
+    endDate: new Date(occurrence.end),
+    allDay: occurrence.allDay,
+    location: [event.location.name, event.location.address].filter(Boolean).join(', '),
+    notes: [event.excerpt, event.url].filter(Boolean).join('\n\n'),
+    url: event.url,
+    timeZone: event.timezone,
+  };
+  if (Platform.OS !== 'web') {
+    try {
+      await Calendar.createEventInCalendarAsync(details);
+      return;
+    } catch {
+      // fall through to sharing
+    }
+  }
+  await Share.share({ title: event.title, message: [event.title, details.location, event.url].filter(Boolean).join('\n'), url: event.icsUrl || event.url });
+}

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

@@ -0,0 +1,15 @@
+{
+  "kind": "client",
+  "title": "Events",
+  "description": "Upcoming events list, event detail and add to calendar (with a share fallback).",
+  "packages": [
+    "expo-calendar"
+  ],
+  "routes": [
+    "/events",
+    "/events/[slug]"
+  ],
+  "next": [
+    "Link to it from a screen: <Link href=\"/events\">Events</Link> (expo-router)"
+  ]
+}

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

@@ -0,0 +1,25 @@
+import { ActivityIndicator, Image, Linking, ScrollView, Text } from 'react-native';
+import { Stack, useLocalSearchParams } from 'expo-router';
+import { Button, ErrorView, RichText, resolveUrl, useAcmsContext, useLayout, useLocale, usePost, useTheme } from '@acms-subir/native';
+
+export default function ArticleScreen() {
+  const t = useTheme();
+  const { baseUrl } = useAcmsContext();
+  const { locale } = useLocale();
+  const { gutter } = useLayout();
+  const { slug, collection } = useLocalSearchParams<{ slug: string; collection?: string }>();
+  const { data: post, error, isPending, refetch } = usePost(slug, collection ? { collection } : {});
+  if (error && !post) return <ErrorView error={error} retry={refetch} />;
+  if (isPending || !post) return <ActivityIndicator style={{ marginTop: 48 }} color={t.colors.accent} />;
+  const image = resolveUrl(post.image, baseUrl);
+  return (
+    <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 720, alignSelf: 'center' }}>
+      <Stack.Screen options={{ title: '' }} />
+      <Text accessibilityRole="header" style={t.styles.text.display}>{post.title}</Text>
+      {!!post.publishedAt && <Text style={t.styles.text.small}>{new Date(post.publishedAt).toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' })}</Text>}
+      {image && <Image source={{ uri: image }} accessibilityLabel={post.imageAlt} style={{ width: '100%', aspectRatio: 16 / 9, borderRadius: t.radius, backgroundColor: t.colors.soft }} />}
+      <RichText html={post.content.html} />
+      <Button label="Open on website" variant="outline" onPress={() => Linking.openURL(post.url)} />
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { ActivityIndicator, FlatList, Image, Pressable, RefreshControl, Text } from 'react-native';
+import { Stack, router } from 'expo-router';
+import { ErrorView, resolveUrl, useAcmsContext, useLayout, useLocale, usePosts, useRefresh, useTheme } from '@acms-subir/native';
+
+export default function NewsScreen() {
+  const t = useTheme();
+  const { baseUrl } = useAcmsContext();
+  const { locale } = useLocale();
+  const { columns, gutter, maxWidth } = useLayout();
+  const { refreshing, refresh } = useRefresh();
+  // Pass { collection: 'blog' } to show a single collection.
+  const posts = usePosts({ limit: 20 });
+  const cols = Math.min(columns, 3);
+  const date = (iso: string | null) => (iso ? new Date(iso).toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' }) : '');
+  if (posts.error && !posts.data) return <ErrorView error={posts.error} retry={() => posts.refetch()} />;
+  return (
+    <>
+      <Stack.Screen options={{ title: 'News' }} />
+      <FlatList
+        key={cols}
+        numColumns={cols}
+        data={posts.items}
+        keyExtractor={(p) => p.id}
+        style={{ backgroundColor: t.colors.bg }}
+        contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth, alignSelf: 'center' }}
+        columnWrapperStyle={cols > 1 ? { gap: 16 } : undefined}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={refresh} tintColor={t.colors.muted} />}
+        onEndReachedThreshold={0.5}
+        onEndReached={() => { if (posts.hasNextPage && !posts.isFetchingNextPage) posts.fetchNextPage(); }}
+        ListEmptyComponent={posts.isPending ? <ActivityIndicator color={t.colors.accent} /> : <Text style={t.styles.text.muted}>No posts yet.</Text>}
+        ListFooterComponent={posts.isFetchingNextPage ? <ActivityIndicator style={{ margin: 16 }} color={t.colors.accent} /> : null}
+        renderItem={({ item }) => {
+          const image = resolveUrl(item.image, baseUrl);
+          return (
+            <Pressable
+              accessibilityRole="button"
+              onPress={() => router.push({ pathname: '/news/[slug]', params: { slug: item.slug, collection: item.collection ?? '' } })}
+              style={({ pressed }) => [t.styles.card, { flex: 1, gap: 8, opacity: pressed ? 0.85 : 1 }]}
+            >
+              {image && <Image source={{ uri: image }} accessibilityLabel={item.imageAlt} style={{ width: '100%', aspectRatio: 16 / 9, borderRadius: Math.max(0, t.radius - 2), backgroundColor: t.colors.soft }} />}
+              <Text style={t.styles.text.small}>{date(item.publishedAt)}</Text>
+              <Text style={t.styles.text.heading}>{item.title}</Text>
+              {!!item.excerpt && <Text style={t.styles.text.muted} numberOfLines={3}>{item.excerpt}</Text>}
+            </Pressable>
+          );
+        }}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+{
+  "kind": "client",
+  "title": "News",
+  "description": "Posts list with infinite scroll and an article screen with rich text.",
+  "packages": [],
+  "routes": [
+    "/news",
+    "/news/[slug]"
+  ],
+  "next": [
+    "Link to it from a screen: <Link href=\"/news\">News</Link> (expo-router)"
+  ]
+}

package/mobile-template/recipes/push/files/app/notifications.tsx

@@ -0,0 +1,64 @@
+import { Linking, ScrollView, Switch, Text, View } from 'react-native';
+import { Stack } from 'expo-router';
+import { Button, useLayout, usePushRegistration, usePushTopics, useTheme } from '@acms-subir/native';
+import { STARTING_TOPICS } from '../lib/push';
+
+// Turn notifications on, choose topics, or turn them off. Topics and their
+// names come from the site, so new calendars or collections appear here
+// without an app update.
+export default function NotificationsScreen() {
+  const t = useTheme();
+  const { gutter } = useLayout();
+  const push = usePushRegistration({ topics: STARTING_TOPICS });
+  const offered = usePushTopics();
+  const toggle = (id: string, on: boolean) => {
+    const next = on ? [...push.topics, id] : push.topics.filter((x) => x !== id);
+    push.setTopics(next).catch(() => {});
+  };
+  return (
+    <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 640, alignSelf: 'center' }}>
+      <Stack.Screen options={{ title: 'Notifications' }} />
+      <Text accessibilityRole="header" style={t.styles.text.title}>Stay in the loop</Text>
+      <Text style={t.styles.text.muted}>Get a notification when something new is posted or an event is about to start.</Text>
+
+      {push.status === 'checking' || push.status === 'registering' ? (
+        <Text style={t.styles.text.small}>One moment…</Text>
+      ) : push.status === 'idle' ? (
+        <Button label="Turn on notifications" onPress={() => { push.register(); }} />
+      ) : push.status === 'denied' ? (
+        <View style={[t.styles.card, { gap: 12 }]}>
+          <Text style={t.styles.text.body}>Notifications are off for this app. Turn them on in Settings.</Text>
+          <Button variant="outline" label="Open Settings" onPress={() => { Linking.openSettings().catch(() => {}); }} />
+        </View>
+      ) : push.status === 'unsupported' || push.status === 'error' ? (
+        <View style={[t.styles.card, { gap: 12 }]}>
+          <Text style={t.styles.text.body}>{push.error}</Text>
+          {push.status === 'error' && <Button variant="outline" label="Try again" onPress={() => { push.register(); }} />}
+        </View>
+      ) : (
+        <>
+          <Text style={t.styles.text.label}>Notify me about</Text>
+          <View style={[t.styles.card, { paddingVertical: 4 }]}>
+            {offered.isError ? (
+              <Text style={[t.styles.text.small, { paddingVertical: 12 }]}>Topics are unavailable right now.</Text>
+            ) : !offered.data ? (
+              <Text style={[t.styles.text.small, { paddingVertical: 12 }]}>Loading…</Text>
+            ) : offered.data.topics.map((topic, i) => (
+              <View key={topic.id} style={{ flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 52, borderTopWidth: i ? 1 : 0, borderTopColor: t.colors.line }}>
+                <Text style={[t.styles.text.body, { flex: 1 }]}>{topic.label}</Text>
+                <Switch
+                  accessibilityLabel={topic.label}
+                  value={push.topics.includes(topic.id)}
+                  onValueChange={(on) => toggle(topic.id, on)}
+                  trackColor={{ true: t.colors.accent, false: t.colors.line }}
+                />
+              </View>
+            ))}
+          </View>
+          <Text style={t.styles.text.small}>Announcements from the site reach everyone with notifications on.</Text>
+          <Button variant="outline" label="Turn off notifications" onPress={() => { push.unregister().catch(() => {}); }} />
+        </>
+      )}
+    </ScrollView>
+  );
+}

package/mobile-template/recipes/push/files/components/PushSetup.tsx

@@ -0,0 +1,15 @@
+import { usePushRegistration, useNotificationTaps } from '@acms-subir/native';
+import { STARTING_TOPICS } from '../lib/push';
+
+// Mount once inside <AcmsProvider> (app/_layout.tsx):
+//   <AcmsProvider baseUrl={baseUrl} onNavigate={...}><PushSetup /><ThemedStack /></AcmsProvider>
+// - If notifications are already on, re-registers quietly on each start (the
+//   site removes devices that stop checking in) and keeps the language current.
+//   It never asks for permission; the /notifications screen does.
+// - Tapped notifications open their page: site pages go to the provider's
+//   onNavigate (route /events/<slug> to your own screens there), else the browser.
+export function PushSetup() {
+  usePushRegistration({ topics: STARTING_TOPICS });
+  useNotificationTaps();
+  return null;
+}

package/mobile-template/recipes/push/files/lib/push.ts

@@ -0,0 +1,15 @@
+import * as Notifications from 'expo-notifications';
+
+// Show notifications while the app is open, too (the site sends a title,
+// message and a link in data.url / data.path).
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({ shouldShowBanner: true, shouldShowList: true, shouldPlaySound: true, shouldSetBadge: false }),
+});
+
+/**
+ * Topics a device starts with the first time it registers. Ids come from the
+ * site (GET /api/v1/push/topics): "news" = every new post, "events" = every new
+ * event, plus "collection:<key>" / "calendar:<slug>" when the site has several.
+ * Ones the site doesn't offer are ignored. People change them on /notifications.
+ */
+export const STARTING_TOPICS = ['news', 'events'];

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

@@ -0,0 +1,20 @@
+{
+  "kind": "client",
+  "title": "Push notifications",
+  "description": "Turn-on screen with topic toggles from the site, silent re-registration on each start, and taps that open the page. Needs push turned on for the site.",
+  "packages": [
+    "expo-notifications",
+    "expo-device"
+  ],
+  "routes": [
+    "/notifications"
+  ],
+  "next": [
+    "Turn push on for the site: acms({ mobile: { push: true } }) in astro.config.mjs, then restart or deploy",
+    "Add \"expo-notifications\" to the plugins list in app.json",
+    "Push tokens need an EAS project id: npx eas-cli init (saves extra.eas.projectId in app.json)",
+    "Mount <PushSetup /> inside <AcmsProvider> in app/_layout.tsx (re-registers on start, opens tapped notifications)",
+    "Link to the screen: <Link href=\"/notifications\">Notifications</Link> (expo-router)",
+    "Send from the site: Admin → Mobile app"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.3-next.20260929113209",
+  "version": "0.3.4",
   "publishConfig": {
     "access": "public"
   },
@@ -51,7 +51,9 @@
     "deploy",
     "ops-check.mjs",
     "cli",
-    "docs"
+    "docs",
+    "section-library",
+    "mobile-template"
   ],
   "dependencies": {
     "@cloudflare/workers-types": "^5.20260927.1",
@@ -59,15 +61,17 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@libsql/client": "^0.15.0",
-    "@tiptap/core": "^3.30.1",
-    "@tiptap/extension-code-block-lowlight": "^3.30.1",
+    "@tiptap/core": "3.30.1",
+    "@tiptap/extension-bubble-menu": "3.30.1",
+    "@tiptap/extension-code-block-lowlight": "3.30.1",
+    "@tiptap/extension-floating-menu": "3.30.1",
     "@tiptap/extension-highlight": "3.30.1",
-    "@tiptap/extension-table": "^3.30.1",
-    "@tiptap/extensions": "^3.30.1",
-    "@tiptap/pm": "^3.30.1",
-    "@tiptap/react": "^3.30.1",
-    "@tiptap/starter-kit": "^3.30.1",
-    "@tiptap/suggestion": "^3.30.1",
+    "@tiptap/extension-table": "3.30.1",
+    "@tiptap/extensions": "3.30.1",
+    "@tiptap/pm": "3.30.1",
+    "@tiptap/react": "3.30.1",
+    "@tiptap/starter-kit": "3.30.1",
+    "@tiptap/suggestion": "3.30.1",
     "franc-min": "^6.2.0",
     "hast-util-to-html": "^9.0.5",
     "lowlight": "^3.3.0",
@@ -76,12 +80,12 @@
     "pdfjs-dist": "^6.3.289",
     "prismjs": "^1.30.0",
     "sanitize-html": "^2.17.7",
+    "semver": "^7.7.2",
     "simple-icons": "^16.27.1",
+    "tar": "^7.5.1",
     "turndown": "^7.2.4",
     "zod": "^3.24.0",
-    "zod-to-json-schema": "^3.25.2",
-    "semver": "^7.7.2",
-    "tar": "^7.5.1"
+    "zod-to-json-schema": "^3.25.2"
   },
   "peerDependencies": {
     "@astrojs/cloudflare": "^12.6.13",

package/section-library/README.md

@@ -0,0 +1,16 @@
+# Section library
+
+Starter sections for ACMS themes. Copy one into a project theme with:
+
+```sh
+npx acms section add service-times --theme <slug>
+```
+
+Each folder holds `section.json` (the definition merged into `theme.json`, plus
+example data) and one Astro component. Once copied, the section is yours:
+change the markup and CSS freely. Keep the field keys stable (or bump
+`version` and add `migrations/<type>.mjs`) so saved content keeps working.
+
+All styling uses the public theme tokens (`--accent`, `--ink`, `--muted`,
+`--panel`, `--soft`, `--line`, `--r`, `--font-heading`, …), so a section
+follows whichever palette, radius and fonts the theme sets.

package/section-library/contact/Contact.astro

@@ -0,0 +1,49 @@
+---
+import type { SectionProps, LinkValue } from '@acms-subir/core/theme';
+interface Data { heading: string; address: string; directions: LinkValue; hours: { days: string; hours: string }[]; phone: string; email: string; image: string; imageFocus: string; alt: string }
+const { data, variant } = Astro.props as SectionProps<Data>;
+const hours = data.hours.filter((h) => h.days || h.hours);
+const tel = data.phone.replace(/[^\d+]/g, '');
+const email = /^[^\s@<>"]+@[^\s@<>"]+\.[^\s@<>"]+$/.test(data.email.trim()) ? data.email.trim() : '';
+---
+<div class:list={['visit', `is-${variant}`, { 'has-image': data.image }]}>
+  <div class="visit-where">
+    <h2>{data.heading}</h2>
+    {data.address && <address>{data.address}</address>}
+    {data.directions?.href && <a class="w-btn outline" href={data.directions.href} rel="noopener">{data.directions.label || 'Get directions'}</a>}
+  </div>
+  {(hours.length > 0 || tel || email) && (
+    <div class="visit-when">
+      {hours.length > 0 && (
+        <dl class="visit-hours">
+          {hours.map((h) => <><dt>{h.days}</dt><dd>{h.hours}</dd></>)}
+        </dl>
+      )}
+      {(tel || email) && (
+        <p class="visit-contact">
+          {tel && <a href={`tel:${tel}`}>{data.phone}</a>}
+          {email && <a href={`mailto:${email}`}>{email}</a>}
+        </p>
+      )}
+    </div>
+  )}
+  {data.image && <img class="visit-photo" src={data.image} alt={data.alt} loading="lazy" style={`object-position:${data.imageFocus}`} />}
+</div>
+<style>
+  /* desktop: where | when (| photo); stacks on narrow screens */
+  .visit { display: grid; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: start; }
+  .visit.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .visit.is-split.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
+  .visit h2 { margin: 0 0 0.75rem; }
+  address { font-style: normal; white-space: pre-line; font-size: 1.1rem; margin-bottom: 1rem; }
+  .visit-when { padding: 1.25rem 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
+  .visit-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.5rem; margin: 0; }
+  dt { color: var(--muted); }
+  dd { margin: 0; font-variant-numeric: tabular-nums; }
+  .visit-contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
+  .visit-hours:empty + .visit-contact, .visit-when > .visit-contact:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
+  .visit-contact a { color: var(--accent-text, var(--accent)); }
+  .visit-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
+  @media (max-width: 960px) { .visit.is-split.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .visit.is-split.has-image .visit-photo { grid-column: 1 / -1; } }
+  @media (max-width: 680px) { .visit.is-split, .visit.is-split.has-image { grid-template-columns: 1fr; } }
+</style>