create-tanqory-theme 0.0.0-stage → 0.2.3

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

@@ -0,0 +1,136 @@
+import { useMemo, useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { RatingBreakdown, RatingSummary, ReviewItem } from '../../components/commerce/Reviews'
+import { ProductLightbox } from '../../components/overlays/ProductLightbox'
+import { Button } from '../../components/base/Button'
+import { Chip } from '../../components/base/Chip'
+import { Select } from '../../components/base/Select'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { NovaImage, Review, ReviewsData } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/trust.css'
+import { productReviewsSchema } from './schema'
+
+export type ProductReviewsSettings = SettingsOf<typeof productReviewsSchema>
+export type ReviewSort = ProductReviewsSettings['defaultSort']
+export interface ProductReviewsProps extends ProductReviewsSettings {
+  /** The source's reviews for this product — null until the platform has a reviews source. */
+  reviews?: ReviewsData | null
+  /** Opens the source's review form (DATA REQUIREMENT). */
+  onWriteReview?: () => void
+}
+
+export function sortReviews(list: readonly Review[], sort: ReviewSort): Review[] {
+  const by = {
+    recent: (a: Review, b: Review) => b.createdAt.localeCompare(a.createdAt),
+    highest: (a: Review, b: Review) => b.rating - a.rating || b.createdAt.localeCompare(a.createdAt),
+    lowest: (a: Review, b: Review) => a.rating - b.rating || b.createdAt.localeCompare(a.createdAt),
+    photos: (a: Review, b: Review) => Number(Boolean(b.photos?.length)) - Number(Boolean(a.photos?.length)) || b.createdAt.localeCompare(a.createdAt),
+  }[sort]
+  return [...list].sort(by)
+}
+
+export function ProductReviews(props: ProductReviewsProps): JSX.Element | null {
+  const { layout, reviewsPerPage, showDistribution, showPhotos, defaultSort, allowWrite, sectionWidth, heading, eyebrow, description, headerSize, reviews, onWriteReview } = props
+  const { strings, locale } = useNova()
+  const [chosen, setSort] = useState<ReviewSort>(defaultSort)
+  // "With photos" is only a sort while photos are shown.
+  const sort: ReviewSort = !showPhotos && chosen === 'photos' ? 'recent' : chosen
+  const [stars, setStars] = useState<number | null>(null)
+  const [photosOnly, setPhotosOnly] = useState(false)
+  const [pages, setPages] = useState(1)
+  const [lightbox, setLightbox] = useState<{ images: NovaImage[]; index: number } | null>(null)
+  const visible = useMemo(() => {
+    const all = reviews?.reviews ?? []
+    return sortReviews(all.filter((r) => (stars === null || r.rating === stars) && (!photosOnly || Boolean(r.photos?.length))), sort)
+  }, [reviews, stars, photosOnly, sort])
+
+  // Real or nothing: no source → nothing for shoppers, a setup frame in the editor.
+  if (!reviews) return <EmptySection props={props} type="product-reviews" width={sectionWidth} title={strings.editorReviewsTitle} hint={strings.editorReviewsHint} />
+
+  const title = heading.trim() || strings.reviews
+  const write = allowWrite && onWriteReview && (
+    <Button variant="secondary" block onClick={onWriteReview}>
+      {strings.writeReview}
+    </Button>
+  )
+  const shown = visible.slice(0, pages * reviewsPerPage)
+  const filtered = stars !== null || photosOnly
+  const nf = new Intl.NumberFormat(locale)
+  const anyPhotos = showPhotos && reviews.reviews.some((r) => r.photos?.length)
+
+  if (reviews.count === 0) {
+    return (
+      <Shell props={props} type="product-reviews" width={sectionWidth} className="nv-reviews" data-empty="">
+        <SectionHead eyebrow={eyebrow} heading={title} description={description} headerSize={headerSize} />
+        <p className="nv-reviews__none">{strings.noReviewsYet}</p>
+        {write && <div className="nv-reviews__write">{write}</div>}
+      </Shell>
+    )
+  }
+
+  return (
+    <Shell props={props} type="product-reviews" width={sectionWidth} className="nv-reviews" data-layout={layout}>
+      <div className="nv-reviews__grid">
+        <div className="nv-reviews__summary">
+          <SectionHead eyebrow={eyebrow} heading={title} description={description} headerSize={headerSize} />
+          <RatingSummary average={reviews.average} count={reviews.count} />
+          {showDistribution && (
+            <div className="nv-reviews__bars">
+              <RatingBreakdown
+                distribution={reviews.distribution}
+                active={stars}
+                onSelect={(s) => {
+                  setStars(s)
+                  setPages(1)
+                }}
+              />
+            </div>
+          )}
+          {write && <div className="nv-reviews__write">{write}</div>}
+        </div>
+        <div className="nv-reviews__main">
+          <div className="nv-reviews__tools">
+            <div className="nv-reviews__filters" role="group" aria-label={strings.filterReviews}>
+              <Chip selected={!filtered} onClick={() => { setStars(null); setPhotosOnly(false); setPages(1) }}>{strings.allReviews}</Chip>
+              {anyPhotos && <Chip selected={photosOnly} onClick={() => { setPhotosOnly((p) => !p); setPages(1) }}>{strings.withPhotos}</Chip>}
+            </div>
+            <Select
+              className="nv-reviews__sort"
+              aria-label={strings.sortReviews}
+              value={sort}
+              onChange={(e) => setSort(e.target.value as ReviewSort)}
+              options={[
+                { value: 'recent', label: strings.sortRecent },
+                { value: 'highest', label: strings.sortHighest },
+                { value: 'lowest', label: strings.sortLowest },
+                ...(showPhotos ? [{ value: 'photos', label: strings.withPhotos }] : []),
+              ]}
+            />
+          </div>
+          <p className="nv-visually-hidden" aria-live="polite">
+            {filtered ? fmt(strings.showingReviews, { shown: nf.format(shown.length), total: nf.format(visible.length) }) : ''}
+          </p>
+          <ul className="nv-reviews__list">
+            {shown.map((r) => (
+              <li key={r.id}>
+                <ReviewItem review={r} showPhotos={showPhotos} onOpenPhoto={(images, index) => setLightbox({ images, index })} />
+              </li>
+            ))}
+          </ul>
+          {visible.length > shown.length && (
+            <div className="nv-reviews__more">
+              <Button variant="secondary" onClick={() => setPages((p) => p + 1)}>
+                {strings.showMoreReviews}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+      {lightbox && <ProductLightbox open onClose={() => setLightbox(null)} images={lightbox.images} index={lightbox.index} onIndex={(index) => setLightbox((l) => (l ? { ...l, index } : l))} title={title} />}
+    </Shell>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { ProductReviews } from './ProductReviews'
+import { presets } from './presets'
+import { productReviewsSchema } from './schema'
+
+export default defineSection({
+  id: 'product-reviews',
+  schema: productReviewsSchema,
+  component: ProductReviews,
+  category: 'trust',
+  zone: 'main',
+  title: 'Product reviews',
+  description: 'Reviews of the current product from a connected reviews source.',
+  icon: '☆',
+  requiresContext: ['product'],
+  presets,
+  data: (node, store) => {
+      // Real or nothing: without a reviews source the section receives null and renders nothing for shoppers.
+      const r = resolveSettings(productReviewsSchema, node.settings)
+      return { ...r.settings, reviews: store.reviews ?? null }
+  },
+})

package/templates/nova/src/sections/ProductReviews/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[] = [
+  // PDP reviews (when data exists)
+  {"name": "reviews-standard", "label": "Reviews", "settings": {"layout": "summary-left", "reviewsPerPage": 5, "showDistribution": true}, "blocks": []},
+]

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

@@ -0,0 +1,31 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12F · 04 product-reviews (NEW · DATA REQUIREMENT) — the platform reviews
+ * API (ratings, text, author, verified, photos, date). Nothing renders for
+ * shoppers until a source exists: no empty stars, no "0 reviews". The editor
+ * sees a setup frame. Source connected with 0 reviews → "No reviews yet".
+ */
+export const productReviewsSchema = defineSchema(
+  { kind: 'section', name: 'product-reviews', family: '12F' },
+  {
+    source: field.select(['none'], 'none'),
+    layout: field.select(['summary-left', 'stacked'], 'summary-left'),
+    reviewsPerPage: field.range(5, 3, 20, 1),
+    showDistribution: field.boolean(true),
+    showPhotos: field.boolean(true),
+    defaultSort: field.select(['recent', 'highest', 'lowest', 'photos'], 'recent'),
+    allowWrite: 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'),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,78 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useCallback, useEffect, useMemo, useState, type CSSProperties } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { Countdown, parseStoreDateTime } from '../../components/content/Countdown'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import { bestLabel } from '../../styles/theme'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/promotion.css'
+import { promoBannerSchema } from './schema'
+
+export type PromoBannerSettings = SettingsOf<typeof promoBannerSchema>
+export interface PromoBannerProps extends PromoBannerSettings {
+  /** The store's IANA time zone; endsAt is read in it. */
+  timeZone?: string
+  /** The store / server clock (shoppers' device clocks can be wrong). */
+  clock?: () => number
+  /** The brand colour, when the band is "brand", to pick the label (auto contrast). */
+  brandColor?: string
+}
+
+const FORMAT_EXAMPLE = '2026-10-12 23:59'
+
+export function PromoBanner(props: PromoBannerProps): JSX.Element | null {
+  const { eyebrow, heading, buttonLabel, buttonLink, endsAt, showCountdown, afterEnd, endedMessage, style, sectionWidth, contentWidth, contentAlignment, headerSize, timeZone = 'UTC', clock = Date.now, brandColor } = props
+  const { mode, strings } = useNova()
+  const end = useMemo(() => parseStoreDateTime(endsAt, timeZone), [endsAt, timeZone])
+  const invalid = Boolean(endsAt.trim()) && end === null
+  const [ended, setEnded] = useState(() => end !== null && end <= clock())
+  useEffect(() => setEnded(end !== null && end <= clock()), [end, clock])
+  const onEnd = useCallback(() => setEnded(true), [])
+
+  const editor = mode === 'editor'
+  if (ended && afterEnd === 'hide' && !editor) return null
+
+  const showEnded = ended && afterEnd === 'show-ended-message'
+  const tone = showEnded ? 'muted' : style
+  const vars = tone === 'brand' && brandColor ? ({ '--nv-promo-fg': bestLabel(brandColor) } as CSSProperties) : undefined
+  const counting = showCountdown && end !== null && !ended
+
+  return (
+    <section {...sectionRootProps(props, 'promo-banner')} className="nv-promo">
+      <div className="nv-promo-container" data-width={sectionWidth}>
+        {editor && invalid && <EditorFrame section="promo-banner" title={strings.editorCountdownInvalid} hint={fmt(strings.editorCountdownInvalidHint, { example: FORMAT_EXAMPLE })} compact />}
+        {editor && ended && afterEnd === 'hide' && <EditorFrame section="promo-banner" title={strings.editorPromoEnded} compact />}
+        <div
+          className={sxJoin("nv-promo__band", sx(vars))}
+          data-style={tone}
+          data-ended={showEnded ? '' : undefined}
+          data-align={contentAlignment}
+          data-width={contentWidth}
+          data-nv-surface={tone === 'inverse' ? 'inverse' : undefined}
+        >
+          <div className="nv-promo__copy">
+            {eyebrow.trim() && <p className="nv-promo__eyebrow"><bdi>{eyebrow}</bdi></p>}
+            <h2 className="nv-promo__heading" data-size={headerSize}>
+              {showEnded ? endedMessage : heading}
+            </h2>
+          </div>
+          {counting && <Countdown className="nv-promo__countdown" endsAt={end!} clock={clock} onEnd={onEnd} />}
+          {/* A label AND a link: never a dead link on the storefront (editor: disabled until linked). */}
+          {!showEnded && buttonLabel.trim() && (buttonLink.trim() ? (
+            <Button href={buttonLink} size="lg" variant="primary" className="nv-promo__cta">
+              <bdi>{buttonLabel}</bdi>
+            </Button>
+          ) : editor ? (
+            <Button size="lg" variant="primary" className="nv-promo__cta" disabled>
+              <bdi>{buttonLabel}</bdi>
+            </Button>
+          ) : null)}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { PromoBanner } from './PromoBanner'
+import { presets } from './presets'
+import { promoBannerSchema } from './schema'
+
+export default defineSection({
+  id: 'promo-banner',
+  schema: promoBannerSchema,
+  component: PromoBanner,
+  category: 'marketing',
+  zone: 'main',
+  title: 'Promo banner',
+  description: 'A band for a sale, drop or launch, with an optional countdown.',
+  icon: '◔',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(promoBannerSchema, node.settings)
+      return { ...r.settings, timeZone: store.timeZone, clock: store.clock, brandColor: store.brandColor }
+  },
+})

package/templates/nova/src/sections/PromoBanner/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[] = [
+  // Time-bound sale with honest countdown
+  {"name": "promo-countdown", "label": "Countdown sale", "settings": {"style": "inverse", "showCountdown": true, "afterEnd": "hide"}, "blocks": []},
+  // Upcoming drop without countdown
+  {"name": "promo-launch", "label": "Launch notice", "settings": {"style": "brand", "showCountdown": false}, "blocks": []},
+  // Low-key offer inside a content page
+  {"name": "promo-quiet", "label": "Quiet offer", "settings": {"style": "muted", "showCountdown": false}, "blocks": []},
+]

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

@@ -0,0 +1,38 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12B · 04 promo-banner — a contained band for ONE time-bound offer or launch.
+ * The countdown is honest: it counts to the merchant's date in the store's
+ * time zone against the store clock, stops at zero, then hides (default) or
+ * says the offer has ended. It never restarts, never invents urgency.
+ *
+ *   no date / invalid date → the banner without a countdown (editor warns)
+ *   ended + show-ended-message → endedMessage replaces the heading; no button
+ *   style inverse · muted · brand (auto contrast on the brand colour)
+ */
+export const promoBannerSchema = defineSchema(
+  { kind: 'section', name: 'promo-banner', family: '12B' },
+  {
+    eyebrow: field.text(''),
+    heading: field.text('Modern essentials'),
+    buttonLabel: field.text(''),
+    buttonLink: field.url(''),
+    endsAt: field.text(''),
+    showCountdown: field.boolean(true),
+    afterEnd: field.select(['hide', 'show-ended-message'], 'hide'),
+    endedMessage: field.text('This offer has ended.'),
+    style: field.select(['inverse', 'muted', 'brand'], 'inverse'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentWidth: shared.contentWidth('standard'),
+    contentAlignment: shared.contentAlignment('left'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,53 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { CardRow } from '../../components/content/CardRow'
+import { ProductCard } from '../../components/commerce/ProductCard'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import type { Product } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/commerce.css'
+import { recentlyViewedSchema } from './schema'
+
+export type RecentlyViewedSettings = SettingsOf<typeof recentlyViewedSchema>
+export interface RecentlyViewedProps extends RecentlyViewedSettings {
+  /** Viewed products, newest first. null / undefined = capability unavailable or consent declined. */
+  products?: Product[] | null
+  /** The product page this row sits on. */
+  currentProductId?: string
+  /** Clears this browser's history (the host owns storage). */
+  onClear?: () => void
+}
+
+export function RecentlyViewed(props: RecentlyViewedProps): JSX.Element | null {
+  const { limit, layout, excludeCurrent, showClear, sectionWidth, heading, products, currentProductId, onClear } = props
+  const { mode, strings } = useNova()
+  if (!products) {
+    return mode === 'editor' ? (
+      <section {...sectionRootProps(props, 'recently-viewed')} className="nv-merch">
+        <div className="nv-section-container" data-width={sectionWidth}>
+          <EditorFrame section="recently-viewed" title={strings.editorRecentlyViewed} hint={strings.editorRecentlyViewedHint} />
+        </div>
+      </section>
+    ) : null
+  }
+  const list = products.filter((p) => !(excludeCurrent && p.id === currentProductId)).slice(0, limit)
+  if (!list.length) return null
+  const clear = showClear && onClear ? (
+    <Button variant="tertiary" size="sm" onClick={onClear}>
+      {strings.clearHistory}
+    </Button>
+  ) : undefined
+  return (
+    <section {...sectionRootProps(props, 'recently-viewed')} className="nv-merch" data-compact="">
+      <div className="nv-section-container" data-width={sectionWidth}>
+        <CardRow heading={heading.trim() || strings.recentlyViewed} headerSize="small" action={clear} layout={layout === 'carousel' ? 'carousel' : 'grid'} columns={Math.min(6, Math.max(list.length, 3))} carouselOnMobile>
+          {list.map((p) => (
+            <ProductCard key={p.id} product={p} compact />
+          ))}
+        </CardRow>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { RecentlyViewed } from './RecentlyViewed'
+import { presets } from './presets'
+import { recentlyViewedSchema } from './schema'
+
+export default defineSection({
+  id: 'recently-viewed',
+  schema: recentlyViewedSchema,
+  component: RecentlyViewed,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Recently viewed',
+  description: 'Products this shopper viewed recently.',
+  icon: '↺',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(recentlyViewedSchema, node.settings)
+      return { ...r.settings, products: store.recentlyViewed ?? null, currentProductId: store.currentProduct?.id }
+  },
+})

package/templates/nova/src/sections/RecentlyViewed/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[] = [
+  // Quiet history row above the footer
+  {"name": "rv-strip", "label": "History strip", "settings": {"limit": 6, "layout": "row", "excludeCurrent": true}, "blocks": []},
+]

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

@@ -0,0 +1,26 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12C · 08 recently-viewed (NEW · DATA REQUIREMENT) — compact cards (1:1,
+ * one-line title, price) of what this shopper viewed. Needs product lookup by
+ * handle and the Preferences consent category: until the platform supplies
+ * `products`, it NEVER renders for shoppers (editor: setup frame).
+ * Only the current product → hidden. "Clear history" clears this browser.
+ */
+export const recentlyViewedSchema = defineSchema(
+  { kind: 'section', name: 'recently-viewed', family: '12C' },
+  {
+    limit: field.range(6, 3, 12, 1),
+    layout: field.select(['row', 'carousel'], 'row'),
+    excludeCurrent: field.boolean(true),
+    showClear: field.boolean(true),
+    history: field.select(['browser'], 'browser'),
+    // 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('Recently viewed'),
+  },
+)

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

@@ -0,0 +1,38 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { RichText } from '../../components/content/RichText'
+import { SectionHead } from '../../components/content/SectionHead'
+import { Button } from '../../components/base/Button'
+import { Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/content.css'
+import { richTextSchema } from './schema'
+
+export type RichTextSettings = SettingsOf<typeof richTextSchema>
+export type RichTextSectionProps = RichTextSettings
+
+const VARIANT = { primary: 'primary', secondary: 'secondary', link: 'tertiary' } as const
+
+export function RichTextSection(props: RichTextSectionProps): JSX.Element | null {
+  const { body, buttonLabel, buttonLink, buttonVariant, layout, headingSize, width, sectionWidth, contentWidth, contentAlignment, heading, eyebrow, headerSize } = props
+  const plain = body.replace(/<[^>]*>/g, '').trim()
+  if (!plain && !heading.trim() && !eyebrow.trim()) return null
+  // Legacy width (saved before contentWidth existed) keeps rendering.
+  const measure = width ?? contentWidth
+  const level = Number(headingSize.slice(1)) as 1 | 2 | 3
+  const align = layout === 'split' ? 'left' : contentAlignment
+  return (
+    <Shell props={props} type="rich-text" width={sectionWidth} className="nv-rich-text" data-layout={layout} data-measure={measure} data-long={plain.length > 160 ? '' : undefined}>
+      <div className="nv-rich-text__inner">
+        <SectionHead eyebrow={eyebrow} heading={heading} headerSize={headerSize} level={level} align={align} />
+        <div className="nv-rich-text__body">
+          {plain && <RichText html={body} className="nv-rich-text__prose" />}
+          {buttonLabel.trim() && buttonLink.trim() && (
+            <Button href={buttonLink} variant={VARIANT[buttonVariant]} className="nv-rich-text__button" iconEnd={buttonVariant === 'link' ? <span aria-hidden>→</span> : undefined}>
+              <bdi>{buttonLabel}</bdi>
+            </Button>
+          )}
+        </div>
+      </div>
+    </Shell>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { RichTextSection } from './RichText'
+import { presets } from './presets'
+import { richTextSchema } from './schema'
+
+export default defineSection({
+  id: 'rich-text',
+  schema: richTextSchema,
+  component: RichTextSection,
+  category: 'content',
+  zone: 'main',
+  title: 'Rich text',
+  description: 'Heading, paragraph and a button, centred.',
+  icon: '¶',
+  presets,
+  data: (node) => {
+      const r = resolveSettings(richTextSchema, node.settings)
+      return r.settings
+  },
+})

package/templates/nova/src/sections/RichText/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[] = [
+  // Centered pause between sections
+  {"name": "rt-statement", "label": "Brand statement", "settings": {"layout": "stacked", "contentAlignment": "center", "contentWidth": "narrow", "buttonVariant": "secondary"}, "blocks": []},
+  // Intro before a listing
+  {"name": "rt-intro-split", "label": "Intro split", "settings": {"layout": "split", "contentAlignment": "left"}, "blocks": []},
+  // Care or policy note
+  {"name": "rt-note", "label": "Muted note", "settings": {"layout": "stacked", "contentAlignment": "left", "background": "surface-secondary", "buttonVariant": "link"}, "blocks": []},
+]

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

@@ -0,0 +1,37 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12D · 01 rich-text — a paragraph with a heading and one button. The
+ * canonical default is centred and narrow, so a short brand statement reads
+ * like a pause in the page; split (Nova 11 · A3) puts the heading in 5/12
+ * beside the body in 7/12 (stacked < 1024). One button, secondary by default
+ * so it never competes with the hero CTA. The heading LEVEL (h1–h3) is set
+ * apart from its visual size (shared headerSize) — one h1 per page.
+ * At 390 a centred body longer than ~3 lines becomes start-aligned.
+ */
+export const richTextSchema = defineSchema(
+  { kind: 'section', name: 'rich-text', family: '12D' },
+  {
+    body: field.richtext('Tell your story here…'),
+    buttonLabel: field.text(''),
+    buttonLink: field.url(''),
+    buttonVariant: field.select(['primary', 'secondary', 'link'], 'secondary'),
+    layout: field.select(['stacked', 'split'], 'stacked'),
+    headingSize: field.select(['h1', 'h2', 'h3'], 'h2'),
+    width: field.select(['narrow', 'content'], 'narrow', { legacyHidden: true }),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentWidth: shared.contentWidth('narrow'),
+    contentAlignment: shared.contentAlignment('center'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)