create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/blank/scripts/build.mjs

@@ -0,0 +1,193 @@
+/**
+ * Build the theme as a Theme ABI v2 theme directory (the layout `theme-conformance` runs and the platform's build
+ * service packages into an artifact):
+ *
+ *   dist/abi/manifest.json                 ThemeManifest v2, JCS + "\n" (from the theme's declarations)
+ *   dist/abi/server/entry.mjs              render(request, ctx) + manifest: one file, no imports
+ *   dist/abi/client/client-manifest.json   every browser file with its sha256 digest and SRI; one isEntry script
+ *   dist/abi/client/assets/*               content-hashed browser files
+ *   dist/abi/defaults/{settings.json, regions/*.json, templates/*.json}
+ *   dist/abi/locales/<lang>.json           the theme's strings over the kit's
+ *
+ *   node scripts/build.mjs        exit 1 on any contract problem or hard size limit
+ *
+ * Vite and every package resolve from this theme's own node_modules.
+ */
+import { execFileSync } from 'node:child_process'
+import { createRequire } from 'node:module'
+import { createHash } from 'node:crypto'
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import { gzipSync } from 'node:zlib'
+
+const theme = join(dirname(fileURLToPath(import.meta.url)), '..')
+const out = join(theme, 'dist', 'abi')
+const require = createRequire(join(theme, 'package.json'))
+const pkg = JSON.parse(readFileSync(join(theme, 'package.json'), 'utf8'))
+const vitePkg = require.resolve('vite/package.json')
+const vite = join(dirname(vitePkg), JSON.parse(readFileSync(vitePkg, 'utf8')).bin.vite)
+const load = (spec) => import(pathToFileURL(require.resolve(spec)).href)
+
+const { buildManifest, checkContent, withKitStrings, canonicalize } = await load('@tanqory/theme-kit/build')
+const { validateManifest, validateFieldValue, PLATFORM_ROUTES } = await load('@tanqory/theme-abi')
+const { LIMITS } = await load('@tanqory/theme-abi/limits')
+
+const fail = (msg, list = []) => {
+  console.error(`✗ ${msg}`)
+  for (const l of list) console.error(`  - ${l}`)
+  process.exit(1)
+}
+const readJson = (p) => JSON.parse(readFileSync(p, 'utf8'))
+const writeJcs = (path, value) => {
+  mkdirSync(dirname(path), { recursive: true })
+  writeFileSync(path, `${canonicalize(value)}\n`)
+}
+const viteBuild = (config) => execFileSync(process.execPath, [vite, 'build', '--config', config, '--logLevel', 'warn'], { cwd: theme, stdio: 'inherit' })
+
+// The kit's browser wire uses the contract's two prefixes.
+if (PLATFORM_ROUTES.data !== '/_tq/data/' || PLATFORM_ROUTES.actions !== '/_tq/actions/') fail('PLATFORM_ROUTES changed: update @tanqory/theme-kit')
+
+// Registry 2 (Appendix B.2): image/video may name a shipped `asset:client/assets/<file>`; text_alignment adds start/end.
+const ASSET = /^asset:client\/assets\/([A-Za-z0-9._-]+)$/
+const assetDir = join(theme, 'assets')
+const shipped = new Set(existsSync(assetDir) ? readdirSync(assetDir) : [])
+const checkValue = (type, value, spec) => {
+  if (type === 'text_alignment' && (value === 'start' || value === 'end')) return { ok: true }
+  if ((type === 'image' || type === 'video') && typeof value === 'string' && value.startsWith('asset:')) {
+    const m = ASSET.exec(value)
+    return m && shipped.has(m[1]) ? { ok: true } : { ok: false, errors: [{ message: `${value} is not a file under assets/`, code: 'asset_ref_missing' }] }
+  }
+  return validateFieldValue(type, value, spec)
+}
+
+// 1. the theme's declarations, loaded in Node
+viteBuild('vite.probe.config.ts')
+const probe = await import(pathToFileURL(join(theme, 'dist', '.probe', 'probe.mjs')).href)
+
+// 2. the manifest + starter content, every stored value checked
+const { manifest, problems } = buildManifest({
+  name: pkg.name,
+  version: pkg.version,
+  theme: probe.theme,
+  settings: probe.settings,
+  templates: probe.TEMPLATES,
+  forms: { newsletter: true, contact: true },
+  // Stock counts on the product page ("Only 3 left").
+  capabilities: { server: ['data:inventory'], browser: ['data:inventory'] },
+  checkValue,
+})
+const templates = {}
+for (const f of readdirSync(join(theme, 'templates')).filter((n) => n.endsWith('.json')).sort()) {
+  const name = f.replace(/\.json$/, '')
+  if (!probe.TEMPLATES[name]) problems.push(`templates/${f}: not in src/templates.ts`)
+  const doc = readJson(join(theme, 'templates', f))
+  if (doc.template !== name) problems.push(`templates/${f}: "template" must be "${name}"`)
+  for (const [rid, r] of Object.entries(doc.regions ?? {})) problems.push(...checkContent(`templates/${f}.regions.${rid}`, r.sections ?? [], manifest, checkValue))
+  templates[name] = doc
+}
+for (const name of Object.keys(probe.TEMPLATES)) if (!templates[name]) problems.push(`templates/${name}.json is missing`)
+const regions = {}
+for (const r of ['header', 'footer']) {
+  const doc = readJson(join(theme, 'regions', `${r}.json`))
+  problems.push(...checkContent(`regions/${r}.json`, doc.sections ?? [], manifest, checkValue))
+  regions[r] = doc
+}
+const values = readJson(join(theme, 'config', 'settings.json'))
+const specs = new Map(manifest.settingsSchema.flatMap((g) => g.items.map((it) => [it.key, it])))
+for (const [k, v] of Object.entries(values)) {
+  const spec = specs.get(k)
+  if (!spec) problems.push(`config/settings.json.${k}: not a theme setting`)
+  else {
+    const r = checkValue(spec.type, v, spec)
+    if (!r.ok) problems.push(`config/settings.json.${k}: ${r.errors.map((e) => e.message).join('; ')}`)
+  }
+}
+const valid = validateManifest(manifest)
+if (!valid.ok) for (const e of valid.errors) problems.push(`manifest${e.path}: ${e.message} (${e.code ?? e.keyword})`)
+if (problems.length) fail(`${problems.length} contract problem(s)`, problems)
+
+// 3. strings: the theme's over the kit's, for the bundle and for the artifact
+const locales = {}
+for (const f of readdirSync(join(theme, 'locales')).filter((n) => n.endsWith('.json'))) locales[f.replace(/\.json$/, '')] = readJson(join(theme, 'locales', f))
+const merged = withKitStrings(locales)
+const gen = join(theme, 'src', 'generated')
+rmSync(gen, { recursive: true, force: true })
+for (const [lang, map] of Object.entries(merged)) writeJcs(join(gen, 'locales', `${lang}.json`), map)
+writeJcs(join(gen, 'manifest.json'), manifest)
+
+// 4. the browser bundle, then the serve entry (which imports the generated manifest)
+rmSync(out, { recursive: true, force: true })
+viteBuild('vite.client.config.ts')
+viteBuild('vite.server.config.ts')
+
+// 5. the theme directory
+mkdirSync(join(out, 'server'), { recursive: true })
+writeFileSync(join(out, 'server', 'entry.mjs'), readFileSync(join(theme, 'dist', 'build', 'server', 'entry.mjs')))
+writeJcs(join(out, 'manifest.json'), manifest)
+const built = join(theme, 'dist', 'build', 'client')
+const clientDir = join(out, 'client')
+const viteManifest = readJson(join(built, '.vite', 'manifest.json'))
+const files = []
+const walk = (dir) => {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name)
+    if (statSync(p).isDirectory()) {
+      if (name !== '.vite') walk(p)
+    } else files.push(relative(built, p).split('\\').join('/'))
+  }
+}
+walk(built)
+for (const f of shipped) files.push(`assets/${f}`)
+const source = (f) => (f.startsWith('assets/') && shipped.has(f.slice(7)) && !existsSync(join(built, f)) ? join(assetDir, f.slice(7)) : join(built, f))
+const kindOf = (f) => (/\.m?js$/.test(f) ? 'script' : /\.css$/.test(f) ? 'style' : /\.(woff2?|ttf|otf)$/.test(f) ? 'font' : /\.(png|jpe?g|gif|svg|webp|avif|ico)$/.test(f) ? 'image' : 'other')
+const entryKey = Object.keys(viteManifest).find((k) => viteManifest[k].isEntry)
+if (!entryKey) fail('vite produced no entry chunk')
+const importsOf = (key, seen = new Set()) => {
+  for (const imp of viteManifest[key]?.imports ?? []) if (!seen.has(imp)) importsOf(imp, seen.add(imp))
+  return seen
+}
+const entryImports = [...importsOf(entryKey)].map((k) => viteManifest[k].file)
+const entryCss = [...new Set([entryKey, ...importsOf(entryKey)].flatMap((k) => viteManifest[k].css ?? []))]
+const clientManifest = {}
+for (const f of [...new Set(files)].sort()) {
+  const bytes = readFileSync(source(f))
+  mkdirSync(dirname(join(clientDir, f)), { recursive: true })
+  writeFileSync(join(clientDir, f), bytes)
+  const sha = createHash('sha256').update(bytes).digest()
+  const isEntry = f === viteManifest[entryKey].file
+  clientManifest[isEntry ? 'main' : f] = {
+    file: f,
+    kind: kindOf(f),
+    ...(isEntry ? { isEntry: true, css: entryCss, imports: entryImports } : {}),
+    size: bytes.length,
+    digest: `sha256:${sha.toString('hex')}`,
+    integrity: `sha256-${sha.toString('base64')}`,
+  }
+}
+writeJcs(join(clientDir, 'client-manifest.json'), clientManifest)
+writeJcs(join(out, 'defaults', 'settings.json'), { contentVersion: manifest.contentVersion, values })
+for (const [name, doc] of Object.entries(regions)) writeJcs(join(out, 'defaults', 'regions', `${name}.json`), doc)
+for (const [name, doc] of Object.entries(templates)) writeJcs(join(out, 'defaults', 'templates', `${name}.json`), doc)
+for (const [lang, map] of Object.entries(merged)) writeJcs(join(out, 'locales', `${lang}.json`), map)
+
+// 6. sizes against the limits table (§8): over budget warns, over hard fails
+const entry = readFileSync(join(out, 'server', 'entry.mjs'))
+const gz = (b) => gzipSync(b, { level: 9 }).length
+const initial = [viteManifest[entryKey].file, ...entryImports, ...entryCss].reduce((n, f) => n + gz(readFileSync(join(clientDir, f))), 0)
+const rows = [
+  ['ssrEntryRawBytes', entry.length],
+  ['ssrEntryGzipBytes', gz(entry)],
+  ['manifestBytes', readFileSync(join(out, 'manifest.json')).length],
+  ['clientInitialGzipBytes', initial],
+  ['clientTotalRawBytes', files.reduce((n, f) => n + statSync(join(clientDir, f)).size, 0)],
+]
+let over = false
+for (const [k, v] of rows) {
+  const { budget, hard } = LIMITS[k]
+  const verdict = v > hard ? 'OVER HARD' : budget !== null && v > budget ? 'over budget' : 'ok'
+  if (v > hard) over = true
+  console.log(`${k.padEnd(24)} ${String(v).padStart(10)}  budget ${String(budget).padStart(10)}  hard ${String(hard).padStart(10)}  ${verdict}`)
+}
+if (over) fail('a hard size limit is exceeded')
+console.log(`✓ ${relative(process.cwd(), out) || out}`)

package/templates/blank/scripts/probe.ts

@@ -0,0 +1,4 @@
+/** The theme's declarations, for the build (bundled by vite.probe.config.ts and imported in Node). */
+export { default as theme } from '../src/theme'
+export { settings } from '../src/settings'
+export { TEMPLATES } from '../src/templates'

package/templates/blank/src/bundle.ts

@@ -0,0 +1,15 @@
+/** What the kit runtime is handed: the theme and its strings (store-independent, module scope). */
+import type { ThemeBundle } from '@tanqory/theme-kit/headless'
+import theme from './theme'
+
+export const bundle: ThemeBundle = {
+  theme,
+  templates: {},
+  groups: {},
+  // The build lays locales/*.json over the kit's own strings into generated/locales.
+  locales: import.meta.glob('./generated/locales/*.json', { eager: true }),
+  settings: {},
+  settingsSchema: {},
+  customSections: {},
+  manifest: null,
+}

package/templates/blank/src/components/parts.tsx

@@ -0,0 +1,32 @@
+/** Small shared parts: the product card and the product grid. */
+import { Image, formatMoney, useTranslate, type Product } from '@tanqory/theme-kit/headless'
+
+export const cx = (...names: Array<string | false | null | undefined>): string => names.filter(Boolean).join(' ')
+
+export function ProductCard({ product, eager = false }: { product: Product; eager?: boolean }): JSX.Element {
+  const t = useTranslate()
+  const min = product.priceRange.min
+  const ranged = product.priceRange.max.amount > min.amount
+  return (
+    <li className="t-card">
+      <a className="t-card__link" href={product.url}>
+        <span className="t-card__frame">
+          <Image image={product.featuredImage} alt="" className="t-card__img" loading={eager ? 'eager' : 'lazy'} sizes="(max-width: 720px) 50vw, 25vw" fallback={<span className="t-card__img t-card__img--empty" />} />
+        </span>
+        <span className="t-card__title">{product.title}</span>
+        <span className="t-card__price">
+          {ranged ? t('theme.price.from', { price: formatMoney(min) }) : formatMoney(min)}
+          {product.available ? null : <span className="t-card__flag"> · {t('product.soldOut')}</span>}
+        </span>
+      </a>
+    </li>
+  )
+}
+
+export function Grid({ products, busy, eager = 0 }: { products: readonly Product[]; busy?: boolean; eager?: number }): JSX.Element {
+  return (
+    <ul className="t-grid" aria-busy={busy || undefined}>
+      {products.map((p, i) => <ProductCard key={p.id} product={p} eager={i < eager} />)}
+    </ul>
+  )
+}

package/templates/blank/src/entry.client.tsx

@@ -0,0 +1,6 @@
+/** The browser entry: hydrates what the server rendered; on the editor canvas, live edits apply in place. */
+import { hydrate } from '@tanqory/theme-kit/client'
+import { bundle } from './bundle'
+import './styles/theme.css'
+
+hydrate({ bundle })

package/templates/blank/src/entry.server.tsx

@@ -0,0 +1,13 @@
+/**
+ * The serve entry (Theme ABI v2 §1): `render(request, ctx)` + `manifest`, built into one file with no imports.
+ * The render is the kit's; `storefront` turns on what the headless API needs, and `plan.localization` lists the
+ * store's countries for the header's market selector.
+ */
+import type { ThemeManifest } from '@tanqory/theme-abi'
+import { createRender } from '@tanqory/theme-kit/server'
+import { bundle } from './bundle'
+import manifestJson from './generated/manifest.json'
+
+export const manifest = manifestJson as unknown as ThemeManifest
+
+export const render = createRender({ manifest, bundle, storefront: { plan: { localization: true, recommendations: true } } })

package/templates/blank/src/sections/chrome.tsx

@@ -0,0 +1,132 @@
+/** The header and the footer, shared by every page. */
+import { useId, useState } from 'react'
+import {
+  CartToggle,
+  Image,
+  LocalizationForm,
+  SearchForm,
+  ai,
+  defineBlock,
+  defineSection,
+  field,
+  useMenu,
+  useShop,
+  useTranslate,
+  type BlockInstance,
+} from '@tanqory/theme-kit/headless'
+import { cx } from '../components/parts'
+
+function Masthead({ settings }: { settings: { menu: string; tagline: string } }): JSX.Element {
+  const shop = useShop()
+  const menu = useMenu(settings.menu)
+  const t = useTranslate()
+  const navId = useId()
+  const [open, setOpen] = useState(false)
+  return (
+    <header className="t-mast">
+      <a className="t-mast__brand" href="/">
+        {shop.logo ? <Image image={shop.logo} alt={shop.name} className="t-mast__logo" loading="eager" /> : shop.name}
+      </a>
+      {settings.tagline ? <p className="t-mast__tagline">{settings.tagline}</p> : null}
+      <button type="button" className="t-mast__menu" data-tq-action="menu:open" aria-expanded={open} aria-controls={navId} onClick={() => setOpen((o) => !o)}>
+        {t(open ? 'menu.closeMenu' : 'menu.menu')}
+      </button>
+      <nav id={navId} className={cx('t-mast__nav', open && 'is-open')} aria-label={t('theme.nav.main')}>
+        <ul>
+          {(menu?.items ?? []).map((item) => (
+            <li key={`${item.title}-${item.url}`}>
+              <a href={item.url ?? '/'} aria-current={item.active ? 'page' : undefined}>
+                {item.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <div className="t-mast__tools">
+        <SearchForm className="t-find" inputClassName="t-find__input" submit={false} resultsClassName="t-find__results" limit={5} />
+        <LocalizationForm className="t-locale" label="hidden" selectClassName="t-locale__select" />
+        <CartToggle className="t-mast__cart" />
+      </div>
+    </header>
+  )
+}
+
+export const header = defineSection({
+  type: 'header',
+  title: 'Header',
+  description: 'The shop name, the main menu, search, region and the cart.',
+  category: 'chrome',
+  zone: 'header',
+  settings: {
+    menu: field.resource('menu', 'main-menu', { label: 'Menu' }),
+    tagline: field.text('', { label: 'Tagline' }),
+    // The data plan's convention: the header shows the market selector.
+    showLocale: field.boolean(true, { label: 'Show country and language' }),
+  },
+  ai: ai.headerMenu('menu'),
+  component: Masthead,
+})
+
+const footerMenu = defineBlock({
+  type: 'footer-menu',
+  title: 'Menu column',
+  settings: { heading: field.text('', { label: 'Heading' }), menu: field.resource('menu', 'footer', { label: 'Menu' }) },
+})
+const footerBrand = defineBlock({
+  type: 'footer-brand',
+  title: 'Brand',
+  settings: { tagline: field.textarea('', { label: 'Tagline' }) },
+})
+
+function MenuColumn({ block }: { block: BlockInstance }): JSX.Element | null {
+  const menu = useMenu(String(block.settings.menu ?? ''))
+  const t = useTranslate()
+  if (!menu) return null
+  const heading = String(block.settings.heading ?? '') || menu.title
+  return (
+    <nav className="t-foot__col" aria-label={heading || t('theme.footer.menu')}>
+      {heading ? <h2 className="t-foot__heading">{heading}</h2> : null}
+      <ul>
+        {menu.items.map((i) => (
+          <li key={`${i.title}-${i.url}`}>
+            <a href={i.url ?? '/'}>{i.title}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+function Colophon({ blocks }: { blocks: BlockInstance[] }): JSX.Element {
+  const shop = useShop()
+  const t = useTranslate()
+  return (
+    <footer className="t-foot">
+      <div className="t-foot__cols">
+        {blocks.map((b, i) =>
+          b.type === 'footer-brand' ? (
+            <div key={i} className="t-foot__brand">
+              <p className="t-foot__name">{shop.name}</p>
+              {b.settings.tagline ? <p className="t-foot__tagline">{String(b.settings.tagline)}</p> : null}
+            </div>
+          ) : (
+            <MenuColumn key={i} block={b} />
+          ),
+        )}
+      </div>
+      <p className="t-foot__legal">{t('theme.footer.rights', { name: shop.name })}</p>
+    </footer>
+  )
+}
+
+export const footer = defineSection({
+  type: 'footer',
+  title: 'Footer',
+  description: 'The shop name, menu columns and the legal line.',
+  category: 'chrome',
+  zone: 'footer',
+  settings: {},
+  blocks: [footerBrand, footerMenu],
+  ai: [ai.footerMenu('menu', { block: 'footer-menu' }), ai.footerBrand({ block: 'footer-brand' })],
+  component: Colophon,
+})

package/templates/blank/src/sections/commerce.tsx

@@ -0,0 +1,242 @@
+/** Commerce sections: product, recommendations, collection, search, cart and the account page. */
+import {
+  AccountSlot,
+  AddToCart,
+  CartLine,
+  CartLineDecrement,
+  CartLineIncrement,
+  CartLineQuantity,
+  CartLineRemove,
+  CheckoutButton,
+  CollectionProvider,
+  FacetFilters,
+  Image,
+  Pagination,
+  ProductForm,
+  ProductPrice,
+  ProductQuantity,
+  SearchForm,
+  SortSelect,
+  VariantPicker,
+  defineSection,
+  field,
+  formatMoney,
+  useCart,
+  useRecommendations,
+  useSearch,
+  useTranslate,
+  type ProductFormState,
+} from '@tanqory/theme-kit/headless'
+import { Grid } from '../components/parts'
+
+function stockLine(p: ProductFormState, t: ReturnType<typeof useTranslate>): string {
+  if (!p.variant) return ''
+  if (!p.available) return t('product.soldOut')
+  if (p.quantityAvailable !== null && p.quantityAvailable <= 5) return t('product.lowStock', { count: p.quantityAvailable })
+  return t('product.inStock')
+}
+
+function ProductDetail({ settings }: { settings: { showVendor: boolean } }): JSX.Element {
+  const t = useTranslate()
+  return (
+    <ProductForm className="t-pdp">
+      {(p) =>
+        p.product ? (
+          <>
+            <div className="t-pdp__media">
+              <Image image={p.image} className="t-pdp__img" loading="eager" sizes="(max-width: 720px) 100vw, 50vw" fallback={<span className="t-pdp__img t-pdp__img--empty" />} />
+            </div>
+            <div className="t-pdp__info">
+              {settings.showVendor && p.product.vendor ? <p className="t-pdp__vendor">{p.product.vendor}</p> : null}
+              <h1 className="t-pdp__title">{p.product.title}</h1>
+              <ProductPrice className="t-pdp__price" compareClassName="t-pdp__was" />
+              <VariantPicker className="t-pdp__options" optionClassName="t-opt" legendClassName="t-opt__legend" valueClassName="t-chip" />
+              <p className="t-pdp__stock" aria-live="polite">
+                {stockLine(p, t)}
+              </p>
+              <div className="t-pdp__buy">
+                <ProductQuantity className="t-input t-input--qty" />
+                <AddToCart className="t-btn t-btn--solid t-pdp__add" />
+              </div>
+              {p.product.descriptionHtml ? <div className="t-pdp__desc" dangerouslySetInnerHTML={{ __html: p.product.descriptionHtml }} /> : null}
+            </div>
+          </>
+        ) : (
+          <p className="t-muted">{t('theme.product.missing')}</p>
+        )
+      }
+    </ProductForm>
+  )
+}
+
+export const product = defineSection({
+  type: 'product',
+  title: 'Product',
+  description: 'The product: image, title, price, options and add to cart.',
+  category: 'products',
+  requires: ['product'],
+  settings: { showVendor: field.boolean(true, { label: 'Show the brand' }) },
+  component: ProductDetail,
+})
+
+export const recommendations = defineSection({
+  // The data plan's convention: this type loads the product's recommendations in the server render.
+  type: 'product-recommendations',
+  title: 'Recommendations',
+  description: 'Products shoppers buy with this one.',
+  category: 'products',
+  requires: ['product'],
+  settings: { heading: field.text('Worn with', { label: 'Heading' }) },
+  presets: [{ name: 'Recommendations' }],
+  component: function Recommended({ settings }) {
+    const { products } = useRecommendations()
+    if (!products.length) return <section className="t-shelf t-shelf--empty" aria-hidden="true" />
+    return (
+      <section className="t-shelf">
+        <div className="t-shelf__head">
+          <h2 className="t-shelf__title">{settings.heading}</h2>
+        </div>
+        <Grid products={products.slice(0, 4)} />
+      </section>
+    )
+  },
+})
+
+export const collection = defineSection({
+  type: 'collection',
+  title: 'Collection',
+  description: 'The collection’s products with sort, filters and paging.',
+  category: 'products',
+  requires: ['collection'],
+  settings: { showDescription: field.boolean(true, { label: 'Show the description' }) },
+  component: function CollectionPage({ settings }) {
+    const t = useTranslate()
+    return (
+      <CollectionProvider>
+        {(c) => (
+          <section className="t-plp">
+            <header className="t-plp__head">
+              <p className="t-plp__kicker">{t('theme.collection.kicker')}</p>
+              <h1 className="t-plp__title">{c.collection?.title}</h1>
+              {settings.showDescription && c.collection?.description ? <p className="t-plp__desc">{c.collection.description}</p> : null}
+              {c.total !== null ? <p className="t-plp__count">{t('collection.productCount', { count: c.total })}</p> : null}
+            </header>
+            <div className="t-plp__body">
+              <aside className="t-plp__filters" aria-label={t('collection.filter')}>
+                <SortSelect className="t-sort" labelClassName="t-label" />
+                <FacetFilters className="t-facets" facetClassName="t-facet" legendClassName="t-label" valueClassName="t-check" clearClassName="t-link" />
+              </aside>
+              <div className="t-plp__main">
+                {c.products.length ? <Grid products={c.products} busy={c.status === 'loading'} eager={4} /> : <p className="t-muted">{c.filtered ? t('collection.empty') : t('theme.collection.none')}</p>}
+                {c.status === 'error' ? <p className="t-muted" role="alert">{t('collection.loadError')}</p> : null}
+                <Pagination className="t-pages" nextClassName="t-btn" previousClassName="t-btn" />
+              </div>
+            </div>
+          </section>
+        )}
+      </CollectionProvider>
+    )
+  },
+})
+
+export const search = defineSection({
+  type: 'search',
+  title: 'Search results',
+  category: 'products',
+  requires: ['search'],
+  settings: {},
+  component: function SearchPage() {
+    const s = useSearch()
+    const t = useTranslate()
+    return (
+      <section className="t-results">
+        <h1 className="t-results__title">{t('search.search')}</h1>
+        <SearchForm className="t-find t-find--page" inputClassName="t-find__input" buttonClassName="t-btn" resultsClassName="t-find__results" />
+        {s.query ? <p className="t-results__count" role="status">{s.products.length ? t('search.results', { count: s.total ?? s.products.length, query: s.query }) : t('search.none', { query: s.query })}</p> : null}
+        {s.products.length ? <Grid products={s.products} eager={4} /> : null}
+      </section>
+    )
+  },
+})
+
+export const cart = defineSection({
+  type: 'cart',
+  title: 'Cart',
+  category: 'cart',
+  requires: ['cart'],
+  settings: {},
+  component: function CartPage() {
+    const c = useCart()
+    const t = useTranslate()
+    return (
+      <section className="t-cart">
+        <h1 className="t-cart__title">{t('cart.title')}</h1>
+        {c.loadError && !c.ready ? <p className="t-muted" role="status">{t('cart.loadError')}</p> : null}
+        {c.lines.length === 0 ? (
+          <div className="t-cart__empty">
+            <p>{t('cart.empty')}</p>
+            <a className="t-btn" href="/collections/all">
+              {t('theme.cart.continue')}
+            </a>
+          </div>
+        ) : (
+          <>
+            <ul className="t-lines">
+              {c.lines.map((line) => (
+                <CartLine key={line.id} line={line} className="t-line">
+                  {(l) => (
+                    <>
+                      <Image image={line.variant.image} alt="" className="t-line__img" fallback={<span className="t-line__img t-line__img--empty" />} />
+                      <div className="t-line__info">
+                        <a className="t-line__title" href={line.product.url}>
+                          {line.product.title}
+                        </a>
+                        {line.variant.title && line.variant.title !== 'Default Title' ? <p className="t-muted">{line.variant.title}</p> : null}
+                        <p className="t-muted">{formatMoney(line.variant.price)}</p>
+                        {l.refusal ? <p role="alert">{t('cart.limitReached', { max: l.refusal.maxQuantity ?? line.quantity })}</p> : l.failed ? <p role="alert">{t('cart.lineFailed')}</p> : null}
+                      </div>
+                      <div className="t-line__qty">
+                        <CartLineDecrement className="t-step" />
+                        <CartLineQuantity className="t-input t-input--qty" />
+                        <CartLineIncrement className="t-step" />
+                      </div>
+                      <p className="t-line__total">{formatMoney(line.cost.total)}</p>
+                      <CartLineRemove className="t-link" />
+                    </>
+                  )}
+                </CartLine>
+              ))}
+            </ul>
+            <div className="t-cart__summary">
+              <p className="t-cart__row">
+                <span>{t('cart.subtotal')}</span> <span>{formatMoney(c.subtotal)}</span>
+              </p>
+              <p className="t-cart__row t-cart__row--total">
+                <span>{t('cart.total')}</span> <span>{formatMoney(c.total)}</span>
+              </p>
+              <p className="t-muted">{t('theme.cart.taxes')}</p>
+              <CheckoutButton className="t-btn t-btn--solid t-cart__checkout" />
+            </div>
+          </>
+        )}
+      </section>
+    )
+  },
+})
+
+export const account = defineSection({
+  type: 'account',
+  title: 'Account',
+  category: 'account',
+  requires: ['customer'],
+  settings: {},
+  component: function AccountPage() {
+    const t = useTranslate()
+    return (
+      <section className="t-account">
+        <h1 className="t-account__title">{t('account.title')}</h1>
+        <AccountSlot className="t-account__frame" />
+      </section>
+    )
+  },
+})