@acms-subir/core 0.3.32 → 0.3.33

package/src/lib/repo/migrations.ts

@@ -8,6 +8,7 @@ import { CALENDAR_SETTINGS_MIGRATION, ROOM_HOLD_MIGRATION } from '../calendar/mi
 import { PLACES_MIGRATION } from '../maps/migration';
 import { ROLES_MIGRATION } from '../permissions/migration';
 import { SYNC_MIGRATION } from '../sync/migration';
+import { ANNOUNCEMENT_TABLE, ANNOUNCEMENT_VISIBLE_COLUMNS } from '../announcements/migration';
 // Versioned schema migrations shared by the two SQLite-dialect adapters
 // (D1 and libSQL). Applied versions are recorded in the `migrations` table;
 // each adapter's runner applies whatever is newer, in order, at startup.
@@ -676,6 +677,8 @@ export const MIGRATIONS: Migration[] = [
     `DROP TRIGGER content_version_settings_update`,
     ...contentVersionTriggers('settings', [...CONTENT_VERSION_COLUMNS.settings, 'links_verified', 'links_avatar_shape', 'links_avatar_fit', 'links_avatar_scale', 'legal']),
   ] },
+  // announcements show on public pages, the banner and the app API
+  { version: 58, statements: [...ANNOUNCEMENT_TABLE, ...contentVersionTriggers('announcements', ANNOUNCEMENT_VISIBLE_COLUMNS)] },
 ];
 
 // Current cache coverage; keep earlier migration inputs frozen for upgrade compatibility.
@@ -683,6 +686,7 @@ export const CURRENT_CONTENT_VERSION_COLUMNS = {
   ...CONTENT_VERSION_COLUMNS,
   settings: [...CONTENT_VERSION_COLUMNS.settings, 'links_verified', 'links_avatar_shape', 'links_avatar_fit', 'links_avatar_scale', 'legal'],
   events: [...CONTENT_VERSION_COLUMNS.events, 'cancelled_dates'],
+  announcements: ANNOUNCEMENT_VISIBLE_COLUMNS,
 };
 
 export const LATEST_VERSION = MIGRATIONS[MIGRATIONS.length - 1].version;

package/src/lib/repo/sql.ts

@@ -5,6 +5,7 @@ import { FormStore, formInsert, submissionInsert } from '../forms/store';
 import { GuestStore } from '../mobile/guest-store';
 import { LiveStore } from '../live/store';
 import { PushStore } from '../push/store';
+import { AnnouncementStore, announcementInsert } from '../announcements/store';
 import { EditorStore } from '../editor/store';
 import { PermissionStore } from '../permissions/store';
 import { BackupStore } from '../backup/store';
@@ -276,6 +277,7 @@ export class SqlRepository implements ContentRepository {
   readonly guests: GuestStore;
   readonly live: LiveStore;
   readonly push: PushStore;
+  readonly announcements: AnnouncementStore;
   readonly editor: EditorStore;
   readonly backups: BackupStore;
   readonly permissions: PermissionStore;
@@ -287,6 +289,7 @@ export class SqlRepository implements ContentRepository {
     this.guests = new GuestStore(async () => { await this.ready; return this.driver; });
     this.live = new LiveStore(async () => { await this.ready; return this.driver; });
     this.push = new PushStore(async () => { await this.ready; return this.driver; });
+    this.announcements = new AnnouncementStore(async () => { await this.ready; return this.driver; });
     this.editor = new EditorStore(async () => { await this.ready; return this.driver; });
     this.backups = new BackupStore(async () => { await this.ready; return this.driver; });
     this.auth = new AuthStore(async () => { await this.ready; return this.driver; });
@@ -1823,6 +1826,9 @@ export class SqlRepository implements ContentRepository {
           JSON.stringify(e.hostIds ?? []), e.request ? JSON.stringify(e.request) : null,
         ],
       })),
+      // announcements (a backup made before them leaves the current ones). Restored
+      // rows never push again here: the push ledger keeps announcement:<id>
+      ...(content.announcements ? [{ sql: 'DELETE FROM announcements' }, ...content.announcements.map(announcementInsert)] : []),
       ...(content.forms ?? []).map(formInsert),
       ...(content.formSubmissions ?? []).map(submissionInsert),
       ...(content.resources ?? []).map((r) => this.resourceInsert(r)),

package/src/lib/repo/types.ts

@@ -8,6 +8,8 @@ import type { LiveStore } from '../live/store';
 import type { BookingRequest } from '../backup/content';
 import type { EmailStore } from '../email/store';
 import type { PushStore } from '../push/store';
+import type { AnnouncementStore } from '../announcements/store';
+import type { Announcement } from '../announcements/types';
 import type { EditorStore } from '../editor/store';
 import type { PermissionStore } from '../permissions/store';
 export interface ImportRun { id: string; source: string; label: string; status: 'running' | 'done' | 'undone'; report: Record<string, unknown>; createdAt: number; updatedAt: number }
@@ -62,6 +64,7 @@ export interface ContentRepository {
   readonly guests: GuestStore;
   readonly live: LiveStore;
   readonly push: PushStore;
+  readonly announcements: AnnouncementStore;
   readonly editor: EditorStore;
   readonly permissions: PermissionStore;
   // Bounded public catalog; fetch limit + 1 IDs without loading every body.
@@ -319,6 +322,8 @@ export interface ContentRepository {
     places?: Place[];
     forms?: SavedForm[];
     formSubmissions?: FormSubmission[];
+    // added with announcements; a backup without them leaves the current ones
+    announcements?: Announcement[];
   }, authRecovery?: { issuer: string; subject: string; userId: string }): Promise<void>;
 
   // imports (lib/import/apply.ts drives these). writeImported is the

package/src/lib/scheduler.ts

@@ -4,6 +4,7 @@ import { processDueDeliveries } from './webhooks';
 import { dispatchEmail } from './email/service';
 import { decideOverdue, sendDueReminders } from './booking/service';
 import { runPushJobs } from './push/service';
+import { runAnnouncementJobs } from './announcements/service';
 import { GUEST_IDLE_MS } from './mobile/guest-store';
 import { pushHeartbeat, pushUrlFor } from './monitoring';
 import { syncCachePurge } from './cache/purge';
@@ -22,6 +23,8 @@ export async function runScheduledTasks(repo: ContentRepository, locals?: unknow
     approvals: () => decideOverdue(repo, { origin: settings.siteUrl, locals, now: startedAt }),
     email: () => dispatchEmail(repo, locals, 10),
     live: () => syncDueLive(repo, locals),
+    // scheduled announcements go up (with their push) and ended ones come down
+    announcements: () => runAnnouncementJobs(repo, { locals, now: startedAt }),
     // queued first-publish notices, starting-soon reminders, receipts, retention
     push: () => runPushJobs(repo, { locals, now: startedAt }),
     // expired guest sign-in codes and app sessions unused for 90 days

package/src/lib/schema.ts

@@ -710,6 +710,7 @@ export const WEBHOOK_EVENTS = [
   'design.published', 'media.created', 'media.updated', 'media.deleted', 'site.restored',
   'event.published', 'event.updated', 'event.unpublished', 'event.deleted',
   'booking.created', 'booking.confirmed', 'booking.declined', 'booking.cancelled', 'booking.rescheduled',
+  'announcement.published',
 ] as const;
 export type WebhookEventType = (typeof WEBHOOK_EVENTS)[number];
 

package/src/pages/admin/announcements.astro

@@ -0,0 +1,18 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import Announcements from '../../components/Announcements';
+import { getRepo } from '../../lib/repo';
+import { forbiddenUnless } from '../../lib/permissions/access';
+const repo = await getRepo(Astro.locals);
+const denied = await forbiddenUnless(Astro.request, Astro.cookies, repo, 'services.manage');
+if (denied) return denied;
+---
+<Admin title="Announcements" section="announcements">
+  <div class="page-head">
+    <div>
+      <h1>Announcements</h1>
+      <p class="sub">Write it once: it goes on the announcements list, as a banner and, if you choose, as a push to the app.</p>
+    </div>
+  </div>
+  <Announcements client:only="react" />
+</Admin>

package/src/pages/admin/integrations.astro

@@ -5,6 +5,7 @@ import { getRepo } from '../../lib/repo';
 import { API_SCOPES, WEBHOOK_EVENTS, type ApiScope } from '../../lib/schema';
 import { accessFor } from '../../lib/permissions/access';
 import { CALENDAR, bookingsEnabled } from '../../lib/calendar/config';
+import { ANNOUNCEMENTS } from '../../lib/announcements/config';
 import { issueApiKey } from '../../lib/api-keys';
 import { sessionRole } from '../../lib/api';
 import { attemptDelivery, generateWebhookSecret, validateWebhookUrl } from '../../lib/webhooks';
@@ -243,7 +244,7 @@ MAPS_API_KEY=…`}</pre>
       <input type="hidden" name="op" value="hook" />
       <label class="field"><span>Endpoint URL</span><input type="url" class="mono" name="url" placeholder="https://hooks.zapier.com/…" required /></label>
       <div class="field"><span>Send these events</span>
-        {WEBHOOK_EVENTS.filter((e) => (CALENDAR.enabled || !e.startsWith('event.')) && (bookingsEnabled() || !e.startsWith('booking.'))).map((e) => <label class="check-row"><input type="checkbox" name="events" value={e} checked={e === 'post.published' || e === 'page.published'} /> <code>{e}</code></label>)}
+        {WEBHOOK_EVENTS.filter((e) => (CALENDAR.enabled || !e.startsWith('event.')) && (bookingsEnabled() || !e.startsWith('booking.')) && (ANNOUNCEMENTS.enabled || !e.startsWith('announcement.'))).map((e) => <label class="check-row"><input type="checkbox" name="events" value={e} checked={e === 'post.published' || e === 'page.published'} /> <code>{e}</code></label>)}
       </div>
       <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Add endpoint</button></div>
       <p class="hint modal-note">Deliveries are signed and retried 3 times over about an hour.</p>

package/src/pages/admin/settings.astro

@@ -4,6 +4,7 @@ import AiSettings from '../../components/AiSettings';
 import MonitoringSettings from '../../components/MonitoringSettings';
 import LegalSettings from '../../components/LegalSettings';
 import { LEGAL } from '../../lib/legal/config';
+import { ANNOUNCEMENTS } from '../../lib/announcements/config';
 import { getRepo } from '../../lib/repo';
 import { accessFor } from '../../lib/permissions/access';
 import type { Permission } from '../../lib/permissions/catalog';
@@ -381,6 +382,7 @@ const groups = [
             <label class="field"><span>Link (optional)</span><input type="text" name="annLink" value={settings.announcement.link} placeholder={`${CONTENT.posts.base}/announcement`} /></label>
           </div>
           <label class="check-row"><input type="checkbox" name="annDismissible" checked={settings.announcement.dismissible} /><span>Visitors can dismiss it <span class="hint">(remembered per browser until the text changes)</span></span></label>
+          {ANNOUNCEMENTS.enabled && <p class="hint">A pinned announcement (<a href="/admin/announcements">Announcements</a>) shows here instead while it’s up, in each language and on a schedule.</p>}
         </form>
       </section>
 

package/src/pages/announcements/[id].astro

@@ -0,0 +1,35 @@
+---
+import Site from '../../layouts/Site.astro';
+import { getRepo } from '../../lib/repo';
+import { requestLocale, localePath } from '../../lib/i18n';
+import { siteLang } from '../../lib/dates';
+import { ANNOUNCEMENTS } from '../../lib/announcements/config';
+import { isLive } from '../../lib/announcements/service';
+import { announcementStrings } from '../../lib/announcements/words';
+import { announcementView } from '../../lib/announcements/pages';
+import '../../styles/announcements-site.css';
+
+// One announcement while it's up (404 before it goes up and after it comes
+// down). Pushes without a button open this page.
+if (!ANNOUNCEMENTS.enabled || !ANNOUNCEMENTS.pages) return new Response(null, { status: 404, statusText: 'Not found' });
+const repo = await getRepo(Astro.locals);
+const id = Astro.params.id ?? '';
+const now = Date.now();
+const a = id.length <= 100 ? await repo.announcements.get(id) : null;
+if (!a || !isLive(a, now) || !(a.listed || a.pinned)) return new Response(null, { status: 404, statusText: 'Not found' });
+const settings = await repo.getSettings();
+const locale = requestLocale(Astro.url, Astro.locals);
+const lang = locale || siteLang(settings);
+const t = announcementStrings(lang);
+const v = announcementView(a, locale, lang, settings.timezone || 'UTC', now);
+---
+<Site title={v.title} description={v.message}>
+  <article class="ann-page ann-detail" data-kind={v.kind}>
+    <p class="ann-back"><a href={localePath(ANNOUNCEMENTS.base, locale)}>← {t.back}</a></p>
+    <p class="ann-meta"><span class="ann-kind">{v.kindLabel}</span> · <time datetime={v.iso}>{v.date}</time>{v.until && <> · {v.until}</>}</p>
+    <h1>{v.title}</h1>
+    {v.message && <p class="ann-lead">{v.message}</p>}
+    {v.details.map((p) => <p>{p}</p>)}
+    {v.button && <p><a class="ann-button" href={v.button.href} rel={v.button.external ? 'noopener' : undefined}>{v.button.label}</a></p>}
+  </article>
+</Site>

package/src/pages/announcements/index.astro

@@ -0,0 +1,61 @@
+---
+import Site from '../../layouts/Site.astro';
+import { getRepo } from '../../lib/repo';
+import { requestLocale, localePath } from '../../lib/i18n';
+import { siteLang } from '../../lib/dates';
+import { ANNOUNCEMENTS } from '../../lib/announcements/config';
+import { ANNOUNCEMENT_KINDS, type AnnouncementKind } from '../../lib/announcements/types';
+import { announcementStrings } from '../../lib/announcements/words';
+import { announcementView, groupByWhen } from '../../lib/announcements/pages';
+import '../../styles/announcements-site.css';
+
+// The website's announcements list (acms({ announcements })): what's up
+// right now, newest first, with a tab per kind. A site file at this path
+// replaces it; GET /api/v1/announcements has the same data.
+if (!ANNOUNCEMENTS.enabled || !ANNOUNCEMENTS.pages) return new Response(null, { status: 404, statusText: 'Not found' });
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const locale = requestLocale(Astro.url, Astro.locals);
+const lang = locale || siteLang(settings);
+const t = announcementStrings(lang);
+const tz = settings.timezone || 'UTC';
+const now = Date.now();
+const asked = Astro.url.searchParams.get('kind') ?? '';
+const kind = (ANNOUNCEMENT_KINDS as readonly string[]).includes(asked) ? asked as AnnouncementKind : undefined;
+const live = await repo.announcements.live(now, { limit: 200, offset: 0 });
+// tabs only for kinds that have something up (urgent shows under All)
+const kinds = ANNOUNCEMENT_KINDS.filter((k) => k !== 'urgent' && live.some((a) => a.kind === k));
+const shown = live.filter((a) => !kind || a.kind === kind).map((a) => announcementView(a, locale, lang, tz, now));
+const groups = groupByWhen(shown, lang, tz, now);
+const base = localePath(ANNOUNCEMENTS.base, locale);
+const tabs = kinds.length ? [{ href: base, label: t.all, current: !kind }, ...kinds.map((k) => ({ href: base + '?kind=' + k, label: t.kinds[k], current: kind === k }))] : [];
+---
+<Site title={t.title} description={t.intro}>
+  <section class="ann-page">
+    <header class="ann-head">
+      <h1>{t.title}</h1>
+      <p>{t.intro}</p>
+    </header>
+    {tabs.length > 0 && (
+      <nav class="ann-tabs" aria-label={t.title}>
+        {tabs.map((tab) => <a href={tab.href} aria-current={tab.current ? 'page' : undefined}>{tab.label}</a>)}
+      </nav>
+    )}
+    {groups.length === 0 && <p class="ann-empty">{kind ? t.emptyKind : t.empty}</p>}
+    {groups.map((g) => (
+      <section class="ann-group" aria-labelledby={'ann-' + g.key}>
+        <h2 id={'ann-' + g.key}>{g.label}</h2>
+        <ul class="ann-list">
+          {g.items.map((a) => (
+            <li class="ann-item" data-kind={a.kind}>
+              <p class="ann-meta"><span class="ann-kind">{a.kindLabel}</span> · <time datetime={a.iso}>{a.date}</time></p>
+              <h3><a href={a.href}>{a.title}</a></h3>
+              {a.message && <p class="ann-message">{a.message}</p>}
+              {a.button && <a class="ann-action" href={a.button.href} rel={a.button.external ? 'noopener' : undefined}>{a.button.label} →</a>}
+            </li>
+          ))}
+        </ul>
+      </section>
+    ))}
+  </section>
+</Site>

package/src/pages/api/announcements.ts

@@ -0,0 +1,32 @@
+import type { APIRoute } from 'astro';
+import { getRepo } from '../../lib/repo';
+import { ApiError, apiError, json, readJson } from '../../lib/api';
+import { OWNER_ENV } from '../../lib/auth';
+import { validateRequestSession } from '../../lib/auth/request';
+import { requirePermission } from '../../lib/permissions/access';
+import { waitUntilFrom } from '../../lib/webhooks';
+import { AdminAnnouncementAction, adminAnnouncementAction, adminAnnouncementsState, requireAnnouncements } from '../../lib/announcements/api';
+
+// Admin → Announcements: the people who can send pushes (Connected services).
+export const GET: APIRoute = async ({ request, cookies, locals, url }) => {
+  try {
+    requireAnnouncements();
+    const repo = await getRepo(locals);
+    await requirePermission(request, cookies, repo, 'services.manage');
+    return json(await adminAnnouncementsState(repo, url));
+  } catch (e) { return apiError(e); }
+};
+export const POST: APIRoute = async ({ request, cookies, locals, url }) => {
+  try {
+    requireAnnouncements();
+    const repo = await getRepo(locals);
+    await requirePermission(request, cookies, repo, 'services.manage');
+    // publishing can reach every installed app: only from this site's admin
+    if (request.headers.get('origin') !== url.origin) throw new ApiError(403, 'Change this from this site’s admin.');
+    const input = AdminAnnouncementAction.parse(await readJson(request, 100_000));
+    const id = await validateRequestSession(request, cookies, repo);
+    const author = id === OWNER_ENV ? 'Owner' : (await repo.getUser(id ?? ''))?.name ?? '';
+    const result = await adminAnnouncementAction(repo, input, { url, author, locals, waitUntil: waitUntilFrom(locals), fallbackOrigin: url.origin });
+    return json({ ...result, state: input.action === 'count' ? undefined : await adminAnnouncementsState(repo, url) });
+  } catch (e) { return apiError(e); }
+};

package/src/pages/api/v1/announcements/[id].ts

@@ -0,0 +1,7 @@
+import { getAnnouncement } from '../../../../lib/announcements/api';
+import { readRoute } from '../../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../../lib/mobile/http';
+export const GET = readRoute(getAnnouncement);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

package/src/pages/api/v1/announcements/index.ts

@@ -0,0 +1,8 @@
+import { listAnnouncements } from '../../../../lib/announcements/api';
+import { readRoute } from '../../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../../lib/mobile/http';
+// announcements go up and come down with the clock: not timeless
+export const GET = readRoute(listAnnouncements);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

package/src/pages/api/webhooks/docs.ts

@@ -23,6 +23,7 @@ design.published: a design draft is published, including its navigation and sect
 Restoring design history only stages a draft; publishing it emits this event.
 media.created/updated/deleted: a media record is added, its alt text changes, or it is removed.
 site.restored: a content backup is restored; resync instead of expecting individual record events.
+announcement.published: an announcement goes up (acms({ announcements }); scheduled ones when their time comes).
 Existing event.* and booking.* payloads are described at /api/calendar/docs.
 
 ## Payloads
@@ -34,6 +35,7 @@ page.* data: { "page": { "id", "slug", "title", "status", "locale", "isHome" },
 design.published data: { "design": { "revision", "activeTheme", "navigationChanged", "sectionPageIds" } }
 media.* data: { "media": { "id", "key", "filename", "mime", "width", "height", "size", "alt" } }
 site.restored data: { "counts": { "posts", "pages", "media" } }
+announcement.published data: { "announcement": { the GET /api/v1/announcements/<id> item in the main language, plus "status" } }
 
 Content notifications carry metadata, not document bodies or pending drafts.
 On publication/update, fetch current public content from /api/v1/content/<id>?kind=post (or kind=page).

package/src/styles/announcements-site.css

@@ -0,0 +1,32 @@
+/* Built-in /announcements pages: on the page background (no card), the
+   kind in words first, urgent marked by its label rather than colour alone. */
+.ann-page { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; }
+.ann-head h1, .ann-detail h1 { font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.03em; margin: 0 0 6px; }
+.ann-head p { color: var(--muted); margin: 0 0 24px; }
+.ann-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
+.ann-tabs a { color: var(--muted); text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.ann-tabs a:hover { color: var(--ink); }
+.ann-tabs a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
+.ann-group h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 28px 0 4px; }
+.ann-list { list-style: none; margin: 0; padding: 0; }
+.ann-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
+.ann-item:last-child { border-bottom: 0; }
+.ann-meta { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
+.ann-kind { font-weight: 600; color: var(--ink); }
+[data-kind='urgent'] .ann-kind { text-transform: uppercase; letter-spacing: 0.04em; }
+.ann-item h3 { font-size: 18px; margin: 0 0 4px; letter-spacing: -0.01em; }
+.ann-item h3 a { color: inherit; text-decoration: none; }
+.ann-item h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
+.ann-message { margin: 0 0 6px; }
+.ann-action { font-weight: 600; color: var(--accent-text, var(--accent)); text-decoration: none; display: inline-block; padding: 4px 0; }
+.ann-action:hover { text-decoration: underline; text-underline-offset: 3px; }
+.ann-empty { color: var(--muted); padding: 32px 0; }
+.ann-back { margin: 0 0 20px; }
+.ann-back a { color: var(--muted); text-decoration: none; }
+.ann-back a:hover { color: var(--ink); }
+.ann-lead { font-size: 18px; }
+.ann-button {
+  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-sm);
+  background: var(--btn); color: var(--btn-ink); text-decoration: none; font-weight: 600;
+}
+.ann-button:hover { opacity: 0.92; }

package/src/styles/announcements.css

@@ -0,0 +1,210 @@
+/* Admin → Announcements island. Scoped under .an; admin.css tokens only, except
+   the lock-screen and website-banner previews, which show a phone and the
+   public site (fixed device/site colours, like mobile-app.css). Kind colours
+   reuse the status tokens; red is for urgent only. No pills: statuses are
+   coloured text, controls 8–10px rects. */
+.an { display: flex; flex-direction: column; gap: 16px; }
+.an .card + .card { margin-top: 0; }
+.an code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; overflow-wrap: anywhere; }
+.an [data-kind='event'] { --an-c: var(--blue); --an-bg: var(--blue-soft); }
+.an [data-kind='registration'] { --an-c: var(--green); --an-bg: var(--green-soft); }
+.an [data-kind='help'] { --an-c: var(--amber); --an-bg: var(--amber-soft); }
+.an [data-kind='info'] { --an-c: var(--text-2); --an-bg: var(--sel); }
+.an [data-kind='urgent'] { --an-c: var(--red); --an-bg: var(--red-soft); }
+
+/* skeleton */
+.an-skel { display: grid; gap: 12px; }
+.an-skel i { display: block; height: 44px; border-radius: var(--r-lg); background: var(--panel-2); animation: an-pulse 1.2s ease-in-out infinite alternate; }
+.an-skel i:nth-child(2) { height: 320px; }
+.an-skel i:nth-child(3) { height: 20px; width: 50%; }
+@keyframes an-pulse { to { opacity: 0.45; } }
+@media (prefers-reduced-motion: reduce) { .an-skel i { animation: none; } }
+
+/* flash (an always-present live region; no gap while empty) */
+.an-flash .flash { margin: 0; }
+.an > .an-flash:empty { margin-bottom: -16px; }
+.an .flash.an-warn { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
+.modal-body .an-flash .flash { margin-top: 12px; }
+
+/* segmented controls */
+.an-seg { max-width: 100%; }
+.an-seg > button { font-size: 12.5px; padding: 6px 12px; min-height: 32px; }
+.an-seg > button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
+.an-seg > button:disabled { cursor: default; }
+.an-seg > button:disabled:not([aria-selected='true']) { opacity: 0.5; }
+.an-n { font-style: normal; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; margin-left: 3px; }
+
+/* list */
+.an-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.an-list { overflow: hidden; }
+.an-rows { list-style: none; margin: 0; padding: 0; }
+.an-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 14px 20px; border-bottom: 1px solid var(--line); }
+.an-row:last-child { border-bottom: 0; }
+.an-row:hover { background: var(--hover); }
+.an-kind { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--an-c); }
+.an-kind i { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--an-bg); }
+.an-kind svg { width: 14px; height: 14px; }
+.an-row-main { min-width: 0; }
+.an-row-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
+.an-row-title.is-empty { color: var(--muted); font-weight: 500; }
+.an-row-msg { margin: 1px 0 0; color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.an-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
+.an-where { display: inline-flex; gap: 4px; }
+.an-chip { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; line-height: 18px; }
+.an-tone { font-weight: 600; }
+.an-tone[data-tone='ok'] { color: var(--green); }
+.an-tone[data-tone='warn'] { color: var(--amber); }
+.an-tone[data-tone='bad'] { color: var(--red); }
+.an-row-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
+.an-empty { padding: 40px 20px 44px; }
+.an-empty p { margin: 0; }
+.an-foot { margin: 0 2px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 4px 16px; }
+.an-del { margin: 0; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
+
+/* composer: head */
+.an-head { display: flex; flex-direction: column; gap: 4px; }
+.an-back { align-self: flex-start; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); padding: 6px 8px; margin-left: -8px; min-height: 32px; border-radius: var(--r-sm); cursor: pointer; }
+.an-back:hover { color: var(--text); background: var(--hover); }
+.an-back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
+.an-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.an-head h2 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
+.an-head h2:focus { outline: none; }
+.an-status { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
+
+/* composer: form */
+.an-compose { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
+.an-form { min-width: 0; }
+.an-sec { padding: 18px 0; border-top: 1px solid var(--line); min-width: 0; }
+.an-sec:first-child { border-top: 0; padding-top: 0; }
+.an-sec:last-child { padding-bottom: 0; }
+.an-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
+.an-legend { padding: 0; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
+.an-opt-l { font-weight: 400; color: var(--muted); }
+.an-sec-hint { margin: -6px 0 10px; }
+.an-after { margin: 8px 0 0; line-height: 1.45; }
+.an-ro { margin: 0; font-size: 13.5px; color: var(--text-2); }
+.an-bad { color: var(--red); margin: -6px 0 12px; }
+.an-linkhint { margin: -6px 0 0; }
+.an-sec .field:last-child { margin-bottom: 0; }
+
+/* kind: radio cards (selected = --sel fill, like the event editor's mode cards) */
+.an-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
+.an-kind-opt { position: relative; flex: 1 1 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--panel); font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.an-kind-opt:hover { border-color: var(--faint); }
+.an-kind-opt.on { background: var(--sel); border-color: var(--muted); color: var(--text); }
+.an-kind-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-ring); }
+.an-kind-opt:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
+.an-kind-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
+.an-kind-opt i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--an-bg); color: var(--an-c); }
+.an-kind-opt svg { width: 15px; height: 15px; }
+.an-kind-opt span { overflow-wrap: anywhere; }
+
+/* words */
+.an-langs { margin-bottom: 14px; }
+.an-field { margin-bottom: 14px; }
+.an-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
+.an-field-top label { font-size: 12px; color: var(--muted); font-weight: 500; }
+.an-count { font-style: normal; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
+.an-count[data-near] { color: var(--amber); }
+.an-field > small.hint { display: block; margin-top: 5px; }
+.an-src { margin: 0 0 6px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--text-2); font-size: 12.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; max-height: 7.5em; overflow: auto; }
+.an-src span { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 1px; }
+
+/* where */
+.an-toggle { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: center; }
+.an-toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
+.an-toggle label { display: flex; align-items: center; min-height: 36px; font-size: 13.5px; color: var(--text); cursor: pointer; }
+.an-toggle small { grid-column: 2; margin: -6px 0 6px; line-height: 1.45; }
+.an-toggle:has(input:disabled) input, .an-toggle:has(input:disabled) label { cursor: default; }
+.an-toggle:has(input:disabled) label { color: var(--muted); }
+
+/* who gets the push (topic choices as in Mobile app) */
+.an-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
+.an-opt { display: flex; align-items: center; gap: 9px; padding: 9px 11px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--panel); cursor: pointer; font-size: 13px; }
+.an-opt:hover { background: var(--hover); }
+.an-opt.on { background: var(--sel); color: var(--text); font-weight: 600; }
+.an-opt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+.an-opt input { accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
+.an-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.an-opt em { font-style: normal; font-weight: 500; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
+.an-pace { margin: 12px 0 0; line-height: 1.45; }
+.an-pace[data-tone='warn'] { color: var(--amber); }
+
+/* when */
+.an-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
+.an-when input[type='datetime-local'] { display: block; margin-top: 8px; min-width: 0; max-width: 260px; }
+:root[data-theme='dark'] .an input[type='datetime-local'] { color-scheme: dark; }
+
+/* preview: lock screen (device colours) */
+.an-preview { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 72px; min-width: 0; }
+.an-preview-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; flex-wrap: wrap; }
+.an-preview-lang { width: auto; max-width: 130px; padding: 4px 8px; font-size: 12.5px; }
+.an-phone { width: 100%; max-width: 280px; min-height: 350px; border-radius: 42px 42px 0 0; padding: 9px 9px 0; background: #1d1c1a; box-shadow: inset 0 0 0 1px #34322e; display: flex; }
+.an-phone.is-off { opacity: 0.6; }
+.an-phone-screen { flex: 1; border-radius: 34px 34px 0 0; background: #33424b; color: #f7f5f2; display: flex; flex-direction: column; align-items: center; padding: 46px 11px 16px; overflow: hidden; min-width: 0; }
+.an-clock { text-align: center; }
+.an-clock small { display: block; font-size: 13px; font-weight: 500; opacity: 0.88; }
+.an-clock b { display: block; font-size: 62px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
+.an-note { margin-top: 30px; width: 100%; background: rgb(246 245 243 / 86%); color: #1c1b19; border-radius: 18px; padding: 10px 12px 11px; box-shadow: 0 6px 18px rgb(0 0 0 / 18%); }
+.an-note-top { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #5d5a55; margin-bottom: 5px; }
+.an-appicon { width: 20px; height: 20px; border-radius: 5px; background: #fdfcfb; color: #3b3935; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); }
+.an-appicon svg { width: 13px; height: 13px; }
+.an-appicon img { width: 100%; height: 100%; object-fit: cover; }
+.an-appname { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.an-now { margin-left: auto; flex: 0 0 auto; }
+/* collapsed: one line of title, two of message; expanded: everything */
+.an-note-title { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
+.an-note-body { margin: 1px 0 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.an-note.is-open .an-note-title, .an-note.is-open .an-note-body { display: block; -webkit-line-clamp: unset; overflow: visible; }
+.an-cap { margin: 0; align-self: stretch; text-align: center; border-top: 1px solid var(--line); padding-top: 10px; }
+
+/* preview: website banner (site colours) */
+.an-site { align-self: stretch; }
+.an-site-label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 6px; }
+.an-site-bar { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 11px; border-radius: 10px; background: #f3f1ed; color: #1c1b19; font-size: 12.5px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 7%); }
+.an-site-bar i { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; color: #4c4841; }
+.an-site-bar svg { width: 16px; height: 16px; }
+.an-site-bar b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.an-site-btn { flex: 0 0 auto; max-width: 45%; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.an-site-x { flex: 0 0 auto; opacity: 0.55; font-size: 11px; }
+.an-site-bar[data-kind='event'] i { color: #2f5fb3; }
+.an-site-bar[data-kind='registration'] i { color: #127442; }
+.an-site-bar[data-kind='help'] i { color: #93660c; }
+.an-site-bar[data-kind='urgent'] { background: #b42318; color: #fff; box-shadow: none; }
+.an-site-bar[data-kind='urgent'] i { color: #fff; }
+
+/* review dialog */
+dialog.modal.an-review { width: min(540px, calc(100vw - 32px)); }
+.an-checks { list-style: none; margin: 0; padding: 0; }
+.an-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
+.an-checks li:last-child { border-bottom: 0; }
+.an-checks li[data-tone='bad'] { color: var(--red); }
+.an-mark { font-weight: 700; text-align: center; }
+.an-checks li[data-tone='ok'] .an-mark { color: var(--green); }
+.an-checks li[data-tone='warn'] .an-mark { color: var(--amber); }
+.an-checks li[data-tone='bad'] .an-mark { color: var(--red); }
+.an-checks .btn { white-space: nowrap; }
+
+@media (max-width: 1000px) {
+  .an-compose { grid-template-columns: 1fr; gap: 24px; }
+  .an-preview { position: static; border-top: 1px solid var(--line); padding-top: 18px; }
+  .an-phone { max-width: 260px; min-height: 300px; }
+  .an-clock b { font-size: 52px; }
+}
+@media (max-width: 767px) {
+  .an-bar .seg { display: flex; width: 100%; }
+  .an-bar .seg > button { flex: 1; padding: 6px 4px; min-height: 36px; }
+  .an-bar > .btn.primary { width: 100%; justify-content: center; min-height: 44px; }
+  .an-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
+  .an-row-actions { justify-content: flex-start; }
+  .an-head-row .page-actions { width: 100%; }
+  .an-head-row .page-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; white-space: nowrap; }
+  .an-sec .seg { display: flex; }
+  .an-sec .seg > button { flex: 1; min-height: 36px; white-space: normal; }
+  .an-when { grid-template-columns: 1fr; }
+  .an-when input[type='datetime-local'] { max-width: none; }
+  .an-topics { grid-template-columns: 1fr; }
+  .an-toggle label { min-height: 44px; }
+  .an-checks li { grid-template-columns: 18px minmax(0, 1fr); }
+  .an-checks .btn { grid-column: 2; justify-self: start; }
+}

package/src/styles/site.css

@@ -535,12 +535,17 @@ li::marker { color: var(--muted); }
   background: var(--btn); color: var(--btn-ink);
   font-size: 14px; padding: 9px 44px; text-align: center; position: relative;
 }
+/* hidden until its script checks it wasn't closed (display: flex would beat the attribute) */
+.announcement-bar[hidden] { display: none; }
 .announcement-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
 .announcement-x {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer; font-size: 12px; padding: 6px; border-radius: 6px;
 }
 .announcement-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
+/* pinned announcements: urgent says so in words, never by colour alone */
+.announcement-bar .ann-urgent { font-weight: 700; letter-spacing: 0.01em; }
+.announcement-bar .ann-cta { white-space: nowrap; }
 
 /* dynamic post-list blocks (expanded at request time) */
 .dyn-postlist { display: grid; gap: 24px; margin: 32px 0; }

package/src/virtual.d.ts

@@ -23,6 +23,7 @@ declare module 'virtual:acms-config' {
     roles?: { key: string; label: string; summary: string; admin: boolean; home: string }[];
     permissions?: { key: string; label: string; description: string; defaults: string[]; sensitive: boolean }[];
     members?: { enabled: boolean; base: string; notify: string[] };
+    announcements?: { enabled: boolean; base: string; pages: boolean; topics: Partial<Record<'event' | 'registration' | 'help' | 'info', string>> };
     // resolved by integration.mjs (lib/calendar/config.ts documents the shape)
     calendar?: {
       enabled: boolean;