create-tanqory-theme 0.0.0-stage → 0.2.2

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

@@ -0,0 +1,26 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+
+/**
+ * 12A · 02 announcement-bar — one line of merchant-authored news, centred,
+ * 13px, 40px tall (min 44 at 390). Up to three messages; rotation is opt-in
+ * (5s, 200ms fade) and ALWAYS pausable (WCAG 2.2.2): paused on hover/focus,
+ * off under reduced motion. Hidden controls keep their slot so the message
+ * never shifts. The bar never computes anything — it says what the merchant
+ * wrote. No messages → renders nothing (editor: "Add a message" frame).
+ */
+export const announcementBarSchema = defineSchema(
+  { kind: 'section', name: 'announcement-bar', family: '12A' },
+  {
+    text: field.text(''),
+    link: field.url(''),
+    text2: field.text(''),
+    link2: field.url(''),
+    text3: field.text(''),
+    link3: field.url(''),
+    // Section-specific vocabulary; legacy surface-secondary → muted, primary → brand.
+    background: field.select(['muted', 'inverse', 'brand'], 'muted', { legacy: { 'surface-secondary': 'muted', primary: 'brand' } }),
+    rotation: field.boolean(false),
+    showArrows: field.boolean(true),
+    dismissible: field.boolean(false),
+  },
+)

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

@@ -0,0 +1,129 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { formatDate } from '../../components/content/ArticleCard'
+import { HeroFrame } from '../../components/content/HeroFrame'
+import { LongForm, headingsOf, readingMinutes } from '../../components/content/LongForm'
+import { ShareButtons } from '../../components/content/ShareButtons'
+import { Breadcrumb } from '../../components/navigation/Breadcrumb'
+import { HeroMedia } from '../../components/content/HeroMedia'
+import { EditorChip } from '../../components/states/EditorFrame'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { Article } from '@tanqory/theme-kit'
+import { initials } from '../TeamFounders/blocks/Person'
+import { Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/editorial.css'
+import { articleBodySchema } from './schema'
+
+export type ArticleBodySettings = SettingsOf<typeof articleBodySchema>
+export interface ArticleBodyProps extends ArticleBodySettings {
+  article?: (Article & { contentHtml?: string }) | null
+  /** The blog it belongs to (the 390 back link). */
+  blog?: { title: string; url: string } | null
+}
+
+export function ArticleBody(props: ArticleBodyProps): JSX.Element | null {
+  const { showDate, showReadingTime, showAuthor, showFeaturedImage, featuredImageStyle, showShare, showContents, showTags, width, fallbackTitle, fallbackBody, sectionWidth, contentWidth, contentAlignment, headerSize, article, blog } = props
+  const { mode, locale, strings } = useNova()
+  const sample = !article && mode === 'editor'
+  if (!article && !sample) return null
+  const a: Article & { contentHtml?: string } = article ?? { id: 'sample', handle: 'sample', title: fallbackTitle, url: '#', publishedAt: '2026-01-01', blogHandle: 'journal', contentHtml: fallbackBody || `<p>${strings.editorSampleArticle}</p>` }
+  const html = a.contentHtml ?? ''
+  const measure = width ?? contentWidth
+  const minutes = a.readingMinutes ?? readingMinutes(html)
+  const heads = headingsOf(html)
+  const contents = showContents && heads.length >= 2
+  const tag = a.tags?.[0]
+  const behind = showFeaturedImage && featuredImageStyle === 'behind-title' && a.image
+  const meta = (
+    <p className="nv-article__meta">
+      {tag && <a className="nv-article__tag" href={`/blogs/${a.blogHandle}/tagged/${tag}`}>{tag[0].toUpperCase() + tag.slice(1)}</a>}
+      {[showDate && formatDate(a.publishedAt, locale), showReadingTime && fmt(strings.minRead, { n: minutes })].filter(Boolean).map((t) => (
+        <span key={String(t)}>{t}</span>
+      ))}
+    </p>
+  )
+  const author = showAuthor && a.author && (
+    <p className="nv-article__author">
+      <span className="nv-article__monogram" aria-hidden>
+        {initials(a.author)}
+      </span>
+      <span>
+        <span className="nv-article__author-name"><bdi>{a.author}</bdi></span>
+        <span className="nv-article__author-meta">
+          {[formatDate(a.publishedAt, locale), fmt(strings.minRead, { n: minutes })].join(' · ')}
+        </span>
+      </span>
+    </p>
+  )
+  const title = (
+    <h1 className="nv-longhead__title" data-size={headerSize}>
+      <bdi>{a.title}</bdi>
+    </h1>
+  )
+  return (
+    <Shell props={props} type="article-body" width={sectionWidth} className="nv-article" data-image={behind ? 'behind' : showFeaturedImage && a.image ? 'below' : 'none'} data-measure={measure}>
+      {sample && <EditorChip section="article-body" />}
+      {blog && (
+        <div className="nv-article__back">
+          <Breadcrumb items={[{ title: blog.title, url: blog.url }, { title: a.title }]} showCurrent={false} />
+        </div>
+      )}
+      {behind ? (
+        <div className="nv-article__hero">
+          <HeroFrame position="bottom" scrim={0.62} media={<HeroMedia image={a.image} />}>
+            <div className="nv-media-frame__copy nv-longhead" data-nv-surface="inverse">
+              {title}
+            </div>
+          </HeroFrame>
+          <header className="nv-longhead" data-measure={measure} data-align={contentAlignment}>
+            {author || meta}
+          </header>
+        </div>
+      ) : (
+        <header className="nv-longhead" data-align={contentAlignment} data-measure={measure}>
+          {meta}
+          {title}
+          {a.excerpt && <p className="nv-article__standfirst"><bdi>{a.excerpt}</bdi></p>}
+          {author}
+        </header>
+      )}
+      {!behind && showFeaturedImage && a.image && (
+        <figure className="nv-article__image">
+          <img src={a.image.src} srcSet={a.image.srcSet} sizes="(min-width: 1024px) 960px, 100vw" alt={a.image.alt ?? ''} width={a.image.width} height={a.image.height} decoding="async" />
+        </figure>
+      )}
+      <div className="nv-article__body" data-contents={contents ? '' : undefined}>
+        {contents && (
+          <nav className="nv-article__contents" aria-label={strings.contents}>
+            <details open>
+              <summary>{strings.contents}</summary>
+              <ol>
+                {heads.map((h) => (
+                  <li key={h.id}>
+                    <a href={`#${h.id}`}><bdi>{h.text}</bdi></a>
+                  </li>
+                ))}
+              </ol>
+            </details>
+          </nav>
+        )}
+        <LongForm html={html} measure={measure} headingIds={contents} />
+      </div>
+      {(showTags || showShare) && (
+        <footer className="nv-article__foot" data-measure={measure}>
+          {showTags && (a.tags?.length ?? 0) > 0 && (
+            <ul className="nv-article__tags" aria-label={strings.tags}>
+              {a.tags!.map((t) => (
+                <li key={t}>
+                  <a href={`/blogs/${a.blogHandle}/tagged/${t}`}>{t[0].toUpperCase() + t.slice(1)}</a>
+                </li>
+              ))}
+            </ul>
+          )}
+          {showShare && <ShareButtons url={a.url} title={a.title} />}
+        </footer>
+      )}
+    </Shell>
+  )
+}

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

@@ -0,0 +1,21 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { ArticleBody } from './ArticleBody'
+import { presets } from './presets'
+import { articleBodySchema } from './schema'
+
+export default defineSection({
+  id: 'article-body',
+  schema: articleBodySchema,
+  component: ArticleBody,
+  category: 'content',
+  zone: 'main',
+  title: 'Article content',
+  description: 'The full text and images of a blog article.',
+  icon: '✎',
+  requiresContext: ['article'],
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(articleBodySchema, node.settings)
+      return { ...r.settings, article: store.currentArticle ?? null, blog: store.currentBlog ?? null }
+  },
+})

package/templates/nova/src/sections/ArticleBody/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 journal article
+  {"name": "article-standard", "label": "Standard article", "settings": {"showFeaturedImage": true, "featuredImageStyle": "below-title", "showDate": true, "showReadingTime": true, "showTags": true, "showShare": true}, "blocks": []},
+  // Feature story with hero image
+  {"name": "article-longform", "label": "Long-form feature", "settings": {"featuredImageStyle": "behind-title", "showAuthor": true, "contentWidth": "narrow"}, "blocks": []},
+  // Short updates
+  {"name": "article-minimal", "label": "Minimal note", "settings": {"showFeaturedImage": false, "showShare": false, "showTags": false}, "blocks": []},
+]

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

@@ -0,0 +1,40 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12E · 02 article-body — the article header (tag chip · date · reading time,
+ * title 48 → 32, the excerpt as a 19 standfirst, author line), the featured
+ * image (below the title at 960 16:9, or behind it: a full-bleed hero with the
+ * 62% floor), the text through the prose system, then tags and share.
+ * Reading time is computed (≈ 230 wpm; Thai by characters) — no platform data.
+ * Contents (from h2s) sit beside the text on desktop when ≥ 4 headings, a
+ * collapsed disclosure at 390. Author photo and bio are not in article data
+ * (DATA REQUIREMENT) → an initials monogram.
+ */
+export const articleBodySchema = defineSchema(
+  { kind: 'section', name: 'article-body', family: '12E' },
+  {
+    showDate: field.boolean(true),
+    showReadingTime: field.boolean(true),
+    showAuthor: field.boolean(false),
+    showFeaturedImage: field.boolean(true),
+    featuredImageStyle: field.select(['below-title', 'behind-title'], 'below-title'),
+    showShare: field.boolean(true),
+    showContents: field.boolean(false),
+    showTags: field.boolean(true),
+    width: field.select(['narrow', 'content'], 'narrow', { legacyHidden: true }),
+    fallbackTitle: field.text('Article'),
+    fallbackBody: field.richtext(''),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentWidth: shared.contentWidth('narrow'),
+    contentAlignment: shared.contentAlignment('left'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('medium'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('large'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,47 @@
+import { useRef, useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { BeforeAfterSlider } from '../../components/content/BeforeAfterSlider'
+import { SectionHead } from '../../components/content/SectionHead'
+import type { ComparisonInstance } from './blocks/Comparison'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { useScrollRegion } from '../../styles/scroll'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/editorial.css'
+import { beforeAfterSchema } from './schema'
+
+export type BeforeAfterSettings = SettingsOf<typeof beforeAfterSchema>
+export interface BeforeAfterProps extends BeforeAfterSettings {
+  comparisons?: ComparisonInstance[]
+}
+
+export function BeforeAfter(props: BeforeAfterProps): JSX.Element | null {
+  const { layout, startPosition, ratio, beforeLabel, afterLabel, mediaPosition, sectionWidth, contentAlignment, heading, eyebrow, description, headerSize, comparisons = [] } = props
+  const { strings } = useNova()
+  const strip = useRef<HTMLUListElement>(null)
+  const region = useScrollRegion(strip, heading || strings.editorAddComparison, [comparisons.length], { list: true })
+  const [at, setAt] = useState(0)
+  const list = comparisons.filter((c) => c.before && c.after).slice(0, 4)
+  if (!list.length) return <EmptySection props={props} type="before-after" width={sectionWidth} title={strings.editorAddComparison} />
+  return (
+    <Shell props={props} type="before-after" width={sectionWidth} className="nv-before-after" data-media={mediaPosition}>
+      <div className="nv-before-after__grid">
+        <SectionHead eyebrow={eyebrow} heading={heading} description={description} headerSize={headerSize} align={contentAlignment} />
+        <div className="nv-before-after__media">
+          <ul ref={strip} className="nv-before-after__list" {...region} onScroll={(e) => setAt(Math.round(e.currentTarget.scrollLeft / Math.max(1, e.currentTarget.clientWidth)))}>
+            {list.map((c, i) => (
+              <li key={i}>
+                <figure className="nv-before-after__figure">
+                  <BeforeAfterSlider before={c.before!} after={c.after!} alt={c.settings.alt} start={startPosition} beforeLabel={beforeLabel} afterLabel={afterLabel} ratio={ratio} layout={layout} />
+                  {c.settings.caption.trim() && <figcaption className="nv-before-after__caption"><bdi>{c.settings.caption}</bdi></figcaption>}
+                </figure>
+              </li>
+            ))}
+          </ul>
+          {list.length > 1 && <p className="nv-before-after__count nv-tabular" aria-hidden>{fmt(strings.comparisonOf, { index: Math.abs(at) + 1, count: list.length })}</p>}
+        </div>
+      </div>
+    </Shell>
+  )
+}

package/templates/nova/src/sections/BeforeAfter/blocks/Comparison.tsx

@@ -0,0 +1,20 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaImage } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/** 12E · comparison block (before-after) — two images with the same framing, a caption and alt text describing the change. Skipped unless both images are set. */
+export const comparisonSchema = defineSchema(
+  { kind: 'block', name: 'comparison', family: '12E', parents: ['before-after'], title: 'Comparison', description: 'One before and after image pair.', icon: '◐' },
+  {
+    beforeImage: field.resource('image'),
+    afterImage: field.resource('image'),
+    caption: field.text(''),
+    alt: field.text(''),
+  },
+)
+export type ComparisonSettings = SettingsOf<typeof comparisonSchema>
+export interface ComparisonInstance {
+  settings: ComparisonSettings
+  before?: NovaImage | null
+  after?: NovaImage | null
+}

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

@@ -0,0 +1,28 @@
+import { defineSection, imageFor, resolveSettings } from '@tanqory/theme-kit'
+import { BeforeAfter } from './BeforeAfter'
+import { comparisonSchema } from './blocks/Comparison'
+import { presets } from './presets'
+import { beforeAfterSchema } from './schema'
+
+export default defineSection({
+  id: 'before-after',
+  schema: beforeAfterSchema,
+  blocks: [comparisonSchema],
+  component: BeforeAfter,
+  category: 'content',
+  zone: 'main',
+  title: 'Before & after',
+  description: 'Before and after image pairs that show a change.',
+  icon: '◐',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(beforeAfterSchema, node.settings)
+      const issues = [...r.issues]
+      const comparisons = (node.blocks ?? []).filter((b) => b.type === 'comparison').map((b) => {
+        const br = resolveSettings(comparisonSchema, b.settings)
+        issues.push(...br.issues)
+        return { settings: br.settings, before: imageFor(store, br.handles.beforeImage), after: imageFor(store, br.handles.afterImage) }
+      })
+      return { ...r.settings, comparisons }
+  },
+})

package/templates/nova/src/sections/BeforeAfter/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 strong comparison
+  {"name": "ba-proof", "label": "Proof slider", "settings": {"layout": "slider", "ratio": "landscape", "mediaPosition": "end"}, "blocks": []},
+  // Several comparisons
+  {"name": "ba-results", "label": "Results set", "settings": {"layout": "slider", "ratio": "square", "mediaPosition": "full"}, "blocks": []},
+  // Calm comparison
+  {"name": "ba-side", "label": "Side by side", "settings": {"layout": "side-by-side", "ratio": "portrait"}, "blocks": []},
+]

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

@@ -0,0 +1,34 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12E · 05 before-after (NEW) — proof in one image: a keyboard slider over
+ * two aligned photos (repair, restoration, skincare, cleaning), or the calm
+ * side-by-side. Up to four comparisons (> 1 → a swipe row with a count).
+ * mediaPosition end / start puts the heading beside it; full places the
+ * comparison under the header at content width. Stacked at 390.
+ */
+export const beforeAfterSchema = defineSchema(
+  { kind: 'section', name: 'before-after', family: '12E', blocks: ['comparison'] },
+  {
+    layout: field.select(['slider', 'side-by-side'], 'slider'),
+    startPosition: field.range(50, 10, 90, 5),
+    ratio: field.select(['landscape', 'square', 'portrait'], 'landscape'),
+    beforeLabel: field.text('Before'),
+    afterLabel: field.text('After'),
+    mediaPosition: field.select(['end', 'start', 'full'], 'end'),
+    // 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/BlogPosts/BlogPosts.tsx

@@ -0,0 +1,106 @@
+import { useRef } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { ArticleCard, formatDate } from '../../components/content/ArticleCard'
+import { HeroFrame } from '../../components/content/HeroFrame'
+import { RichText } from '../../components/content/RichText'
+import { SectionHead } from '../../components/content/SectionHead'
+import { Pagination } from '../../components/navigation/Pagination'
+import { HeroMedia } from '../../components/content/HeroMedia'
+import { useNova } from '../../styles/NovaProvider'
+import { useScrollRegion } from '../../styles/scroll'
+import type { Blog } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/editorial.css'
+import { blogPostsSchema } from './schema'
+
+export type BlogPostsSettings = SettingsOf<typeof blogPostsSchema>
+export interface BlogPostsProps extends BlogPostsSettings {
+  blog?: Blog | null
+  /** The selected tag (tag filter). */
+  activeTag?: string
+  onTagChange?: (tag: string | null) => void
+  /** paginate: the current page and a URL for any page. */
+  page?: number
+  pageHref?: (page: number) => string
+  /** paginate: total posts (the host pages). */
+  total?: number
+}
+
+export function BlogPosts(props: BlogPostsProps): JSX.Element | null {
+  const { fallbackTitle, columns, postsToShow, showExcerpt, featuredFirst, featuredStyle, showDate, showTagFilter, filterTags, paginate, imageRatio, fallbackEmpty, sectionWidth, contentAlignment, heading, eyebrow, description, headerSize, blog, activeTag, onTagChange, page = 1, pageHref, total } = props
+  const { mode, strings, locale } = useNova()
+  const tabs = useRef<HTMLUListElement>(null)
+  const tabRegion = useScrollRegion(tabs, strings.filterStories, [filterTags], { list: true })
+  if (!blog) return mode === 'editor' ? <EmptySection props={props} type="blog-posts" width={sectionWidth} title={fallbackTitle} hint={strings.editorChooseBlog} /> : null
+  const tags = filterTags.split(',').map((t) => t.trim()).filter(Boolean)
+  const all = activeTag ? blog.articles.filter((a) => a.tags?.includes(activeTag)) : blog.articles
+  const perPage = paginate ? 9 : postsToShow
+  const posts = all.slice(0, perPage)
+  const [lead, ...rest] = featuredFirst ? posts : [undefined, ...posts]
+  const title = heading.trim() || ''
+  const viewAll = !paginate && all.length > posts.length ? <a className="nv-row__view-all" href={blog.url}>{strings.allStories}</a> : undefined
+  return (
+    <Shell props={props} type="blog-posts" width={sectionWidth} className="nv-blog" data-columns={columns}>
+      <SectionHead eyebrow={eyebrow} heading={title} description={description} headerSize={headerSize} align={contentAlignment} link={viewAll} />
+      {showTagFilter && tags.length > 0 && (
+        <ul ref={tabs} className="nv-blog__tags" aria-label={strings.filterStories} {...tabRegion}>
+          {[null, ...tags].map((t) => (
+            <li key={t ?? 'all'}>
+              <button type="button" className="nv-blog__tag" aria-pressed={(activeTag ?? null) === t} onClick={() => onTagChange?.(t)}>
+                {t ? t[0].toUpperCase() + t.slice(1) : strings.allTag}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {!posts.length ? (
+        <div className="nv-blog__empty">
+          <RichText html={fallbackEmpty || `<p>${strings.noStories}</p>`} />
+        </div>
+      ) : (
+        <>
+          {lead && (
+            <article className="nv-blog__lead" data-style={featuredStyle} data-no-image={lead.image ? undefined : ''}>
+              {featuredStyle === 'overlay' && lead.image ? (
+                <HeroFrame position="bottom" scrim={0.62} media={<HeroMedia image={lead.image} />}>
+                  <div className="nv-media-frame__copy nv-blog__lead-text" data-nv-surface="inverse">
+                    <p className="nv-article-card__meta">{[lead.tags?.[0], showDate && formatDate(lead.publishedAt, locale)].filter(Boolean).join(' · ')}</p>
+                    <h3 className="nv-blog__lead-title"><a href={lead.url} className="nv-article-card__link"><bdi>{lead.title}</bdi></a></h3>
+                  </div>
+                </HeroFrame>
+              ) : (
+                <>
+                  {lead.image && (
+                    <div className="nv-blog__lead-media">
+                      <img src={lead.image.src} alt="" width={lead.image.width || undefined} height={lead.image.height || undefined} loading={paginate ? 'eager' : 'lazy'} decoding="async" />
+                    </div>
+                  )}
+                  <div className="nv-blog__lead-text">
+                    <p className="nv-article-card__meta">{[lead.tags?.[0] && lead.tags[0][0].toUpperCase() + lead.tags[0].slice(1), showDate && formatDate(lead.publishedAt, locale)].filter(Boolean).join(' · ')}</p>
+                    <h3 className="nv-blog__lead-title">
+                      <a href={lead.url} className="nv-article-card__link"><bdi>{lead.title}</bdi></a>
+                    </h3>
+                    {lead.excerpt && <p className="nv-blog__lead-excerpt"><bdi>{lead.excerpt}</bdi></p>}
+                    <span className="nv-blog__read" aria-hidden>{strings.readStory}</span>
+                  </div>
+                </>
+              )}
+            </article>
+          )}
+          {rest.length > 0 && (
+            <ul className="nv-blog__grid">
+              {rest.map((a, i) => a && (
+                <li key={a.id}>
+                  {/* The blog page's own listing (paged) opens the page: its first row is the largest paint. */}
+                  <ArticleCard article={a} ratio={imageRatio} showExcerpt={showExcerpt} showDate={showDate} priority={paginate && !lead && i < Number(columns)} />
+                </li>
+              ))}
+            </ul>
+          )}
+          {paginate && pageHref && (total ?? all.length) > perPage && <div className="nv-blog__pages"><Pagination page={page} pages={Math.ceil((total ?? all.length) / perPage)} href={pageHref} /></div>}
+        </>
+      )}
+    </Shell>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { BlogPosts } from './BlogPosts'
+import { presets } from './presets'
+import { blogPostsSchema } from './schema'
+
+export default defineSection({
+  id: 'blog-posts',
+  schema: blogPostsSchema,
+  component: BlogPosts,
+  category: 'content',
+  zone: 'main',
+  title: 'Blog posts',
+  description: 'Latest articles from a blog, as cards.',
+  icon: '✎',
+  requiresContext: ['blog'],
+  presets,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(blogPostsSchema, node.settings)
+      // The chosen blog, else the blog this page is (a blog template sets none:
+      // /blogs/<handle> must list its own articles).
+      const handle = r.handles.blog || store.currentBlog?.url.match(/^\/blogs\/([^/?#]+)/)?.[1]
+      const blog = (handle ? store.blogs?.[decodeURIComponent(handle)] : undefined) ?? null
+      return {
+        ...r.settings,
+        blog,
+        activeTag: store.currentTag,
+        onTagChange: (tag: string | null) => blog && actions.navigate(tag ? `${blog.url}/tagged/${encodeURIComponent(tag)}` : blog.url),
+      }
+  },
+})

package/templates/nova/src/sections/BlogPosts/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[] = [
+  // Main blog listing
+  {"name": "blog-journal", "label": "Journal page", "settings": {"columns": "3", "featuredFirst": true, "featuredStyle": "split", "showExcerpt": true, "showTagFilter": true, "paginate": true}, "blocks": []},
+  // 3 latest posts on other pages
+  {"name": "blog-row", "label": "From the journal", "settings": {"columns": "3", "postsToShow": 3, "showExcerpt": false, "background": "surface-secondary"}, "blocks": []},
+  // Photography-led journal
+  {"name": "blog-featured", "label": "Featured stories", "settings": {"columns": "2", "featuredFirst": true, "featuredStyle": "overlay", "imageRatio": "landscape"}, "blocks": []},
+]

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

@@ -0,0 +1,42 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12E · 03 blog-posts — the journal listing and the "From the journal" row.
+ * Card: 3:2 image, tag · date, title, optional excerpt. featuredFirst turns
+ * the first post into a split (7 / 5) or overlay feature (Nova 11 · A2).
+ * Tag filter tabs are pills (selected = ink fill; the URL updates — host).
+ * At 390 cards after the featured post become image-left rows.
+ * An empty blog shows fallbackEmpty ("No stories yet.") centred, narrow.
+ */
+export const blogPostsSchema = defineSchema(
+  { kind: 'section', name: 'blog-posts', family: '12E' },
+  {
+    blog: field.resource('blog'),
+    fallbackTitle: field.text('Journal'),
+    columns: field.select(['2', '3', '4'], '3'),
+    postsToShow: field.range(3, 1, 9, 1),
+    showExcerpt: field.boolean(false),
+    featuredFirst: field.boolean(false),
+    featuredStyle: field.select(['split', 'overlay'], 'split'),
+    showDate: field.boolean(true),
+    showTagFilter: field.boolean(false),
+    filterTags: field.text(''),
+    paginate: field.boolean(false),
+    imageRatio: field.select(['landscape', 'square', 'adapt'], 'landscape'),
+    fallbackEmpty: field.richtext(''),
+    // 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/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,10 @@
+.nv-breadcrumbs__container { display: flex; align-items: center; gap: var(--space-3); margin-inline: auto; padding-inline: var(--page-gutter); }
+.nv-breadcrumbs[data-width='standard'] .nv-breadcrumbs__container { max-width: calc(var(--container-standard) + 2 * var(--page-gutter)); }
+.nv-breadcrumbs[data-width='wide'] .nv-breadcrumbs__container { max-width: calc(var(--container-wide) + 2 * var(--page-gutter)); }
+/* small = 20 below the header (12 at 390) — the trail hugs the chrome. */
+.nv-breadcrumbs[data-space-top='small'] { --nv-space-top: 1.25rem; }
+.nv-breadcrumbs[data-space-bottom='small'] { --nv-space-bottom: 1.25rem; }
+@media (max-width: 639.98px) {
+  .nv-breadcrumbs[data-space-top='small'] { --nv-space-top: 0.75rem; }
+  .nv-breadcrumbs[data-space-bottom='small'] { --nv-space-bottom: 0.75rem; }
+}

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

@@ -0,0 +1,41 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { Breadcrumb } from '../../components/navigation/Breadcrumb'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorChip } from '../../components/states/EditorFrame'
+import type { BreadcrumbItem } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import './Breadcrumbs.css'
+import { breadcrumbsSchema } from './schema'
+
+export type BreadcrumbsSettings = SettingsOf<typeof breadcrumbsSchema>
+export interface BreadcrumbsProps extends BreadcrumbsSettings {
+  /** The route's trail, home first, current page last (no url). */
+  items?: BreadcrumbItem[]
+  /** Absolute origin for structured data URLs. */
+  origin?: string
+}
+
+const SAMPLE: BreadcrumbItem[] = [{ title: 'Home', url: '/' }, { title: 'Collection', url: '/collections/all' }, { title: 'Product' }]
+
+export function Breadcrumbs(props: BreadcrumbsProps): JSX.Element | null {
+  const { separator, mobileStyle, showCurrent, sectionWidth, items = [], origin = '' } = props
+  const { mode } = useNova()
+  const sample = items.length < 2 && mode === 'editor'
+  const trail = sample ? SAMPLE : items
+  if (trail.length < 2) return null
+  const jsonLd = !sample && {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: trail.map((t, i) => ({ '@type': 'ListItem', position: i + 1, name: t.title, ...(t.url ? { item: origin + t.url } : {}) })),
+  }
+  return (
+    <div {...sectionRootProps(props, 'breadcrumbs')} className="nv-breadcrumbs" data-width={sectionWidth}>
+      <div className="nv-breadcrumbs__container">
+        {sample && <EditorChip section="breadcrumbs" />}
+        <Breadcrumb items={trail} separator={separator} mobileStyle={mobileStyle} showCurrent={showCurrent} />
+      </div>
+      {jsonLd && <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c') }} />}
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { Breadcrumbs } from './Breadcrumbs'
+import { presets } from './presets'
+import { breadcrumbsSchema } from './schema'
+
+export default defineSection({
+  id: 'breadcrumbs',
+  schema: breadcrumbsSchema,
+  component: Breadcrumbs,
+  category: 'layout',
+  zone: 'main',
+  title: 'Breadcrumbs',
+  description: 'Home › parent › current, built from the page you are on.',
+  icon: '›',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(breadcrumbsSchema, node.settings)
+      return { ...r.settings, items: store.breadcrumbs }
+  },
+})