@acms-subir/core 0.3.5 → 0.3.7

package/src/pages/admin/calendar/settings.astro

@@ -9,9 +9,14 @@ import { normalizeCalendarSrc } from '../../../lib/calendar/src';
 import { loadFeed } from '../../../lib/calendar/ics';
 import { siteApproval, APPROVAL_LABEL } from '../../../lib/booking/approval';
 import { siteOrigin } from '../../../lib/seo';
+import { placeUsage, savePlace } from '../../../lib/maps/places';
+import { parseMapLink } from '../../../lib/maps/parse';
+import { ApiError } from '../../../lib/api';
+import type { Place } from '../../../lib/schema';
 
 // Calendar settings — one page behind the ⚙ on Schedule and Bookings:
-// calendars (groups + colors), subscribed calendars (read-only, synced in),
+// calendars (groups + colors), saved places (picked in an event's Where),
+// subscribed calendars (read-only, synced in),
 // share links (out to Google/Apple/Outlook), booking approval, defaults.
 // Replaces the old Calendars page and the duplicate subscribe dialogs.
 if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
@@ -77,6 +82,34 @@ if (Astro.request.method === 'POST') {
     }
     return back(reset ? `Approval saved — ${reset} booking link${reset === 1 ? '' : 's'} now follow it.` : 'Approval saved.', '#bookings');
   }
+  if (op === 'place-save') {
+    // the map link field is parsed in the browser (maps.resolve, short links
+    // included); without JS, a full map link is still read here
+    const num = (k: string) => { const v = String(form.get(k) ?? '').trim(); return v === '' ? null : Number(v); };
+    let lat = num('lat');
+    let lng = num('lng');
+    const url = String(form.get('url') || '').trim();
+    let address = String(form.get('address') || '');
+    if ((lat === null || lng === null) && url) {
+      const parsed = parseMapLink(url);
+      if (parsed?.lat !== null && parsed?.lat !== undefined) { lat = parsed.lat; lng = parsed.lng; }
+      if (!address.trim() && parsed?.address) address = parsed.address;
+    }
+    try {
+      const { place, updatedEvents } = await savePlace(repo, {
+        id: id || undefined, name, address, url, lat: Number.isFinite(lat) ? lat : null, lng: Number.isFinite(lng) ? lng : null,
+        notes: String(form.get('notes') || ''), isDefault: form.has('isDefault'),
+      }, { locals: Astro.locals, origin });
+      return back(`Saved “${place.name}”${updatedEvents ? ` — ${updatedEvents} upcoming event${updatedEvents === 1 ? '' : 's'} updated` : ''}.`, '#places');
+    } catch (err) {
+      return back(err instanceof ApiError ? err.message : 'Couldn’t save that place.', '#places');
+    }
+  }
+  if (op === 'place-delete') {
+    const place = id ? await repo.getPlace(id) : null;
+    if (place) await repo.deletePlace(place.id);
+    return back(place ? `Deleted “${place.name}”. Events that used it keep their address.` : undefined, '#places');
+  }
   if (op === 'create' || op === 'subscribe') {
     if (!name) return back('Give the calendar a name.');
     let feedUrl = '';
@@ -122,7 +155,9 @@ if (Astro.request.method === 'POST') {
   }
 }
 
-const [calendars, events, links] = await Promise.all([repo.listCalendars(), repo.listEvents(), bookingsEnabled() ? repo.listBookingLinks() : Promise.resolve([])]);
+const [calendars, events, links, places] = await Promise.all([repo.listCalendars(), repo.listEvents(), bookingsEnabled() ? repo.listBookingLinks() : Promise.resolve([]), repo.listPlaces()]);
+const placeCounts = placeUsage(events, settings);
+const placeLine = (p: Place) => [p.address, `${placeCounts.get(p.id) ?? 0} upcoming event${placeCounts.get(p.id) === 1 ? '' : 's'}`].filter(Boolean).join(' · ');
 const natives = calendars.filter((c) => c.kind === 'native');
 const feeds = calendars.filter((c) => c.kind === 'feed');
 const counts = new Map<string, number>();
@@ -148,9 +183,10 @@ const APPROVAL_NOTE: Record<ApprovalMode, string> = {
 const I = {
   up: 'M6 15l6-6 6 6', down: 'M6 9l6 6 6-6',
   ext: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+  pin: 'M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
 };
 const sections = [
-  ['calendars', 'Calendars'], ['subscribed', 'Subscribed calendars'], ['share', 'Share links'],
+  ['calendars', 'Calendars'], ['places', 'Places'], ['subscribed', 'Subscribed calendars'], ['share', 'Share links'],
   ...(bookingsEnabled() ? [['bookings', 'Bookings']] : []), ['defaults', 'Defaults'],
 ] as const;
 ---
@@ -204,6 +240,28 @@ const sections = [
         ))}
       </section>
 
+      <!-- Places -->
+      <section class="cs-sect" id="places">
+        <header>
+          <div><h2>Places</h2><p>Where your events usually happen. Pick one in an event’s Where field to fill in the address and map. Changing a place updates its upcoming events.</p></div>
+          <button class="btn" type="button" data-modal="place-new">+ New place</button>
+        </header>
+        {places.length === 0 ? (
+          <p class="cs-empty">No saved places yet. Add your building, a park or a partner venue once instead of typing it into every event.</p>
+        ) : places.map((p) => (
+          <div class="cs-row" id={`place-${p.id}`}>
+            <svg class="cs-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.pin} /></svg>
+            <div class="cs-main">
+              <b>{p.name}{p.isDefault && <span class="cs-default">Default</span>}</b>
+              <small>{placeLine(p)}{p.lat === null ? ' · no pin' : ''}</small>
+            </div>
+            <div class="cs-actions">
+              <button class="btn sm" type="button" data-modal={`place-edit-${p.id}`}>Edit</button>
+            </div>
+          </div>
+        ))}
+      </section>
+
       <!-- Subscribed -->
       <section class="cs-sect" id="subscribed">
         <header>
@@ -347,6 +405,37 @@ const sections = [
     </Modal>
   ))}
 
+  {[...places, null].map((p: Place | null) => (
+    <Modal id={p ? `place-edit-${p.id}` : 'place-new'} title={p ? `Edit ${p.name}` : 'New place'}>
+      <form method="post" data-place-form>
+        <input type="hidden" name="op" value="place-save" />
+        {p && <input type="hidden" name="id" value={p.id} />}
+        <input type="hidden" name="lat" value={p?.lat ?? ''} data-lat />
+        <input type="hidden" name="lng" value={p?.lng ?? ''} data-lng />
+        <label class="field"><span>Map link <em class="hint">paste from Google Maps, Apple Maps or OpenStreetMap — or a map embed code</em></span>
+          <input class="mono" type="text" name="url" value={p?.url ?? ''} placeholder="https://maps.app.goo.gl/…" data-maplink autocomplete="off" />
+        </label>
+        <p class="cs-pinline" data-pinline>
+          <span data-pintext>{p?.lat != null && p?.lng != null ? `Pin set at ${p.lat.toFixed(5)}, ${p.lng.toFixed(5)}` : 'No pin yet — paste a map link to set one.'}</span>
+          <button class="btn sm ghost" type="button" data-clearpin hidden={p?.lat == null}>Remove pin</button>
+        </p>
+        <label class="field"><span>Name</span><input type="text" name="name" value={p?.name ?? ''} placeholder="Main building" required data-name /></label>
+        <label class="field"><span>Address</span><input type="text" name="address" value={p?.address ?? ''} placeholder="Street, city" data-address /></label>
+        <label class="field"><span>Notes <em class="hint">for editors only</em></span><textarea name="notes" rows="2" placeholder="Use the side door after 6 PM">{p?.notes ?? ''}</textarea></label>
+        <label class="check-row"><input type="checkbox" name="isDefault" checked={p?.isDefault ?? false} /> New events start here</label>
+        {p?.mapImage && (
+          <figure class="cs-map"><img src={p.mapImage} alt={`Map of ${p.name}`} width="1200" height="500" loading="lazy" /></figure>
+        )}
+        <div class="modal-foot">
+          {p && <button class="btn danger ghost" type="submit" name="op" value="place-delete" formnovalidate data-confirm={`Delete “${p.name}”? Events that used it keep their address.`}>Delete</button>}
+          <span class="spacer" />
+          <button class="btn ghost" type="button" data-close>Cancel</button>
+          <button class="btn primary" type="submit">{p ? 'Save' : 'Add place'}</button>
+        </div>
+      </form>
+    </Modal>
+  ))}
+
   <Modal id="cal-new" title="New calendar" open={Astro.url.searchParams.has('new')}>
     <form method="post">
       <input type="hidden" name="op" value="create" />
@@ -424,6 +513,14 @@ const sections = [
   .cs-field { display: grid; grid-template-columns: 160px auto; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); justify-content: start; }
   .cs-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
   .cs-foot small { color: var(--muted); font-size: 12px; }
+  .cs-pin { width: 14px; height: 14px; color: var(--muted); }
+  .cs-default { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-2); vertical-align: 1px; }
+  .cs-default::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
+  .cs-pinline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 12px; color: var(--muted); }
+  .cs-pinline.is-busy span { opacity: 0.6; }
+  .cs-pinline.is-error span { color: var(--red); }
+  .cs-map { margin: 0 0 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+  .cs-map img { display: block; width: 100%; height: auto; }
   [hidden] { display: none !important; }
   @media (max-width: 860px) {
     .cs { grid-template-columns: 1fr; }
@@ -437,6 +534,8 @@ const sections = [
 </style>
 
 <script>
+  import { actions } from 'astro:actions';
+
   document.addEventListener('click', async (e) => {
     const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
     if (b) {
@@ -448,6 +547,44 @@ const sections = [
     const c = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
     if (c && !confirm(c.dataset.confirm)) e.preventDefault();
   });
+  // places: a pasted map link fills the pin (and name/address when empty).
+  // maps.resolve expands short links server-side; nothing needs a maps key.
+  for (const f of document.querySelectorAll<HTMLFormElement>('form[data-place-form]')) {
+    const link = f.querySelector<HTMLInputElement>('[data-maplink]')!;
+    const lat = f.querySelector<HTMLInputElement>('[data-lat]')!;
+    const lng = f.querySelector<HTMLInputElement>('[data-lng]')!;
+    const line = f.querySelector<HTMLElement>('[data-pinline]')!;
+    const text = f.querySelector<HTMLElement>('[data-pintext]')!;
+    const clear = f.querySelector<HTMLButtonElement>('[data-clearpin]')!;
+    const name = f.querySelector<HTMLInputElement>('[data-name]')!;
+    const address = f.querySelector<HTMLInputElement>('[data-address]')!;
+    const show = (msg: string, state = '') => { text.textContent = msg; line.className = `cs-pinline${state ? ` is-${state}` : ''}`; clear.hidden = !lat.value; };
+    let last = link.value.trim();
+    const resolve = async () => {
+      const raw = link.value.trim();
+      if (raw === last) return;
+      last = raw;
+      if (!raw) return;
+      show('Reading the link…', 'busy');
+      const { data, error } = await actions.maps.resolve({ url: raw });
+      if (link.value.trim() !== raw) return;
+      const loc = data?.location;
+      if (error || !loc) { show('That link didn’t include a place we could read. You can still type the address.', 'error'); return; }
+      if (loc.kind === 'meeting') { show('That’s an online meeting link — saved places are for physical places.', 'error'); return; }
+      // an embed's src isn't a link people can open: keep the field tidy
+      if (loc.url !== raw) { link.value = loc.url; last = loc.url; }
+      if (!name.value.trim() && loc.name) name.value = loc.name;
+      if (!address.value.trim() && loc.address) address.value = loc.address;
+      if (loc.lat !== null && loc.lng !== null) {
+        lat.value = String(loc.lat); lng.value = String(loc.lng);
+        show(`Pin set at ${loc.lat.toFixed(5)}, ${loc.lng.toFixed(5)}`);
+      } else show('No pin in that link — the address was filled in.');
+    };
+    link.addEventListener('paste', () => setTimeout(resolve, 0));
+    link.addEventListener('change', resolve);
+    clear.addEventListener('click', () => { lat.value = ''; lng.value = ''; show('Pin removed — it’s gone when you save.'); });
+  }
+
   // approval: rules only for "unless…", the deadline only when bookings can wait
   const form = document.querySelector<HTMLFormElement>('[data-approval]');
   form?.addEventListener('change', () => {

package/src/pages/admin/forms/[id]/share.astro

@@ -0,0 +1,121 @@
+---
+import Admin from '../../../../layouts/Admin.astro';
+import FormHeader from '../../../../components/forms/FormHeader.astro';
+import { getRepo } from '../../../../lib/repo';
+import { readForm } from '../../../../lib/forms/http';
+import { escapeForm } from '../../../../lib/forms/fields';
+import { siteOrigin } from '../../../../lib/seo';
+import { CONTENT } from '../../../../lib/content';
+import '../../../../styles/forms-admin.css';
+
+const repo = await getRepo(Astro.locals);
+let form = await repo.forms.get(Astro.params.id || '');
+if (!form || form.kind !== 'form') return new Response(null, { status: 404 });
+Astro.response.headers.set('Cache-Control', 'private, no-store');
+
+let error = '', notice = '';
+if (Astro.request.method === 'POST') {
+  try {
+    const data = await readForm(Astro.request);
+    const op = String(data.get('op') || '');
+    if (op !== 'publish' && op !== 'archive') throw new Error('Unknown action.');
+    // Same store operation as the Build tab: publish promotes pending edits.
+    await repo.forms.save(form.id, Number(data.get('revision')), form.name, form.draft ?? form.definition, op);
+    form = (await repo.forms.get(form.id))!;
+    notice = op === 'publish' ? 'Published. The form is accepting responses.' : 'Archived. The form no longer accepts responses; existing responses are kept.';
+  } catch (e) { error = e instanceof Error ? e.message : 'Could not update the form.'; }
+}
+
+const [settings, stats, used] = await Promise.all([repo.getSettings(), repo.forms.submissionStats(form.id, 0), repo.forms.usedOn(form.id)]);
+const origin = siteOrigin(settings, Astro.url);
+const link = `${origin}/forms/${form.id}`;
+const title = escapeForm(form.definition.title || form.name);
+const embed = `<iframe src="${link}?embed=1" title="${title}" loading="lazy" style="width:100%;min-height:560px;border:0"></iframe>`;
+const live = form.status === 'published';
+const state = live ? (form.draft ? ['Accepting responses', 'green', 'Visitors see the last published version. Publish to apply your changes.'] : ['Accepting responses', 'green', 'Anyone with the link, or on a page with this form, can respond.'])
+  : form.status === 'archived' ? ['Not accepting responses', 'muted', 'Archived. The link and embedded copies are hidden. Responses are kept.']
+  : ['Not accepting responses', 'amber', 'Publish the form to open the link and show it on pages.'];
+const editHref = (u: (typeof used)[number]) => u.kind === 'page' ? `/admin/pages/${u.id}` : u.kind === 'event' ? `/admin/calendar/events/${u.id}` : `/admin/c/${u.collection}/${u.id}`;
+const kindLabel = (u: (typeof used)[number]) => u.kind === 'page' ? 'Page' : u.kind === 'event' ? 'Event' : (CONTENT.collections[u.collection]?.singular ?? 'Post');
+const copyIcon = 'M9 9h10v10H9zM5 15V5h10';
+---
+<Admin title={`${form.name} · Share`} section="forms">
+  <FormHeader form={form} active="share" responses={stats.total}>
+    {live && <a slot="actions" class="btn" href={`/forms/${form.id}`} target="_blank" rel="noopener">Open form ↗</a>}
+  </FormHeader>
+  {error && <p class="notice warn" role="alert">{error}</p>}
+  {notice && <p class="notice" role="status">{notice}</p>}
+
+  <div class="fs">
+    <section class="fs-sec">
+      <div class="fs-label"><b>Responses</b><small>Publishing opens the form; archiving closes it.</small></div>
+      <div class="fs-body">
+        <div class="fs-state">
+          <div>
+            <p class={`fst fst-${state[1]} fs-state-title`}><i aria-hidden="true" />{state[0]}</p>
+            <p class="hint">{state[2]}</p>
+          </div>
+          <form method="post" class="fs-state-actions">
+            <input type="hidden" name="revision" value={form.revision} />
+            {(!live || form.draft) && <button class="btn primary" name="op" value="publish">{form.draft ? 'Publish changes' : form.status === 'archived' ? 'Reopen and publish' : 'Publish'}</button>}
+            {live && <button class="btn" name="op" value="archive">Stop accepting responses</button>}
+          </form>
+        </div>
+      </div>
+    </section>
+
+    <section class="fs-sec">
+      <div class="fs-label"><b>Public link</b><small>A page with just this form.</small></div>
+      <div class="fs-body">
+        <div class="fs-copy">
+          <input type="text" class="mono" readonly value={link} aria-label="Public link" id="fs-link" />
+          <button class="btn" type="button" data-copy="fs-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={copyIcon} /></svg><span>Copy</span></button>
+        </div>
+        {!live && <p class="hint">The link opens once the form is published.</p>}
+      </div>
+    </section>
+
+    <section class="fs-sec">
+      <div class="fs-label"><b>Embed</b><small>Paste into another website. On this site, add a Form block to a page instead.</small></div>
+      <div class="fs-body">
+        <textarea class="code fs-embed" readonly rows="3" id="fs-embed" aria-label="Embed code">{embed}</textarea>
+        <div class="fs-row"><button class="btn" type="button" data-copy="fs-embed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={copyIcon} /></svg><span>Copy code</span></button></div>
+      </div>
+    </section>
+
+    <section class="fs-sec">
+      <div class="fs-label"><b>Used on</b><small>Pages, posts and events with a Form block for this form.</small></div>
+      <div class="fs-body">
+        {used.length ? (
+          <ul class="fs-used">
+            {used.map(u => (
+              <li>
+                <a href={editHref(u)}><b>{u.title || 'Untitled'}</b><small>{kindLabel(u)} · <span class={`status ${u.status}`}>{u.status[0].toUpperCase() + u.status.slice(1)}</span></small></a>
+                <a class="btn sm ghost" href={editHref(u)}>Edit</a>
+              </li>
+            ))}
+          </ul>
+        ) : <p class="hint fs-none">Not on any page yet. In the editor, type <kbd>/</kbd> and choose Form.</p>}
+      </div>
+    </section>
+
+    <section class="fs-sec">
+      <div class="fs-label"><b>Notifications</b></div>
+      <div class="fs-body"><p class="hint">Email alerts and webhooks for new responses are coming later. For now, check Responses or export a CSV.</p></div>
+    </section>
+  </div>
+</Admin>
+
+<script>
+  document.addEventListener('click', async (e) => {
+    const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
+    if (!b) return;
+    const el = document.getElementById(b.dataset.copy!) as HTMLInputElement | HTMLTextAreaElement | null;
+    if (!el) return;
+    const label = b.querySelector('span')!;
+    const was = label.textContent;
+    try { await navigator.clipboard.writeText(el.value); label.textContent = 'Copied'; }
+    catch { el.select(); label.textContent = 'Press ⌘C'; }
+    setTimeout(() => (label.textContent = was), 1600);
+  });
+</script>

package/src/pages/admin/forms/[id]/submissions.astro

@@ -0,0 +1,143 @@
+---
+import Admin from '../../../../layouts/Admin.astro';
+import FormHeader from '../../../../components/forms/FormHeader.astro';
+import { ResponsesTable, type ResponseRow } from '../../../../components/forms/ResponsesTable';
+import { getRepo } from '../../../../lib/repo';
+import { readForm } from '../../../../lib/forms/http';
+import { csv, displayAnswers, formVersion } from '../../../../lib/forms/service';
+import { answerFields, relativeTime, versionLabeler, wideRows } from '../../../../lib/forms/export';
+import type { FormSubmission } from '../../../../lib/forms/schema';
+import '../../../../styles/forms-admin.css';
+
+const repo = await getRepo(Astro.locals);
+const form = await repo.forms.get(Astro.params.id || '');
+if (!form || form.kind !== 'form') return new Response(null, { status: 404 });
+Astro.response.headers.set('Cache-Control', 'private, no-store');
+
+const DAY = 86_400_000;
+const range = (['7', '30'] as const).find(r => r === Astro.url.searchParams.get('range')) ?? '';
+const q = (Astro.url.searchParams.get('q') ?? '').trim().slice(0, 100);
+const since = range ? Date.now() - Number(range) * DAY : undefined;
+const [versions, current] = await Promise.all([repo.forms.versions(form.id), formVersion(form.definition)]);
+const version = versionLabeler(versions, current);
+const download = (rows: FormSubmission[]) => {
+  const slug = form.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 60) || 'form';
+  return new Response(csv(wideRows(form.definition.fields, rows, version)), { headers: { 'Content-Type': 'text/csv; charset=utf-8', 'Content-Disposition': `attachment; filename="${slug}-responses.csv"`, 'Cache-Control': 'private, no-store' } });
+};
+
+let error = '';
+if (Astro.request.method === 'POST') {
+  try {
+    const data = await readForm(Astro.request);
+    const op = String(data.get('op') || 'delete');
+    const ids = data.getAll('ids').map(String).filter(Boolean).slice(0, 500);
+    if (op === 'export') return download(await repo.forms.searchSubmissions(form.id, { ids, limit: 500 }));
+    if (op === 'bulkDelete') await repo.forms.deleteSubmissions(form.id, ids);
+    else if (op === 'delete') await repo.forms.deleteSubmission(form.id, String(data.get('id') || ''));
+    else throw new Error('Unknown action.');
+    const n = op === 'bulkDelete' ? ids.length : 1;
+    const back = new URL(Astro.url); back.searchParams.set('notice', `${n} response${n === 1 ? '' : 's'} deleted.`);
+    return Astro.redirect(back.pathname + back.search, 303);
+  } catch (e) { error = e instanceof Error ? e.message : 'Could not update responses.'; }
+}
+
+const page = Math.max(0, Math.floor(Number(Astro.url.searchParams.get('page')) || 0));
+if (Astro.url.searchParams.has('export')) {
+  const rows = await repo.forms.searchSubmissions(form.id, { since, q, limit: 10001 });
+  if (rows.length > 10000) return new Response('Export is limited to 10,000 responses. Use a content backup for the complete archive.', { status: 413 });
+  return download(rows);
+}
+const [rows, stats, settings] = await Promise.all([
+  repo.forms.searchSubmissions(form.id, { since, q, limit: 101, offset: page * 100 }),
+  repo.forms.submissionStats(form.id, Date.now() - 7 * DAY),
+  repo.getSettings(),
+]);
+const tz = settings.timezone || undefined;
+const notice = Astro.url.searchParams.get('notice')?.slice(0, 120) ?? '';
+const columns = answerFields(form.definition.fields).map(f => ({ id: f.id, label: f.label }));
+const currentIds = new Set(columns.map(c => c.id));
+const fmt = (ts: number, o: Intl.DateTimeFormatOptions) => { try { return new Date(ts).toLocaleString('en-US', { ...o, timeZone: tz }); } catch { return new Date(ts).toLocaleString('en-US', o); } };
+const shortWhen = (ts: number) => {
+  const day = (t: number) => fmt(t, { year: 'numeric', month: 'numeric', day: 'numeric' });
+  const time = fmt(ts, { hour: 'numeric', minute: '2-digit' });
+  if (day(ts) === day(Date.now())) return `Today ${time}`;
+  if (day(ts) === day(Date.now() - DAY)) return `Yesterday ${time}`;
+  return fmt(ts, { month: 'short', day: 'numeric', ...(new Date(ts).getFullYear() !== new Date().getFullYear() ? { year: 'numeric' } : {}) });
+};
+// displayAnswers owns per-type formatting; call it on subsets of the snapshot.
+const show = (r: FormSubmission, keep: (id: string) => boolean) => {
+  const fields = answerFields(r.response.definition.fields).filter(f => keep(f.id));
+  return fields.length ? Object.entries(displayAnswers({ ...r.response, definition: { ...r.response.definition, fields } })) : [];
+};
+const data: ResponseRow[] = rows.slice(0, 100).map(r => ({
+  id: r.id,
+  when: shortWhen(r.createdAt),
+  full: fmt(r.createdAt, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' }),
+  version: version(r.response.version),
+  cells: columns.map(c => r.response.definition.fields.some(f => f.id === c.id) ? (show(r, id => id === c.id)[0]?.[1] ?? '') : ''),
+  answers: show(r, id => currentIds.has(id)),
+  older: show(r, id => !currentIds.has(id)),
+}));
+const keep = (patch: Record<string, string | null>) => {
+  const u = new URL(Astro.url); u.searchParams.delete('notice');
+  for (const [k, v] of Object.entries(patch)) v === null ? u.searchParams.delete(k) : u.searchParams.set(k, v);
+  return u.pathname + u.search;
+};
+const filtered = !!(q || range);
+---
+<Admin title={`${form.name} · Responses`} section="forms" wide>
+  <FormHeader form={form} active="responses" responses={stats.total}>
+    <a slot="actions" class="btn" href={keep({ export: '1', page: null })} download>Export CSV</a>
+  </FormHeader>
+  {error && <p class="notice warn" role="alert">{error}</p>}
+  {notice && <p class="notice" role="status">{notice}</p>}
+
+  {!stats.total ? (
+    <div class="empty-state">
+      <b>No responses yet</b>
+      <p>{form.status === 'published' ? 'Share the form or add it to a page. New responses show up here.' : 'Publish the form so people can respond.'}</p>
+      <a class="btn primary" href={form.status === 'published' ? `/admin/forms/${form.id}/share` : `/admin/forms/${form.id}`}>{form.status === 'published' ? 'Share form' : 'Open builder'}</a>
+    </div>
+  ) : (
+    <>
+      <div class="kpis fr-kpis">
+        <div class="kpi"><small>Responses</small><b>{stats.total.toLocaleString('en-US')}</b></div>
+        <div class="kpi"><small>Last 7 days</small><b>{stats.recent.toLocaleString('en-US')}</b></div>
+        <div class="kpi"><small>Latest</small><b>{stats.last ? relativeTime(stats.last, Date.now(), tz) : '—'}</b></div>
+        <div class="kpi"><small>Current version</small><b>{version(current)}</b></div>
+      </div>
+
+      <form method="get" class="fr-tools" role="search">
+        <label class="fr-search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4" /></svg>
+          <input type="search" name="q" value={q} placeholder="Search responses" aria-label="Search responses" maxlength="100" />
+        </label>
+        <select name="range" aria-label="Date range" data-autosubmit>
+          <option value="" selected={!range}>All time</option>
+          <option value="7" selected={range === '7'}>Last 7 days</option>
+          <option value="30" selected={range === '30'}>Last 30 days</option>
+        </select>
+        <noscript><button class="btn" type="submit">Apply</button></noscript>
+        {filtered && <a class="btn ghost sm" href={keep({ q: null, range: null, page: null })}>Clear</a>}
+        <span class="fr-count">{filtered ? `${rows.length > 100 ? '100+' : data.length} matching` : `${stats.total.toLocaleString('en-US')} total`}</span>
+      </form>
+
+      {data.length ? (
+        <ResponsesTable client:load columns={columns} rows={data} formName={form.name} />
+      ) : (
+        <p class="fr-none hint">No responses match. <a href={keep({ q: null, range: null, page: null })}>Clear filters</a></p>
+      )}
+      {(page > 0 || rows.length > 100) && (
+        <nav class="fr-pager" aria-label="Pages">
+          {page > 0 ? <a class="btn sm" href={keep({ page: page > 1 ? String(page - 1) : null })}>‹ Newer</a> : <span />}
+          <span class="hint">Page {page + 1}</span>
+          {rows.length > 100 ? <a class="btn sm" href={keep({ page: String(page + 1) })}>Older ›</a> : <span />}
+        </nav>
+      )}
+    </>
+  )}
+</Admin>
+
+<script>
+  document.querySelector<HTMLSelectElement>('[data-autosubmit]')?.addEventListener('change', (e) => (e.target as HTMLSelectElement).form?.requestSubmit());
+</script>

package/src/pages/admin/forms/[id].astro

@@ -0,0 +1,27 @@
+---
+import Admin from '../../../layouts/Admin.astro';
+import FormHeader from '../../../components/forms/FormHeader.astro';
+import FormBuildPage from '../../../components/forms/FormBuildPage';
+import { getRepo } from '../../../lib/repo';
+import '../../../styles/forms.css';
+// Build tab. Edits autosave as a draft through the `forms.save` action;
+// "Publish changes" makes them live. See components/forms/FormBuildPage.tsx.
+const repo = await getRepo(Astro.locals);
+const form = await repo.forms.get(Astro.params.id || '');
+if (!form) return new Response(null, { status: 404 });
+Astro.response.headers.set('Cache-Control', 'private, no-store');
+const responses = form.kind === 'form' && form.purpose === 'general' ? (await repo.forms.submissions(form.id, 1)).length : 0;
+---
+<Admin title={form.name} section="forms" wide>
+  <FormHeader form={form} active="build">
+    <div slot="actions" id="fb-actions" class="fb-actions-slot"></div>
+  </FormHeader>
+  {form.status === 'archived' && <p class="notice warn">This form is archived and doesn’t accept responses. You can still edit it.</p>}
+  <noscript><p class="notice warn">Enable JavaScript to edit this form.</p></noscript>
+  <FormBuildPage
+    client:load
+    form={{ id: form.id, name: form.name, kind: form.kind, purpose: form.purpose, status: form.status, revision: form.revision, hasDraft: Boolean(form.draft) }}
+    definition={form.draft ?? form.definition}
+    responses={responses}
+  />
+</Admin>