create-tanqory-theme 0.0.0-stage → 0.2.2

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

@@ -0,0 +1,89 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { CardRow } from '../../components/content/CardRow'
+import { SectionHead } from '../../components/content/SectionHead'
+import { ListingMessage } from '../../components/commerce/ListingParts'
+import { CollectionCard } from '../../components/commerce/CollectionCard'
+import type { CollectionItemInstance } from './blocks/CollectionItem'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorChip, EditorFrame } from '../../components/states/EditorFrame'
+import type { Collection } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/commerce.css'
+import { collectionListSchema } from './schema'
+
+export type CollectionListSettings = SettingsOf<typeof collectionListSchema>
+export interface CollectionListProps extends CollectionListSettings {
+  /** collection-item blocks, resolved (collection null = missing / unpublished). */
+  items?: CollectionItemInstance[]
+  /** No blocks: the saved legacy `collections` handles resolved, else the store's newest collections (adapter). */
+  fallbackCollections?: Collection[]
+}
+
+export function CollectionList(props: CollectionListProps): JSX.Element | null {
+  const { pageHeading, subheading, limit, layout, columns, carouselOnMobile, imageRatio, textStyle, showCount, showDescription, headerAlignment, sectionWidth, heading, eyebrow, description, headerSize, items = [], fallbackCollections = [] } = props
+  const { mode, strings } = useNova()
+  const editor = mode === 'editor'
+  const tiles: { collection: Collection; title?: string }[] = items.length
+    ? items.filter((i) => i.collection).map((i) => ({ collection: i.collection!, title: i.settings.title }))
+    : fallbackCollections.slice(0, limit).map((c) => ({ collection: c }))
+  const skipped = items.filter((i) => !i.collection).length
+
+  if (!tiles.length) {
+    return editor ? (
+      <section {...sectionRootProps(props, 'collection-list')} className="nv-merch">
+        <div className="nv-section-container" data-width={sectionWidth}>
+          <EditorFrame section="collection-list" title={strings.editorAddCollections} hint={strings.editorAddCollectionsHint} />
+        </div>
+      </section>
+    ) : pageHeading ? (
+      // The collections page of a store with none yet: say so and offer the catalog, never a bare page.
+      <section {...sectionRootProps(props, 'collection-list')} className="nv-merch nv-collection-list">
+        <div className="nv-section-container" data-width={sectionWidth}>
+          {heading && <SectionHead eyebrow={eyebrow || subheading} heading={heading} description={description} headerSize={headerSize} level={1} align={headerAlignment} />}
+          <ListingMessage kind="no-collections" shopAllHref="/collections/all" />
+        </div>
+      </section>
+    ) : null
+  }
+  const few = tiles.length <= 2
+  const lead = layout === 'editorial' && !few
+  const cols = few ? tiles.length : columns
+  return (
+    <section {...sectionRootProps(props, 'collection-list')} className="nv-merch nv-collection-list" data-layout={few ? 'few' : layout}>
+      <div className="nv-section-container" data-width={sectionWidth}>
+        {editor && skipped > 0 && (
+          <p className="nv-merch__sample">
+            <EditorChip section="collection-item" /> {strings.editorCollectionUnavailable}
+          </p>
+        )}
+        <CardRow
+          eyebrow={eyebrow || subheading}
+          heading={heading}
+          description={description}
+          headerSize={headerSize}
+          headingLevel={pageHeading ? 1 : 2}
+          align={headerAlignment}
+          layout={layout === 'carousel' ? 'carousel' : 'grid'}
+          columns={cols}
+          carouselOnMobile={carouselOnMobile}
+          label={heading || undefined}
+        >
+          {tiles.map((t, i) => (
+            <CollectionCard
+              key={t.collection.id}
+              collection={t.collection}
+              title={t.title}
+              ratio={few ? 'landscape' : imageRatio}
+              textStyle={lead ? 'overlay' : textStyle}
+              showCount={showCount}
+              showDescription={showDescription}
+              lead={lead && i === 0}
+              titleAs={heading ? (pageHeading ? 'h2' : 'h3') : 'h2'}
+            />
+          ))}
+        </CardRow>
+      </div>
+    </section>
+  )
+}

package/templates/nova/src/sections/CollectionList/blocks/CollectionItem.tsx

@@ -0,0 +1,25 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { Collection } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/**
+ * 12C · collection-item block (collection-list) — one chosen collection, with
+ * an optional title that replaces the collection's. Missing or unpublished
+ * collections are skipped for shoppers; the editor flags the block.
+ * The section renders it as a CollectionCard (tile per layout).
+ */
+export const collectionItemSchema = defineSchema(
+  { kind: 'block', name: 'collection-item', family: '12C', parents: ['collection-list'], title: 'Collection', description: 'One collection, as a linked tile.', icon: '▢' },
+  {
+    collection: field.resource('collection'),
+    title: field.text(''),
+  },
+)
+
+export type CollectionItemSettings = SettingsOf<typeof collectionItemSchema>
+
+/** A resolved collection-item: the adapter looked the handle up. */
+export interface CollectionItemInstance {
+  settings: CollectionItemSettings
+  collection: Collection | null
+}

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

@@ -0,0 +1,33 @@
+import { Collection, collectionFor, defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { CollectionList } from './CollectionList'
+import { collectionItemSchema } from './blocks/CollectionItem'
+import { presets } from './presets'
+import { collectionListSchema } from './schema'
+
+export default defineSection({
+  id: 'collection-list',
+  schema: collectionListSchema,
+  blocks: [collectionItemSchema],
+  component: CollectionList,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Collection list',
+  description: 'A grid of collections with their images.',
+  icon: '☷',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(collectionListSchema, node.settings)
+      const issues = [...r.issues]
+      const items = (node.blocks ?? [])
+        .filter((b) => b.type === 'collection-item')
+        .map((b) => {
+          const br = resolveSettings(collectionItemSchema, b.settings)
+          issues.push(...br.issues)
+          return { settings: br.settings, collection: collectionFor(store, br.handles.collection).collection }
+        })
+      // Legacy: saved comma-separated handles keep rendering when there are no blocks.
+      const legacy = (r.settings.collections ?? '').split(',').map((h) => h.trim()).filter(Boolean)
+      const fallbackCollections = legacy.length ? legacy.map((h) => store.collections?.[h]).filter((c): c is Collection => Boolean(c)) : (store.newestCollections ?? [])
+      return { ...r.settings, items, fallbackCollections }
+  },
+})

package/templates/nova/src/sections/CollectionList/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 shop by category
+  {"name": "cl-grid", "label": "Grid", "settings": {"layout": "grid", "columns": 4, "imageRatio": "portrait", "textStyle": "below", "showCount": true}, "blocks": []},
+  // Compact visual categories
+  {"name": "cl-overlay", "label": "Labels on image", "settings": {"layout": "grid", "columns": 3, "imageRatio": "square", "textStyle": "overlay"}, "blocks": []},
+  // One lead collection + supporting
+  {"name": "cl-editorial", "label": "Editorial", "settings": {"layout": "editorial", "columns": 3, "imageRatio": "portrait"}, "blocks": []},
+]

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

@@ -0,0 +1,41 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12C · 06 collection-list — shop-by-category tiles. Default: portrait images
+ * with name and count beneath; `overlay` puts a white label chip on the image;
+ * `editorial` makes the first collection lead (2 × 2, a grid at 390).
+ *
+ *   collections come from collection-item blocks (canonical); with none, the
+ *   legacy `collections` list, else the newest `limit` collections
+ *   1–2 collections → two wide landscape tiles
+ *   missing / unpublished items → skipped (the editor flags the block)
+ */
+export const collectionListSchema = defineSchema(
+  { kind: 'section', name: 'collection-list', family: '12C', blocks: ['collection-item'] },
+  {
+    pageHeading: field.boolean(false),
+    subheading: field.text('', { legacyHidden: true }),
+    limit: field.number(6, 1, 24, 1),
+    collections: field.text('', { legacyHidden: true }),
+    layout: field.select(['grid', 'carousel', 'editorial'], 'grid'),
+    columns: field.range(4, 2, 5, 1),
+    carouselOnMobile: field.boolean(true),
+    imageRatio: field.select(['square', 'portrait', 'landscape'], 'portrait'),
+    textStyle: field.select(['below', 'overlay'], 'below'),
+    showCount: field.boolean(true),
+    showDescription: field.boolean(false),
+    headerAlignment: field.select(['left', 'center'], 'center'),
+    // 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/ComparisonTable/ComparisonTable.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { ComparisonTable, sameRow, type ComparisonColumn } from '../../components/commerce/ComparisonTable'
+import type { CompareItemInstance } from './blocks/CompareItem'
+import { Switch } from '../../components/base/Switch'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { Product } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/trust.css'
+import { comparisonTableSchema } from './schema'
+
+export type ComparisonTableSettings = SettingsOf<typeof comparisonTableSchema>
+export interface ComparisonTableSectionProps extends ComparisonTableSettings {
+  items?: CompareItemInstance[]
+  onAdd?: (product: Product) => void
+}
+
+export const featureLines = (text: string): string[] => text.split('\n').map((l) => l.trim())
+
+export function ComparisonTableSection(props: ComparisonTableSectionProps): JSX.Element | null {
+  const { features, highlight, showProductRow, showDifferencesToggle, sectionWidth, contentAlignment, heading, eyebrow, description, headerSize, items = [], onAdd } = props
+  const { strings, mode } = useNova()
+  const [diff, setDiff] = useState(false)
+  const rows = featureLines(features).filter(Boolean)
+  const columns: ComparisonColumn[] = items
+    .filter((it) => it.settings.title.trim() || it.product)
+    .slice(0, 4)
+    .map((it) => ({
+      title: it.settings.title.trim() || it.product?.title || '',
+      image: it.image ?? it.product?.featuredImage ?? null,
+      product: it.product ?? null,
+      values: featureLines(it.settings.values),
+    }))
+  if (columns.length < 2 || !rows.length) return <EmptySection props={props} type="comparison-table" width={sectionWidth} title={strings.editorCompareTitle} hint={strings.editorCompareHint} />
+  const differing = rows.filter((_, i) => !sameRow(columns.map((c) => c.values[i]))).length
+  const missing = columns.reduce((n, c) => n + rows.filter((_, i) => !c.values[i]).length, 0)
+  const toggle = showDifferencesToggle && <Switch label={strings.showDifferences} checked={diff} onChange={(e) => setDiff(e.target.checked)} />
+  return (
+    <Shell props={props} type="comparison-table" width={sectionWidth} className="nv-compare-section">
+      <SectionHead eyebrow={eyebrow} heading={heading} description={description} headerSize={headerSize} align={contentAlignment} link={toggle || undefined} />
+      {!heading && toggle && <div className="nv-compare-section__bare">{toggle}</div>}
+      {mode === 'editor' && missing > 0 && <p className="nv-trust__editor-note">{fmt(strings.editorMissingValues, { count: missing })}</p>}
+      <p className="nv-visually-hidden" aria-live="polite">
+        {diff ? fmt(strings.showingRows, { shown: differing, total: rows.length }) : ''}
+      </p>
+      <ComparisonTable features={rows} columns={columns} highlight={highlight} showProductRow={showProductRow} differencesOnly={diff} onAdd={onAdd} caption={heading || undefined} />
+    </Shell>
+  )
+}

package/templates/nova/src/sections/ComparisonTable/blocks/CompareItem.tsx

@@ -0,0 +1,26 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaImage, Product } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/**
+ * 12F · compare-item block (comparison-table) — one column. The product
+ * (optional) supplies image, price and Add to cart; title / image fall back
+ * to it. values: one per feature row, "yes" / "no" render ✓ / — — the
+ * fallback for a matrix editor (NEEDS NEW FIELD TYPE). Skipped when both
+ * title and product are empty.
+ */
+export const compareItemSchema = defineSchema(
+  { kind: 'block', name: 'compare-item', family: '12F', parents: ['comparison-table'], title: 'Compared item', description: 'One compared item and its feature values.', icon: '⊟' },
+  {
+    product: field.resource('product'),
+    title: field.text(''),
+    image: field.resource('image'),
+    values: field.textarea(''),
+  },
+)
+export type CompareItemSettings = SettingsOf<typeof compareItemSchema>
+export interface CompareItemInstance {
+  settings: CompareItemSettings
+  product?: Product | null
+  image?: NovaImage | null
+}

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

@@ -0,0 +1,31 @@
+import { defineSection, imageFor, Product, productFor, resolveSettings } from '@tanqory/theme-kit'
+import { addProduct, blocksOf } from '../data'
+import { ComparisonTableSection } from './ComparisonTable'
+import { compareItemSchema } from './blocks/CompareItem'
+import { presets } from './presets'
+import { comparisonTableSchema } from './schema'
+
+export default defineSection({
+  id: 'comparison-table',
+  schema: comparisonTableSchema,
+  blocks: [compareItemSchema],
+  component: ComparisonTableSection,
+  category: 'trust',
+  zone: 'main',
+  title: 'Comparison table',
+  description: 'A table that compares two to four items feature by feature.',
+  icon: '⊟',
+  presets,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(comparisonTableSchema, node.settings)
+      const issues = [...r.issues]
+      const items = blocksOf(node, 'compare-item').map((b) => {
+        const br = resolveSettings(compareItemSchema, b.settings)
+        issues.push(...br.issues)
+        return { settings: br.settings, product: productFor(store, br.handles.product).product, image: imageFor(store, br.handles.image) }
+      })
+      return { ...r.settings, items,
+      onAdd: (product: Product) => addProduct(actions, product),
+    }
+  },
+})

package/templates/nova/src/sections/ComparisonTable/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[] = [
+  // Choose between 2–4 products
+  {"name": "compare-products", "label": "Compare products", "settings": {"highlight": 2, "showProductRow": true}, "blocks": []},
+  // Size or plan chart
+  {"name": "compare-sizes", "label": "Compare sizes", "settings": {"highlight": 0, "showProductRow": false, "showDifferencesToggle": false}, "blocks": []},
+]

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

@@ -0,0 +1,31 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12F · 07 comparison-table (NEW) — choose between 2–4 products (or sizes,
+ * plans). Columns are compare-item blocks; rows are the features, one per
+ * line (the fallback for a matrix editor — NEEDS NEW FIELD TYPE). One
+ * column can be recommended. A missing value renders — (the editor flags
+ * the row). contentAlignment applies to the header only.
+ */
+export const comparisonTableSchema = defineSchema(
+  { kind: 'section', name: 'comparison-table', family: '12F', blocks: ['compare-item'] },
+  {
+    features: field.textarea(''),
+    highlight: field.range(0, 0, 4, 1),
+    showProductRow: field.boolean(true),
+    showDifferencesToggle: field.boolean(true),
+    // 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/ContactForm/ContactForm.tsx

@@ -0,0 +1,83 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { RichText } from '../../components/content/RichText'
+import { ContactForm, type ContactFieldId, type ContactValues } from '../../components/forms/ContactForm'
+import type { ContactDetailSettings } from './blocks/ContactDetail'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { contactFormSchema } from './schema'
+import { resultFor } from '../../components/forms/GatewayFields'
+
+export type ContactFormSettings = SettingsOf<typeof contactFormSchema>
+export interface ContactFormSectionProps extends ContactFormSettings {
+  details?: ContactDetailSettings[]
+  /** The store's contact email / phone (Settings › General), shown when no detail row already gives one. */
+  shopEmail?: string
+  shopPhone?: string
+  /** The platform's contact 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 }
+  onSend?: (values: ContactValues) => Promise<unknown> | void
+}
+
+/** The first detail that is an email: its address for the fallback link and the failure message. */
+export function emailOf(details: readonly ContactDetailSettings[]): string | undefined {
+  const d = details.find((x) => x.link.startsWith('mailto:') || /@/.test(x.value))
+  return d ? (d.link.startsWith('mailto:') ? d.link.slice(7).split('?')[0] : d.value.trim()) : undefined
+}
+
+/** The store's own email / phone as detail rows, each only when set and not already one of the merchant's rows. */
+export function storeContact(own: readonly ContactDetailSettings[], email: string | undefined, phone: string | undefined, strings: { email: string; phone: string }): ContactDetailSettings[] {
+  const out: ContactDetailSettings[] = []
+  if (email?.trim() && !emailOf(own)) out.push({ label: strings.email, value: email.trim(), link: `mailto:${email.trim()}` })
+  if (phone?.trim() && !own.some((d) => d.link.startsWith('tel:'))) out.push({ label: strings.phone, value: phone.trim(), link: `tel:${phone.replace(/[^0-9+]/g, '')}` })
+  return out
+}
+
+export function ContactFormSection(props: ContactFormSectionProps): JSX.Element | null {
+  const { pageHeading, subheading, layout, fields, successMessage, buttonLabel, action, sectionWidth, contentWidth, heading, eyebrow, description, headerSize, details = [], shopEmail, shopPhone, endpoint, onSend, formResult } = props
+  const { strings } = useNova()
+  const own = details.filter((d) => d.value.trim())
+  const list = [...own, ...storeContact(own, shopEmail, shopPhone, strings)]
+  const form = action.trim() || endpoint?.trim() || ''
+  // The platform's endpoint posts as its `contact` form (theme-abi §1); a merchant's own URL is theirs.
+  const formId = !action.trim() && endpoint?.trim() ? 'contact' : undefined
+  const email = emailOf(list)
+  if (!form && !list.length) return <EmptySection props={props} type="contact-form" width={sectionWidth} title={strings.editorContactSetup} hint={strings.editorContactSetupHint} />
+  const H = pageHeading ? 'h1' : 'h2'
+  const intro = description.trim() || subheading?.trim() || ''
+  return (
+    <Shell props={props} type="contact-form" width={sectionWidth} className="nv-contact" data-layout={layout}>
+      <div className="nv-contact__grid" data-measure={contentWidth}>
+        <div className="nv-contact__aside">
+          {eyebrow.trim() && <p className="nv-eyebrow"><bdi>{eyebrow}</bdi></p>}
+          {heading.trim() && <H className="nv-utility__title" data-size={headerSize}><bdi>{heading}</bdi></H>}
+          {intro && <RichText html={intro} className="nv-contact__intro" />}
+          {list.length > 0 && (
+            <dl className="nv-contact__details">
+              {list.map((d, i) => (
+                <div key={i}>
+                  <dt><bdi>{d.label}</bdi></dt>
+                  <dd>{d.link.trim() ? <a href={d.link}>{d.value}</a> : d.value}</dd>
+                </div>
+              ))}
+            </dl>
+          )}
+          {!form && email && (
+            <Button href={`mailto:${email}`} variant="secondary" size="lg">
+              {strings.emailUs}
+            </Button>
+          )}
+        </div>
+        {form && (
+          <div className="nv-contact__form">
+            <ContactForm fields={fields.split(',') as ContactFieldId[]} action={form} buttonLabel={buttonLabel} successMessage={successMessage} fallbackEmail={email} onSend={onSend} formId={formId} result={resultFor(formResult, formId)} />
+          </div>
+        )}
+      </div>
+    </Shell>
+  )
+}

package/templates/nova/src/sections/ContactForm/blocks/ContactDetail.tsx

@@ -0,0 +1,13 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/** 12G · contact-detail block (contact-form) — a label ("Email"), its value and an optional link (mailto:, tel:, a page). Skipped when the value is empty. */
+export const contactDetailSchema = defineSchema(
+  { kind: 'block', name: 'contact-detail', family: '12G', parents: ['contact-form'], title: 'Contact detail', description: 'One row of the contact details: a label and a value, optionally linked.', icon: '☰' },
+  {
+    label: field.text(''),
+    value: field.text(''),
+    link: field.url(''),
+  },
+)
+export type ContactDetailSettings = SettingsOf<typeof contactDetailSchema>

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

@@ -0,0 +1,29 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { blocksOf } from '../data'
+import { ContactFormSection } from './ContactForm'
+import { contactDetailSchema } from './blocks/ContactDetail'
+import { presets } from './presets'
+import { contactFormSchema } from './schema'
+
+export default defineSection({
+  id: 'contact-form',
+  schema: contactFormSchema,
+  blocks: [contactDetailSchema],
+  component: ContactFormSection,
+  category: 'forms',
+  zone: 'main',
+  title: 'Contact form',
+  description: 'Name, email and message fields that send to you.',
+  icon: '✉',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(contactFormSchema, node.settings)
+      const issues = [...r.issues]
+      const details = blocksOf(node, 'contact-detail').map((b) => {
+        const br = resolveSettings(contactDetailSchema, b.settings)
+        issues.push(...br.issues)
+        return br.settings
+      })
+      return { ...r.settings, details, shopEmail: store.shop.email, shopPhone: store.shop.phone, endpoint: store.contactEndpoint, formResult: store.formResult }
+  },
+})

package/templates/nova/src/sections/ContactForm/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[] = [
+  // Details beside form
+  {"name": "contact-split", "label": "Contact page", "settings": {"layout": "split", "fields": "name,email,phone,message", "pageHeading": true}, "blocks": []},
+  // Short form
+  {"name": "contact-simple", "label": "Simple contact", "settings": {"layout": "stacked", "fields": "email,message"}, "blocks": []},
+]

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

@@ -0,0 +1,34 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 07 contact-form (EXISTING · CHANGED) — contact details (blocks) and
+ * a form that renders only with an endpoint (DATA REQUIREMENT); without one
+ * the details and an email link stand alone — never a dead form. split puts
+ * the details beside the form (stacked < 1024). subheading (LEGACY-HIDDEN)
+ * renders as the shared description.
+ */
+export const contactFormSchema = defineSchema(
+  { kind: 'section', name: 'contact-form', family: '12G', blocks: ['contact-detail'] },
+  {
+    pageHeading: field.boolean(false),
+    subheading: field.text("We'll reply within one business day.", { legacyHidden: true }),
+    layout: field.select(['stacked', 'split'], 'stacked'),
+    fields: field.select(['name,email,message', 'name,email,phone,message', 'email,message'], 'name,email,message'),
+    successMessage: field.text('Thanks — we’ll reply soon.'),
+    buttonLabel: field.text('Send message'),
+    action: field.url(''),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('standard'),
+    contentWidth: shared.contentWidth('content'),
+    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/Divider/Divider.css

@@ -0,0 +1,17 @@
+/* Space above and below: 24 / 40 / 64 / 96 · 390: 16 / 24 / 40 / 56. */
+.nv-divider { --nv-div-space: 2.5rem; --nv-div-color: var(--color-border); --nv-div-thickness: 1px; padding-block: var(--nv-div-space); }
+.nv-divider[data-spacing='sm'] { --nv-div-space: 1.5rem; }
+.nv-divider[data-spacing='lg'] { --nv-div-space: 4rem; }
+.nv-divider[data-spacing='xl'] { --nv-div-space: 6rem; }
+@media (max-width: 639.98px) {
+  .nv-divider { --nv-div-space: 1.5rem; }
+  .nv-divider[data-spacing='sm'] { --nv-div-space: 1rem; }
+  .nv-divider[data-spacing='lg'] { --nv-div-space: 2.5rem; }
+  .nv-divider[data-spacing='xl'] { --nv-div-space: 3.5rem; }
+}
+.nv-divider[data-style='line-strong'] { --nv-div-color: var(--color-fg); }
+.nv-divider[data-thickness='2'] { --nv-div-thickness: 2px; }
+.nv-divider__container { margin-inline: auto; padding-inline: var(--page-gutter); }
+.nv-divider[data-width='standard'] .nv-divider__container { max-width: calc(var(--container-standard) + 2 * var(--page-gutter)); }
+.nv-divider[data-width='wide'] .nv-divider__container { max-width: calc(var(--container-wide) + 2 * var(--page-gutter)); }
+.nv-divider[data-width='full'] .nv-divider__container { padding-inline: 0; }

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

@@ -0,0 +1,21 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { Divider } from '../../components/base/Divider'
+import './Divider.css'
+import { dividerSchema } from './schema'
+
+export type DividerSectionProps = SettingsOf<typeof dividerSchema>
+
+/** The section: a Divider primitive at a container width with section rhythm. */
+export function DividerSection({ style, width, spacing, label, thickness }: DividerSectionProps): JSX.Element {
+  return (
+    <div className="nv-divider" data-nv-divider="" data-style={style} data-width={width} data-spacing={spacing} data-thickness={thickness === '2' ? '2' : undefined}>
+      <div className="nv-divider__container">
+        {style === 'space' ? (
+          <div className="nv-divider__space" aria-hidden />
+        ) : (
+          <Divider label={label} tone={style === 'line-strong' ? 'strong' : 'subtle'} thickness={thickness === '2' ? 2 : 1} />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { DividerSection, DividerSectionProps } from './Divider'
+import { presets } from './presets'
+import { dividerSchema } from './schema'
+
+export default defineSection({
+  id: 'divider',
+  schema: dividerSchema,
+  component: DividerSection,
+  category: 'layout',
+  zone: 'main',
+  title: 'Divider',
+  description: 'A thin rule between two sections.',
+  icon: '—',
+  presets,
+  data: (node) => {
+      const r = resolveSettings(dividerSchema, node.settings)
+      return r.settings as DividerSectionProps
+  },
+})

package/templates/nova/src/sections/Divider/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[] = [
+  // Quiet separation
+  {"name": "divider-hairline", "label": "Hairline", "settings": {"style": "line-subtle", "width": "wide", "spacing": "md"}, "blocks": []},
+  // Label between long-page parts
+  {"name": "divider-chapter", "label": "Chapter break", "settings": {"style": "line-subtle", "width": "standard", "spacing": "lg"}, "blocks": []},
+  // Extra rhythm without a line
+  {"name": "divider-space", "label": "Breathing space", "settings": {"style": "space", "spacing": "lg"}, "blocks": []},
+]

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

@@ -0,0 +1,24 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { SECTION_WIDTH } from '../../components/section/shared'
+
+/**
+ * 12A · 05 divider — a pause between sections. Default: subtle hairline at
+ * the wide container. An optional label (12/500 muted, centred between two
+ * lines) makes it a chapter break. Decorative: role="separator"; the label is
+ * plain text, not a heading (no outline entry).
+ *
+ * `spacing` persists sm · md · lg · xl while every other section persists
+ * small · medium · large · xl — the contract keeps both (OPEN, needs a
+ * migration to unify); labels are identical so merchants see one vocabulary.
+ */
+export const dividerSchema = defineSchema(
+  { kind: 'section', name: 'divider', family: '12A' },
+  {
+    style: field.select(['line-subtle', 'line-strong', 'space'], 'line-subtle'),
+    width: field.select(SECTION_WIDTH, 'wide', { semantic: 'sectionWidth' }),
+    spacing: field.select(['sm', 'md', 'lg', 'xl'], 'md'),
+    label: field.text(''),
+    // Saved 2 keeps rendering a 2px line; hidden. Replacement: style line-strong.
+    thickness: field.select(['1', '2'], '1', { legacyHidden: true }),
+  },
+)