create-tanqory-theme 0.0.0-stage → 0.2.2

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

@@ -0,0 +1,40 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useState, type CSSProperties } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import type { LogoInstance } from './blocks/Logo'
+import { useNova } from '../../styles/NovaProvider'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/trust.css'
+import { logoListSchema } from './schema'
+
+export type LogoListSettings = SettingsOf<typeof logoListSchema>
+export interface LogoListProps extends LogoListSettings {
+  logos?: LogoInstance[]
+}
+
+function Logo({ logo: l }: { logo: LogoInstance }) {
+  const [failed, setFailed] = useState(false)
+  const img = l.image!
+  const name = l.settings.alt.trim() || img.alt || ''
+  const mark = failed ? <span className="nv-logos__name"><bdi>{name}</bdi></span> : <img src={img.src} alt={name} width={img.width} height={img.height} loading="lazy" decoding="async" onError={() => setFailed(true)} />
+  return <li className="nv-logos__cell">{l.settings.href.trim() ? <a className="nv-logos__link" href={l.settings.href}>{mark}</a> : mark}</li>
+}
+
+export function LogoList(props: LogoListProps): JSX.Element | null {
+  const { grayscale, columns, logoHeight, sectionWidth, contentAlignment, heading, eyebrow, headerSize, logos = [] } = props
+  const { strings } = useNova()
+  const list = logos.filter((l) => l.image).slice(0, 12)
+  if (!list.length) return <EmptySection props={props} type="logo-list" width={sectionWidth} title={strings.editorAddLogos} hint={strings.editorAddLogosHint} />
+  return (
+    <Shell props={props} type="logo-list" width={sectionWidth} className="nv-logos" data-grey={grayscale ? '' : undefined} data-size={logoHeight} data-few={list.length < 3 ? '' : undefined}>
+      {heading.trim() ? <SectionHead eyebrow={eyebrow} heading={heading} headerSize={headerSize} align={contentAlignment} /> : eyebrow.trim() && <p className="nv-eyebrow nv-logos__label"><bdi>{eyebrow}</bdi></p>}
+      <ul className={sxJoin("nv-logos__list", sx({ '--nv-cols': Number(columns) } as CSSProperties))} aria-label={heading || eyebrow || strings.logos}>
+        {list.map((l, i) => (
+          <Logo key={i} logo={l} />
+        ))}
+      </ul>
+    </Shell>
+  )
+}

package/templates/nova/src/sections/LogoList/blocks/Logo.tsx

@@ -0,0 +1,18 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaImage } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/** 12F · logo block (logo-list) — an SVG or transparent PNG, its name (required for screen readers) and an optional link. Skipped when there is no image. */
+export const logoSchema = defineSchema(
+  { kind: 'block', name: 'logo', family: '12F', parents: ['logo-list'], title: 'Logo', description: 'One logo in a logo list.', icon: '◍' },
+  {
+    src: field.resource('image'),
+    alt: field.text(''),
+    href: field.url(''),
+  },
+)
+export type LogoSettings = SettingsOf<typeof logoSchema>
+export interface LogoInstance {
+  settings: LogoSettings
+  image?: NovaImage | null
+}

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

@@ -0,0 +1,29 @@
+import { defineSection, imageFor, resolveSettings } from '@tanqory/theme-kit'
+import { blocksOf } from '../data'
+import { LogoList } from './LogoList'
+import { logoSchema } from './blocks/Logo'
+import { presets } from './presets'
+import { logoListSchema } from './schema'
+
+export default defineSection({
+  id: 'logo-list',
+  schema: logoListSchema,
+  blocks: [logoSchema],
+  component: LogoList,
+  category: 'social-proof',
+  zone: 'main',
+  title: 'Logo list',
+  description: 'Press or stockist logos in a row.',
+  icon: '◍',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(logoListSchema, node.settings)
+      const issues = [...r.issues]
+      const logos = blocksOf(node, 'logo').map((b) => {
+        const br = resolveSettings(logoSchema, b.settings)
+        issues.push(...br.issues)
+        return { settings: br.settings, image: imageFor(store, br.handles.src) }
+      })
+      return { ...r.settings, logos }
+  },
+})

package/templates/nova/src/sections/LogoList/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[] = [
+  // Press logos
+  {"name": "logos-press", "label": "As featured in", "settings": {"grayscale": true, "columns": "6", "logoHeight": "medium"}, "blocks": []},
+  // Retail partners
+  {"name": "logos-stockists", "label": "Stockists", "settings": {"grayscale": false, "columns": "4", "logoHeight": "large"}, "blocks": []},
+]

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

@@ -0,0 +1,29 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12F · 02 logo-list (EXISTING) — press and stockists. Logos sit at a max
+ * height per logoHeight (24 / 28 / 40; 390: 20 / 24 / 28), grey at 60% ink,
+ * full colour on hover / focus. 3 per row at 390. No logo images → hidden
+ * (never text-only logos); a logo that fails to load shows its name.
+ */
+export const logoListSchema = defineSchema(
+  { kind: 'section', name: 'logo-list', family: '12F', blocks: ['logo'] },
+  {
+    grayscale: field.boolean(true),
+    columns: field.select(['4', '5', '6'], '6'),
+    logoHeight: field.select(['small', 'medium', 'large'], 'medium'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentAlignment: shared.contentAlignment('center'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('medium'),
+    spacingBottom: shared.spacingBottom('medium'),
+    background: shared.background('surface'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    headerSize: shared.headerSize('small'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,51 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { Breadcrumb } from '../../components/navigation/Breadcrumb'
+import { RichText } from '../../components/content/RichText'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorChip } from '../../components/states/EditorFrame'
+import type { BreadcrumbItem, Collection } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import { ProductListing, type ListingData } from '../../components/listing/ProductListing'
+import '../../components/section/shared.css'
+import '../../styles/sections/commerce.css'
+import { mainCollectionSchema } from './schema'
+
+export type MainCollectionSettings = SettingsOf<typeof mainCollectionSchema>
+export interface MainCollectionProps extends MainCollectionSettings, ListingData {
+  collection?: Collection | null
+  breadcrumbs?: BreadcrumbItem[]
+}
+
+export function MainCollection(props: MainCollectionProps): JSX.Element | null {
+  const { collection, breadcrumbs = [], showHeader, showBreadcrumb, showCollectionImage, sectionWidth, facets } = props
+  const { mode, strings } = useNova()
+  if (!collection) return null
+  const image = collection.image
+  const imageMode = image ? showCollectionImage : 'none'
+  const noFacets = mode === 'editor' && props.filterLayout !== 'none' && !(facets ?? []).length
+  return (
+    <section {...sectionRootProps(props, 'main-collection')} className="nv-merch nv-main-collection">
+      <div className="nv-section-container" data-width={sectionWidth}>
+        {showHeader && (
+          <header className="nv-collection-head" data-image={imageMode}>
+            <div className="nv-collection-head__text">
+              {showBreadcrumb && breadcrumbs.length >= 2 && <Breadcrumb items={breadcrumbs} showCurrent={false} />}
+              <h1 className="nv-collection-head__title"><bdi>{collection.title}</bdi></h1>
+              {collection.description?.trim() && <RichText html={collection.description} className="nv-collection-head__desc" />}
+            </div>
+            {imageMode !== 'none' && image && (
+              <div className="nv-collection-head__media">
+                <img src={image.src} srcSet={image.srcSet} sizes="(min-width: 1024px) 40vw, 100vw" alt="" width={image.width} height={image.height} decoding="async" />
+              </div>
+            )}
+          </header>
+        )}
+        <ProductListing
+          settings={props}
+          data={{ ...props, shopAllHref: props.shopAllHref ?? '/collections/all' }}
+          editorNoFacets={noFacets ? <p className="nv-merch__sample"><EditorChip section="main-collection" /> {strings.editorSetUpFilters}</p> : undefined}
+        />
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { collectionFor, defineSection, Product, resolveSettings } from '@tanqory/theme-kit'
+import { addProduct } from '../data'
+import { MainCollection } from './MainCollection'
+import { presets } from './presets'
+import { mainCollectionSchema } from './schema'
+
+export default defineSection({
+  id: 'main-collection',
+  schema: mainCollectionSchema,
+  component: MainCollection,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Collection products',
+  description: 'The products of the current collection, with filters and sorting.',
+  icon: '▤',
+  requiresContext: ['collection'],
+  presets,
+  listing: true,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(mainCollectionSchema, node.settings)
+      const { collection } = collectionFor(store, r.handles.collection, store.currentCollection)
+      return { ...r.settings, collection, breadcrumbs: store.breadcrumbs, products: collection?.products, total: collection?.productsCount,
+      onQuickAdd: (product: Product) => addProduct(actions, product),
+    }
+  },
+})

package/templates/nova/src/sections/MainCollection/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 collection page
+  {"name": "collection-sidebar", "label": "Sidebar filters", "settings": {"filterLayout": "sidebar", "columns": "3", "pagination": "load-more"}, "blocks": []},
+  // Visual catalogues
+  {"name": "collection-top-bar", "label": "Top-bar filters", "settings": {"filterLayout": "top-bar", "columns": "4"}, "blocks": []},
+  // Image-first browsing
+  {"name": "collection-drawer", "label": "Drawer filters", "settings": {"filterLayout": "drawer", "columns": "4", "showCollectionImage": "none"}, "blocks": []},
+]

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

@@ -0,0 +1,29 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12C · 02 main-collection — the collection page itself (route data, one per
+ * page): an optional header (trail · title h1 · description · image beside the
+ * title or a 21:9 banner under it) above the shared listing. Turn the header
+ * off when a collection-banner sits above.
+ */
+export const mainCollectionSchema = defineSchema(
+  { kind: 'section', name: 'main-collection', family: '12C' },
+  {
+    collection: field.resource('collection'),
+    showHeader: field.boolean(true),
+    showBreadcrumb: field.boolean(false),
+    showCollectionImage: field.select(['none', 'beside-title', 'banner'], 'beside-title'),
+    productsPerPage: field.select(['6', '12', '24', '48'], '24'),
+    columns: field.select(['3', '4'], '3'),
+    mobileColumns: field.select(['1', '2'], '2'),
+    filterLayout: field.select(['sidebar', 'top-bar', 'drawer', 'none'], 'sidebar'),
+    showSort: field.boolean(true),
+    showCount: field.boolean(true),
+    pagination: field.select(['load-more', 'pages'], 'load-more'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    spacingTop: shared.spacingTop('small'),
+    spacingBottom: shared.spacingBottom('large'),
+  },
+)

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

@@ -0,0 +1,114 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { IconButton } from '../../components/base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { useReducedMotion } from '../../styles/motion'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import '../../components/section/shared.css'
+import '../../styles/sections/promotion.css'
+import { marqueeSchema } from './schema'
+
+export type MarqueeSettings = SettingsOf<typeof marqueeSchema>
+export interface MarqueeProps extends MarqueeSettings {
+  /** Session storage scope for the pause (a store id). */
+  storageKey?: string
+}
+
+/** px per second. */
+const SPEED = { slow: 40, standard: 60, fast: 90 } as const
+
+export function Marquee({ text, size, speed, direction, pauseOnHover, background, storageKey = 'nv' }: MarqueeProps): JSX.Element | null {
+  const { mode, strings } = useNova()
+  const root = useRef<HTMLElement>(null)
+  const unit = useRef<HTMLSpanElement>(null)
+  const reduced = useReducedMotion(root)
+  const key = `nova:marquee:${storageKey}:paused`
+  const [paused, setPaused] = useState(false)
+  // Enough copies of the text to cover twice the band, measured.
+  const [copies, setCopies] = useState(4)
+  const [unitWidth, setUnitWidth] = useState(0)
+
+  useEffect(() => {
+    try {
+      setPaused(sessionStorage.getItem(key) === '1')
+    } catch {
+      /* storage unavailable: not paused */
+    }
+  }, [key])
+
+  useLayoutEffect(() => {
+    const measure = () => {
+      const band = root.current?.clientWidth ?? 0
+      const w = unit.current?.getBoundingClientRect().width ?? 0
+      if (!band || !w) return
+      setUnitWidth(w)
+      setCopies(Math.max(2, Math.ceil(band / w) + 1))
+    }
+    measure()
+    if (typeof ResizeObserver === 'undefined' || !root.current) return
+    const ro = new ResizeObserver(measure)
+    ro.observe(root.current)
+    document.fonts?.addEventListener?.('loadingdone', measure)
+    return () => {
+      ro.disconnect()
+      document.fonts?.removeEventListener?.('loadingdone', measure)
+    }
+  }, [text, size])
+
+  if (!text.trim()) return mode === 'editor' ? <EditorFrame section="marquee" title={strings.editorAddMarquee} compact /> : null
+
+  const moving = !reduced && !paused
+  // One half of the track is `copies` units; it moves by exactly one half.
+  // Until measured, assume a 400px unit so speed still applies on first paint.
+  const style = { '--nv-marquee-duration': `${Math.round(((unitWidth || 400) * copies * 100) / SPEED[speed]) / 100}s` } as CSSProperties
+  const half = (hidden: boolean) =>
+    Array.from({ length: copies }, (_, i) => (
+      <span key={i} ref={!hidden && i === 0 ? unit : undefined} className="nv-marquee__unit" aria-hidden={hidden || i > 0 ? true : undefined}>
+        <span className="nv-marquee__text"><bdi>{text}</bdi></span>
+        <span className="nv-marquee__dot" aria-hidden />
+      </span>
+    ))
+
+  return (
+    <section
+      ref={root}
+      className={sxJoin("nv-marquee", sx(style))}
+      data-nv-section="marquee"
+      data-bg={background}
+      data-nv-surface={background === 'primary' ? 'inverse' : background === 'surface-secondary' ? 'muted' : 'default'}
+      data-size={size}
+      data-direction={direction}
+      data-state={reduced ? 'static' : moving ? 'moving' : 'paused'}
+      data-hover-pause={pauseOnHover ? '' : undefined}
+    >
+      {reduced ? (
+        <p className="nv-marquee__static"><bdi>{text}</bdi></p>
+      ) : (
+        <div className="nv-marquee__viewport">
+          <div className="nv-marquee__track">
+            {half(false)}
+            {half(true)}
+          </div>
+        </div>
+      )}
+      {!reduced && (
+        <IconButton
+          className="nv-marquee__pause"
+          icon={paused ? 'play' : 'pause'}
+          label={paused ? strings.playMarquee : strings.pauseMarquee}
+          onClick={() => {
+            const next = !paused
+            setPaused(next)
+            try {
+              if (next) sessionStorage.setItem(key, '1')
+              else sessionStorage.removeItem(key)
+            } catch {
+              /* not persisted; paused for this render only */
+            }
+          }}
+        />
+      )}
+    </section>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { Marquee } from './Marquee'
+import { presets } from './presets'
+import { marqueeSchema } from './schema'
+
+export default defineSection({
+  id: 'marquee',
+  schema: marqueeSchema,
+  component: Marquee,
+  category: 'content',
+  zone: 'main',
+  title: 'Marquee',
+  description: 'A line of text that scrolls across the page.',
+  icon: '↔',
+  presets,
+  data: (node) => {
+      const r = resolveSettings(marqueeSchema, node.settings)
+      return r.settings
+  },
+})

package/templates/nova/src/sections/Marquee/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[] = [
+  // Small service line between sections
+  {"name": "marquee-ticker", "label": "Ticker", "settings": {"size": "small", "speed": "standard", "background": "surface-secondary"}, "blocks": []},
+  // Large editorial line
+  {"name": "marquee-statement", "label": "Statement", "settings": {"size": "large", "speed": "slow", "background": "surface"}, "blocks": []},
+  // Contrast band for campaigns
+  {"name": "marquee-inverse", "label": "Inverse band", "settings": {"size": "medium", "speed": "slow", "background": "primary"}, "blocks": []},
+]

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

@@ -0,0 +1,23 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+
+/**
+ * 12B · 05 marquee — an edge-to-edge moving line between sections. Three
+ * sizes take it from a quiet ticker to an editorial statement.
+ *
+ *   Because it moves forever it ALWAYS carries a pause button (inline end,
+ *   fade mask behind it); a pause lasts the session. Reduced motion → static,
+ *   centred, shown once and allowed to wrap. Screen readers read the text
+ *   once; the repeats are aria-hidden. Direction mirrors in RTL. Never a
+ *   heading. Shared settings do not apply (fixed padding, full bleed).
+ */
+export const marqueeSchema = defineSchema(
+  { kind: 'section', name: 'marquee', family: '12B' },
+  {
+    text: field.text('New season just dropped'),
+    size: field.select(['small', 'medium', 'large'], 'medium'),
+    speed: field.select(['slow', 'standard', 'fast'], 'slow'),
+    direction: field.select(['left', 'right'], 'left'),
+    pauseOnHover: field.boolean(true),
+    background: field.select(['surface', 'surface-secondary', 'primary'], 'surface'),
+  },
+)

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

@@ -0,0 +1,56 @@
+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 { columnIsEmpty, type ColumnInstance } from '../../components/content/blocks/Column'
+import { Icon, type IconName } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/content.css'
+import { multicolumnSchema } from './schema'
+
+export type MulticolumnSettings = SettingsOf<typeof multicolumnSchema>
+export interface MulticolumnProps extends MulticolumnSettings {
+  items?: ColumnInstance[]
+}
+
+export function Multicolumn(props: MulticolumnProps): JSX.Element | null {
+  const { subheading, columns, showImage, imageRatio, textAlignment, carouselOnMobile, iconSize, style, sectionWidth, heading, eyebrow, description, headerSize, items = [] } = props
+  const { strings } = useNova()
+  const cols = items.filter((c) => !columnIsEmpty(c))
+  if (!cols.length) return <EmptySection props={props} type="multicolumn" width={sectionWidth} title={strings.editorAddBlocks} hint={strings.editorAddBlocksHint} />
+  const H = heading ? 'h3' : 'h2'
+  return (
+    <Shell props={props} type="multicolumn" width={sectionWidth} className="nv-multicolumn" data-style={style} data-align-text={textAlignment} data-mobile-carousel={carouselOnMobile ? '' : undefined} data-media={showImage ? 'image' : 'icon'}>
+      <SectionHead eyebrow={eyebrow || subheading} heading={heading} description={description} headerSize={headerSize} align={textAlignment} />
+      <ul className={sxJoin("nv-multicolumn__list", sx({ '--nv-cols': columns } as CSSProperties))} data-ratio={imageRatio} data-icon={iconSize}>
+        {cols.map((c, i) => {
+          const s = c.settings
+          const img = showImage ? c.image : null
+          return (
+            <li key={i} className="nv-multicolumn__item" data-has-image={img ? '' : undefined}>
+              {img ? (
+                <div className="nv-multicolumn__media">
+                  <img src={img.src} srcSet={img.srcSet} sizes="(min-width: 1024px) 33vw, 100vw" alt={img.alt ?? ''} width={img.width} height={img.height} loading="lazy" decoding="async" />
+                </div>
+              ) : (
+                !showImage && s.icon !== 'none' && <Icon name={s.icon as IconName} size={iconSize === 'sm' ? 20 : iconSize === 'lg' ? 32 : 24} className="nv-multicolumn__icon" />
+              )}
+              <div className="nv-multicolumn__text">
+                {s.heading.trim() && <H className="nv-multicolumn__title"><bdi>{s.heading}</bdi></H>}
+                <RichText html={s.body} className="nv-multicolumn__body" />
+                {s.linkLabel.trim() && s.link.trim() && (
+                  <a className="nv-multicolumn__link" href={s.link}>
+                    <bdi>{s.linkLabel}</bdi>
+                  </a>
+                )}
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </Shell>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { columnsOf } from '../data'
+import { Multicolumn } from './Multicolumn'
+import { presets } from './presets'
+import { multicolumnSchema } from './schema'
+import { columnSchema } from '../../components/content/blocks/Column'
+
+export default defineSection({
+  id: 'multicolumn',
+  schema: multicolumnSchema,
+  blocks: [columnSchema],
+  component: Multicolumn,
+  category: 'content',
+  zone: 'main',
+  title: 'Multicolumn',
+  description: 'Two to four columns of heading and text.',
+  icon: '⫴',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(multicolumnSchema, node.settings)
+      const issues = [...r.issues]
+      const items = columnsOf(store, node.blocks, issues)
+      return { ...r.settings, items }
+  },
+})

package/templates/nova/src/sections/Multicolumn/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[] = [
+  // Why buy from us
+  {"name": "mc-reasons", "label": "Three reasons", "settings": {"columns": 3, "showImage": true, "imageRatio": "landscape", "style": "divider"}, "blocks": []},
+  // Service or material points
+  {"name": "mc-icons", "label": "Icon points", "settings": {"columns": 4, "showImage": false, "iconSize": "md", "textAlignment": "center", "style": "plain", "background": "surface-secondary"}, "blocks": []},
+]

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

@@ -0,0 +1,34 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12D · 03 multicolumn — 2–4 equal points with images or icons (the default
+ * "several points" section). divider draws a hairline above each column.
+ * 2 columns at 640–1023; at 390 image-left rows (1:1 thumbnails) that scan
+ * faster than tall stacks, or a swipe row with carouselOnMobile.
+ */
+export const multicolumnSchema = defineSchema(
+  { kind: 'section', name: 'multicolumn', family: '12D', blocks: ['column'] },
+  {
+    subheading: field.text('', { legacyHidden: true }),
+    columns: field.range(3, 2, 4, 1),
+    showImage: field.boolean(true),
+    imageRatio: field.select(['landscape', 'square', 'portrait'], 'landscape'),
+    textAlignment: field.select(['left', 'center'], 'left'),
+    carouselOnMobile: field.boolean(false),
+    iconSize: field.select(['sm', 'md', 'lg'], 'md'),
+    style: field.select(['plain', 'divider'], 'divider'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    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/Newsletter/Newsletter.tsx

@@ -0,0 +1,64 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { RichText } from '../../components/content/RichText'
+import { NewsletterForm } from '../../components/forms/NewsletterForm'
+import { Button } from '../../components/base/Button'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { surfaceOf } from '../../components/section/shared'
+import { resultFor } from '../../components/forms/GatewayFields'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { newsletterSchema } from './schema'
+
+export type NewsletterSettings = SettingsOf<typeof newsletterSchema>
+export interface NewsletterSectionProps extends NewsletterSettings {
+  /** The platform's sign-up endpoint, when it has one (DATA REQUIREMENT). */
+  endpoint?: string
+  /** The outcome of a platform form POST this page answers (`store.formResult`). */
+  formResult?: { formId: string; status: 'ok' | 'invalid' | 'rate_limited' | 'unavailable' | 'expired'; email?: string }
+  onSubscribe?: (email: string, consent: boolean) => Promise<unknown> | void
+}
+
+export function NewsletterSection(props: NewsletterSectionProps): JSX.Element | null {
+  const { body, placeholder, buttonLabel, note, action, buttonUrl, layout, panel, showConsent, sectionWidth, contentWidth, heading, eyebrow, headerSize, background, endpoint, onSubscribe, formResult } = props
+  const { strings } = useNova()
+  const form = action.trim() || endpoint?.trim() || ''
+  // The platform's endpoint posts as its `newsletter` form (theme-abi §1); a merchant's own URL is theirs.
+  const formId = !action.trim() && endpoint?.trim() ? 'newsletter' : undefined
+  if (!form && !buttonUrl.trim()) return <EmptySection props={props} type="newsletter" width={sectionWidth} title={strings.editorNewsletterSetup} hint={strings.editorNewsletterSetupHint} />
+  const card = panel === 'card'
+  const inner = (
+    <div className="nv-newsletter" data-layout={layout} data-measure={contentWidth}>
+      <div className="nv-newsletter__copy">
+        {eyebrow.trim() && <p className="nv-eyebrow"><bdi>{eyebrow}</bdi></p>}
+        {heading.trim() && <h2 className="nv-newsletter__title" data-size={headerSize}><bdi>{heading}</bdi></h2>}
+        <RichText html={body} className="nv-newsletter__body" />
+      </div>
+      <div className="nv-newsletter__action">
+        {form ? (
+          <NewsletterForm action={form} placeholder={placeholder} buttonLabel={buttonLabel} note={note} showConsent={showConsent} onSubscribe={onSubscribe} size={card ? 'md' : 'lg'} formId={formId} result={resultFor(formResult, formId)} />
+        ) : (
+          <>
+            <Button href={buttonUrl} variant="secondary" size="lg" iconEnd={<Icon name="arrow-up-right" size="sm" />}>
+              <bdi>{buttonLabel}</bdi>
+            </Button>
+            {note.trim() && <p className="nv-newsletter__note">{note}</p>}
+          </>
+        )}
+      </div>
+    </div>
+  )
+  // card: the section stays on the page surface; the chosen background colours the card.
+  return (
+    <Shell props={card ? { ...props, background: 'surface' } : props} type="newsletter" width={sectionWidth} className="nv-newsletter-section" data-panel={panel}>
+      {card ? (
+        <div className="nv-newsletter__card" data-bg={background} data-nv-surface={surfaceOf(background)}>
+          {inner}
+        </div>
+      ) : (
+        inner
+      )}
+    </Shell>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { NewsletterSection } from './Newsletter'
+import { presets } from './presets'
+import { newsletterSchema } from './schema'
+
+export default defineSection({
+  id: 'newsletter',
+  schema: newsletterSchema,
+  component: NewsletterSection,
+  category: 'marketing',
+  zone: 'main',
+  title: 'Newsletter',
+  description: 'Heading, text and an email field.',
+  icon: '✉',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(newsletterSchema, node.settings)
+      return { ...r.settings, endpoint: store.newsletterEndpoint, formResult: store.formResult }
+  },
+})