@sarimarcus/content-sites-ui 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.20.0 (2026-10-02)
+
+- `./editorial` article interludes: `Interlude` dispatcher (site `renderInline`, `labels`, `didYouKnowVariant`; entity interludes left to the site), `AnswerBox`, `ComparisonTable`, `EvidenceContext`, `FieldNote` (`authorHref`, `class`), `Quote`, `StatFact`, `Timeline`, `Tldr`, `DidYouKnow` (`ruled` / `inline`, `labelClass`) and `RelatedCard` (`inline` / `featured`, `eyebrowClass`). Every visible and aria string is a required prop; HTML props are `TrustedHtml`. Types `InterludeData`, `InterludeLabels`, `RenderInline` (SLA-2740).
+
 ## 0.19.0 (2026-10-02)
 
 - `./editorial` editorial presentation: `ArticleKeyFacts`, `AuthorCard` (link, polaroid and plain shapes), `AuthorStrip`, `ArticleCard` and `ArticleGrid`, `ArticleCategoryNav`, `InsiderTips` (site-defined tip kinds). Every visible and aria string is a required prop. New view-model types `ArticleSummary`, `AuthorSummary`, `KeyFact`, `SourceItem`, `ArticleCategoryLink`, `InsiderTip`, `InsiderTipKinds`, `InsiderTipAuthor` (SLA-2740).

package/README.md

@@ -128,6 +128,28 @@ let a site keep its own roles.
 These render inside the site's article styles (`.article-body` link rules, typography plugin presets); outside them
 they look different.
 
+### Article interludes
+
+```astro
+---
+import { Interlude, RelatedCard } from '@sarimarcus/content-sites-ui/editorial';
+import { trustedHtml } from '@sarimarcus/content-sites-ui/types';
+const renderInline = (s: string) => trustedHtml(parseMarkdownInline(s, basePath, sourcesLength));
+---
+{interlude.type === 'related-card' && <RelatedCard href={href} eyebrow={`Read next · ${label}`} title={name} />}
+<Interlude interlude={interlude} renderInline={renderInline} labels={labels} author={author} />
+```
+
+`Interlude` renders the eleven content interludes (quote, stat-fact, evidence-context, tldr, answer-box, field-note,
+caution, checklist, did-you-know, timeline, comparison-table) and nothing for the entity ones (`related-card`,
+`monument-feature`, `article-feature`): their target, route and image are site data, so the site's adapter renders
+`RelatedCard` (`inline` row or `featured` card) for them. Every string field passes through the site's `renderInline`
+except the stat figure. `labels` carries all the copy; `didYouKnowVariant` picks `ruled` or `inline`.
+
+The pieces are exported too, for pages that place an interlude by hand: `AnswerBox`, `ComparisonTable`,
+`EvidenceContext`, `FieldNote` (`authorHref` links the signature), `Quote`, `StatFact`, `Timeline`, `Tldr`,
+`DidYouKnow`. The content schema is core's `createInterludeSchema` (`@sarimarcus/content-sites-core/interludes`).
+
 ## Document shell
 
 ```astro

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.19.0"
+    "@sarimarcus/content-sites-core": "0.20.0"
   }
 }

package/src/editorial/index.ts

@@ -17,3 +17,15 @@ export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategor
 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>
+)}

package/src/editorial/interludes/RelatedCard.astro

@@ -0,0 +1,87 @@
+---
+/**
+ * RelatedCard — an in-article link to another page. `inline`: a ruled "read next" row. `featured`: the mid-article
+ * feature card, image left. The site resolves href, eyebrow and image; an unresolved target should render nothing.
+ */
+import type { ImageMetadata } from 'astro';
+import { Picture } from 'astro:assets';
+import Icon from '../../primitives/Icon.astro';
+
+interface Props {
+  href: string;
+  /** Full eyebrow text, e.g. "Read next · Monument". */
+  eyebrow: string;
+  title: string;
+  description?: string;
+  variant?: 'inline' | 'featured';
+  image?: ImageMetadata;
+  imageAlt?: string;
+  eyebrowClass?: string;
+}
+const { href, eyebrow, title, description, variant = 'inline', image, imageAlt, eyebrowClass } = Astro.props;
+---
+
+{variant === 'inline' ? (
+  <a
+    href={href}
+    class="group not-prose my-8 flex items-center justify-between gap-6 py-4 border-y border-border hover:border-primary/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors"
+  >
+    <div class="min-w-0 flex-1">
+      <p class={eyebrowClass ?? 'text-xs font-semibold uppercase tracking-[0.16em] text-primary mb-1'}>
+        {eyebrow}
+      </p>
+      <h4 class="text-base sm:text-lg font-semibold font-display text-foreground leading-snug group-hover:text-primary transition-colors">
+        {title}
+      </h4>
+      {description && (
+        <p class="mt-1 text-sm text-muted-foreground leading-relaxed line-clamp-2">{description}</p>
+      )}
+    </div>
+    <Icon
+      name="arrow-right"
+      class="shrink-0 w-5 h-5 text-primary transition-transform motion-safe:group-hover:translate-x-1"
+      aria-hidden="true"
+    />
+  </a>
+) : (
+  <a
+    href={href}
+    class="group not-prose my-8 flex flex-col sm:flex-row overflow-hidden rounded-xl border border-border bg-card hover:border-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors"
+  >
+    <div class="sm:w-2/5 shrink-0 overflow-hidden bg-muted aspect-video sm:aspect-auto">
+      {image ? (
+        <Picture
+          src={image}
+          alt={imageAlt ?? title}
+          widths={[320, 480]}
+          sizes="(min-width: 640px) 40vw, 100vw"
+          formats={['avif', 'webp']}
+          fallbackFormat="webp"
+          class="w-full h-full object-cover"
+          loading="lazy"
+        />
+      ) : (
+        <div class="w-full h-full min-h-[160px] sm:min-h-full bg-muted" />
+      )}
+    </div>
+
+    <div class="flex flex-col justify-center gap-2 p-5 sm:p-6 min-w-0 flex-1">
+      <p class={eyebrowClass ?? 'text-xs font-medium uppercase tracking-[0.16em] text-primary'}>
+        {eyebrow}
+      </p>
+      <h4 class="text-lg font-semibold font-display text-foreground leading-snug group-hover:text-primary transition-colors">
+        {title}
+      </h4>
+      {description && (
+        <p class="text-sm text-muted-foreground leading-relaxed line-clamp-2">{description}</p>
+      )}
+      <div class="flex justify-end mt-1">
+        <Icon
+          name="arrow-right"
+          class="w-4 h-4 text-primary transition-transform motion-safe:group-hover:translate-x-1"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  </a>
+)}

package/src/editorial/interludes/StatFact.astro

@@ -0,0 +1,18 @@
+---
+import type { TrustedHtml } from '../../types';
+
+interface Props {
+  figure: TrustedHtml;
+  caption: TrustedHtml;
+}
+const { figure, caption } = Astro.props;
+---
+
+<figure class="my-16 sm:my-20 text-center">
+  <span class="block mx-auto h-px w-12 bg-primary/40 mb-6" aria-hidden="true"></span>
+  <p
+    class="font-display text-5xl sm:text-6xl text-primary leading-none tracking-[-0.03em] tabular-nums"
+    set:html={figure}
+  />
+  <figcaption class="mt-5 text-sm leading-relaxed text-muted-foreground max-w-md mx-auto" set:html={caption} />
+</figure>

package/src/editorial/interludes/Timeline.astro

@@ -0,0 +1,34 @@
+---
+import type { TrustedHtml } from '../../types';
+
+interface TimelineEvent {
+  date: string;
+  label: TrustedHtml;
+  description?: TrustedHtml;
+}
+interface Props {
+  events: TimelineEvent[];
+  /** Figcaption, e.g. "Timeline". */
+  label: string;
+}
+const { events, label } = Astro.props;
+---
+
+<figure class="my-8 p-6 sm:p-7 rounded-lg bg-card border border-border">
+  <figcaption class="text-xs font-semibold uppercase tracking-[0.18em] text-secondary mb-5">{label}</figcaption>
+  <ol class="space-y-4">
+    {events.map((event) => (
+      <li class="grid grid-cols-[5rem_1fr] sm:grid-cols-[7rem_1fr] gap-x-4 gap-y-1">
+        <span class="text-sm font-semibold font-display text-secondary tabular-nums leading-snug pt-0.5">
+          {event.date}
+        </span>
+        <div>
+          <p class="text-sm sm:text-base font-semibold text-foreground leading-snug" set:html={event.label} />
+          {event.description && (
+            <p class="mt-1 text-sm text-muted-foreground leading-relaxed" set:html={event.description} />
+          )}
+        </div>
+      </li>
+    ))}
+  </ol>
+</figure>

package/src/editorial/interludes/Tldr.astro

@@ -0,0 +1,40 @@
+---
+/**
+ * Tldr — end-of-section summary: a prose paragraph (`content`) or a "key takeaways" list (`bullets`).
+ * An authored `title` wins over the shape's label.
+ */
+import type { TrustedHtml } from '../../types';
+
+interface Props {
+  content?: TrustedHtml;
+  bullets?: TrustedHtml[];
+  title?: string;
+  /** Heading for the bullets shape, e.g. "Key takeaways". */
+  bulletsLabel: string;
+  /** Heading for the prose shape, e.g. "In short". */
+  proseLabel: string;
+}
+const { content, bullets = [], title, bulletsLabel, proseLabel } = Astro.props;
+const hasBullets = bullets.length > 0;
+const heading = title ?? (hasBullets ? bulletsLabel : proseLabel);
+---
+
+<aside class="my-8 p-5 sm:p-6 rounded-lg bg-muted border border-border">
+  <p class="inline-block text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-3 pb-1 border-b border-accent">
+    {heading}
+  </p>
+  {hasBullets ? (
+    /* list-none + an absolute dot: the aside sits inside .article-body, whose `ul` rule would add its own
+       padding and marker. */
+    <ul class="m-0 list-none space-y-2.5 p-0">
+      {bullets.map((b) => (
+        <li class="relative pl-6 text-sm sm:text-base leading-relaxed text-foreground">
+          <span class="absolute left-0 top-[0.62em] block h-1.5 w-1.5 rounded-full bg-primary" aria-hidden="true"></span>
+          <span set:html={b} />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <p class="text-sm sm:text-base leading-relaxed text-foreground" set:html={content} />
+  )}
+</aside>

package/src/editorial/interludes/types.ts

@@ -0,0 +1,36 @@
+import type { InterludeType } from '@sarimarcus/content-sites-core/interludes';
+import type { TrustedHtml } from '../../types';
+
+/** One authored interlude as the content layer returns it. String fields are markdown until `renderInline` runs. */
+export type InterludeData =
+  | { type: 'quote'; variant: 'pull' | 'external'; content: string; attribution?: { name: string; role?: string } }
+  | { type: 'stat-fact'; figure: string; caption: string }
+  | { type: 'evidence-context'; finding: string; basis: string; boundary: string }
+  | { type: 'tldr'; content?: string; bullets?: string[]; title?: string }
+  | { type: 'answer-box'; question: string; answer: string }
+  | { type: 'field-note'; content: string }
+  | { type: 'caution'; variant: 'tip' | 'warning' | 'info'; title?: string; content: string }
+  | { type: 'checklist'; title: string; items: string[] }
+  | { type: 'did-you-know'; content: string }
+  | { type: 'timeline'; events: Array<{ date: string; label: string; description?: string }> }
+  | { type: 'comparison-table'; headers: string[]; rows: string[][] }
+  /** Entity interludes: the site resolves the target and renders RelatedCard itself. */
+  | { type: 'related-card' | 'monument-feature' | 'article-feature' };
+
+// Fails to compile when core's union gains or loses a tag this type does not mirror.
+type Same<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false;
+const mirrorsCore: Same<InterludeData['type'], InterludeType> = true;
+void mirrorsCore;
+
+/** Every string the interludes print. */
+export interface InterludeLabels {
+  answerBox: string;
+  evidence: { title: string; finding: string; basis: string; boundary: string };
+  fieldNote: string;
+  timeline: string;
+  tldr: { bullets: string; prose: string };
+  didYouKnow: string;
+}
+
+/** The site's inline markdown renderer: links resolved against its base path, footnote markers bounded. */
+export type RenderInline = (markdown: string) => TrustedHtml;