@tanqory/dev-mcp 0.0.0-stage → 0.1.0-alpha.1

package/bundled/examples/blank/src/styles/theme.css

@@ -0,0 +1,195 @@
+/* Blank: the minimum CSS that keeps the storefront usable (layout, focus, touch targets, the drawer and the
+   menu on small screens). No brand, no palette, no type scale: this file is yours to replace.
+   Keep these three properties when you restyle, the storefront checks rely on them:
+   - every standalone link and button is at least 44 × 44 px (touch targets);
+   - focus is visible (:focus-visible outline);
+   - text is never changed with text-transform (the editor's live edit compares what the canvas shows with what
+     the merchant typed; use font-variant-caps for small capitals). */
+:root {
+  --t-ink: #111;
+  --t-bg: #fff;
+  --t-muted: #555;
+  --t-line: #ddd;
+  --t-panel: #f6f6f6;
+  --t-gutter: clamp(16px, 4vw, 32px);
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body { color: var(--t-ink); background: var(--t-bg); font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans Thai', sans-serif; line-height: 1.5; }
+.t { min-height: 100vh; }
+.t--wide .t-pdp, .t--wide .t-plp { max-width: none; }
+.tq-node { display: contents; }
+.t a { color: inherit; }
+.t :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.t h1, .t h2, .t h3 { line-height: 1.2; margin: 0; }
+.t-muted { color: var(--t-muted); }
+.t-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 12px 16px; background: var(--t-ink); color: var(--t-bg) !important; }
+.t-skip:focus { left: 8px; }
+main#main:focus { outline: none; }
+
+/* buttons, inputs */
+.t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--t-ink); background: transparent; color: var(--t-ink); font: inherit; text-decoration: none; cursor: pointer; }
+.t-btn--solid, .t a.t-btn--solid { background: var(--t-ink); color: var(--t-bg); }
+.t-btn[disabled], .t-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
+.t-link { min-height: 44px; min-width: 44px; padding: 10px 4px; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
+.t-input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-ink); font: inherit; }
+.t-input--qty { width: 72px; text-align: center; }
+.t-label { display: block; margin-bottom: 4px; }
+.t select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-ink); font: inherit; }
+
+/* header */
+.t-mast { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 24px; padding: 12px var(--t-gutter); border-bottom: 1px solid var(--t-line); }
+.t-mast__brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; text-decoration: none; }
+.t-mast__logo { max-height: 40px; width: auto; height: auto; }
+.t-mast__tagline { display: none; }
+.t-mast__menu { display: none; }
+.t-mast__nav ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
+.t .t-mast__nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
+.t-mast__nav a[aria-current='page'] { text-decoration: underline; }
+.t-mast__tools { display: flex; align-items: center; gap: 12px; }
+.t-mast__cart { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; text-decoration: none; }
+.t-find { position: relative; }
+.t-find__input { width: 180px; min-height: 44px; padding: 8px; border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-ink); font: inherit; }
+.t-find__results:not(:empty) { position: absolute; z-index: 30; top: 100%; right: 0; width: min(320px, 90vw); margin-top: 4px; padding: 4px 0; background: var(--t-bg); border: 1px solid var(--t-line); }
+.t-find__results ul { list-style: none; margin: 0; padding: 0; }
+.t .t-find__results a { display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; padding: 8px 12px; text-decoration: none; }
+.t-find--page .t-find__input { width: min(100%, 480px); }
+.t-locale { display: flex; gap: 8px; }
+.t-locale__select { max-width: 220px; }
+
+/* sections */
+.t-hero { position: relative; display: grid; place-items: center; min-height: 320px; padding: 64px var(--t-gutter); text-align: center; overflow: hidden; background: var(--t-panel); }
+.t-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
+.t-hero__copy { position: relative; max-width: 760px; }
+.t-hero__kicker { margin: 0 0 12px; }
+.t-hero__body { margin: 16px auto 0; max-width: 560px; }
+.t-hero .t-btn { margin-top: 24px; }
+.t-shelf, .t-note, .t-letters, .t-results, .t-cart, .t-page, .t-journal, .t-story, .t-lost, .t-account, .t-contact { padding: 40px var(--t-gutter); }
+.t-shelf--empty { padding: 0; }
+.t-shelf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
+.t-shelf__all { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
+.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 20px; list-style: none; margin: 0; padding: 0; }
+.t-grid[aria-busy='true'] { opacity: 0.55; }
+.t .t-card__link { display: flex; flex-direction: column; gap: 6px; min-height: 44px; text-decoration: none; }
+.t-card__frame { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--t-panel); }
+.t-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.t-card__price { color: var(--t-muted); }
+.t-note { max-width: 720px; margin: 0 auto; }
+.t-letters { display: grid; gap: 12px; border-top: 1px solid var(--t-line); }
+.t-letters__body { margin: 0; }
+.t-letters__form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
+.t-letters__form .t-input { flex: 1 1 220px; }
+.t-letters__msg, .t-form__msg { flex-basis: 100%; margin: 0; }
+
+/* product */
+.t-pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; max-width: 1200px; padding: 32px var(--t-gutter); }
+.t-pdp__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--t-panel); }
+.t-pdp__info { display: flex; flex-direction: column; gap: 16px; }
+.t-pdp__vendor { margin: 0; color: var(--t-muted); }
+.t-pdp__was { margin-right: 8px; color: var(--t-muted); }
+.t-pdp__options { display: grid; gap: 12px; }
+.t-opt { margin: 0; padding: 0; border: 0; }
+.t-opt__legend { margin-bottom: 8px; padding: 0; }
+.t-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 8px 8px 0; padding: 8px 14px; border: 1px solid var(--t-line); cursor: pointer; }
+.t-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.t-chip[data-selected='true'] { border-color: var(--t-ink); font-weight: 600; }
+.t-chip[data-available='false'] span { text-decoration: line-through; }
+.t-chip:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
+.t-pdp__stock { margin: 0; color: var(--t-muted); }
+.t-pdp__buy { display: flex; gap: 8px; }
+.t-pdp__add { flex: 1; }
+.t-pdp__desc { border-top: 1px solid var(--t-line); padding-top: 16px; }
+
+/* collection */
+.t-plp { max-width: 1400px; padding: 32px var(--t-gutter); }
+.t-plp__head { margin-bottom: 24px; }
+.t-plp__kicker { margin: 0 0 4px; color: var(--t-muted); }
+.t-plp__count { color: var(--t-muted); }
+.t-plp__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
+.t-plp__filters { display: grid; align-content: start; gap: 20px; }
+.t-facets { display: grid; gap: 16px; }
+.t-facet { margin: 0; padding: 0; border: 0; }
+.t-facet legend { margin-bottom: 8px; padding: 0; }
+.t-check { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
+.t-check input { width: 20px; height: 20px; }
+.t-check[data-active='true'] { font-weight: 600; }
+.t-facet input[type='number'] { width: 100%; min-height: 44px; margin: 4px 0 8px; padding: 6px 10px; border: 1px solid var(--t-line); font: inherit; }
+.t-pages { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
+
+/* search, cart */
+.t-results .t-find { display: flex; gap: 8px; margin: 16px 0; }
+.t-cart__empty { display: grid; justify-items: start; gap: 12px; }
+.t-lines { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--t-line); }
+.t-line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--t-line); }
+.t-line[data-busy='true'] { opacity: 0.6; }
+.t-line__img { display: block; width: 80px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--t-panel); }
+.t-line__info p { margin: 4px 0 0; }
+.t .t-line__title { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
+.t-line__qty { display: flex; align-items: center; gap: 4px; }
+.t-step { min-width: 44px; min-height: 44px; border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-ink); font: inherit; cursor: pointer; }
+.t-line__total { margin: 0; min-width: 88px; text-align: right; }
+.t-cart__summary { display: grid; justify-items: end; gap: 8px; margin-top: 20px; }
+.t-cart__row { display: flex; gap: 24px; margin: 0; }
+.t-cart__checkout { min-width: 240px; }
+
+/* cart drawer */
+.t-drawer__backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.4); }
+.t-drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; width: min(400px, 100vw); padding: 20px; overflow-y: auto; background: var(--t-bg); border-left: 1px solid var(--t-line); }
+.t-drawer:focus { outline: none; }
+.t-drawer__head { display: flex; align-items: center; justify-content: space-between; }
+.t-drawer__close { min-height: 44px; min-width: 44px; padding: 0 8px; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
+.t-drawer__lines { list-style: none; margin: 0; padding: 0; }
+.t-drawer__line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--t-line); }
+.t-drawer__line p { margin: 0; }
+.t-drawer__img { display: block; width: 64px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--t-panel); }
+.t-drawer__total { display: flex; justify-content: space-between; margin: 8px 0; }
+
+/* content */
+.t-page, .t-story { max-width: 720px; margin: 0 auto; }
+.t-page__title, .t-story__title, .t-journal__title, .t-lost__title, .t-account__title { margin-bottom: 20px; }
+.t-story__back { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-bottom: 12px; }
+.t-journal__list { display: grid; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-line); }
+.t .t-journal__link { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--t-line); text-decoration: none; }
+.t-journal__excerpt, .t-journal__more { color: var(--t-muted); }
+.t-lost { display: grid; justify-items: center; gap: 12px; min-height: 50vh; align-content: center; text-align: center; }
+.t-account__frame { display: block; width: 100%; min-height: 640px; border: 1px solid var(--t-line); }
+.t-form { display: grid; gap: 8px; max-width: 520px; }
+.t-form .t-input { width: 100%; margin-bottom: 8px; }
+.t-form textarea.t-input { min-height: 120px; }
+
+/* footer */
+.t-foot { padding: 40px var(--t-gutter) 24px; border-top: 1px solid var(--t-line); }
+.t-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
+.t-foot__name { margin: 0 0 8px; font-weight: 600; }
+.t-foot__tagline { margin: 0; max-width: 320px; color: var(--t-muted); }
+.t-foot__heading { margin-bottom: 8px; font-size: 1rem; }
+.t-foot ul { list-style: none; margin: 0; padding: 0; }
+.t .t-foot li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
+.t-foot__legal { margin: 32px 0 0; color: var(--t-muted); }
+
+/* consent banner */
+.t-consent { position: fixed; z-index: 35; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; padding: 16px; background: var(--t-bg); border: 1px solid var(--t-ink); }
+.t-consent p { flex: 1 1 300px; margin: 0; }
+
+/* small screens: brand · cart · menu on one line; the menu opens the links, search and region below it */
+@media (max-width: 900px) {
+  .t-mast { grid-template-columns: 1fr auto auto; gap: 8px 12px; }
+  .t-mast__menu { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 12px; background: none; border: 1px solid var(--t-line); color: inherit; font: inherit; cursor: pointer; }
+  .t-mast__nav { display: none; grid-column: 1 / -1; order: 5; }
+  .t-mast__nav.is-open { display: block; }
+  .t-mast__nav ul { flex-direction: column; }
+  .t-mast__tools { display: contents; }
+  .t-mast__cart { grid-row: 1; grid-column: 2; }
+  .t-mast__menu { grid-row: 1; grid-column: 3; }
+  .t-find, .t-locale { display: none; grid-column: 1 / -1; order: 6; }
+  .t-mast__nav.is-open ~ .t-mast__tools .t-find, .t-mast__nav.is-open ~ .t-mast__tools .t-locale { display: flex; }
+  .t-find__input { width: 100%; }
+  .t-locale { flex-wrap: wrap; }
+  .t-pdp { grid-template-columns: 1fr; gap: 20px; }
+  .t-plp__body { grid-template-columns: 1fr; }
+  .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
+  .t-line { grid-template-columns: 72px 1fr; }
+  .t-line__img { width: 72px; }
+  .t-line__qty, .t-line__total { grid-column: 2; }
+  .t-line__total { text-align: left; }
+}

package/bundled/examples/blank/src/templates.ts

@@ -0,0 +1,14 @@
+/** Template name → the route kind it renders (templates/<name>.json holds its starter content). */
+export const TEMPLATES = {
+  index: { route: 'home', title: 'Home' },
+  product: { route: 'product' },
+  collection: { route: 'collection' },
+  search: { route: 'search' },
+  cart: { route: 'cart' },
+  page: { route: 'page' },
+  'page.contact': { route: 'page', title: 'Contact' },
+  blog: { route: 'blog' },
+  article: { route: 'article' },
+  account: { route: 'customer' },
+  '404': { route: 'not_found' },
+} as const

package/bundled/examples/blank/src/theme.tsx

@@ -0,0 +1,76 @@
+/**
+ * The theme: its sections and the Layout around every page. Markup and CSS (src/styles/theme.css) are the
+ * theme's own; every storefront function comes from @tanqory/theme-kit/headless.
+ */
+import type { ReactNode } from 'react'
+import { CartDrawer, CartLine, CartLineRemove, CheckoutButton, ConsentBanner, Image, SkipLink, defineTheme, formatMoney, useSettings, useTranslate } from '@tanqory/theme-kit/headless'
+import { cx } from './components/parts'
+import { footer, header } from './sections/chrome'
+import { featuredCollection, hero, letters, note } from './sections/editorial'
+import { account, cart, collection, product, recommendations, search } from './sections/commerce'
+import { article, blog, contact, notFound, page } from './sections/content'
+
+function Drawer(): JSX.Element {
+  const t = useTranslate()
+  return (
+    <CartDrawer className="t-drawer" backdropClassName="t-drawer__backdrop">
+      {(c) => (
+        <>
+          <div className="t-drawer__head">
+            <h2 className="t-drawer__title">{t('cart.title')}</h2>
+            <button type="button" className="t-drawer__close" onClick={c.close}>
+              {t('cart.close')}
+            </button>
+          </div>
+          {c.lines.length === 0 ? (
+            <p className="t-muted">{t('cart.empty')}</p>
+          ) : (
+            <>
+              <ul className="t-drawer__lines">
+                {c.lines.map((line) => (
+                  <CartLine key={line.id} line={line} className="t-drawer__line">
+                    <Image image={line.variant.image} alt="" className="t-drawer__img" fallback={<span className="t-drawer__img t-drawer__img--empty" />} />
+                    <div>
+                      <p className="t-drawer__name">{line.product.title}</p>
+                      <p className="t-muted">
+                        {line.variant.title !== 'Default Title' ? `${line.variant.title} · ` : ''}
+                        {t('theme.drawer.qty', { count: line.quantity })}
+                      </p>
+                      <p>{formatMoney(line.cost.total)}</p>
+                    </div>
+                    <CartLineRemove className="t-link" />
+                  </CartLine>
+                ))}
+              </ul>
+              <p className="t-drawer__total">
+                <span>{t('cart.subtotal')}</span> <span>{formatMoney(c.subtotal)}</span>
+              </p>
+              <CheckoutButton className="t-btn t-btn--solid" />
+              <a className="t-btn" href="/cart">
+                {t('theme.cart.view')}
+              </a>
+            </>
+          )}
+        </>
+      )}
+    </CartDrawer>
+  )
+}
+
+function Layout({ children }: { children: ReactNode }): JSX.Element {
+  const settings = useSettings()
+  return (
+    <div className={cx('t', settings.width === 'wide' && 't--wide')}>
+      <SkipLink className="t-skip" />
+      {children}
+      <Drawer />
+      <ConsentBanner className="t-consent" buttonClassName="t-btn" acceptClassName="t-btn--solid" />
+    </div>
+  )
+}
+
+export default defineTheme({
+  name: '__THEME_TITLE__',
+  sections: [header, hero, featuredCollection, note, letters, product, recommendations, collection, search, cart, page, contact, blog, article, account, notFound, footer],
+  Layout,
+})

package/bundled/examples/blank/template.json

@@ -0,0 +1,24 @@
+{
+  "id": "blank",
+  "title": "Blank",
+  "summary": "Unstyled: every storefront function wired through @tanqory/theme-kit/headless, minimal neutral CSS. Start here for a theme of your own design.",
+  "api": "@tanqory/theme-kit/headless",
+  "layout": [
+    ["src/theme.tsx", "defineTheme: the list of sections and the Layout around every page (cart drawer, consent banner)"],
+    ["src/sections/*.tsx", "defineSection / defineBlock, each with its settings schema; the markup is yours"],
+    ["src/components/parts.tsx", "small shared parts (product card, grid)"],
+    ["src/styles/theme.css", "all CSS: minimal and neutral, replace it"],
+    ["src/settings.ts", "theme settings (the editor's Theme panel)"],
+    ["src/templates.ts", "template name to route kind; templates/<name>.json is its starter content"],
+    ["templates/, regions/, config/settings.json", "starter content (ABI v2 template and region documents) and setting values"],
+    ["locales/en.json, locales/th.json", "every visible string the theme adds (laid over the kit's own strings)"],
+    ["src/entry.server.tsx, src/entry.client.tsx", "createRender() / hydrate(): leave as they are"],
+    ["scripts/build.mjs", "manifest from your declarations, then the browser and server bundles to dist/abi"],
+    ["tests/", "vitest: strings, templates and section declarations"]
+  ],
+  "docs": [
+    ["node_modules/@tanqory/theme-kit/docs/headless-api.md", "the headless API: hooks, primitives, defineSection, settings fields, ai roles, data-tq-* hooks"],
+    ["node_modules/@tanqory/theme-abi/contracts/theme-abi-v2.md", "the platform contract (routes, data, actions, capabilities, editor protocol, limits)"],
+    ["node_modules/@tanqory/theme-conformance/docs/storefront-tier.md", "every storefront check, with its fix hint"]
+  ]
+}

package/bundled/examples/blank/templates/404.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "404",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "lost-1",
+          "type": "not-found"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/account.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "account",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "account-1",
+          "type": "account"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/article.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "article",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "article-1",
+          "type": "article"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/blog.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "blog",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "blog-1",
+          "type": "blog"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/cart.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "cart",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "cart-1",
+          "type": "cart"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/collection.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "collection",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "collection-1",
+          "type": "collection"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/index.json

@@ -0,0 +1,36 @@
+{
+  "contentVersion": 1,
+  "template": "index",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "hero-1",
+          "type": "hero",
+          "settings": {
+            "kicker": "Welcome",
+            "heading": "Your store, your theme",
+            "buttonLabel": "Shop all",
+            "buttonLink": "/collections/all"
+          }
+        },
+        {
+          "id": "featured-1",
+          "type": "featured-collection",
+          "settings": {
+            "heading": "Featured",
+            "collection": "all"
+          }
+        },
+        {
+          "id": "note-1",
+          "type": "rich-text"
+        },
+        {
+          "id": "newsletter-1",
+          "type": "newsletter"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/page.contact.json

@@ -0,0 +1,18 @@
+{
+  "contentVersion": 1,
+  "template": "page.contact",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "page-1",
+          "type": "page"
+        },
+        {
+          "id": "contact-1",
+          "type": "contact-form"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/page.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "page",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "page-1",
+          "type": "page"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/product.json

@@ -0,0 +1,18 @@
+{
+  "contentVersion": 1,
+  "template": "product",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "product-1",
+          "type": "product"
+        },
+        {
+          "id": "recs-1",
+          "type": "product-recommendations"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/templates/search.json

@@ -0,0 +1,14 @@
+{
+  "contentVersion": 1,
+  "template": "search",
+  "regions": {
+    "main": {
+      "sections": [
+        {
+          "id": "search-1",
+          "type": "search"
+        }
+      ]
+    }
+  }
+}

package/bundled/examples/blank/tests/theme.test.ts

@@ -0,0 +1,49 @@
+/**
+ * Fast checks on the theme's own declarations (run with `npm test`). The full storefront behaviour is
+ * checked by `npm run check` on the built theme.
+ */
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import theme from '../src/theme'
+import { TEMPLATES } from '../src/templates'
+
+const root = fileURLToPath(new URL('..', import.meta.url))
+const json = (p: string) => JSON.parse(readFileSync(join(root, p), 'utf8'))
+
+describe('locales', () => {
+  const en = json('locales/en.json') as Record<string, string>
+  const th = json('locales/th.json') as Record<string, string>
+  it('every English key has a Thai string, and the reverse', () => {
+    expect(Object.keys(th).sort()).toEqual(Object.keys(en).sort())
+  })
+  it('placeholders match between languages', () => {
+    const vars = (s: string) => (s.match(/\{\w+\}/g) ?? []).sort()
+    for (const k of Object.keys(en)) expect(vars(th[k] ?? ''), k).toEqual(vars(en[k]!))
+  })
+})
+
+describe('templates', () => {
+  it('every template in src/templates.ts has templates/<name>.json, and the reverse', () => {
+    const files = readdirSync(join(root, 'templates')).filter((f) => f.endsWith('.json')).map((f) => f.replace(/\.json$/, ''))
+    expect(files.sort()).toEqual(Object.keys(TEMPLATES).sort())
+  })
+  it('starter content uses only declared section types', () => {
+    const types = new Set(theme.sections.map((s) => s.id))
+    const docs = [
+      ...readdirSync(join(root, 'templates')).map((f) => json(`templates/${f}`)),
+      ...['header', 'footer'].map((r) => ({ regions: { [r]: json(`regions/${r}.json`) } })),
+    ]
+    for (const doc of docs)
+      for (const region of Object.values(doc.regions ?? {}) as Array<{ sections?: Array<{ type: string }> }>)
+        for (const s of region.sections ?? []) expect(types.has(s.type), s.type).toBe(true)
+  })
+})
+
+describe('sections', () => {
+  it('section types are unique', () => {
+    const types = theme.sections.map((s) => s.id)
+    expect(new Set(types).size).toBe(types.length)
+  })
+})