@sarimarcus/content-sites-ui 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.31.0 (2026-10-08)
+
+- `./editorial` adds `AlsoExplore` (`AlsoExploreItem`) and `VisitTiming` (`VisitTimingData`; props `title`, `id`, `class` default `mt-12`, `labelClass` default `text-[0.8125rem]`), moved from the sites (SLA-3017).
+
+### Breaking
+
+- The sites' `components/ui/AlsoExplore.astro` and `VisitTiming.astro` now live in ui; sites run `rewrite-imports.mjs --delete-local`, then `scripts/platform/migrations/core-markdown.mjs` and `scripts/platform/migrations/promoted-site-files.mjs` (Dark Skies' two `<VisitTiming>` calls get `labelClass="text-sm"`) (SLA-3017).
+
+
+## 0.30.1 (2026-10-07)
+
+- `./editorial`: `StaticProsePage` takes `proseClass`, the variant beside `prose` (default `prose-stone`) and `NotFoundPage` takes `searchBoxClass` (default: the current search-link classes), so a dark theme can pass its own prose variant and input tokens; default output is unchanged (SLA-2989).
+- `./layout`: `ListingShell` takes `contained` (default `true`) and `pagefindIgnore` (default `true`); `false` drops the Container inside `<main>` for a main of full-bleed bands, and keeps a listing's `data-pagefind-body` bands indexed. `mainClass={null}` renders a class-less `<main>`. Default output is unchanged (SLA-2989).
+- `./search`: with `?focus`, `initSearchPage` re-claims input focus every 300 ms for 3 s, stopping at the first pointer or key press, instead of once at 1.7 s and only from `<body>`; the deferred cookie banner moves focus to its own button, which the single reclaim missed. This reaches every site (SLA-2989).
+
 ## 0.30.0 (2026-10-07)
 
 - `./affiliate`: `HotelAffiliateCTA` and `AffiliateComparisonTable` links carry `data-track-affiliate-provider` and `data-track-affiliate-placement` so booking clicks are attributed; both take `provider`, `ComparisonRow` takes a per-row one, and without either the provider is read from the link's host (Booking.com links only; any other host is left unattributed) (SLA-2985).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.30.0",
+  "version": "0.31.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.30.0"
+    "@sarimarcus/content-sites-core": "0.31.0"
   }
 }

package/src/editorial/AlsoExplore.astro

@@ -0,0 +1,37 @@
+---
+/** "Also explore": up to four sibling links under a hairline, at the foot of a hub or listing page. */
+import Icon from '../primitives/Icon.astro';
+
+export interface AlsoExploreItem {
+  href: string;
+  label: string;
+}
+
+interface Props {
+  eyebrow?: string;
+  items: AlsoExploreItem[];
+  class?: string;
+}
+
+const { eyebrow = 'Also explore', items, class: className } = Astro.props;
+
+if (import.meta.env.DEV && items.length > 4) {
+  console.warn(`AlsoExplore: received ${items.length} items, capping at 4.`);
+}
+
+const displayItems = items.slice(0, 4);
+---
+
+{displayItems.length > 0 && (
+  <nav class:list={['mt-12 pt-8 border-t border-border', className]} aria-label={eyebrow}>
+    <p class="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">{eyebrow}</p>
+    <div class="flex flex-wrap gap-x-6 gap-y-2">
+      {displayItems.map((item) => (
+        <a href={item.href} class="inline-flex items-center gap-1.5 text-sm text-foreground hover:text-primary transition-colors">
+          {item.label}
+          <Icon name="arrow-right" class="w-3 h-3" />
+        </a>
+      ))}
+    </div>
+  </nav>
+)}

package/src/editorial/NotFoundPage.astro

@@ -20,9 +20,11 @@ interface Props {
   /** Accessible name of the section links. */
   exploreAriaLabel?: string;
   links: { href: string; label: string }[];
+  /** Classes of the search link; a dark theme passes its own border and background tokens. */
+  searchBoxClass?: string;
 }
 
-const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaLabel, exploreLabel, exploreAriaLabel = 'Explore sections', links } = Astro.props;
+const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaLabel, exploreLabel, exploreAriaLabel = 'Explore sections', links, searchBoxClass = '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' } = Astro.props;
 ---
 
 <main class="relative min-h-[80vh] flex items-center justify-center overflow-hidden bg-muted">
@@ -74,7 +76,7 @@ const { tagline, lede, homeHref, homeLabel, searchHref, searchLabel, searchAriaL
       <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"
+        class={searchBoxClass}
         aria-label={searchAriaLabel}
       >
         <Icon name="search" class="w-4 h-4 text-muted-foreground shrink-0" />

package/src/editorial/StaticProsePage.astro

@@ -18,9 +18,11 @@ interface Props {
   eyebrow?: string;
   /** Closing box under the prose: a short line and secondary buttons. */
   cta?: { text: string; links: CtaLink[] };
+  /** Prose variant beside the base `prose` class; a dark theme passes its own. */
+  proseClass?: string;
 }
 
-const { heading, eyebrow, cta } = Astro.props;
+const { heading, eyebrow, cta, proseClass = 'prose-stone' } = Astro.props;
 ---
 
 <main class="py-16 lg:py-24">
@@ -28,7 +30,7 @@ const { heading, eyebrow, cta } = Astro.props;
     {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">
+    <div class:list={['prose', proseClass, 'max-w-none']}>
       <slot />
     </div>
 

package/src/editorial/VisitTiming.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * "When to Visit": best season, quietest hours and visit duration, each shown only when set. `class` replaces the
+ * default top margin (`mt-12`); `labelClass` sets the slot label size.
+ */
+import Icon from '../primitives/Icon.astro';
+
+export interface VisitTimingData {
+  bestSeason?: string;
+  quietestHours?: string;
+  visitDuration?: string;
+}
+
+interface Props {
+  visitTiming?: VisitTimingData;
+  /** Heading text — override to avoid colliding with nearby "When to…" headings. */
+  title?: string;
+  /** Section id — override when a prose section on the page could slugify to the same value. */
+  id?: string;
+  class?: string;
+  labelClass?: string;
+}
+
+const {
+  visitTiming,
+  title = 'When to Visit',
+  id = 'when-to-visit',
+  class: className = 'mt-12',
+  labelClass = 'text-[0.8125rem]',
+} = Astro.props;
+
+const slots = visitTiming
+  ? [
+      visitTiming.bestSeason
+        ? { icon: 'calendar', label: 'Best season', value: visitTiming.bestSeason }
+        : null,
+      visitTiming.quietestHours
+        ? { icon: 'clock', label: 'Quietest hours', value: visitTiming.quietestHours }
+        : null,
+      visitTiming.visitDuration
+        ? { icon: 'hourglass', label: 'Visit duration', value: visitTiming.visitDuration }
+        : null,
+    ].filter((s): s is { icon: string; label: string; value: string } => s !== null)
+  : [];
+---
+
+{slots.length > 0 && (
+  <section
+    id={id}
+    class:list={['scroll-mt-28', className]}
+    data-guide-section
+  >
+    <h2 class="text-2xl font-display font-semibold text-foreground mb-6 leading-tight">{title}</h2>
+    <div
+      class:list={[
+        'bg-primary/5 border border-primary/15 rounded-xl p-6 grid gap-6',
+        slots.length === 1 && 'grid-cols-1',
+        slots.length === 2 && 'grid-cols-1 sm:grid-cols-2',
+        slots.length === 3 && 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+      ]}
+    >
+      {slots.map((slot) => (
+        <div class="min-w-0">
+          <p class:list={['flex items-center gap-1.5', labelClass, 'uppercase tracking-wider text-muted-foreground mb-1.5 leading-none']}>
+            <Icon name={slot.icon} class="w-3.5 h-3.5 text-primary/60 shrink-0" />
+            {slot.label}
+          </p>
+          <p class="text-base font-medium text-foreground leading-snug tabular-nums">{slot.value}</p>
+        </div>
+      ))}
+    </div>
+  </section>
+)}

package/src/editorial/index.ts

@@ -20,6 +20,10 @@ export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategor
 export { default as InsiderTips } from './InsiderTips.astro';
 export type { InsiderTip, InsiderTipAuthor, InsiderTipKinds, InsiderTipTone } from './types';
 export { default as AuthorStrip } from './AuthorStrip.astro';
+export { default as AlsoExplore } from './AlsoExplore.astro';
+export { default as VisitTiming } from './VisitTiming.astro';
+export type { AlsoExploreItem } from './AlsoExplore.astro';
+export type { VisitTimingData } from './VisitTiming.astro';
 export { default as AnswerBox } from './interludes/AnswerBox.astro';
 export { default as ComparisonTable } from './interludes/ComparisonTable.astro';
 export { default as EvidenceContext } from './interludes/EvidenceContext.astro';

package/src/layout/ListingShell.astro

@@ -1,20 +1,26 @@
 ---
 /**
  * ListingShell — the frame of a listing hub: breadcrumb band, hero, optional full-width bands, <main> with a
- * Container, and trailing bands, all inside one Pagefind-ignore wrapper (listings are not indexed). The route keeps
+ * Container, and trailing bands, all inside one wrapper that is Pagefind-ignored by default (most listings are not
+ * indexed; `pagefindIgnore={false}` keeps a listing's own `data-pagefind-body` bands). The route keeps
  * Layout and passes StructuredData to Layout directly, so its JSON-LD lands in <head>; everything else comes in by slot.
  */
 import BreadcrumbBand from './BreadcrumbBand.astro';
 import Container from './Container.astro';
 
 interface Props {
-  mainClass?: string;
+  /** `null` renders a class-less <main>. */
+  mainClass?: string | null;
+  /** `false` drops the Container inside <main>, for a main made of full-bleed bands that carry their own. */
+  contained?: boolean;
+  /** `false` keeps the page indexable, for a listing whose bands carry `data-pagefind-body` prose. */
+  pagefindIgnore?: boolean;
 }
 
-const { mainClass = 'py-12 lg:py-20' } = Astro.props;
+const { mainClass = 'py-12 lg:py-20', contained = true, pagefindIgnore = true } = Astro.props;
 ---
 
-<div data-pagefind-ignore>
+<div data-pagefind-ignore={pagefindIgnore ? '' : undefined}>
   <BreadcrumbBand ignore={false}>
     <slot name="breadcrumb" />
   </BreadcrumbBand>
@@ -23,9 +29,13 @@ const { mainClass = 'py-12 lg:py-20' } = Astro.props;
   <slot name="before-main" />
 
   <main class={mainClass}>
-    <Container>
+    {contained ? (
+      <Container>
+        <slot />
+      </Container>
+    ) : (
       <slot />
-    </Container>
+    )}
   </main>
 
   <slot name="after-main" />

package/src/search/searchPage.ts

@@ -591,12 +591,22 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
       }
     };
     requestAnimationFrame(claimFocus);
-    // Cookie consent banner may steal focus ~1.5s after load (deferred init).
-    // Reclaim once if the user hasn't moved focus elsewhere.
+    // The deferred cookie banner can steal focus (to its own button, not <body>) up to ~2s after load. Re-claim it
+    // every 300 ms for 3 s, and stop as soon as the user interacts.
     if (initial.focus) {
-      window.setTimeout(() => {
-        if (document.activeElement === document.body) claimFocus();
-      }, 1700);
+      let tries = 0;
+      const stop = () => {
+        window.clearInterval(reclaim);
+        document.removeEventListener('pointerdown', stop, true);
+        document.removeEventListener('keydown', stop, true);
+      };
+      const reclaim = window.setInterval(() => {
+        tries += 1;
+        if (tries > 10) stop();
+        else claimFocus();
+      }, 300);
+      document.addEventListener('pointerdown', stop, true);
+      document.addEventListener('keydown', stop, true);
     }
   }
 }