create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/components/states/media/placeholder-art.ts

@@ -0,0 +1,142 @@
+/**
+ * GENERATED from the approved Nova 14 · Media & System States canvas
+ * ("COLOUR · one tonal family per type, five steps each"). Do not hand-edit:
+ * the SVG art and palettes are the design package's.
+ */
+export const PLACEHOLDER_ART = {
+  "product": {
+    "label": "Product · warm sand studio",
+    "viewBox": "0 0 400 400",
+    "tokens": {
+      "--ph-0": "#EFE9E1",
+      "--ph-1": "#E6DDD1",
+      "--ph-2": "#D9CCBB",
+      "--ph-3": "#C9B8A3",
+      "--ph-4": "#F7F3EE",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"103\" width=\"400\" height=\"400\" style=\"fill: var(--ph-0);\"></rect><rect data-dc-tpl=\"104\" y=\"262\" width=\"400\" height=\"138\" style=\"fill: var(--ph-1);\"></rect><ellipse data-dc-tpl=\"105\" cx=\"200\" cy=\"240\" rx=\"100\" ry=\"9\" opacity=\".5\" style=\"fill: var(--ph-3);\"></ellipse><rect data-dc-tpl=\"106\" x=\"92\" y=\"236\" width=\"216\" height=\"64\" rx=\"8\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"107\" x=\"92\" y=\"236\" width=\"216\" height=\"10\" rx=\"5\" style=\"fill: var(--ph-4);\"></rect><rect data-dc-tpl=\"108\" x=\"138\" y=\"116\" width=\"66\" height=\"124\" rx=\"16\" style=\"fill: var(--ph-3);\"></rect><circle data-dc-tpl=\"109\" cx=\"248\" cy=\"204\" r=\"34\" style=\"fill: var(--ph-2);\"></circle><circle data-dc-tpl=\"110\" cx=\"237\" cy=\"193\" r=\"10\" opacity=\".8\" style=\"fill: var(--ph-4);\"></circle>"
+  },
+  "collection": {
+    "label": "Collection · stone + sage, structural",
+    "viewBox": "0 0 400 400",
+    "tokens": {
+      "--ph-0": "#E9EAE4",
+      "--ph-1": "#DEE1D8",
+      "--ph-2": "#CDD3C6",
+      "--ph-3": "#B8C0B0",
+      "--ph-4": "#F4F5F1",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"121\" width=\"400\" height=\"400\" style=\"fill: var(--ph-0);\"></rect><path data-dc-tpl=\"122\" d=\"M72 306V160a128 128 0 0 1 256 0v146z\" style=\"fill: var(--ph-1);\"></path><rect data-dc-tpl=\"123\" y=\"306\" width=\"400\" height=\"94\" style=\"fill: var(--ph-2);\"></rect><ellipse data-dc-tpl=\"124\" cx=\"200\" cy=\"306\" rx=\"150\" ry=\"8\" opacity=\".45\" style=\"fill: var(--ph-3);\"></ellipse><rect data-dc-tpl=\"125\" x=\"92\" y=\"208\" width=\"58\" height=\"98\" rx=\"12\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"126\" x=\"162\" y=\"172\" width=\"48\" height=\"134\" rx=\"24\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"127\" x=\"162\" y=\"172\" width=\"48\" height=\"16\" rx=\"8\" opacity=\".7\" style=\"fill: var(--ph-4);\"></rect><circle data-dc-tpl=\"128\" cx=\"252\" cy=\"272\" r=\"34\" style=\"fill: var(--ph-3);\"></circle><rect data-dc-tpl=\"129\" x=\"290\" y=\"236\" width=\"40\" height=\"70\" rx=\"8\" style=\"fill: var(--ph-2);\"></rect>"
+  },
+  "hero": {
+    "label": "Hero · mist blue, atmospheric",
+    "viewBox": "0 0 1200 500",
+    "tokens": {
+      "--ph-0": "#E6EAEC",
+      "--ph-1": "#DCE2E4",
+      "--ph-2": "#CCD4D7",
+      "--ph-3": "#B5C0C4",
+      "--ph-4": "#F4F6F6",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"140\" width=\"1200\" height=\"500\" style=\"fill: var(--ph-0);\"></rect><path data-dc-tpl=\"141\" d=\"M760 360V190a150 150 0 0 1 300 0v170z\" style=\"fill: var(--ph-4);\"></path><rect data-dc-tpl=\"142\" x=\"908\" y=\"40\" width=\"4\" height=\"320\" style=\"fill: var(--ph-1);\"></rect><rect data-dc-tpl=\"143\" x=\"760\" y=\"250\" width=\"300\" height=\"4\" style=\"fill: var(--ph-1);\"></rect><rect data-dc-tpl=\"144\" y=\"360\" width=\"1200\" height=\"140\" style=\"fill: var(--ph-1);\"></rect><ellipse data-dc-tpl=\"145\" cx=\"910\" cy=\"420\" rx=\"250\" ry=\"30\" opacity=\".7\" style=\"fill: var(--ph-4);\"></ellipse><rect data-dc-tpl=\"146\" x=\"120\" y=\"298\" width=\"480\" height=\"16\" rx=\"8\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"147\" x=\"160\" y=\"314\" width=\"12\" height=\"64\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"148\" x=\"548\" y=\"314\" width=\"12\" height=\"64\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"149\" x=\"200\" y=\"198\" width=\"62\" height=\"100\" rx=\"14\" style=\"fill: var(--ph-2);\"></rect><circle data-dc-tpl=\"150\" cx=\"332\" cy=\"266\" r=\"32\" style=\"fill: var(--ph-3);\"></circle><rect data-dc-tpl=\"151\" x=\"400\" y=\"234\" width=\"92\" height=\"64\" rx=\"10\" style=\"fill: var(--ph-2);\"></rect>"
+  },
+  "editorial": {
+    "label": "Editorial · paper + taupe",
+    "viewBox": "0 0 400 300",
+    "tokens": {
+      "--ph-0": "#ECE6DD",
+      "--ph-1": "#E3DCD2",
+      "--ph-2": "#D3C8BA",
+      "--ph-3": "#BFB2A2",
+      "--ph-4": "#FAF7F2",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"162\" width=\"400\" height=\"300\" style=\"fill: var(--ph-1);\"></rect><g data-dc-tpl=\"163\" transform=\"rotate(-6 200 150)\"><rect data-dc-tpl=\"164\" x=\"66\" y=\"48\" width=\"268\" height=\"206\" rx=\"6\" style=\"fill: var(--ph-4);\"></rect><rect data-dc-tpl=\"165\" x=\"199\" y=\"48\" width=\"2\" height=\"206\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"166\" x=\"84\" y=\"66\" width=\"100\" height=\"122\" rx=\"4\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"167\" x=\"84\" y=\"200\" width=\"92\" height=\"8\" rx=\"4\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"168\" x=\"84\" y=\"214\" width=\"70\" height=\"8\" rx=\"4\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"169\" x=\"216\" y=\"68\" width=\"100\" height=\"12\" rx=\"6\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"170\" x=\"216\" y=\"96\" width=\"100\" height=\"6\" rx=\"3\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"171\" x=\"216\" y=\"112\" width=\"92\" height=\"6\" rx=\"3\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"172\" x=\"216\" y=\"128\" width=\"100\" height=\"6\" rx=\"3\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"173\" x=\"216\" y=\"144\" width=\"78\" height=\"6\" rx=\"3\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"174\" x=\"216\" y=\"160\" width=\"90\" height=\"6\" rx=\"3\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"175\" x=\"216\" y=\"178\" width=\"100\" height=\"58\" rx=\"4\" style=\"fill: var(--ph-2);\"></rect></g><circle data-dc-tpl=\"176\" cx=\"344\" cy=\"64\" r=\"32\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"177\" cx=\"344\" cy=\"64\" r=\"23\" style=\"fill: var(--ph-2);\"></circle>"
+  },
+  "avatar": {
+    "label": "Avatar · soft clay",
+    "viewBox": "0 0 300 300",
+    "tokens": {
+      "--ph-0": "#EFE7E3",
+      "--ph-1": "#E7DCD7",
+      "--ph-2": "#D8C8C0",
+      "--ph-3": "#C9B3A9",
+      "--ph-4": "#F6F0ED",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"188\" width=\"300\" height=\"300\" style=\"fill: var(--ph-1);\"></rect><circle data-dc-tpl=\"189\" cx=\"150\" cy=\"128\" r=\"112\" opacity=\".6\" style=\"fill: var(--ph-4);\"></circle><circle data-dc-tpl=\"190\" cx=\"150\" cy=\"122\" r=\"50\" style=\"fill: var(--ph-3);\"></circle><path data-dc-tpl=\"191\" d=\"M36 300c10-72 58-108 114-108s104 36 114 108z\" style=\"fill: var(--ph-3);\"></path>"
+  },
+  "store": {
+    "label": "Store · eucalyptus interior",
+    "viewBox": "0 0 400 300",
+    "tokens": {
+      "--ph-0": "#E5EAE6",
+      "--ph-1": "#DAE1DC",
+      "--ph-2": "#C8D3CC",
+      "--ph-3": "#AFBDB4",
+      "--ph-4": "#F2F5F2",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"202\" width=\"400\" height=\"300\" style=\"fill: var(--ph-0);\"></rect><rect data-dc-tpl=\"203\" x=\"40\" y=\"58\" width=\"320\" height=\"242\" style=\"fill: var(--ph-1);\"></rect><rect data-dc-tpl=\"204\" x=\"130\" y=\"70\" width=\"140\" height=\"12\" rx=\"6\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"205\" x=\"30\" y=\"92\" width=\"340\" height=\"26\" rx=\"4\" style=\"fill: var(--ph-3);\"></rect><circle data-dc-tpl=\"206\" cx=\"40\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"207\" cx=\"60\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"208\" cx=\"80\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"209\" cx=\"100\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"210\" cx=\"120\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"211\" cx=\"140\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"212\" cx=\"160\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"213\" cx=\"180\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"214\" cx=\"200\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"215\" cx=\"220\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"216\" cx=\"240\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"217\" cx=\"260\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"218\" cx=\"280\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"219\" cx=\"300\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"220\" cx=\"320\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"221\" cx=\"340\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><circle data-dc-tpl=\"222\" cx=\"360\" cy=\"118\" r=\"10\" style=\"fill: var(--ph-3);\"></circle><rect data-dc-tpl=\"223\" x=\"64\" y=\"142\" width=\"178\" height=\"120\" rx=\"4\" style=\"fill: var(--ph-4);\"></rect><rect data-dc-tpl=\"224\" x=\"88\" y=\"198\" width=\"30\" height=\"64\" rx=\"6\" style=\"fill: var(--ph-2);\"></rect><circle data-dc-tpl=\"225\" cx=\"160\" cy=\"238\" r=\"22\" style=\"fill: var(--ph-2);\"></circle><rect data-dc-tpl=\"226\" x=\"194\" y=\"214\" width=\"30\" height=\"48\" rx=\"4\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"227\" x=\"262\" y=\"142\" width=\"76\" height=\"158\" rx=\"4\" style=\"fill: var(--ph-2);\"></rect><circle data-dc-tpl=\"228\" cx=\"324\" cy=\"224\" r=\"4\" style=\"fill: var(--ph-3);\"></circle><rect data-dc-tpl=\"229\" y=\"290\" width=\"400\" height=\"10\" style=\"fill: var(--ph-2);\"></rect>"
+  },
+  "video": {
+    "label": "Video · slate, cinematic",
+    "viewBox": "0 0 1200 675",
+    "tokens": {
+      "--ph-0": "#D9DDE0",
+      "--ph-1": "#CDD2D6",
+      "--ph-2": "#BBC2C7",
+      "--ph-3": "#A4ADB3",
+      "--ph-4": "#E8EBED",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#1B2126"
+    },
+    "inner": "<rect data-dc-tpl=\"240\" width=\"1200\" height=\"675\" style=\"fill: var(--ph-0);\"></rect><rect data-dc-tpl=\"241\" y=\"470\" width=\"1200\" height=\"205\" style=\"fill: var(--ph-1);\"></rect><path data-dc-tpl=\"242\" d=\"M700 470V250a170 170 0 0 1 340 0v220z\" style=\"fill: var(--ph-4);\"></path><rect data-dc-tpl=\"243\" x=\"180\" y=\"400\" width=\"420\" height=\"16\" rx=\"8\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"244\" x=\"240\" y=\"300\" width=\"66\" height=\"100\" rx=\"14\" style=\"fill: var(--ph-2);\"></rect><circle data-dc-tpl=\"245\" cx=\"380\" cy=\"368\" r=\"32\" style=\"fill: var(--ph-3);\"></circle><rect data-dc-tpl=\"246\" x=\"0\" y=\"480\" width=\"1200\" height=\"195\" opacity=\".06\" style=\"fill: var(--ph-scrim);\"></rect><circle data-dc-tpl=\"247\" cx=\"600\" cy=\"320\" r=\"58\" opacity=\".94\" style=\"fill: var(--ph-play);\"></circle><path data-dc-tpl=\"248\" d=\"M584 292l46 28-46 28z\" style=\"fill: var(--ph-ink);\"></path><rect data-dc-tpl=\"249\" x=\"60\" y=\"618\" width=\"1080\" height=\"6\" rx=\"3\" opacity=\".5\" style=\"fill: var(--ph-play);\"></rect><rect data-dc-tpl=\"250\" x=\"60\" y=\"618\" width=\"0\" height=\"6\" rx=\"3\" style=\"fill: var(--ph-play);\"></rect><rect data-dc-tpl=\"251\" x=\"60\" y=\"590\" width=\"80\" height=\"14\" rx=\"7\" opacity=\".7\" style=\"fill: var(--ph-play);\"></rect>"
+  },
+  "ugc": {
+    "label": "UGC · lavender-grey",
+    "viewBox": "0 0 400 400",
+    "tokens": {
+      "--ph-0": "#EAE7EC",
+      "--ph-1": "#E0DCE4",
+      "--ph-2": "#CFC8D6",
+      "--ph-3": "#BBB2C4",
+      "--ph-4": "#F5F3F7",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"262\" width=\"400\" height=\"400\" style=\"fill: var(--ph-1);\"></rect><g data-dc-tpl=\"263\" transform=\"rotate(-8 170 200)\"><rect data-dc-tpl=\"264\" x=\"70\" y=\"80\" width=\"200\" height=\"248\" rx=\"14\" style=\"fill: var(--ph-4);\"></rect><rect data-dc-tpl=\"265\" x=\"86\" y=\"96\" width=\"168\" height=\"172\" rx=\"8\" style=\"fill: var(--ph-2);\"></rect><rect data-dc-tpl=\"266\" x=\"86\" y=\"220\" width=\"168\" height=\"48\" rx=\"0\" opacity=\".6\" style=\"fill: var(--ph-3);\"></rect><circle data-dc-tpl=\"267\" cx=\"170\" cy=\"190\" r=\"30\" style=\"fill: var(--ph-3);\"></circle><rect data-dc-tpl=\"268\" x=\"86\" y=\"284\" width=\"96\" height=\"8\" rx=\"4\" style=\"fill: var(--ph-2);\"></rect></g><g data-dc-tpl=\"269\" transform=\"rotate(7 250 180)\"><rect data-dc-tpl=\"270\" x=\"150\" y=\"56\" width=\"200\" height=\"248\" rx=\"14\" style=\"fill: var(--ph-4);\"></rect><rect data-dc-tpl=\"271\" x=\"166\" y=\"72\" width=\"168\" height=\"172\" rx=\"8\" style=\"fill: var(--ph-3);\"></rect><rect data-dc-tpl=\"272\" x=\"206\" y=\"140\" width=\"40\" height=\"84\" rx=\"10\" style=\"fill: var(--ph-2);\"></rect><circle data-dc-tpl=\"273\" cx=\"286\" cy=\"200\" r=\"24\" style=\"fill: var(--ph-2);\"></circle><rect data-dc-tpl=\"274\" x=\"166\" y=\"260\" width=\"110\" height=\"8\" rx=\"4\" style=\"fill: var(--ph-2);\"></rect><circle data-dc-tpl=\"275\" cx=\"322\" cy=\"264\" r=\"7\" style=\"fill: var(--ph-2);\"></circle></g>"
+  },
+  "generic": {
+    "label": "Generic · neutral stone",
+    "viewBox": "0 0 400 300",
+    "tokens": {
+      "--ph-0": "#ECEAE6",
+      "--ph-1": "#E3E0DA",
+      "--ph-2": "#D5D0C8",
+      "--ph-3": "#C4BDB3",
+      "--ph-4": "#F6F5F2",
+      "--ph-play": "#FFFFFF",
+      "--ph-ink": "#111111",
+      "--ph-scrim": "#111111"
+    },
+    "inner": "<rect data-dc-tpl=\"286\" width=\"400\" height=\"300\" style=\"fill: var(--ph-0);\"></rect><path data-dc-tpl=\"287\" d=\"M220 212V124a60 60 0 0 1 120 0v88z\" style=\"fill: var(--ph-4);\"></path><rect data-dc-tpl=\"288\" y=\"212\" width=\"400\" height=\"88\" style=\"fill: var(--ph-1);\"></rect><ellipse data-dc-tpl=\"289\" cx=\"130\" cy=\"212\" rx=\"70\" ry=\"6\" opacity=\".5\" style=\"fill: var(--ph-3);\"></ellipse><rect data-dc-tpl=\"290\" x=\"82\" y=\"130\" width=\"50\" height=\"82\" rx=\"12\" style=\"fill: var(--ph-2);\"></rect><circle data-dc-tpl=\"291\" cx=\"164\" cy=\"188\" r=\"24\" style=\"fill: var(--ph-3);\"></circle>"
+  }
+} as const

package/templates/nova/src/layouts/Main.tsx

@@ -0,0 +1,80 @@
+import { useState, type ReactNode } from 'react'
+import { useSearchSuggestions, useThemeActions, useThemeContext, type Money } from '@tanqory/theme-kit'
+import { CartDrawer } from '../components/overlays/CartDrawer'
+import { SearchModal } from '../components/overlays/SearchModal'
+import { CookieConsent } from '../components/overlays/CookieConsent'
+import { RewardsLauncher } from '../components/overlays/RewardsLauncher'
+import { FriendOfferPanel } from '../components/overlays/FriendOfferPanel'
+import { ToastStack } from '../components/overlays/Toast'
+import { useNova } from '../styles/NovaProvider'
+
+/**
+ * The page layout: the page's sections (header zone → <main> → footer zone, as
+ * the platform resolves them) and the overlays every page shares — the cart
+ * drawer, the search modal, the cookie banner, the rewards launcher, the friend offer and toasts.
+ */
+export function Main({ children }: { children: ReactNode }): JSX.Element {
+  const page = useThemeContext()
+  const actions = useThemeActions()
+  const { strings } = useNova()
+  return (
+    <>
+      {children}
+      <div className="nv-overlay-root" data-nv-overlay-root="">
+        {page.settings.enableCartDrawer !== false && (
+          <CartDrawer
+            open={page.overlay === 'cart'}
+            onClose={actions.overlays.close}
+            cart={page.cart}
+            checkoutUrl={page.checkoutUrl}
+            cartUrl="/cart"
+            updatingLineIds={page.busyLines}
+            failedLineIds={page.failedLines}
+            refusedLines={page.refusedLines}
+            onQuantity={(line, quantity) => void actions.cart.setQuantity(line.id, quantity)}
+            onRemove={(line) => void actions.cart.remove(line.id)}
+            onRetry={(line) => void actions.cart.setQuantity(line.id, line.quantity)}
+            justAdded={page.justAddedToCart}
+            emptyAction={{ label: strings.continueShopping, href: '/collections/all' }}
+            freeShipping={freeShippingProgress(page.shop?.freeShippingThreshold, page.cart?.subtotal)}
+            note={page.shop?.taxesIncluded ? strings.taxIncludedShippingAtCheckout : undefined}
+          />
+        )}
+        {page.settings.enableSearchModal !== false && <Search open={page.overlay === 'search'} onClose={actions.overlays.close} />}
+        {/* Browser-only: the consent answer is read after hydration, so the banner lives in a client slot. */}
+        <div className="nv-consent-slot" data-tq-client-slot="consent">
+          {page.consentRequired && <CookieConsent open privacyUrl={page.privacyPolicyUrl} config={page.shop?.consentBanner} onDecide={(choice) => actions.consent.decide(choice)} />}
+        </div>
+        {/* Browser-only: the loyalty state is read after hydration; off (renders nothing) without a program. */}
+        <div className="nv-rewards-slot" data-tq-client-slot="rewards">
+          <RewardsLauncher />
+        </div>
+        {/* Browser-only too: a `?ref=` visit's friend offer (army #7751); nothing without one. */}
+        <div className="nv-referral-slot" data-tq-client-slot="friend-offer">
+          <FriendOfferPanel />
+        </div>
+        <ToastStack toasts={page.toasts.map((t) => ({ id: t.id, tone: t.tone, title: t.message }))} onDismiss={actions.toasts.dismiss} />
+      </div>
+    </>
+  )
+}
+
+/**
+ * The cart drawer's free-shipping bar: the store's lowest "free over" threshold for the shopper's
+ * country, against the cart subtotal. None when the zone has no threshold, or the two are not in one
+ * currency (never converted).
+ */
+export function freeShippingProgress(threshold: Money | undefined, subtotal: Money | undefined): { remaining: Money; progress: number } | null {
+  if (!threshold || !subtotal || threshold.currencyCode !== subtotal.currencyCode) return null
+  if (threshold.amount <= 0) return { remaining: { amount: 0, currencyCode: threshold.currencyCode }, progress: 1 }
+  const remaining = Math.max(0, threshold.amount - subtotal.amount)
+  return { remaining: { amount: remaining, currencyCode: threshold.currencyCode }, progress: Math.min(1, subtotal.amount / threshold.amount) }
+}
+
+function Search({ open, onClose }: { open: boolean; onClose: () => void }): JSX.Element {
+  const [query, setQuery] = useState('')
+  const { results, loading } = useSearchSuggestions(query)
+  return <SearchModal open={open} onClose={onClose} onQuery={setQuery} results={results} loading={loading} searchUrl="/search" />
+}
+
+export default Main

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

@@ -0,0 +1,109 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { formatMoney } from '../../components/commerce/money'
+import { formatDate } from '../../components/content/ArticleCard'
+import { RichText } from '../../components/content/RichText'
+import { Pagination } from '../../components/navigation/Pagination'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { CustomerAccount, NovaImage } from '@tanqory/theme-kit'
+import { Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { accountSchema } from './schema'
+
+export type AccountSettings = SettingsOf<typeof accountSchema>
+export interface AccountProps extends Omit<AccountSettings, 'loginImage'> {
+  /**
+   * The Account BFF URL the page frames (Theme ABI v2 §4, the account slot): sign-in, orders and addresses render
+   * inside `<iframe data-tq-slot="account">`, on the platform's account origin. Customer credentials and data never
+   * pass through the theme (ABI Act-1, D6). Present on the customer route of a storefront.
+   */
+  accountUrl?: string
+  /** Whether the shopper has a customer session (never who); the heading follows it. */
+  signedIn?: boolean
+  /** A customer's account data, only from a host that hands it to the theme (ABI v2 does not: the frame shows it). */
+  customer?: CustomerAccount | null
+  loginImage?: NovaImage | null
+  signOutUrl?: string
+  shopUrl?: string
+  page?: number
+  pageHref?: (page: number) => string
+}
+
+/** The platform's account area: everything a customer signs in to, reads or edits renders inside it. */
+function AccountSlot({ url, title }: { url: string; title: string }): JSX.Element {
+  return <iframe className="nv-account__slot" data-tq-slot="account" src={url} sandbox="allow-scripts allow-forms allow-same-origin" title={title} />
+}
+
+export function Account(props: AccountProps): JSX.Element {
+  const { loginLayout, showOrderHistory, ordersPerPage, sectionWidth, contentWidth, heading, description, headerSize, accountUrl, signedIn, customer, loginImage, signOutUrl = '/account/logout', shopUrl = '/collections/all', page = 1, pageHref } = props
+  const { strings, locale, mode } = useNova()
+
+  if (!customer) {
+    const split = loginLayout === 'split' && Boolean(loginImage)
+    return (
+      <Shell props={props} type="account" width={sectionWidth} className="nv-account" data-layout={split ? 'split' : 'stacked'}>
+        <div className="nv-account__signin">
+          {split && (
+            <div className="nv-account__media">
+              <img src={loginImage!.src} alt={loginImage!.alt ?? ''} width={loginImage!.width} height={loginImage!.height} loading="lazy" decoding="async" />
+            </div>
+          )}
+          <div className="nv-account__panel">
+            <h1 className="nv-utility__title" data-size={headerSize}>{signedIn ? strings.myAccount : heading.trim() || strings.signIn}</h1>
+            {description.trim() && <RichText html={description} className="nv-account__desc" />}
+            {accountUrl && <AccountSlot url={accountUrl} title={strings.account} />}
+          </div>
+        </div>
+      </Shell>
+    )
+  }
+
+  const per = Number(ordersPerPage)
+  const orders = customer.orders.slice((page - 1) * per, page * per)
+  const pages = Math.ceil(customer.orders.length / per)
+  return (
+    <Shell props={props} type="account" width={sectionWidth} className="nv-account" data-layout="signed-in">
+      <div className="nv-account__home" data-measure={contentWidth}>
+        <div className="nv-account__head">
+          <h1 className="nv-utility__title" data-size={headerSize}>{fmt(strings.greeting, { name: customer.firstName })}</h1>
+          <a className="nv-account__signout" href={signOutUrl}>
+            {strings.signOut}
+          </a>
+        </div>
+        {description.trim() && <RichText html={description} className="nv-account__desc" />}
+        {showOrderHistory &&
+          (customer.orders.length ? (
+            <>
+              <h2 className="nv-visually-hidden">{strings.orders}</h2>
+              <ul className="nv-account__orders">
+                {orders.map((o) => {
+                  const row = (
+                    <>
+                      <span className="nv-account__order-id">
+                        <span className="nv-account__number">{o.number}</span>
+                        <time dateTime={o.processedAt}>{formatDate(o.processedAt, locale)}</time>
+                      </span>
+                      <span className="nv-account__items">{o.itemCount === 1 ? strings.itemsOne : fmt(strings.itemsMany, { count: o.itemCount })}</span>
+                      <span className="nv-account__total nv-tabular">{formatMoney(o.total, locale)}</span>
+                    </>
+                  )
+                  return <li key={o.id}>{o.url ? <a href={o.url} aria-label={fmt(strings.orderNumber, { number: o.number })}>{row}</a> : <div>{row}</div>}</li>
+                })}
+              </ul>
+              {pages > 1 && pageHref && <Pagination page={page} pages={pages} href={pageHref} />}
+            </>
+          ) : (
+            <div className="nv-account__none">
+              <p>{strings.noOrders}</p>
+              <Button href={shopUrl} variant="secondary">
+                {strings.startShopping}
+              </Button>
+            </div>
+          ))}
+        {mode === 'editor' && <p className="nv-utility__editor-note">{strings.editorOrdersBlocked}</p>}
+      </div>
+    </Shell>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { defineSection, imageFor, resolveSettings } from '@tanqory/theme-kit'
+import { Account } from './Account'
+import { presets } from './presets'
+import { accountSchema } from './schema'
+
+export default defineSection({
+  id: 'account',
+  schema: accountSchema,
+  component: Account,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Account',
+  description: 'Sign-in, orders and saved addresses for the customer.',
+  icon: 'user',
+  requiresContext: ['customer'],
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(accountSchema, node.settings)
+      const { loginImage: _handle, ...settings } = r.settings as typeof r.settings & { loginImage?: string }
+      return { ...settings, accountUrl: store.accountUrl, signedIn: store.customer?.signedIn === true, customer: store.account ?? null, loginImage: imageFor(store, r.handles.loginImage) }
+  },
+})

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

@@ -0,0 +1,6 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Signed-out entry with brand image
+  {"name": "account-split", "label": "Account", "settings": {"loginLayout": "split", "showOrderHistory": true}, "blocks": []},
+]

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

@@ -0,0 +1,29 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 03 account (EXISTING · CHANGED) — the theme's entry to the accounts
+ * app (full flows in 07C · D24). Signed out: sign in with an emailed code,
+ * split beside the loginImage (no image → stacked). Signed in: a greeting
+ * and order history (rows 56, mono number, total at the end). Order status
+ * and returns show only when the accounts app provides them.
+ */
+export const accountSchema = defineSchema(
+  { kind: 'section', name: 'account', family: '12G' },
+  {
+    loginLayout: field.select(['split', 'stacked'], 'split'),
+    loginImage: field.resource('image'),
+    showOrderHistory: field.boolean(true),
+    ordersPerPage: field.select(['10', '20'], '10'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('standard'),
+    contentWidth: shared.contentWidth('content'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading('Sign in'),
+    description: shared.description(),
+    headerSize: shared.headerSize('medium'),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,37 @@
+.nv-announcement {
+  --nv-ann-bg: var(--color-bg-muted);
+  --nv-ann-fg: var(--color-fg);
+  background: var(--nv-ann-bg);
+  color: var(--nv-ann-fg);
+  font-size: var(--type-body-sm);
+  line-height: 1.4;
+}
+.nv-announcement[data-bg='inverse'] { --nv-ann-bg: var(--color-bg-inverse); --nv-ann-fg: var(--color-fg-inverse); }
+.nv-announcement[data-bg='brand'] { --nv-ann-bg: var(--color-brand); --nv-ann-fg: var(--color-brand-contrast); }
+.nv-announcement[data-empty] { padding: var(--space-1) var(--page-gutter); }
+/* Hidden controls keep their 88px slot so the message never shifts. */
+.nv-announcement__inner {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr) 88px;
+  align-items: center;
+  min-height: 44px;
+  max-width: calc(var(--container-standard) + 2 * var(--page-gutter));
+  margin-inline: auto;
+  padding-inline: var(--space-1);
+}
+.nv-announcement__start { display: flex; }
+.nv-announcement__end { display: flex; justify-content: flex-end; }
+.nv-announcement .nv-icon-btn { color: inherit; }
+.nv-announcement .nv-icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+.nv-announcement__messages { text-align: center; padding-block: var(--space-2); }
+.nv-announcement__message:not([hidden]) { animation: nv-ann-fade 200ms var(--ease-standard); text-wrap: balance; }
+.nv-announcement__link { color: inherit; }
+.nv-announcement__link { text-decoration: none; }
+.nv-announcement__link:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-announcement__more { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+@keyframes nv-ann-fade { from { opacity: 0; } }
+@media (min-width: 640px) {
+  .nv-announcement__inner { min-height: 40px; padding-inline: var(--page-gutter); }
+  .nv-announcement .nv-icon-btn { width: 36px; height: 36px; }
+  .nv-announcement__inner { grid-template-columns: 88px minmax(0, 1fr) 88px; }
+}

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

@@ -0,0 +1,151 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { IconButton } from '../../components/base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import { bestLabel } from '../../styles/theme'
+import '../../components/section/shared.css'
+import './AnnouncementBar.css'
+import { announcementBarSchema } from './schema'
+
+export type AnnouncementBarSettings = SettingsOf<typeof announcementBarSchema>
+export interface AnnouncementBarProps extends AnnouncementBarSettings {
+  /** The brand colour, when the bar is "brand", to pick the label (auto contrast). */
+  brandColor?: string
+  /** Session storage key scope (a store id); dismissal is per session and per message set. */
+  storageKey?: string
+  /** Start paused / on a message — stories and tests. */
+  initialIndex?: number
+}
+
+const ROTATE_MS = 5000
+
+function hash(s: string): string {
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0
+  return (h >>> 0).toString(36)
+}
+
+export function AnnouncementBar(props: AnnouncementBarProps): JSX.Element | null {
+  const { text, link, text2, link2, text3, link3, background, rotation, showArrows, dismissible, brandColor, storageKey = 'nv', initialIndex = 0 } = props
+  const { mode, strings } = useNova()
+  const messages = useMemo(
+    () => [
+      { text, link },
+      { text: text2, link: link2 },
+      { text: text3, link: link3 },
+    ].filter((m) => m.text.trim()),
+    [text, link, text2, link2, text3, link3],
+  )
+  const many = messages.length >= 2
+  const [index, setIndex] = useState(Math.min(initialIndex, Math.max(0, messages.length - 1)))
+  const [paused, setPaused] = useState(false)
+  const [hover, setHover] = useState(false)
+  const [reduced, setReduced] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
+  const root = useRef<HTMLElement>(null)
+  // Changing any message re-shows a dismissed bar: the key includes the text.
+  const key = `nova:announcement:${storageKey}:${hash(messages.map((m) => m.text).join('|'))}`
+
+  useEffect(() => {
+    if (!dismissible) return
+    try {
+      setDismissed(sessionStorage.getItem(key) === '1')
+    } catch {
+      /* storage unavailable: show the bar */
+    }
+  }, [dismissible, key])
+
+  useEffect(() => {
+    const mq = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    const forced = Boolean(root.current?.closest('[data-motion="reduced"]'))
+    setReduced(Boolean(mq?.matches) || forced)
+  }, [messages.length])
+
+  useEffect(() => setIndex((i) => (i >= messages.length ? 0 : i)), [messages.length])
+
+  const rotating = rotation && many && !reduced
+  useEffect(() => {
+    if (!rotating || paused || hover) return
+    const id = window.setInterval(() => setIndex((i) => (i + 1) % messages.length), ROTATE_MS)
+    return () => window.clearInterval(id)
+  }, [rotating, paused, hover, messages.length])
+
+  if (!messages.length) {
+    return mode === 'editor' ? (
+      <div className="nv-announcement" data-bg="muted" data-empty="">
+        <EditorFrame section="announcement-bar" title={strings.editorAddMessage} compact />
+      </div>
+    ) : null
+  }
+  if (dismissed) return null
+
+  const style = background === 'brand' && brandColor ? ({ '--nv-ann-fg': bestLabel(brandColor) } as CSSProperties) : undefined
+  const go = (d: 1 | -1) => setIndex((i) => (i + d + messages.length) % messages.length)
+  const arrows = showArrows && many
+
+  return (
+    <section
+      ref={root}
+      className={sxJoin("nv-announcement", sx(style))}
+      data-bg={background}
+      aria-label={strings.announcements}
+      aria-roledescription={many ? 'carousel' : undefined}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onFocus={() => setHover(true)}
+      onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node) && setHover(false)}
+    >
+      <div className="nv-announcement__inner">
+        <div className="nv-announcement__start">
+          {arrows && (
+            <>
+              <IconButton icon="chevron-left" label={strings.previous} onClick={() => go(-1)} />
+              <IconButton icon="chevron-right" label={strings.next} onClick={() => go(1)} />
+            </>
+          )}
+        </div>
+        <div className="nv-announcement__messages" aria-live={rotating && !paused ? 'off' : 'polite'} aria-atomic="true">
+          {messages.map((m, i) => (
+            <p key={i} className="nv-announcement__message" hidden={i !== index} aria-roledescription={many ? 'slide' : undefined}>
+              {m.link ? (
+                <a href={m.link} className="nv-announcement__link">
+                  {m.text}
+                  {/* "Learn more" suffix only if the message has none. */}
+                  {!/·\s*\S/.test(m.text) && (
+                    <>
+                      {' · '}
+                      <span className="nv-announcement__more">{strings.learnMore}</span>
+                    </>
+                  )}
+                </a>
+              ) : (
+                m.text
+              )}
+            </p>
+          ))}
+        </div>
+        <div className="nv-announcement__end">
+          {rotating && (
+            <IconButton icon={paused ? 'play' : 'pause'} label={paused ? strings.play : strings.pause} aria-pressed={paused} onClick={() => setPaused((p) => !p)} />
+          )}
+          {dismissible && (
+            <IconButton
+              icon="close"
+              label={strings.dismiss}
+              onClick={() => {
+                setDismissed(true)
+                try {
+                  sessionStorage.setItem(key, '1')
+                } catch {
+                  /* not persisted; dismissed for this render only */
+                }
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { AnnouncementBar } from './AnnouncementBar'
+import { presets } from './presets'
+import { announcementBarSchema } from './schema'
+
+export default defineSection({
+  id: 'announcement-bar',
+  schema: announcementBarSchema,
+  component: AnnouncementBar,
+  category: 'layout',
+  zone: 'header',
+  title: 'Announcement bar',
+  description: 'A one-line message across the top of every page.',
+  icon: '▔',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(announcementBarSchema, node.settings)
+      return { ...r.settings, brandColor: store.brandColor }
+  },
+})

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

@@ -0,0 +1,10 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // One persistent service message
+  {"name": "announcement-shipping", "label": "Shipping promise", "settings": {"background": "muted", "rotation": false, "showArrows": false}, "blocks": []},
+  // Up to three short messages
+  {"name": "announcement-rotating", "label": "Rotating offers", "settings": {"background": "muted", "rotation": true, "showArrows": true}, "blocks": []},
+  // Time-bound sale notice
+  {"name": "announcement-sale", "label": "Sale alert", "settings": {"background": "inverse", "rotation": false, "dismissible": true}, "blocks": []},
+]