@sarimarcus/content-sites-ui 0.18.0 → 0.20.0

package/src/editorial/AuthorCard.astro

@@ -0,0 +1,174 @@
+---
+/**
+ * AuthorCard — an author's portrait, role line, name, bio and expertise badges. Three shapes: a whole-card link
+ * (`href`), a centred polaroid portrait (`polaroid`), or a plain card with a profile link. `roleLabel` is free text
+ * whose meaning is the caller's: a job title on one page, "Curated by" on another.
+ */
+import Badge from '../primitives/Badge.astro';
+import LinkArrow from '../primitives/LinkArrow.astro';
+import ArrowLabel from '../primitives/ArrowLabel.astro';
+
+interface Props {
+  name: string;
+  /** Portrait URL, base path already applied. */
+  photoSrc: string;
+  portraitAlt: string;
+  bio: string;
+  credentials?: string;
+  expertise: string[];
+  /** Profile URL used by the plain and polaroid shapes. */
+  profileHref: string;
+  /** When set, the whole card is this link. */
+  href?: string;
+  roleLabel: string;
+  viewLabel: string;
+  /** Link-card footer text, e.g. "12 articles". */
+  countLabel?: string;
+  /** Clamp the bio to two lines (link-card shape). */
+  compact?: boolean;
+  headingLevel?: 2 | 3;
+  polaroid?: boolean;
+  /** Caption under the polaroid portrait. */
+  caption?: string;
+  class?: string;
+}
+
+const {
+  name,
+  photoSrc,
+  portraitAlt,
+  bio,
+  credentials,
+  expertise,
+  profileHref,
+  href,
+  roleLabel,
+  viewLabel,
+  countLabel,
+  compact = false,
+  headingLevel = 2,
+  polaroid = false,
+  caption,
+  class: className,
+} = Astro.props;
+
+const cardBase = 'rounded-2xl border border-border bg-card p-6 shadow-sm';
+const linkExtra = 'group transition-all duration-200 hover:shadow-md hover:border-primary/40 block';
+const Heading = `h${headingLevel}` as 'h2' | 'h3';
+---
+
+{href ? (
+  <a href={href} class:list={[cardBase, linkExtra, className]}>
+    <article>
+      <div class="flex items-start gap-4">
+        <img
+          src={photoSrc}
+          alt={portraitAlt}
+          width="96"
+          height="96"
+          class="h-24 w-24 rounded-xl object-cover bg-muted shrink-0"
+          loading="lazy"
+          decoding="async"
+        />
+        <div class="min-w-0">
+          <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{roleLabel}</p>
+          <Heading class="mt-2 text-xl font-display font-semibold text-foreground">{name}</Heading>
+          <p class:list={["mt-3 text-sm text-muted-foreground leading-relaxed", compact && "line-clamp-2"]}>{bio}</p>
+        </div>
+      </div>
+
+      <div class="mt-5 flex flex-wrap gap-2">
+        {expertise.map((topic) => (
+          <Badge tone="custom" toneClass="border bg-muted/50 text-foreground" size="md" lines={0} class="border-border">
+            {topic}
+          </Badge>
+        ))}
+      </div>
+
+      <div class="mt-5 flex items-center justify-between gap-4">
+        {countLabel !== undefined && (
+          <p class="text-sm text-muted-foreground">
+            {countLabel}
+          </p>
+        )}
+        <ArrowLabel class="text-sm font-medium text-primary ml-auto">
+          {viewLabel}
+        </ArrowLabel>
+      </div>
+    </article>
+  </a>
+) : polaroid ? (
+  <article class:list={[cardBase, 'sm:p-8', className]}>
+    <div class="flex flex-col items-center gap-6 text-center lg:flex-row lg:items-start lg:gap-10 lg:text-left">
+      <div class="shrink-0 rotate-[-2deg] rounded-sm bg-white p-3 pb-8 shadow-xl ring-1 ring-black/5">
+        <img
+          src={photoSrc}
+          alt={portraitAlt}
+          width="256"
+          height="256"
+          class="h-48 w-48 sm:h-64 sm:w-64 rounded-sm object-cover bg-muted"
+          loading="lazy"
+          decoding="async"
+        />
+        {caption && (
+          <p class="mt-3 font-display italic text-sm text-neutral-600">{caption}</p>
+        )}
+      </div>
+
+      <div class="flex w-full flex-col items-center lg:items-start">
+        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{roleLabel}</p>
+        <Heading class="mt-1 text-xl font-display font-semibold text-foreground">{name}</Heading>
+        <p class="mt-4 max-w-xl text-sm text-muted-foreground leading-relaxed text-pretty">{bio}</p>
+        {credentials && <p class="mt-2 max-w-xl text-sm text-foreground leading-relaxed text-pretty">{credentials}</p>}
+
+        <div class="mt-5 flex flex-wrap justify-center gap-2 lg:justify-start">
+          {expertise.map((topic) => (
+            <Badge tone="custom" toneClass="border bg-muted/50 text-foreground" size="md" lines={0} class="border-border">
+              {topic}
+            </Badge>
+          ))}
+        </div>
+
+        <div class="mt-5">
+          <LinkArrow href={profileHref} size="sm" color="primary">
+            {viewLabel}
+          </LinkArrow>
+        </div>
+      </div>
+    </div>
+  </article>
+) : (
+  <article class:list={[cardBase, className]}>
+    <div class="flex items-start gap-4">
+      <img
+        src={photoSrc}
+        alt={portraitAlt}
+        width="96"
+        height="96"
+        class="h-24 w-24 rounded-xl object-cover bg-muted shrink-0"
+        loading="lazy"
+        decoding="async"
+      />
+      <div class="min-w-0">
+        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{roleLabel}</p>
+        <Heading class="mt-2 text-xl font-display font-semibold text-foreground">{name}</Heading>
+        <p class="mt-3 text-sm text-muted-foreground leading-relaxed">{bio}</p>
+        {credentials && <p class="mt-3 text-sm text-foreground leading-relaxed">{credentials}</p>}
+      </div>
+    </div>
+
+    <div class="mt-5 flex flex-wrap gap-2">
+      {expertise.map((topic) => (
+        <Badge tone="custom" toneClass="border bg-muted/50 text-foreground" size="md" lines={0} class="border-border">
+          {topic}
+        </Badge>
+      ))}
+    </div>
+
+    <div class="mt-5">
+      <LinkArrow href={profileHref} size="sm" color="primary">
+        {viewLabel}
+      </LinkArrow>
+    </div>
+  </article>
+)}

package/src/editorial/AuthorStrip.astro

@@ -0,0 +1,52 @@
+---
+/** AuthorStrip — a centred row of author portraits linking to their profiles, with a link to the team page. */
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import type { AuthorSummary } from './types';
+
+interface StripAuthor extends AuthorSummary {
+  displayName: string;
+  specialty: string;
+  image: ImageMetadata | string;
+}
+
+interface Props {
+  authors: readonly StripAuthor[];
+  ariaLabel: string;
+  heading: string;
+  teamHref: string;
+  teamLabel: string;
+  /** Portrait ring colour, e.g. "ring-background". */
+  ringClass?: string;
+  class?: string;
+}
+
+const { authors, ariaLabel, heading, teamHref, teamLabel, ringClass = 'ring-background', class: className = '' } = Astro.props;
+const imgClass = `w-16 h-16 rounded-full object-cover ring-2 ${ringClass} group-hover:ring-primary/60 transition-shadow duration-200`;
+---
+<section id="authors" aria-label={ariaLabel} class:list={["bg-muted/50 py-10", className]}>
+  <div class="mx-auto max-w-shell px-4 sm:px-6 lg:px-8">
+    <p class="text-center text-sm font-medium text-muted-foreground mb-6">{heading}</p>
+    <div class="flex flex-wrap justify-center gap-6 sm:gap-8">
+      {authors.map((author) => (
+        <a
+          href={author.href}
+          class="group flex flex-col items-center gap-2 transition-opacity hover:opacity-80"
+        >
+          {typeof author.image === 'string' ? (
+            <img src={author.image} alt={author.name} width="64" height="64" class={imgClass} loading="lazy" decoding="async" />
+          ) : (
+            <Image src={author.image} alt={author.name} width={64} height={64} class={imgClass} loading="lazy" />
+          )}
+          <span class="text-sm font-medium text-foreground">{author.displayName}</span>
+          <span class="text-xs text-muted-foreground">{author.specialty}</span>
+        </a>
+      ))}
+    </div>
+    <div class="mt-6 text-center">
+      <a href={teamHref} class="text-sm font-medium text-primary hover:underline">
+        {teamLabel}
+      </a>
+    </div>
+  </div>
+</section>

package/src/editorial/InsiderTips.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * InsiderTips — the "reporter notebook" block: a header with an optional author byline, then one card per tip with a
+ * kind badge. Kinds are site-defined keys mapped to a label and a tone; tip bodies arrive as site-rendered HTML.
+ */
+import Badge from '../primitives/Badge.astro';
+import type { InsiderTip, InsiderTipAuthor, InsiderTipKinds, InsiderTipTone } from './types';
+
+interface Props {
+  items: InsiderTip[];
+  kinds: InsiderTipKinds;
+  title: string;
+  eyebrow: string;
+  /** Label above the author's name. */
+  filedByLabel: string;
+  author?: InsiderTipAuthor;
+  lede?: string;
+  /** Typography colour preset for the tip bodies, e.g. "prose-stone". */
+  proseClass?: string;
+  class?: string;
+}
+
+const { items, kinds, title, eyebrow, filedByLabel, author, lede, proseClass = 'prose-stone', class: className = '' } = Astro.props;
+
+const toneClasses: Record<InsiderTipTone, { card: string; badge: string }> = {
+  accent: { card: 'border-accent/40 bg-accent/5', badge: 'bg-accent/20 text-accent-strong font-bold' },
+  primary: { card: 'border-primary/40 bg-primary/5', badge: 'bg-primary/15 text-primary' },
+  secondary: { card: 'border-secondary/40 bg-secondary/5', badge: 'bg-secondary/15 text-secondary' },
+  muted: { card: 'border-border bg-muted/35', badge: 'bg-muted text-foreground' },
+};
+const kindOf = (kind: string) => {
+  const k = kinds[kind];
+  if (!k) throw new Error(`InsiderTips: no label/tone for kind "${kind}"`);
+  return { label: k.label, ...toneClasses[k.tone] };
+};
+---
+
+{items.length > 0 && (
+  <section class:list={['rounded-2xl border border-primary/20 bg-muted/40 p-6 shadow-sm lg:p-8', className]}>
+    <div class="border-b border-primary/15 pb-5">
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div class="max-w-deck">
+          <p class="text-xs font-semibold uppercase tracking-[0.22em] text-primary">{eyebrow}</p>
+          <h2 class="mt-2 text-xl font-semibold font-display">{title}</h2>
+          {lede && <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{lede}</p>}
+        </div>
+
+        {author && (
+          <aside class="flex items-center gap-2 md:gap-3 lg:max-w-sm lg:justify-end">
+            {author.photoSrc ? (
+              <img
+                src={author.photoSrc}
+                alt={author.portraitAlt}
+                width="44"
+                height="44"
+                class="h-11 w-11 rounded-full object-cover bg-muted shrink-0"
+                loading="lazy"
+                decoding="async"
+              />
+            ) : (
+              <div class="h-11 w-11 rounded-full bg-primary/15 shrink-0" aria-hidden="true" />
+            )}
+            <div class="min-w-0">
+              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">{filedByLabel}</p>
+              {author.href ? (
+                <a href={author.href} class="font-semibold text-foreground hover:text-primary transition-colors">{author.name}</a>
+              ) : (
+                <p class="font-semibold text-foreground">{author.name}</p>
+              )}
+              {author.expertise && (
+                <p class="mt-0.5 text-xs uppercase tracking-wide text-muted-foreground">{author.expertise}</p>
+              )}
+              {author.credentials && (
+                <p class="mt-1 text-sm leading-relaxed text-muted-foreground line-clamp-2">{author.credentials}</p>
+              )}
+            </div>
+          </aside>
+        )}
+      </div>
+    </div>
+
+    <div class:list={['mt-6 grid gap-4', items.length > 1 && 'md:grid-cols-2']}>
+      {items.map((item) => {
+        const k = kindOf(item.kind);
+        return (
+          // min-w-0 + break-words: a grid item defaults to min-width:auto, so one unbreakable token (a bare URL) would
+          // size the whole track and scroll the page sideways on a phone.
+          <article class:list={['min-w-0 break-words rounded-2xl border px-5 py-4', k.card]}>
+            <Badge tone="custom" toneClass={k.badge} size="md" lines={0} class="uppercase tracking-wide !font-semibold">
+              {k.label}
+            </Badge>
+            <h3 class="mt-3 text-lg font-semibold font-display text-foreground">{item.title}</h3>
+            <div
+              class={`prose ${proseClass} prose-sm mt-3 max-w-none text-foreground/80 prose-p:my-0 prose-strong:text-foreground`}
+              set:html={item.bodyHtml}
+            />
+          </article>
+        );
+      })}
+    </div>
+  </section>
+)}

package/src/editorial/index.ts

@@ -8,3 +8,24 @@ export { default as NotFoundPage } from './NotFoundPage.astro';
 export { default as ArticlesListingPage } from './ArticlesListingPage.astro';
 export { default as ArticleFeatureCard } from './ArticleFeatureCard.astro';
 export type { EventInfoRow, EventInfoIcon } from './event';
+export { default as ArticleKeyFacts } from './ArticleKeyFacts.astro';
+export { default as AuthorCard } from './AuthorCard.astro';
+export { default as ArticleCard } from './ArticleCard.astro';
+export { default as ArticleGrid } from './ArticleGrid.astro';
+export { default as ArticleCategoryNav } from './ArticleCategoryNav.astro';
+export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategoryLink } from './types';
+export { default as InsiderTips } from './InsiderTips.astro';
+export type { InsiderTip, InsiderTipAuthor, InsiderTipKinds, InsiderTipTone } from './types';
+export { default as AuthorStrip } from './AuthorStrip.astro';
+export { default as AnswerBox } from './interludes/AnswerBox.astro';
+export { default as ComparisonTable } from './interludes/ComparisonTable.astro';
+export { default as EvidenceContext } from './interludes/EvidenceContext.astro';
+export { default as FieldNote } from './interludes/FieldNote.astro';
+export { default as Quote } from './interludes/Quote.astro';
+export { default as StatFact } from './interludes/StatFact.astro';
+export { default as Timeline } from './interludes/Timeline.astro';
+export { default as Tldr } from './interludes/Tldr.astro';
+export { default as DidYouKnow } from './interludes/DidYouKnow.astro';
+export { default as RelatedCard } from './interludes/RelatedCard.astro';
+export { default as Interlude } from './interludes/Interlude.astro';
+export type { InterludeData, InterludeLabels, RenderInline } from './interludes/types';

package/src/editorial/interludes/AnswerBox.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * AnswerBox — a single question answered in place, mid-article. The page merges these into its FAQPage JSON-LD,
+ * so the answer stays visible without interaction (no <details>).
+ */
+import type { TrustedHtml } from '../../types';
+
+interface Props {
+  question: TrustedHtml;
+  answer: TrustedHtml;
+  /** Eyebrow, e.g. "Quick answer". */
+  label: string;
+}
+const { question, answer, label } = Astro.props;
+---
+
+<aside class="my-8 rounded-lg border border-secondary/30 bg-secondary/5 p-5 sm:p-6">
+  <p class="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-secondary">
+    {label}
+  </p>
+  <p class="mb-2 text-base font-semibold leading-snug text-foreground" set:html={question} />
+  <p class="text-sm leading-relaxed text-muted-foreground sm:text-base" set:html={answer} />
+</aside>

package/src/editorial/interludes/ComparisonTable.astro

@@ -0,0 +1,30 @@
+---
+import type { TrustedHtml } from '../../types';
+
+interface Props {
+  headers: TrustedHtml[];
+  rows: TrustedHtml[][];
+}
+const { headers, rows } = Astro.props;
+---
+
+<figure class="my-8 overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
+  <table class="w-full text-sm border-collapse rounded-lg overflow-hidden border border-border bg-card">
+    <thead>
+      <tr class="bg-muted/60">
+        {headers.map((h) => (
+          <th scope="col" class="px-4 py-3 text-left font-semibold text-foreground border-b border-border" set:html={h} />
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map((row, i) => (
+        <tr class={i % 2 === 1 ? 'bg-muted/20' : ''}>
+          {row.map((cell) => (
+            <td class="px-4 py-3 text-muted-foreground leading-relaxed border-b border-border last:border-b-0 align-top" set:html={cell} />
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</figure>

package/src/editorial/interludes/DidYouKnow.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * DidYouKnow — a one-fact aside. `ruled`: top and bottom rules with a display-face body. `inline`: icon beside a
+ * smaller body. The label class is a prop so a site can pass its own eyebrow utility.
+ */
+import Icon from '../../primitives/Icon.astro';
+import type { TrustedHtml } from '../../types';
+
+interface Props {
+  content: TrustedHtml;
+  /** E.g. "Did you know?". */
+  label: string;
+  variant?: 'ruled' | 'inline';
+  labelClass?: string;
+}
+const { content, label, variant = 'ruled', labelClass } = Astro.props;
+---
+
+{variant === 'ruled' ? (
+  <aside class="my-12 sm:my-16 max-w-prose border-t-2 border-b-2 border-secondary py-6 sm:py-8">
+    <div class="flex items-center gap-2 mb-3">
+      <Icon name="lightbulb" class="w-4 h-4 text-secondary" aria-hidden="true" />
+      <p class={labelClass ?? 'text-xs font-semibold uppercase tracking-[0.2em] text-secondary'}>{label}</p>
+    </div>
+    <p
+      class="font-display text-lg sm:text-xl leading-snug text-foreground text-balance"
+      set:html={content}
+    />
+  </aside>
+) : (
+  <aside class="my-8 flex gap-3 items-start max-w-prose">
+    <Icon
+      name="lightbulb"
+      class="shrink-0 w-5 h-5 mt-1 text-accent"
+      aria-hidden="true"
+    />
+    <div>
+      <p class={labelClass ?? 'mb-1 text-xs font-semibold uppercase tracking-[0.18em] text-accent'}>{label}</p>
+      <p class="text-sm sm:text-base leading-relaxed text-foreground" set:html={content} />
+    </div>
+  </aside>
+)}

package/src/editorial/interludes/EvidenceContext.astro

@@ -0,0 +1,33 @@
+---
+import type { TrustedHtml } from '../../types';
+
+interface Props {
+  finding: TrustedHtml;
+  basis: TrustedHtml;
+  boundary: TrustedHtml;
+  /** Visible eyebrow and the aside's aria-label, e.g. "How to read this". */
+  title: string;
+  findingLabel: string;
+  basisLabel: string;
+  boundaryLabel: string;
+}
+const { finding, basis, boundary, title, findingLabel, basisLabel, boundaryLabel } = Astro.props;
+---
+
+<aside class="my-8 rounded-lg border border-primary/25 bg-primary/5 p-5 sm:p-6" aria-label={title}>
+  <p class="mb-4 text-xs font-semibold uppercase tracking-[0.18em] text-primary">{title}</p>
+  <dl class="space-y-4">
+    <div>
+      <dt class="mb-1 text-sm font-semibold text-foreground">{findingLabel}</dt>
+      <dd class="text-sm leading-relaxed text-foreground sm:text-base" set:html={finding} />
+    </div>
+    <div>
+      <dt class="mb-1 text-sm font-semibold text-foreground/80">{basisLabel}</dt>
+      <dd class="text-sm leading-relaxed text-muted-foreground sm:text-base" set:html={basis} />
+    </div>
+    <div>
+      <dt class="mb-1 text-sm font-semibold text-accent">{boundaryLabel}</dt>
+      <dd class="text-sm leading-relaxed text-muted-foreground sm:text-base" set:html={boundary} />
+    </div>
+  </dl>
+</aside>

package/src/editorial/interludes/FieldNote.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * FieldNote — a first-person aside from the article's byline author. Author name only: photo and credentials
+ * belong to the byline. Rule-and-indent rather than AnswerBox's panel, so a voice moment never reads as a Q&A.
+ */
+import type { TrustedHtml } from '../../types';
+
+interface Props {
+  content: TrustedHtml;
+  author?: string;
+  /** Links the signature to the author's profile (rel="author"). */
+  authorHref?: string;
+  /** Eyebrow, e.g. "From the field". */
+  label: string;
+  class?: string;
+}
+const { content, author, authorHref, label, class: className } = Astro.props;
+---
+
+<aside class:list={['my-8 max-w-prose border-l-2 border-accent/60 pl-5 sm:pl-6', className]}>
+  <p class="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-accent">
+    {label}
+  </p>
+  <p class="text-sm italic leading-relaxed text-foreground sm:text-base" set:html={content} />
+  {author && !authorHref && (
+    <p class="mt-3 text-xs not-italic text-muted-foreground">— {author}</p>
+  )}
+  {author && authorHref && (
+    <p class="mt-3 text-xs not-italic text-muted-foreground">
+      — <a
+        href={authorHref}
+        rel="author"
+        class="rounded text-muted-foreground underline decoration-dotted underline-offset-2 transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >{author}</a>
+    </p>
+  )}
+</aside>

package/src/editorial/interludes/Interlude.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * Interlude — renders one authored interlude. Entity types (related-card, monument-feature, article-feature) render
+ * nothing here: their target and image are site data, so the site's adapter renders RelatedCard for them.
+ */
+import Callout from '../../primitives/Callout.astro';
+import FeatureList from '../../primitives/FeatureList.astro';
+import { trustedHtml } from '../../types';
+import AnswerBox from './AnswerBox.astro';
+import ComparisonTable from './ComparisonTable.astro';
+import DidYouKnow from './DidYouKnow.astro';
+import EvidenceContext from './EvidenceContext.astro';
+import FieldNote from './FieldNote.astro';
+import Quote from './Quote.astro';
+import StatFact from './StatFact.astro';
+import Timeline from './Timeline.astro';
+import Tldr from './Tldr.astro';
+import type { InterludeData, InterludeLabels, RenderInline } from './types';
+
+interface Props {
+  interlude: InterludeData;
+  renderInline: RenderInline;
+  labels: InterludeLabels;
+  /** Byline author, signs a `field-note`. */
+  author?: string;
+  didYouKnowVariant?: 'ruled' | 'inline';
+  didYouKnowLabelClass?: string;
+}
+const { interlude: il, renderInline: md, labels, author, didYouKnowVariant, didYouKnowLabelClass } = Astro.props;
+---
+
+{il.type === 'quote' && (
+  <Quote
+    variant={il.variant}
+    content={md(il.content)}
+    attribution={il.attribution && { name: md(il.attribution.name), role: il.attribution.role ? md(il.attribution.role) : undefined }}
+  />
+)}
+
+{il.type === 'stat-fact' && <StatFact figure={trustedHtml(il.figure)} caption={md(il.caption)} />}
+
+{il.type === 'evidence-context' && (
+  <EvidenceContext
+    finding={md(il.finding)}
+    basis={md(il.basis)}
+    boundary={md(il.boundary)}
+    title={labels.evidence.title}
+    findingLabel={labels.evidence.finding}
+    basisLabel={labels.evidence.basis}
+    boundaryLabel={labels.evidence.boundary}
+  />
+)}
+
+{il.type === 'tldr' && (
+  <Tldr
+    content={il.content === undefined ? trustedHtml('') : md(il.content)}
+    bullets={(il.bullets ?? []).map(md)}
+    title={il.title}
+    bulletsLabel={labels.tldr.bullets}
+    proseLabel={labels.tldr.prose}
+  />
+)}
+
+{il.type === 'did-you-know' && (
+  <DidYouKnow content={md(il.content)} label={labels.didYouKnow} variant={didYouKnowVariant} labelClass={didYouKnowLabelClass} />
+)}
+
+{il.type === 'timeline' && (
+  <Timeline
+    events={il.events.map((e) => ({ date: e.date, label: md(e.label), description: e.description ? md(e.description) : undefined }))}
+    label={labels.timeline}
+  />
+)}
+
+{il.type === 'comparison-table' && <ComparisonTable headers={il.headers.map(md)} rows={il.rows.map((row) => row.map(md))} />}
+
+{il.type === 'answer-box' && <AnswerBox question={md(il.question)} answer={md(il.answer)} label={labels.answerBox} />}
+
+{il.type === 'field-note' && <FieldNote content={md(il.content)} author={author} label={labels.fieldNote} />}
+
+{il.type === 'caution' && (
+  <Callout type={il.variant} title={il.title} class="my-8">
+    <Fragment set:html={md(il.content)} />
+  </Callout>
+)}
+
+{il.type === 'checklist' && (
+  <div class="my-6">
+    <FeatureList title={il.title} items={il.items.map(md)} variant="checklist" headingLevel="h3" container compact />
+  </div>
+)}

package/src/editorial/interludes/Quote.astro

@@ -0,0 +1,41 @@
+---
+import type { TrustedHtml } from '../../types';
+
+interface Attribution {
+  name: TrustedHtml;
+  role?: TrustedHtml;
+}
+interface Props {
+  variant: 'pull' | 'external';
+  content: TrustedHtml;
+  attribution?: Attribution;
+}
+const { variant, content, attribution } = Astro.props;
+---
+
+{variant === 'pull' && (
+  <figure class="my-10 pl-6 sm:pl-10 border-l border-primary/30">
+    <blockquote class="text-xl sm:text-2xl font-display italic leading-snug text-foreground/90 text-balance">
+      <span set:html={content} />
+    </blockquote>
+  </figure>
+)}
+
+{variant === 'external' && (
+  <figure class="relative my-10 pl-12 pr-6 py-7 sm:pl-14 sm:pr-8 sm:py-8 rounded-lg bg-muted border border-border">
+    <span
+      class="pointer-events-none absolute left-4 top-3 sm:left-5 select-none font-display text-5xl sm:text-6xl leading-none text-accent"
+      aria-hidden="true"
+    >&ldquo;</span>
+    <blockquote class="text-lg sm:text-xl italic leading-relaxed text-foreground/90 text-balance">&ldquo;<span set:html={content} />&rdquo;</blockquote>
+    {attribution && (
+      <figcaption class="mt-4 flex items-baseline gap-2 text-sm text-muted-foreground">
+        <span class="block h-px w-6 bg-primary/40" aria-hidden="true"></span>
+        <cite class="not-italic">
+          <span class="font-semibold text-foreground" set:html={attribution.name} />
+          {attribution.role && <span class="ml-1.5 text-muted-foreground/80">, <span set:html={attribution.role} /></span>}
+        </cite>
+      </figcaption>
+    )}
+  </figure>
+)}