create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/section-groups.test.ts

@@ -0,0 +1,189 @@
+/**
+ * Shared header/footer groups, against the theme's REAL files.
+ *
+ * The kit's own suite proves the contract on fixtures; this proves that Nova's
+ * templates and groups, as shipped, satisfy the acceptance criteria:
+ *
+ *   A  one header edit reaches home, product and collection
+ *   B  a page that overrides the header keeps its override across save/reload
+ *   F  the migration preserved every id/setting/block/order, and re-running
+ *      it is a no-op
+ *
+ * And that the theme's own runtime path — the SPA router's template lookup —
+ * resolves through the same function the entry mounts with.
+ */
+import { execFileSync } from 'node:child_process'
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import {
+  extractGroups,
+  groupImpact,
+  resolvePage,
+  resolvePageFrom,
+  splitPage,
+  validatePage,
+  templateContext,
+  type GroupedPageDoc,
+  type SectionGroupDoc,
+} from '@tanqory/theme-kit/contract'
+import manifest from '../theme.manifest.json'
+
+const ROOT = join(__dirname, '..')
+const read = <T,>(rel: string): T => JSON.parse(readFileSync(join(ROOT, rel), 'utf8')) as T
+
+const templates: Record<string, GroupedPageDoc> = Object.fromEntries(
+  readdirSync(join(ROOT, 'templates'))
+    .filter((f) => f.endsWith('.json'))
+    .map((f) => [f.replace(/\.json$/, ''), read<GroupedPageDoc>(`templates/${f}`)]),
+)
+const groups: Record<string, SectionGroupDoc> = Object.fromEntries(
+  readdirSync(join(ROOT, 'groups'))
+    .filter((f) => f.endsWith('.json'))
+    .map((f) => [f.replace(/\.json$/, ''), read<SectionGroupDoc>(`groups/${f}`)]),
+)
+
+/** The section catalogue the validator needs, from the generated manifest. */
+const catalog = Object.fromEntries(
+  (manifest.sections as Array<Record<string, unknown>>).map((s) => [s.name as string, s]),
+) as unknown as Parameters<typeof validatePage>[2]
+
+describe('shared groups — what ships', () => {
+  it('ships one header group and one footer group', () => {
+    expect(Object.keys(groups).sort()).toEqual(['footer', 'header'])
+    expect(groups.header.type).toBe('header')
+    expect(groups.footer.type).toBe('footer')
+  })
+
+  it('A — product, collection and every plain page bind the shared header; home overrides it on purpose', () => {
+    for (const slug of ['product', 'collection', 'page', 'cart', 'search']) {
+      expect(resolvePage(templates[slug]!, groups).slots.header.mode, slug).toBe('ref')
+    }
+    // The home page carries an announcement bar above its header — the
+    // migration kept that as an explicit override rather than merging it away.
+    expect(resolvePage(templates.index!, groups).slots.header.mode).toBe('override')
+  })
+
+  it('A — one edit to the shared header changes every page that binds it, and only those', () => {
+    const edited = {
+      ...groups,
+      header: {
+        ...groups.header,
+        sections: groups.header.sections.map((s) =>
+          s.type === 'header' ? { ...s, settings: { ...s.settings, sticky: 'none' } } : s,
+        ),
+      },
+    }
+    const bound = groupImpact('header', templates)
+    expect(bound.length).toBeGreaterThanOrEqual(3)
+    for (const slug of bound) {
+      const header = resolvePage(templates[slug]!, edited).sections.find((s) => s.type === 'header')
+      expect(header?.settings?.sticky, slug).toBe('none')
+    }
+    for (const slug of Object.keys(templates).filter((s) => !bound.includes(s))) {
+      const r = resolvePage(templates[slug]!, edited)
+      const header = r.sections.find((s) => s.type === 'header')
+      // An override or an empty slot is untouched by a group edit.
+      if (header) expect(header.settings?.sticky, slug).not.toBe('none')
+    }
+  })
+
+  it('every template + the groups validate, with the context the template provides', () => {
+    for (const [slug, doc] of Object.entries(templates)) {
+      const r = validatePage(doc, groups, catalog, { template: slug, context: templateContext(slug) })
+      expect(r.issues.filter((i) => i.severity === 'error'), slug).toEqual([])
+    }
+  })
+
+  it('no page renders a header twice or ends up without one it used to have', () => {
+    for (const [slug, doc] of Object.entries(templates)) {
+      const r = resolvePage(doc, groups)
+      expect(r.sections.filter((s) => s.type === 'header').length, slug).toBeLessThanOrEqual(1)
+      expect(r.missingGroups, slug).toEqual([])
+      // Header first, footer last, exactly as the inline layout used to be.
+      const types = r.sections.map((s) => s.area ?? 'template')
+      const firstBody = types.indexOf('template')
+      const lastHeader = types.lastIndexOf('header')
+      const firstFooter = types.indexOf('footer')
+      if (lastHeader >= 0 && firstBody >= 0) expect(lastHeader, slug).toBeLessThan(firstBody)
+      if (firstFooter >= 0 && firstBody >= 0) expect(firstFooter, slug).toBeGreaterThan(firstBody)
+    }
+  })
+})
+
+describe('B — a page-specific override', () => {
+  const overriding = Object.entries(templates).filter(
+    ([, doc]) => resolvePage(doc, groups).slots.header.mode === 'override',
+  )
+
+  it('at least one template overrides the header on purpose (the home page carries the announcement bar)', () => {
+    expect(overriding.map(([slug]) => slug)).toContain('index')
+  })
+
+  it.each(overriding.map(([slug]) => slug))('%s keeps its override across an edit → save → reload', (slug) => {
+    const resolved = resolvePageFrom(templates[slug]!, groups)
+    // Edit the override's first node and the body, then save.
+    const edited = resolved.sections.map((n, i) =>
+      i === 0 ? { ...n, settings: { ...n.settings, __edited: true } } : n,
+    )
+    const out = splitPage(edited, resolved)
+    expect(out.template.groups?.header).toMatchObject({ override: expect.any(Array) })
+    expect(out.groups.header, 'an override never writes the shared group').toBeUndefined()
+    // Reload: the override, with its edit, is what renders.
+    const again = resolvePage(out.template, groups)
+    expect(again.slots.header.mode).toBe('override')
+    expect(again.sections[0]!.settings?.__edited).toBe(true)
+    // And the shared header is untouched.
+    expect(groups.header.sections[0]!.settings?.__edited).toBeUndefined()
+  })
+})
+
+describe('F — migration', () => {
+  it('is a no-op on the migrated theme (re-running changes nothing)', () => {
+    const defaults = Object.fromEntries(
+      (manifest.sections as unknown as Array<{ name: string; attributes: Record<string, { default?: unknown }> }>).map((s) => [
+        s.name,
+        Object.fromEntries(Object.entries(s.attributes).flatMap(([k, a]) => (a.default === undefined ? [] : [[k, a.default]]))),
+      ]),
+    )
+    const r = extractGroups(templates, { defaults })
+    expect(r.noop).toBe(true)
+    expect(r.templates).toEqual(templates)
+  })
+
+  it('the CLI agrees: `migrate-groups --check` passes', () => {
+    const out = execFileSync(process.execPath, [join(ROOT, 'scripts/compiler/migrate/migrate-groups.mjs'), '--check'], { cwd: ROOT, encoding: 'utf8' })
+    expect(out).toContain('would change nothing')
+  })
+
+  it('preserved every id in the shared groups and every override (nothing was re-minted)', () => {
+    const ids = (nodes: Array<{ id?: string; blocks?: unknown[] }>): string[] =>
+      nodes.flatMap((n) => [n.id ?? '', ...ids((n.blocks ?? []) as never)])
+    for (const g of Object.values(groups)) {
+      for (const id of ids(g.sections)) expect(id).toMatch(/^[A-Za-z0-9][A-Za-z0-9._-]*$/)
+    }
+    // The 14 templates that shared one footer keep the ids that footer had.
+    expect(ids(groups.footer.sections)).toContain('footer')
+    expect(ids(groups.footer.sections)).toContain('footer-brand')
+    expect(ids(groups.header.sections)).toContain('header')
+  })
+})
+
+describe('the runtime resolves through the contract', () => {
+  it('the theme bundle hands the groups folder to the runtime (which resolves every page through it)', () => {
+    const bundle = readFileSync(join(ROOT, 'lib/bundle-core.ts'), 'utf8')
+    expect(bundle).toMatch(/groups: import\.meta\.glob\('\.\.\/groups\/\*\.json'/)
+  })
+
+  it('the manifest carries the groups and each template’s binding, generated from the same files', () => {
+    const m = manifest as unknown as {
+      groups: Array<{ name: string; usedBy: string[] }>
+      templates: Array<{ name: string; groups: { header: { mode: string } } }>
+      contract: { contentVersion: number }
+    }
+    expect(m.groups.map((g) => g.name).sort()).toEqual(['footer', 'header'])
+    expect(m.groups.find((g) => g.name === 'header')!.usedBy).toEqual(groupImpact('header', templates))
+    expect(m.templates.find((t) => t.name === 'product')!.groups.header.mode).toBe('ref')
+    expect(m.contract.contentVersion).toBe(2)
+  })
+})

package/templates/nova/tests/sections/Group.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { toCells, type GroupBlock } from '../../src/sections/Group/Group'
+import { presets } from '../../src/sections/Group/presets'
+
+const t = (...types: GroupBlock['type'][]) => types.map((type) => ({ type }) as GroupBlock)
+const shape = (b: GroupBlock[]) => toCells(b).map((c) => c.map((x) => x.type).join('+'))
+
+describe('group cells', () => {
+  it('text-and-image preset: one content cell, one media cell', () => {
+    expect(shape(t('heading', 'text', 'button', 'image'))).toEqual(['heading+text+button', 'image'])
+  })
+  it('three points: a repeating icon starts a new column', () => {
+    expect(shape(t('icon', 'heading', 'text', 'icon', 'heading', 'text', 'icon', 'heading', 'text'))).toEqual(['icon+heading+text', 'icon+heading+text', 'icon+heading+text'])
+  })
+  it('stress: heading + text | accordion list', () => {
+    expect(shape(t('heading', 'text', 'accordion', 'accordion', 'accordion'))).toEqual(['heading+text', 'accordion+accordion+accordion'])
+  })
+  it('media lead: content then media', () => {
+    expect(shape(t('heading', 'text', 'image'))).toEqual(['heading+text', 'image'])
+  })
+  it('statement stays one cell', () => {
+    expect(shape(t('heading', 'button'))).toEqual(['heading+button'])
+  })
+})
+
+// What "Add section" actually inserts: a preset named for N columns must fill N
+// columns. "Three points" once inserted one icon · heading · text run, so a
+// merchant got one column of three.
+describe('group presets fill the columns they ask for', () => {
+  for (const p of presets) {
+    it(p.name, () => {
+      const columns = Number(p.settings.columns ?? 1)
+      const cells = toCells((p.blocks ?? []).map((b) => ({ type: b.type, settings: b.settings ?? {} }) as GroupBlock))
+      expect(Math.min(columns, cells.length)).toBe(columns)
+    })
+  }
+})

package/templates/nova/tests/setup.ts

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => cleanup())
+
+// jsdom lacks these; components feature-detect them, tests get inert stubs.
+if (!window.matchMedia) {
+  window.matchMedia = (query: string) =>
+    ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }) as MediaQueryList
+}
+if (!('ResizeObserver' in window)) {
+  ;(window as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+// jsdom does not implement media playback: play resolves, pause is a no-op.
+Object.defineProperty(HTMLMediaElement.prototype, 'play', { configurable: true, value: () => Promise.resolve() })
+Object.defineProperty(HTMLMediaElement.prototype, 'pause', { configurable: true, value: () => {} })

package/templates/nova/tests/starter.test.ts

@@ -0,0 +1,56 @@
+/**
+ * Starter text (src/sections/starter.ts) and the starter content agree.
+ *
+ * The runtime hides starter text from shoppers by exact match, so a template
+ * whose placeholder wording drifts from the list ships that placeholder to a
+ * live store — "Add a quote a customer has shared with you." did, as three
+ * five-star reviews by "Customer name".
+ */
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import manifest from '../theme.manifest.json'
+import { STARTER_TEXT } from '../src/sections/starter'
+
+interface Node { type?: string; settings?: Record<string, unknown>; blocks?: Node[] }
+const dir = (d: string) => join(__dirname, '..', d)
+const docs = ['templates', 'groups'].flatMap((d) =>
+  readdirSync(dir(d)).filter((f) => f.endsWith('.json')).map((f) => ({ name: `${d}/${f}`, doc: JSON.parse(readFileSync(join(dir(d), f), 'utf8')) as { sections?: Node[] } })),
+)
+const strings: { where: string; key: string; value: string }[] = []
+const walk = (nodes: Node[] | undefined, where: string) => {
+  for (const n of nodes ?? []) {
+    for (const [key, v] of Object.entries(n.settings ?? {})) if (typeof v === 'string') strings.push({ where: `${where} ${n.type}`, key, value: v.trim() })
+    walk(n.blocks, where)
+  }
+}
+for (const { name, doc } of docs) walk(doc.sections, name)
+const defaults = (manifest.sections as unknown as { name: string; attributes: Record<string, { default?: unknown }> }[]).flatMap((s) =>
+  Object.entries(s.attributes).flatMap(([key, a]) => (typeof a?.default === 'string' ? [{ where: `default ${s.name}`, key, value: a.default.trim() }] : [])),
+)
+const listed = new Set(STARTER_TEXT.map((s) => s.trim()))
+
+/** Words that address the merchant, not the shopper. */
+const INSTRUCTION = /^(describe|add (a|an|another)|tell (customers|readers|the story)|introduce|share what|say why|list the|answer it here|a (line|paragraph or two) (about|on))|^(milestone|item) \d$|^customer name$|^<p>(describe|add |answer it here|a paragraph or two|say why)/i
+
+describe('starter text', () => {
+  it('lists every instruction the starter content carries', () => {
+    // A *Placeholder is the hint inside a shopper's own input ("Add a note for our packers"), not an instruction to the merchant.
+    const missing = [...strings, ...defaults].filter((s) => !/placeholder$/i.test(s.key) && INSTRUCTION.test(s.value) && !listed.has(s.value)).map((s) => `${s.where}.${s.key}: ${s.value}`)
+    expect(missing).toEqual([])
+  })
+
+  it('lists nothing the starter content no longer uses', () => {
+    const used = new Set([...strings, ...defaults].map((s) => s.value))
+    expect(STARTER_TEXT.filter((s) => !used.has(s.trim()))).toEqual([])
+  })
+
+  it('never lists a fallback — that would hide the page that has real content', () => {
+    const fallbacks = strings.filter((s) => /^fallback/i.test(s.key) && listed.has(s.value))
+    expect(fallbacks).toEqual([])
+  })
+
+  it('tells shoppers nothing about the admin', () => {
+    expect([...strings, ...defaults].filter((s) => /\badmin\b|online store →/i.test(s.value)).map((s) => s.where)).toEqual([])
+  })
+})

package/templates/nova/tests/storefront-click-path.test.tsx

@@ -0,0 +1,157 @@
+/**
+ * A buyer walks storefront home > product > cart > checkout by links alone (row #4078). Each page
+ * renders the theme's own starter content (groups/header.json + templates/<page>.json) the way
+ * entry.abi.tsx renders it, as server HTML: what a buyer sees before the browser bundle runs.
+ */
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { Cart as AbiCart, Product as AbiProduct } from '@tanqory/theme-abi'
+import { setThemeBundle } from '@tanqory/theme-kit/runtime'
+import { sectionModules } from '@tanqory/theme-kit/runtime'
+import { registerSections } from '@tanqory/theme-kit/runtime'
+import { SectionTree } from '@tanqory/theme-kit/runtime'
+import { DataProvider } from '@tanqory/theme-kit/runtime'
+import { ThemeProvider } from '@tanqory/theme-kit/runtime'
+import type { ContentNode } from '@tanqory/theme-kit/runtime'
+import { localeStrings } from '@tanqory/theme-kit/runtime'
+import { bundle } from '../lib/bundle'
+import { AbiShell } from '@tanqory/theme-kit/runtime'
+import { AbiCartProvider } from '@tanqory/theme-kit/runtime'
+import type { PageData } from '@tanqory/theme-kit/runtime'
+import { createDataApi } from '@tanqory/theme-kit/runtime'
+import { locationOf, nodesOf } from '@tanqory/theme-kit/runtime'
+import { convert as convert } from '@tanqory/theme-kit/runtime'
+import headerGroup from '../groups/header.json'
+import indexTemplate from '../templates/index.json'
+import productTemplate from '../templates/product.json'
+import cartTemplate from '../templates/cart.json'
+
+setThemeBundle(bundle)
+registerSections(Object.values(sectionModules()).map((m) => m.default))
+
+const LOCALES = Object.fromEntries(
+  Object.entries(bundle.locales).map(([path, mod]) => [path.match(/\/([^/]+)\.json$/)?.[1] ?? 'en', (mod as { default: Record<string, string> }).default]),
+)
+
+const thb = (amount: string) => ({ amount, currencyCode: 'THB' })
+
+const HOODIE_VARIANTS = ['S', 'M', 'L'].map((size, i) => ({
+  id: `gid://tanqory/ProductVariant/${i + 1}`,
+  title: size,
+  price: thb('890.00'),
+  compareAtPrice: null,
+  availableForSale: true,
+  selectedOptions: [{ name: 'Size', value: size }],
+  image: null,
+  sku: null,
+}))
+
+const HOODIE = {
+  id: 'gid://tanqory/Product/1',
+  handle: 'army-hoodie',
+  title: 'Army Hoodie',
+  templateSuffix: null,
+  priceRange: { minVariantPrice: thb('890.00'), maxVariantPrice: thb('890.00') },
+  compareAtPriceRange: null,
+  featuredImage: null,
+  availableForSale: true,
+  vendor: null,
+  productType: null,
+  tags: [],
+  descriptionHtml: '<p>A warm hoodie.</p>',
+  images: [],
+  options: [{ name: 'Size', values: ['S', 'M', 'L'] }],
+  variants: { nodes: HOODIE_VARIANTS },
+  seo: null,
+} as unknown as AbiProduct
+
+const CHECKOUT_URL = 'https://shop.example/checkout/c1'
+
+const CART = {
+  id: 'c1',
+  version: 1,
+  lines: [
+    {
+      id: 'line-1',
+      quantity: 2,
+      merchandise: { id: HOODIE_VARIANTS[1]!.id, title: 'M', price: thb('890.00'), image: null, product: { title: 'Army Hoodie', handle: 'army-hoodie', featuredImage: null } },
+      cost: { subtotalAmount: thb('1780.00') },
+      attributes: {},
+    },
+  ],
+  cost: { subtotalAmount: thb('1780.00'), totalAmount: thb('1780.00'), totalTaxAmount: null },
+  note: null,
+  totalQuantity: 2,
+  checkoutUrl: CHECKOUT_URL,
+  discountCodes: [],
+} as unknown as AbiCart
+
+function pageData(over: Partial<PageData>): PageData {
+  return {
+    route: 'index',
+    shop: { name: 'Army TH', description: null, brand: null, policies: {}, primaryDomain: { host: 'shop.example', url: 'https://shop.example', sslEnabled: true } },
+    menus: {}, products: {}, collections: {}, collectionList: null, pages: {}, blogs: {}, articles: {},
+    search: null, recommendations: {}, policyHandle: null, accountUrls: null, cart: null,
+    localization: { country: { isoCode: 'TH', name: 'Thailand', currency: { isoCode: 'THB', name: 'Thai Baht', symbol: '฿' } }, language: { isoCode: 'EN', name: 'English' }, availableCountries: [], availableLanguages: [] },
+    signedIn: null, unresolved: [], routeMissing: false,
+    ...over,
+  } as unknown as PageData
+}
+
+/** A page at `path` from the theme's starter template, rendered as entry.abi.tsx renders it, as a DOM. */
+function renderPage(path: string, template: { sections: readonly unknown[] }, pd: PageData): Document {
+  const nodes = nodesOf([
+    { region: 'header', sections: headerGroup.sections },
+    { region: 'main', sections: template.sections },
+  ]) as ContentNode[]
+  const html = renderToString(
+    <DataProvider value={createDataApi(pd, null)}>
+      <ThemeProvider settings={{}} locale={localeStrings('en', LOCALES)}>
+        <AbiCartProvider initial={pd.cart} remote={null}>
+          <AbiShell location={locationOf(`https://shop.example${path}`, {})} locale="en" settings={{}} preview={false}>
+            <SectionTree tree={nodes} />
+          </AbiShell>
+        </AbiCartProvider>
+      </ThemeProvider>
+    </DataProvider>,
+  )
+  return new DOMParser().parseFromString(html, 'text/html')
+}
+
+const headerCartLink = (doc: Document) => doc.querySelector<HTMLAnchorElement>('header a[href="/cart"]')
+
+describe('storefront click path: home > product > cart > checkout', () => {
+  it('home: the header links to the cart page', () => {
+    const home = renderPage('/', indexTemplate, pageData({ products: { 'army-hoodie': convert.product(HOODIE) } }))
+    const link = headerCartLink(home)
+    expect(link).not.toBeNull()
+    expect(link!.getAttribute('aria-label')).toMatch(/cart/i)
+  })
+
+  it('product: price, a variant picker and Add to cart, not a product grid', () => {
+    const doc = renderPage('/products/army-hoodie', productTemplate, pageData({ route: 'product', products: { 'army-hoodie': convert.product(HOODIE) } } as Partial<PageData>))
+    const pdp = doc.querySelector('.nv-pdp')!
+    expect(pdp).not.toBeNull()
+    expect(pdp.querySelector('h1')?.textContent).toBe('Army Hoodie')
+    expect(pdp.textContent).toMatch(/890/)
+    const picker = pdp.querySelector('fieldset.nv-variants__option')
+    expect(picker, 'a variant picker for the Size option').not.toBeNull()
+    expect(picker!.textContent).toContain('Size')
+    for (const size of ['S', 'M', 'L']) expect(picker!.textContent).toContain(size)
+    const add = [...pdp.querySelectorAll('button')].find((b) => b.textContent?.trim() === 'Add to cart')
+    expect(add, 'an Add to cart button').toBeDefined()
+    expect(add!.disabled).toBe(false)
+    expect(headerCartLink(doc)).not.toBeNull()
+  })
+
+  it('cart: the added line with its quantity and a Checkout link to the checkout', () => {
+    const doc = renderPage('/cart', cartTemplate, pageData({ route: 'cart', cart: CART } as Partial<PageData>))
+    expect(doc.querySelector('.nv-cart__empty')).toBeNull()
+    const main = doc.querySelector('main')!
+    expect(main.textContent).toContain('Army Hoodie')
+    expect(main.querySelector<HTMLInputElement>('input[inputmode="numeric"], input[type="number"]')?.value).toBe('2')
+    const checkout = [...main.querySelectorAll<HTMLAnchorElement>('a[href]')].filter((a) => a.textContent?.trim() === 'Checkout')
+    expect(checkout.length).toBeGreaterThan(0)
+    for (const a of checkout) expect(a.getAttribute('href')).toBe(CHECKOUT_URL)
+  })
+})

package/templates/nova/tests/styles/button-brand.test.ts

@@ -0,0 +1,24 @@
+/**
+ * Theme settings › Primary (brand) says it colours buttons. The primary button reads --color-button,
+ * which tokens.css declares on :root as var(--color-brand) — resolved there, against the default
+ * brand. The brand colour a store sets lands on the theme root (.nv-root), so the button vars must be
+ * re-declared on that root to follow it (run-5 QA store A: brand #2F3E46, button rgb(17,17,17)).
+ */
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const css = readFileSync(join(__dirname, '../../src/styles/global-settings.css'), 'utf8')
+
+describe('primary button follows the brand colour on the theme root', () => {
+  it('.nv-root re-declares every --color-button var from the brand vars', () => {
+    const block = css.match(/\.nv-root\s*\{([^}]*)\}/)?.[1] ?? ''
+    for (const [k, v] of [
+      ['--color-button', '--color-brand'],
+      ['--color-button-text', '--color-brand-contrast'],
+      ['--color-button-hover', '--color-brand-hover'],
+      ['--color-button-hover-text', '--color-brand-contrast'],
+      ['--color-button-active', '--color-brand-active'],
+    ]) expect(block).toMatch(new RegExp(`${k}:\\s*var\\(${v}\\)`))
+  })
+})

package/templates/nova/tests/styles/theme.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest'
+import foundations from '../../.tanqory/contracts/nova-01.json'
+import { bestLabel, contrastRatio, darken, resolveTheme } from '../../src/styles/theme'
+
+describe('global theme settings', () => {
+  it('writes nothing for an untouched store', () => {
+    expect(resolveTheme({})).toEqual({ vars: {}, attrs: {} })
+    expect(resolveTheme({ buttonRadius: 'medium', typeScale: 'default', colorScheme: 'light' })).toEqual({ vars: {}, attrs: {} })
+  })
+
+  it('maps persisted IDs to tokens and flags', () => {
+    const r = resolveTheme({ buttonRadius: 'pill', inputRadius: 'none', cardRadius: 'soft', colorScheme: 'dark', typeScale: 'large', badgeStyle: 'outline' })
+    expect(r.vars['--btn-radius']).toBe('var(--radius-pill)')
+    expect(r.vars['--input-radius']).toBe('var(--radius-none)')
+    expect(r.vars['--radius-media']).toBe('var(--radius-lg)')
+    expect(r.attrs).toMatchObject({ 'data-scheme': 'dark', 'data-type-scale': 'large', 'data-badge-style': 'outline' })
+  })
+
+  it('renders the hidden legacy sectionSpacing medium as the default', () => {
+    expect(resolveTheme({ sectionSpacing: 'medium' as never })).toEqual({ vars: {}, attrs: {} })
+  })
+
+  it('derives brand hover / active / contrast exactly as Nova 01 brandDerive', () => {
+    for (const row of (foundations as unknown as { brandDerive: { base: string; hover: string; active: string; ct: string }[] }).brandDerive) {
+      const v = resolveTheme({ colorPrimary: row.base }).vars
+      expect(v['--color-brand-contrast']).toBe(row.ct)
+      // Nova 01's printed rows do not all follow its own rule: PALE hover is ~9.5% (not 12%) and
+      // PALE active ~17.6% (not 22%) — up to 10/255 per channel. Open contract question; the code keeps
+      // the stated rule. Tolerance 12/255 so a real regression (wrong direction, wrong mix) still fails.
+      for (const [got, want] of [[v['--color-brand-hover'], row.hover], [v['--color-brand-active'], row.active]] as const) {
+        const a = got.match(/\w\w/g)!.map((h) => parseInt(h, 16))
+        const b = want.replace('#', '').match(/\w\w/g)!.map((h) => parseInt(h, 16))
+        a.forEach((x, i) => expect(Math.abs(x - b[i])).toBeLessThanOrEqual(12))
+      }
+    }
+  })
+
+  it('contrast helpers', () => {
+    expect(contrastRatio('#111111', '#ffffff')).toBeCloseTo(18.9, 1)
+    expect(bestLabel('#E8C547')).toBe('#111111')
+    expect(darken('#111111', 0.12)).toBe('#0f0f0f')
+  })
+})

package/templates/nova/tests/styles/tokens.test.ts

@@ -0,0 +1,35 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import foundations from '../../.tanqory/contracts/nova-01.json'
+
+/**
+ * tokens.css against the approved Nova 01 colour table. Differences are only
+ * allowed where tokens.css documents them (the two inks darkened so the
+ * role's contrast promise holds on every light surface; renamed borders).
+ */
+const css = readFileSync(join(__dirname, '../../src/styles/tokens.css'), 'utf8')
+const root = css.slice(css.indexOf(':root {'), css.indexOf('/* ── Responsive scale'))
+function value(name: string): string | undefined {
+  const v = root.match(new RegExp(`${name}:\\s*([^;]+);`))?.[1].trim().toLowerCase()
+  const alias = v?.match(/^var\((--[\w-]+)\)$/)
+  return alias ? value(alias[1]) : v
+}
+
+const RENAMED: Record<string, string> = { '--color-border-strong': '--color-border-emphasis', '--color-success-bg': '--color-success-surface', '--color-warning-bg': '--color-warning-surface', '--color-danger-bg': '--color-danger-surface' }
+const DOCUMENTED_DEVIATION = new Set(['--color-fg-muted', '--color-fg-subtle'])
+const NOT_A_LITERAL = new Set(['--color-button-primary-bg', '--color-button-secondary-border', '--color-overlay-scrim', '--color-overlay-gradient', '--color-border-inverse'])
+
+describe('tokens.css ↔ Nova 01', () => {
+  const colors = (foundations as unknown as { colors: { n: string; v: string }[] }).colors
+  for (const c of colors) {
+    if (NOT_A_LITERAL.has(c.n)) continue
+    it(`${c.n} = ${c.v}${DOCUMENTED_DEVIATION.has(c.n) ? ' (documented deviation)' : ''}`, () => {
+      const got = value(RENAMED[c.n] ?? c.n)
+      expect(got).toBeDefined()
+      if (DOCUMENTED_DEVIATION.has(c.n)) expect(got).not.toBe(c.v.toLowerCase())
+      else expect(got).toBe(c.v.toLowerCase())
+    })
+  }
+  it('focus ring is never the brand', () => expect(value('--color-focus')).toBe('#0b57d0'))
+})