create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/components/commerce/ListingParts.tsx

@@ -0,0 +1,211 @@
+import { sx } from '@tanqory/theme-kit'
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+import type { Facet, SortOption } from '@tanqory/theme-kit'
+import { Button } from '../base/Button'
+import { Checkbox } from '../base/Checkbox'
+import { Input } from '../base/Input'
+import { Skeleton } from '../base/Skeleton'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { AccordionItem } from '../base/Accordion'
+import './ListingParts.css'
+
+/**
+ * 12C · 02 / 03 listing parts — the ONE browsing system main-collection and
+ * product-grid share: facets, active-filter chips, sort, count, load more and
+ * the grid's loading / empty / error states. All controlled; the host applies
+ * filters and fetches (URL updates for sharing are the host's).
+ */
+
+export interface FacetHandlers {
+  onToggle: (facetId: string, valueId: string) => void
+  onPrice?: (facetId: string, from?: number, to?: number) => void
+}
+
+/** One facet's options — checkboxes with counts; zero-count options are disabled, not hidden. */
+export function FacetOptions({ facet, onToggle, onPrice }: { facet: Facet } & FacetHandlers): JSX.Element {
+  const { strings } = useNova()
+  if (facet.type === 'price' && facet.range) {
+    const r = facet.range
+    return (
+      <div className="nv-facet__price">
+        <Input type="number" inputMode="numeric" aria-label={strings.priceMin} placeholder={String(r.min)} defaultValue={r.from} min={r.min} max={r.max} onBlur={(e) => onPrice?.(facet.id, e.target.value ? Number(e.target.value) : undefined, r.to)} />
+        <span aria-hidden>–</span>
+        <Input type="number" inputMode="numeric" aria-label={strings.priceMax} placeholder={String(r.max)} defaultValue={r.to} min={r.min} max={r.max} onBlur={(e) => onPrice?.(facet.id, r.from, e.target.value ? Number(e.target.value) : undefined)} />
+      </div>
+    )
+  }
+  return (
+    <ul className="nv-facet__values">
+      {(facet.values ?? []).map((v) => (
+        <li key={v.id} className="nv-facet__value">
+          <Checkbox label={v.label} checked={v.active} disabled={v.count === 0 && !v.active} onChange={() => onToggle(facet.id, v.id)} />
+          <span className="nv-facet__count nv-tabular" aria-hidden>
+            {v.count}
+          </span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/** Sidebar / drawer facets: one accordion row per facet (the first with a choice opens). */
+export function FacetList({ facets, ...h }: { facets: Facet[] } & FacetHandlers): JSX.Element {
+  const openAt = Math.max(0, facets.findIndex((f) => f.values?.some((v) => v.active)))
+  return (
+    <div className="nv-facets">
+      {facets.map((f, i) => (
+        <AccordionItem key={f.id} title={f.label} defaultOpen={i === openAt} level={3}>
+          <FacetOptions facet={f} {...h} />
+        </AccordionItem>
+      ))}
+    </div>
+  )
+}
+
+/** A disclosure panel anchored to its button (top-bar facets, sort). Esc and an outside click close it. */
+export function Disclosure({ label, children, align = 'start', className }: { label: ReactNode; children: (close: () => void) => ReactNode; align?: 'start' | 'end'; className?: string }): JSX.Element {
+  const [open, setOpen] = useState(false)
+  const root = useRef<HTMLDivElement>(null)
+  const button = useRef<HTMLButtonElement>(null)
+  const id = useId()
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: PointerEvent) => !root.current?.contains(e.target as Node) && setOpen(false)
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      setOpen(false)
+      button.current?.focus()
+    }
+    document.addEventListener('pointerdown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('pointerdown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+  const close = () => {
+    setOpen(false)
+    button.current?.focus()
+  }
+  return (
+    <div ref={root} className={['nv-disclosure', className].filter(Boolean).join(' ')} data-open={open ? '' : undefined} data-align={align}>
+      <button ref={button} type="button" className="nv-disclosure__button" aria-expanded={open} aria-controls={id} onClick={() => setOpen((o) => !o)}>
+        {label}
+        <Icon name={open ? 'chevron-up' : 'chevron-down'} size="sm" />
+      </button>
+      <div id={id} className="nv-disclosure__panel" hidden={!open}>
+        {open && children(close)}
+      </div>
+    </div>
+  )
+}
+
+/** Sort — the current choice in the button; a list of choices in the panel. */
+export function SortMenu({ options, value, onChange }: { options: SortOption[]; value?: string; onChange: (id: string) => void }): JSX.Element | null {
+  const { strings } = useNova()
+  if (!options.length) return null
+  const current = options.find((o) => o.id === value) ?? options[0]
+  return (
+    <Disclosure align="end" className="nv-sort" label={fmt(strings.sortLabel, { label: current.label })}>
+      {(close) => (
+        <ul className="nv-sort__list" aria-label={strings.sortBy}>
+          {options.map((o) => (
+            <li key={o.id}>
+              <button
+                type="button"
+                className="nv-sort__option"
+                aria-current={o.id === current.id ? 'true' : undefined}
+                onClick={() => {
+                  onChange(o.id)
+                  close()
+                }}
+              >
+                {o.label}
+                {o.id === current.id && <Icon name="check" size="sm" />}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Disclosure>
+  )
+}
+
+/** Active filters as removable chips (24 × inside a 32 chip, a 44 row) + Clear all. */
+export function ActiveFilters({ facets, onToggle, onPrice, onClear }: { facets: Facet[]; onClear: () => void } & FacetHandlers): JSX.Element | null {
+  const { strings } = useNova()
+  const chips = facets.flatMap((f) => [
+    ...(f.values ?? []).filter((v) => v.active).map((v) => ({ key: `${f.id}:${v.id}`, label: v.label, remove: () => onToggle(f.id, v.id) })),
+    ...(f.type === 'price' && f.range && (f.range.from != null || f.range.to != null) ? [{ key: f.id, label: `${f.range.from ?? f.range.min}–${f.range.to ?? f.range.max}`, remove: () => onPrice?.(f.id) }] : []),
+  ])
+  if (!chips.length) return null
+  return (
+    <ul className="nv-active-filters">
+      {chips.map((c) => (
+        <li key={c.key}>
+          <button type="button" className="nv-chip-filter" onClick={c.remove} aria-label={fmt(strings.removeFilter, { label: c.label })}>
+            {c.label}
+            <Icon name="close" size="sm" />
+          </button>
+        </li>
+      ))}
+      <li>
+        <button type="button" className="nv-active-filters__clear" onClick={onClear}>
+          {strings.clearAll}
+        </button>
+      </li>
+    </ul>
+  )
+}
+
+/** "Showing 6 of 21" + a progress line + Load more (keeps its width while loading). */
+export function LoadMore({ shown, total, loading, onLoadMore }: { shown: number; total: number; loading?: boolean; onLoadMore: () => void }): JSX.Element | null {
+  const { strings } = useNova()
+  if (shown >= total) return null
+  return (
+    <div className="nv-load-more">
+      <p className="nv-load-more__count nv-tabular">{fmt(strings.showingOf, { shown, total })}</p>
+      <div className="nv-load-more__bar" aria-hidden>
+        <span className={sx({ width: `${Math.round((shown / total) * 100)}%` })} />
+      </div>
+      <Button variant="secondary" loading={loading} onClick={onLoadMore}>
+        {strings.loadMore}
+      </Button>
+    </div>
+  )
+}
+
+/** Loading: skeleton cards at the card geometry, so the grid keeps its height. */
+export function CardSkeleton(): JSX.Element {
+  return (
+    <div className="nv-card-skeleton" aria-hidden>
+      <Skeleton shape="media" ratio="var(--ratio-product)" />
+      <Skeleton shape="text" width="80%" />
+      <Skeleton shape="text" width="40%" />
+    </div>
+  )
+}
+
+/** Zero results / empty collection / failed load — in the grid area only; header and filters stay. */
+export function ListingMessage({ kind, filterNames, onClear, onRetry, shopAllHref }: { kind: 'no-matches' | 'empty' | 'no-collections' | 'error'; filterNames?: string; onClear?: () => void; onRetry?: () => void; shopAllHref?: string }): JSX.Element {
+  const { strings } = useNova()
+  const title = kind === 'no-matches' ? strings.noMatches12c : kind === 'empty' ? strings.emptyCollection : kind === 'no-collections' ? strings.noCollectionsYet : strings.loadFailed
+  return (
+    <div className="nv-listing-message" role={kind === 'error' ? 'alert' : 'status'}>
+      <p className="nv-listing-message__title">{title}</p>
+      {kind === 'no-matches' && filterNames && <p className="nv-listing-message__hint">{fmt(strings.noMatchesHint, { filters: filterNames })}</p>}
+      {kind === 'error' && <p className="nv-listing-message__hint">{strings.loadFailedHint}</p>}
+      <div className="nv-listing-message__actions">
+        {kind === 'no-matches' && onClear && <Button onClick={onClear}>{strings.clearAllFilters}</Button>}
+        {kind === 'error' && onRetry && <Button onClick={onRetry}>{strings.tryAgain}</Button>}
+        {kind !== 'error' && shopAllHref && (
+          <Button href={shopAllHref} variant={kind === 'no-matches' ? 'secondary' : 'primary'}>
+            {strings.shopAllProducts}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/nova/src/components/commerce/LookItem.css

@@ -0,0 +1,19 @@
+.nv-look-item { position: relative; display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--ease-standard); }
+.nv-look-item[data-variant='compact'] { grid-template-columns: 24px minmax(0, 1fr) auto; padding-inline: 0; border-radius: 0; border-block-end: 1px solid var(--color-border); }
+.nv-look-item[data-active] { background: var(--color-bg-muted); }
+.nv-look-item[data-variant='compact'][data-active] { background: none; }
+.nv-look-item[data-variant='compact'][data-active] .nv-look-item__title { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-look-item__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-fg); color: var(--color-bg); font-size: 0.6875rem; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
+.nv-look-item__media { width: 70px; height: 70px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-media-bg); }
+.nv-look-item__media img { width: 100%; height: 100%; object-fit: cover; }
+.nv-look-item__text { display: grid; gap: 2px; min-width: 0; font-size: 0.875rem; }
+.nv-look-item__title { color: var(--color-fg); font-weight: var(--weight-medium); text-decoration: none; }
+.nv-look-item__title::after { content: ''; position: absolute; inset: 0; }
+.nv-look-item__title:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-look-item__title:focus-visible { outline: none; }
+.nv-look-item__title:focus-visible::after { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: -2px; border-radius: var(--radius-md); }
+.nv-look-item__add { position: relative; z-index: 1; }
+.nv-look-item__sold { font-size: var(--type-caption); color: var(--color-fg-muted); }
+.nv-look-item[data-sold-out] :is(.nv-look-item__media, .nv-look-item__n) { opacity: 0.5; }
+.nv-look-item[data-sold-out] .nv-look-item__title { color: var(--color-fg-muted); }
+@media (prefers-reduced-motion: reduce) { .nv-look-item { transition: none; } }

package/templates/nova/src/components/commerce/LookItem.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { Product } from '@tanqory/theme-kit'
+import { Price } from './Price'
+import { hasPriceRange } from './money'
+import './LookItem.css'
+
+export interface LookItemProps {
+  index: number
+  product: Product
+  /** cards = thumbnail rows; compact = number · name · price only. */
+  variant?: 'cards' | 'compact'
+  /** Linked to the hotspot: activating one highlights the other. */
+  active?: boolean
+  onActivate?: () => void
+  /** Adds the product (multi-variant products: the host opens a variant sheet first). */
+  onAdd?: (product: Product) => void
+}
+
+/** 12F · one product in a look. Sold-out stays in the list, muted, and cannot be added. */
+export const LookItem = forwardRef<HTMLLIElement, LookItemProps>(function LookItem({ index, product: p, variant = 'cards', active, onActivate, onAdd }, ref) {
+  const { strings } = useNova()
+  const img = p.featuredImage
+  return (
+    <li ref={ref} className="nv-look-item" data-variant={variant} data-active={active ? '' : undefined} data-sold-out={p.available ? undefined : ''} onMouseEnter={onActivate} onFocus={onActivate}>
+      <span className="nv-look-item__n" aria-hidden>{index}</span>
+      {variant === 'cards' && <span className="nv-look-item__media">{img && <img src={img.src} alt="" width={img.width} height={img.height} loading="lazy" decoding="async" />}</span>}
+      <span className="nv-look-item__text">
+        <a className="nv-look-item__title" href={p.url}>
+          <span className="nv-visually-hidden">{index}. </span>
+          {p.title}
+        </a>
+        <Price price={p.priceRange.min} from={hasPriceRange(p)} soldOut={!p.available} />
+        {!p.available && <span className="nv-look-item__sold">{strings.soldOut}</span>}
+      </span>
+      {onAdd && <IconButton className="nv-look-item__add" variant="outlined" icon="plus" label={fmt(strings.addNamed, { title: p.title })} disabled={!p.available} onClick={() => onAdd(p)} />}
+    </li>
+  )
+})

package/templates/nova/src/components/commerce/MiniCartLine.css

@@ -0,0 +1,20 @@
+.nv-mini-line { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); font-size: 0.875rem; }
+.nv-mini-line__media { display: block; width: 70px; height: 70px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-media-bg); }
+.nv-mini-line__media img { width: 100%; height: 100%; object-fit: cover; }
+.nv-mini-line__info { display: grid; gap: var(--space-1); min-width: 0; align-content: start; }
+.nv-mini-line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
+.nv-mini-line__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-fg); font-weight: var(--weight-medium); line-height: 1.35; text-decoration: none; }
+.nv-mini-line__title:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-mini-line__price { flex: none; font-weight: var(--weight-medium); }
+.nv-mini-line__price[data-sale] { color: var(--color-sale); }
+.nv-mini-line__meta { color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-mini-line__controls { display: flex; align-items: center; justify-content: space-between; margin-block-start: var(--space-2); }
+.nv-mini-line .nv-qty { min-height: 36px; }
+.nv-mini-line .nv-qty .nv-icon-btn { width: 32px; height: 32px; }
+.nv-mini-line__reason { display: flex; align-items: center; gap: var(--space-1); color: var(--color-danger); font-size: var(--type-caption); }
+.nv-mini-line__remove-text { justify-self: start; min-height: 24px; padding: 0; border: 0; background: none; color: var(--color-fg); font: inherit; font-size: var(--type-caption); text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+.nv-mini-line[data-state='updating'] :is(.nv-mini-line__media, .nv-mini-line__controls, .nv-mini-line__price) { opacity: 0.6; }
+.nv-mini-line[data-state='unavailable'] .nv-mini-line__media { opacity: 0.5; }
+.nv-mini-line[data-state='unavailable'] .nv-mini-line__title { color: var(--color-fg-muted); }
+.nv-mini-line__failed { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--overlay-radius-alert); background: var(--color-danger-surface); color: var(--color-danger); font-size: var(--type-caption); }
+.nv-mini-line__failed button { min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }

package/templates/nova/src/components/commerce/MiniCartLine.tsx

@@ -0,0 +1,93 @@
+import type { CartLine, CartLineRefusal } from '@tanqory/theme-kit'
+import { IconButton } from '../base/IconButton'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { QuantitySelector } from './QuantitySelector'
+import { cartLimitText } from './cart-limit'
+import { formatMoney } from './money'
+import './MiniCartLine.css'
+
+export interface MiniCartLineProps {
+  line: CartLine
+  updating?: boolean
+  /** The last update failed: the old value stays and an inline alert offers a retry. */
+  failed?: boolean
+  /** The store said why the last update failed (its add-to-cart limit): that reason replaces the generic one, with no retry. */
+  refusal?: CartLineRefusal
+  onQuantity?: (line: CartLine, quantity: number) => void
+  onRemove?: (line: CartLine) => void
+  onRetry?: (line: CartLine) => void
+}
+
+/**
+ * Nova 13 · 3 cart drawer line: 70 image, title (2 lines), options · struck
+ * compare-at, the line price at the end (sale red), a compact stepper and a
+ * trash button. Remove has no confirmation (undo via toast). An unavailable
+ * item shows its reason and Remove.
+ */
+export function MiniCartLine({ line, updating, failed, refusal, onQuantity, onRemove, onRetry }: MiniCartLineProps): JSX.Element {
+  const { strings, locale } = useNova()
+  const v = line.variant
+  const unavailable = !v.available
+  const options = v.selectedOptions.filter((o) => o.value !== 'Default Title').map((o) => o.value).join(' · ')
+  const sale = Boolean(line.cost.compareAtTotal && line.cost.compareAtTotal.amount > line.cost.total.amount)
+  return (
+    <div className="nv-mini-line" data-state={unavailable ? 'unavailable' : updating ? 'updating' : undefined} aria-busy={updating || undefined}>
+      <a className="nv-mini-line__media" href={line.product.url} tabIndex={-1} aria-hidden>
+        {v.image && <img src={v.image.src} alt="" width={v.image.width} height={v.image.height} loading="lazy" decoding="async" />}
+      </a>
+      <div className="nv-mini-line__info">
+        <div className="nv-mini-line__top">
+          <a className="nv-mini-line__title" href={line.product.url}>
+            <bdi>{line.product.title}</bdi>
+          </a>
+          {!unavailable && (
+            <span className="nv-mini-line__price nv-tabular" data-sale={sale ? '' : undefined}>
+              {formatMoney(line.cost.total, locale)}
+            </span>
+          )}
+        </div>
+        {(options || sale) && (
+          <p className="nv-mini-line__meta">
+            {options}
+            {sale && (
+              <>
+                {options && ' · '}
+                <span className="nv-visually-hidden">{strings.regularPrice} </span>
+                <s className="nv-tabular">{formatMoney(line.cost.compareAtTotal!, locale)}</s>
+              </>
+            )}
+          </p>
+        )}
+        {unavailable ? (
+          <>
+            <p className="nv-mini-line__reason">
+              <Icon name="error" size="sm" />
+              {strings.noLongerAvailable}
+            </p>
+            <button type="button" className="nv-mini-line__remove-text" onClick={() => onRemove?.(line)} aria-label={fmt(strings.removeNamed, { title: line.product.title })}>
+              {strings.remove}
+            </button>
+          </>
+        ) : (
+          <div className="nv-mini-line__controls">
+            <QuantitySelector value={line.quantity} min={1} max={v.quantityAvailable ?? undefined} disabled={updating} onChange={(q) => onQuantity?.(line, q)} label={fmt(strings.quantityOf, { title: line.product.title })} />
+            <IconButton icon="trash" label={fmt(strings.removeNamed, { title: line.product.title })} disabled={updating} onClick={() => onRemove?.(line)} />
+          </div>
+        )}
+      </div>
+      {failed && (
+        <p className="nv-mini-line__failed" role="alert">
+          <Icon name="error" size="sm" />
+          {refusal ? cartLimitText(strings, refusal) : strings.quantityUpdateFailed}
+          {onRetry && !refusal && (
+            <button type="button" onClick={() => onRetry(line)}>
+              {strings.tryAgain}
+            </button>
+          )}
+        </p>
+      )}
+    </div>
+  )
+}

package/templates/nova/src/components/commerce/PaymentMark.css

@@ -0,0 +1,2 @@
+.nv-pay-mark { display: inline-flex; flex: none; border-radius: var(--radius-sm); background: #ffffff; box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
+.nv-pay-mark > svg { display: block; }

package/templates/nova/src/components/commerce/PaymentMark.tsx

@@ -0,0 +1,55 @@
+import type { PaymentMethod } from '@tanqory/theme-kit'
+import './PaymentMark.css'
+
+/**
+ * 12A · payment marks — each method as its recognisable mark on a quiet
+ * white chip (utility row, cart, checkout). Simplified drawings, never the
+ * only carrier of meaning: every chip has the method's name as its label.
+ */
+const NAME: Record<PaymentMethod, string> = {
+  visa: 'Visa',
+  mastercard: 'Mastercard',
+  amex: 'American Express',
+  promptpay: 'PromptPay',
+  paypal: 'PayPal',
+  'apple-pay': 'Apple Pay',
+  'google-pay': 'Google Pay',
+  jcb: 'JCB',
+  unionpay: 'UnionPay',
+  truemoney: 'TrueMoney',
+  discover: 'Discover',
+  'diners-club': 'Diners Club',
+}
+
+function Art({ method }: { method: PaymentMethod }): JSX.Element {
+  switch (method) {
+    case 'visa':
+      return <text x="26" y="20.5" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="13" fontWeight="800" fontStyle="italic" fill="#1A1F71">VISA</text>
+    case 'mastercard':
+      return (
+        <>
+          <circle cx="21" cy="16" r="8" fill="#EB001B" />
+          <circle cx="31" cy="16" r="8" fill="#F79E1B" fillOpacity="0.9" />
+        </>
+      )
+    case 'amex':
+      return <text x="26" y="19.5" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="10" fontWeight="800" fill="#2E77BC">AMEX</text>
+    case 'promptpay':
+      return <text x="26" y="19" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="7.5" fontWeight="700" fill="#1A3E6F">PromptPay</text>
+    default:
+      // A name longer than the chip's ten-letter measure ("DINERS CLUB") steps down so it stays inside the 52px chip.
+      return <text x="26" y="19" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize={NAME[method].length > 10 ? 6 : 7} fontWeight="700" fill="#3D3D3B">{NAME[method].toUpperCase()}</text>
+  }
+}
+
+export function PaymentMark({ method }: { method: PaymentMethod }): JSX.Element {
+  return (
+    <span className="nv-pay-mark" title={NAME[method]} role="img" aria-label={NAME[method]}>
+      <svg viewBox="0 0 52 32" width="52" height="32" aria-hidden focusable="false">
+        <Art method={method} />
+      </svg>
+    </span>
+  )
+}
+
+export const PAYMENT_NAMES = NAME

package/templates/nova/src/components/commerce/Price.css

@@ -0,0 +1,27 @@
+/* 12C · price hierarchy — price never wraps inside itself. */
+.nv-price {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-1) var(--space-2);
+  font-size: var(--type-product-title);
+  line-height: var(--leading-product-title);
+  color: var(--color-fg);
+}
+.nv-price__current, .nv-price__compare { white-space: nowrap; }
+.nv-price[data-sale] .nv-price__current { color: var(--color-sale); }
+.nv-price__compare { color: var(--color-fg-muted); font-size: 0.93em; }
+.nv-price[data-sold-out] .nv-price__current { color: var(--color-fg-muted); }
+.nv-price[data-size='pdp'] { font-size: var(--pdp-price); gap: var(--space-2) var(--space-3); }
+.nv-price[data-size='pdp'] .nv-price__compare { font-size: var(--pdp-compare); }
+.nv-price__save {
+  align-self: center;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-badge);
+  background: color-mix(in srgb, var(--color-sale) 10%, var(--color-bg));
+  color: var(--color-sale);
+  font-size: var(--type-caption);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+}
+.nv-price[data-unavailable] .nv-price__current { color: var(--color-fg-muted); font-weight: var(--weight-body); }

package/templates/nova/src/components/commerce/Price.tsx

@@ -0,0 +1,55 @@
+import type { Money } from '@tanqory/theme-kit'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { formatMoney } from './money'
+import './Price.css'
+
+/**
+ * 12C · the one price hierarchy. Price in ink; a sale price in sale red with
+ * the old price struck through, and the saving stated in WORDS ("Save $51.00"),
+ * never colour alone. "From" for ranges; 0 reads "Free"; sold out is muted
+ * with no compare-at. Currency decimals come from Intl (¥4,800 · KWD 8.750).
+ */
+export interface PriceProps {
+  price: Money
+  compareAt?: Money | null
+  /** Variants differ in price (cards). */
+  from?: boolean
+  soldOut?: boolean
+  /** card 14 · pdp 20 / 16 with the Save pill. */
+  size?: 'card' | 'pdp'
+  /** Show the "Save …" pill (product page). */
+  showSave?: boolean
+  /** Nova 14 · 14.7: the market has no price for this product — "Price shown at checkout" (add to cart is disabled by the caller). */
+  unavailable?: boolean
+  className?: string
+}
+
+export function Price({ price, compareAt, from, soldOut, size = 'card', showSave, unavailable, className }: PriceProps): JSX.Element {
+  const { locale, strings } = useNova()
+  if (unavailable) {
+    return (
+      <div className={['nv-price', className].filter(Boolean).join(' ')} data-size={size} data-unavailable="">
+        <span className="nv-price__current">{strings.priceAtCheckout}</span>
+      </div>
+    )
+  }
+  const onSale = !soldOut && Boolean(compareAt && compareAt.amount > price.amount)
+  const text = price.amount === 0 ? strings.free : formatMoney(price, locale)
+  const shown = from ? fmt(strings.priceFrom, { price: text }) : text
+  return (
+    <div className={['nv-price', className].filter(Boolean).join(' ')} data-size={size} data-sale={onSale ? '' : undefined} data-sold-out={soldOut ? '' : undefined}>
+      {onSale ? (
+        <>
+          <span className="nv-visually-hidden">{strings.salePrice}</span>
+          <span className="nv-price__current nv-tabular">{shown}</span>
+          <span className="nv-visually-hidden">{strings.regularPrice}</span>
+          <s className="nv-price__compare nv-tabular">{formatMoney(compareAt!, locale)}</s>
+          {showSave && <span className="nv-price__save">{fmt(strings.save, { amount: formatMoney({ amount: compareAt!.amount - price.amount, currencyCode: price.currencyCode }, locale) })}</span>}
+        </>
+      ) : (
+        <span className="nv-price__current nv-tabular">{shown}</span>
+      )}
+    </div>
+  )
+}

package/templates/nova/src/components/commerce/ProductCard.css

@@ -0,0 +1,66 @@
+/* 12C · ProductCard — image-first, no container by default. */
+.nv-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; color: var(--color-fg); }
+.nv-card__media {
+  position: relative;
+  aspect-ratio: var(--ratio-product);
+  border-radius: var(--radius-media);
+  overflow: hidden;
+  background: var(--color-media-bg);
+}
+.nv-card[data-ratio='square'] .nv-card__media { aspect-ratio: 1; }
+.nv-card[data-ratio='portrait'] .nv-card__media { aspect-ratio: 4 / 5; }
+.nv-card[data-ratio='landscape'] .nv-card__media { aspect-ratio: 4 / 3; }
+.nv-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-card__img--alt { opacity: 0; transition: opacity var(--duration-base) var(--ease-standard); }
+.nv-card__img--alt[data-shown] { opacity: 1; }
+.nv-card__missing {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: var(--space-2);
+  background: var(--color-bg-muted);
+  color: var(--color-fg-subtle);
+  font-size: var(--type-label);
+}
+.nv-card__badge { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-raised); }
+/* On a card, New and Sold out sit on the page colour. */
+.nv-card__badge .nv-badge[data-tone='sold-out'] { background: var(--color-bg); }
+
+.nv-card__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
+.nv-card__vendor { font-size: var(--type-label); line-height: var(--leading-tight); color: var(--color-fg-muted); }
+.nv-card__title {
+  font-size: var(--type-product-title);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-product-title);
+  letter-spacing: 0;
+  text-wrap: pretty;
+}
+/* The clamp is on the link itself, so its box (and hit area) is exactly two lines. */
+.nv-card__link {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  color: inherit;
+  text-decoration: none;
+  text-underline-offset: var(--underline-offset);
+}
+.nv-card[data-compact] .nv-card__link { -webkit-line-clamp: 1; }
+/* The whole card is the link's target; the title stays the accessible name. */
+.nv-card__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-media); }
+.nv-card__link:focus-visible { outline: none; }
+.nv-card__link:focus-visible::after { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
+.nv-card:hover .nv-card__link { text-decoration: underline; }
+
+.nv-card__swatches { display: flex; align-items: center; gap: var(--space-1); margin-block-start: var(--space-1); }
+.nv-card__dot { width: var(--card-swatch); height: var(--card-swatch); border-radius: var(--radius-circle); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-fg) 12%, transparent); background: var(--color-bg-muted); }
+.nv-card__swatch-label { margin-inline-start: var(--space-1); font-size: var(--type-label); color: var(--color-fg-muted); }
+
+/* Quick add: above the card link; hover-reveal on desktop pointers, always at 390. */
+.nv-card__quick.nv-icon-btn { position: absolute; z-index: var(--z-raised); inset-block-end: var(--space-2); inset-inline-end: var(--space-2); }
+@media (hover: hover) and (pointer: fine) {
+  .nv-card__quick.nv-icon-btn { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
+  .nv-card:hover .nv-card__quick.nv-icon-btn, .nv-card__quick.nv-icon-btn:focus-visible { opacity: 1; }
+}