@sarimarcus/content-sites-ui 0.41.2 → 0.42.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.42.0 (2026-10-21)
+
+- `editorial`: `PersonPage` is rebuilt biography first: a `ContentHero` (warm, editorial overlay, short) with the role badges and `EraChip` in its badges slot, a lifespan line ("Lived c. 1138–1204 (about 66 years)", or "Born"/"Died" with one known year) and a monogram panel when there is no image; a key-facts strip (aliases, optional `contextFact`); the bio with a lead first paragraph at a 65ch measure; a `TableOfContents` only past four bio paragraphs; a featured full-story card (`fullStory.title`, else the old link line); places to see; the era timeline; then read more, capped at `readMoreLimit` (default 4). New optional props: `birthYear`, `deathYear`, `circa`, `lifespan`, `aliases`, `aliasesLabel`, `contextFact`, `monogram`, `fullStoryHeading`, `readMoreLimit`, `tocLabels`; `fullStory` gains `title`, `summary`, `image`, `fallbackSrc`, `imageAlt`. `PersonCard` gains `knownFor` (replaces the description line), `eraLabel` and a monogram tile when there is no image. New `monogram()` helper, internal `PersonSection` and `CardPlaceholder`; `RoleBadge` and `EraChip` gain `onImage`. `composed`: `QuickFacts` gains `variant="strip"`, an optional `icon` and `pagefindIgnore`; its other variants render identically. `layout`: `ContentHero` gains `monogram`, a dark panel with the initials when no image is set; existing heroes render identically. Copy defaults in `LABELS.personPage` (`lifespan`, `born`, `died`, `alsoKnownAs`, `fullStoryHeading`, `tocLabels`) (SLA-3290).
+
+### Breaking
+
+- `PersonPage`'s markup and section order change: after-body now renders before the full-story block, the timeline renders before read more, the bio is always wrapped in `<section data-person-section="biography">`, and the section ids are `person-<section>` with `person-<section>-heading` headings. `readMore` renders only its first four entries unless `readMoreLimit` says otherwise, so a route passing many cards should rank them first. No site selects on the old `data-person-*` contract and no site edit is needed, so there is no codemod.
+
+## 0.41.3 (2026-10-21)
+
+- `editorial`: new `PersonChip` (a Chip link to a historical figure's page, name and life dates), `PersonCard` (an `EntityCard` poster teaser with portrait, dates, role badges and a clamped description) and `PersonPage` (the person page shell: portrait, roles, name, dates with the `EraChip`, short bio, "Read the full story" link to the primary article, places to see and related reading as `RelatedContentGrid`s, a `fallbackSrc` prop for a string `image`, and the era on a `ChronologyTimeline`; slots `breadcrumb`, `before-body`, `after-body`, `tail`). Copy defaults live in `LABELS.personChip`, `personCard` and `personPage`. No change to existing components' markup (SLA-3260).
+- `composed`: new `RelatedContentGrid` (the cards-only responsive grid of `RelatedContent`, no heading, surface or carousel CSS); `RelatedContent` renders it for `layout="grid"` with identical HTML.
+- `primitives`: `Badge` gains `tone="outline"` (bordered, muted fill); the role and expertise pills of `PersonCard`, `PersonPage` and `AuthorCard` share it through an internal `RoleBadge`, with `AuthorCard`'s markup unchanged. `PersonPage` now requires `imageAlt` whenever `image` or `fallbackSrc` is set.
+
 ## 0.41.2 (2026-10-21)
 
 - `editorial`: `ChronologyTimeline`'s era index is now `TableOfContents` (card variant) instead of a row of chips: a collapsed jump list on mobile, a sticky bar once the index scrolls away, and the era in view marked with `data-active` / `aria-current`. The era anchor ids move from the era heading to its `<li>`, so the scrollspy follows the whole era and the sticky bar hides after the last one. Its markup changes on every page that renders the timeline (SLA-3274).

package/package.json

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

package/src/composed/QuickFacts.astro

@@ -25,7 +25,7 @@ import Icon from '../primitives/Icon.astro';
 import type { BrandTone } from '../types';
 
 interface QuickFactItem {
-  icon: string;
+  icon?: string;
   label: string;
   value: string;
   href?: string;
@@ -44,12 +44,15 @@ interface ActionLink {
 interface Props {
   title?: string;
   items: QuickFactItem[];
-  variant?: 'card' | 'muted';
+  /** `strip`: borderless rows divided by hairlines, label beside value on `sm`, for a quiet facts line. */
+  variant?: 'card' | 'muted' | 'strip';
   columns?: 2 | 3 | 4;
   links?: ActionLink[];
   headingLevel?: 'h2' | 'h3' | 'h4';
   /** Replaces the fact labels' size class. */
   labelSizeClass?: string;
+  /** `false` lets Pagefind index the facts (default: ignored). */
+  pagefindIgnore?: boolean;
   class?: string;
 }
 
@@ -61,16 +64,22 @@ const {
   links,
   headingLevel = 'h2',
   labelSizeClass = 'text-[0.8125rem]',
+  pagefindIgnore = true,
   class: className = '',
 } = Astro.props;
 
 const Heading = headingLevel;
 
-const containerClass = variant === 'card'
-  ? 'p-6 lg:p-8 bg-card rounded-2xl border border-accent/20'
-  : 'p-6 bg-primary/5 rounded-xl border border-primary/15';
+const strip = variant === 'strip';
+const containerClass = strip
+  ? ''
+  : variant === 'card'
+    ? 'p-6 lg:p-8 bg-card rounded-2xl border border-accent/20'
+    : 'p-6 bg-primary/5 rounded-xl border border-primary/15';
 
-const gridClass = columns === 4
+const gridClass = strip
+  ? 'divide-y divide-border border-y border-border'
+  : columns === 4
   ? 'grid sm:grid-cols-2 lg:grid-cols-4 gap-6'
   : columns === 3
     ? 'grid sm:grid-cols-2 lg:grid-cols-3 gap-6'
@@ -78,9 +87,13 @@ const gridClass = columns === 4
 
 const titleClass = 'text-2xl font-display font-semibold text-foreground mb-6 leading-tight';
 
-const labelClass = `${labelSizeClass} uppercase tracking-wider text-muted-foreground mb-1.5 leading-none`;
+const labelClass = strip
+  ? 'text-sm font-semibold text-muted-foreground'
+  : `${labelSizeClass} uppercase tracking-wider text-muted-foreground mb-1.5 leading-none`;
 
-const valueClass = variant === 'card'
+const valueClass = strip
+  ? 'text-foreground'
+  : variant === 'card'
   ? 'text-lg font-medium text-foreground leading-snug'
   : 'text-base font-medium text-foreground leading-snug';
 
@@ -92,14 +105,14 @@ const linkColorMap: Record<string, { bg: string; hover: string; text: string }>
 ---
 
 {items.length > 0 && (
-  <div class:list={[containerClass, className]} data-pagefind-ignore>
+  <div class:list={[containerClass, className]} data-pagefind-ignore={pagefindIgnore ? '' : undefined}>
     {title && <Heading class={titleClass}>{title}</Heading>}
 
     <dl class={gridClass}>
       {items.map((item) => (
-        <div class:list={['min-w-0', item.span === 2 && 'sm:col-span-2']}>
+        <div class:list={['min-w-0', item.span === 2 && 'sm:col-span-2', strip && 'grid gap-1 py-3 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-6']}>
           <dt class={`${labelClass} flex items-center gap-1.5`}>
-            <Icon name={item.icon} class="w-3.5 h-3.5 text-primary/60" />
+            {item.icon && <Icon name={item.icon} class="w-3.5 h-3.5 text-primary/60" />}
             {item.label}
           </dt>
           <dd class={`${valueClass} tabular-nums break-words`}>

package/src/composed/RelatedContent.astro

@@ -7,6 +7,7 @@ import ArrowLabel from '../primitives/ArrowLabel.astro';
 import SectionDivider from '../primitives/SectionDivider.astro';
 import CardCarousel from './CardCarousel.astro';
 import RelatedContentCard from './RelatedContentCard.astro';
+import RelatedContentGrid from './RelatedContentGrid.astro';
 import type { RelatedItem } from './related';
 
 interface Props {
@@ -61,10 +62,6 @@ const wrapperClass = variant === 'bordered'
     ? ''
     : 'p-6 bg-muted/50 rounded-xl border border-border';
 
-const gridClass = columns === 3
-  ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'
-  : 'grid gap-4 sm:grid-cols-2';
-
 // At `lg` a card fits `columns` per view, so the track stops overflowing and the controls hide. Percentages, not
 // fixed widths: the block usually sits inside a ~700px prose column. Below `lg` cards are wider than a column share
 // so the next one peeks in.
@@ -72,13 +69,9 @@ const cardWidthClass = columns === 3
   ? 'w-[80vw] sm:w-64 lg:w-[calc((100%-2rem)/3)]'
   : 'w-[85vw] sm:w-80 lg:w-[calc((100%-1rem)/2)]';
 
-const pictureSizes = pictureSizesProp ?? (layout === 'carousel'
-  ? (columns === 3
-      ? '(min-width: 1024px) 240px, (min-width: 640px) 256px, 80vw'
-      : '(min-width: 640px) 320px, 85vw')
-  : (columns === 3
-      ? '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw'
-      : '(min-width: 640px) 50vw, 100vw'));
+const carouselPictureSizes = pictureSizesProp ?? (columns === 3
+  ? '(min-width: 1024px) 240px, (min-width: 640px) 256px, 80vw'
+  : '(min-width: 640px) 320px, 85vw');
 
 // CardCarousel's contract: every direct child of the track is one card with `snap-start shrink-0` and a width.
 const carouselShell = `shrink-0 snap-start ${cardWidthClass}`;
@@ -101,7 +94,7 @@ const carouselShell = `shrink-0 snap-start ${cardWidthClass}`;
           <RelatedContentCard
             item={item}
             shellClass={carouselShell}
-            pictureSizes={pictureSizes}
+            pictureSizes={carouselPictureSizes}
             trackingBlock={trackingBlock}
           />
         ))}
@@ -121,15 +114,12 @@ const carouselShell = `shrink-0 snap-start ${cardWidthClass}`;
     )}
 
     {layout !== 'carousel' && (
-      <div class={gridClass}>
-        {items.map((item) => (
-          <RelatedContentCard
-            item={item}
-            pictureSizes={pictureSizes}
-            trackingBlock={trackingBlock}
-          />
-        ))}
-      </div>
+      <RelatedContentGrid
+        items={items}
+        columns={columns}
+        pictureSizes={pictureSizesProp}
+        trackingBlock={trackingBlock}
+      />
     )}
   </Wrapper>
 )}

package/src/composed/RelatedContentGrid.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * RelatedContentGrid — related link cards as a responsive grid, with no heading, surface or carousel. `RelatedContent`
+ * renders it for `layout="grid"`; a page that owns its own heading uses it directly.
+ */
+import RelatedContentCard from './RelatedContentCard.astro';
+import type { RelatedItem } from './related';
+
+interface Props {
+  items: readonly RelatedItem[];
+  columns?: 2 | 3;
+  trackingBlock?: string;
+  /** Image `sizes`; the defaults match the column count in a ~700px prose column. */
+  pictureSizes?: string;
+}
+
+const { items, columns = 2, trackingBlock, pictureSizes: pictureSizesProp } = Astro.props;
+
+const gridClass = columns === 3
+  ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'
+  : 'grid gap-4 sm:grid-cols-2';
+
+const pictureSizes = pictureSizesProp ?? (columns === 3
+  ? '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw'
+  : '(min-width: 640px) 50vw, 100vw');
+---
+
+<div class={gridClass}>
+  {items.map((item) => (
+    <RelatedContentCard item={item} pictureSizes={pictureSizes} trackingBlock={trackingBlock} />
+  ))}
+</div>

package/src/composed/index.ts

@@ -10,4 +10,6 @@ export { default as EntityCard } from './EntityCard.astro';
 export { default as ArrowLinkGrid } from './ArrowLinkGrid.astro';
 // RelatedContent sits here, not in ./editorial: it renders CardCarousel, whose <style> ships to every importer of the barrel.
 export { default as RelatedContent } from './RelatedContent.astro';
-export { default as RelatedContentCard } from './RelatedContentCard.astro';export type { RelatedItem, RelatedTone } from './related';
+export { default as RelatedContentCard } from './RelatedContentCard.astro';
+export { default as RelatedContentGrid } from './RelatedContentGrid.astro';
+export type { RelatedItem, RelatedTone } from './related';

package/src/editorial/AuthorCard.astro

@@ -4,7 +4,7 @@
  * (`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 RoleBadge from './RoleBadge.astro';
 import LinkArrow from '../primitives/LinkArrow.astro';
 import ArrowLabel from '../primitives/ArrowLabel.astro';
 
@@ -79,9 +79,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3';
 
       <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">
+          <RoleBadge>
             {topic}
-          </Badge>
+          </RoleBadge>
         ))}
       </div>
 
@@ -123,9 +123,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3';
 
         <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">
+            <RoleBadge>
               {topic}
-            </Badge>
+            </RoleBadge>
           ))}
         </div>
 
@@ -159,9 +159,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3';
 
     <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">
+        <RoleBadge>
           {topic}
-        </Badge>
+        </RoleBadge>
       ))}
     </div>
 

package/src/editorial/CardPlaceholder.astro

@@ -0,0 +1,7 @@
+---
+// The EntityCard `fallback` slot tile for a card with no image: tinted panel, centred content (initials or an icon).
+---
+
+<div class="absolute inset-0 flex items-center justify-center bg-primary/10" aria-hidden="true">
+  <slot />
+</div>

package/src/editorial/EraChip.astro

@@ -15,6 +15,8 @@ interface Props {
   /** Accessible name; keep the visible label and range in it. */
   ariaLabel?: (era: EraDefinition) => string;
   icon?: string;
+  /** Opaque scrim tone for a chip laid over a photo or the hero overlay. */
+  onImage?: boolean;
   class?: string;
 }
 
@@ -23,6 +25,7 @@ const {
   basePath,
   ariaLabel = (e: EraDefinition) => LABELS.eraChip.ariaLabel(e.label, e.rangeLabel),
   icon = 'history',
+  onImage = false,
   class: className,
 }: Props = Astro.props;
 ---
@@ -32,7 +35,7 @@ const {
     as="a"
     href={eraHref(era, basePath)}
     size="md"
-    tone="tint"
+    tone={onImage ? 'onImage' : 'tint'}
     accent="primary"
     icon={icon}
     data-era={era.id}

package/src/editorial/PersonCard.astro

@@ -0,0 +1,99 @@
+---
+/**
+ * PersonCard — a historical figure's teaser card on EntityCard's poster frame: portrait, name, life dates, era label,
+ * role labels and a one-line "known for" hook. Every string arrives as a prop (roles are the site's display labels);
+ * `ctaLabel` falls back to LABELS. Without `image` or `fallbackSrc` the image block is a monogram tile (initials of
+ * the name, or `monogram`). `eraLabel` is plain text: the card is one link, so it cannot hold the linked EraChip.
+ */
+import type { ImageMetadata } from 'astro';
+import EntityCard from '../composed/EntityCard.astro';
+import RoleBadge from './RoleBadge.astro';
+import ArrowLabel from '../primitives/ArrowLabel.astro';
+import Badge from '../primitives/Badge.astro';
+import { monogram as initialsOf } from './monogram';
+import CardPlaceholder from './CardPlaceholder.astro';
+import { LABELS } from '../internal/labels';
+
+interface Props {
+  href: string;
+  name: string;
+  image?: ImageMetadata;
+  fallbackSrc?: string;
+  imageAlt: string;
+  /** Life dates as displayed, e.g. core `formatLifeDates`. */
+  dates?: string;
+  roles?: readonly string[];
+  /** One-line hook, e.g. "Physician and philosopher of Averroism". Wins over `description`. */
+  knownFor?: string;
+  /** Era as displayed, e.g. "Almohad Caliphate · 1121–1269". */
+  eraLabel?: string;
+  /** Tile initials when there is no image; defaults to the initials of `name`. */
+  monogram?: string;
+  /** Deprecated: clamped fallback when `knownFor` is absent. */
+  description?: string;
+  ctaLabel?: string;
+  headingLevel?: 2 | 3;
+  index?: number;
+  eager?: number;
+  sizes?: string;
+  class?: string;
+}
+
+const {
+  href,
+  name,
+  image,
+  fallbackSrc,
+  imageAlt,
+  dates,
+  roles = [],
+  knownFor,
+  eraLabel,
+  monogram,
+  description,
+  ctaLabel = LABELS.personCard.cta,
+  headingLevel = 3,
+  index,
+  eager,
+  sizes,
+  class: className,
+} = Astro.props;
+
+const Heading = `h${headingLevel}` as 'h2' | 'h3';
+const initials = monogram ?? initialsOf(name);
+---
+
+<EntityCard
+  href={href}
+  variant="poster"
+  image={image}
+  fallbackSrc={fallbackSrc}
+  imageAlt={imageAlt}
+  index={index}
+  eager={eager}
+  sizes={sizes}
+  footerJustify="end"
+  class={className}
+>
+  {initials && (
+    <CardPlaceholder slot="fallback">
+      <span class="font-display text-6xl font-semibold text-primary/70 select-none">{initials}</span>
+    </CardPlaceholder>
+  )}
+  <Heading class="text-xl font-display font-semibold text-foreground">{name}</Heading>
+  {dates && <p class="mt-1 text-sm tabular-nums text-muted-foreground">{dates}</p>}
+  {(eraLabel || roles.length > 0) && (
+    <div class="mt-3 flex flex-wrap gap-2">
+      {eraLabel && <Badge tone="primary" size="md" lines={0}><span class="tabular-nums">{eraLabel}</span></Badge>}
+      {roles.map((role) => (
+        <RoleBadge>{role}</RoleBadge>
+      ))}
+    </div>
+  )}
+  {knownFor ? (
+    <p class="mt-3 text-sm leading-relaxed text-foreground">{knownFor}</p>
+  ) : description ? (
+    <p class="mt-3 text-sm leading-relaxed text-muted-foreground line-clamp-3">{description}</p>
+  ) : null}
+  <ArrowLabel slot="footer-cta" class="text-sm font-medium text-primary">{ctaLabel}</ArrowLabel>
+</EntityCard>

package/src/editorial/PersonChip.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * PersonChip — links an item to a historical figure's page. Visible text is `name` and, when given, the life `dates`
+ * (core `formatLifeDates`), within the Chip 80-char ceiling (validate-badge-overflow.mjs). Renders nothing without
+ * a name or an href.
+ */
+import Chip from '../primitives/Chip.astro';
+import { LABELS } from '../internal/labels';
+
+interface Props {
+  name?: string;
+  href?: string;
+  dates?: string;
+  /** Accessible name; keep the visible name and dates in it. */
+  ariaLabel?: (name: string, dates?: string) => string;
+  icon?: string;
+  class?: string;
+}
+
+const {
+  name,
+  href,
+  dates,
+  ariaLabel = LABELS.personChip.ariaLabel,
+  icon = 'user',
+  class: className,
+}: Props = Astro.props;
+---
+
+{name && href && (
+  <Chip
+    as="a"
+    href={href}
+    size="md"
+    tone="tint"
+    accent="primary"
+    icon={icon}
+    data-person-chip
+    aria-label={ariaLabel(name, dates)}
+    class={className}
+  >
+    {name}{dates && (<><span aria-hidden="true">·</span><span class="whitespace-nowrap tabular-nums">{dates}</span></>)}
+  </Chip>
+)}

package/src/editorial/PersonPage.astro

@@ -0,0 +1,280 @@
+---
+/**
+ * PersonPage — the shell and shared body of a historical figure's page, biography first. The route keeps paths, data,
+ * SEO and schema (core `historicalPersonSchema`), renders markdown to `bioHtml`, and wraps this template in the site
+ * Layout. Order: the `ContentHero` (warm, editorial overlay, short: name as title, role badges and the era chip,
+ * the lifespan as typography; portrait as the backdrop, else a monogram panel), a quiet key-facts strip (aliases,
+ * optional `contextFact`), a short sticky ToC only when the bio runs past four paragraphs, the bio with its first
+ * paragraph as the lead, the featured full-story card, places to see, the era on a ChronologyTimeline, then up to
+ * four related reads (`RelatedContentGrid`, not `RelatedContent`: the person page owns its headings and
+ * `RelatedContent` carries the carousel CSS). Every string is a prop or a LABELS default; a block with no data
+ * renders nothing. The lifespan reads "Lived c. 1138–1204 (about 66 years)" from `birthYear`/`deathYear`/`circa`,
+ * or from a pre-formatted `lifespan` or `dates` (both shown as is). `readMore` is ranked by the caller: the first
+ * `readMoreLimit` (four) render, so the route passes the best reads first. Slots:
+ *   breadcrumb  — the site Breadcrumb, in the band above the hero.
+ *   before-body — site blocks between the key facts and the bio.
+ *   after-body  — site blocks after the bio, before the full-story card.
+ *   tail        — full-width blocks after the last section.
+ */
+import type { ImageMetadata } from 'astro';
+import type { EraDefinition } from '@sarimarcus/content-sites-core/eras';
+import { lifeSpan } from '@sarimarcus/content-sites-core/people';
+import Container from '../layout/Container.astro';
+import BreadcrumbBand from '../layout/BreadcrumbBand.astro';
+import ContentHero from '../layout/ContentHero.astro';
+import RoleBadge from './RoleBadge.astro';
+import LinkArrow from '../primitives/LinkArrow.astro';
+import ArrowLabel from '../primitives/ArrowLabel.astro';
+import Icon from '../primitives/Icon.astro';
+import EntityCard from '../composed/EntityCard.astro';
+import TableOfContents from '../composed/TableOfContents.astro';
+import RelatedContentGrid from '../composed/RelatedContentGrid.astro';
+import type { RelatedItem } from '../composed/related';
+import type { TrustedHtml } from '../types';
+import EraChip from './EraChip.astro';
+import ChronologyTimeline from './ChronologyTimeline.astro';
+import type { TimelineItem } from './chronology';
+import { monogram as initialsOf } from './monogram';
+import PersonSection from './PersonSection.astro';
+import CardPlaceholder from './CardPlaceholder.astro';
+import QuickFacts from '../composed/QuickFacts.astro';
+import { LABELS } from '../internal/labels';
+
+type PersonImage =
+  | { image?: undefined; fallbackSrc?: undefined; imageAlt?: string }
+  | {
+      image: ImageMetadata;
+      /** Plain path when the collection stores `image` as a string (no asset import). */
+      fallbackSrc?: string;
+      imageAlt: string;
+    }
+  | { image?: ImageMetadata; fallbackSrc: string; imageAlt: string };
+
+type Props = PersonImage & {
+  name: string;
+  /** Life years as displayed, e.g. core `formatLifeDates`; used when no `birthYear`/`deathYear` is given. */
+  dates?: string;
+  birthYear?: number;
+  deathYear?: number;
+  /** Marks the years as approximate ("c."). */
+  circa?: boolean;
+  /** The whole lifespan line, shown as is (wins over the computed one). */
+  lifespan?: string;
+  /** Other names, as displayed. */
+  aliases?: readonly string[];
+  aliasesLabel?: string;
+  /** One extra key-facts row, e.g. the person's place in the city's history. */
+  contextFact?: { label: string; value: string };
+  /** Tile initials when there is no portrait; defaults to the initials of `name`. */
+  monogram?: string;
+  /** Role labels as displayed. */
+  roles?: readonly string[];
+  era?: EraDefinition;
+  eraBasePath?: string;
+  bioHtml: TrustedHtml;
+  /** Prose modifiers after `prose`. */
+  proseClass?: string;
+  /**
+   * The person's primary article. With a `title` it renders as a featured card under `fullStoryHeading`; without,
+   * as a link line (`label` falls back to LABELS).
+   */
+  fullStory?: {
+    href: string;
+    label?: string;
+    title?: string;
+    summary?: string;
+    image?: ImageMetadata;
+    fallbackSrc?: string;
+    imageAlt?: string;
+  };
+  fullStoryHeading?: string;
+  places?: readonly RelatedItem[];
+  placesHeading?: string;
+  /** Caller-ranked: the first `readMoreLimit` render. */
+  readMore?: readonly RelatedItem[];
+  /** Cards shown under read more. */
+  readMoreLimit?: number;
+  readMoreHeading?: string;
+  /** The era in context: pass the person's era only, or the whole chronology. */
+  timeline?: { eras: readonly EraDefinition[]; items: Record<string, readonly TimelineItem[]>; heading?: string };
+  /** Overrides of the ToC pill labels. */
+  tocLabels?: Partial<Record<'biography' | 'places' | 'timeline' | 'readMore', string>>;
+  pagefindType?: string;
+};
+
+const {
+  name,
+  dates,
+  birthYear,
+  deathYear,
+  circa = false,
+  lifespan,
+  aliases = [],
+  aliasesLabel = LABELS.personPage.alsoKnownAs,
+  contextFact,
+  monogram,
+  roles = [],
+  image,
+  fallbackSrc,
+  imageAlt,
+  era,
+  eraBasePath,
+  bioHtml,
+  proseClass = 'prose-lg',
+  fullStory,
+  fullStoryHeading = LABELS.personPage.fullStoryHeading,
+  places = [],
+  placesHeading = LABELS.personPage.placesHeading,
+  readMore = [],
+  readMoreLimit = 4,
+  readMoreHeading = LABELS.personPage.readMoreHeading,
+  timeline,
+  tocLabels,
+  pagefindType = 'person',
+} = Astro.props;
+
+const timelineHeading = timeline?.heading ?? LABELS.personPage.timelineHeading;
+const hasTimeline = Boolean(timeline && Object.values(timeline.items).some((list) => list.length > 0));
+const readMoreItems = readMore.slice(0, readMoreLimit);
+
+const span = lifeSpan({ birthYear, deathYear });
+const lifespanByKind = {
+  range: () => LABELS.personPage.lifespan(span.years ?? '', circa, span.age),
+  born: () => LABELS.personPage.born(span.years ?? '', circa),
+  died: () => LABELS.personPage.died(span.years ?? '', circa),
+  none: () => undefined,
+};
+const derivedLifespan = lifespanByKind[span.kind]();
+const lifespanText = lifespan ?? derivedLifespan ?? dates;
+
+const facts = [
+  ...(aliases.length > 0 ? [{ label: aliasesLabel, value: aliases.join(', ') }] : []),
+  ...(contextFact ? [contextFact] : []),
+];
+
+const hasFullStoryCard = Boolean(fullStory?.title);
+const bioParagraphs = (String(bioHtml).match(/<p[\s>]/g) ?? []).length;
+const toc = {
+  biography: tocLabels?.biography ?? LABELS.personPage.tocLabels.biography,
+  places: tocLabels?.places ?? LABELS.personPage.tocLabels.places,
+  timeline: tocLabels?.timeline ?? LABELS.personPage.tocLabels.timeline,
+  readMore: tocLabels?.readMore ?? LABELS.personPage.tocLabels.readMore,
+};
+const showToc = bioParagraphs > 4;
+const tocItems = [
+  { label: toc.biography, href: '#person-biography' },
+  ...(places.length > 0 ? [{ label: toc.places, href: '#person-places' }] : []),
+  ...(hasTimeline ? [{ label: toc.timeline, href: '#person-timeline' }] : []),
+  ...(readMoreItems.length > 0 ? [{ label: toc.readMore, href: '#person-read-more' }] : []),
+];
+const heroMonogram = image || fallbackSrc ? undefined : (monogram ?? initialsOf(name));
+---
+
+<BreadcrumbBand>
+  <slot name="breadcrumb" />
+</BreadcrumbBand>
+
+<main class="pb-12 lg:pb-20" data-person-page>
+  <div data-pagefind-body data-pagefind-meta={`type:${pagefindType}`}>
+    <ContentHero
+      title={name}
+      theme="warm"
+      overlay="editorial"
+      minHeight="short"
+      image={image}
+      imageFallback={fallbackSrc}
+      imageAlt={imageAlt ?? name}
+      monogram={heroMonogram}
+    >
+      <Fragment slot="badges">
+        {roles.map((role) => (
+          <RoleBadge onImage>{role}</RoleBadge>
+        ))}
+        <EraChip era={era} basePath={eraBasePath} onImage />
+      </Fragment>
+      <Fragment slot="subtitle">
+        {lifespanText && (
+          <p class="font-display text-lg tabular-nums text-overlay-foreground/90 sm:text-xl" data-person-dates>{lifespanText}</p>
+        )}
+      </Fragment>
+    </ContentHero>
+
+    <Container size="measure" class="pt-8 lg:pt-10">
+      <QuickFacts variant="strip" items={facts} class="mb-8" pagefindIgnore={false} />
+
+      <slot name="before-body" />
+
+      {showToc && tocItems.length > 1 && (
+        <TableOfContents
+          class="mb-8"
+          showHeader={false}
+          items={tocItems}
+          sectionSelector="[data-person-section]"
+          hideMiniPastLastSection
+        />
+      )}
+
+      <section id="person-biography" class="scroll-mt-28" aria-label={toc.biography} data-person-section="biography">
+        <div
+          class={`prose ${proseClass} max-w-[65ch] [&>p:first-child]:text-[1.2em] [&>p:first-child]:leading-relaxed`}
+          data-person-bio
+          set:html={bioHtml}
+        />
+      </section>
+
+      <slot name="after-body" />
+
+      {fullStory && !hasFullStoryCard && (
+        <p class="mt-6">
+          <LinkArrow href={fullStory.href} size="base">{fullStory.label ?? LABELS.personPage.readFullStory}</LinkArrow>
+        </p>
+      )}
+
+      {fullStory && hasFullStoryCard && (
+        <PersonSection section="full-story" heading={fullStoryHeading} class="mt-12">
+          <div class="max-w-md">
+            <EntityCard
+              href={fullStory.href}
+              variant="poster"
+              image={fullStory.image}
+              fallbackSrc={fullStory.fallbackSrc}
+              imageAlt={fullStory.imageAlt ?? fullStory.title ?? ''}
+              footerJustify="end"
+            >
+              <CardPlaceholder slot="fallback"><Icon name="book-open" class="size-10 text-primary/70" /></CardPlaceholder>
+              <h3 class="text-xl font-display font-semibold text-foreground">{fullStory.title}</h3>
+              {fullStory.summary && <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{fullStory.summary}</p>}
+              <ArrowLabel slot="footer-cta" class="text-sm font-medium text-primary">{fullStory.label ?? LABELS.personPage.readFullStory}</ArrowLabel>
+            </EntityCard>
+          </div>
+        </PersonSection>
+      )}
+
+      {places.length > 0 && (
+        <PersonSection section="places" heading={placesHeading} class="mt-12">
+          <RelatedContentGrid items={places} />
+        </PersonSection>
+      )}
+    </Container>
+  </div>
+
+  {timeline && hasTimeline && (
+    <Container size="content" class="mt-16">
+      <PersonSection section="timeline" heading={timelineHeading} headingClass="mb-8">
+        <ChronologyTimeline eras={timeline.eras} items={timeline.items} index={false} />
+      </PersonSection>
+    </Container>
+  )}
+
+  {readMoreItems.length > 0 && (
+    <div data-pagefind-body data-pagefind-meta={`type:${pagefindType}`}>
+      <Container size="measure" class="mt-16">
+        <PersonSection section="read-more" heading={readMoreHeading}>
+          <RelatedContentGrid items={readMoreItems} />
+        </PersonSection>
+      </Container>
+    </div>
+  )}
+
+  <slot name="tail" />
+</main>

package/src/editorial/PersonSection.astro

@@ -0,0 +1,21 @@
+---
+// A titled section of the person page: one shell for the full story, places, timeline and read-more blocks.
+interface Props {
+  section: string;
+  heading: string;
+  headingClass?: string;
+  class?: string;
+}
+
+const { section, heading, headingClass = 'mb-6', class: className } = Astro.props;
+---
+
+<section
+  id={`person-${section}`}
+  class:list={['scroll-mt-28', className]}
+  aria-labelledby={`person-${section}-heading`}
+  data-person-section={section}
+>
+  <h2 id={`person-${section}-heading`} class:list={['font-display text-2xl font-semibold text-foreground', headingClass]}>{heading}</h2>
+  <slot />
+</section>

package/src/editorial/RoleBadge.astro

@@ -0,0 +1,12 @@
+---
+// The outlined label for a role or an area of expertise (person and author cards, person page).
+import Badge from '../primitives/Badge.astro';
+
+interface Props {
+  /** Opaque scrim tone for a badge laid over a photo or the hero overlay. */
+  onImage?: boolean;
+}
+const { onImage = false } = Astro.props;
+---
+
+<Badge tone={onImage ? 'onImage' : 'outline'} size="md" lines={0}><slot /></Badge>

package/src/editorial/index.ts

@@ -22,10 +22,14 @@ 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 EraChip } from './EraChip.astro';
+export { default as PersonChip } from './PersonChip.astro';
+export { default as PersonCard } from './PersonCard.astro';
+export { default as PersonPage } from './PersonPage.astro';
 export { default as AlsoExplore } from './AlsoExplore.astro';
 export { default as VisitTiming } from './VisitTiming.astro';
 export { default as ChronologyTimeline } from './ChronologyTimeline.astro';
 export { groupByEra, type TimelineItem } from './chronology';
+export { monogram } from './monogram';
 export type { AlsoExploreItem } from './AlsoExplore.astro';
 export type { VisitTimingData } from './VisitTiming.astro';
 export { default as AnswerBox } from './interludes/AnswerBox.astro';

package/src/editorial/monogram.ts

@@ -0,0 +1,21 @@
+const PARTICLES = new Set([
+  'al', 'el', 'ibn', 'ben', 'bin', 'bint', 'abu', 'd', 'de', 'del', 'della', 'di', 'da', 'do', 'dos', 'das', 'du', 'des',
+  'van', 'von', 'der', 'den', 'la', 'le', 'los', 'las', 'y', 'e', 'of', 'the',
+]);
+
+/**
+ * Initials for a name tile: first and last significant word, at most two letters. Particles (al, ibn, de, van...),
+ * diacritics, apostrophes and Roman numeral suffixes are ignored; one significant word gives one letter.
+ */
+export function monogram(name: string): string {
+  const words = name
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .split(/[\s\-'’‘ʻʿʾ]+/)
+    .map((w) => w.replace(/[^\p{L}]/gu, ''))
+    .filter(Boolean);
+  const kept = words.filter((w, i) => !PARTICLES.has(w.toLowerCase()) && !(i > 0 && /^[IVXLC]+$/.test(w)));
+  const pick = kept.length ? kept : words.slice(0, 1);
+  const letters = pick.length > 1 ? [pick[0], pick[pick.length - 1]] : pick;
+  return letters.map((w) => w[0].toUpperCase()).join('');
+}

package/src/internal/labels.ts

@@ -73,6 +73,21 @@ export const LABELS = {
   articleCategoryNav: { ariaLabel: 'Browse articles by topic', allLabel: 'All' },
   articleFeatureCard: { readLabel: 'Read article', updatedLabel: 'Updated' },
   eraChip: { ariaLabel: (label: string, range: string) => `${label}, ${range}: see this era on the chronology` },
+  personChip: { ariaLabel: (name: string, dates?: string) => `${name}${dates ? `, ${dates}` : ''}: read their profile` },
+  personCard: { cta: 'Read the profile' },
+  personPage: {
+    readFullStory: 'Read the full story',
+    fullStoryHeading: 'The full story',
+    placesHeading: 'Places to see',
+    readMoreHeading: 'Read more',
+    timelineHeading: 'In their time',
+    alsoKnownAs: 'Also known as',
+    lifespan: (years: string, circa?: boolean, age?: number) =>
+      `Lived ${circa ? 'c. ' : ''}${years}${age ? ` (about ${age} years)` : ''}`,
+    born: (year: string, circa?: boolean) => `Born ${circa ? 'c. ' : ''}${year}`,
+    died: (year: string, circa?: boolean) => `Died ${circa ? 'c. ' : ''}${year}`,
+    tocLabels: { biography: 'Biography', places: 'Places', timeline: 'Timeline', readMore: 'Read more' },
+  },
   articleTopicPager: {
     heading: (topic: string) => `Next in ${topic}`,
     newerLabel: 'Newer',

package/src/layout/ContentHero.astro

@@ -18,6 +18,8 @@ interface Props {
   imageAlt?: string;
   /** HTML title attribute of the hero image (tooltip / image SEO). */
   imageTitle?: string;
+  /** Initials drawn on a dark panel when the hero has no image of any kind. */
+  monogram?: string;
   /** Unknown names fall back to `dark` (`stone` and `nature` are such names on Granada). */
   theme?: string;
   /** Per-theme gradient classes layered over the built-in map, for a site whose theme looks differ. */
@@ -35,6 +37,7 @@ const {
   imagePlaceholder,
   imageAlt = title,
   imageTitle,
+  monogram,
   theme = 'dark',
   themeGradients: themeOverrides,
   overlay = 'themed',
@@ -109,6 +112,12 @@ const [badges, subtitle, info, actions, decoration] = await Promise.all(
         loading="eager"
         fetchpriority="high"
       />
+    ) : monogram ? (
+      <div class="absolute inset-0 bg-overlay" aria-hidden="true">
+        <span class="absolute right-6 bottom-0 font-display text-[11rem] leading-none text-overlay-foreground/10 select-none sm:right-12 sm:text-[16rem] lg:text-[22rem]">
+          {monogram}
+        </span>
+      </div>
     ) : null}
     {overlay === 'editorial' ? (
       <>

package/src/primitives/Badge.astro

@@ -31,7 +31,7 @@ import { PILL_BASE } from './pillRecipe';
 // Extends the span attributes so call sites can pass id / aria-* / data-* / slot through.
 interface Props extends Omit<HTMLAttributes<'span'>, 'class'> {
   /** Preset color. Use `custom` + `toneClass` for runtime category/type color maps. */
-  tone?: BrandTone | 'neutral' | 'onImage' | 'custom';
+  tone?: BrandTone | 'neutral' | 'outline' | 'onImage' | 'custom';
   /** Color classes for tone="custom" (e.g. typeColors[type]). */
   toneClass?: string;
   size?: 'sm' | 'md' | 'lg';
@@ -72,6 +72,7 @@ const tones = {
   secondary: 'bg-secondary text-secondary-foreground',
   accent: 'bg-accent-tint text-accent-emphasis',
   neutral: 'bg-muted text-muted-foreground',
+  outline: 'border bg-muted/50 text-foreground border-border',
   onImage: 'bg-badge-on-image text-badge-on-image-foreground backdrop-blur-sm',
   custom: '',
 } as const;