@acms-subir/core 0.3.3 → 0.3.5

package/src/lib/sections.ts

@@ -1,10 +1,12 @@
 import sanitizeHtml from 'sanitize-html';
 import type { z } from 'zod';
 import type { ContentRepository } from './repo/types';
-import type { Settings } from './schema';
+import { authorSlug, type Settings, type User } from './schema';
+import { htmlToPlaintext } from './plaintext';
 import type { SectionInstance as SectionInstanceSchema, SectionDefinition } from '../theme-sdk/contract.mjs';
 import { normalizeData, safeUrl, SOURCE_LIMIT_MAX, isEmptyValue, safeFocus, focusKey } from '../theme-sdk/fields.mjs';
 import type { Theme } from './theme';
+import { themeAssetUrl } from './theme-assets';
 import { CONTENT, collectionUrl } from './content';
 import { formatDate, siteLocale } from './dates';
 import { upcomingEvents } from './calendar/cards';
@@ -33,7 +35,9 @@ export interface EventItem {
   /** "11:00 AM – 1:00 PM EDT" */ time: string; month: string; day: string; weekday: string;
   cta: { label: string; href: string } | null;
 }
-export interface PostItem { title: string; url: string; excerpt: string; image: string; imageAlt: string; date: string; publishedAt: number | null; tags: string[] }
+export interface PostAuthor { name: string; url: string; avatar: string }
+// excerpt: the post's own, else the first ~160 characters of its text
+export interface PostItem { title: string; url: string; excerpt: string; image: string; imageAlt: string; date: string; publishedAt: number | null; tags: string[]; authors: PostAuthor[] }
 export interface BookingItem { title: string; url: string; description: string; resource: string; minutes: number }
 
 /** apply a theme migration when the stored instance is older than the definition */
@@ -103,10 +107,14 @@ function resolveLink(value: unknown, refs: RefMap, lp: Lp = same): LinkValue {
   return { label: String(v.label ?? ''), href, external: /^https?:\/\//i.test(href) };
 }
 
-function resolveScalar(field: FieldDef, value: unknown, refs: RefMap, lp: Lp = same): unknown {
+type Asset = (path: string) => string;
+const noAsset: Asset = () => '';
+function resolveScalar(field: FieldDef, value: unknown, refs: RefMap, lp: Lp = same, asset: Asset = noAsset): unknown {
   switch (field.type) {
     case 'richtext': return sanitizeRichText(String(value ?? ''));
-    case 'url': case 'image': return safeUrl(value);
+    // images may name a file the theme ships: "assets/hero.jpg" → its built URL
+    case 'image': return typeof value === 'string' && /^(\.\/)?assets\//.test(value) ? asset(value) : safeUrl(value);
+    case 'url': return safeUrl(value);
     case 'link': return resolveLink(value, refs, lp);
     default: return value;
   }
@@ -145,9 +153,15 @@ async function resolveSource(field: Extract<FieldDef, { type: 'source' }>, value
     const collection = cfg.collection && CONTENT.collections[cfg.collection] ? cfg.collection : 'posts';
     let posts = await repo.listPublishedPosts(collection);
     if (cfg.tag) posts = posts.filter((p) => p.tags.some((t) => t.toLowerCase() === cfg.tag!.toLowerCase()));
-    return posts.slice(0, limit).map((raw): PostItem => { const p = lang ? localizeDoc(raw, lang) : raw; return {
-      title: p.title, url: lp(collectionUrl(p.collection, p.slug)), excerpt: p.excerpt, image: safeUrl(p.cover), imageAlt: p.coverAlt,
+    const shown = posts.slice(0, limit);
+    // public byline only: name, profile URL, avatar — never emails or roles
+    const users = shown.some((p) => p.authorIds.length || p.authorId) ? new Map((await repo.listUsers()).map((u) => [u.id, u])) : new Map();
+    return shown.map((raw): PostItem => { const p = lang ? localizeDoc(raw, lang) : raw; return {
+      title: p.title, url: lp(collectionUrl(p.collection, p.slug)), excerpt: p.excerpt || autoExcerpt(p.bodyHtml), image: safeUrl(p.cover), imageAlt: p.coverAlt,
       date: formatDate(p.publishedAt, settings, 'short'), publishedAt: p.publishedAt ?? null, tags: p.tags,
+      authors: (raw.authorIds.length ? raw.authorIds : raw.authorId ? [raw.authorId] : [])
+        .map((id) => users.get(id)).filter((u): u is User => Boolean(u))
+        .map((u) => ({ name: u.name, url: lp(`/author/${authorSlug(u)}`), avatar: safeUrl(u.avatar) })),
     }; });
   }
   if (!bookingsEnabled()) return [];
@@ -160,6 +174,15 @@ async function resolveSource(field: Extract<FieldDef, { type: 'source' }>, value
   });
 }
 
+// first ~160 characters of the body, cut at a word, for posts without an excerpt
+export function autoExcerpt(html: string, max = 160): string {
+  const text = htmlToPlaintext(html);
+  if (text.length <= max) return text;
+  const cut = text.slice(0, max + 1);
+  const at = cut.lastIndexOf(' ');
+  return `${(at > max * 0.6 ? cut.slice(0, at) : text.slice(0, max)).replace(/[\s,.;:!?—–-]+$/, '')}…`;
+}
+
 export interface ResolveContext { repo: ContentRepository; settings: Settings; now: number }
 
 /** stored data → component props: defaults filled, refs/sources resolved, richtext sanitized */
@@ -170,6 +193,8 @@ export async function resolveSectionData(def: Definition, stored: Record<string,
   const refMap = refs.size ? await resolveRefs(refs, ctx.repo) : new Map<string, string>();
   const lang = isExtraLocale(ctx.settings.locale) ? ctx.settings.locale : '';
   const lp: Lp = lang ? (p) => localePath(p, lang) : same;
+  // 'ink' = DEFAULT_THEME (importing it would load every theme template)
+  const asset: Asset = (p) => themeAssetUrl(ctx.settings.activeTheme || 'ink', p);
   const out: Record<string, unknown> = {};
   await Promise.all(Object.entries(def.fields).map(async ([key, field]) => {
     const value = data[key];
@@ -178,13 +203,13 @@ export async function resolveSectionData(def: Definition, stored: Record<string,
       out[key] = (value as Record<string, unknown>[]).map((row) => {
         const item: Record<string, unknown> = {};
         for (const [k, sub] of Object.entries(field.fields)) {
-          item[k] = resolveScalar(sub as FieldDef, row[k], refMap, lp);
+          item[k] = resolveScalar(sub as FieldDef, row[k], refMap, lp, asset);
           if (sub.type === 'image') item[`${k}Focus`] = safeFocus(row[focusKey(k)]);
         }
         return item;
       });
     } else {
-      out[key] = resolveScalar(field, value, refMap, lp);
+      out[key] = resolveScalar(field, value, refMap, lp, asset);
       // images also hand over their focal point, ready for object-position
       if (field.type === 'image') out[`${key}Focus`] = safeFocus(stored[focusKey(key)]);
     }

package/src/lib/site-chrome.ts

@@ -0,0 +1,34 @@
+// The `site` prop given to a theme's templates/header.astro and
+// templates/footer.astro. Everything is resolved for the current request:
+// links are already localized, `current` marks the page you're on, languages
+// carry their own names ("Español"), and social links carry inline SVG icons.
+//
+// Core behaviors keep working inside a custom header through data hooks:
+//   [data-search-open]   opens the search dialog (when site.search is set)
+//   [data-scheme-toggle] flips light/dark (when site.schemeToggle is true)
+//   [data-menu-open]     opens the phone menu sheet (built from site.links)
+//   [data-live-header]   (hidden) becomes the "Live" link during a stream
+export interface ChromeLink {
+  label: string;
+  url: string;
+  current: boolean;
+  external: boolean;
+}
+
+export interface SiteChrome {
+  title: string;
+  tagline: string;
+  logo: string; // '' when the site has no logo
+  homeUrl: string;
+  links: ChromeLink[]; // header navigation
+  footerLinks: ChromeLink[];
+  social: (ChromeLink & { icon: string })[]; // icon: inline SVG ('' = text link)
+  readLinks: ChromeLink[]; // collections, search, RSS
+  footerHtml: string; // Settings → footer text, rendered
+  languages: { code: string; label: string; url: string; current: boolean }[]; // [] when single-language
+  search: { url: string; label: string } | null;
+  schemeToggle: boolean;
+  liveHeader: boolean;
+  headerStyle: string; // theme token `header`
+  footerStyle: string; // theme token `footer`
+}

package/src/lib/theme-assets.ts

@@ -0,0 +1,16 @@
+// Files a theme ships under assets/, as built URLs. Kept apart from theme.ts
+// (which loads every .astro template) so section data resolution can use it
+// without pulling the templates in.
+import * as user from 'virtual:acms-user-themes';
+
+const builtin = import.meta.glob(['../themes/*/assets/**/*', '!**/.img-subir-originals/**'], { eager: true, query: '?url', import: 'default' }) as Record<string, string>;
+
+// "assets/hero.jpg" (relative to the theme folder) → the built asset URL, so
+// section image fields and defaults can point at files the theme ships.
+// '' when the theme has no such file. Project themes win over built-ins.
+export function themeAssetUrl(slug: string, path: string): string {
+  const file = path.replace(/^\.\//, '');
+  if (!/^assets\/[^?#]+$/.test(file) || file.includes('..')) return '';
+  const all = { ...builtin, ...((user as { assets?: Record<string, string> }).assets ?? {}) };
+  return Object.entries(all).find(([p]) => p.endsWith(`/themes/${slug}/${file}`))?.[1] ?? '';
+}

package/src/lib/theme.ts

@@ -83,6 +83,10 @@ export interface Theme {
   pageTemplates: Record<string, unknown>;
   // templates/event.astro replaces the built-in event page layout
   EventTemplate: unknown | null;
+  // templates/header.astro / footer.astro replace the site header and footer;
+  // they receive a `site` prop (lib/site-chrome.ts) with links already resolved
+  HeaderTemplate: unknown | null;
+  FooterTemplate: unknown | null;
 }
 
 interface ThemeJson { sections?: Record<string, unknown>; version?: string; name?: string; description?: string; tokens?: Record<string, unknown>; post?: Record<string, unknown> }
@@ -100,6 +104,8 @@ const homes = import.meta.glob('../themes/*/templates/home.astro', { eager: true
 const postTpls = import.meta.glob('../themes/*/templates/post-*.astro', { eager: true }) as Record<string, { default: unknown }>;
 const pageTpls = import.meta.glob('../themes/*/templates/page-*.astro', { eager: true }) as Record<string, { default: unknown }>;
 const eventTpls = import.meta.glob('../themes/*/templates/event.astro', { eager: true }) as Record<string, { default: unknown }>;
+const headerTpls = import.meta.glob('../themes/*/templates/header.astro', { eager: true }) as Record<string, { default: unknown }>;
+const footerTpls = import.meta.glob('../themes/*/templates/footer.astro', { eager: true }) as Record<string, { default: unknown }>;
 const migrationMods = {
   ...(import.meta.glob('../themes/*/migrations/*.mjs', { eager: true }) as Record<string, { default?: unknown }>),
   ...((user as { migrations?: Record<string, { default?: unknown }> }).migrations ?? {}),
@@ -126,7 +132,9 @@ function buildThemes(
   homeMap: Record<string, { default: unknown }>,
   postMap: Record<string, { default: unknown }>,
   pageMap: Record<string, { default: unknown }>,
-  eventMap: Record<string, { default: unknown }> = {}
+  eventMap: Record<string, { default: unknown }> = {},
+  headerMap: Record<string, { default: unknown }> = {},
+  footerMap: Record<string, { default: unknown }> = {}
 ): Theme[] {
   return Object.entries(jsonMap).map(([path, raw]) => {
     const slug = slugOf(path);
@@ -157,18 +165,22 @@ function buildThemes(
       postTemplates: templatesFor(slug, postMap, 'post'),
       pageTemplates: templatesFor(slug, pageMap, 'page'),
       EventTemplate: Object.entries(eventMap).find(([p]) => slugOf(p) === slug)?.[1]?.default ?? null,
+      HeaderTemplate: Object.entries(headerMap).find(([p]) => slugOf(p) === slug)?.[1]?.default ?? null,
+      FooterTemplate: Object.entries(footerMap).find(([p]) => slugOf(p) === slug)?.[1]?.default ?? null,
     };
   });
 }
 
-const builtins = buildThemes(jsons, csses, homes, postTpls, pageTpls, eventTpls);
+const builtins = buildThemes(jsons, csses, homes, postTpls, pageTpls, eventTpls, headerTpls, footerTpls);
 const projectThemes = buildThemes(
   user.jsons as Record<string, ThemeJson>,
   user.csses,
   user.homes,
   user.postTpls,
   user.pageTpls,
-  (user as { eventTpls?: Record<string, { default: unknown }> }).eventTpls ?? {}
+  (user as { eventTpls?: Record<string, { default: unknown }> }).eventTpls ?? {},
+  (user as { headerTpls?: Record<string, { default: unknown }> }).headerTpls ?? {},
+  (user as { footerTpls?: Record<string, { default: unknown }> }).footerTpls ?? {}
 );
 const projectSlugs = new Set(projectThemes.map((t) => t.slug));
 
@@ -176,6 +188,8 @@ const themes: Theme[] = [...builtins.filter((t) => !projectSlugs.has(t.slug)), .
   (a, b) => (a.slug === DEFAULT_THEME ? -1 : b.slug === DEFAULT_THEME ? 1 : a.name.localeCompare(b.name))
 );
 
+export { themeAssetUrl } from './theme-assets';
+
 export function listThemes(): Theme[] {
   return themes;
 }

package/src/middleware.ts

@@ -5,7 +5,7 @@ import { getRepo } from './lib/repo';
 import { CONTENT } from './lib/content';
 import { processDueDeliveries, waitUntilFrom } from './lib/webhooks';
 import { dispatchEmail } from './lib/email/service';
-import { sendDueReminders } from './lib/booking/service';
+import { decideOverdue, sendDueReminders } from './lib/booking/service';
 import { PUSH } from './lib/push/config';
 import { processPushQueue, runPushJobs } from './lib/push/service';
 import { previewParamRedirect, hasPreviewCookie } from './lib/designPreview';
@@ -110,7 +110,11 @@ export const onRequest = defineMiddleware(async (context, next) => {
       if (wait) wait(retries); else await retries;
       // booking reminders (Node has no cron): site URL, else this request's origin
       const reminders = repo.getSettings()
-        .then((s) => sendDueReminders(repo, { origin: s.siteUrl.replace(/\/+$/, '') || context.url.origin, locals: context.locals, now }))
+        .then(async (s) => {
+          const flow = { origin: s.siteUrl.replace(/\/+$/, '') || context.url.origin, locals: context.locals, now };
+          await sendDueReminders(repo, flow);
+          await decideOverdue(repo, flow);
+        })
         .catch(() => {});
       if (wait) wait(reminders); else await reminders;
       // push jobs (Node has no cron): never awaited here, errors are logged

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

@@ -1,5 +1,7 @@
 ---
 import Admin from '../../../layouts/Admin.astro';
+import BookingsHead from '../../../components/calendar/BookingsHead.astro';
+import { eventHolds } from '../../../lib/booking/holds';
 import Modal from '../../../components/Modal.astro';
 import { getRepo } from '../../../lib/repo';
 import type { Booking, BookingStatus } from '../../../lib/schema';
@@ -73,7 +75,7 @@ if (Astro.request.method === 'POST') {
       const allDay = Boolean(form.get('allDay'));
       const start = allDay ? localMidnight(date, tz) : toMs(date, String(form.get('start')));
       const end = allDay ? localMidnight(addDaysYmd(date, 1), tz) : toMs(date, String(form.get('end')));
-      if (!r || Number.isNaN(start) || Number.isNaN(end)) throw new BookingError(400, 'Choose a resource, date and times.');
+      if (!r || Number.isNaN(start) || Number.isNaN(end)) throw new BookingError(400, 'Choose a room or person, a date and times.');
       const b = await createBlock(repo, r, start, end, String(form.get('note') || ''));
       if (!b) throw new BookingError(409, 'That time already has a booking — cancel or move it first.');
       return Astro.redirect(keep({ notice: `${r.name} is blocked.` }));
@@ -85,6 +87,9 @@ if (Astro.request.method === 'POST') {
       const start = toMs(String(form.get('date')), String(form.get('time')));
       if (Number.isNaN(start)) throw new BookingError(400, 'Pick a date and time.');
       const len = link.mode === 'range' && link.lengths.length ? Number(form.get('len')) || link.lengths[0] : link.mode === 'day' ? 1440 : link.duration;
+      // staff may book over an event's hold, but only on purpose
+      const held = (await eventHolds(repo, settings, start, start + len * 60_000, r.id))[0];
+      if (held && !form.has('overHold')) throw new BookingError(409, `${r.name} is held for “${held.title}” then. Tick “Book anyway” to add it regardless.`);
       const b = await createResourceBooking(repo, {
         resource: r, link, start, end: start + len * 60_000, source: 'admin', status: 'confirmed',
         booker: { name: String(form.get('name') || ''), email: String(form.get('email') || ''), phone: String(form.get('phone') || '') },
@@ -155,6 +160,8 @@ const dayCols = resources.filter((r) => !resFilter || r.id === resFilter).map((r
   r, items: all.filter((b) => b.resourceId === r.id && active(b) && b.start < dayEnd && b.end > dayStart),
 }));
 const H0 = 7, H1 = 22;
+// rooms held by events that day (lib/booking/holds.ts), drawn under bookings
+const dayHolds = view === 'day' ? await eventHolds(repo, settings, dayStart, dayEnd) : [];
 const pos = (b: Booking) => {
   const s = Math.max(b.start, dayStart), e = Math.min(b.end, dayEnd);
   const top = ((s - dayStart) / 3_600_000 - H0) / (H1 - H0) * 100;
@@ -164,7 +171,7 @@ const pos = (b: Booking) => {
 
 const selected = Astro.url.searchParams.get('b') ? await repo.getBooking(Astro.url.searchParams.get('b')!) : null;
 const provider = emailProvider(Astro.locals);
-const TABS = [['upcoming', 'Upcoming'], ['unconfirmed', 'Unconfirmed'], ['past', 'Past'], ['cancelled', 'Cancelled']] as const;
+const TABS = [['upcoming', 'Upcoming'], ['unconfirmed', 'Needs approval'], ['past', 'Past'], ['cancelled', 'Cancelled']] as const;
 const statusLabel = (b: Booking) => (b.kind === 'block' ? 'Blocked' : b.status[0].toUpperCase() + b.status.slice(1));
 const whenOf = (b: Booking) => (b.end - b.start >= 86_400_000 - 3_600_000 && ymd(b.start, tz) !== ymd(b.end - 1, tz)
   ? `${f.day.format(b.start)} – ${f.day.format(b.end - 1)}`
@@ -174,21 +181,14 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
 ---
 
 <Admin title="Bookings" section="calendar:bookings" wide={view === 'day'}>
-  <div class="page-head">
-    <div>
-      <h1>Bookings</h1>
-      <p class="sub">{counts.unconfirmed ? `${counts.unconfirmed} waiting for approval · ` : ''}{week} in the next 7 days</p>
-    </div>
-    <div class="page-actions">
-      <nav class="seg" aria-label="View">
-        <a class={view === 'agenda' ? 'on' : ''} href={keep({ view: null })}>Agenda</a>
-        <a class={view === 'day' ? 'on' : ''} href={keep({ view: 'day' })}>Day</a>
-      </nav>
-      <a class="btn" href={keep({ format: 'csv', b: null, notice: null })}>Export</a>
-      <button class="btn" type="button" data-modal="bk-block" disabled={!resources.length}>Block time</button>
-      <button class="btn primary" type="button" data-modal="bk-add" disabled={!activeLinks.length}>Add booking</button>
-    </div>
-  </div>
+  <BookingsHead active="requests" inPlace pending={counts.unconfirmed} rooms={resources.length}
+    sub={`${counts.unconfirmed ? `${counts.unconfirmed} ${counts.unconfirmed === 1 ? 'needs' : 'need'} approval · ` : ''}${week} in the next 7 days`}>
+    <nav class="seg" aria-label="View">
+      <a class={view === 'agenda' ? 'on' : ''} href={keep({ view: null })}>Agenda</a>
+      <a class={view === 'day' ? 'on' : ''} href={keep({ view: 'day' })}>Day</a>
+    </nav>
+    <a class="btn" href={keep({ format: 'csv', b: null, notice: null })}>Export</a>
+  </BookingsHead>
   {notice && <p class="notice" role="status">{notice}</p>}
   {error && <p class="notice warn" role="alert">{error}</p>}
   {provider === 'none' && <p class="notice"><span>Emails are off — set <code>EMAIL_FROM</code> plus <code>RESEND_API_KEY</code> (or a Cloudflare <code>send_email</code> binding named EMAIL) so guests get confirmations and reminders.</span></p>}
@@ -196,13 +196,13 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
   {resources.length === 0 && !all.length ? (
     <div class="empty-state">
       <b>No bookings yet</b>
-      <p>Add a room or a person under Resources, share its booking link, and bookings land here.</p>
-      <a class="btn primary" href="/admin/calendar/resources?new=1">New resource</a>
+      <p>Bookings are times people reserve with a room or person. Add one, share its booking link, and requests land here.</p>
+      <a class="btn primary" href="/admin/calendar/resources?new=1">Add a room or person</a>
     </div>
   ) : (
   <>
     <div class="bk-kpis kpis">
-      <div class="kpi"><small>Waiting for approval</small><b>{counts.unconfirmed}</b></div>
+      <div class="kpi"><small>Needs approval</small><b>{counts.unconfirmed}</b></div>
       <div class="kpi"><small>Next 7 days</small><b>{week}</b></div>
       <div class="kpi"><small>Today</small><b>{all.filter((b) => active(b) && ymd(b.start, tz) === today).length}</b></div>
       <div class="kpi"><small>Cancelled · 30 days</small><b>{cancelled30}</b></div>
@@ -229,9 +229,9 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
       </div>
       {resources.length > 1 && (
         <details class={`fmenu ${resFilter ? 'is-set' : ''}`}>
-          <summary>{resFilter ? resById.get(resFilter)?.name : 'All resources'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6" /></svg></summary>
+          <summary>{resFilter ? resById.get(resFilter)?.name : 'All rooms & people'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6" /></svg></summary>
           <div class="fmenu-pop">
-            <a class={!resFilter ? 'on' : ''} href={keep({ r: null })}>All resources</a>
+            <a class={!resFilter ? 'on' : ''} href={keep({ r: null })}>All rooms &amp; people</a>
             {resources.map((r) => <a class={resFilter === r.id ? 'on' : ''} href={keep({ r: r.id })}>{r.name}</a>)}
           </div>
         </details>
@@ -247,6 +247,11 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
               <div class="bk-day-hours">{Array.from({ length: H1 - H0 }, (_, i) => <span>{f.time.format(dayStart + (H0 + i) * 3_600_000).replace(':00', '')}</span>)}</div>
               {dayCols.map((c) => (
                 <div class="bk-day-col">
+                  {dayHolds.filter((h) => h.resourceId === c.r.id).map((h) => (
+                    <a class="bk-blk is-hold" style={pos({ start: h.start, end: h.end } as Booking)} href={`/admin/calendar/events/${h.eventId}`} title={`Held for ${h.title}`}>
+                      <b>Held · {h.title}</b><small>{f.time.format(h.eventStart)} – {f.time.format(h.eventEnd)}{h.start < h.eventStart || h.end > h.eventEnd ? ' · incl. setup/cleanup' : ''}</small>
+                    </a>
+                  ))}
                   {c.items.map((b) => (
                     <a class={`bk-blk is-${b.kind === 'block' ? 'block' : b.status}`} style={pos(b)} href={keep({ b: b.id })}>
                       <b>{titleOf(b)}</b><small>{whenOf(b)}</small>
@@ -260,7 +265,7 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
           <>
             {pending.length > 0 && (
               <section class="card bk-group">
-                <div class="bk-dayh"><b>Needs a decision</b><span>{pending.length}</span></div>
+                <div class="bk-dayh"><b>Needs approval</b><span>{pending.length}</span></div>
                 {pending.map((b) => (
                   <div class={`bk-row${selected?.id === b.id ? ' is-sel' : ''}`}>
                     <a class="bk-when" href={keep({ b: b.id })}>{f.day.format(b.start)}<small>{whenOf(b)}</small></a>
@@ -354,10 +359,10 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
   </>
   )}
 
-  <Modal id="bk-block" title="Block time">
+  <Modal id="bk-block" title="Block time" open={Astro.url.searchParams.has('block') && resources.length > 0}>
     <form method="post">
       <input type="hidden" name="op" value="block" />
-      <label class="field"><span>Resource</span><select name="resourceId">{resources.map((r) => <option value={r.id} selected={r.id === resFilter}>{r.name}</option>)}</select></label>
+      <label class="field"><span>Room or person</span><select name="resourceId">{resources.map((r) => <option value={r.id} selected={r.id === resFilter}>{r.name}</option>)}</select></label>
       <div class="field-row three">
         <label class="field"><span>Date</span><input type="date" name="date" value={day} required /></label>
         <label class="field"><span>From</span><input type="time" name="start" value="09:00" /></label>
@@ -369,7 +374,7 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
     </form>
   </Modal>
 
-  <Modal id="bk-add" title="Add booking">
+  <Modal id="bk-add" title="Add booking" open={Astro.url.searchParams.has('add') && activeLinks.length > 0}>
     <form method="post">
       <input type="hidden" name="op" value="add" />
       <label class="field"><span>Booking link</span><select name="linkId">{activeLinks.map((l) => <option value={l.id}>{resById.get(l.resourceId)?.name} · {l.name}</option>)}</select></label>
@@ -383,6 +388,7 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
         <label class="field"><span>Email</span><input type="email" name="email" required /></label>
       </div>
       <label class="field"><span>Phone <em class="hint">optional</em></span><input type="tel" name="phone" /></label>
+      <label class="check-row"><input type="checkbox" name="overHold" /> Book anyway if an event is holding the room</label>
       <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Add and confirm</button></div>
       <p class="hint modal-note">Staff bookings skip notice windows but can never overlap another booking.</p>
     </form>