create-tanqory-theme 0.0.0-stage → 0.2.3

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

@@ -0,0 +1,122 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useId, type ReactNode } from 'react'
+import type { Product, ProductVariant } from '@tanqory/theme-kit'
+import { Select } from '../base/Select'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { isColorOption, swatchColor } from './swatch'
+import './VariantPicker.css'
+
+/**
+ * 12C · option picker (variant-picker + swatches blocks, featured-product,
+ * quick add). One row per option: legend "Size · Queen", then
+ *
+ *   auto      colour-like → swatches; ≤ 8 values → buttons; else a dropdown
+ *   buttons   44 tall · swatches: a 32 dot in a 44 target · select: native
+ *
+ * Values no variant can reach with the other choices (not made, or sold out)
+ * stay SELECTABLE — the shopper can read the price — but are struck through
+ * and announced "unavailable"; the add button then says why. A product with
+ * a single variant renders nothing. Controlled: the owner keeps `selected`.
+ */
+export type VariantStyle = 'auto' | 'buttons' | 'swatches' | 'select'
+
+export interface VariantPickerProps {
+  product: Product
+  selected: Record<string, string>
+  onChange: (option: string, value: string) => void
+  style?: VariantStyle
+  /** Rendered at the end of the first size-like option's legend row (the size guide link). */
+  sizeGuide?: ReactNode
+  /** Limit to one kind (the swatches block renders colour options only). */
+  only?: 'colour' | 'other'
+}
+
+const SIZE_LIKE = /size|ขนาด|مقاس/i
+
+/** The variant matching every selected option, if one exists. */
+export function findVariant(p: Product, selected: Record<string, string>): ProductVariant | undefined {
+  return p.variants.find((v) => v.selectedOptions.every((o) => selected[o.name] === o.value))
+}
+
+/** The selection a product opens on: the first available variant's options. */
+export function initialSelection(p: Product, variant?: ProductVariant): Record<string, string> {
+  const v = variant ?? p.variants.find((x) => x.available) ?? p.variants[0]
+  return Object.fromEntries((v?.selectedOptions ?? []).map((o) => [o.name, o.value]))
+}
+
+function reachable(p: Product, selected: Record<string, string>, name: string, value: string): boolean {
+  const want = { ...selected, [name]: value }
+  return p.variants.some((v) => v.available && v.selectedOptions.every((o) => want[o.name] === o.value))
+}
+
+export function VariantPicker({ product: p, selected, onChange, style = 'auto', sizeGuide, only }: VariantPickerProps): JSX.Element | null {
+  const { strings } = useNova()
+  const id = useId()
+  if (p.variants.length < 2) return null
+  const options = p.options.filter((o) => o.values.length > 1 && (!only || (only === 'colour') === isColorOption(o)))
+  if (!options.length) return null
+  const guideAt = options.findIndex((o) => SIZE_LIKE.test(o.name))
+  return (
+    <div className="nv-variants">
+      {options.map((o, i) => {
+        const kind: Exclude<VariantStyle, 'auto'> = style !== 'auto' ? style : isColorOption(o) ? 'swatches' : o.values.length <= 8 ? 'buttons' : 'select'
+        const current = selected[o.name]
+        const legend = (
+          <span className="nv-variants__legend-row">
+            <span>
+              {o.name} <span className="nv-variants__current">· {current}</span>
+            </span>
+            {i === (guideAt < 0 ? -1 : guideAt) && sizeGuide}
+          </span>
+        )
+        if (kind === 'select') {
+          return (
+            <div key={o.name} className="nv-variants__option" data-kind="select">
+              <label className="nv-variants__legend" htmlFor={`${id}-${i}`}>
+                {legend}
+              </label>
+              <Select
+                id={`${id}-${i}`}
+                size="lg"
+                value={current}
+                onChange={(e) => onChange(o.name, e.target.value)}
+                options={o.values.map((v) => ({ value: v, label: reachable(p, selected, o.name, v) ? v : `${v} — ${strings.unavailable}` }))}
+              />
+            </div>
+          )
+        }
+        return (
+          <fieldset key={o.name} className="nv-variants__option" data-kind={kind}>
+            <legend className="nv-variants__legend">{legend}</legend>
+            <div className="nv-variants__values">
+              {o.values.map((v) => {
+                const ok = reachable(p, selected, o.name, v)
+                const colour = kind === 'swatches' ? swatchColor(v) : null
+                return (
+                  <label key={v} className="nv-variants__value" data-unavailable={ok ? undefined : ''} title={kind === 'swatches' ? v : undefined}>
+                    <input type="radio" className="nv-variants__input" name={`${id}-${o.name}`} value={v} checked={current === v} onChange={() => onChange(o.name, v)} />
+                    {kind === 'swatches' ? (
+                      <>
+                        <span className={sxJoin("nv-variants__dot", sx(colour ? { background: colour } : undefined))} aria-hidden />
+                        <span className="nv-visually-hidden">{v}</span>
+                      </>
+                    ) : (
+                      <span className="nv-variants__label">{v}</span>
+                    )}
+                    {!ok && <span className="nv-visually-hidden">, {strings.unavailable}</span>}
+                  </label>
+                )
+              })}
+            </div>
+          </fieldset>
+        )
+      })}
+    </div>
+  )
+}
+
+/** Why the add button is disabled for this selection ("Queen / Charcoal is not available"). */
+export function unavailableReason(p: Product, selected: Record<string, string>, text: string): string {
+  return fmt(text, { choice: p.options.map((o) => selected[o.name]).filter(Boolean).join(' / ') })
+}

package/templates/nova/src/components/commerce/blocks/Badge.css

@@ -0,0 +1,6 @@
+/* 12C · product badge block (icon + label + detail). */
+.nv-pdp-badge { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--type-body-sm); }
+.nv-pdp-badge__text { display: grid; gap: var(--space-1); }
+.nv-pdp-badge__text a { color: inherit; display: grid; gap: var(--space-1); }
+.nv-pdp-badge__label { font-weight: var(--weight-medium); }
+.nv-pdp-badge__detail { color: var(--color-fg-muted); }

package/templates/nova/src/components/commerce/blocks/Badge.tsx

@@ -0,0 +1,33 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { Icon } from '../../../styles/Icon'
+import '../../../styles/blocks.css'
+import './Badge.css'
+
+/** 12C · badge block (product-details, trust-badges) — icon + label + detail, a 2-up grid under the buy box; skipped when the label is empty. */
+export const BADGE_ICONS = ['truck', 'return', 'chat', 'shield', 'star', 'gift', 'leaf', 'clock', 'check', 'card'] as const
+export const badgeSchema = defineSchema(
+  { kind: 'block', name: 'badge', family: '12C', parents: ['product-details', 'trust-badges'], title: 'Badge', description: 'One guarantee or reassurance: icon, label and a short detail.', icon: '◈' },
+  {
+    icon: field.select(BADGE_ICONS, 'shield'),
+    label: field.text(''),
+    detail: field.text(''),
+    link: field.url(''),
+  },
+)
+export type BadgeBlockSettings = SettingsOf<typeof badgeSchema>
+
+export function BadgeBlock({ icon, label, detail, link }: BadgeBlockSettings): JSX.Element | null {
+  if (!label.trim()) return null
+  const text = (
+    <>
+      <span className="nv-pdp-badge__label"><bdi>{label}</bdi></span>
+      {detail.trim() && <span className="nv-pdp-badge__detail"><bdi>{detail}</bdi></span>}
+    </>
+  )
+  return (
+    <div className="nv-block nv-pdp-badge" data-block="badge">
+      <Icon name={icon} size="md" />
+      <span className="nv-pdp-badge__text">{link.trim() ? <a href={link}>{text}</a> : text}</span>
+    </div>
+  )
+}

package/templates/nova/src/components/commerce/blocks/PaymentIcons.tsx

@@ -0,0 +1,43 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { PaymentMark, PAYMENT_NAMES } from '../PaymentMark'
+import { useNova } from '../../../styles/NovaProvider'
+import type { NovaShop, PaymentMethod } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './payment.css'
+
+/**
+ * 12A · payment-icons — payment marks on quiet chips. `methods` is
+ * comma-separated text (NEEDS NEW FIELD TYPE — the ideal control is a
+ * multi-select); unknown marks are dropped, and an empty value falls back to
+ * the store's payment methods.
+ */
+export const paymentIconsSchema = defineSchema(
+  { kind: 'block', name: 'payment-icons', family: '12A', parents: ['footer', 'group'], title: 'Payment icons', description: 'The payment methods you accept, as icons.', icon: '▭' },
+  { methods: field.text('') },
+)
+export type PaymentIconsBlockProps = Partial<SettingsOf<typeof paymentIconsSchema>> & { shop?: NovaShop }
+
+const KNOWN = new Set(Object.keys(PAYMENT_NAMES))
+
+export function parsePaymentMethods(methods: string | undefined, shop?: NovaShop): PaymentMethod[] {
+  const typed = (methods ?? '')
+    .split(',')
+    .map((m) => m.trim().toLowerCase().replace(/\s+/g, '-'))
+    .filter((m): m is PaymentMethod => KNOWN.has(m))
+  return typed.length ? typed : (shop?.paymentMethods ?? [])
+}
+
+export function PaymentIconsBlock({ methods, shop }: PaymentIconsBlockProps): JSX.Element | null {
+  const { strings } = useNova()
+  const list = parsePaymentMethods(methods, shop)
+  if (!list.length) return null
+  return (
+    <ul className="nv-block nv-payments" data-block="payment-icons" aria-label={strings.paymentMethods}>
+      {list.map((m) => (
+        <li key={m}>
+          <PaymentMark method={m} />
+        </li>
+      ))}
+    </ul>
+  )
+}

package/templates/nova/src/components/commerce/blocks/Swatches.tsx

@@ -0,0 +1,17 @@
+import { defineSchema } from '@tanqory/theme-kit'
+import { VariantPicker } from '../VariantPicker'
+import { isColorOption } from '../swatch'
+import type { Product } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/** 12C · swatches block — the colour option as 32 dots in 44 targets; hidden without a colour-like option. */
+export const swatchesSchema = defineSchema({ kind: 'block', name: 'swatches', family: '12C', parents: ['product-details'], title: 'Swatches', description: 'Colour swatches for the current product.', icon: '●', requiresContext: ['product'] }, {})
+
+export function SwatchesBlock({ product, selected, onChange }: { product: Product; selected: Record<string, string>; onChange: (option: string, value: string) => void }): JSX.Element | null {
+  if (!product.options.some((o) => isColorOption(o) && o.values.length > 1)) return null
+  return (
+    <div className="nv-block" data-block="swatches">
+      <VariantPicker product={product} selected={selected} onChange={onChange} style="swatches" only="colour" />
+    </div>
+  )
+}

package/templates/nova/src/components/commerce/blocks/payment.css

@@ -0,0 +1,2 @@
+/* payment-icons */
+.nv-payments { display: flex; flex-wrap: wrap; gap: var(--space-2); }

package/templates/nova/src/components/commerce/cart-limit.ts

@@ -0,0 +1,11 @@
+import type { CartLineRefusal } from '@tanqory/theme-kit'
+import type { NovaStrings } from '../../styles/strings'
+import { fmt } from '../../styles/strings'
+
+/**
+ * Why the store refused a line's quantity, in the shopper's language: the merchant's
+ * "Maximum quantity per product" when it is known, else that the most has been reached.
+ */
+export function cartLimitText(strings: NovaStrings, refusal: CartLineRefusal): string {
+  return refusal.maxQuantity ? fmt(strings.cartLimitReached, { max: refusal.maxQuantity }) : strings.cartLimitReachedAny
+}

package/templates/nova/src/components/commerce/money.ts

@@ -0,0 +1,34 @@
+import type { Money, Product, ProductVariant } from '@tanqory/theme-kit'
+
+/**
+ * Money in the shopper's locale and the amount's own currency: Intl decides
+ * the decimals (JPY ¥4,800 · KWD 8.750 · THB ฿590.00), never the theme.
+ */
+export function formatMoney(m: Money, locale = 'en'): string {
+  try {
+    return new Intl.NumberFormat(locale, { style: 'currency', currency: m.currencyCode }).format(m.amount)
+  } catch {
+    return `${m.amount.toFixed(2)} ${m.currencyCode}`
+  }
+}
+
+/** Whole-percent discount of a sale (−21%), or null when there is none. */
+export function discountPercent(price: Money, compareAt?: Money | null): number | null {
+  if (!compareAt || compareAt.amount <= price.amount || compareAt.amount <= 0) return null
+  return Math.round(((compareAt.amount - price.amount) / compareAt.amount) * 100)
+}
+
+/** A product's variants differ in price: cards say "From". */
+export function hasPriceRange(p: Pick<Product, 'priceRange'>): boolean {
+  return p.priceRange.min.amount !== p.priceRange.max.amount
+}
+
+/** The variant a product page opens on: the first available, else the first. */
+export function defaultVariant(p: Product): ProductVariant | undefined {
+  return p.variants.find((v) => v.available) ?? p.variants[0]
+}
+
+/** A product with real choices (not one "Default title" variant). */
+export function hasOptions(p: Product): boolean {
+  return p.variants.length > 1 && p.options.some((o) => o.values.length > 1)
+}

package/templates/nova/src/components/commerce/swatch.ts

@@ -0,0 +1,54 @@
+import type { ProductOption } from '@tanqory/theme-kit'
+
+/**
+ * Swatch colours INFERRED from value names (12C variantStyle "auto"). Exact
+ * swatch data is a DATA REQUIREMENT on the platform; until it exists the
+ * theme recognises common colour words and never invents a colour it does
+ * not know (an unknown name is not colour-like).
+ */
+const NAMES: Record<string, string> = {
+  oat: '#D9CBB2',
+  sand: '#D8C8AE',
+  natural: '#E4DACA',
+  linen: '#E6DFD2',
+  chalk: '#EEEAE2',
+  white: '#F7F6F2',
+  ivory: '#F3EEE2',
+  cream: '#F1E9D8',
+  stone: '#C9C3B8',
+  grey: '#9A9894',
+  gray: '#9A9894',
+  'sea salt': '#D6DAD8',
+  sage: '#8A9A7B',
+  moss: '#6F7B5A',
+  olive: '#7D7F5A',
+  green: '#4F6B4A',
+  clay: '#B8765A',
+  terracotta: '#B8765A',
+  rust: '#A2532F',
+  honey: '#C9974A',
+  mustard: '#C9A43A',
+  blush: '#E3C1B6',
+  pink: '#E0A9B0',
+  red: '#B42318',
+  navy: '#26324A',
+  blue: '#4D6B8A',
+  indigo: '#3A4668',
+  charcoal: '#3B3A37',
+  iron: '#4A4744',
+  black: '#1A1A1A',
+  walnut: '#6B4A33',
+  oak: '#B08C60',
+  brown: '#7A5638',
+}
+
+const COLOUR_OPTION = /colou?r|shade|finish|glaze|สี|لون/i
+
+export function swatchColor(value: string): string | null {
+  return NAMES[value.trim().toLowerCase()] ?? null
+}
+
+/** An option reads as colour: named like one, or every value is a known colour. */
+export function isColorOption(o: ProductOption): boolean {
+  return COLOUR_OPTION.test(o.name) || (o.values.length > 0 && o.values.every((v) => swatchColor(v)))
+}

package/templates/nova/src/components/content/ArticleCard.css

@@ -0,0 +1,22 @@
+.nv-article-card { position: relative; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
+.nv-article-card[data-no-image] { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-fg); }
+.nv-article-card__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-article-card[data-ratio='square'] .nv-article-card__media { aspect-ratio: 1; }
+.nv-article-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-article-card__text { display: grid; gap: var(--space-2); }
+.nv-article-card__meta { font-size: 0.78125rem; color: var(--color-fg-muted); }
+.nv-article-card__title { font-size: 1.1875rem; line-height: 1.3; font-weight: var(--weight-heading); letter-spacing: 0; text-wrap: balance; }
+.nv-article-card__link { color: inherit; text-decoration: none; }
+.nv-article-card__link::after { content: ''; position: absolute; inset: 0; }
+.nv-article-card__link:focus-visible { outline: none; }
+.nv-article-card__link:focus-visible::after { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-media); }
+.nv-article-card:hover .nv-article-card__link { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-article-card__excerpt { font-size: var(--type-body-sm); color: var(--color-fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+@media (max-width: 639.98px) {
+  /* Rows: image-left, square thumb; excerpts hidden. */
+  .nv-article-card[data-rows] { grid-template-columns: 6.75rem minmax(0, 1fr); align-items: start; gap: var(--space-4); }
+  .nv-article-card[data-rows][data-no-image] { grid-template-columns: minmax(0, 1fr); }
+  .nv-article-card[data-rows] .nv-article-card__media { aspect-ratio: 1; }
+  .nv-article-card[data-rows] .nv-article-card__excerpt { display: none; }
+  .nv-article-card[data-rows] .nv-article-card__title { font-size: 0.9375rem; }
+}

package/templates/nova/src/components/content/ArticleCard.tsx

@@ -0,0 +1,53 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import type { Article } from '@tanqory/theme-kit'
+import { useNova } from '../../styles/NovaProvider'
+import './ArticleCard.css'
+
+/**
+ * 12E · the journal card: 3:2 image (radius 8) · tag · date (12.5 muted) ·
+ * title 19 / 1.3 · optional excerpt (2 lines). A post without an image is a
+ * text card with a rule on top — never a placeholder.
+ */
+export interface ArticleCardProps {
+  article: Article
+  ratio?: 'landscape' | 'square' | 'adapt'
+  showExcerpt?: boolean
+  showDate?: boolean
+  titleAs?: 'h2' | 'h3' | 'h4'
+  /** Rows at 390 (image-left). */
+  compactOnPhone?: boolean
+  /** Above the fold: load the image at once instead of lazily (it is the page's largest paint). */
+  priority?: boolean
+}
+
+export function formatDate(iso: string, locale: string): string {
+  // Accepts a plain date (YYYY-MM-DD) or a full ISO timestamp, which is what the
+  // storefront API sends — the date part alone, so it never shifts by time zone.
+  const day = /^\d{4}-\d{2}-\d{2}/.exec(iso ?? '')?.[0]
+  const d = new Date(`${day ?? iso}T00:00:00Z`)
+  return Number.isNaN(d.getTime()) ? iso : new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeZone: 'UTC' }).format(d)
+}
+
+export function ArticleCard({ article: a, ratio = 'landscape', showExcerpt, showDate = true, titleAs: T = 'h3', compactOnPhone = true, priority = false }: ArticleCardProps): JSX.Element {
+  const { locale } = useNova()
+  const tag = a.tags?.[0]
+  const meta = [tag && tag[0].toUpperCase() + tag.slice(1), showDate && formatDate(a.publishedAt, locale)].filter(Boolean).join(' · ')
+  return (
+    <article className="nv-article-card" data-ratio={ratio} data-no-image={a.image ? undefined : ''} data-rows={compactOnPhone ? '' : undefined}>
+      {a.image && (
+        <div className={sxJoin("nv-article-card__media", sx(ratio === 'adapt' ? { aspectRatio: `${a.image.width} / ${a.image.height}` } : undefined))}>
+          <img src={a.image.src} srcSet={a.image.srcSet} sizes="(min-width: 1024px) 33vw, 40vw" alt="" width={a.image.width || undefined} height={a.image.height || undefined} loading={priority ? 'eager' : 'lazy'} decoding="async" />
+        </div>
+      )}
+      <div className="nv-article-card__text">
+        {meta && <p className="nv-article-card__meta">{meta}</p>}
+        <T className="nv-article-card__title">
+          <a href={a.url} className="nv-article-card__link">
+            <bdi>{a.title}</bdi>
+          </a>
+        </T>
+        {showExcerpt && a.excerpt && <p className="nv-article-card__excerpt"><bdi>{a.excerpt}</bdi></p>}
+      </div>
+    </article>
+  )
+}

package/templates/nova/src/components/content/BeforeAfterSlider.css

@@ -0,0 +1,38 @@
+.nv-ba { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-ba[data-ratio='square'] { aspect-ratio: 1; }
+.nv-ba[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
+.nv-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
+/* The before image shows from the start edge to the divider. */
+.nv-ba__before { clip-path: inset(0 calc(100% - var(--nv-ba)) 0 0); }
+[dir='rtl'] .nv-ba__before { clip-path: inset(0 0 0 calc(100% - var(--nv-ba))); }
+.nv-ba__divider { position: absolute; inset-block: 0; inset-inline-start: var(--nv-ba); width: 2px; margin-inline-start: -1px; background: var(--color-on-media); pointer-events: none; }
+.nv-ba__handle {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
+  place-items: center;
+  width: var(--touch-target);
+  height: var(--touch-target);
+  border-radius: var(--radius-circle);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  box-shadow: var(--shadow-floating);
+  transform: translate(-50%, -50%);
+}
+[dir='rtl'] .nv-ba__handle { transform: translate(50%, -50%); }
+.nv-ba__label { position: absolute; inset-block-start: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--type-label); font-weight: var(--weight-medium); pointer-events: none; }
+.nv-ba__label[data-kind='before'] { inset-inline-start: var(--space-3); background: var(--color-media-control); color: var(--color-fg-inverse); }
+.nv-ba__label[data-kind='after'] { inset-inline-end: var(--space-3); background: var(--color-bg); color: var(--color-fg); }
+/* The native range covers the image: drag anywhere, tap a side, keyboard steps. */
+.nv-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
+.nv-ba:has(.nv-ba__range:focus-visible) .nv-ba__handle { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
+.nv-ba[data-layout='side-by-side'] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
+.nv-ba__pane { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-ba[data-ratio='landscape'] .nv-ba__pane { aspect-ratio: 3 / 2; }
+.nv-ba[data-ratio='square'] .nv-ba__pane { aspect-ratio: 1; }
+.nv-ba__pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+@media (max-width: 639.98px) {
+  .nv-ba[data-layout='slider'] { aspect-ratio: 4 / 5; }
+  .nv-ba[data-layout='side-by-side'] { grid-template-columns: minmax(0, 1fr); }
+}

package/templates/nova/src/components/content/BeforeAfterSlider.tsx

@@ -0,0 +1,87 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useState } from 'react'
+import type { NovaImage } from '@tanqory/theme-kit'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import './BeforeAfterSlider.css'
+
+/**
+ * 12E · before / after — a draggable divider over two aligned photos. The
+ * control is a native range input stretched over the image: a real slider
+ * role, ← → move 5%, Home / End 0 / 100, the value announced "45% before";
+ * a tap on either half jumps there; vertical drags still scroll the page.
+ * No auto-animation, so reduced motion changes nothing. Both images share the
+ * ratio and a centre crop. Labels sit on dark / white chips.
+ */
+export interface BeforeAfterSliderProps {
+  before: NovaImage
+  after: NovaImage
+  /** Describes the change for screen readers. */
+  alt?: string
+  start?: number
+  beforeLabel?: string
+  afterLabel?: string
+  ratio?: 'landscape' | 'square' | 'portrait'
+  /** side-by-side: the calm alternative (stacked at 390). */
+  layout?: 'slider' | 'side-by-side'
+}
+
+export function BeforeAfterSlider({ before, after, alt = '', start = 50, beforeLabel = '', afterLabel = '', ratio = 'landscape', layout = 'slider' }: BeforeAfterSliderProps): JSX.Element {
+  const { strings, dir } = useNova()
+  const [pos, setPos] = useState(start)
+  const labels = Boolean(beforeLabel.trim() || afterLabel.trim())
+  if (layout === 'side-by-side') {
+    return (
+      <div className="nv-ba" data-layout="side-by-side" data-ratio={ratio}>
+        {[
+          [before, beforeLabel, 'before'],
+          [after, afterLabel, 'after'],
+        ].map(([img, label, kind]) => (
+          <figure key={kind as string} className="nv-ba__pane">
+            <img src={(img as NovaImage).src} alt={(img as NovaImage).alt ?? ''} width={(img as NovaImage).width} height={(img as NovaImage).height} loading="lazy" decoding="async" />
+            {labels && (label as string).trim() && <figcaption className="nv-ba__label" data-kind={kind as string}><bdi>{label as string}</bdi></figcaption>}
+          </figure>
+        ))}
+      </div>
+    )
+  }
+  return (
+    <div className={sxJoin("nv-ba", sx({ ['--nv-ba' as string]: `${pos}%` }))} data-layout="slider" data-ratio={ratio}>
+      <img className="nv-ba__img" src={after.src} alt={after.alt ?? ''} width={after.width} height={after.height} loading="lazy" decoding="async" />
+      <img className="nv-ba__img nv-ba__before" src={before.src} alt={before.alt ?? ''} width={before.width} height={before.height} loading="lazy" decoding="async" />
+      {labels && beforeLabel.trim() && <span className="nv-ba__label" data-kind="before" aria-hidden>{beforeLabel}</span>}
+      {labels && afterLabel.trim() && <span className="nv-ba__label" data-kind="after" aria-hidden>{afterLabel}</span>}
+      <span className="nv-ba__divider" aria-hidden>
+        <span className="nv-ba__handle">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 7l-5 5 5 5M15 7l5 5-5 5" />
+          </svg>
+        </span>
+      </span>
+      <input
+        className="nv-ba__range"
+        type="range"
+        min={0}
+        max={100}
+        step={5}
+        value={pos}
+        aria-label={fmt(strings.compareSlider, { label: alt || `${beforeLabel || 'before'} / ${afterLabel || 'after'}` })}
+        aria-valuetext={fmt(strings.beforeValue, { n: pos, before: (beforeLabel || 'before').toLowerCase() })}
+        onChange={(e) => setPos(Number(e.target.value))}
+        // Keys handled here so every browser steps the same (5%, Home / End); ← → follow the reading direction.
+        onKeyDown={(e) => {
+          const back = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
+          const next =
+            e.key === 'Home' ? 0
+            : e.key === 'End' ? 100
+            : e.key === back || e.key === 'ArrowDown' ? pos - 5
+            : e.key === (dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight') || e.key === 'ArrowUp' ? pos + 5
+            : null
+          if (next === null) return
+          e.preventDefault()
+          setPos(Math.max(0, Math.min(100, next)))
+        }}
+      />
+    </div>
+  )
+}

package/templates/nova/src/components/content/CardRow.css

@@ -0,0 +1,80 @@
+/* 12C · 00 row of cards — one header pattern, one carousel. */
+.nv-row { --nv-row-gap-x: var(--card-gap-x); --nv-row-gap-y: var(--card-gap-y); min-width: 0; }
+.nv-row .nv-section-head { align-items: flex-end; }
+.nv-row__actions { display: inline-flex; align-items: center; gap: var(--space-4); }
+.nv-row__bare-head { display: flex; justify-content: flex-end; margin-block-end: var(--space-4); }
+.nv-row__view-all {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--touch-target);
+  color: var(--color-fg);
+  font-size: var(--type-body-sm);
+  font-weight: var(--weight-medium);
+  text-decoration: underline;
+  text-underline-offset: var(--underline-offset-lg);
+  white-space: nowrap;
+}
+.nv-row__arrows { display: inline-flex; gap: var(--space-2); }
+.nv-row__arrows .nv-icon-btn { width: var(--carousel-arrow); height: var(--carousel-arrow); }
+.nv-row__arrows .nv-icon-btn::after { content: ''; position: absolute; inset: calc((var(--carousel-arrow) - var(--touch-target)) / 2); }
+.nv-row__arrows .nv-icon-btn:disabled { color: color-mix(in srgb, var(--color-fg) 30%, transparent); background: var(--color-bg); }
+.nv-row__foot { display: flex; justify-content: center; margin-block-start: var(--space-6); }
+
+/* position: the containing block for visually hidden text inside cards, so a scrolled-away card cannot widen the page. */
+.nv-row__list { position: relative; list-style: none; margin: 0; padding: 0; min-width: 0; }
+.nv-row__item { min-width: 0; }
+
+/* grid: exactly --nv-cols from 1024; 2 at 640–1023; mobileColumns below. */
+.nv-row[data-layout='grid'] .nv-row__list {
+  display: grid;
+  grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr));
+  gap: var(--nv-row-gap-y) var(--nv-row-gap-x);
+}
+/* carousel: scroll-snap, --nv-cols visible. */
+.nv-row[data-layout='carousel'] .nv-row__list {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: calc((100% - (var(--nv-cols) - 1) * var(--nv-row-gap-x)) / var(--nv-cols));
+  gap: var(--nv-row-gap-x);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+.nv-row[data-layout='carousel'] .nv-row__list::-webkit-scrollbar { display: none; }
+.nv-row[data-layout='carousel'] .nv-row__item { scroll-snap-align: start; }
+.nv-row__progress { display: none; }
+
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  .nv-row[data-layout='grid'] .nv-row__list { grid-template-columns: repeat(min(var(--nv-cols), 2), minmax(0, 1fr)); }
+  .nv-row[data-layout='carousel'] { --nv-cols: 2; }
+}
+@media (max-width: 639.98px) {
+  .nv-row .nv-row__arrows { display: none; }
+  .nv-row[data-layout='grid']:not([data-mobile-carousel]) .nv-row__list { grid-template-columns: repeat(var(--nv-mobile-cols, 2), minmax(0, 1fr)); }
+  .nv-row[data-mobile-columns='1'] { --nv-mobile-cols: 1; }
+  /* Mobile carousel: 2.3 cards visible (peek) + a progress line. */
+  .nv-row[data-mobile-carousel] .nv-row__list {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: none;
+    grid-auto-columns: calc((100% - 2 * var(--nv-row-gap-x)) / var(--carousel-peek));
+    gap: var(--nv-row-gap-x);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    margin-inline-end: calc(-1 * var(--page-gutter));
+    padding-inline-end: var(--page-gutter);
+  }
+  .nv-row[data-mobile-carousel] .nv-row__item { scroll-snap-align: start; }
+  .nv-row[data-mobile-carousel] .nv-row__progress {
+    display: block;
+    height: 2px;
+    margin-block-start: var(--space-4);
+    background: var(--color-border);
+    border-radius: var(--radius-pill);
+    overflow: hidden;
+    max-width: calc(3 * var(--space-6));
+  }
+  .nv-row[data-mobile-carousel] .nv-row__progress span { display: block; height: 100%; background: var(--color-fg); border-radius: inherit; }
+}