@sarimarcus/content-sites-ui 0.25.0 → 0.27.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.27.0 (2026-10-05)
+
+- `./editorial`: `ArticleTopicPage`, the body of an article topic hub (`/articles/topic/<category>`) and its paginated pages, promoted from the tourism sites' identical route copies. Strings, the overview and the author cards are props; the blocks a site renders through its own adapters (start-here, grid, pagination, go-deeper, places, faq) are slots. A page above 1 renders only the topic nav, grid and pagination. Also `rankByCount` and type `TopicAuthorCard`. Proven on both tourism sites: their topic routes rewritten onto it render every page byte-identical (SLA-2975).
+
+## 0.26.0 (2026-10-05)
+
+- `./affiliate`: `AffiliateCardSection` and `AmazonProductSection` render through one band shell and grid table; `AffiliateCard` and `AmazonProductCard` share their link, body, CTA and badge classes; `TravelpayoutsWidget` renders one widget body for both variants and takes `WidgetKind`. Output is unchanged (SLA-2921).
+### Breaking
+
+- `selectActivities`: an activity with no `reviewCount` sorts last instead of comparing as NaN, which left its place to the engine. A band whose cache has such an activity reorders: on the live sites, one Dark Skies page (`tours/marrakech-to-merzouga-desert-tour`). No migration (SLA-2921).
+
+- `cardOptions` on `AffiliateCardSection` and `AffiliateCarousel` is typed `AffiliateCardOptions` (new export) instead of `Record<string, unknown>`: an option the card does not take, or a wrong value type, now fails `astro check`. Every site's options already fit; no migration (SLA-2921).
+
 ## 0.25.0 (2026-10-05)
 
 - `./editorial` `ArticleCategoryNav` builds its own links: it takes the articles and the site's category map (`categories`, in display order), links `/articles` and `/articles/topic/<slug>`, and defaults its "All" label and aria label. New type `ArticleCategoryMeta` (SLA-2961).

package/README.md

@@ -99,6 +99,11 @@ prose stay in the route so the site's link and outbound-domain scanners still se
   `cta` box. Carries no Pagefind body.
 - `NotFoundPage`: the 404 body; the route passes `noindex` to Layout and imports `@sarimarcus/content-sites-ui/not-found.css`.
 - `ArticlesListingPage` / `ArticleFeatureCard`: article index, topic hubs and their paginated pages.
+- `ArticleTopicPage`: the body of `/articles/topic/<category>` and its paginated pages, around the topic nav. Blocks
+  the site renders through its own adapters arrive as slots: `start-here`, `grid`, `pagination`, `go-deeper`,
+  `places`, `faq` (wrapped in a measure column only when filled), plus `breadcrumb`, `header-extra` and
+  `overview-byline`. The overview and the author cards are props. A page above 1 renders only the nav, grid and
+  pagination. `rankByCount` ranks a topic's authors or collections by article count.
 - `ListingShell`: listing hubs (breadcrumb, `hero`, `before-main`, Container'd `<main>`, `after-main`), one outer
   `data-pagefind-ignore`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.25.0",
+  "version": "0.27.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.25.0"
+    "@sarimarcus/content-sites-core": "0.27.0"
   }
 }

package/src/affiliate/AffiliateBandShell.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * AffiliateBandShell — the titled band around an affiliate card grid: heading row with the disclosure slot, optional
+ * subtitle, then the grid. Internal to the affiliate sections; not exported.
+ */
+import { bandGridClass, BAND_SECTION_CLASS, BAND_HEADING_CLASS } from './band';
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  count: number;
+  sectionClass?: string;
+  headingClass?: string;
+  id?: string;
+  class?: string;
+}
+
+const { title, subtitle, count, sectionClass = BAND_SECTION_CLASS, headingClass = BAND_HEADING_CLASS, id, class: className } = Astro.props;
+---
+<section id={id} class:list={[sectionClass, className]}>
+  <div class="max-w-shell mx-auto px-4 sm:px-6 lg:px-8">
+    <div class:list={["flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1", subtitle ? "mb-2" : "mb-8"]}>
+      <h2 class={headingClass}>
+        {title}
+      </h2>
+      <slot name="disclosure" />
+    </div>
+    {subtitle && (
+      <p class="text-sm text-muted-foreground mb-8">{subtitle}</p>
+    )}
+    <div class={bandGridClass(count)}>
+      <slot />
+    </div>
+  </div>
+</section>

package/src/affiliate/AffiliateCard.astro

@@ -18,12 +18,13 @@
 import type { ImageMetadata } from 'astro';
 import { deterministicId } from '@sarimarcus/content-sites-core/dom';
 import Badge from '../primitives/Badge.astro';
+import { CARD_LINK_CLASS, CARD_BODY_CLASS, CARD_CTA_CLASS, CARD_BADGE_CLASS } from './cardClasses';
 import Icon from '../primitives/Icon.astro';
-import type { AffiliateCardLabels } from './types';
+import type { AffiliateCardOptions } from './types';
 import { templateLine } from './templateText';
 import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 
-interface Props {
+interface Props extends AffiliateCardOptions {
   href: string;
   provider: string;
   productId?: string;
@@ -42,17 +43,6 @@ interface Props {
   reviewCount?: number;
   duration: string;
   index?: number;
-  pricePrefix?: string;
-  legacyFractionDigits?: boolean;
-  bestSellerAt?: number;
-  skipTheLineBadge?: boolean;
-  cheapPriceBelow?: number;
-  cheapPriceFrame?: string;
-  skipQueueFrame?: string;
-  labels?: AffiliateCardLabels;
-  titleColorClass?: string;
-  booksUpClass?: string;
-  halfStarIds?: 'deterministic' | 'index';
   class?: string;
 }
 
@@ -144,15 +134,15 @@ const priceFrame = skipQueueFrame && title.toLowerCase().includes('skip')
   data-track-affiliate-product-id={productId}
   data-track-affiliate-placement={placement}
   class:list={[
-    "group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full no-underline text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+    CARD_LINK_CLASS,
     className,
   ]}
 >
   {isBestSeller && (
-    <Badge tone="custom" toneClass="bg-primary text-primary-foreground" size="sm" lines={0} class="absolute top-3 left-3 z-10 pointer-events-none !px-2.5 !py-1 !font-semibold"><Fragment set:html={templateLine(bestSeller)} /></Badge>
+    <Badge tone="custom" toneClass="bg-primary text-primary-foreground" size="sm" lines={0} class={CARD_BADGE_CLASS}><Fragment set:html={templateLine(bestSeller)} /></Badge>
   )}
   {isTopRated && (
-    <Badge tone="custom" toneClass="bg-accent text-accent-foreground" size="sm" lines={0} class="absolute top-3 left-3 z-10 pointer-events-none !px-2.5 !py-1 !font-semibold"><Fragment set:html={templateLine(topRated)} /></Badge>
+    <Badge tone="custom" toneClass="bg-accent text-accent-foreground" size="sm" lines={0} class={CARD_BADGE_CLASS}><Fragment set:html={templateLine(topRated)} /></Badge>
   )}
 
   <div class="relative h-48 sm:h-52 overflow-hidden shrink-0">
@@ -185,7 +175,7 @@ const priceFrame = skipQueueFrame && title.toLowerCase().includes('skip')
     </h3>
   </div>
 
-  <div class="p-4 sm:p-5 flex flex-col flex-1">
+  <div class={CARD_BODY_CLASS}>
     <p class="text-base text-muted-foreground line-clamp-2 mb-3">
       {description}
     </p>{skipTheLineBadge && ' '}{isSkipTheLine && (
@@ -261,7 +251,7 @@ const priceFrame = skipQueueFrame && title.toLowerCase().includes('skip')
 
     <div class="mt-auto">
       <span
-        class="flex items-center justify-center gap-2 w-full py-2.5 px-4 bg-primary text-primary-foreground font-medium rounded-lg group-hover:bg-primary/90 group-active:bg-primary/80 transition-colors"
+        class={CARD_CTA_CLASS}
       >
         <Icon name="ticket" class="w-4 h-4" aria-hidden="true" /><Fragment set:html={templateLine(cta)} /></span>
       {hasReviews && verified && (

package/src/affiliate/AffiliateCardSection.astro

@@ -6,7 +6,9 @@
  * the disclosure arrives through the `disclosure` slot.
  */
 import AffiliateCard from './AffiliateCard.astro';
-import type { AffiliateCardItem } from './types';
+import AffiliateBandShell from './AffiliateBandShell.astro';
+import { bandImageSizes } from './band';
+import type { AffiliateCardItem, AffiliateCardOptions } from './types';
 
 interface Props {
   items: AffiliateCardItem[];
@@ -14,7 +16,7 @@ interface Props {
   subtitle?: string;
   placement?: string;
   imageFetchpriority?: 'high' | 'low' | 'auto';
-  cardOptions?: Record<string, unknown>;
+  cardOptions?: AffiliateCardOptions;
   sectionClass?: string;
   headingClass?: string;
   id?: string;
@@ -28,59 +30,28 @@ const {
   placement,
   imageFetchpriority,
   cardOptions = {},
-  sectionClass = 'py-12 bg-muted/30 border-t border-border',
-  headingClass = 'text-3xl sm:text-4xl font-normal font-display',
+  sectionClass,
+  headingClass,
   id,
   class: className,
 } = Astro.props;
 
 const visible = (items ?? []).map(({ id: _id, ...item }) => item);
 
-const gridClasses: Record<number, string> = {
-  1: "grid grid-cols-1 max-w-md mx-auto",
-  2: "grid gap-6 grid-cols-1 sm:grid-cols-2",
-  3: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-};
-
-// Desktop figures are measured off max-w-shell (80rem) minus lg:px-8 padding and the gap-6 gutters.
-const gridSizes: Record<number, string> = {
-  1: '(min-width: 640px) 448px, 100vw',
-  2: '(min-width: 1024px) 596px, (min-width: 640px) 45vw, 100vw',
-  3: '(min-width: 1024px) 389px, (min-width: 640px) 45vw, 100vw',
-  4: '(min-width: 1024px) 286px, (min-width: 640px) 45vw, 100vw',
-};
-
-const gridClass = gridClasses[visible.length] || gridClasses[4];
-const imageSizes = gridSizes[visible.length] || gridSizes[4];
+const imageSizes = bandImageSizes(visible.length);
 ---
 
 {
   visible.length > 0 && (
-    <section id={id} class:list={[sectionClass, className]}>
-      <div class="max-w-shell mx-auto px-4 sm:px-6 lg:px-8">
-        <div class:list={["flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1", subtitle ? "mb-2" : "mb-8"]}>
-          <h2 class={headingClass}>
-            {title}
-          </h2>
-          <slot name="disclosure" />
-        </div>
-        {subtitle && (
-          <p class="text-sm text-muted-foreground mb-8">{subtitle}</p>
-        )}
-        <div class={gridClass}>
-          {visible.map((item, index) => (
-            <AffiliateCard
-              {...cardOptions}
-              {...item}
-              index={index}
-              placement={placement}
-              imageSizes={imageSizes}
-              imageFetchpriority={imageFetchpriority}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
+    <AffiliateBandShell title={title} subtitle={subtitle} count={visible.length} sectionClass={sectionClass} headingClass={headingClass} id={id} class={className}><slot name="disclosure" slot="disclosure" />{visible.map((item, index) => (
+        <AffiliateCard
+          {...cardOptions}
+          {...item}
+          index={index}
+          placement={placement}
+          imageSizes={imageSizes}
+          imageFetchpriority={imageFetchpriority}
+        />
+      ))}</AffiliateBandShell>
   )
 }

package/src/affiliate/AffiliateCarousel.astro

@@ -8,7 +8,7 @@
  */
 import CardCarousel from '../composed/CardCarousel.astro';
 import AffiliateCard from './AffiliateCard.astro';
-import type { AffiliateCardItem } from './types';
+import type { AffiliateCardItem, AffiliateCardOptions } from './types';
 
 type Activity = { id?: string | number; title?: string; reviewCount?: number; [key: string]: unknown };
 
@@ -25,7 +25,7 @@ interface Props {
   maxCards?: number;
   placement?: string;
   imageSizes?: string;
-  cardOptions?: Record<string, unknown>;
+  cardOptions?: AffiliateCardOptions;
   class?: string;
 }
 

package/src/affiliate/AmazonProductCard.astro

@@ -5,6 +5,7 @@
  * count, and no hotlinked product image — without a local `image` the card shows a category icon.
  */
 import Badge from '../primitives/Badge.astro';
+import { CARD_LINK_CLASS, CARD_BODY_CLASS, CARD_CTA_CLASS, CARD_BADGE_CLASS } from './cardClasses';
 import Icon from '../primitives/Icon.astro';
 import { templateLine } from './templateText';
 
@@ -56,12 +57,12 @@ const placeholderIcon = categoryIcon[category] ?? 'book-open';
   data-track-affiliate-product-id={asin}
   data-track-affiliate-placement={placement}
   class:list={[
-    "group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full no-underline text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+    CARD_LINK_CLASS,
     className,
   ]}
 >
   {badge && (
-    <Badge tone="custom" toneClass="bg-accent text-accent-foreground" size="sm" lines={0} class="absolute top-3 left-3 z-10 pointer-events-none !px-2.5 !py-1 !font-semibold">
+    <Badge tone="custom" toneClass="bg-accent text-accent-foreground" size="sm" lines={0} class={CARD_BADGE_CLASS}>
       {badge}
     </Badge>
   )}
@@ -82,7 +83,7 @@ const placeholderIcon = categoryIcon[category] ?? 'book-open';
     )}
   </div>
 
-  <div class="p-4 sm:p-5 flex flex-col flex-1">
+  <div class={CARD_BODY_CLASS}>
     <h3 class="text-lg font-semibold text-card-foreground leading-tight font-display">
       {title}
     </h3>
@@ -93,7 +94,7 @@ const placeholderIcon = categoryIcon[category] ?? 'book-open';
 
     <div class="mt-auto">
       <span
-        class="flex items-center justify-center gap-2 w-full py-2.5 px-4 bg-primary text-primary-foreground font-medium rounded-lg group-hover:bg-primary/90 group-active:bg-primary/80 transition-colors"
+        class={CARD_CTA_CLASS}
       ><Fragment set:html={templateLine(ctaLabel)} /><Icon name="arrow-up-right" class="w-4 h-4" />
       </span>
     </div>

package/src/affiliate/AmazonProductSection.astro

@@ -4,6 +4,7 @@
  * products. Each product carries its finished `href`; the disclosure arrives through the `disclosure` slot.
  */
 import AmazonProductCard from './AmazonProductCard.astro';
+import AffiliateBandShell from './AffiliateBandShell.astro';
 
 interface Product {
   href: string;
@@ -42,31 +43,12 @@ const {
 const cappedMax = Math.min(maxCards ?? 4, 4);
 const visibleProducts = enabled ? [...(products ?? [])].slice(0, cappedMax) : [];
 
-const gridClasses: Record<number, string> = {
-  1: "grid grid-cols-1 max-w-md mx-auto",
-  2: "grid gap-6 grid-cols-1 sm:grid-cols-2",
-  3: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-};
-
-const gridClass = gridClasses[visibleProducts.length] || gridClasses[4];
 ---
 
 {
   visibleProducts.length > 0 && (
-    <section id={id} class:list={["py-12 bg-muted/30 border-t border-border", className]}>
-      <div class="max-w-shell mx-auto px-4 sm:px-6 lg:px-8">
-        <div class:list={["flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1", subtitle ? "mb-2" : "mb-8"]}>
-          <h2 class="text-3xl sm:text-4xl font-normal font-display">{title}</h2>
-          <slot name="disclosure" />
-        </div>
-        {subtitle && <p class="text-sm text-muted-foreground mb-8">{subtitle}</p>}
-        <div class={gridClass}>
-          {visibleProducts.map((product) => (
-            <AmazonProductCard {...product} ctaLabel={ctaLabel} />
-          ))}
-        </div>
-      </div>
-    </section>
+    <AffiliateBandShell title={title} subtitle={subtitle} count={visibleProducts.length} id={id} class={className}><slot name="disclosure" slot="disclosure" />{visibleProducts.map((product) => (
+        <AmazonProductCard {...product} ctaLabel={ctaLabel} />
+      ))}</AffiliateBandShell>
   )
 }

package/src/affiliate/TravelpayoutsWidget.astro

@@ -12,7 +12,8 @@
  * block `role="region"`, so its `aria-label` names something (on a bare div assistive tech ignores it); off by
  * default only because it changes the markup.
  */
-type Kind = 'hotel' | 'activity' | 'train' | 'car';
+import TravelpayoutsWidgetBody from './TravelpayoutsWidgetBody.astro';
+import type { WidgetKind as Kind } from './resources';
 
 interface Props {
   kind: Kind;
@@ -64,7 +65,6 @@ const {
 if (!WRAPPER[kind]) throw new Error(`TravelpayoutsWidget: unknown kind "${kind}" (hotel, activity, train, car).`);
 
 const isolate = kind === 'car';
-const widgetDoc = `<!doctype html><html><head><meta charset="utf-8" /></head><body style="margin:0"><script async src="${src}" charset="utf-8"></script></body></html>`;
 const markerValue = marker ? kind : undefined;
 ---
 
@@ -86,21 +86,7 @@ const markerValue = marker ? kind : undefined;
         {subtitle && (
           <p class="text-sm text-muted-foreground mb-8">{subtitle}</p>
         )}
-        {isolate ? (
-          <div class={wrapperClass} data-affiliate-widget={markerValue}>
-            <iframe
-              srcdoc={widgetDoc}
-              sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
-              loading="lazy"
-              title={iframeTitle}
-              class="w-full h-[478px] sm:h-[430px] border-0 block"
-            />
-          </div>
-        ) : (
-          <div class={wrapperClass} data-affiliate-widget={markerValue}>
-            <script async src={src} charset="utf-8" is:inline />
-          </div>
-        )}
+        <TravelpayoutsWidgetBody src={src} isolate={isolate} wrapperClass={wrapperClass} iframeTitle={iframeTitle} marker={markerValue} />
       </div>
     </section>
   ) : (
@@ -120,21 +106,7 @@ const markerValue = marker ? kind : undefined;
       {subtitle && (
         <p class="text-sm text-muted-foreground mb-6">{subtitle}</p>
       )}
-      {isolate ? (
-        <div class={wrapperClass} data-affiliate-widget={markerValue}>
-          <iframe
-            srcdoc={widgetDoc}
-            sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
-            loading="lazy"
-            title={iframeTitle}
-            class="w-full h-[478px] sm:h-[430px] border-0 block"
-          />
-        </div>
-      ) : (
-        <div class={wrapperClass} data-affiliate-widget={markerValue}>
-          <script async src={src} charset="utf-8" is:inline />
-        </div>
-      )}
+      <TravelpayoutsWidgetBody src={src} isolate={isolate} wrapperClass={wrapperClass} iframeTitle={iframeTitle} marker={markerValue} />
     </div>
   )
 }

package/src/affiliate/TravelpayoutsWidgetBody.astro

@@ -0,0 +1,31 @@
+---
+/**
+ * TravelpayoutsWidgetBody — the widget wrapper both TravelpayoutsWidget variants render: the loader script, or for
+ * `isolate` the same script inside a sandboxed `srcdoc` iframe. Internal; not exported.
+ */
+interface Props {
+  src: string;
+  isolate: boolean;
+  wrapperClass: string;
+  iframeTitle: string;
+  marker?: string;
+}
+
+const { src, isolate, wrapperClass, iframeTitle, marker } = Astro.props;
+const widgetDoc = `<!doctype html><html><head><meta charset="utf-8" /></head><body style="margin:0"><script async src="${src}" charset="utf-8"></script></body></html>`;
+---
+{isolate ? (
+  <div class={wrapperClass} data-affiliate-widget={marker}>
+    <iframe
+      srcdoc={widgetDoc}
+      sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+      loading="lazy"
+      title={iframeTitle}
+      class="w-full h-[478px] sm:h-[430px] border-0 block"
+    />
+  </div>
+) : (
+  <div class={wrapperClass} data-affiliate-widget={marker}>
+    <script async src={src} charset="utf-8" is:inline />
+  </div>
+)}

package/src/affiliate/band.ts

@@ -0,0 +1,25 @@
+// The affiliate band grid, shared by AffiliateCardSection and AmazonProductSection: up to 4 columns, a fifth item wraps.
+const GRID: Record<number, string> = {
+  1: 'grid grid-cols-1 max-w-md mx-auto',
+  2: 'grid gap-6 grid-cols-1 sm:grid-cols-2',
+  3: 'grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+};
+
+// The card image `sizes` per column count. Desktop figures are measured off max-w-shell (80rem) minus lg:px-8 padding
+// and the gap-6 gutters, so they change with GRID.
+const SIZES: Record<number, string> = {
+  1: '(min-width: 640px) 448px, 100vw',
+  2: '(min-width: 1024px) 596px, (min-width: 640px) 45vw, 100vw',
+  3: '(min-width: 1024px) 389px, (min-width: 640px) 45vw, 100vw',
+  4: '(min-width: 1024px) 286px, (min-width: 640px) 45vw, 100vw',
+};
+
+/** The grid classes for a band holding `count` cards. */
+export const bandGridClass = (count: number) => GRID[count] || GRID[4];
+
+/** The card image `sizes` for a band holding `count` cards. */
+export const bandImageSizes = (count: number) => SIZES[count] || SIZES[4];
+
+export const BAND_SECTION_CLASS = 'py-12 bg-muted/30 border-t border-border';
+export const BAND_HEADING_CLASS = 'text-3xl sm:text-4xl font-normal font-display';

package/src/affiliate/cardClasses.ts

@@ -0,0 +1,5 @@
+// Class strings AffiliateCard and AmazonProductCard share: the whole-card link, its body, the CTA bar and corner badge.
+export const CARD_LINK_CLASS = 'group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full no-underline text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2';
+export const CARD_BODY_CLASS = 'p-4 sm:p-5 flex flex-col flex-1';
+export const CARD_CTA_CLASS = 'flex items-center justify-center gap-2 w-full py-2.5 px-4 bg-primary text-primary-foreground font-medium rounded-lg group-hover:bg-primary/90 group-active:bg-primary/80 transition-colors';
+export const CARD_BADGE_CLASS = 'absolute top-3 left-3 z-10 pointer-events-none !px-2.5 !py-1 !font-semibold';

package/src/affiliate/index.ts

@@ -15,7 +15,7 @@ export { externalResources, emeraldResources, EMERALD_ORIGIN, widgetLoaders } fr
 export { widgetSrc } from './widgetSrc';
 export { gygCardItem, gygCardLocale, type GygCardActivity } from './cardItem';
 export type { WidgetKind, CspDirective, WidgetResources } from './resources';
-export type { AffiliateCardLabels, AffiliateCardItem, HotelCtaLabels, ComparisonRow, ComparisonTableLabels } from './types';
+export type { AffiliateCardLabels, AffiliateCardOptions, AffiliateCardItem, HotelCtaLabels, ComparisonRow, ComparisonTableLabels } from './types';
 export { selectActivities, type SelectableActivity, type SelectOptions } from './select';
 export { default as EmeraldLoader } from './EmeraldLoader.astro';
 export { setupTravelpayoutsStyler } from './travelpayoutsStyler.ts';

package/src/affiliate/select.ts

@@ -34,7 +34,7 @@ export function selectActivities<T extends SelectableActivity>(activities: Reado
     }
   }
   const unpinned = pool.filter((activity) => !pinnedKeys.has(idKey(activity.id)));
-  // A missing count compares as NaN, exactly as the sites' sorts did; treating it as 0 would reorder live bands.
-  const rest = keepOrder ? unpinned : unpinned.sort((a, b) => Number(b.reviewCount) - Number(a.reviewCount));
+  // A missing count sorts as 0, so it lands after every reviewed activity instead of breaking the comparator.
+  const rest = keepOrder ? unpinned : unpinned.sort((a, b) => (b.reviewCount ?? 0) - (a.reviewCount ?? 0));
   return [...pinned, ...rest].slice(0, maxCards);
 }

package/src/affiliate/types.ts

@@ -11,6 +11,21 @@ export interface AffiliateCardLabels {
   booksUp?: string;
 }
 
+/** The card-wide presentation a site applies to every card in a section or carousel. */
+export interface AffiliateCardOptions {
+  pricePrefix?: string;
+  legacyFractionDigits?: boolean;
+  bestSellerAt?: number;
+  skipTheLineBadge?: boolean;
+  cheapPriceBelow?: number;
+  cheapPriceFrame?: string;
+  skipQueueFrame?: string;
+  labels?: AffiliateCardLabels;
+  titleColorClass?: string;
+  booksUpClass?: string;
+  halfStarIds?: 'deterministic' | 'index';
+}
+
 /** One card in an AffiliateCardSection or AffiliateCarousel: the card's own props, resolved by the site. */
 export interface AffiliateCardItem {
   id?: string | number;

package/src/composed/index.ts

@@ -9,5 +9,4 @@ 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 type { RelatedItem, RelatedTone } from './related';

package/src/editorial/ArticleTopicPage.astro

@@ -0,0 +1,109 @@
+---
+/**
+ * ArticleTopicPage — an article topic hub (/articles/topic/<category>) or one of its paginated pages, inside
+ * ArticlesListingPage. The route keeps paths, data, SEO, schema and the site Layout; every string arrives as a prop.
+ * Blocks the site renders through its own adapters (cards, related content, FAQ, pagination) arrive as slots, so its
+ * markdown, colour and URL rules still apply. A page above 1 renders only the topic nav, the grid and pagination.
+ * Slots:
+ *   breadcrumb      — the site Breadcrumb.
+ *   header-extra    — a line under the lede (e.g. the article count). Page 1 only.
+ *   start-here      — the site's related-content block above the overview. Page 1 only.
+ *   overview-byline — the overview byline, under its heading.
+ *   grid            — the site's article card grid for this page.
+ *   pagination      — the site's pagination.
+ *   go-deeper, places — related-content blocks after the list. Page 1 only.
+ *   faq             — the site's FAQ, in a measure column. Page 1 only.
+ */
+import Container from '../layout/Container.astro';
+import Callout from '../primitives/Callout.astro';
+import type { TrustedHtml } from '../types';
+import ArticlesListingPage from './ArticlesListingPage.astro';
+import ArticleCategoryNav from './ArticleCategoryNav.astro';
+import type { ArticleCategoryMeta, TopicAuthorCard } from './types';
+
+interface Props {
+  eyebrow: string;
+  heading: string;
+  lede: string;
+  /** Every article, for the topic nav's counts. */
+  articles: readonly { data: { category?: string | null } }[];
+  categories: Readonly<Record<string, ArticleCategoryMeta>>;
+  category: string;
+  /** Page 1 is the hub; a later page carries only the nav, grid and pagination. */
+  currentPage: number;
+  /** Heading over the page-1 list. */
+  listHeading?: string;
+  overview?: { heading: string; html: TrustedHtml; guide?: { title: string; lead: string; href: string; linkLabel: string } };
+  authors?: { heading: string; items: TopicAuthorCard[] };
+}
+
+const { eyebrow, heading, lede, articles, categories, category, currentPage, listHeading, overview, authors } = Astro.props;
+const hub = currentPage === 1;
+// Astro.slots.has() is true for a slotted expression that evaluated to false, so test what it rendered.
+const faqHtml = hub && Astro.slots.has('faq') ? (await Astro.slots.render('faq')).trim() : '';
+---
+
+{hub ? (
+  <ArticlesListingPage eyebrow={eyebrow} heading={heading} lede={lede} pagefindBody>
+    <slot name="breadcrumb" slot="breadcrumb" />
+    <slot name="header-extra" slot="header-extra" />
+    <Container>
+      <ArticleCategoryNav articles={articles} categories={categories} current={category} class="mb-12" />
+      <slot name="start-here" /></Container>
+
+    {overview && (
+      <section id="overview" class="mb-14">
+        <Container size="measure">
+          <h2 class="text-2xl sm:text-3xl font-normal font-display text-foreground mb-4">{overview.heading}</h2>
+          <slot name="overview-byline" />
+          <div class="prose prose-lg max-w-none mt-6" set:html={overview.html} />
+          {overview.guide && (
+            <Callout type="tip" title={overview.guide.title} class="mt-8">
+              {overview.guide.lead}<a href={overview.guide.href} class="font-medium text-primary hover:underline">{overview.guide.linkLabel}</a>
+            </Callout>
+          )}
+        </Container>
+      </section>
+    )}
+
+    <Container>
+      <section id="all-articles">
+        {listHeading && <h2 class="text-2xl sm:text-3xl font-normal font-display text-foreground mb-6">{listHeading}</h2>}
+        <slot name="grid" />
+        <slot name="pagination" />
+      </section>
+      <slot name="go-deeper" /><slot name="places" /></Container>
+
+    {faqHtml && (
+      <Container size="measure" class="mt-16">
+        <Fragment set:html={faqHtml} />
+      </Container>
+    )}
+
+    {authors && authors.items.length > 0 && (
+      <Container class="mt-16">
+        <section id="authors" aria-labelledby="topic-authors-heading">
+          <h2 id="topic-authors-heading" class="text-xl font-semibold font-display text-foreground mb-5">{authors.heading}</h2>
+          <div class="grid gap-4 sm:grid-cols-3">
+            {authors.items.map((a) => (
+              <a href={a.href} class="block rounded-xl border border-border bg-card p-5 hover:border-primary transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50">
+                <span class="block font-semibold text-foreground">{a.name}</span>
+                <span class="mt-1 block text-xs text-muted-foreground">{a.countLabel}</span>
+                {a.credentials && <span class="mt-2 block text-sm text-muted-foreground line-clamp-3">{a.credentials}</span>}
+              </a>
+            ))}
+          </div>
+        </section>
+      </Container>
+    )}
+  </ArticlesListingPage>
+) : (
+  <ArticlesListingPage eyebrow={eyebrow} heading={heading} lede={lede}>
+    <slot name="breadcrumb" slot="breadcrumb" />
+    <Container>
+      <ArticleCategoryNav articles={articles} categories={categories} current={category} class="mb-10" />
+      <slot name="grid" />
+      <slot name="pagination" />
+    </Container>
+  </ArticlesListingPage>
+)}

package/src/editorial/index.ts

@@ -13,7 +13,9 @@ 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, ArticleCategoryMeta } from './types';
+export { default as ArticleTopicPage } from './ArticleTopicPage.astro';
+export { rankByCount } from './topic';
+export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategoryLink, ArticleCategoryMeta, TopicAuthorCard } 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/topic.ts

@@ -0,0 +1,9 @@
+/**
+ * The keys that occur most often, with their counts, most frequent first. Ties keep first-seen order, so a topic hub
+ * ranks its authors or themed collections the same way on every build.
+ */
+export function rankByCount(keys: Iterable<string>, limit: number): [string, number][] {
+  const counts = new Map<string, number>();
+  for (const key of keys) counts.set(key, (counts.get(key) ?? 0) + 1);
+  return [...counts].sort((a, b) => b[1] - a[1]).slice(0, limit);
+}

package/src/editorial/types.ts

@@ -42,6 +42,14 @@ export interface ArticleCategoryMeta {
   icon?: string;
 }
 
+/** One author card at the foot of an article topic hub. */
+export interface TopicAuthorCard {
+  href: string;
+  name: string;
+  countLabel: string;
+  credentials?: string;
+}
+
 /** One category chip in an article topic nav. */
 export interface ArticleCategoryLink {
   href: string;