create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/sections/FeaturedProduct/FeaturedProduct.tsx

@@ -0,0 +1,107 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useEffect, useMemo, useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { AddToCart } from '../../components/commerce/AddToCart'
+import { Price } from '../../components/commerce/Price'
+import { VariantPicker, findVariant, initialSelection, unavailableReason } from '../../components/commerce/VariantPicker'
+import { RichText } from '../../components/content/RichText'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import type { Product, ProductVariant } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/commerce.css'
+import { featuredProductSchema } from './schema'
+
+export type FeaturedProductSettings = SettingsOf<typeof featuredProductSchema>
+export interface FeaturedProductProps extends FeaturedProductSettings {
+  product?: Product | null
+  /** The saved product exists but is unpublished or deleted (adapter). */
+  productUnavailable?: boolean
+  /** Resolves when the line is in the cart; rejects on failure. */
+  onAddToCart?: (variant: ProductVariant, quantity: number) => Promise<unknown> | void
+}
+
+export function FeaturedProduct(props: FeaturedProductProps): JSX.Element | null {
+  const { product, productUnavailable, body, buttonLabel, buttonLink, mediaPosition, mediaRatio, showVariants, descriptionLines, showViewDetails, sectionWidth, eyebrow, onAddToCart } = props
+  const { mode, strings } = useNova()
+  const [selected, setSelected] = useState(() => (product ? initialSelection(product) : {}))
+  // The first render may have only the bootstrap's card (no variant options);
+  // the full product replaces it under the same id. Whenever the product data
+  // changes, a selection it cannot match reopens on its first available variant.
+  useEffect(() => {
+    if (product && !findVariant(product, selected)) setSelected(initialSelection(product))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [product])
+  const variant = useMemo(() => (product ? findVariant(product, selected) : undefined), [product, selected])
+
+  if (!product) {
+    return mode === 'editor' ? (
+      <section {...sectionRootProps(props, 'featured-product')} className="nv-merch">
+        <div className="nv-section-container" data-width={sectionWidth}>
+          <EditorFrame section="featured-product" title={productUnavailable ? strings.editorProductUnavailable : strings.editorChooseProduct} hint={strings.editorChooseProductHint} />
+        </div>
+      </section>
+    ) : null
+  }
+
+  const image = product.featuredImage ?? product.images[0] ?? null
+  const soldOut = !product.available
+  const shown = variant ?? product.variants[0]
+  const price = shown?.price ?? product.priceRange.min
+  const compareAt = shown?.compareAtPrice ?? product.compareAtPriceRange?.min ?? null
+  const text = body.trim() || product.descriptionHtml || product.description || ''
+  const reachable = variant?.available
+  const reason = !soldOut && showVariants && !reachable ? unavailableReason(product, selected, strings.combinationUnavailable) : undefined
+
+  return (
+    <section {...sectionRootProps(props, 'featured-product')} className="nv-merch nv-featured-product" data-media={image ? mediaPosition : 'none'} data-ratio={mediaRatio} data-lines={descriptionLines}>
+      <div className="nv-section-container" data-width={sectionWidth}>
+        <div className="nv-featured-product__grid">
+          {image && (
+            <div className={sxJoin("nv-featured-product__media", sx(mediaRatio === 'adapt' ? { aspectRatio: `${image.width} / ${image.height}` } : undefined))}>
+              <img src={image.src} srcSet={image.srcSet} sizes="(min-width: 1024px) 50vw, 100vw" alt={image.alt ?? ''} width={image.width} height={image.height} loading="lazy" decoding="async" />
+            </div>
+          )}
+          <div className="nv-featured-product__info">
+            {eyebrow.trim() && <p className="nv-featured-product__eyebrow"><bdi>{eyebrow}</bdi></p>}
+            <h2 className="nv-featured-product__title"><bdi>{product.title}</bdi></h2>
+            <Price size="pdp" price={price} compareAt={compareAt} soldOut={soldOut} />
+            {descriptionLines !== 'none' && text && <RichText html={text} className="nv-featured-product__desc" />}
+            {showVariants ? (
+              <>
+                <VariantPicker product={product} selected={selected} onChange={(o, v) => setSelected((s) => ({ ...s, [o]: v }))} />
+                <div className="nv-featured-product__actions">
+                  <AddToCart block={false} soldOut={soldOut} unavailableReason={reason} onAdd={() => (variant ? onAddToCart?.(variant, 1) : undefined)} />
+                  {showViewDetails && (
+                    <Button href={product.url} variant="tertiary">
+                      {strings.viewDetails}
+                    </Button>
+                  )}
+                </div>
+              </>
+            ) : (
+              <div className="nv-featured-product__actions">
+                {soldOut ? (
+                  <Button variant="primary" size="lg" disabled>
+                    {strings.soldOut}
+                  </Button>
+                ) : (
+                  <Button href={buttonLink.trim() || product.url} variant="primary" size="lg">
+                    {buttonLabel.trim() || strings.viewDetails}
+                  </Button>
+                )}
+                {showViewDetails && (soldOut || buttonLink.trim()) && (
+                  <Button href={product.url} variant="tertiary">
+                    {strings.viewDetails}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/nova/src/sections/FeaturedProduct/index.ts

@@ -0,0 +1,23 @@
+import { defineSection, productFor, resolveSettings } from '@tanqory/theme-kit'
+import { FeaturedProduct } from './FeaturedProduct'
+import { presets } from './presets'
+import { featuredProductSchema } from './schema'
+
+export default defineSection({
+  id: 'featured-product',
+  schema: featuredProductSchema,
+  component: FeaturedProduct,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Featured product',
+  description: 'One product with price, variants and Add to cart.',
+  icon: '★',
+  presets,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(featuredProductSchema, node.settings)
+      const { product, unavailable } = productFor(store, r.handles.product)
+      return { ...r.settings, product, productUnavailable: unavailable,
+      onAddToCart: (variant: { id: string }, quantity: number) => actions.cart.add(variant.id, quantity),
+    }
+  },
+})

package/templates/nova/src/sections/FeaturedProduct/presets.ts

@@ -0,0 +1,8 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Hero product with inline buying
+  {"name": "fp-spotlight", "label": "Spotlight", "settings": {"mediaPosition": "left", "mediaRatio": "square", "showVariants": true, "descriptionLines": "3"}, "blocks": []},
+  // Editorial feature linking to the product
+  {"name": "fp-story", "label": "Story", "settings": {"mediaPosition": "right", "mediaRatio": "portrait", "showVariants": false, "descriptionLines": "full"}, "blocks": []},
+]

package/templates/nova/src/sections/FeaturedProduct/schema.ts

@@ -0,0 +1,35 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12C · 05 featured-product — a single-product spotlight that can be bought
+ * without leaving the page: media beside eyebrow · title · price · text,
+ * then options + Add to cart (showVariants) or price + one button.
+ *
+ *   no image → a text-only spotlight (media column removed)
+ *   sold out → disabled "Sold out" + View details
+ *   unpublished / deleted / none → hidden (editor: setup frame)
+ *   the title wraps up to 3 lines; image first at 390
+ */
+export const featuredProductSchema = defineSchema(
+  { kind: 'section', name: 'featured-product', family: '12C' },
+  {
+    product: field.resource('product'),
+    body: field.richtext(''),
+    buttonLabel: field.text('Shop now'),
+    buttonLink: field.url(''),
+    mediaPosition: field.select(['left', 'right'], 'left'),
+    mediaRatio: field.select(['adapt', 'square', 'portrait'], 'square'),
+    showVariants: field.boolean(true),
+    descriptionLines: field.select(['none', '3', 'full'], '3'),
+    showViewDetails: field.boolean(true),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    eyebrow: shared.eyebrow(),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/Footer/Footer.css

@@ -0,0 +1,81 @@
+/* 12A footer (.dc canonical) — 64 top / 28 bottom desktop; 40 / 24 at 390. */
+.nv-footer { padding-block: var(--space-7) var(--space-5); }
+.nv-footer[data-bg='surface'] { border-top: var(--border-subtle); }
+.nv-footer__inner { display: grid; gap: var(--space-7); max-width: calc(var(--container-standard) + 2 * var(--page-gutter)); margin-inline: auto; padding-inline: var(--page-gutter); }
+.nv-footer a { color: inherit; }
+.nv-footer a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+
+.nv-footer__newsletter { padding-bottom: var(--space-6); border-bottom: var(--border-subtle); }
+.nv-footer__grid { display: grid; gap: var(--space-6); }
+.nv-footer__brand { display: grid; gap: var(--space-5); align-content: start; }
+.nv-footer__heading { margin-bottom: var(--space-4); font-family: var(--font-body); font-size: 0.875rem; font-weight: var(--weight-medium); letter-spacing: 0; line-height: var(--leading-snug); }
+.nv-footer__menu-list { display: grid; gap: 0.6875rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-fg-muted); }
+.nv-footer__text { font-size: 0.875rem; line-height: 1.6; color: var(--color-fg-muted); }
+.nv-footer__text p + p { margin-top: var(--space-2); }
+.nv-footer__menu-accordion { display: none; }
+
+/* Fixed rows: a hairline, the utility row, the legal row. */
+.nv-footer__rows { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: var(--border-subtle); }
+.nv-footer__utility { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
+.nv-footer__utility-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
+.nv-footer__utility-start .nv-social { margin-inline-start: -10px; }
+.nv-footer__utility-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
+.nv-footer__rule { width: 1px; height: 24px; margin-inline: var(--space-2); background: var(--color-border-control); }
+.nv-footer__region-phone { display: none; }
+.nv-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-footer__copyright { color: var(--color-fg); }
+.nv-footer__legal-slot { display: contents; }
+.nv-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
+.nv-footer__legal-links a, .nv-footer__text-btn { display: inline-flex; align-items: center; min-height: 24px; color: inherit; font-size: inherit; }
+.nv-footer__text-btn:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-footer__powered { margin-inline-start: auto; font-size: var(--type-label); color: var(--color-fg-muted); }
+/* A 44px-tall hit area around the small "Made with" link, drawn by a transparent pseudo-element: nothing moves. */
+.nv-footer__powered a { position: relative; }
+.nv-footer__powered a::after { content: ''; position: absolute; inset: -14px -4px; }
+[data-nv-surface='inverse'] :is(.nv-footer__menu-list, .nv-footer__text, .nv-footer__legal, .nv-footer__powered) { color: #c9c9c6; }
+[data-nv-surface='inverse'] .nv-footer__copyright { color: var(--color-fg-inverse); }
+[data-nv-surface='inverse'] .nv-footer__rule { background: var(--color-border-inverse); }
+
+@media (min-width: 1024px) {
+  .nv-footer { padding-block: var(--space-8) 1.75rem; }
+  .nv-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); }
+  .nv-footer__brand { grid-column: span 4; padding-inline-end: var(--space-6); }
+  .nv-footer__menu { grid-column: span 2; }
+  .nv-footer__grid > .nv-footer__brand + .nv-footer__menu { grid-column: 5 / span 2; }
+}
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  .nv-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .nv-footer__brand { grid-column: 1 / -1; }
+}
+
+/* 390: brand → menus (56px accordion rows, first closed) → social → region → payment → legal links → © → powered-by. */
+@media (max-width: 639.98px) {
+  .nv-footer { padding-block: 2.5rem var(--space-5); }
+  .nv-footer__inner { gap: var(--space-6); }
+  .nv-footer[data-mobile-menus='accordion'] .nv-footer__grid { gap: 0; }
+  .nv-footer[data-mobile-menus='accordion'] .nv-footer__brand { padding-bottom: var(--space-5); }
+  .nv-footer[data-mobile-menus='accordion'] .nv-footer__menu > :is(.nv-footer__heading, .nv-footer__menu-body) { display: none; }
+  .nv-footer[data-mobile-menus='accordion'] .nv-footer__menu-accordion { display: block; border-top: var(--border-subtle); }
+  .nv-footer[data-mobile-menus='accordion'] .nv-footer__menu:last-of-type .nv-footer__menu-accordion { border-bottom: var(--border-subtle); }
+  .nv-footer[data-mobile-menus='accordion'] .nv-accordion__item { border-bottom: 0; }
+  .nv-footer__menu-accordion .nv-accordion__heading { font-size: var(--type-body); }
+  .nv-footer__menu-accordion .nv-footer__menu-list { gap: 0; padding-bottom: var(--space-2); }
+  .nv-footer__menu-list a { display: flex; align-items: center; min-height: 40px; }
+  .nv-footer__rows { border-top: 0; padding-top: 0; }
+  .nv-footer__utility { flex-direction: column; align-items: stretch; }
+  .nv-footer__utility-end { flex-direction: column; align-items: stretch; }
+  .nv-footer__region { display: none; }
+  .nv-footer__region-phone { display: block; }
+  .nv-footer__rule { display: none; }
+  .nv-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-subtle); }
+  .nv-footer__legal > .nv-footer__legal-links,
+  .nv-footer__legal > .nv-footer__legal-slot > .nv-footer__legal-links { order: -1; }
+  .nv-footer__powered { margin-inline-start: 0; }
+}
+
+/* centered (minimal preset): brand, one inline menu row, social, one legal line. */
+.nv-footer[data-layout='centered'] .nv-footer__inner { justify-items: center; gap: var(--space-5); text-align: center; }
+.nv-footer[data-layout='centered'] .nv-footer-brand { justify-items: center; }
+.nv-footer__inline-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
+.nv-footer__inline-menu a { display: inline-flex; align-items: center; min-height: 24px; }
+.nv-footer__legal-inline { font-size: var(--type-body-sm); color: var(--color-fg-muted); }

package/templates/nova/src/sections/Footer/Footer.tsx

@@ -0,0 +1,256 @@
+import { resolveSettings, type SettingsOf } from '@tanqory/theme-kit'
+import { LocaleSelector } from '../../components/navigation/LocaleSelector'
+import { MarketSelector } from '../../components/overlays/MarketSelector'
+import { Menu } from '../../components/navigation/Menu'
+import { AccordionItem } from '../../components/base/Accordion'
+import { Button } from '../../components/base/Button'
+import { RichText } from '../../components/content/RichText'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt, type NovaStrings } from '../../styles/strings'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import { FooterBrandBlock, footerBrandSchema } from './blocks/FooterBrand'
+import { NewsletterBlock, newsletterBlockSchema } from '../../components/forms/blocks/Newsletter'
+import { PaymentIconsBlock, parsePaymentMethods, paymentIconsSchema } from '../../components/commerce/blocks/PaymentIcons'
+import { SocialLinksBlock, hasSocialLinks, socialLinksSchema } from '../../components/navigation/blocks/SocialLinks'
+import { footerMenuTitle } from './blocks/FooterMenu'
+import { footerTextSchema } from './blocks/FooterText'
+import { footerLineSchema } from './blocks/FooterLine'
+import { LineAddFriendButton } from '../../components/navigation/LineAddFriend'
+import { type BlockInstance } from '../data'
+import type { NovaLocalization, NovaMarket, NovaMenu, NovaShop } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import './Footer.css'
+import { footerSchema } from './schema'
+
+export type FooterSettings = SettingsOf<typeof footerSchema>
+export type FooterBlock = Extract<BlockInstance, { type: 'footer-brand' | 'footer-menu' | 'footer-text' | 'social-links' | 'payment-icons' | 'newsletter-signup' | 'footer-line' }>
+
+export interface FooterProps extends FooterSettings {
+  shop: NovaShop
+  blocks?: FooterBlock[]
+  /** The resolved `legalMenu` handle. */
+  legalMenu?: NovaMenu | null
+  localization?: NovaLocalization | null
+  /** Store consent banner enabled → "Cookie preferences" is appended to the legal row. */
+  consentEnabled?: boolean
+  /** Apply a market chosen in the built-in Region & language dialog (may be async; reject → error state). */
+  onChangeLocale?: (market: NovaMarket) => void | Promise<void>
+  /** The host opens its own region dialog instead of the built-in one. */
+  onOpenLocale?: () => void
+  onOpenCookiePreferences?: () => void
+  poweredByUrl?: string
+}
+
+/** The platform's English default title per policy handle → the theme's own words for it. */
+const POLICY_TITLES: Readonly<Record<string, [string, keyof NovaStrings]>> = {
+  'refund-policy': ['Refund policy', 'policyRefund'],
+  'privacy-policy': ['Privacy policy', 'privacyPolicy'],
+  'terms-of-service': ['Terms of service', 'policyTerms'],
+  'shipping-policy': ['Shipping policy', 'policyShipping'],
+  'contact-information': ['Contact information', 'policyContact'],
+  'legal-notice': ['Legal notice', 'policyLegal'],
+}
+
+/** A policy's link title: the store's own (translated) title, or the theme's words for the platform default. */
+export function policyTitle(l: { handle: string; title: string }, strings: NovaStrings): string {
+  const known = POLICY_TITLES[l.handle]
+  return known && l.title === known[0] ? (strings[known[1]] as string) : l.title
+}
+
+/** The design caps the upper area: max 4 menus + 2 text blocks — the grid never exceeds 6 columns. */
+const MAX_MENUS = 4
+const MAX_TEXT = 2
+
+export function Footer(props: FooterProps): JSX.Element {
+  const {
+    background,
+    layout,
+    mobileMenus,
+    showSocial,
+    showPayment,
+    showLocale,
+    showPoweredBy,
+    poweredByLabel,
+    shop,
+    blocks = [],
+    legalMenu,
+    localization,
+    consentEnabled,
+    onOpenLocale,
+    onChangeLocale,
+    onOpenCookiePreferences,
+    poweredByUrl = 'https://tanqory.com',
+  } = props
+  const { mode, strings, year } = useNova()
+
+  const brand = blocks.find((b) => b.type === 'footer-brand')
+  const menus = blocks.filter((b): b is Extract<FooterBlock, { type: 'footer-menu' }> => b.type === 'footer-menu' && Boolean(b.menu?.items.length)).slice(0, MAX_MENUS)
+  const texts = blocks.filter((b): b is Extract<FooterBlock, { type: 'footer-text' }> => b.type === 'footer-text' && Boolean(b.settings?.body?.trim())).slice(0, MAX_TEXT)
+  const social = blocks.find((b) => b.type === 'social-links')
+  const payment = blocks.find((b) => b.type === 'payment-icons')
+  const newsletter = blocks.find((b) => b.type === 'newsletter-signup')
+  const line = blocks.find((b) => b.type === 'footer-line')
+  const empty = blocks.length === 0
+
+  const socialSettings = resolveSettings(socialLinksSchema, social?.settings).settings
+  // Only when there is a link to show: an empty social list must not leave an empty utility row.
+  const socialEl = showSocial && hasSocialLinks({ shop, ...socialSettings }) ? <SocialLinksBlock shop={shop} {...socialSettings} /> : null
+  const paymentSettings = resolveSettings(paymentIconsSchema, payment?.settings).settings
+  // Only when there is a mark to show: an empty list must not leave the region's divider dangling.
+  const paymentEl = showPayment && parsePaymentMethods(paymentSettings.methods, shop).length > 0 ? <PaymentIconsBlock shop={shop} {...paymentSettings} /> : null
+  const lineEl = line ? <LineAddFriendButton url={resolveSettings(footerLineSchema, line.settings).settings.addFriendUrl} className="nv-footer__line" /> : null
+  const hasLocale = showLocale && localization && localization.available.length > 1
+
+  const menuLinks = (legalMenu?.items ?? []).filter((l) => l.url).map((l) => ({ title: l.title, url: l.url as string }))
+  // An empty legal menu lists the store's published policies instead (Settings › Policies).
+  const legalLinks = menuLinks.length > 0 ? menuLinks : (shop.policyLinks ?? []).map((l) => ({ title: policyTitle(l, strings), url: l.url }))
+  const copyright = <p className="nv-footer__copyright"><bdi>{fmt(strings.copyright, { year, name: shop.legalName ?? shop.name })}</bdi></p>
+  const powered = showPoweredBy && poweredByLabel.trim() && (
+    <div className="nv-footer__powered">
+      <a href={poweredByUrl} rel="noopener" target="_blank">
+        {poweredByLabel}
+      </a>
+    </div>
+  )
+  const links = (legalLinks.length > 0 || consentEnabled) && (
+    <ul className="nv-footer__legal-links">
+      {legalLinks.map((l) => (
+        <li key={l.url}>
+          <a href={l.url}><bdi>{l.title}</bdi></a>
+        </li>
+      ))}
+      {consentEnabled && (
+        <li>
+          <button type="button" className="nv-footer__text-btn" onClick={onOpenCookiePreferences}>
+            {strings.cookiePreferences}
+          </button>
+        </li>
+      )}
+    </ul>
+  )
+  const region =
+    hasLocale && localization ? onOpenLocale ? <LocaleSelector localization={localization} onOpen={onOpenLocale} /> : <MarketSelector localization={localization} onChange={onChangeLocale} placement="top-end" /> : null
+  const regionPhone =
+    hasLocale && localization ? (
+      onOpenLocale ? <LocaleSelector localization={localization} onOpen={onOpenLocale} size="lg" block /> : <MarketSelector localization={localization} onChange={onChangeLocale} size="lg" block sheet />
+    ) : null
+  const utility = (socialEl || lineEl || region || paymentEl) && (
+    <div className="nv-footer__utility">
+      <div className="nv-footer__utility-start">
+        {socialEl}
+        {lineEl}
+      </div>
+      <div className="nv-footer__utility-end">
+        {region && <div className="nv-footer__region">{region}</div>}
+        {regionPhone && <div className="nv-footer__region-phone">{regionPhone}</div>}
+        {region && paymentEl && <span className="nv-footer__rule" aria-hidden />}
+        {paymentEl}
+      </div>
+    </div>
+  )
+  const legal = (
+    <div className="nv-footer__legal">
+      {copyright}
+      {/* "Cookie preferences" exists only once the browser knows the shopper's consent state, which the
+          server never reads (it would make every page private). The row is therefore a client slot
+          (theme ABI §10.5): the server and the hydrated page agree everywhere outside it. */}
+      <div className="nv-footer__legal-slot" data-tq-client-slot="footer-legal">{links}</div>
+      {powered}
+    </div>
+  )
+
+  // The store's contact email / phone (Settings › General) show unless the merchant turned "Show contact details" off.
+  const brandSettings = { ...resolveSettings(footerBrandSchema, brand?.settings).settings, showContact: (brand?.settings as { showContact?: unknown } | undefined)?.showContact !== false }
+
+  if (layout === 'centered') {
+    const firstMenu = menus[0]?.menu
+    return (
+      <footer {...sectionRootProps({ background }, 'footer')} className="nv-footer" data-layout="centered">
+        <div className="nv-footer__inner">
+          {brand && <FooterBrandBlock {...brandSettings} tagline="" shop={shop} />}
+          {firstMenu && (
+            <nav aria-label={firstMenu.title}>
+              <Menu items={firstMenu.items} className="nv-footer__inline-menu" />
+            </nav>
+          )}
+          {socialEl}
+          {lineEl}
+          {mode === 'editor' && empty && <EditorFrame section="footer" title={strings.editorAddFooterBlocks} action={<Button size="sm">{strings.editorAddFooterBlocksAction}</Button>} />}
+          <p className="nv-footer__legal-inline">
+            {[fmt(strings.copyright, { year, name: shop.legalName ?? shop.name }), ...legalLinks.map((l) => l.title)].map((t, i) => {
+              const l = i > 0 ? legalLinks[i - 1] : null
+              return (
+                <span key={t}>
+                  {i > 0 && ' · '}
+                  {/* The store's name and policy titles keep their own direction inside the bar. */}
+                  {l ? <a href={l.url}><bdi>{t}</bdi></a> : <bdi>{t}</bdi>}
+                </span>
+              )
+            })}
+            {showPoweredBy && poweredByLabel.trim() && (
+              <>
+                {' · '}
+                <a href={poweredByUrl} rel="noopener" target="_blank">
+                  {poweredByLabel}
+                </a>
+              </>
+            )}
+          </p>
+        </div>
+      </footer>
+    )
+  }
+
+  return (
+    <footer {...sectionRootProps({ background }, 'footer')} className="nv-footer" data-layout="columns" data-mobile-menus={mobileMenus}>
+      <div className="nv-footer__inner">
+        {newsletter && (
+          <div className="nv-footer__newsletter">
+            <NewsletterBlock {...resolveSettings(newsletterBlockSchema, newsletter.settings).settings} endpoint={newsletter.endpoint} formResult={newsletter.formResult} />
+          </div>
+        )}
+        {!empty && (brand || menus.length > 0 || texts.length > 0) && (
+          <div className="nv-footer__grid">
+            {brand && (
+              <div className="nv-footer__brand">
+                <FooterBrandBlock {...brandSettings} shop={shop} />
+              </div>
+            )}
+            {menus.map((m, i) => {
+              const title = footerMenuTitle({ heading: m.settings?.heading ?? '', menu: m.menu })
+              const list = <Menu items={m.menu!.items} className="nv-footer__menu-list" />
+              return (
+                <nav key={`menu-${i}`} className="nv-footer__menu" aria-label={title}>
+                  <h2 className="nv-footer__heading"><bdi>{title}</bdi></h2>
+                  <div className="nv-footer__menu-body">{list}</div>
+                  <div className="nv-footer__menu-accordion">
+                    <AccordionItem title={title} level={2}>
+                      {list}
+                    </AccordionItem>
+                  </div>
+                </nav>
+              )
+            })}
+            {texts.map((t, i) => {
+              const s = resolveSettings(footerTextSchema, t.settings).settings
+              const body = <RichText html={s.body} className="nv-footer__text" />
+              return (
+                <div key={`text-${i}`} className="nv-footer__menu">
+                  {s.heading && <h2 className="nv-footer__heading"><bdi>{s.heading}</bdi></h2>}
+                  <div className="nv-footer__menu-body">{body}</div>
+                  <div className="nv-footer__menu-accordion">{s.heading ? <AccordionItem title={s.heading} level={2}>{body}</AccordionItem> : body}</div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+        {mode === 'editor' && empty && <EditorFrame section="footer" title={strings.editorAddFooterBlocks} action={<Button size="sm">{strings.editorAddFooterBlocksAction}</Button>} />}
+        <div className="nv-footer__rows">
+          {utility}
+          {legal}
+        </div>
+      </div>
+    </footer>
+  )
+}

package/templates/nova/src/sections/Footer/blocks/FooterBrand.tsx

@@ -0,0 +1,40 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { BrandLogo } from '../../../components/navigation/BrandLogo'
+import { RichText } from '../../../components/content/RichText'
+import type { NovaShop } from '@tanqory/theme-kit'
+import { useNova } from '../../../styles/NovaProvider'
+import '../../../styles/blocks.css'
+import './footer.css'
+
+/** The tagline's starter text: shown in the editor, never to shoppers. */
+export const TAGLINE_STARTER = 'A short line about your brand.'
+
+/** 12A · footer-brand — logo / name, tagline, optional contact. Always first in the footer. */
+export const footerBrandSchema = defineSchema(
+  { kind: 'block', name: 'footer-brand', family: '12A', parents: ['footer'], title: 'Brand information', description: 'Logo, tagline and social links in the footer.', icon: '◈' },
+  {
+    title: field.text('Your store'),
+    tagline: field.richtext(TAGLINE_STARTER),
+    showContact: field.boolean(false),
+  },
+)
+export type FooterBrandBlockProps = SettingsOf<typeof footerBrandSchema> & { shop: NovaShop }
+
+/** Identity resolution (12A): global Brand logo image → this title → shop name. The default title is not an override. */
+export function FooterBrandBlock({ title, tagline, showContact, shop }: FooterBrandBlockProps): JSX.Element {
+  const { mode } = useNova()
+  // Only the tagline is starter text here — the block itself carries the brand, so it stays.
+  const starterTagline = tagline.replace(/<[^>]*>/g, '').trim() === TAGLINE_STARTER
+  return (
+    <div className="nv-block nv-footer-brand" data-block="footer-brand">
+      <BrandLogo shop={shop} text={title !== 'Your store' ? title : ''} imageClassName="nv-footer-brand__logo" textClassName="nv-footer-brand__name" longAt={Infinity} as="p" />
+      {(mode === 'editor' || !starterTagline) && <RichText html={tagline} className="nv-footer-brand__tagline" />}
+      {showContact && (shop.email || shop.phone) && (
+        <p className="nv-footer-brand__contact">
+          {shop.email && <a href={`mailto:${shop.email}`}>{shop.email}</a>}
+          {shop.phone && <a href={`tel:${shop.phone.replace(/\s/g, '')}`}>{shop.phone}</a>}
+        </p>
+      )}
+    </div>
+  )
+}

package/templates/nova/src/sections/Footer/blocks/FooterLine.tsx

@@ -0,0 +1,11 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+
+/**
+ * footer-line (army #7740): LINE's Add friend button in the footer's utility row, beside the social marks, to the
+ * store's LINE Official Account (the add friend link from LINE Official Account Manager). Nothing shows without it.
+ */
+export const footerLineSchema = defineSchema(
+  { kind: 'block', name: 'footer-line', family: '12A', parents: ['footer'], title: 'Add us on LINE', description: "LINE's Add friend button in the footer.", icon: '◎' },
+  { addFriendUrl: field.url('') },
+)
+export type FooterLineBlockProps = SettingsOf<typeof footerLineSchema>

package/templates/nova/src/sections/Footer/blocks/FooterMenu.tsx

@@ -0,0 +1,14 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaMenu } from '@tanqory/theme-kit'
+
+/** 12A · footer-menu — one column of links (an accordion row at 390). The Footer section renders it. */
+export const footerMenuSchema = defineSchema(
+  { kind: 'block', name: 'footer-menu', family: '12A', parents: ['footer'], title: 'Menu', description: 'One column of links in the footer.', icon: 'chat' },
+  { menu: field.resource('menu'), heading: field.text('Shop') },
+)
+export type FooterMenuBlockProps = Pick<SettingsOf<typeof footerMenuSchema>, 'heading'> & { menu?: NovaMenu | null }
+
+/** The column title: the block heading, else the menu's name. */
+export function footerMenuTitle(p: FooterMenuBlockProps): string {
+  return p.heading?.trim() || p.menu?.title || ''
+}

package/templates/nova/src/sections/Footer/blocks/FooterText.tsx

@@ -0,0 +1,8 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+
+/** 12A · footer-text — an address or note column (merchant text; no map or hours data). */
+export const footerTextSchema = defineSchema(
+  { kind: 'block', name: 'footer-text', family: '12A', parents: ['footer'], title: 'Text', description: 'A short paragraph in the footer.', icon: '¶' },
+  { heading: field.text(''), body: field.richtext('') },
+)
+export type FooterTextBlockProps = SettingsOf<typeof footerTextSchema>

package/templates/nova/src/sections/Footer/blocks/footer.css

@@ -0,0 +1,7 @@
+/* footer-brand */
+.nv-footer-brand { display: grid; gap: var(--space-3); align-content: start; }
+.nv-footer-brand__name { font-family: var(--font-display); font-size: 1.1875rem; font-weight: var(--weight-strong); line-height: 1.2; }
+.nv-footer-brand__logo { height: 30px; width: auto; max-width: 200px; object-fit: contain; object-position: left; }
+[dir='rtl'] .nv-footer-brand__logo { object-position: right; }
+.nv-footer-brand__tagline { max-width: 34ch; font-size: 0.875rem; line-height: 1.6; color: var(--color-fg-muted); }
+.nv-footer-brand__contact { display: grid; gap: var(--space-1); color: var(--color-fg-muted); }

package/templates/nova/src/sections/Footer/index.ts

@@ -0,0 +1,38 @@
+import { defineSection, menuFor, resolveSettings } from '@tanqory/theme-kit'
+import { adaptBlocks } from '../data'
+import { Footer, FooterProps } from './Footer'
+import { presets } from './presets'
+import { footerSchema } from './schema'
+import { footerBrandSchema } from './blocks/FooterBrand'
+import { footerMenuSchema } from './blocks/FooterMenu'
+import { footerTextSchema } from './blocks/FooterText'
+import { footerLineSchema } from './blocks/FooterLine'
+import { paymentIconsSchema } from '../../components/commerce/blocks/PaymentIcons'
+import { newsletterBlockSchema } from '../../components/forms/blocks/Newsletter'
+import { socialLinksSchema } from '../../components/navigation/blocks/SocialLinks'
+
+export default defineSection({
+  id: 'footer',
+  schema: footerSchema,
+  blocks: [footerBrandSchema, footerMenuSchema, footerTextSchema, paymentIconsSchema, newsletterBlockSchema, socialLinksSchema, footerLineSchema],
+  component: Footer,
+  category: 'layout',
+  zone: 'footer',
+  title: 'Footer',
+  description: 'Menus, brand details and legal links at the bottom of every page.',
+  icon: '▬',
+  presets,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(footerSchema, node.settings)
+      const issues = [...r.issues]
+      const blocks = adaptBlocks(store, node.blocks, issues).filter((b) => (footerSchema.blocks as readonly string[]).includes(b.type)) as FooterProps['blocks']
+      return { ...r.settings, shop: store.shop, blocks, legalMenu: menuFor(store, r.handles.legalMenu), localization: store.localization, consentEnabled: store.consentEnabled,
+      onOpenCookiePreferences: () => actions.consent.open(),
+      onChangeLocale: (market: { countryCode?: string; code?: string; languageCode?: string }) => {
+        const next = { countryCode: market.countryCode ?? market.code ?? '', languageCode: market.languageCode }
+        if (actions.localization.changeLocale) actions.localization.changeLocale(next, store.localization?.current)
+        else actions.localization.changeCountry(next.countryCode)
+      },
+    }
+  },
+})