create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/components/forms/blocks/Newsletter.tsx

@@ -0,0 +1,71 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { Button } from '../../base/Button'
+import { Icon } from '../../../styles/Icon'
+import { RichText } from '../../content/RichText'
+import { NewsletterForm, type NewsletterFormProps } from '../NewsletterForm'
+import { resultFor } from '../GatewayFields'
+import '../../../styles/blocks.css'
+import './Newsletter.css'
+
+/**
+ * 12A · newsletter (section-as-block, no rows of its own — its settings are
+ * the 12G newsletter section's). Compact band: heading + body, then the form
+ * ONLY when it can submit (DATA REQUIREMENT): to the merchant's own `action`
+ * URL when set, else the platform's native form endpoint (`endpoint`, the
+ * section's path: `<form data-tq-form="newsletter">`); otherwise the link-out
+ * button when a buttonUrl is set; otherwise copy only. Heading and text default
+ * to shipped copy, so a new block is never an empty band.
+ */
+const SAB = '12A newsletter is a section-as-block with no rows; its settings are the 12G newsletter section.'
+/**
+ * Persisted as `newsletter-signup`. It was `newsletter` — the same name as the
+ * Newsletter SECTION, and the platform catalog has one entry per name, so the
+ * block collapsed into the section's entry (role `section`) and "Add block" in
+ * the footer / a group could never offer it. Saved content that still holds a
+ * `newsletter` block keeps rendering as this block (`legacyNames`; the parents
+ * keep accepting it through `legacyBlocks`).
+ */
+export const NEWSLETTER_BLOCK = 'newsletter-signup'
+export const newsletterBlockSchema = defineSchema(
+  { kind: 'block', name: NEWSLETTER_BLOCK, legacyNames: ['newsletter'], family: '12A', parents: ['footer', 'group'], title: 'Newsletter', description: 'Heading, text and an email field.', icon: '✉' },
+  {
+    // Shipped copy, like the Newsletter section's: a block just added (or the footer's Newsletter-led preset)
+    // shows a heading and text in the page's language (copy.joinTheNewsletter / copy.beTheFirstToHear) until the
+    // merchant writes their own, which always wins.
+    heading: field.text('Join the newsletter', { extension: SAB }),
+    body: field.richtext('Be the first to hear…', { extension: SAB }),
+    buttonLabel: field.text('Subscribe', { extension: SAB }),
+    buttonUrl: field.url('', { extension: SAB }),
+    action: field.url('', { extension: SAB }),
+    placeholder: field.text('you@example.com', { extension: SAB }),
+    note: field.text('', { extension: SAB }),
+  },
+)
+export type NewsletterBlockProps = Partial<SettingsOf<typeof newsletterBlockSchema>> & {
+  /** The platform's sign-up endpoint, when it has one (`store.newsletterEndpoint`). */
+  endpoint?: string
+  /** The outcome of a platform form POST this page answers (`store.formResult`). */
+  formResult?: { formId: string } & NonNullable<NewsletterFormProps['result']>
+}
+
+export function NewsletterBlock({ heading = '', body = '', buttonLabel = 'Subscribe', buttonUrl = '', action = '', placeholder = 'you@example.com', note = '', endpoint, formResult }: NewsletterBlockProps): JSX.Element | null {
+  if (!heading && !body) return null
+  const form = action.trim() || endpoint?.trim() || ''
+  // The platform's endpoint posts as its `newsletter` form (theme-abi §1); a merchant's own URL is theirs.
+  const formId = !action.trim() && endpoint?.trim() ? 'newsletter' : undefined
+  return (
+    <div className="nv-block nv-newsletter-block" data-block="newsletter">
+      <div className="nv-newsletter-block__copy">
+        {heading && <p className="nv-newsletter-block__heading"><bdi>{heading}</bdi></p>}
+        <RichText html={body} className="nv-newsletter-block__body" />
+      </div>
+      {form ? (
+        <NewsletterForm action={form} placeholder={placeholder} buttonLabel={buttonLabel} note={note} formId={formId} result={resultFor(formResult, formId)} />
+      ) : buttonUrl ? (
+        <Button href={buttonUrl} variant="secondary" iconEnd={<Icon name="arrow-up-right" size="sm" />}>
+          <bdi>{buttonLabel}</bdi>
+        </Button>
+      ) : null}
+    </div>
+  )
+}

package/templates/nova/src/components/forms/validate.ts

@@ -0,0 +1,4 @@
+/** A full address: something@domain.tld — "mali@halden" is not one (12G · invalid email). */
+export function isEmail(value: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value.trim())
+}

package/templates/nova/src/components/listing/ProductListing.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { ProductCard } from '../commerce/ProductCard'
+import { ActiveFilters, CardSkeleton, Disclosure, FacetList, FacetOptions, ListingMessage, LoadMore, SortMenu } from '../commerce/ListingParts'
+import { Pagination } from '../navigation/Pagination'
+import { Button } from '../base/Button'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { Drawer } from '../overlays/Drawer'
+import { Modal } from '../overlays/Modal'
+
+/**
+ * 12C · 02 / 03 — the ONE browsing system: main-collection is the collection
+ * page itself (route data); product-grid is the same grid placed anywhere with
+ * a chosen collection. Same toolbar, filters, card and pagination.
+ *
+ *   filterLayout  sidebar · top-bar (popovers) · drawer · none; ALWAYS a
+ *                 sheet below 1024 (Filter + Sort buttons stick under the header)
+ *   no facets     → the filter UI collapses; sort + count stay (editor explains)
+ *   pagination    load-more ("Showing x of y" + a progress line) · pages
+ *   states        loading → skeleton cards at card geometry · failed → an
+ *                 error line + Try again in the grid area (role="alert") ·
+ *                 filters exclude everything → No products match + Clear all ·
+ *                 empty → "This collection is empty right now" + Shop all
+ * Presentational: the host applies filters, sorts and fetches.
+ */
+export interface ListingSettings {
+  columns: '3' | '4'
+  mobileColumns: '1' | '2'
+  filterLayout: 'sidebar' | 'top-bar' | 'drawer' | 'none'
+  showSort: boolean
+  showCount: boolean
+  pagination: 'load-more' | 'pages'
+  productsPerPage: string
+}
+
+export type { ListingData } from '@tanqory/theme-kit'
+import type { ListingData } from '@tanqory/theme-kit'
+
+export function ProductListing({ settings, data, quickAdd, editorNoFacets }: { settings: ListingSettings; data: ListingData; quickAdd?: boolean; editorNoFacets?: ReactNode }): JSX.Element {
+  const { columns, mobileColumns, filterLayout, showSort, showCount, pagination, productsPerPage } = settings
+  const { products = [], facets = [], sortOptions = [], sort, state = 'ready', page = 1, pageHref, shopAllHref, onToggleFilter = () => {}, onPriceFilter, onClearFilters = () => {}, onSortChange = () => {}, onLoadMore, onRetry, onQuickAdd } = data
+  const total = data.total ?? products.length
+  const { strings } = useNova()
+  const size = Number(productsPerPage)
+  const [shown, setShown] = useState(size)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [sheet, setSheet] = useState(false)
+  const [drawer, setDrawer] = useState(false)
+  useEffect(() => setShown(size), [size, facets, sort])
+
+  const hasFacets = filterLayout !== 'none' && facets.some((f) => (f.values?.length ?? 0) > 0 || f.type === 'price')
+  const activeCount = facets.reduce((n, f) => n + (f.values?.filter((v) => v.active).length ?? 0) + (f.range && (f.range.from != null || f.range.to != null) ? 1 : 0), 0)
+  const activeNames = facets.flatMap((f) => (f.values ?? []).filter((v) => v.active).map((v) => v.label)).join(' · ')
+  const visible = pagination === 'pages' ? products.slice(0, size) : products.slice(0, shown)
+  const handlers = { onToggle: onToggleFilter, onPrice: onPriceFilter }
+
+  const more = async () => {
+    const next = shown + size
+    if (next > products.length && onLoadMore) {
+      setLoadingMore(true)
+      try {
+        await onLoadMore()
+      } finally {
+        setLoadingMore(false)
+      }
+    }
+    setShown(next)
+  }
+
+  const grid =
+    state === 'error' ? (
+      <ListingMessage kind="error" onRetry={onRetry} />
+    ) : state === 'loading' ? (
+      <ul className="nv-listing__grid" aria-busy="true" aria-label={strings.loading}>
+        {Array.from({ length: Math.min(size, 12) }, (_, i) => (
+          <li key={i}>
+            <CardSkeleton />
+          </li>
+        ))}
+      </ul>
+    ) : !visible.length ? (
+      <ListingMessage kind={activeCount ? 'no-matches' : 'empty'} filterNames={activeNames} onClear={onClearFilters} shopAllHref={shopAllHref} />
+    ) : (
+      <ul className="nv-listing__grid">
+        {visible.map((p, i) => (
+          <li key={p.id}>
+            <ProductCard product={p} priority={i < Number(columns)} onQuickAdd={quickAdd ? onQuickAdd ?? (() => {}) : undefined} />
+          </li>
+        ))}
+      </ul>
+    )
+
+  const count = showCount && (
+    <p className="nv-listing__count nv-tabular" aria-live="polite">
+      {fmt(strings.productsCount, { count: total })}
+    </p>
+  )
+  const sortMenu = showSort && <SortMenu options={sortOptions} value={sort} onChange={onSortChange} />
+
+  return (
+    <div className="nv-listing" data-filters={hasFacets ? filterLayout : 'none'} data-columns={columns} data-mobile-columns={mobileColumns}>
+      {/* < 1024: Filter + Sort buttons, sticky under the header. */}
+      <div className="nv-listing__mobile-bar">
+        {hasFacets && (
+          <Button variant="secondary" onClick={() => setSheet(true)} iconEnd={activeCount ? <span className="nv-listing__badge nv-tabular">{activeCount}</span> : undefined}>
+            {strings.filter}
+          </Button>
+        )}
+        {sortMenu}
+      </div>
+
+      <div className="nv-listing__body">
+        {hasFacets && filterLayout === 'sidebar' && (
+          <aside className="nv-listing__sidebar" aria-label={strings.filters}>
+            <FacetList facets={facets} {...handlers} />
+          </aside>
+        )}
+        <div className="nv-listing__main">
+          <div className="nv-listing__toolbar">
+            {hasFacets && filterLayout === 'top-bar' && (
+              <div className="nv-listing__facet-bar" role="group" aria-label={strings.filters}>
+                {facets.map((f) => {
+                  const n = (f.values ?? []).filter((v) => v.active).length
+                  return (
+                    <Disclosure key={f.id} label={n ? `${f.label} · ${n}` : f.label}>
+                      {(close) => (
+                        <div className="nv-listing__popover">
+                          <FacetOptions facet={f} {...handlers} />
+                          <Button block onClick={close}>
+                            {fmt(strings.showCount, { count: total })}
+                          </Button>
+                        </div>
+                      )}
+                    </Disclosure>
+                  )
+                })}
+              </div>
+            )}
+            {hasFacets && filterLayout === 'drawer' && (
+              <Button variant="secondary" onClick={() => setDrawer(true)} iconStart={<Icon name="filter" size="sm" />}>
+                {activeCount ? `${strings.filters} · ${activeCount}` : strings.filters}
+              </Button>
+            )}
+            {filterLayout !== 'top-bar' && <ActiveFilters facets={facets} {...handlers} onClear={onClearFilters} />}
+            <div className="nv-listing__toolbar-end">
+              {count}
+              <div className="nv-listing__sort">{sortMenu}</div>
+            </div>
+          </div>
+          {filterLayout === 'top-bar' && <ActiveFilters facets={facets} {...handlers} onClear={onClearFilters} />}
+          {editorNoFacets}
+          {grid}
+          {state === 'ready' && visible.length > 0 &&
+            (pagination === 'pages' ? (
+              pageHref && total > size && <Pagination page={page} pages={Math.ceil(total / size)} href={pageHref} />
+            ) : (
+              <LoadMore shown={visible.length} total={total} loading={loadingMore} onLoadMore={more} />
+            ))}
+        </div>
+      </div>
+
+      {hasFacets && (
+        <Modal
+          open={sheet}
+          onClose={() => setSheet(false)}
+          title={strings.filters}
+          footer={
+            <>
+              <Button variant="secondary" onClick={onClearFilters}>
+                {strings.clearAll}
+              </Button>
+              <Button onClick={() => setSheet(false)}>{fmt(strings.showProducts, { count: total })}</Button>
+            </>
+          }
+        >
+          <FacetList facets={facets} {...handlers} />
+        </Modal>
+      )}
+      {hasFacets && filterLayout === 'drawer' && (
+        <Drawer
+          open={drawer}
+          onClose={() => setDrawer(false)}
+          side="start"
+          title={strings.filters}
+          footer={
+            <>
+              <Button variant="secondary" onClick={onClearFilters}>
+                {strings.clearAll}
+              </Button>
+              <Button onClick={() => setDrawer(false)}>{fmt(strings.showProducts, { count: total })}</Button>
+            </>
+          }
+        >
+          <FacetList facets={facets} {...handlers} />
+        </Drawer>
+      )}
+    </div>
+  )
+}

package/templates/nova/src/components/navigation/BrandLogo.tsx

@@ -0,0 +1,35 @@
+import type { NovaShop } from '@tanqory/theme-kit'
+
+/**
+ * The store's identity, resolved once for every surface (12A brand
+ * resolution): the global Brand logo IMAGE (Settings → Brand) → the
+ * section's own text (header.logo / footer-brand.title) → the shop name.
+ * Presentation (height, wordmark size) belongs to the host, via classes.
+ */
+export interface BrandLogoProps {
+  shop: NovaShop
+  /** The host section's text override; '' = not set. */
+  text?: string
+  imageClassName?: string
+  textClassName?: string
+  /** Wordmarks longer than this get data-long (header: > 18 → 15px, two lines). */
+  longAt?: number
+  /** Element for the text wordmark: inline in a link (header), a paragraph in a column (footer). */
+  as?: 'span' | 'p'
+}
+
+export function brandName(shop: NovaShop, text?: string): string {
+  return text?.trim() || shop.name
+}
+
+export function BrandLogo({ shop, text, imageClassName, textClassName, longAt = 18, as: As = 'span' }: BrandLogoProps): JSX.Element {
+  if (shop.logo) {
+    return <img className={imageClassName} src={shop.logo.src} alt={shop.logo.alt || shop.name} width={shop.logo.width} height={shop.logo.height} />
+  }
+  const name = brandName(shop, text)
+  return (
+    <As className={textClassName} data-long={name.length > longAt ? '' : undefined}>
+      <bdi>{name}</bdi>
+    </As>
+  )
+}

package/templates/nova/src/components/navigation/Breadcrumb.css

@@ -0,0 +1,16 @@
+.nv-breadcrumb { font-size: var(--type-body-sm); line-height: var(--leading-snug); color: var(--color-fg-muted); }
+.nv-breadcrumb__trail { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--space-1); }
+.nv-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; }
+.nv-breadcrumb__link { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-underline-offset: var(--underline-offset); }
+.nv-breadcrumb__link:hover { color: var(--color-fg); text-decoration: underline; }
+.nv-breadcrumb__sep { display: inline-block; margin-inline: var(--space-2); color: var(--color-fg-subtle); }
+.nv-breadcrumb__current { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-fg); vertical-align: bottom; }
+[data-nv-surface='inverse'] .nv-breadcrumb { color: inherit; }
+[data-nv-surface='inverse'] :is(.nv-breadcrumb__current, .nv-breadcrumb__sep) { color: inherit; }
+.nv-breadcrumb__back { display: none; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: inherit; }
+
+@media (max-width: 639.98px) {
+  .nv-breadcrumb[data-mobile='back-link'] .nv-breadcrumb__trail { display: none; }
+  .nv-breadcrumb[data-mobile='back-link'] .nv-breadcrumb__back { display: inline-flex; }
+  .nv-breadcrumb[data-mobile='full'] .nv-breadcrumb__current { white-space: normal; max-width: none; }
+}

package/templates/nova/src/components/navigation/Breadcrumb.tsx

@@ -0,0 +1,59 @@
+import type { BreadcrumbItem } from '@tanqory/theme-kit'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { Icon } from '../../styles/Icon'
+import './Breadcrumb.css'
+
+/**
+ * Nova 02 · Breadcrumb — full trail, or on phone (<640) the parent only as a
+ * 44px back link. The current page is plain text with aria-current="page",
+ * one line with an ellipsis at 40ch (full title kept as text). Separators are
+ * aria-hidden; the chevron mirrors in RTL.
+ */
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+  separator?: '/' | '›'
+  mobileStyle?: 'back-link' | 'full'
+  showCurrent?: boolean
+}
+
+export function Breadcrumb({ items, separator = '/', mobileStyle = 'back-link', showCurrent = true }: BreadcrumbProps): JSX.Element | null {
+  const { strings } = useNova()
+  if (items.length < 2) return null
+  const current = items[items.length - 1]
+  const trail = showCurrent ? items : items.slice(0, -1)
+  const parent = [...items.slice(0, -1)].reverse().find((i) => i.url)
+  return (
+    <nav className="nv-breadcrumb" aria-label={strings.breadcrumb} data-mobile={mobileStyle}>
+      <ol className="nv-breadcrumb__trail">
+        {trail.map((item, i) => {
+          const isCurrent = item === current
+          return (
+            <li key={`${item.title}-${i}`} className="nv-breadcrumb__item">
+              {isCurrent || !item.url ? (
+                <span className="nv-breadcrumb__current" aria-current={isCurrent ? 'page' : undefined} title={isCurrent ? item.title : undefined}>
+                  <bdi>{item.title}</bdi>
+                </span>
+              ) : (
+                <a href={item.url} className="nv-breadcrumb__link">
+                  <bdi>{item.title}</bdi>
+                </a>
+              )}
+              {i < trail.length - 1 && (
+                <span className={['nv-breadcrumb__sep', separator === '›' ? 'nv-dir' : ''].join(' ')} aria-hidden>
+                  {separator}
+                </span>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+      {parent?.url && mobileStyle === 'back-link' && (
+        <a href={parent.url} className="nv-breadcrumb__back" aria-label={fmt(strings.backTo, { title: parent.title })}>
+          <Icon name="chevron-left" size="sm" />
+          <span><bdi>{parent.title}</bdi></span>
+        </a>
+      )}
+    </nav>
+  )
+}

package/templates/nova/src/components/navigation/LineAddFriend.css

@@ -0,0 +1,5 @@
+/* LINE's Add friend button: LINE green, white logo and bold label, 44px target; 10% black on hover, 30% on press. */
+.nv-line-add { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch-target, 44px); padding: 0 16px; border-radius: 8px; background: #06c755; color: #ffffff; font-weight: 700; text-decoration: none; }
+.nv-line-add:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .1); }
+.nv-line-add:active { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .3); }
+.nv-line-add__logo { width: 22px; height: 22px; flex: none; }

package/templates/nova/src/components/navigation/LineAddFriend.tsx

@@ -0,0 +1,42 @@
+import { useNova } from '../../styles/NovaProvider'
+import './LineAddFriend.css'
+
+/** Where a LINE Official Account's add friend link lives (LINE Official Account Manager gives one of these). */
+const LINE_HOSTS = new Set(['line.me', 'lin.ee', 'page.line.me'])
+
+/** The merchant's add friend link when it is an https link to LINE, else '' (nothing to show). */
+export function lineAddFriendUrl(raw: string | undefined): string {
+  try {
+    const url = new URL((raw ?? '').trim())
+    return url.protocol === 'https:' && LINE_HOSTS.has(url.hostname) ? url.href : ''
+  } catch {
+    return ''
+  }
+}
+
+export interface LineAddFriendButtonProps {
+  url: string
+  className?: string
+}
+
+/**
+ * LINE's Add friend button: LINE green with the white LINE logo and LINE's own wording ("Add friend"), opening the
+ * store's LINE Official Account (the LINE app on a phone). Its accessible name says where it goes; the logo is
+ * decorative. Renders nothing without a LINE link.
+ */
+export function LineAddFriendButton({ url, className }: LineAddFriendButtonProps): JSX.Element | null {
+  const { strings } = useNova()
+  const href = lineAddFriendUrl(url)
+  if (!href) return null
+  return (
+    <a className={['nv-line-add', className].filter(Boolean).join(' ')} href={href} rel="noopener" target="_blank" aria-label={strings.lineAddFriendLabel}>
+      <svg className="nv-line-add__logo" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path
+          fill="currentColor"
+          d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"
+        />
+      </svg>
+      <span>{strings.lineAddFriend}</span>
+    </a>
+  )
+}

package/templates/nova/src/components/navigation/LocaleSelector.css

@@ -0,0 +1,33 @@
+.nv-region {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  font-size: var(--type-body-sm);
+  line-height: 1.2;
+  color: var(--color-fg);
+  white-space: nowrap;
+}
+.nv-region > .nv-icon:first-child { color: var(--color-fg-muted); }
+.nv-region > .nv-icon:last-child { color: var(--color-fg-muted); stroke-width: 1.8; transition: transform var(--duration-base) var(--ease-standard); }
+.nv-region[aria-expanded='true'] > .nv-icon:last-child { transform: rotate(180deg); }
+.nv-region__value { font-weight: var(--weight-medium); }
+.nv-region__meta { color: var(--color-fg-muted); }
+
+.nv-region[data-variant='field'] {
+  padding-inline: 12px 10px;
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--input-radius);
+  background: var(--color-bg);
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.nv-region[data-variant='field']:hover { border-color: var(--color-border-input); }
+.nv-region[data-variant='field'][data-size='lg'] { min-height: 48px; }
+.nv-region[data-variant='field'][data-block] { display: flex; width: 100%; }
+.nv-region[data-variant='field'][data-block] .nv-region__meta { flex: 1; text-align: start; }
+/* Country | language · currency — a hairline rule between the first fact and the rest. */
+.nv-region[data-variant='field'] .nv-region__value { padding-inline-end: 10px; border-inline-end: 1px solid var(--color-border-control); }
+
+.nv-region[data-variant='compact'] { gap: 6px; padding-inline: var(--space-2); border-radius: var(--radius-md); }
+.nv-region[data-variant='compact']:hover { background: var(--color-bg-muted); }
+[data-nv-surface='inverse'] .nv-region[data-variant='field'] { background: transparent; color: inherit; border-color: var(--color-border-inverse); }

package/templates/nova/src/components/navigation/LocaleSelector.tsx

@@ -0,0 +1,64 @@
+import { forwardRef } from 'react'
+import type { NovaLocalization } from '@tanqory/theme-kit'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import './LocaleSelector.css'
+
+/**
+ * 12A · Region · language · currency control — "one trigger, three facts".
+ * Country leads (it sets currency and shipping), then language and currency
+ * in muted text. Opens the Region & language dialog (Nova 13) via `onOpen`;
+ * never a native select.
+ *
+ *   field   40 desktop · 48 in phone sheets and footers (size="lg"); 1px
+ *           --color-border-control, hover --color-border-input, radius 8
+ *   compact the header's borderless 40 trigger: "TH · EN"
+ *
+ * Only what varies is shown: one language → no language; the trigger shows
+ * the 2-letter code with 2–4 languages and the native name with 5+.
+ * Nothing renders when neither country nor language can change.
+ */
+export interface LocaleSelectorProps {
+  localization: NovaLocalization
+  onOpen?: () => void
+  variant?: 'field' | 'compact'
+  size?: 'md' | 'lg'
+  block?: boolean
+  /** The dialog it controls is open (MarketSelector sets this). */
+  expanded?: boolean
+}
+
+export const LocaleSelector = forwardRef<HTMLButtonElement, LocaleSelectorProps>(function LocaleSelector({ localization, onOpen, variant = 'field', size = 'md', block, expanded }, ref): JSX.Element | null {
+  const { strings } = useNova()
+  const { current, available } = localization
+  const countries = new Set(available.map((m) => m.countryCode))
+  const languages = [...new Map(available.map((m) => [m.languageCode, m.language])).keys()]
+  if (countries.size <= 1 && languages.length <= 1) return null
+  const showLanguage = languages.length > 1
+  const lang = languages.length >= 5 ? current.language : current.languageCode.toUpperCase()
+  const label = `${strings.region}: ${current.country}${showLanguage ? `, ${current.language}` : ''}, ${current.currencyCode}`
+
+  if (variant === 'compact') {
+    return (
+      <button ref={ref} type="button" className="nv-region" data-variant="compact" onClick={onOpen} aria-label={label} aria-haspopup="dialog" aria-expanded={expanded}>
+        <Icon name="globe" size="sm" />
+        <span className="nv-region__value">
+          {current.countryCode}
+          {showLanguage && ` · ${lang}`}
+        </span>
+        <Icon name="chevron-down" size={14} />
+      </button>
+    )
+  }
+  return (
+    <button ref={ref} type="button" className="nv-region" data-variant="field" data-size={size} data-block={block ? '' : undefined} onClick={onOpen} aria-label={label} aria-haspopup="dialog" aria-expanded={expanded}>
+      <Icon name="globe" size="sm" />
+      <span className="nv-region__value">{current.country}</span>
+      <span className="nv-region__meta">
+        {showLanguage && `${lang} · `}
+        {current.currencyCode} {current.currencySymbol}
+      </span>
+      <Icon name="chevron-down" size={14} />
+    </button>
+  )
+})

package/templates/nova/src/components/navigation/Menu.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import type { NovaMenuItem } from '@tanqory/theme-kit'
+
+/**
+ * A menu's items as a link list — the one rendering of merchant menu data
+ * used by the footer columns, the centered footer's inline row and the
+ * header's mega / simple panels. Items without a URL render as text.
+ * Nested levels are the host's concern (the header panel, the drawer).
+ */
+export interface MenuProps {
+  items: NovaMenuItem[]
+  className?: string
+  /** Appended after the items (e.g. the simple dropdown's "Shop all"). */
+  trailing?: ReactNode
+}
+
+export function Menu({ items, className, trailing }: MenuProps): JSX.Element {
+  return (
+    <ul className={className}>
+      {items.map((l, i) => (
+        <li key={`${l.title}-${i}`}>{l.url ? <a href={l.url} aria-current={l.active ? 'page' : undefined}><bdi>{l.title}</bdi></a> : <span><bdi>{l.title}</bdi></span>}</li>
+      ))}
+      {trailing}
+    </ul>
+  )
+}

package/templates/nova/src/components/navigation/Pagination.css

@@ -0,0 +1,24 @@
+.nv-pagination { display: flex; align-items: center; gap: var(--space-2); }
+.nv-pagination__pages { display: flex; align-items: center; gap: var(--space-1); }
+.nv-pagination :is(.nv-pagination__page, .nv-pagination__arrow) {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--touch-target);
+  height: var(--touch-target);
+  border-radius: var(--radius-md);
+  color: var(--color-fg);
+}
+.nv-pagination__page:hover { background: var(--color-bg-muted); }
+.nv-pagination__page[aria-current='page'] { background: var(--color-fg); color: var(--color-bg); }
+.nv-pagination__arrow[aria-disabled='true'] { color: var(--color-fg-subtle); }
+.nv-pagination[data-variant='compact'] { justify-content: space-between; width: 100%; }
+.nv-pagination[data-variant='compact'] .nv-pagination__arrow { box-shadow: inset 0 0 0 1px var(--color-border); }
+.nv-pagination__gap { min-width: 24px; text-align: center; color: var(--color-fg-muted); }
+
+.nv-pagination__status { display: none; }
+.nv-pagination[data-variant='compact'] .nv-pagination__status { display: inline; }
+@media (max-width: 639.98px) {
+  .nv-pagination[data-variant='numbered'] .nv-pagination__pages { display: none; }
+  .nv-pagination[data-variant='numbered'] { justify-content: space-between; width: 100%; }
+  .nv-pagination[data-variant='numbered'] .nv-pagination__status { display: inline; }
+}