@sarimarcus/content-sites-ui 0.17.0 → 0.19.0

package/src/editorial/ArticleKeyFacts.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * ArticleKeyFacts — the above-the-fold "3 quick facts" strip: figure-first tiles in a semantic <dl>, rendered only
+ * with 3+ items. Not composed/QuickFacts: that one is label-above-value, needs a title and a per-item icon.
+ * Palette classes are props so a site keeps its own figure and surface roles.
+ */
+import type { KeyFact } from './types';
+
+interface Props {
+  items: KeyFact[];
+  ariaLabel: string;
+  borderClass?: string;
+  surfaceClass?: string;
+  labelClass?: string;
+  figureClass?: string;
+  class?: string;
+}
+
+const {
+  items,
+  ariaLabel,
+  borderClass = 'border-accent/25',
+  surfaceClass = 'bg-card',
+  labelClass = 'tracking-[0.14em] text-foreground/70',
+  figureClass = 'text-primary',
+  class: className = '',
+} = Astro.props;
+---
+
+{items.length >= 3 && (
+  <dl
+    class:list={[
+      // gap-px over a bg-border grid draws the dividers as cell edges, never a side-stripe border.
+      `grid grid-cols-1 gap-px overflow-hidden rounded-xl border ${borderClass} bg-border sm:grid-cols-3`,
+      className,
+    ]}
+    aria-label={ariaLabel}
+  >
+    {items.map((fact) => (
+      <div class={`flex min-w-0 flex-col ${surfaceClass} px-5 py-5 sm:px-6`}>
+        {/* dt precedes dd in the DOM; order-* puts the figure first visually. */}
+        <dt class={`order-2 mt-2 text-[0.8125rem] font-semibold uppercase leading-none ${labelClass}`}>
+          {fact.label}
+        </dt>
+        <dd class={`order-1 m-0 font-display text-[2rem] leading-none tracking-[-0.02em] tabular-nums ${figureClass} sm:text-[2.25rem]`}>
+          {fact.figure}
+        </dd>
+        {fact.detailHtml && (
+          <dd class="order-3 m-0 mt-2 text-sm leading-snug text-muted-foreground" set:html={fact.detailHtml} />
+        )}
+      </div>
+    ))}
+  </dl>
+)}

package/src/editorial/ArticlesListingPage.astro

@@ -0,0 +1,40 @@
+---
+/**
+ * ArticlesListingPage — the shell of an article listing (index, topic hub, their paginated pages): breadcrumb band,
+ * a header (eyebrow, heading, accent rule, lede) and <main>. The route keeps Layout, schema, paging and image maps,
+ * passes the breadcrumb in `breadcrumb`, an optional line under the lede in `header-extra`, and the main content
+ * (its own Containers) as default-slot children.
+ */
+import BreadcrumbBand from '../layout/BreadcrumbBand.astro';
+import Container from '../layout/Container.astro';
+
+interface Props {
+  eyebrow: string;
+  heading: string;
+  lede: string;
+  /** Mark <main> as the Pagefind body. */
+  pagefindBody?: boolean;
+}
+
+const { eyebrow, heading, lede, pagefindBody = false } = Astro.props;
+---
+
+<BreadcrumbBand>
+  <slot name="breadcrumb" />
+</BreadcrumbBand>
+
+<header class="bg-muted/30 border-b border-border pt-12 pb-10">
+  <Container size="measure">
+    <p class="text-sm font-semibold uppercase tracking-[0.18em] text-primary mb-3">{eyebrow}</p>
+    <h1 class="text-3xl sm:text-4xl font-normal font-display text-foreground leading-tight text-balance">
+      {heading}
+    </h1>
+    <div class="mt-4 flex"><span class="block h-0.5 w-16 rounded-full bg-accent"></span></div>
+    <p class="mt-5 text-lg text-muted-foreground leading-relaxed">{lede}</p>
+    <slot name="header-extra" />
+  </Container>
+</header>
+
+<main class="py-14" data-pagefind-body={pagefindBody ? '' : undefined}>
+  <slot />
+</main>

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/NotFoundPage.astro

@@ -0,0 +1,98 @@
+---
+/**
+ * NotFoundPage — the 404 body: a decorative arch-and-zellige backdrop, the large "404", a message, a home button, a
+ * search link and a short list of section links. The route keeps Layout (with `noindex`), passes every string and
+ * imports `@sarimarcus/content-sites-ui/not-found.css`.
+ */
+import Button from '../primitives/Button.astro';
+import LinkArrow from '../primitives/LinkArrow.astro';
+import Icon from '../primitives/Icon.astro';
+
+interface Props {
+  tagline: string;
+  lede: string;
+  homeHref: string;
+  homeLabel: string;
+  searchHref: string;
+  searchLabel: string;
+  searchAriaLabel: string;
+  exploreLabel: string;
+  /** Accessible name of the section links. */
+  exploreAriaLabel?: string;
+  links: { href: string; label: string }[];
+}
+
+const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaLabel, exploreLabel, exploreAriaLabel = 'Explore sections', links } = Astro.props;
+---
+
+<main class="relative min-h-[80vh] flex items-center justify-center overflow-hidden bg-muted">
+  {/* Geometric zellige-inspired background pattern — pure CSS */}
+  <div class="absolute inset-0 opacity-[0.04] pointer-events-none" aria-hidden="true">
+    <div class="not-found-zellige-grid"></div>
+  </div>
+
+  {/* Decorative horseshoe arches — layered behind content */}
+  <div class="absolute inset-0 flex items-end justify-center pointer-events-none" aria-hidden="true">
+    <div class="not-found-arch-row">
+      <div class="not-found-arch not-found-arch--left"></div>
+      <div class="not-found-arch not-found-arch--center"></div>
+      <div class="not-found-arch not-found-arch--right"></div>
+    </div>
+  </div>
+
+  <div class="relative z-10 max-w-deck mx-auto px-6 py-20 text-center">
+    {/* Decorative star motif */}
+    <div class="flex justify-center mb-6" aria-hidden="true">
+      <div class="not-found-islamic-star"></div>
+    </div>
+
+    {/* The 404 number — large and decorative */}
+    <h1 class="text-accent text-[8rem] sm:text-[10rem] md:text-[12rem] leading-none font-display tracking-tight select-none not-found-fade-in-up">
+      404
+    </h1>
+
+    {/* Thin accent separator */}
+    <div class="mx-auto w-24 h-px bg-gradient-to-r from-transparent via-accent to-transparent my-6 not-found-fade-in-up not-found-delay-1" aria-hidden="true"></div>
+
+    {/* Message */}
+    <h2 class="font-display text-2xl sm:text-3xl text-foreground mb-4 not-found-fade-in-up not-found-delay-1">
+      {tagline}
+    </h2>
+    <p class="text-muted-foreground text-lg sm:text-xl leading-relaxed max-w-lg mx-auto mb-10 not-found-fade-in-up not-found-delay-2">
+      {lede}
+    </p>
+
+    {/* Primary CTA */}
+    <div class="mb-6 not-found-fade-in-up not-found-delay-2">
+      <Button href={homeHref} variant="primary">
+        {homeLabel}
+      </Button>
+    </div>
+
+    {/* Search prompt */}
+    <div class="mb-12 not-found-fade-in-up not-found-delay-3">
+      <a
+        href={searchHref}
+        data-search-trigger
+        class="group flex items-center gap-3 w-full max-w-sm mx-auto px-4 py-3 rounded-xl border border-foreground/20 bg-white/60 backdrop-blur-sm text-left hover:border-primary/40 hover:bg-white/80 transition-all no-underline"
+        aria-label={searchAriaLabel}
+      >
+        <Icon name="search" class="w-4 h-4 text-muted-foreground shrink-0" />
+        <span class="text-muted-foreground text-sm flex-1">{searchLabel}</span>
+        <kbd class="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono border border-border text-muted-foreground/60 bg-muted/50">⌘K</kbd>
+      </a>
+    </div>
+
+    {/* Explore sections */}
+    <div class="not-found-fade-in-up not-found-delay-4">
+      <p class="text-sm uppercase tracking-widest text-muted-foreground/60 mb-5 font-medium">
+        {exploreLabel}
+      </p>
+      <nav aria-label={exploreAriaLabel} class="flex flex-wrap justify-center gap-x-6 gap-y-3">
+        {links.map((link, i) => (
+          <LinkArrow href={link.href} color={i % 2 === 0 ? 'secondary' : 'primary'} size="base">{link.label}</LinkArrow>
+        ))}
+      </nav>
+    </div>
+  </div>
+</main>

package/src/editorial/StaticProsePage.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * StaticProsePage — the shell of a legal or site-information page (privacy, terms, contact, editorial standards,
+ * agents). The route keeps Layout, schema and the prose itself (default slot), so copy and links stay in site source.
+ * Not Pagefind-indexed: it carries no body marker.
+ */
+import Container from '../layout/Container.astro';
+import Button from '../primitives/Button.astro';
+
+interface CtaLink {
+  href: string;
+  label: string;
+}
+
+interface Props {
+  heading: string;
+  /** Small uppercase line above the heading ("Site policy"). */
+  eyebrow?: string;
+  /** Closing box under the prose: a short line and secondary buttons. */
+  cta?: { text: string; links: CtaLink[] };
+}
+
+const { heading, eyebrow, cta } = Astro.props;
+---
+
+<main class="py-16 lg:py-24">
+  <Container size="measure">
+    {eyebrow && <p class="text-sm font-semibold uppercase tracking-[0.18em] text-primary mb-3">{eyebrow}</p>}
+    <h1 class="text-3xl sm:text-4xl font-medium font-display mb-8">{heading}</h1>
+
+    <div class="prose prose-stone max-w-none">
+      <slot />
+    </div>
+
+    <slot name="after" />
+
+    {cta && (
+      <div class="not-prose mt-12 rounded-2xl border border-border bg-muted/40 p-6">
+        <p class="text-sm text-muted-foreground mb-4">
+          {cta.text}
+        </p>
+        <div class="flex flex-wrap gap-3">
+          {cta.links.map((link) => <Button href={link.href} variant="secondary">{link.label}</Button>)}
+        </div>
+      </div>
+    )}
+  </Container>
+</main>

package/src/editorial/index.ts

@@ -3,4 +3,17 @@ export { default as EditorialGuidePage } from './EditorialGuidePage.astro';
 export { default as EventPage } from './EventPage.astro';
 export { default as BeforeYouGo } from './BeforeYouGo.astro';
 export { default as NumberedStep } from './NumberedStep.astro';
+export { default as StaticProsePage } from './StaticProsePage.astro';
+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';

package/src/editorial/types.ts

@@ -0,0 +1,68 @@
+import type { ImageMetadata } from 'astro';
+import type { TrustedHtml } from '../types';
+import type { SourceInput } from '../seo/types';
+
+/** A person as listed on author strips and cards. The byline shape is ui/seo `ArticleAuthor`. */
+export interface AuthorSummary {
+  name: string;
+  /** Profile URL, base path already applied. */
+  href: string;
+  /** Optimised portrait, or a public URL with the base path applied. */
+  image?: ImageMetadata | string;
+}
+
+/** One article as a card or grid entry. Dates arrive formatted, so the package never picks a time zone. */
+export interface ArticleSummary {
+  href: string;
+  title: string;
+  description: string;
+  author?: string;
+  image?: ImageMetadata;
+  imageAlt?: string;
+  /** ISO value for `<time datetime>`: dateModified when `updated`, else datePublished. */
+  dateTime?: string;
+  dateLabel?: string;
+  updated?: boolean;
+  /** Pre-composed reading-time text, e.g. "6 min read". */
+  readingLabel?: string;
+}
+
+/** A key-fact tile. `detailHtml` is parsed by the site, so footnote markers resolve. */
+export interface KeyFact {
+  figure: string;
+  label: string;
+  detailHtml?: TrustedHtml;
+}
+
+export type SourceItem = SourceInput;
+
+/** One category chip in an article topic nav. */
+export interface ArticleCategoryLink {
+  href: string;
+  label: string;
+  icon?: string;
+  count: number;
+  active: boolean;
+}
+
+export type InsiderTipTone = 'primary' | 'accent' | 'secondary' | 'muted';
+
+/** Site-defined tip kinds: the key stored in content, its badge label and its tone. */
+export type InsiderTipKinds = Record<string, { label: string; tone: InsiderTipTone }>;
+
+export interface InsiderTip {
+  kind: string;
+  title: string;
+  bodyHtml: TrustedHtml;
+}
+
+export interface InsiderTipAuthor {
+  name: string;
+  href?: string;
+  /** Portrait URL, base path already applied. */
+  photoSrc?: string;
+  portraitAlt: string;
+  /** Pre-joined expertise line. */
+  expertise?: string;
+  credentials?: string;
+}