@sarimarcus/content-sites-ui 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.25.0",
+  "version": "0.26.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.26.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;