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

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.3",
   "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",

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>

package/section-library/contact/section.json

@@ -0,0 +1,106 @@
+{
+  "type": "contact",
+  "definition": {
+    "name": "Visit us",
+    "version": 1,
+    "component": "sections/Contact.astro",
+    "description": "Address, opening hours, phone and email, with a directions link.",
+    "variants": [
+      "split",
+      "stacked"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Visit us"
+      },
+      "address": {
+        "label": "Address",
+        "type": "textarea",
+        "default": "",
+        "translatable": false
+      },
+      "directions": {
+        "label": "Directions link",
+        "type": "link",
+        "help": "A Google or Apple Maps link to the address."
+      },
+      "hours": {
+        "label": "Opening hours",
+        "type": "list",
+        "itemLabel": "days",
+        "max": 14,
+        "fields": {
+          "days": {
+            "label": "Days",
+            "type": "text",
+            "placeholder": "Mon – Fri"
+          },
+          "hours": {
+            "label": "Hours",
+            "type": "text",
+            "placeholder": "9:00 – 17:00",
+            "translatable": false
+          }
+        }
+      },
+      "phone": {
+        "label": "Phone",
+        "type": "text",
+        "default": "",
+        "translatable": false
+      },
+      "email": {
+        "label": "Email",
+        "type": "text",
+        "default": "",
+        "translatable": false
+      },
+      "image": {
+        "label": "Photo of the building",
+        "type": "image",
+        "default": ""
+      },
+      "alt": {
+        "label": "Photo description",
+        "type": "text",
+        "default": ""
+      }
+    },
+    "category": "Info",
+    "example": {
+      "address": "120 Elm Street\nSpringfield",
+      "directions": {
+        "label": "Get directions",
+        "href": "https://maps.google.com/?q=120+Elm+Street"
+      },
+      "hours": [
+        {
+          "days": "Office · Mon – Thu",
+          "hours": "9:00 – 16:00"
+        }
+      ],
+      "phone": "(555) 010-2030",
+      "email": "hello@example.org"
+    }
+  },
+  "example": {
+    "variant": "split",
+    "data": {
+      "address": "120 Elm Street\nSpringfield",
+      "directions": {
+        "label": "Get directions",
+        "href": "https://maps.google.com/?q=120+Elm+Street"
+      },
+      "hours": [
+        {
+          "days": "Office · Mon – Thu",
+          "hours": "9:00 – 16:00"
+        }
+      ],
+      "phone": "(555) 010-2030",
+      "email": "hello@example.org"
+    }
+  }
+}

package/section-library/cta-band/CtaBand.astro

@@ -0,0 +1,28 @@
+---
+import type { SectionProps, LinkValue } from '@acms-subir/core/theme';
+interface Data { heading: string; text: string; primary: LinkValue; secondary: LinkValue }
+const { data, variant } = Astro.props as SectionProps<Data>;
+const buttons = [data.primary, data.secondary].filter((b) => b?.label && b.href);
+---
+<div class:list={['cta', `is-${variant}`]}>
+  <div class="cta-copy">
+    <h2>{data.heading}</h2>
+    {data.text && <p>{data.text}</p>}
+  </div>
+  {buttons.length > 0 && (
+    <div class="cta-actions">
+      {buttons.map((b, i) => <a class:list={['w-btn', i === 0 ? 'primary' : 'outline']} href={b.href}>{b.label}</a>)}
+    </div>
+  )}
+</div>
+<style>
+  .cta { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; padding: clamp(1.75rem, 5vw, 3rem); border-radius: var(--r-lg); }
+  .cta.is-accent { background: var(--accent); color: var(--btn-ink, #fff); }
+  .cta.is-quiet { background: var(--soft); }
+  .cta-copy { max-width: 40rem; }
+  .cta h2 { margin: 0; }
+  .cta p { margin: 0.5rem 0 0; opacity: 0.85; }
+  .cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
+  .cta.is-accent :global(.w-btn.primary) { background: var(--bg); color: var(--ink); }
+  .cta.is-accent :global(.w-btn.outline) { background: transparent; color: inherit; border-color: currentColor; }
+</style>

package/section-library/cta-band/section.json

@@ -0,0 +1,51 @@
+{
+  "type": "cta-band",
+  "definition": {
+    "name": "Call-to-action band",
+    "version": 1,
+    "component": "sections/CtaBand.astro",
+    "description": "A bold band that asks people to do one thing.",
+    "variants": [
+      "accent",
+      "quiet"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "New here?"
+      },
+      "text": {
+        "label": "Text",
+        "type": "textarea",
+        "default": ""
+      },
+      "primary": {
+        "label": "Main button",
+        "type": "link"
+      },
+      "secondary": {
+        "label": "Second button",
+        "type": "link"
+      }
+    },
+    "category": "Calls to action",
+    "example": {
+      "text": "We’d love to meet you. Tell us you’re coming and we’ll save you a seat.",
+      "primary": {
+        "label": "Plan a visit",
+        "href": "/visit"
+      }
+    }
+  },
+  "example": {
+    "variant": "accent",
+    "data": {
+      "text": "We’d love to meet you. Tell us you’re coming and we’ll save you a seat.",
+      "primary": {
+        "label": "Plan a visit",
+        "href": "/visit"
+      }
+    }
+  }
+}