create-tanqory-theme 0.0.0-stage → 0.2.3

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

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react'
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { HeroCopy, heroHasBody, scrimAlpha, type HeroHeaderSize } from '../../../components/content/HeroCopy'
+import { HeroFrame } from '../../../components/content/HeroFrame'
+import { HeroMedia } from '../../../components/content/HeroMedia'
+import { EditorChip } from '../../../components/states/EditorFrame'
+import { useNova } from '../../../styles/NovaProvider'
+import type { NovaImage, NovaVideo } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/**
+ * 12B · slide block (slideshow) — one image-background hero: its own anchor,
+ * width and overlay; the floor is enforced. 1–6 per slideshow, 3 recommended.
+ * No image → --color-bg-muted with ink text (the editor warns).
+ * Optional video: the image is its poster; the slide timer waits for one loop.
+ */
+export const slideSchema = defineSchema(
+  { kind: 'block', name: 'slide', family: '12B', parents: ['slideshow'], title: 'Slide', description: 'One slide in a slideshow.', icon: '▭' },
+  {
+    image: field.resource('image'),
+    mobileImage: field.resource('image'),
+    video: field.resource('video'),
+    eyebrow: field.text(''),
+    heading: field.text('New slide'),
+    body: field.richtext(''),
+    buttonLabel: field.text(''),
+    buttonLink: field.url(''),
+    secondaryLabel: field.text(''),
+    secondaryLink: field.url(''),
+    contentPosition: field.select(['top', 'middle', 'bottom'], 'bottom'),
+    contentAlignment: field.select(['left', 'center', 'right'], 'left'),
+    textWidth: field.select(['narrow', 'medium', 'wide'], 'narrow'),
+    overlay: field.select(['none', 'light', 'medium', 'strong'], 'medium'),
+  },
+)
+
+export type SlideSettings = SettingsOf<typeof slideSchema>
+
+/** A resolved slide: settings + the media the adapter resolved. */
+export interface SlideInstance {
+  settings: SlideSettings
+  image?: NovaImage | null
+  mobileImage?: NovaImage | null
+  video?: NovaVideo | null
+}
+
+export interface SlideProps extends SlideInstance {
+  headerSize?: HeroHeaderSize
+  priority?: boolean
+  /** The slideshow's one pause button drives the video too. */
+  paused?: boolean
+  onLoop?: () => void
+  /** Keep the copy clear of the control cluster. */
+  reserveControls?: boolean
+  /** Extra layer inside the frame (the slideshow's controls). */
+  children?: ReactNode
+}
+
+export function Slide({ settings, image, mobileImage, video, headerSize = 'medium', priority, paused, onLoop, reserveControls, children }: SlideProps): JSX.Element {
+  const { mode } = useNova()
+  const s = settings
+  const hasMedia = Boolean(image || video)
+  const alpha = hasMedia ? Math.max(scrimAlpha(s.overlay, heroHasBody(s.eyebrow, s.body)), video ? scrimAlpha('none', true) : 0) : 0
+  return (
+    <HeroFrame
+      className="nv-slide"
+      position={s.contentPosition}
+      align={s.contentAlignment}
+      scrim={alpha}
+      hasVideo={Boolean(video)}
+      empty={!hasMedia}
+      reserveControls={reserveControls}
+      media={hasMedia && <HeroMedia image={image} mobileImage={mobileImage} video={video} priority={priority} control={false} paused={paused} onLoop={onLoop} />}
+      overlay={children}
+    >
+      {!hasMedia && mode === 'editor' && <EditorChip section="slide" />}
+      <HeroCopy
+        className="nv-media-frame__copy"
+        eyebrow={s.eyebrow}
+        heading={s.heading}
+        body={s.body}
+        primary={{ label: s.buttonLabel, link: s.buttonLink }}
+        secondary={{ label: s.secondaryLabel, link: s.secondaryLink }}
+        secondaryStyle={hasMedia ? 'responsive' : 'link'}
+        blockOnPhone
+        headerSize={headerSize}
+        align={s.contentAlignment}
+        textWidth={s.textWidth}
+        onMedia={hasMedia}
+      />
+    </HeroFrame>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { defineSection, imageFor, resolveSettings, videoFor } from '@tanqory/theme-kit'
+import { Slideshow } from './Slideshow'
+import { SlideInstance, slideSchema } from './blocks/Slide'
+import { presets } from './presets'
+import { slideshowSchema } from './schema'
+
+export default defineSection({
+  id: 'slideshow',
+  schema: slideshowSchema,
+  blocks: [slideSchema],
+  component: Slideshow,
+  category: 'layout',
+  zone: 'main',
+  title: 'Slideshow',
+  description: 'Up to 5 rotating banners.',
+  icon: '▷',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(slideshowSchema, node.settings)
+      const issues = [...r.issues]
+      const slides: SlideInstance[] = (node.blocks ?? [])
+        .filter((b) => b.type === 'slide')
+        .map((b) => {
+          const sr = resolveSettings(slideSchema, b.settings)
+          issues.push(...sr.issues)
+          return { settings: sr.settings, image: imageFor(store, sr.handles.image), mobileImage: imageFor(store, sr.handles.mobileImage), video: videoFor(store, sr.handles.video) }
+        })
+      return { ...r.settings, slides }
+  },
+})

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

@@ -0,0 +1,10 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Two to four current campaigns
+  {"name": "slideshow-campaign", "label": "Campaign rotation", "settings": {"slideHeight": "medium", "autoplay": true, "interval": "6s", "controls": "both", "transition": "fade"}, "blocks": [{"type": "slide", "settings": {"heading": "Sea Salt, a new glaze", "contentPosition": "bottom", "overlay": "medium"}}, {"type": "slide", "settings": {"heading": "Linen for autumn", "contentPosition": "bottom", "overlay": "medium"}}, {"type": "slide", "settings": {"heading": "Gifts under $50", "contentPosition": "bottom", "overlay": "medium"}}]},
+  // Shopper-driven editorial sequence
+  {"name": "slideshow-lookbook", "label": "Lookbook", "settings": {"slideHeight": "fullscreen", "autoplay": false, "controls": "arrows+counter", "transition": "slide"}, "blocks": [{"type": "slide", "settings": {"heading": "Morning", "contentPosition": "bottom", "overlay": "medium"}}, {"type": "slide", "settings": {"heading": "Afternoon", "contentPosition": "bottom", "overlay": "medium"}}, {"type": "slide", "settings": {"heading": "Evening", "contentPosition": "bottom", "overlay": "medium"}}, {"type": "slide", "settings": {"heading": "Night", "contentPosition": "bottom", "overlay": "medium"}}]},
+  // Small promo strip under the header
+  {"name": "slideshow-compact", "label": "Compact", "settings": {"slideHeight": "small", "autoplay": true, "interval": "4s", "controls": "dots"}, "blocks": [{"type": "slide", "settings": {"heading": "Free shipping over $120", "contentPosition": "middle", "overlay": "medium"}}, {"type": "slide", "settings": {"heading": "New: Sea Salt glaze", "contentPosition": "middle", "overlay": "medium"}}]},
+]

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

@@ -0,0 +1,36 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12B · 02 slideshow — two to five campaign slides, each a full
+ * image-background hero, with ONE quiet control cluster (pause · progress ·
+ * count · previous / next).
+ *
+ *   autoplay   never runs without a visible pause button; pauses on hover,
+ *              focus, touch and a hidden tab; off under reduced motion;
+ *              stops after one full loop. Resumes only after leaving.
+ *   controls   both · arrows+counter · dots · none (pause still shown)
+ *   1 slide    renders as a hero — no controls, no autoplay
+ *   keyboard   ← → move slides while focus is inside (mirrored in RTL)
+ *   phone      swipe; arrows drop; controls sit in a row under the copy
+ */
+export const slideshowSchema = defineSchema(
+  { kind: 'section', name: 'slideshow', family: '12B', blocks: ['slide'] },
+  {
+    slideHeight: field.select(['small', 'medium', 'large', 'fullscreen'], 'medium'),
+    autoplay: field.boolean(true),
+    interval: field.select(['4s', '6s', '8s'], '6s'),
+    controls: field.select(['both', 'arrows+counter', 'dots', 'none'], 'both'),
+    transition: field.select(['fade', 'slide'], 'fade'),
+    controlsPosition: field.select(['bottom-right', 'bottom-left', 'bottom-center'], 'bottom-right'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('full'),
+    spacingTop: shared.spacingTop('none'),
+    spacingBottom: shared.spacingBottom('none'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('medium'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { StoreCard } from '../../components/content/StoreCard'
+import { Input } from '../../components/base/Input'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { StoreLocation } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { storeLocatorSchema } from './schema'
+
+export type StoreLocatorSettings = SettingsOf<typeof storeLocatorSchema>
+export interface StoreLocatorProps extends StoreLocatorSettings {
+  locations?: StoreLocation[]
+}
+
+/** Search appears from this many locations. */
+export const SEARCH_FROM = 4
+
+export function StoreLocator(props: StoreLocatorProps): JSX.Element | null {
+  const { columns, showHours, showPhone, showImage, showSearch, showCount, sectionWidth, contentAlignment, heading, eyebrow, description, headerSize, locations = [] } = props
+  const { strings, locale } = useNova()
+  const [query, setQuery] = useState('')
+  if (!locations.length) return <EmptySection props={props} type="store-locator" width={sectionWidth} title={strings.editorAddLocations} hint={strings.editorAddLocationsHint} />
+  const q = query.trim().toLowerCase()
+  const list = q ? locations.filter((l) => [l.name, ...l.address].join(' ').toLowerCase().includes(q)) : locations
+  const nf = new Intl.NumberFormat(locale)
+  const count = list.length === 1 ? strings.storesOne : fmt(strings.storesMany, { count: nf.format(list.length) })
+  const search = showSearch && locations.length >= SEARCH_FROM
+  // LocalBusiness from real fields only: no hours or coordinates are invented.
+  const ld = locations.map((l) => ({ '@context': 'https://schema.org', '@type': 'LocalBusiness', name: l.name, address: l.address.join(', '), ...(l.phone ? { telephone: l.phone } : {}) }))
+  return (
+    <Shell props={props} type="store-locator" width={sectionWidth} className="nv-stores">
+      <SectionHead eyebrow={eyebrow} heading={heading} description={description} headerSize={headerSize} align={contentAlignment} />
+      {(search || showCount) && (
+        <div className="nv-stores__tools">
+          {search && <Input type="search" size="lg" value={query} onChange={(e) => setQuery(e.target.value)} placeholder={strings.searchStores} aria-label={strings.searchStores} />}
+          {showCount && (
+            <p className="nv-stores__count" aria-live="polite">
+              {count}
+            </p>
+          )}
+        </div>
+      )}
+      {list.length ? (
+        <ul className="nv-stores__list" data-columns={columns}>
+          {list.map((l) => (
+            <li key={l.id}>
+              <StoreCard location={l} showHours={showHours} showPhone={showPhone} showImage={showImage} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="nv-stores__none">
+          {fmt(strings.noStoresMatch, { query: query.trim() })}{' '}
+          <button type="button" onClick={() => setQuery('')}>
+            {strings.clear}
+          </button>
+        </p>
+      )}
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld).replace(/</g, '\\u003c') }} />
+    </Shell>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { StoreLocator } from './StoreLocator'
+import { presets } from './presets'
+import { storeLocatorSchema } from './schema'
+
+export default defineSection({
+  id: 'store-locator',
+  schema: storeLocatorSchema,
+  component: StoreLocator,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Store locator',
+  description: 'Your store addresses and opening hours.',
+  icon: 'pin',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(storeLocatorSchema, node.settings)
+      return { ...r.settings, locations: store.locations ?? [] }
+  },
+})

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

@@ -0,0 +1,6 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Physical stores today
+  {"name": "stores-list", "label": "Store list", "settings": {"columns": "2", "showSearch": true, "showMap": false}, "blocks": []},
+]

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

@@ -0,0 +1,34 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 05 store-locator (EXISTING) — today: a searchable list with address,
+ * phone (tel:) and "Get directions" (the device's maps app, by address). No
+ * embedded map, hours or open-now until location data has coordinates and
+ * hours (DATA REQUIREMENT). Search (≥ 4 locations) filters by city or
+ * postcode text; the count updates. LocalBusiness data from real fields.
+ */
+export const storeLocatorSchema = defineSchema(
+  { kind: 'section', name: 'store-locator', family: '12G' },
+  {
+    columns: field.select(['2', '3'], '2'),
+    showHours: field.boolean(true),
+    showPhone: field.boolean(true),
+    showImage: field.boolean(false),
+    showSearch: field.boolean(true),
+    showCount: field.boolean(true),
+    showMap: field.boolean(false),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentAlignment: shared.contentAlignment('left'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    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'),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,74 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import type { CSSProperties } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { RichText } from '../../components/content/RichText'
+import { SectionHead } from '../../components/content/SectionHead'
+import { initials, type PersonInstance } from './blocks/Person'
+import { useNova } from '../../styles/NovaProvider'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/editorial.css'
+import { teamFoundersSchema } from './schema'
+
+export type TeamFoundersSettings = SettingsOf<typeof teamFoundersSchema>
+export interface TeamFoundersProps extends TeamFoundersSettings {
+  people?: PersonInstance[]
+}
+
+function Portrait({ p, shape }: { p: PersonInstance; shape: string }) {
+  return (
+    <div className="nv-person__portrait" data-shape={shape}>
+      {p.image ? <img src={p.image.src} alt={p.image.alt ?? p.settings.name} width={p.image.width} height={p.image.height} loading="lazy" decoding="async" /> : <span className="nv-person__initials" aria-hidden>{initials(p.settings.name)}</span>}
+    </div>
+  )
+}
+
+export function TeamFounders(props: TeamFoundersProps): JSX.Element | null {
+  const { layout, columns, imageShape, showBio, showLinks, mediaPosition, sectionWidth, contentAlignment, heading, eyebrow, description, headerSize, people = [] } = props
+  const { strings } = useNova()
+  const list = people.filter((p) => p.settings.name.trim())
+  if (!list.length) return <EmptySection props={props} type="team-founders" width={sectionWidth} title={strings.editorAddPeople} hint={strings.editorAddPeopleHint} />
+  const jsonLd = list.map((p) => ({ '@context': 'https://schema.org', '@type': 'Person', name: p.settings.name, ...(p.settings.role ? { jobTitle: p.settings.role } : {}) }))
+  const link = (p: PersonInstance) => showLinks && p.settings.linkLabel.trim() && p.settings.link.trim() && <a className="nv-person__link" href={p.settings.link}><bdi>{p.settings.linkLabel}</bdi></a>
+  const ld = <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c') }} />
+
+  if (layout === 'founder') {
+    const p = list[0]
+    const s = p.settings
+    return (
+      <Shell props={props} type="team-founders" width={sectionWidth} className="nv-team" data-layout="founder" data-media={mediaPosition}>
+        <div className="nv-team__founder">
+          <Portrait p={p} shape={imageShape} />
+          <div className="nv-team__founder-text">
+            {eyebrow.trim() && <p className="nv-team__eyebrow"><bdi>{eyebrow}</bdi></p>}
+            {s.quote.trim() ? <blockquote className="nv-team__quote">“{s.quote}”</blockquote> : <p className="nv-team__quote"><bdi>{s.name}</bdi></p>}
+            <p className="nv-person__name"><bdi>{s.name}</bdi></p>
+            {s.role.trim() && <p className="nv-person__role"><bdi>{s.role}</bdi></p>}
+            <RichText html={s.bio} className="nv-person__bio" />
+            {link(p)}
+          </div>
+        </div>
+        {ld}
+      </Shell>
+    )
+  }
+  return (
+    <Shell props={props} type="team-founders" width={sectionWidth} className="nv-team" data-layout={layout}>
+      <SectionHead eyebrow={eyebrow} heading={heading} description={description} headerSize={headerSize} align={contentAlignment} />
+      <ul className={sxJoin("nv-team__list", sx({ '--nv-cols': layout === 'list' ? Math.min(columns, 3) : columns } as CSSProperties))}>
+        {list.map((p, i) => (
+          <li key={i} className="nv-person">
+            <Portrait p={p} shape={layout === 'list' ? 'circle' : imageShape} />
+            <div className="nv-person__text">
+              <p className="nv-person__name"><bdi>{p.settings.name}</bdi></p>
+              {p.settings.role.trim() && <p className="nv-person__role"><bdi>{p.settings.role}</bdi></p>}
+              {layout === 'grid' && showBio && <RichText html={p.settings.bio} className="nv-person__bio" />}
+              {link(p)}
+            </div>
+          </li>
+        ))}
+      </ul>
+      {ld}
+    </Shell>
+  )
+}

package/templates/nova/src/sections/TeamFounders/blocks/Person.tsx

@@ -0,0 +1,28 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaImage } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/**
+ * 12E · person block (team-founders) — a real person: name, role, portrait
+ * (face-centred crop), an optional quote (founder layout), a 2–4 sentence bio
+ * and a link. Skipped when the name is empty. No portrait → initials on a
+ * muted tile — the section never ships with sample faces.
+ */
+export const personSchema = defineSchema(
+  { kind: 'block', name: 'person', family: '12E', parents: ['team-founders'], title: 'Person', description: 'One person: photo, name, role and a short bio.', icon: '☺' },
+  {
+    name: field.text(''),
+    role: field.text(''),
+    image: field.resource('image'),
+    quote: field.text(''),
+    bio: field.richtext(''),
+    linkLabel: field.text(''),
+    link: field.url(''),
+  },
+)
+export type PersonSettings = SettingsOf<typeof personSchema>
+export interface PersonInstance {
+  settings: PersonSettings
+  image?: NovaImage | null
+}
+export { initials } from '../../../styles/text'

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

@@ -0,0 +1,28 @@
+import { defineSection, imageFor, resolveSettings } from '@tanqory/theme-kit'
+import { TeamFounders } from './TeamFounders'
+import { personSchema } from './blocks/Person'
+import { presets } from './presets'
+import { teamFoundersSchema } from './schema'
+
+export default defineSection({
+  id: 'team-founders',
+  schema: teamFoundersSchema,
+  blocks: [personSchema],
+  component: TeamFounders,
+  category: 'content',
+  zone: 'main',
+  title: 'Team & founders',
+  description: 'The people behind the brand, with photos and short bios.',
+  icon: '☺',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(teamFoundersSchema, node.settings)
+      const issues = [...r.issues]
+      const people = (node.blocks ?? []).filter((b) => b.type === 'person').map((b) => {
+        const br = resolveSettings(personSchema, b.settings)
+        issues.push(...br.issues)
+        return { settings: br.settings, image: imageFor(store, br.handles.image) }
+      })
+      return { ...r.settings, people }
+  },
+})

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

@@ -0,0 +1,10 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // One founder with quote
+  {"name": "team-founder", "label": "Founder story", "settings": {"layout": "founder", "imageShape": "portrait", "background": "surface-secondary"}, "blocks": []},
+  // Small team
+  {"name": "team-grid", "label": "Team grid", "settings": {"layout": "grid", "columns": 4, "imageShape": "portrait", "showBio": false}, "blocks": []},
+  // Larger teams or credits
+  {"name": "team-list", "label": "Team list", "settings": {"layout": "list", "columns": 2, "imageShape": "circle"}, "blocks": []},
+]

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

@@ -0,0 +1,36 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12E · 04 team-founders (NEW) — the people behind the products.
+ *   founder  one person: a 5 / 12 portrait beside the quote (32 / 1.3), name,
+ *            role, bio, link (the first person block only)
+ *   grid     4:5 portraits, name 14 / 500, role 12.5 muted, bios optional
+ *   list     44 circles, name + role rows, 2 columns — larger teams
+ * No portrait → initials on a muted tile (never a stock face). Person
+ * structured data (name, jobTitle) is emitted.
+ */
+export const teamFoundersSchema = defineSchema(
+  { kind: 'section', name: 'team-founders', family: '12E', blocks: ['person'] },
+  {
+    layout: field.select(['founder', 'grid', 'list'], 'founder'),
+    columns: field.range(4, 2, 5, 1),
+    imageShape: field.select(['portrait', 'square', 'circle'], 'portrait'),
+    showBio: field.boolean(false),
+    showLinks: field.boolean(true),
+    mediaPosition: field.select(['start', 'end'], 'start'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentAlignment: shared.contentAlignment('left'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    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/Testimonials/Testimonials.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { CardRow } from '../../components/content/CardRow'
+import { TestimonialCard } from '../../components/content/TestimonialCard'
+import { IconButton } from '../../components/base/IconButton'
+import { TESTIMONIAL_STARTER, type TestimonialInstance } from './blocks/Testimonial'
+import { useNova } from '../../styles/NovaProvider'
+import { usePageHidden, useReducedMotion } from '../../styles/motion'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/trust.css'
+import { testimonialsSchema } from './schema'
+
+export type TestimonialsSettings = SettingsOf<typeof testimonialsSchema>
+export interface TestimonialsProps extends TestimonialsSettings {
+  testimonials?: TestimonialInstance[]
+}
+
+const ROTATE_MS = 6000
+
+export function Testimonials(props: TestimonialsProps): JSX.Element | null {
+  const { layout, columns, showRating, showAvatar, quoteSize, cardStyle, autoplay, sectionWidth, contentAlignment, heading, eyebrow, description, headerSize, testimonials = [] } = props
+  const { strings, mode } = useNova()
+  const root = useRef<HTMLDivElement>(null)
+  const reduced = useReducedMotion(root)
+  const hidden = usePageHidden()
+  const [paused, setPaused] = useState(false)
+  const list = testimonials.filter((t) => t.settings.quote.trim()).slice(0, 12)
+  const carousel = layout === 'carousel' && list.length > columns
+  const rotating = Boolean(autoplay && carousel && !reduced)
+
+  // LEGACY autoplay: advance one page every 6 s; wraps to the start; holds while paused or hidden.
+  useEffect(() => {
+    if (!rotating || paused || hidden) return
+    const t = window.setInterval(() => {
+      const el = root.current?.querySelector<HTMLElement>('.nv-row__list')
+      if (!el) return
+      const atEnd = Math.abs(el.scrollLeft) >= el.scrollWidth - el.clientWidth - 1
+      el.scrollTo({ left: atEnd ? 0 : el.scrollLeft + el.clientWidth * (getComputedStyle(el).direction === 'rtl' ? -1 : 1), behavior: 'smooth' })
+    }, ROTATE_MS)
+    return () => window.clearInterval(t)
+  }, [rotating, paused, hidden])
+
+  if (!list.length) return <EmptySection props={props} type="testimonials" width={sectionWidth} title={strings.editorAddQuotes} hint={strings.editorAddQuotesHint} />
+  const starter = mode === 'editor' && list.some((t) => t.settings.quote.trim() === TESTIMONIAL_STARTER)
+  return (
+    <Shell props={props} type="testimonials" width={sectionWidth} className="nv-testimonials" data-columns={columns}>
+      <div ref={root} className="nv-testimonials__root">
+        {starter && <p className="nv-trust__editor-note">{strings.editorStarterText}</p>}
+        <CardRow
+          eyebrow={eyebrow}
+          heading={heading}
+          description={description}
+          headerSize={headerSize}
+          align={contentAlignment}
+          layout={layout}
+          columns={columns}
+          mobileColumns={1}
+          carouselOnMobile={list.length > 1}
+          label={heading || strings.testimonials}
+          action={rotating ? <IconButton variant="outlined" icon={paused ? 'play' : 'pause'} label={paused ? strings.playRotation : strings.pauseRotation} onClick={() => setPaused((p) => !p)} /> : undefined}
+        >
+          {list.map((t, i) => (
+            <TestimonialCard
+              key={i}
+              quote={t.settings.quote}
+              name={t.settings.name}
+              role={t.settings.role}
+              avatar={t.avatar}
+              rating={t.settings.rating}
+              video={t.video}
+              showRating={showRating}
+              showAvatar={showAvatar}
+              quoteSize={quoteSize}
+              cardStyle={cardStyle}
+              spotlight={columns === 1}
+            />
+          ))}
+        </CardRow>
+      </div>
+    </Shell>
+  )
+}

package/templates/nova/src/sections/Testimonials/blocks/Testimonial.tsx

@@ -0,0 +1,30 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaImage, NovaVideo } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/** The contract's starter prompt — flagged in the editor until the merchant replaces it. */
+export const TESTIMONIAL_STARTER = 'Share what a customer said about you.'
+
+/**
+ * 12F · testimonial block (testimonials) — a quote the merchant chose.
+ * rating is the merchant's own field (0 hides the stars), never review data.
+ * Skipped when the quote is empty. video: click to play with captions; the
+ * photo is the poster.
+ */
+export const testimonialSchema = defineSchema(
+  { kind: 'block', name: 'testimonial', family: '12F', parents: ['testimonials'], title: 'Testimonial', description: 'One quote with the name and role of the person who said it.', icon: '❝' },
+  {
+    quote: field.textarea(TESTIMONIAL_STARTER),
+    name: field.text(''),
+    role: field.text(''),
+    avatar: field.resource('image'),
+    rating: field.range(5, 0, 5, 1),
+    video: field.resource('video'),
+  },
+)
+export type TestimonialSettings = SettingsOf<typeof testimonialSchema>
+export interface TestimonialInstance {
+  settings: TestimonialSettings
+  avatar?: NovaImage | null
+  video?: NovaVideo | null
+}

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

@@ -0,0 +1,29 @@
+import { defineSection, imageFor, resolveSettings, videoFor } from '@tanqory/theme-kit'
+import { blocksOf } from '../data'
+import { Testimonials } from './Testimonials'
+import { testimonialSchema } from './blocks/Testimonial'
+import { presets } from './presets'
+import { testimonialsSchema } from './schema'
+
+export default defineSection({
+  id: 'testimonials',
+  schema: testimonialsSchema,
+  blocks: [testimonialSchema],
+  component: Testimonials,
+  category: 'marketing',
+  zone: 'main',
+  title: 'Testimonials',
+  description: 'Quotes from customers, as a grid or a carousel.',
+  icon: '❝',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(testimonialsSchema, node.settings)
+      const issues = [...r.issues]
+      const testimonials = blocksOf(node, 'testimonial').map((b) => {
+        const br = resolveSettings(testimonialSchema, b.settings)
+        issues.push(...br.issues)
+        return { settings: br.settings, avatar: imageFor(store, br.handles.avatar), video: videoFor(store, br.handles.video) }
+      })
+      return { ...r.settings, testimonials }
+  },
+})

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

@@ -0,0 +1,10 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default social proof
+  {"name": "tm-grid", "label": "Quote grid", "settings": {"layout": "grid", "columns": 3, "cardStyle": "muted"}, "blocks": []},
+  // One strong quote
+  {"name": "tm-spotlight", "label": "Spotlight", "settings": {"columns": 1, "quoteSize": "lg", "cardStyle": "plain"}, "blocks": []},
+  // Many short quotes
+  {"name": "tm-carousel", "label": "Carousel", "settings": {"layout": "carousel", "columns": 3}, "blocks": []},
+]