ferst-core 0.7.4 → 0.7.5

package/components/blocks/Heading.astro

@@ -1,4 +1,5 @@
 ---
+import { pageSlugs, uniqueSlug } from '../../lib/slug';
 interface Props {
   text: string;
   level?: number;
@@ -7,9 +8,11 @@ interface Props {
 }
 const { text, level = 2, align, gradient = false } = Astro.props;
 const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
+// A readable, page-unique anchor so any heading can be linked to (#mass-times).
+const id = uniqueSlug(text, pageSlugs(Astro.locals));
 ---
 
-<Tag class="b-heading" data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
+<Tag class="b-heading" id={id} data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
 
 <style>
   /* By default a heading INHERITS the page/section content alignment (the
@@ -22,6 +25,7 @@ const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
     margin: 0;
     text-wrap: balance;
     white-space: pre-line; /* a title typed over several lines keeps its breaks */
+    scroll-margin-top: 6rem; /* a linked heading stops clear of the sticky header */
     line-height: 1.2;
     text-align: inherit;
   }

package/components/recipes/Contacts.astro

@@ -0,0 +1,139 @@
+---
+/**
+ * Contacts — a compact directory of people or offices. Each card: the role as its title,
+ * the name, phone and email as tap targets (email with an optional subject), address and
+ * hours. A group can carry one shared note (e.g. office hours) instead of repeating it on
+ * every card. For one contact as a branded band use `contactCard`; for one contact's
+ * links in a row, `linkRow`.
+ */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { inlineMarkdown, textWithBreaks } from '../../lib/inline-markdown';
+import { mailtoHref, telHref } from '../../lib/links';
+
+interface Contact { role: string; name?: string; phone?: string; email?: string; emailSubject?: string; address?: string; hours?: string }
+interface Props {
+  title?: string;
+  intro?: string;
+  groups: Array<{ heading?: string; note?: string; contacts: Contact[] }>;
+}
+const { title, intro, groups = [] } = Astro.props;
+---
+
+<section class="b-contacts">
+  {(title || intro) && (
+    <div class="b-contacts__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-contacts__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  {groups.map((g) => (
+    <div class="b-contacts__group">
+      {(g.heading || g.note) && (
+        <div class="b-contacts__group-head">
+          {g.heading && <h3 class="b-contacts__group-title">{g.heading}</h3>}
+          {g.note && <p class="b-contacts__note" set:html={inlineMarkdown(g.note)} />}
+        </div>
+      )}
+      <ul class="b-contacts__grid">
+        {g.contacts.map((c) => (
+          <li class="b-contacts__card">
+            <h3 class="b-contacts__role">{c.role}</h3>
+            {c.name && <p class="b-contacts__name">{c.name}</p>}
+            <div class="b-contacts__lines">
+              {c.phone && <a class="b-contacts__line" href={telHref(c.phone)}><Icon name="phone" size={16} /><span>{c.phone}</span></a>}
+              {c.email && <a class="b-contacts__line" href={mailtoHref(c.email, c.emailSubject)}><Icon name="email" size={16} /><span>{c.email}</span></a>}
+              {c.address && <p class="b-contacts__line"><Icon name="map-pin" size={16} /><span set:html={textWithBreaks(c.address)} /></p>}
+              {c.hours && <p class="b-contacts__line"><Icon name="calendar" size={16} /><span set:html={textWithBreaks(c.hours)} /></p>}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  ))}
+</section>
+
+<style>
+  .b-contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    width: 100%;
+    max-width: 72rem;
+  }
+  .b-contacts__head,
+  .b-contacts__group-head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    max-width: var(--max);
+  }
+  .b-contacts__intro,
+  .b-contacts__note {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-contacts__group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .b-contacts__group-title {
+    margin: 0;
+    font-size: 1.15rem;
+  }
+  .b-contacts__grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  }
+  .b-contacts__card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 1.1rem 1.25rem;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+  }
+  .b-contacts__role {
+    margin: 0;
+    font-size: 1.05rem;
+  }
+  .b-contacts__name {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--muted);
+  }
+  .b-contacts__lines {
+    display: grid;
+    gap: 0.35rem;
+    margin-top: 0.35rem;
+  }
+  .b-contacts__line {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin: 0;
+    color: var(--fg);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    overflow-wrap: anywhere;
+  }
+  .b-contacts__line :global(svg) {
+    flex: none;
+    margin-top: 0.2em;
+    color: var(--gold);
+  }
+  a.b-contacts__line:hover span {
+    text-decoration: underline;
+  }
+  a.b-contacts__line:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+</style>

package/components/recipes/Document.astro

@@ -1,152 +1,157 @@
----
-/**
- * Document — a policy or legal text as ONE block. Sections are numbered automatically,
- * a contents list links to each (beside the text, sticky, on wide screens), and an
- * optional "last updated" line sits at the top. Section bodies take prose formatting
- * (links, bold, lists); `items` add a list. Print-friendly: the contents list is
- * dropped on paper.
- */
-import { proseParts } from '../../lib/prose';
-import { inlineMarkdown } from '../../lib/inline-markdown';
-import { longDate } from '../../lib/documents';
-
-interface Section { title: string; body?: string; items?: string[] }
-interface Props {
-  intro?: string;
-  updated?: string;
-  numbered?: boolean;
-  toc?: boolean;
-  sections: Section[];
-}
-const { intro, updated, numbered = true, toc = true, sections = [] } = Astro.props;
-const updatedLabel = longDate(updated);
-const showToc = toc && sections.length > 1;
----
-
-<section class="b-doc" data-toc={showToc ? 'true' : undefined}>
-  {showToc && (
-    <nav class="b-doc__toc" aria-label="Contents">
-      <p class="b-doc__toc-title">Contents</p>
-      <ol>
-        {sections.map((s, i) => (
-          <li><a href={`#clause-${i + 1}`}>{numbered && <span class="b-doc__toc-num">{i + 1}.</span>} {s.title}</a></li>
-        ))}
-      </ol>
-    </nav>
-  )}
-  <div class="b-doc__body">
-    {updatedLabel && <p class="b-doc__updated">Last updated {updatedLabel}</p>}
-    {intro && <p class="b-doc__intro" set:html={inlineMarkdown(intro)} />}
-    {sections.map((s, i) => (
-      <section class="b-doc__clause" id={`clause-${i + 1}`}>
-        <h2>{numbered && <span class="b-doc__num">{i + 1}.</span>} {s.title}</h2>
-        {proseParts(s.body).map((part) =>
-          part.kind === 'p' ? <p set:html={part.html} />
-          : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
-          : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
-        )}
-        {s.items && s.items.length > 0 && <ul>{s.items.map((x) => <li set:html={inlineMarkdown(x)} />)}</ul>}
-      </section>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-doc {
-    display: grid;
-    gap: 2rem;
-    width: 100%;
-    max-width: 64rem;
-  }
-  @media (min-width: 64em) {
-    .b-doc[data-toc] {
-      grid-template-columns: 15rem minmax(0, 1fr);
-      align-items: start;
-    }
-    .b-doc__toc {
-      position: sticky;
-      top: 6rem;
-    }
-  }
-  .b-doc__toc {
-    border: var(--card-border);
-    border-radius: var(--radius);
-    background: var(--bg-surface);
-    padding: 1rem 1.1rem;
-  }
-  .b-doc__toc-title {
-    margin: 0 0 0.5rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--muted);
-  }
-  .b-doc__toc ol {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 0.35rem;
-    font-size: 0.9375rem;
-  }
-  .b-doc__toc a {
-    color: var(--fg);
-    text-decoration: none;
-  }
-  .b-doc__toc a:hover {
-    color: var(--gold);
-    text-decoration: underline;
-  }
-  .b-doc__toc-num {
-    color: var(--muted);
-    font-variant-numeric: tabular-nums;
-  }
-  .b-doc__body {
-    max-width: var(--max);
-    display: flex;
-    flex-direction: column;
-    gap: 1.75rem;
-  }
-  .b-doc__updated {
-    margin: 0;
-    font-size: 0.875rem;
-    color: var(--muted);
-  }
-  .b-doc__intro {
-    margin: 0;
-    font-size: 1.125rem;
-    line-height: 1.6;
-    color: var(--muted);
-  }
-  .b-doc__clause {
-    scroll-margin-top: 6rem;
-  }
-  .b-doc__clause h2 {
-    margin: 0 0 0.6rem;
-    font-size: 1.25rem;
-  }
-  .b-doc__num {
-    color: var(--gold);
-    font-variant-numeric: tabular-nums;
-  }
-  .b-doc__clause p,
-  .b-doc__clause ul,
-  .b-doc__clause ol {
-    margin: 0 0 0.75rem;
-    line-height: 1.7;
-  }
-  .b-doc__clause ul,
-  .b-doc__clause ol {
-    padding-inline-start: 1.4em;
-  }
-  .b-doc__clause :global(a) {
-    color: var(--accent);
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-  }
-  @media print {
-    .b-doc__toc { display: none; }
-    .b-doc[data-toc] { grid-template-columns: 1fr; }
-  }
-</style>
+---
+/**
+ * Document — a policy or legal text as ONE block. Sections are numbered automatically,
+ * a contents list links to each (beside the text, sticky, on wide screens), and an
+ * optional "last updated" line sits at the top. Section bodies take prose formatting
+ * (links, bold, lists); `items` add a list. Print-friendly: the contents list is
+ * dropped on paper.
+ */
+import { proseParts } from '../../lib/prose';
+import { inlineMarkdown } from '../../lib/inline-markdown';
+import { longDate } from '../../lib/documents';
+import { pageSlugs, uniqueSlug } from '../../lib/slug';
+
+interface Section { title: string; body?: string; items?: string[] }
+interface Props {
+  intro?: string;
+  updated?: string;
+  numbered?: boolean;
+  toc?: boolean;
+  sections: Section[];
+}
+const { intro, updated, numbered = true, toc = true, sections = [] } = Astro.props;
+const updatedLabel = longDate(updated);
+const showToc = toc && sections.length > 1;
+// Readable anchors that survive renumbering (#payment); #clause-N stays on the heading.
+const used = pageSlugs(Astro.locals);
+const ids = sections.map((s) => uniqueSlug(s.title, used));
+---
+
+<section class="b-doc" data-toc={showToc ? 'true' : undefined}>
+  {showToc && (
+    <nav class="b-doc__toc" aria-label="Contents">
+      <p class="b-doc__toc-title">Contents</p>
+      <ol>
+        {sections.map((s, i) => (
+          <li><a href={`#${ids[i]}`}>{numbered && <span class="b-doc__toc-num">{i + 1}.</span>} {s.title}</a></li>
+        ))}
+      </ol>
+    </nav>
+  )}
+  <div class="b-doc__body">
+    {updatedLabel && <p class="b-doc__updated">Last updated {updatedLabel}</p>}
+    {intro && <p class="b-doc__intro" set:html={inlineMarkdown(intro)} />}
+    {sections.map((s, i) => (
+      <section class="b-doc__clause" id={ids[i]}>
+        <h2 id={`clause-${i + 1}`}>{numbered && <span class="b-doc__num">{i + 1}.</span>} {s.title}</h2>
+        {proseParts(s.body).map((part) =>
+          part.kind === 'p' ? <p set:html={part.html} />
+          : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
+          : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
+        )}
+        {s.items && s.items.length > 0 && <ul>{s.items.map((x) => <li set:html={inlineMarkdown(x)} />)}</ul>}
+      </section>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-doc {
+    display: grid;
+    gap: 2rem;
+    width: 100%;
+    max-width: 64rem;
+  }
+  @media (min-width: 64em) {
+    .b-doc[data-toc] {
+      grid-template-columns: 15rem minmax(0, 1fr);
+      align-items: start;
+    }
+    .b-doc__toc {
+      position: sticky;
+      top: 6rem;
+    }
+  }
+  .b-doc__toc {
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    padding: 1rem 1.1rem;
+  }
+  .b-doc__toc-title {
+    margin: 0 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .b-doc__toc ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.35rem;
+    font-size: 0.9375rem;
+  }
+  .b-doc__toc a {
+    color: var(--fg);
+    text-decoration: none;
+  }
+  .b-doc__toc a:hover {
+    color: var(--gold);
+    text-decoration: underline;
+  }
+  .b-doc__toc-num {
+    color: var(--muted);
+    font-variant-numeric: tabular-nums;
+  }
+  .b-doc__body {
+    max-width: var(--max);
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+  }
+  .b-doc__updated {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+  .b-doc__intro {
+    margin: 0;
+    font-size: 1.125rem;
+    line-height: 1.6;
+    color: var(--muted);
+  }
+  .b-doc__clause {
+    scroll-margin-top: 6rem;
+  }
+  .b-doc__clause h2 {
+    scroll-margin-top: 6rem;
+    margin: 0 0 0.6rem;
+    font-size: 1.25rem;
+  }
+  .b-doc__num {
+    color: var(--gold);
+    font-variant-numeric: tabular-nums;
+  }
+  .b-doc__clause p,
+  .b-doc__clause ul,
+  .b-doc__clause ol {
+    margin: 0 0 0.75rem;
+    line-height: 1.7;
+  }
+  .b-doc__clause ul,
+  .b-doc__clause ol {
+    padding-inline-start: 1.4em;
+  }
+  .b-doc__clause :global(a) {
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  @media print {
+    .b-doc__toc { display: none; }
+    .b-doc[data-toc] { grid-template-columns: 1fr; }
+  }
+</style>

package/components/recipes/MediaText.astro

@@ -0,0 +1,92 @@
+---
+/**
+ * MediaText — an image beside its text, on the start or end side; stacks (text, then image)
+ * on a phone. The text takes prose formatting (paragraphs, lists, links); the image keeps
+ * its own shape unless `ratio` sets one (cropped to fill). An optional button follows the
+ * text.
+ */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+import { proseParts } from '../../lib/prose';
+
+interface Props {
+  title?: string;
+  text: string;
+  image: { src: string; alt?: string; caption?: string };
+  imageSide?: 'start' | 'end';
+  ratio?: 'auto' | '1/1' | '4/3' | '3/2' | '16/9';
+  cta?: { label: string; href: string };
+}
+const { title, text, image, imageSide = 'end', ratio = 'auto', cta } = Astro.props;
+---
+
+<section class="b-mediatext" data-side={imageSide}>
+  <div class="b-mediatext__text">
+    {title && <Heading text={title} level={2} />}
+    {proseParts(text).map((part) =>
+      part.kind === 'p' ? <p set:html={part.html} />
+      : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
+      : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
+    )}
+    {cta && <div class="b-mediatext__cta"><Button href={cta.href} variant="primary">{cta.label}</Button></div>}
+  </div>
+  <figure class="b-mediatext__media">
+    <img src={image.src} alt={image.alt ?? ''} loading="lazy" decoding="async" style={ratio !== 'auto' ? `aspect-ratio: ${ratio}; object-fit: cover` : undefined} />
+    {image.caption && <figcaption>{image.caption}</figcaption>}
+  </figure>
+</section>
+
+<style>
+  .b-mediatext {
+    display: grid;
+    gap: clamp(1.5rem, 4vw, 3rem);
+    align-items: center;
+    width: 100%;
+    max-width: 72rem;
+  }
+  @media (min-width: 48em) {
+    .b-mediatext {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    .b-mediatext[data-side='start'] .b-mediatext__media {
+      order: -1;
+    }
+  }
+  .b-mediatext__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+  .b-mediatext__text p,
+  .b-mediatext__text ul,
+  .b-mediatext__text ol {
+    margin: 0;
+    line-height: 1.7;
+  }
+  .b-mediatext__text ul,
+  .b-mediatext__text ol {
+    padding-inline-start: 1.4em;
+  }
+  .b-mediatext__text :global(a:not(.btn)) {
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  .b-mediatext__cta {
+    margin-top: 0.4rem;
+  }
+  .b-mediatext__media {
+    margin: 0;
+  }
+  .b-mediatext__media img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius);
+  }
+  .b-mediatext__media figcaption {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+</style>

package/components/recipes/Table.astro

@@ -8,6 +8,7 @@
 import Heading from '../blocks/Heading.astro';
 
 import { inlineMarkdown } from '../../lib/inline-markdown';
+import { filledColumns } from '../../lib/table';
 interface Props {
   title?: string;
   intro?: string;
@@ -15,6 +16,8 @@ interface Props {
   rows?: string[][];
 }
 const { title, intro, columns = [], rows = [] } = Astro.props;
+// Columns empty in every row (an unused "Evening") are dropped, not shown blank.
+const keep = filledColumns(columns, rows);
 ---
 
 <section class="b-table">
@@ -28,12 +31,12 @@ const { title, intro, columns = [], rows = [] } = Astro.props;
     <table class="b-table__table">
       {columns.length > 0 && (
         <thead>
-          <tr>{columns.map((c) => <th scope="col">{c}</th>)}</tr>
+          <tr>{keep.map((i) => <th scope="col">{columns[i]}</th>)}</tr>
         </thead>
       )}
       <tbody>
         {rows.map((row) => (
-          <tr>{row.map((cell) => <td set:html={inlineMarkdown(cell)} />)}</tr>
+          <tr>{(columns.length ? keep : row.map((_, i) => i)).map((i) => <td set:html={inlineMarkdown(row[i] ?? '')} />)}</tr>
         ))}
       </tbody>
     </table>

package/content/blocks.ts

@@ -631,6 +631,50 @@ export const timetableBlock = z.object({
     .min(1),
 });
 
+/** Contacts — a compact directory of people or offices: role as the card title, phone and
+ *  email as tap targets (email with an optional subject), address and hours, and a shared
+ *  note per group (e.g. office hours) instead of repeating it on every card. */
+export const contactsBlock = z.object({
+  type: z.literal('contacts'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  groups: z
+    .array(
+      z.object({
+        heading: z.string().optional(),
+        note: z.string().optional(),
+        contacts: z
+          .array(
+            z.object({
+              role: z.string(),
+              name: z.string().optional(),
+              phone: z.string().optional(),
+              email: z.string().optional(),
+              emailSubject: z.string().optional(),
+              address: z.string().optional(),
+              hours: z.string().optional(),
+            })
+          )
+          .min(1),
+      })
+    )
+    .min(1),
+});
+
+/** MediaText — an image beside its text (start or end), stacking on a phone. The text takes
+ *  prose formatting; the image keeps its shape (`ratio` crops to a set shape); optional CTA. */
+export const mediaTextBlock = z.object({
+  type: z.literal('mediaText'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  text: z.string(),
+  image: z.object({ src: z.string(), alt: z.string().default(''), caption: z.string().optional() }),
+  imageSide: z.enum(['start', 'end']).default('end'),
+  ratio: z.enum(['auto', '1/1', '4/3', '3/2', '16/9']).default('auto'),
+  cta: z.object({ label: z.string(), href: z.string() }).optional(),
+});
+
 export type RecipeBlock =
   | z.infer<typeof heroBlock>
   | z.infer<typeof featureCardsBlock>
@@ -661,7 +705,9 @@ export type RecipeBlock =
   | z.infer<typeof documentsBlock>
   | z.infer<typeof linkRowBlock>
   | z.infer<typeof documentBlock>
-  | z.infer<typeof timetableBlock>;
+  | z.infer<typeof timetableBlock>
+  | z.infer<typeof contactsBlock>
+  | z.infer<typeof mediaTextBlock>;
 
 /* ── Level-1 layout / container primitives ─────────────────────────────────
  * These hold child blocks, so the schema is **recursive** (a container's
@@ -777,6 +823,8 @@ export const blockSchema = z.discriminatedUnion('type', [
   linkRowBlock,
   documentBlock,
   timetableBlock,
+  contactsBlock,
+  mediaTextBlock,
   sectionBlock,
   gridBlock,
   stackBlock,