create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/sections/Newsletter/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[] = [
+  // Above the footer
+  {"name": "nl-band", "label": "Newsletter band", "settings": {"layout": "start", "panel": "band", "background": "surface-secondary"}, "blocks": []},
+  // Inside content pages
+  {"name": "nl-card", "label": "Newsletter card", "settings": {"layout": "centered", "panel": "card"}, "blocks": []},
+  // Home page sign-up
+  {"name": "nl-split", "label": "Newsletter split", "settings": {"layout": "split", "panel": "band", "background": "primary"}, "blocks": []},
+]

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

@@ -0,0 +1,36 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 06 newsletter (EXISTING · CHANGED) — a working form only with an
+ * endpoint (action, or the platform's — DATA REQUIREMENT); without one the
+ * buttonUrl link-out; without either, nothing (the editor sees setup). No
+ * silent forms. layout start · centered · split (stacked < 1024); card =
+ * contained, radius 12, and the background colours the card.
+ */
+export const newsletterSchema = defineSchema(
+  { kind: 'section', name: 'newsletter', family: '12G' },
+  {
+    body: field.richtext('Be the first to hear…'),
+    placeholder: field.text('you@example.com'),
+    buttonLabel: field.text('Subscribe'),
+    note: field.text(''),
+    action: field.url(''),
+    buttonUrl: field.url(''),
+    layout: field.select(['start', 'centered', 'split'], 'start'),
+    panel: field.select(['band', 'card'], 'band'),
+    showConsent: field.boolean(false),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentWidth: shared.contentWidth('standard'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface-secondary'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,41 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { RichText } from '../../components/content/RichText'
+import { SearchField } from '../../components/forms/SearchField'
+import { RecoveryLinks } from '../../components/navigation/RecoveryLinks'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import type { NovaLink } from '@tanqory/theme-kit'
+import { Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { notFoundSchema } from './schema'
+
+export type NotFoundSettings = SettingsOf<typeof notFoundSchema>
+export interface NotFoundProps extends NotFoundSettings {
+  /** collectionLinks, resolved to real collections. */
+  collections?: readonly NovaLink[]
+  searchUrl?: string
+}
+
+export function NotFound(props: NotFoundProps): JSX.Element {
+  const { body, buttonLabel, buttonLink, showSearch, sectionWidth, contentWidth, contentAlignment, heading, headerSize, collections = [], searchUrl } = props
+  const { strings } = useNova()
+  return (
+    <Shell props={props} type="not-found" width={sectionWidth} className="nv-not-found">
+      <div className="nv-not-found__inner" data-measure={contentWidth} data-align={contentAlignment}>
+        <p className="nv-not-found__code" aria-hidden>
+          404
+        </p>
+        <h1 className="nv-utility__title" data-size={headerSize}>{heading.trim() || '404'}</h1>
+        <RichText html={body} className="nv-not-found__body" />
+        {showSearch && <SearchField action={searchUrl} placeholder={strings.searchTheShop} label={strings.searchTheShop} />}
+        <RecoveryLinks links={collections} label={strings.suggestedLinks} align={contentAlignment} />
+        {buttonLabel.trim() && buttonLink.trim() && (
+          <Button href={buttonLink} size="lg">
+            <bdi>{buttonLabel}</bdi>
+          </Button>
+        )}
+      </div>
+    </Shell>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { collectionLinksFor, defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { NotFound } from './NotFound'
+import { presets } from './presets'
+import { notFoundSchema } from './schema'
+
+export default defineSection({
+  id: 'not-found',
+  schema: notFoundSchema,
+  component: NotFound,
+  category: 'system',
+  zone: 'main',
+  title: '404',
+  description: 'The page shown when a link goes nowhere.',
+  icon: '⚠',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(notFoundSchema, node.settings)
+      return { ...r.settings, collections: collectionLinksFor(store, r.settings.collectionLinks) }
+  },
+})

package/templates/nova/src/sections/NotFound/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[] = [
+  // Recovery page
+  {"name": "404-standard", "label": "404", "settings": {"showSearch": true}, "blocks": []},
+]

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

@@ -0,0 +1,30 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 08 not-found (EXISTING · CHANGED) — the same recovery pattern as
+ * search: 404 in mono above a friendly heading, the text, search, the
+ * merchant's chosen collections, and a way home. collectionLinks is comma
+ * handles — the fallback for a collection multi-picker (NEEDS NEW FIELD
+ * TYPE); unknown handles drop out. The page returns status 404.
+ */
+export const notFoundSchema = defineSchema(
+  { kind: 'section', name: 'not-found', family: '12G' },
+  {
+    body: field.richtext("The page you're looking for doesn't exist…"),
+    buttonLabel: field.text('Back to home'),
+    buttonLink: field.url('/'),
+    showSearch: field.boolean(true),
+    collectionLinks: field.text(''),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('standard'),
+    contentWidth: shared.contentWidth('narrow'),
+    contentAlignment: shared.contentAlignment('center'),
+    spacingTop: shared.spacingTop('xl'),
+    spacingBottom: shared.spacingBottom('xl'),
+    background: shared.background('surface'),
+    heading: shared.heading('This page has moved on'),
+    headerSize: shared.headerSize('large'),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,35 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { LongForm } from '../../components/content/LongForm'
+import { EditorChip } from '../../components/states/EditorFrame'
+import { useNova } from '../../styles/NovaProvider'
+import { Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/editorial.css'
+import { pageBodySchema } from './schema'
+
+export type PageBodySettings = SettingsOf<typeof pageBodySchema>
+export interface PageBodyProps extends PageBodySettings {
+  /** The route's page. */
+  page?: { title: string; html: string } | null
+}
+
+export function PageBody(props: PageBodyProps): JSX.Element | null {
+  const { showTitle, textWidth, fallbackTitle, fallbackBody, sectionWidth, contentWidth, contentAlignment, headerSize, page } = props
+  const { mode, strings } = useNova()
+  const sample = !page && mode === 'editor'
+  if (!page && !sample) return null
+  const title = page?.title ?? fallbackTitle
+  const html = page?.html ?? (fallbackBody || `<p>${strings.editorSampleArticle}</p>`)
+  const measure = textWidth ?? contentWidth
+  return (
+    <Shell props={props} type="page-body" width={sectionWidth} className="nv-page-body" data-measure={measure}>
+      <header className="nv-longhead" data-align={contentAlignment} data-measure={measure}>
+        {sample && <EditorChip section="page-body" />}
+        <h1 className={showTitle ? 'nv-longhead__title' : 'nv-visually-hidden'} data-size={headerSize}>
+          <bdi>{title}</bdi>
+        </h1>
+      </header>
+      <LongForm html={html} measure={measure} />
+    </Shell>
+  )
+}

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

@@ -0,0 +1,21 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { PageBody } from './PageBody'
+import { presets } from './presets'
+import { pageBodySchema } from './schema'
+
+export default defineSection({
+  id: 'page-body',
+  schema: pageBodySchema,
+  component: PageBody,
+  category: 'content',
+  zone: 'main',
+  title: 'Page content',
+  description: 'The content of the current page.',
+  icon: '¶',
+  requiresContext: ['page'],
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(pageBodySchema, node.settings)
+      return { ...r.settings, page: store.currentPage ?? null }
+  },
+})

package/templates/nova/src/sections/PageBody/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[] = [
+  // Care guides, FAQs as text, info pages
+  {"name": "page-standard", "label": "Standard page", "settings": {"showTitle": true, "contentWidth": "narrow"}, "blocks": []},
+]

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

@@ -0,0 +1,29 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12E · 01 page-body — a page's own title and content, nothing else (every
+ * other part of the page is a section), through the prose system at 640.
+ * showTitle off keeps the h1 (visually hidden) when a hero or rich-text above
+ * already titles the page. The editor without page context shows a sample.
+ */
+export const pageBodySchema = defineSchema(
+  { kind: 'section', name: 'page-body', family: '12E' },
+  {
+    showTitle: field.boolean(true),
+    textWidth: field.select(['narrow', 'content', 'standard'], 'narrow', { legacyHidden: true }),
+    fallbackTitle: field.text('Page'),
+    fallbackBody: field.richtext(''),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentWidth: shared.contentWidth('narrow'),
+    contentAlignment: shared.contentAlignment('left'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('medium'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('large'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,62 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { formatDate } from '../../components/content/ArticleCard'
+import { ContentsNav } from '../../components/content/ContentsNav'
+import { LongForm, headingsOf } from '../../components/content/LongForm'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { Policy } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { policyPageSchema } from './schema'
+
+export type PolicyPageSettings = SettingsOf<typeof policyPageSchema>
+export interface PolicyPageProps extends PolicyPageSettings {
+  /** The policy for this page (the handle's, or the route's) — null when it is not published. */
+  content?: Policy | null
+  contactUrl?: string
+}
+
+/** auto shows contents from this many headings. */
+export const CONTENTS_AUTO = 4
+
+export function PolicyPage(props: PolicyPageProps): JSX.Element | null {
+  const { policy: handle, showLastUpdated, showTableOfContents, sectionWidth, contentWidth, headerSize, content: store, contactUrl } = props
+  const { strings, locale, mode } = useNova()
+  if (!store) {
+    // Blank handle = the route's policy. In the editor that asks the merchant to choose one; on a live
+    // policy route the store has not published it yet (a new store's consent banner links here).
+    if (!handle?.trim() && mode === 'editor') return <EmptySection props={props} type="policy-page" width={sectionWidth} title={strings.editorChoosePolicy} hint={strings.editorChoosePolicyHint} />
+    return (
+      <Shell props={props} type="policy-page" width={sectionWidth} className="nv-policy" data-state="unpublished">
+        <p className="nv-policy__unpublished">
+          {strings.policyUnpublished}
+          {contactUrl && (
+            <>
+              {' '}
+              <a href={contactUrl}>{strings.contactUs}</a>
+            </>
+          )}
+        </p>
+      </Shell>
+    )
+  }
+  const heads = headingsOf(store.bodyHtml)
+  const contents = showTableOfContents === 'always' ? heads.length > 0 : showTableOfContents === 'auto' && heads.length >= CONTENTS_AUTO
+  return (
+    <Shell props={props} type="policy-page" width={sectionWidth} className="nv-policy" data-contents={contents ? '' : undefined}>
+      <div className="nv-policy__grid">
+        {contents && (
+          <div className="nv-policy__contents">
+            <ContentsNav headings={heads} />
+          </div>
+        )}
+        <article className="nv-policy__body" data-measure={contentWidth}>
+          <h1 className="nv-utility__title" data-size={headerSize}><bdi>{store.title}</bdi></h1>
+          {showLastUpdated && store.updatedAt && <p className="nv-policy__updated">{fmt(strings.lastUpdated, { date: formatDate(store.updatedAt, locale) })}</p>}
+          <LongForm html={store.bodyHtml} measure={contentWidth} headingIds />
+        </article>
+      </div>
+    </Shell>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { PolicyPage } from './PolicyPage'
+import { presets } from './presets'
+import { policyPageSchema } from './schema'
+
+export default defineSection({
+  id: 'policy-page',
+  schema: policyPageSchema,
+  component: PolicyPage,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Policy',
+  description: 'The full text of a store policy.',
+  icon: 'doc',
+  requiresContext: ['policy'],
+  presets,
+  data: (node, store) => {
+      // A handle picks a policy; blank uses the route's (policy templates). Unknown → null (not published).
+      const r = resolveSettings(policyPageSchema, node.settings)
+      const handle = r.settings.policy.trim()
+      return { ...r.settings, content: handle ? (store.policies?.[handle] ?? null) : (store.currentPolicy ?? null) }
+  },
+})

package/templates/nova/src/sections/PolicyPage/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[] = [
+  // Store policies
+  {"name": "policy-standard", "label": "Policy", "settings": {"showTableOfContents": "auto", "showLastUpdated": true}, "blocks": []},
+]

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

@@ -0,0 +1,27 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 04 policy-page (EXISTING · CHANGED) — a store policy through the
+ * prose system (12E) at 640, with a contents list (auto = ≥ 4 headings)
+ * that highlights the section in view; a disclosure at 390. The policy
+ * title is the heading. "Last updated" only with real data (DATA
+ * REQUIREMENT). policy is a text handle — the fallback for a select of
+ * store policies (NEEDS NEW FIELD TYPE); policy templates use the route's.
+ */
+export const policyPageSchema = defineSchema(
+  { kind: 'section', name: 'policy-page', family: '12G' },
+  {
+    policy: field.text(''),
+    showLastUpdated: field.boolean(true),
+    showTableOfContents: field.select(['auto', 'always', 'never'], 'auto'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('standard'),
+    contentWidth: shared.contentWidth('narrow'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('large'),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,269 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { resolveSettings, type SettingsOf } from '@tanqory/theme-kit'
+import { ProductGallery } from '../../components/commerce/ProductGallery'
+import { findVariant, initialSelection, unavailableReason } from '../../components/commerce/VariantPicker'
+import { discountPercent } from '../../components/commerce/money'
+import { Price } from '../../components/commerce/Price'
+import { AddToCart } from '../../components/commerce/AddToCart'
+import { EarnHint } from '../../components/commerce/EarnHint'
+import { Accordion, AccordionItem } from '../../components/base/Accordion'
+import { RichText } from '../../components/content/RichText'
+import { Tabs } from '../../components/base/Tabs'
+import { Breadcrumb } from '../../components/navigation/Breadcrumb'
+import { Badge } from '../../components/base/Badge'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import { SizeGuide } from '../../components/overlays/SizeGuide'
+import { ProductLightbox } from '../../components/overlays/ProductLightbox'
+import { AddToCartBlock, addToCartSchema, type AddToCartBlockSettings } from './blocks/AddToCartBlock'
+import { BadgeBlock, badgeSchema, type BadgeBlockSettings } from '../../components/commerce/blocks/Badge'
+import { ProductDescriptionBlock } from './blocks/ProductDescription'
+import { ProductInventoryBlock, productInventorySchema, type ProductInventorySettings } from './blocks/ProductInventory'
+import { ProductPriceBlock } from './blocks/ProductPrice'
+import { ProductSkuBlock } from './blocks/ProductSku'
+import { ProductTitleBlock } from './blocks/ProductTitle'
+import { QuantityBlock } from './blocks/Quantity'
+import { SwatchesBlock } from '../../components/commerce/blocks/Swatches'
+import { VariantPickerBlock, variantPickerSchema, type VariantPickerBlockSettings } from './blocks/VariantPickerBlock'
+import { tabSchema, type TabSettings } from './blocks/Tab'
+import type { BreadcrumbItem, NovaImage, Product, ProductVariant } from '@tanqory/theme-kit'
+import { ButtonBlock, buttonSchema } from '../../components/content/blocks/Button'
+import { HeadingBlock, headingSchema } from '../../components/content/blocks/Heading'
+import { ImageBlock, imageSchema } from '../../components/content/blocks/Image'
+import { TextBlock, textSchema } from '../../components/content/blocks/Text'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/commerce.css'
+import { productDetailsSchema } from './schema'
+
+export type ProductDetailsBlock =
+  | { type: 'product-title' | 'product-price' | 'swatches' | 'quantity' | 'product-description' | 'product-sku' }
+  | { type: 'variant-picker'; settings?: Partial<VariantPickerBlockSettings> }
+  | { type: 'add-to-cart'; settings?: Partial<AddToCartBlockSettings> }
+  | { type: 'product-inventory'; settings?: Partial<ProductInventorySettings> }
+  | { type: 'tab'; settings?: Partial<TabSettings> }
+  | { type: 'badge'; settings?: Partial<BadgeBlockSettings> }
+  // 12D content blocks that list product-details as a parent — they add below the buy box.
+  | { type: 'heading' | 'text' | 'button'; settings?: Record<string, unknown> }
+  | { type: 'image'; settings?: Record<string, unknown>; image?: NovaImage | null }
+
+export type ProductDetailsSettings = SettingsOf<typeof productDetailsSchema>
+export interface ProductDetailsProps extends ProductDetailsSettings {
+  product?: Product | null
+  productUnavailable?: boolean
+  blocks?: ProductDetailsBlock[]
+  /** The route's trail; without a primary collection it falls back to Home › product. */
+  breadcrumbs?: BreadcrumbItem[]
+  /** sizeGuidePage, resolved by the adapter. */
+  sizeGuide?: { title: string; html: string } | null
+  /** Resolves when the line is in the cart; rejects on failure. */
+  onAddToCart?: (variant: ProductVariant, quantity: number) => Promise<unknown> | void
+  /** Cookie consent not answered yet: the phone sticky bar waits. */
+  consentPending?: boolean
+  /** Open on this variant (a ?variant= URL). */
+  initialVariantId?: string
+  /** The store's prices include tax (Settings › Taxes): "Tax included." under the price. */
+  taxesIncluded?: boolean
+}
+
+const has = (blocks: ProductDetailsBlock[], type: ProductDetailsBlock['type']) => blocks.some((b) => b.type === type)
+
+/** The selected option value that names a row in the guide ("Queen"). */
+function sizeGuideMatch(value: string, html: string): boolean {
+  return new RegExp(`<t[hd][^>]*>\\s*${value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*</t[hd]>`, 'i').test(html)
+}
+
+export function ProductDetails(props: ProductDetailsProps): JSX.Element | null {
+  const {
+    product, productUnavailable, blocks = [], breadcrumbs = [], sizeGuide, onAddToCart, initialVariantId, taxesIncluded,
+    galleryLayout, mediaRatio, enableZoom, stickyPurchase, stickyAddToCart, stickyShowVariant, showBreadcrumb, variantStyle,
+    showVendor, showSku, showInventory, lowStockThreshold, showQuantity, accordionItems, buttonLabel, priceNote, sectionWidth,
+  } = props
+  const { mode, strings } = useNova()
+  const [selected, setSelected] = useState<Record<string, string>>(() => (product ? initialSelection(product, product.variants.find((v) => v.id === initialVariantId)) : {}))
+  const [qty, setQty] = useState(1)
+  const [image, setImage] = useState(0)
+  const [zoom, setZoom] = useState(false)
+  const [guide, setGuide] = useState(false)
+  const [barVisible, setBarVisible] = useState(false)
+  const mainButton = useRef<HTMLDivElement>(null)
+  const variant = useMemo(() => (product ? findVariant(product, selected) : undefined), [product, selected])
+  // The first render may have only the bootstrap's card (variants without their
+  // options); the full product then replaces it under the same id. A selection
+  // the product cannot match reopens on the requested variant, else the first
+  // available one — a shopper never lands on a disabled button.
+  useEffect(() => {
+    if (product && !findVariant(product, selected)) setSelected(initialSelection(product, product.variants.find((v) => v.id === initialVariantId)))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [product])
+
+  // A variant with its own image moves the gallery there.
+  useEffect(() => {
+    if (!product || !variant?.image) return
+    const i = product.images.findIndex((img) => img.src === variant.image?.src)
+    if (i >= 0) setImage(i)
+  }, [product, variant])
+
+  // The sticky bar appears once the main button has scrolled out of view.
+  useEffect(() => {
+    const el = mainButton.current
+    if (!el || stickyAddToCart === 'off' || typeof IntersectionObserver === 'undefined') return
+    const io = new IntersectionObserver(([e]) => setBarVisible(!e.isIntersecting && e.boundingClientRect.top < 0))
+    io.observe(el)
+    return () => io.disconnect()
+  }, [stickyAddToCart, product])
+
+  if (!product) {
+    return mode === 'editor' ? (
+      <section {...sectionRootProps(props, 'product-details')} className="nv-pdp">
+        <div className="nv-section-container" data-width={sectionWidth}>
+          <EditorFrame section="product-details" title={productUnavailable ? strings.editorProductUnavailable : strings.editorChooseProduct} hint={strings.editorChooseProductHint} />
+        </div>
+      </section>
+    ) : null
+  }
+
+  const shown = variant ?? product.variants[0]
+  const price = shown?.price ?? product.priceRange.min
+  const compareAt = shown?.compareAtPrice ?? null
+  const soldOut = !product.available
+  const reason = !soldOut && !variant?.available ? unavailableReason(product, selected, strings.combinationUnavailable) : undefined
+  const percent = discountPercent(price, compareAt)
+  const variantLabel = product.options.length ? product.options.map((o) => selected[o.name]).filter(Boolean)[0] : undefined
+  const summary = product.options.map((o) => selected[o.name]).filter(Boolean).join(' · ')
+  const onChange = (o: string, v: string) => setSelected((s) => ({ ...s, [o]: v }))
+
+  const pickerBlock = blocks.find((b) => b.type === 'variant-picker') as Extract<ProductDetailsBlock, { type: 'variant-picker' }> | undefined
+  const picker = pickerBlock ? resolveSettings(variantPickerSchema, pickerBlock.settings).settings : null
+  const atcBlock = blocks.find((b) => b.type === 'add-to-cart') as Extract<ProductDetailsBlock, { type: 'add-to-cart' }> | undefined
+  const atc = resolveSettings(addToCartSchema, atcBlock?.settings).settings
+  const invBlock = blocks.find((b) => b.type === 'product-inventory') as Extract<ProductDetailsBlock, { type: 'product-inventory' }> | undefined
+  const inventory = invBlock ? resolveSettings(productInventorySchema, invBlock.settings).settings : null
+  const withSwatches = has(blocks, 'swatches')
+  const guideHtml = sizeGuide?.html || picker?.sizeGuideContent || ''
+  const label = buttonLabel.trim() || atc.label
+  const add = () => (variant ? onAddToCart?.(variant, qty) : undefined)
+
+  const tabs = blocks
+    .filter((b): b is Extract<ProductDetailsBlock, { type: 'tab' }> => b.type === 'tab')
+    .map((b, i) => {
+      const s = resolveSettings(tabSchema, b.settings).settings
+      const html = s.source === 'product-description' ? (product.descriptionHtml ?? product.description ?? '') : s.body
+      const title = s.heading.trim() || (s.source === 'product-description' ? strings.description : '')
+      return { id: `tab-${i}`, s, html, title }
+    })
+    .filter((t) => t.title && t.html.replace(/<[^>]*>/g, '').trim())
+  const firstOpen = tabs.findIndex((t) => t.s.openByDefault)
+  const usesDescriptionTab = tabs.some((t) => t.s.source === 'product-description')
+  const badges = blocks.filter((b): b is Extract<ProductDetailsBlock, { type: 'badge' }> => b.type === 'badge').map((b) => resolveSettings(badgeSchema, b.settings).settings).filter((b) => b.label.trim())
+  const trail = breadcrumbs.length >= 2 ? breadcrumbs : [{ title: strings.home, url: '/' }, { title: product.title }]
+
+  const accordion = (
+    <Accordion className="nv-pdp__accordion">
+      {tabs.map((t, i) => (
+        <AccordionItem key={t.id} title={t.title} defaultOpen={i === firstOpen} level={2}>
+          <RichText html={t.html} />
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+
+  return (
+    <section {...sectionRootProps(props, 'product-details')} className="nv-pdp" data-sticky={stickyPurchase} data-gallery={galleryLayout}>
+      <div className="nv-section-container" data-width={sectionWidth}>
+        {showBreadcrumb && (
+          <div className="nv-pdp__trail">
+            <Breadcrumb items={trail} />
+          </div>
+        )}
+        <div className="nv-pdp__grid">
+          <div className="nv-pdp__media">
+            <ProductGallery
+              images={product.images}
+              title={product.title}
+              layout={galleryLayout}
+              ratio={mediaRatio}
+              index={image}
+              onIndex={setImage}
+              onZoom={enableZoom ? (i) => { setImage(i); setZoom(true) } : undefined}
+              badge={percent != null && !soldOut ? <Badge tone="sale">{fmt(strings.discountBadge, { percent })}</Badge> : undefined}
+            />
+          </div>
+          <div className="nv-pdp__buy">
+            <div className="nv-pdp__box">
+              <ProductTitleBlock product={product} showVendor={showVendor} />
+              <ProductPriceBlock price={price} compareAt={compareAt} soldOut={soldOut} note={priceNote} taxNote={taxesIncluded ? strings.taxIncluded : undefined} />
+              {!soldOut && <EarnHint amount={price} scope="item" />}
+              {picker && (
+                <VariantPickerBlock
+                  {...picker}
+                  product={product}
+                  selected={selected}
+                  onChange={onChange}
+                  style={variantStyle}
+                  withoutColour={withSwatches}
+                  onOpenSizeGuide={guideHtml ? () => setGuide(true) : undefined}
+                />
+              )}
+              {withSwatches && <SwatchesBlock product={product} selected={selected} onChange={onChange} />}
+              <div ref={mainButton} className="nv-pdp__buy-row">
+                {showQuantity && has(blocks, 'quantity') && <QuantityBlock value={qty} onChange={setQty} max={variant?.quantityAvailable ?? undefined} disabled={soldOut} />}
+                <AddToCartBlock label={label} soldOut={soldOut} unavailableReason={reason} onAdd={add} />
+              </div>
+              {inventory && <ProductInventoryBlock {...inventory} variant={variant} show={showInventory} threshold={product.lowStockThreshold ?? lowStockThreshold} variantLabel={variantLabel} />}
+            </div>
+            <div className="nv-pdp__info">
+              {has(blocks, 'product-description') && !usesDescriptionTab && <ProductDescriptionBlock html={product.descriptionHtml ?? product.description} />}
+              {tabs.length > 0 &&
+                (accordionItems ? (
+                  accordion
+                ) : (
+                  <>
+                    <div className="nv-pdp__tabs">
+                      <Tabs label={product.title} defaultValue={tabs[Math.max(0, firstOpen)]?.id} items={tabs.map((t) => ({ id: t.id, label: t.title, content: <RichText html={t.html} /> }))} />
+                    </div>
+                    <div className="nv-pdp__tabs-phone">{accordion}</div>
+                  </>
+                ))}
+              {badges.length > 0 && (
+                <div className="nv-pdp__badges">
+                  {badges.map((b, i) => (
+                    <BadgeBlock key={i} {...b} />
+                  ))}
+                </div>
+              )}
+              {showSku && has(blocks, 'product-sku') && <ProductSkuBlock sku={variant?.sku} />}
+              {blocks.map((b, i) => {
+                if (b.type === 'heading') return <HeadingBlock key={i} {...resolveSettings(headingSchema, { size: 'small', ...b.settings }).settings} />
+                if (b.type === 'text') return <TextBlock key={i} {...resolveSettings(textSchema, b.settings).settings} />
+                if (b.type === 'button') return <ButtonBlock key={i} {...resolveSettings(buttonSchema, b.settings).settings} demote />
+                if (b.type === 'image') return <ImageBlock key={i} {...resolveSettings(imageSchema, b.settings).settings} image={b.image ?? null} />
+                return null
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* While the cookie banner asks (browser-only, after hydration), the phone bar steps aside through CSS
+          (commerce.css `:has(.nv-consent)`): removing it from the DOM would make the hydrated page differ
+          from the server's. */}
+      {stickyAddToCart !== 'off' && (
+        <div className="nv-pdp__bar-slot">
+        <div className="nv-pdp__bar" data-scope={stickyAddToCart} data-visible={barVisible ? '' : undefined} aria-hidden={barVisible ? undefined : true} {...(barVisible ? {} : { inert: '' })}>
+          <div className="nv-pdp__bar-info">
+            {stickyShowVariant && summary && <span className="nv-pdp__bar-variant">{summary}</span>}
+            <Price price={price} compareAt={compareAt} soldOut={soldOut} />
+          </div>
+          <AddToCart label={label} size="md" block={false} soldOut={soldOut} unavailableReason={reason ? ' ' : undefined} onAdd={add} />
+        </div>
+        </div>
+      )}
+      {enableZoom && product.images.length > 0 && <ProductLightbox open={zoom} onClose={() => setZoom(false)} images={product.images} index={image} onIndex={setImage} title={product.title} />}
+      {guideHtml && (
+        <SizeGuide open={guide} onClose={() => setGuide(false)} title={sizeGuide?.title || picker?.sizeGuideLabel || strings.sizeGuide} html={guideHtml} selected={Object.values(selected).find((v) => sizeGuideMatch(v, guideHtml))} />
+      )}
+    </section>
+  )
+}