create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/sections/SearchResults/SearchResults.tsx

@@ -0,0 +1,112 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { ProductCard } from '../../components/commerce/ProductCard'
+import { ArticleCard } from '../../components/content/ArticleCard'
+import { Tabs, type TabItem } from '../../components/base/Tabs'
+import { SearchField } from '../../components/forms/SearchField'
+import { Pagination } from '../../components/navigation/Pagination'
+import { RecoveryLinks } from '../../components/navigation/RecoveryLinks'
+import { Select } from '../../components/base/Select'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { NovaLink, SearchResults, SortOption } from '@tanqory/theme-kit'
+import { Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { searchResultsSchema } from './schema'
+
+export type SearchResultsSettings = SettingsOf<typeof searchResultsSchema>
+export interface SearchResultsSectionProps extends SearchResultsSettings {
+  query?: string
+  results?: SearchResults | null
+  /** noResultsCollections, resolved to real collections (unknown handles drop out). */
+  suggestions?: readonly NovaLink[]
+  sortOptions?: readonly SortOption[]
+  sort?: string
+  onSort?: (id: string) => void
+  searchUrl?: string
+  onSearch?: (query: string) => void
+  /** Product result pages (host-paginated). */
+  page?: number
+  pages?: number
+  pageHref?: (page: number) => string
+}
+
+type ResultType = 'products' | 'articles' | 'pages'
+
+export function SearchResultsSection(props: SearchResultsSectionProps): JSX.Element {
+  const { emptyHeading, emptySub, resultTypes, showTabs, showSort, columns, sectionWidth, headerSize, query = '', results, suggestions = [], sortOptions = [], sort, onSort, searchUrl, onSearch, page = 1, pages = 1, pageHref } = props
+  const { strings } = useNova()
+  const q = query.trim()
+  const allowed: ResultType[] = resultTypes === 'all' ? ['products', 'articles', 'pages'] : resultTypes === 'products' ? ['products'] : ['products', 'articles']
+  const types = allowed.filter((t) => (results?.[t]?.length ?? 0) > 0)
+  const label: Record<ResultType, string> = { products: strings.products, articles: strings.articles, pages: strings.pages }
+
+  const content = (t: ResultType) =>
+    t === 'products' ? (
+      <>
+        <ul className="nv-search__grid" data-columns={columns}>
+          {results!.products.map((p) => (
+            <li key={p.id}>
+              <ProductCard product={p} showSwatches={false} titleAs="h3" />
+            </li>
+          ))}
+        </ul>
+        {pages > 1 && pageHref && <Pagination page={page} pages={pages} href={pageHref} />}
+      </>
+    ) : t === 'articles' ? (
+      <ul className="nv-search__grid" data-columns="3" data-kind="articles">
+        {results!.articles.map((a) => (
+          <li key={a.id}>
+            <ArticleCard article={a} showExcerpt />
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <ul className="nv-search__pages">
+        {results!.pages.map((p) => (
+          <li key={p.url}>
+            <a href={p.url}><bdi>{p.title}</bdi></a>
+            {p.excerpt && <p><bdi>{p.excerpt}</bdi></p>}
+          </li>
+        ))}
+      </ul>
+    )
+
+  const sortControl = showSort && sortOptions.length > 0 && types.includes('products') && (
+    <Select className="nv-search__sort" aria-label={strings.sortBy} value={sort ?? sortOptions[0].id} onChange={(e) => onSort?.(e.target.value)} options={sortOptions.map((o) => ({ value: o.id, label: o.label }))} />
+  )
+  const tabs = showTabs && resultTypes !== 'products' && types.length > 1
+
+  return (
+    <Shell props={props} type="search-results" width={sectionWidth} className="nv-search" data-state={!q ? 'empty' : types.length ? 'results' : 'none'}>
+      <h1 className="nv-visually-hidden">{q ? fmt(strings.searchResultsFor, { query: q }) : strings.search}</h1>
+      <SearchField action={searchUrl} defaultValue={q} autoFocus={!q} onSearch={onSearch} />
+      {!q ? (
+        <div className="nv-search__message">
+          <h2 className="nv-search__title" data-size={headerSize}>{emptyHeading}</h2>
+          {emptySub.trim() && <p>{emptySub}</p>}
+        </div>
+      ) : !types.length ? (
+        <div className="nv-search__message" data-align="center">
+          <h2 className="nv-search__title" data-size={headerSize}>{fmt(strings.noResultsFor, { query: q })}</h2>
+          <p>{strings.spellingTip}</p>
+          <RecoveryLinks links={suggestions} label={strings.suggestedLinks} />
+        </div>
+      ) : (
+        <div className="nv-search__results" data-sort={sortControl ? '' : undefined}>
+          {sortControl}
+          {tabs ? (
+            <Tabs label={strings.resultTypesLabel} items={types.map((t): TabItem => ({ id: t, label: label[t], count: results![t].length, content: content(t) }))} />
+          ) : (
+            types.map((t) => (
+              <div key={t} className="nv-search__group">
+                {types.length > 1 && <h2 className="nv-search__group-title">{fmt(strings.tabCount, { label: label[t], count: results![t].length })}</h2>}
+                {content(t)}
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </Shell>
+  )
+}

package/templates/nova/src/sections/SearchResults/index.ts

@@ -0,0 +1,26 @@
+import { collectionLinksFor, defineSection, resolveSettings } from '@tanqory/theme-kit'
+
+/** The search page URL for a sort id; relevance is the bare query. */
+const searchSortHref = (q: string, sort: string): string => `/search?q=${encodeURIComponent(q.trim())}${sort && sort !== 'relevance' ? `&sort=${encodeURIComponent(sort)}` : ''}`
+import { SearchResultsSection } from './SearchResults'
+import { presets } from './presets'
+import { searchResultsSchema } from './schema'
+
+export default defineSection({
+  id: 'search-results',
+  schema: searchResultsSchema,
+  component: SearchResultsSection,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Search results',
+  description: 'Products matching what the customer searched for.',
+  icon: '⌕',
+  requiresContext: ['search'],
+  presets,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(searchResultsSchema, node.settings)
+      return { ...r.settings, query: store.searchQuery ?? '', results: store.searchResults ?? null, sortOptions: store.searchSortOptions ?? [], sort: store.searchSort, onSort: (id: string) => actions.navigate(searchSortHref(store.searchQuery ?? '', id)), suggestions: collectionLinksFor(store, r.settings.noResultsCollections),
+      onSearch: actions.search.go,
+    }
+  },
+})

package/templates/nova/src/sections/SearchResults/presets.ts

@@ -0,0 +1,8 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default results page
+  {"name": "search-standard", "label": "Search", "settings": {"resultTypes": "all", "showTabs": true, "columns": "4"}, "blocks": []},
+  // Catalogues without blog
+  {"name": "search-products", "label": "Products only", "settings": {"resultTypes": "products", "showTabs": false}, "blocks": []},
+]

package/templates/nova/src/sections/SearchResults/schema.ts

@@ -0,0 +1,30 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 02 search-results (EXISTING · CHANGED) — the submitted-query page
+ * (SearchModal handles typing). The query stays in the field; tabs show
+ * counts and only types with results; results reuse ProductCard (12C) and
+ * the article card (12E), pages as text rows. No results → a spelling tip
+ * and the merchant's chosen collections — never invented suggestions.
+ * The shared heading is overridden by the query header.
+ */
+export const searchResultsSchema = defineSchema(
+  { kind: 'section', name: 'search-results', family: '12G' },
+  {
+    emptyHeading: field.text('Find what you love'),
+    emptySub: field.text('Type a query above to find products.'),
+    resultTypes: field.select(['all', 'products', 'products,articles'], 'all'),
+    showTabs: field.boolean(true),
+    showSort: field.boolean(true),
+    columns: field.select(['3', '4'], '4'),
+    noResultsCollections: field.text(''),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    spacingTop: shared.spacingTop('medium'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('medium'),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/ShopTheLook/ShopTheLook.tsx

@@ -0,0 +1,112 @@
+import { useRef, useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { Hotspot } from '../../components/commerce/Hotspot'
+import { LookItem } from '../../components/commerce/LookItem'
+import { formatMoney } from '../../components/commerce/money'
+import type { HotspotInstance } from './blocks/Hotspot'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { useScrollRegion } from '../../styles/scroll'
+import type { NovaImage, Product } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/trust.css'
+import { shopTheLookSchema } from './schema'
+
+export type ShopTheLookSettings = SettingsOf<typeof shopTheLookSchema>
+export interface ShopTheLookProps extends Omit<ShopTheLookSettings, 'image'> {
+  image?: NovaImage | null
+  hotspots?: HotspotInstance[]
+  /** Adds one product (multi-variant products: the host opens a variant sheet first). */
+  onAdd?: (product: Product) => void
+  /** Adds the in-stock products; the section reports what was left out. */
+  /** Resolves one result per product; a `false` is an add that failed (its reason is shown elsewhere). */
+  onAddAll?: (products: Product[]) => Promise<unknown> | void
+  /** The hotspot shown active on first render (canvas: "hotspot 2 active"). */
+  defaultActive?: number | null
+}
+
+const PHONE = '(max-width: 639.98px)'
+
+export function ShopTheLook(props: ShopTheLookProps): JSX.Element | null {
+  const { image, mediaPosition, showHotspots, productList, showAddAll, sectionWidth, heading, eyebrow, description, headerSize, hotspots = [], onAdd, onAddAll, defaultActive = null } = props
+  const { strings, locale } = useNova()
+  const [active, setActive] = useState<number | null>(defaultActive)
+  const [message, setMessage] = useState('')
+  const rows = useRef<(HTMLLIElement | null)[]>([])
+  const listRef = useRef<HTMLOListElement>(null)
+  // Missing / unpublished products drop out and the numbering recompacts.
+  const items = hotspots.filter((h): h is HotspotInstance & { product: Product } => Boolean(h.product)).slice(0, 6)
+  const region = useScrollRegion(listRef, strings.productsInLook, [items.length], { list: true })
+  if (!image) return <EmptySection props={props} type="shop-the-look" width={sectionWidth} title={strings.editorLookTitle} hint={strings.editorLookHint} />
+
+  const phone = () => typeof window !== 'undefined' && Boolean(window.matchMedia?.(PHONE).matches)
+  const activate = (n: number) => {
+    setActive(n)
+    // At 390 a hotspot scrolls the product carousel instead of opening a card.
+    if (phone()) rows.current[n - 1]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+  }
+  const available = items.filter((h) => h.product.available).map((h) => h.product)
+  const soldOut = items.filter((h) => !h.product.available).map((h) => h.product)
+  const total = available.length ? formatMoney({ amount: available.reduce((s, p) => s + p.priceRange.min.amount, 0), currencyCode: available[0].priceRange.min.currencyCode }, locale) : ''
+  const addAll = async () => {
+    const results = await onAddAll?.(available)
+    // An add the store refused already toasted why; never report the look as added when it was not.
+    if (Array.isArray(results) && results.some((r) => r === false)) {
+      setMessage('')
+      return
+    }
+    setMessage(
+      soldOut.length
+        ? fmt(strings.lookAdded, { added: available.length, total: items.length, names: soldOut.map((p) => p.title).join(', ') })
+        : fmt(strings.lookAllAdded, { count: available.length }),
+    )
+  }
+
+  return (
+    <Shell props={props} type="shop-the-look" width={sectionWidth} className="nv-look" data-media={mediaPosition}>
+      <div className="nv-look__grid">
+        <div className="nv-look__media">
+          <img src={image.src} srcSet={image.srcSet} alt={image.alt ?? ''} width={image.width} height={image.height} loading="lazy" decoding="async" />
+          {showHotspots &&
+            items.map((h, i) => (
+              <Hotspot key={i} index={i + 1} product={h.product} x={h.settings.x} y={h.settings.y} active={active === i + 1} card={!phone()} onActivate={() => activate(i + 1)} onClose={() => setActive(null)} />
+            ))}
+        </div>
+        <div className="nv-look__panel">
+          <SectionHead eyebrow={eyebrow} heading={heading} description={description} headerSize={headerSize} />
+          {items.length > 0 && (
+            <ol ref={listRef} className="nv-look__list" data-variant={productList} aria-label={strings.productsInLook} {...region}>
+              {items.map((h, i) => (
+                <LookItem
+                  key={i}
+                  ref={(el) => {
+                    rows.current[i] = el
+                  }}
+                  index={i + 1}
+                  product={h.product}
+                  variant={productList}
+                  active={active === i + 1}
+                  onActivate={() => setActive(i + 1)}
+                  onAdd={onAdd}
+                />
+              ))}
+            </ol>
+          )}
+          {showAddAll && available.length > 0 && onAddAll && (
+            <div className="nv-look__all">
+              <p className="nv-look__total nv-tabular">{fmt(strings.lookSummary, { count: available.length, total })}</p>
+              <Button onClick={addAll}>
+                {strings.addAllToCart}
+                <span className="nv-look__all-total nv-tabular" aria-hidden> · {total}</span>
+              </Button>
+            </div>
+          )}
+          <p className="nv-look__message" aria-live="polite">{message}</p>
+        </div>
+      </div>
+    </Shell>
+  )
+}

package/templates/nova/src/sections/ShopTheLook/blocks/Hotspot.tsx

@@ -0,0 +1,22 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { Product } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/**
+ * 12F · hotspot block (shop-the-look) — ties a product to a point on the
+ * look image. x / y are percent sliders: the fallback for a point picker
+ * (NEEDS NEW FIELD TYPE). Skipped when the product is missing or unpublished.
+ */
+export const hotspotSchema = defineSchema(
+  { kind: 'block', name: 'hotspot', family: '12F', parents: ['shop-the-look'], title: 'Hotspot', description: 'One product pinned to a point on the image.', icon: '⌖' },
+  {
+    product: field.resource('product'),
+    x: field.range(50, 0, 100, 1),
+    y: field.range(50, 0, 100, 1),
+  },
+)
+export type HotspotSettings = SettingsOf<typeof hotspotSchema>
+export interface HotspotInstance {
+  settings: HotspotSettings
+  product?: Product | null
+}

package/templates/nova/src/sections/ShopTheLook/index.ts

@@ -0,0 +1,33 @@
+import { defineSection, imageFor, Product, productFor, resolveSettings } from '@tanqory/theme-kit'
+import { addProduct, blocksOf } from '../data'
+import { ShopTheLook } from './ShopTheLook'
+import { hotspotSchema } from './blocks/Hotspot'
+import { presets } from './presets'
+import { shopTheLookSchema } from './schema'
+
+export default defineSection({
+  id: 'shop-the-look',
+  schema: shopTheLookSchema,
+  blocks: [hotspotSchema],
+  component: ShopTheLook,
+  category: 'trust',
+  zone: 'main',
+  title: 'Shop the look',
+  description: 'A lifestyle image with hotspots that link to the products in it.',
+  icon: '⌖',
+  presets,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(shopTheLookSchema, node.settings)
+      const issues = [...r.issues]
+      const hotspots = blocksOf(node, 'hotspot').map((b) => {
+        const br = resolveSettings(hotspotSchema, b.settings)
+        issues.push(...br.issues)
+        return { settings: br.settings, product: productFor(store, br.handles.product).product }
+      })
+      const { image: _handle, ...settings } = r.settings as typeof r.settings & { image?: string }
+      return { ...settings, image: imageFor(store, r.handles.image), hotspots,
+      onAdd: (product: Product) => addProduct(actions, product),
+      onAddAll: (products: Product[]) => Promise.all(products.map((p) => addProduct(actions, p))),
+    }
+  },
+})

package/templates/nova/src/sections/ShopTheLook/presets.ts

@@ -0,0 +1,8 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Shoppable lifestyle image
+  {"name": "look-standard", "label": "Shop the look", "settings": {"mediaPosition": "start", "productList": "cards", "showAddAll": true}, "blocks": []},
+  // Inside editorial pages
+  {"name": "look-compact", "label": "Quick look", "settings": {"mediaPosition": "end", "productList": "compact", "showAddAll": false}, "blocks": []},
+]

package/templates/nova/src/sections/ShopTheLook/schema.ts

@@ -0,0 +1,31 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12F · 06 shop-the-look (NEW) — one styled photo made shoppable: numbered
+ * hotspots and the same products as a list (the accessible alternative).
+ * Hotspot and row are linked. Add all adds the in-stock items; sold-out
+ * products stay in the list, muted, and are left out. At 390 the image
+ * comes first and the list is a carousel the hotspots scroll.
+ */
+export const shopTheLookSchema = defineSchema(
+  { kind: 'section', name: 'shop-the-look', family: '12F', blocks: ['hotspot'] },
+  {
+    image: field.resource('image'),
+    mediaPosition: field.select(['start', 'end'], 'start'),
+    showHotspots: field.boolean(true),
+    productList: field.select(['cards', 'compact'], 'cards'),
+    showAddAll: field.boolean(true),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    description: shared.description(),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/Slideshow/Slideshow.tsx

@@ -0,0 +1,199 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useCallback, useEffect, useId, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { CarouselControls } from '../../components/content/CarouselControls'
+import { Slide, type SlideInstance } from './blocks/Slide'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { usePageHidden, useReducedMotion } from '../../styles/motion'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/promotion.css'
+import { slideshowSchema } from './schema'
+
+export type SlideshowSettings = SettingsOf<typeof slideshowSchema>
+export interface SlideshowProps extends SlideshowSettings {
+  slides?: SlideInstance[]
+  /** The first section on the page: slide 1 loads eagerly. */
+  priority?: boolean
+  /** Start on a slide — stories and tests. */
+  initialIndex?: number
+}
+
+const MAX_SLIDES = 6
+/** A video slide waits for its loop, at most this long. */
+const VIDEO_MAX_MS = 12_000
+const SIDE = { 'bottom-right': 'right', 'bottom-left': 'left', 'bottom-center': 'center' } as const
+
+export function Slideshow(props: SlideshowProps): JSX.Element | null {
+  const { slideHeight, autoplay, interval, controls, transition, controlsPosition, sectionWidth, headerSize, slides: all = [], priority = true, initialIndex = 0 } = props
+  const { mode, strings, dir } = useNova()
+  const slides = all.slice(0, MAX_SLIDES)
+  const count = slides.length
+  const many = count >= 2
+  const root = useRef<HTMLElement>(null)
+  const baseId = useId()
+  const reduced = useReducedMotion(root)
+  const hidden = usePageHidden()
+  const [index, setIndex] = useState(() => Math.min(Math.max(0, initialIndex), Math.max(0, count - 1)))
+  const [userPaused, setUserPaused] = useState(false)
+  const [stopped, setStopped] = useState(false)
+  const [holding, setHolding] = useState(false)
+  const [cycle, setCycle] = useState(0)
+  const swipe = useRef<{ x: number; y: number } | null>(null)
+
+  useEffect(() => setIndex((i) => (i >= count ? 0 : i)), [count])
+
+  const canAutoplay = autoplay && many && !reduced
+  const running = canAutoplay && !userPaused && !stopped
+  const ticking = running && !holding && !hidden
+  const ms = Number.parseInt(interval, 10) * 1000
+  const current = slides[index]
+  const delay = current?.video ? VIDEO_MAX_MS : ms
+
+  const advance = useCallback(() => {
+    setIndex((i) => {
+      const next = (i + 1) % count
+      // Stop after one full loop: back on the first slide, autoplay ends.
+      if (next === 0) setStopped(true)
+      return next
+    })
+    setCycle((c) => c + 1)
+  }, [count])
+
+  useEffect(() => {
+    if (!ticking) return
+    const id = window.setTimeout(advance, delay)
+    return () => window.clearTimeout(id)
+  }, [ticking, index, delay, advance, cycle])
+
+  // Restart the progress fill when autoplay resumes.
+  useEffect(() => {
+    if (ticking) setCycle((c) => c + 1)
+  }, [ticking])
+
+  if (!count) {
+    return mode === 'editor' ? (
+      <section {...sectionRootProps(props, 'slideshow')} className="nv-slideshow">
+        <div className="nv-promo-container" data-width={sectionWidth}>
+          <EditorFrame section="slideshow" title={strings.editorAddSlides} hint={strings.editorAddSlidesHint} />
+        </div>
+      </section>
+    ) : null
+  }
+
+  const go = (i: number) => {
+    setIndex(((i % count) + count) % count)
+    setCycle((c) => c + 1)
+  }
+  const side = SIDE[controlsPosition]
+
+  // One slide: a hero — no controls, no autoplay, no carousel semantics.
+  if (!many) {
+    return (
+      <section {...sectionRootProps(props, 'slideshow')} className="nv-slideshow" data-size={slideHeight} data-single="">
+        <div className="nv-promo-container" data-width={sectionWidth}>
+          <Slide {...slides[0]} headerSize={headerSize} priority={priority} />
+        </div>
+      </section>
+    )
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
+    if ((e.target as HTMLElement).closest('input, textarea, select')) return
+    const forward = (e.key === 'ArrowRight') !== (dir === 'rtl')
+    e.preventDefault()
+    go(index + (forward ? 1 : -1))
+  }
+  const onPointerDown = (e: PointerEvent) => {
+    swipe.current = { x: e.clientX, y: e.clientY }
+    if (e.pointerType === 'touch') setHolding(true)
+  }
+  const onPointerUp = (e: PointerEvent) => {
+    const s = swipe.current
+    swipe.current = null
+    if (!s) return
+    const dx = e.clientX - s.x
+    if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(e.clientY - s.y)) return
+    const forward = (dx < 0) !== (dir === 'rtl')
+    go(index + (forward ? 1 : -1))
+  }
+  const ids = slides.map((_, i) => `${baseId}-slide-${i}`)
+  const controlsEl = (
+    <CarouselControls
+      className="nv-slideshow__controls"
+      count={count}
+      index={index}
+      variant={controls}
+      onGo={go}
+      autoplay={canAutoplay}
+      paused={!running}
+      holding={running && !ticking}
+      cycle={cycle}
+      interval={delay}
+      slideIds={ids}
+      // A slide without media has no scrim: keep the pill there.
+      onScrim={Boolean(current?.image || current?.video)}
+      onTogglePause={() => {
+        if (running) setUserPaused(true)
+        else {
+          setUserPaused(false)
+          setStopped(false)
+        }
+      }}
+    />
+  )
+
+  return (
+    <section
+      {...sectionRootProps(props, 'slideshow')}
+      ref={root}
+      className="nv-slideshow"
+      data-size={slideHeight}
+      data-transition={reduced ? 'fade' : transition}
+      data-controls={controls}
+      data-controls-position={controlsPosition}
+      aria-roledescription="carousel"
+      aria-label={strings.slideshow}
+      onKeyDown={onKeyDown}
+      onMouseEnter={() => setHolding(true)}
+      onMouseLeave={() => setHolding(false)}
+      onFocus={() => setHolding(true)}
+      onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node) && setHolding(false)}
+      onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+    >
+      <div className="nv-promo-container" data-width={sectionWidth}>
+        <div className="nv-slideshow__viewport">
+          <div className={sxJoin("nv-slideshow__track", sx({ '--nv-slide-index': index } as CSSProperties))} aria-live={ticking ? 'off' : 'polite'}>
+            {slides.map((s, i) => {
+              const active = i === index
+              const align = s.settings.contentAlignment
+              // Controls never overlap copy: reserve their row when they share the copy's side.
+              const reserve = s.settings.contentPosition === 'bottom' && (side === 'center' || align === 'center' || side === align)
+              return (
+                <div
+                  key={i}
+                  id={ids[i]}
+                  className="nv-slideshow__slide"
+                  role="group"
+                  aria-roledescription="slide"
+                  aria-label={fmt(strings.slideOf, { index: i + 1, count })}
+                  aria-hidden={active ? undefined : true}
+                  data-active={active ? '' : undefined}
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  {...({ inert: active ? undefined : '' } as any)}
+                >
+                  <Slide {...s} headerSize={headerSize} priority={priority && i === 0} paused={!active || !running} onLoop={active && ticking ? advance : undefined} reserveControls={reserve} />
+                </div>
+              )
+            })}
+          </div>
+          {controlsEl}
+        </div>
+      </div>
+    </section>
+  )
+}