create-tanqory-theme 0.0.0-stage → 0.2.2

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

@@ -0,0 +1,111 @@
+/** Content sections: a page, the contact form, the journal (blog), an article and the 404 page. */
+import { ContactForm, defineSection, field, useArticle, useBlog, usePageContent, useTranslate } from '@tanqory/theme-kit/headless'
+
+export const page = defineSection({
+  type: 'page',
+  title: 'Page',
+  category: 'content',
+  requires: ['page'],
+  settings: {},
+  component: function PageBody() {
+    const p = usePageContent()
+    if (!p) return <section className="t-page" />
+    return (
+      <article className="t-page">
+        <h1 className="t-page__title">{p.title}</h1>
+        <div className="t-prose" dangerouslySetInnerHTML={{ __html: p.html }} />
+      </article>
+    )
+  },
+})
+
+export const contact = defineSection({
+  type: 'contact-form',
+  title: 'Contact form',
+  description: 'A message form that reaches the store.',
+  category: 'forms',
+  settings: { heading: field.text('Write to us', { label: 'Heading' }) },
+  presets: [{ name: 'Contact form' }],
+  component: ({ settings }) => (
+    <section className="t-contact">
+      <h2 className="t-contact__title">{settings.heading}</h2>
+      <ContactForm className="t-form" inputClassName="t-input" labelClassName="t-label" buttonClassName="t-btn t-btn--solid" messageClassName="t-form__msg" />
+    </section>
+  ),
+})
+
+export const blog = defineSection({
+  type: 'blog',
+  title: 'Journal',
+  category: 'content',
+  requires: ['blog'],
+  settings: {},
+  component: function Journal() {
+    const b = useBlog()
+    const t = useTranslate()
+    if (!b) return <section className="t-journal" />
+    return (
+      <section className="t-journal">
+        <h1 className="t-journal__title">{b.title}</h1>
+        <ul className="t-journal__list">
+          {b.articles.map((a) => (
+            <li key={a.id} className="t-journal__item">
+              <a className="t-journal__link" href={a.url}>
+                <span className="t-journal__name">{a.title}</span>
+                {a.excerpt ? <span className="t-journal__excerpt">{a.excerpt}</span> : null}
+                <span className="t-journal__more">{t('theme.journal.read')}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </section>
+    )
+  },
+})
+
+export const article = defineSection({
+  type: 'article',
+  title: 'Article',
+  category: 'content',
+  requires: ['article'],
+  settings: {},
+  component: function Story() {
+    const a = useArticle()
+    const b = useBlog()
+    const t = useTranslate()
+    if (!a) return <article className="t-story" />
+    return (
+      <article className="t-story">
+        {b ? (
+          <a className="t-story__back" href={b.url}>
+            {t('theme.journal.back', { blog: b.title })}
+          </a>
+        ) : null}
+        <h1 className="t-story__title">{a.title}</h1>
+        {a.author ? <p className="t-muted">{t('theme.journal.by', { author: a.author })}</p> : null}
+        <div className="t-prose" dangerouslySetInnerHTML={{ __html: a.contentHtml ?? '' }} />
+      </article>
+    )
+  },
+})
+
+export const notFound = defineSection({
+  // The runtime renders this type as the body of every 404 page (an unknown product, collection, page, blog).
+  type: 'not-found',
+  title: 'Not found',
+  category: 'content',
+  settings: {},
+  component: function Lost() {
+    const t = useTranslate()
+    return (
+      <section className="t-lost">
+        <p className="t-hero__kicker">404</p>
+        <h1 className="t-lost__title">{t('theme.notFound.title')}</h1>
+        <p className="t-muted">{t('theme.notFound.body')}</p>
+        <a className="t-btn" href="/">
+          {t('theme.notFound.home')}
+        </a>
+      </section>
+    )
+  },
+})

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

@@ -0,0 +1,107 @@
+/** Editorial sections: a hero, a featured collection, a rich-text note and the newsletter sign-up. */
+import { Image, NewsletterForm, ai, defineSection, field, useCollection, useTranslate } from '@tanqory/theme-kit/headless'
+import { Grid, cx } from '../components/parts'
+
+export const hero = defineSection({
+  type: 'hero',
+  title: 'Hero',
+  description: 'A headline with a kicker, a short text, an optional image and one link.',
+  category: 'editorial',
+  settings: {
+    kicker: field.text('Welcome', { label: 'Kicker' }),
+    heading: field.text('Your store, your theme', { label: 'Heading' }),
+    body: field.richtext('', { label: 'Text' }),
+    image: field.resource('image', '', { label: 'Image' }),
+    buttonLabel: field.text('Shop all', { label: 'Button label' }),
+    buttonLink: field.url('/collections/all', { label: 'Button link' }),
+  },
+  presets: [{ name: 'Hero', settings: { kicker: 'Welcome', heading: 'Your store, your theme' } }],
+  ai: ai.hero({ heading: 'heading', subheading: 'kicker', image: 'image', button: 'buttonLabel', link: 'buttonLink' }),
+  component: ({ settings }) => (
+    <section className={cx('t-hero', settings.image && 't-hero--image')}>
+      {settings.image ? <Image image={settings.image} alt="" className="t-hero__img" loading="eager" /> : null}
+      <div className="t-hero__copy">
+        {settings.kicker ? <p className="t-hero__kicker">{settings.kicker}</p> : null}
+        <h1 className="t-hero__title">{settings.heading}</h1>
+        {settings.body ? <div className="t-hero__body" dangerouslySetInnerHTML={{ __html: settings.body }} /> : null}
+        {settings.buttonLabel && settings.buttonLink ? (
+          <a className="t-btn" href={settings.buttonLink}>
+            {settings.buttonLabel}
+          </a>
+        ) : null}
+      </div>
+    </section>
+  ),
+})
+
+function Shelf({ settings }: { settings: { heading: string; collection: string; count: number } }): JSX.Element {
+  const c = useCollection(settings.collection)
+  const t = useTranslate()
+  const products = c.products.slice(0, settings.count)
+  return (
+    <section className="t-shelf">
+      <div className="t-shelf__head">
+        <h2 className="t-shelf__title">{settings.heading || c.collection?.title}</h2>
+        {c.collection ? (
+          <a className="t-shelf__all" href={c.collection.url}>
+            {t('theme.shelf.viewAll')}
+          </a>
+        ) : null}
+      </div>
+      {products.length ? <Grid products={products} eager={4} /> : <p className="t-muted">{t('theme.shelf.empty')}</p>}
+    </section>
+  )
+}
+
+export const featuredCollection = defineSection({
+  type: 'featured-collection',
+  title: 'Featured collection',
+  description: 'A row of products from one collection.',
+  category: 'products',
+  settings: {
+    heading: field.text('Featured', { label: 'Heading' }),
+    collection: field.resource('collection', 'all', { label: 'Collection' }),
+    count: field.range(8, 4, 16, 4, { label: 'Products to show' }),
+  },
+  presets: [{ name: 'Featured collection', settings: { heading: 'Featured', collection: 'all' } }],
+  ai: ai.productGrid('collection', { heading: 'heading' }),
+  component: Shelf,
+})
+
+export const note = defineSection({
+  type: 'rich-text',
+  title: 'Rich text',
+  description: 'A heading and a paragraph.',
+  category: 'editorial',
+  settings: {
+    heading: field.text('About us', { label: 'Heading' }),
+    body: field.richtext('<p>Tell customers what your store is about.</p>', { label: 'Text' }),
+  },
+  presets: [{ name: 'Rich text' }],
+  ai: ai.richText({ heading: 'heading', body: 'body' }),
+  component: ({ settings }) => (
+    <section className="t-note">
+      {settings.heading ? <h2 className="t-note__title">{settings.heading}</h2> : null}
+      {settings.body ? <div className="t-note__body" dangerouslySetInnerHTML={{ __html: settings.body }} /> : null}
+    </section>
+  ),
+})
+
+export const letters = defineSection({
+  type: 'newsletter',
+  title: 'Newsletter',
+  description: 'An email sign-up for the store’s newsletter.',
+  category: 'forms',
+  settings: {
+    heading: field.text('Subscribe to our emails', { label: 'Heading' }),
+    body: field.textarea('Be the first to hear about new products.', { label: 'Text' }),
+  },
+  presets: [{ name: 'Newsletter' }],
+  component: ({ settings }) => (
+    <section className="t-letters">
+      <h2 className="t-letters__title">{settings.heading}</h2>
+      {settings.body ? <p className="t-letters__body">{settings.body}</p> : null}
+      <NewsletterForm className="t-letters__form" inputClassName="t-input" buttonClassName="t-btn t-btn--solid" messageClassName="t-letters__msg" />
+    </section>
+  ),
+})

package/templates/blank/src/settings.ts

@@ -0,0 +1,15 @@
+/** The theme settings (the editor's Theme panel). Add your own; every key needs a default. */
+import { defineSettings } from '@tanqory/theme-kit/headless'
+
+export const settings = defineSettings({
+  width: {
+    type: 'select',
+    label: 'Page width',
+    group: 'Layout',
+    default: 'normal',
+    options: [
+      { value: 'normal', label: 'Normal' },
+      { value: 'wide', label: 'Wide' },
+    ],
+  },
+})

package/templates/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/templates/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/templates/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/templates/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/templates/blank/templates/404.json

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

package/templates/blank/templates/account.json

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

package/templates/blank/templates/article.json

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

package/templates/blank/templates/blog.json

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

package/templates/blank/templates/cart.json

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

package/templates/blank/templates/collection.json

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