create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/components/overlays/MobileNavDrawer.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState } from 'react'
+import { Drawer } from './Drawer'
+import { Icon } from '../../styles/Icon'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { SocialLinks } from '../navigation/SocialLinks'
+import { BrandLogo } from '../navigation/BrandLogo'
+import { LocaleSelector } from '../navigation/LocaleSelector'
+import { MarketSelector } from './MarketSelector'
+import type { NovaCustomer, NovaLocalization, NovaMarket, NovaMenu, NovaMenuItem, NovaShop } from '@tanqory/theme-kit'
+import './MobileNavDrawer.css'
+
+/**
+ * MobileNavDrawer (12A header < 1024 · Nova 13). A start-side drawer: level 1
+ * is 56px hairline rows at 18px, a chevron on every item that has children;
+ * choosing one drills in place — back control + the parent's title in the
+ * head, "Shop all …" first, then the children. The foot (muted) carries
+ * Sign in / My account, the country/currency control and social links.
+ *
+ * Focus: entering a level focuses its back button; going back returns focus
+ * to the row that opened it; Esc / close returns focus to the Menu button
+ * (Drawer contract). RTL: the drawer comes from the right, chevrons mirror.
+ */
+export interface MobileNavDrawerProps {
+  open: boolean
+  onClose: () => void
+  menu?: NovaMenu | null
+  shop: NovaShop
+  customer?: NovaCustomer
+  localization?: NovaLocalization | null
+  showAccount?: boolean
+  showLocale?: boolean
+  showSocial?: boolean
+  /** The host opens its own region dialog instead of the built-in one. */
+  onOpenLocale?: () => void
+  /** Apply a market chosen in the built-in Region & language sheet. */
+  onChangeLocale?: (market: NovaMarket) => void | Promise<void>
+  accountUrl?: string
+  /** Nova 13 · 2: a search entry on top of level 1 — shown only when the host opens search from it. */
+  onSearch?: () => void
+  /** Start at a nested level (story/testing): indexes into the menu tree. */
+  initialPath?: number[]
+}
+
+export function MobileNavDrawer({
+  open,
+  onClose,
+  menu,
+  shop,
+  customer,
+  localization,
+  showAccount = true,
+  showLocale = true,
+  showSocial = true,
+  onOpenLocale,
+  onChangeLocale,
+  accountUrl = '/account',
+  initialPath = [],
+  onSearch,
+}: MobileNavDrawerProps): JSX.Element {
+  const { strings } = useNova()
+  const [path, setPath] = useState<number[]>(initialPath)
+  const returnTo = useRef<number | null>(null)
+  const backRef = useRef<HTMLButtonElement>(null)
+  const listRef = useRef<HTMLUListElement>(null)
+
+  useEffect(() => {
+    if (!open) setPath(initialPath)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  let level: NovaMenuItem | null = null
+  let items = menu?.items ?? []
+  for (const i of path) {
+    const next = items[i]
+    if (!next) break
+    level = next
+    items = next.items ?? []
+  }
+  const depth = path.length
+
+  useEffect(() => {
+    if (!open) return
+    if (depth > 0) backRef.current?.focus()
+    else if (returnTo.current !== null) {
+      listRef.current?.querySelectorAll<HTMLElement>('.nv-mnav__link')[returnTo.current]?.focus()
+      returnTo.current = null
+    }
+  }, [depth, open])
+
+  const title = depth > 0 && level ? level.title : shop.name
+  const head = (
+    <div className="nv-drawer__head nv-mnav__head" data-level={depth > 0 ? 'nested' : 'top'}>
+      {depth > 0 && (
+        <IconButton
+          ref={backRef}
+          icon="chevron-left"
+          label={strings.back}
+          onClick={() => {
+            returnTo.current = path[path.length - 1] ?? null
+            setPath((p) => p.slice(0, -1))
+          }}
+        />
+      )}
+      <h2 className="nv-mnav__title">
+        {depth === 0 ? <BrandLogo shop={shop} imageClassName="nv-mnav__logo" longAt={Infinity} /> : title}
+      </h2>
+      <IconButton icon="close" label={strings.closeMenu} onClick={onClose} />
+    </div>
+  )
+
+  const showLocaleRow = showLocale && localization && localization.available.length > 1
+  return (
+    <Drawer open={open} onClose={onClose} side="start" title={strings.menu} head={head} className="nv-mnav-drawer" initialFocus="close">
+      <nav className="nv-mnav" aria-label={strings.mobileNav} data-level={depth > 0 ? 'nested' : 'top'}>
+        {depth === 0 && onSearch && (
+          <button type="button" className="nv-mnav__search" onClick={onSearch}>
+            <Icon name="search" size="sm" />
+            {strings.search}
+          </button>
+        )}
+        {depth > 0 && level?.url && (
+          <a className="nv-mnav__all" href={level.url} onClick={onClose}>
+            {fmt(strings.shopAll, { title: level.title })}
+          </a>
+        )}
+        <ul className="nv-mnav__list" ref={listRef}>
+          {items.map((item, i) => {
+            const hasChildren = Boolean(item.items?.length)
+            return (
+              <li key={`${item.title}-${i}`} className="nv-mnav__item">
+                {hasChildren ? (
+                  <button type="button" className="nv-mnav__link" aria-haspopup="true" onClick={() => setPath((p) => [...p, i])}>
+                    <span><bdi>{item.title}</bdi></span>
+                    <Icon name="chevron-right" size="sm" />
+                  </button>
+                ) : item.url ? (
+                  <a className="nv-mnav__link" href={item.url} aria-current={item.active ? 'page' : undefined} onClick={onClose}>
+                    <span><bdi>{item.title}</bdi></span>
+                  </a>
+                ) : (
+                  <span className="nv-mnav__link"><bdi>{item.title}</bdi></span>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      </nav>
+      {depth === 0 && (showAccount || showLocaleRow || showSocial) && (
+        <div className="nv-mnav__foot">
+          {showAccount && (
+            <a className="nv-mnav__util" href={accountUrl} onClick={onClose}>
+              <Icon name="user" size="md" />
+              {customer?.signedIn ? strings.myAccount : strings.signIn}
+            </a>
+          )}
+          {showLocaleRow &&
+            localization &&
+            (onOpenLocale ? <LocaleSelector localization={localization} onOpen={onOpenLocale} size="lg" block /> : <MarketSelector localization={localization} onChange={onChangeLocale} size="lg" block sheet />)}
+          {showSocial && <SocialLinks shop={shop} />}
+        </div>
+      )}
+    </Drawer>
+  )
+}

package/templates/nova/src/components/overlays/Modal.css

@@ -0,0 +1,52 @@
+/* Nova 13 · 00 Dialog — S 400 · M 560 · L 800; a bottom sheet at 390. */
+.nv-modal-layer { z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-5); }
+.nv-modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100svh - 2 * var(--space-5));
+  border: var(--overlay-hairline);
+  border-radius: var(--overlay-radius-dialog);
+  background: var(--color-bg-elevated);
+  color: var(--color-fg);
+  box-shadow: var(--overlay-shadow);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--overlay-dialog-in) var(--ease-standard), transform var(--overlay-dialog-in) var(--ease-standard);
+  outline: none;
+}
+.nv-modal[data-size='sm'] { max-width: 400px; }
+.nv-modal[data-size='lg'] { max-width: 800px; }
+.nv-overlay[data-open] .nv-modal { opacity: 1; transform: none; }
+.nv-modal__grabber { display: none; }
+.nv-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5); border-block-end: var(--overlay-hairline); }
+.nv-modal__heading { display: grid; gap: 2px; padding-block: calc(var(--space-3) - 2px); min-width: 0; }
+.nv-modal__title:focus { outline: none; }
+.nv-modal__title { font-size: 1.125rem; line-height: 1.35; font-weight: var(--weight-medium); letter-spacing: 0; }
+.nv-modal[data-size='lg'] .nv-modal__title { font-size: 1.5rem; line-height: 1.25; }
+.nv-modal__desc { font-size: 0.875rem; color: var(--color-fg-muted); }
+.nv-modal__close { flex: none; width: 44px; height: 44px; margin-block-start: 2px; }
+.nv-modal__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5); font-size: 0.9375rem; }
+.nv-modal:is([data-size='md'], [data-size='lg']) .nv-modal__body { padding: var(--space-6); }
+.nv-modal__foot { position: sticky; inset-block-end: 0; display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4); border-block-start: var(--overlay-hairline); background: var(--color-bg-elevated); border-end-start-radius: inherit; border-end-end-radius: inherit; }
+.nv-modal[data-bare] { overflow: hidden; }
+.nv-modal[data-bare] > .nv-modal__close { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); z-index: 1; }
+
+@media (max-width: 639.98px) {
+  .nv-modal-layer { place-items: end stretch; padding: 0; }
+  .nv-modal, .nv-modal[data-size] { max-width: none; max-height: 90svh; border-radius: var(--overlay-radius-sheet) var(--overlay-radius-sheet) 0 0; border-block-end: 0; transform: translateY(100%); transition-duration: var(--overlay-slide-in); }
+  .nv-modal__grabber { display: block; width: 36px; height: 4px; margin: var(--space-2) auto 0; border-radius: var(--radius-pill); background: var(--color-border); }
+  .nv-modal[data-bare] .nv-modal__grabber { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 1; }
+  /* Phone actions: full width, stacked, primary on top. */
+  .nv-modal__foot { flex-direction: column-reverse; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
+  .nv-modal__foot > * { width: 100%; }
+  .nv-modal:is([data-size='md'], [data-size='lg']) .nv-modal__body { padding: var(--space-5); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nv-modal, .nv-modal[data-size] { transform: none !important; transition: opacity var(--overlay-dialog-in) linear; }
+}
+/* A confirmation is title + description + actions: no hairlines between them. */
+.nv-modal[role='alertdialog'] .nv-modal__head { border-block-end: 0; padding-block-end: 0; }
+.nv-modal[role='alertdialog'] .nv-modal__foot { border-block-start: 0; }

package/templates/nova/src/components/overlays/Modal.tsx

@@ -0,0 +1,88 @@
+import { useId, useRef, type ReactNode } from 'react'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { TEXT_FIELD, inertWhen, useDialog } from './use-dialog'
+import './Modal.css'
+
+/**
+ * Nova 13 · 00 Dialog (the Modal foundation) — S 400 · M 560 · L 800,
+ * radius 12, header 56 with Close top-end ("Close {name}", never hidden or
+ * delayed), body 20 (24 in M / L) that scrolls inside, footer 16 sticky with
+ * a hairline, actions end-aligned (secondary then primary). Fade + 8px rise,
+ * 180ms. At 390 every dialog is a bottom sheet (radius 16 top, decorative
+ * grabber, ≤ 90% height) with full-width stacked actions, primary on top.
+ * Focus trapped; Esc and the scrim close; focus returns to the trigger.
+ */
+export interface ModalProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  /** Supporting line under the title (14, muted). */
+  description?: ReactNode
+  size?: 'sm' | 'md' | 'lg'
+  footer?: ReactNode
+  children?: ReactNode
+  /** alertdialog for confirmations that need a decision. */
+  role?: 'dialog' | 'alertdialog'
+  /** Forms with typed data do not close on a scrim click (Nova 13 exit rule). */
+  closeOnScrim?: boolean
+  /** Replaces the whole panel content (quick view, lightbox) — Close stays. */
+  bare?: boolean
+  className?: string
+}
+
+export function Modal({ open, onClose, title, description, size = 'md', footer, children, role = 'dialog', closeOnScrim = true, bare, className }: ModalProps): JSX.Element {
+  const panel = useRef<HTMLDivElement>(null)
+  const { strings } = useNova()
+  const titleId = useId()
+  const descId = useId()
+  // Nova 13 focus rule: the first field, else the title (Close is never the first stop).
+  useDialog(open, onClose, panel, () => panel.current?.querySelector<HTMLElement>(`.nv-modal__body ${TEXT_FIELD}`) ?? panel.current?.querySelector<HTMLElement>('[data-dialog-title]'))
+  const close = <IconButton icon="close" label={fmt(strings.closeNamed, { name: title })} onClick={onClose} className="nv-modal__close" />
+  return (
+    <div className="nv-overlay nv-modal-layer" data-open={open ? '' : undefined} {...inertWhen(!open)} aria-hidden={open ? undefined : true}>
+      <div className="nv-overlay__scrim" onClick={closeOnScrim ? onClose : undefined} aria-hidden />
+      <div
+        ref={panel}
+        className={['nv-modal', className].filter(Boolean).join(' ')}
+        data-size={size}
+        data-bare={bare ? '' : undefined}
+        role={role}
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={description ? descId : undefined}
+        tabIndex={-1}
+      >
+        <span className="nv-modal__grabber" aria-hidden />
+        {bare ? (
+          <>
+            <h2 className="nv-visually-hidden" id={titleId} tabIndex={-1} data-dialog-title="">
+              {title}
+            </h2>
+            {close}
+            {children}
+          </>
+        ) : (
+          <>
+            <div className="nv-modal__head">
+              <div className="nv-modal__heading">
+                <h2 className="nv-modal__title" id={titleId} tabIndex={-1} data-dialog-title="">
+                  {title}
+                </h2>
+                {description && (
+                  <p className="nv-modal__desc" id={descId}>
+                    {description}
+                  </p>
+                )}
+              </div>
+              {close}
+            </div>
+            {children && <div className="nv-modal__body">{children}</div>}
+            {footer && <div className="nv-modal__foot">{footer}</div>}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/nova/src/components/overlays/Popover.css

@@ -0,0 +1,4 @@
+/* Nova 13 · 00 Popover — anchored, radius 12, max-height 360 then scrolls. */
+.nv-popover { position: fixed; z-index: var(--z-popover); max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); border: var(--overlay-hairline); border-radius: var(--overlay-radius-popover); background: var(--color-bg-elevated); color: var(--color-fg); box-shadow: var(--overlay-popover-shadow); animation: nv-popover-in var(--overlay-popover-in) var(--ease-standard); }
+@keyframes nv-popover-in { from { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .nv-popover { animation-duration: 1ms; } }

package/templates/nova/src/components/overlays/Popover.tsx

@@ -0,0 +1,115 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react'
+import { createPortal } from 'react-dom'
+import { PHONE_QUERY, useMediaQuery } from '../../styles/viewport'
+import { Sheet } from './Sheet'
+import './Popover.css'
+
+const FOCUSABLE = '[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+const GAP = 8
+const EDGE = 8
+
+export interface PopoverProps {
+  open: boolean
+  onClose: () => void
+  /** The trigger: the popover anchors to it and focus returns to it. */
+  anchor: RefObject<HTMLElement>
+  /** Accessible name — and the sheet title at 390. */
+  label: string
+  children: ReactNode
+  /** Which trigger edge the popover lines up with (mirrors in RTL). */
+  align?: 'start' | 'end'
+  /** 200–360 (Nova 13 · 00). */
+  width?: number
+  /** At 390 open as a bottom sheet instead ("adapt, don't shrink"). */
+  sheetOnPhone?: boolean
+  /** menu / listbox content provides its own role; a plain popover is a non-modal dialog. */
+  role?: 'dialog' | 'none'
+  className?: string
+}
+
+/**
+ * Nova 13 · 00 Popover — anchored 8px from its trigger, radius 12, the
+ * popover shadow, max-height 360 then scrolls, flips above near the bottom
+ * edge and stays inside the viewport. Fade 120ms. Non-modal: Esc or a click
+ * outside closes and focus returns to the trigger. Portalled into the Nova
+ * root so no overflow or transform ancestor clips it.
+ */
+export function Popover({ open, onClose, anchor, label, children, align = 'end', width = 260, sheetOnPhone = true, role = 'dialog', className }: PopoverProps): JSX.Element | null {
+  const phone = useMediaQuery(PHONE_QUERY)
+  const panel = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ top: number; left: number; above: boolean } | null>(null)
+  const closeRef = useRef(onClose)
+  closeRef.current = onClose
+
+  const place = useCallback(() => {
+    const a = anchor.current
+    const p = panel.current
+    if (!a || !p) return
+    const r = a.getBoundingClientRect()
+    const h = p.offsetHeight
+    const rtl = getComputedStyle(a).direction === 'rtl'
+    const below = window.innerHeight - r.bottom
+    const above = below < h + GAP + EDGE && r.top > below
+    const edge = (align === 'end') !== rtl ? r.right - width : r.left
+    const left = Math.min(Math.max(EDGE, edge), window.innerWidth - width - EDGE)
+    setPos({ top: above ? r.top - GAP - h : r.bottom + GAP, left, above })
+  }, [anchor, align, width])
+
+  useLayoutEffect(() => {
+    if (!open || (phone && sheetOnPhone)) return
+    place()
+    window.addEventListener('resize', place)
+    window.addEventListener('scroll', place, true)
+    return () => {
+      window.removeEventListener('resize', place)
+      window.removeEventListener('scroll', place, true)
+    }
+  }, [open, phone, sheetOnPhone, place])
+
+  useEffect(() => {
+    if (!open || (phone && sheetOnPhone)) return
+    const trigger = anchor.current
+    const id = requestAnimationFrame(() => panel.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus())
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      e.stopPropagation()
+      closeRef.current()
+      trigger?.focus()
+    }
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as Node
+      if (panel.current?.contains(t) || trigger?.contains(t)) return
+      closeRef.current()
+    }
+    document.addEventListener('keydown', onKey)
+    document.addEventListener('pointerdown', onDown)
+    return () => {
+      cancelAnimationFrame(id)
+      document.removeEventListener('keydown', onKey)
+      document.removeEventListener('pointerdown', onDown)
+    }
+  }, [open, phone, sheetOnPhone, anchor])
+
+  if (phone && sheetOnPhone) {
+    return (
+      <Sheet open={open} onClose={onClose} title={label}>
+        {children}
+      </Sheet>
+    )
+  }
+  if (!open || typeof document === 'undefined') return null
+  const host = anchor.current?.closest('.nv-root') ?? document.body
+  return createPortal(
+    <div
+      ref={panel}
+      className={sxJoin(['nv-popover', className].filter(Boolean).join(' '), sx({ top: pos?.top ?? -9999, left: pos?.left ?? -9999, width }))}
+      role={role === 'none' ? undefined : role}
+      aria-label={role === 'none' ? undefined : label}
+      data-above={pos?.above ? '' : undefined}
+    >
+      {children}
+    </div>,
+    host,
+  )
+}

package/templates/nova/src/components/overlays/ProductLightbox.css

@@ -0,0 +1,20 @@
+/* 12C · zoom lightbox — full screen on the page colour. */
+.nv-lightbox-layer { z-index: var(--z-modal); }
+.nv-lightbox {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  opacity: 0;
+  transition: opacity var(--duration-base) var(--ease-standard);
+  outline: none;
+}
+.nv-overlay[data-open] .nv-lightbox { opacity: 1; }
+.nv-lightbox__bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
+.nv-lightbox__count { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-lightbox__img { width: 100%; height: 100%; object-fit: contain; }
+.nv-lightbox__nav { position: absolute; inset-inline: var(--space-4); inset-block-start: 50%; display: flex; justify-content: space-between; pointer-events: none; }
+.nv-lightbox__nav .nv-icon-btn { pointer-events: auto; }
+[dir='rtl'] .nv-lightbox__nav .nv-icon { transform: scaleX(-1); }

package/templates/nova/src/components/overlays/ProductLightbox.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useId, useRef } from 'react'
+import type { NovaImage } from '@tanqory/theme-kit'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { inertWhen, useDialog } from './use-dialog'
+import './Drawer.css'
+import './Modal.css'
+import './ProductLightbox.css'
+
+/**
+ * 12C · product image zoom — a full-screen lightbox (--z-modal). ← → move
+ * between images (mirrored in RTL), Esc closes, focus returns to the zoom
+ * button. At 390 pinch-zoom is native; the gallery hides the zoom button.
+ */
+export interface ProductLightboxProps {
+  open: boolean
+  onClose: () => void
+  images: NovaImage[]
+  index: number
+  onIndex: (index: number) => void
+  /** The product name — the dialog's accessible name. */
+  title: string
+}
+
+export function ProductLightbox({ open, onClose, images, index, onIndex, title }: ProductLightboxProps): JSX.Element {
+  const { strings, dir } = useNova()
+  const panel = useRef<HTMLDivElement>(null)
+  const titleId = useId()
+  useDialog(open, onClose, panel)
+  const count = images.length
+  const go = (d: number) => onIndex((index + d + count) % count)
+
+  useEffect(() => {
+    if (!open || count < 2) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
+      const forward = (e.key === 'ArrowRight') !== (dir === 'rtl')
+      onIndex((index + (forward ? 1 : -1) + count) % count)
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, index, count, dir, onIndex])
+
+  const img = images[index]
+  return (
+    <div className="nv-overlay nv-lightbox-layer" data-open={open ? '' : undefined} {...inertWhen(!open)} aria-hidden={open ? undefined : true}>
+      <div ref={panel} className="nv-lightbox" role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}>
+        <h2 id={titleId} className="nv-visually-hidden">
+          <bdi>{title}</bdi>
+        </h2>
+        <div className="nv-lightbox__bar">
+          {open && count > 1 && (
+            <span className="nv-lightbox__count nv-tabular" aria-live="polite">
+              {fmt(strings.imageOf, { index: index + 1, count })}
+            </span>
+          )}
+          <IconButton icon="close" label={strings.closeZoom} onClick={onClose} />
+        </div>
+        {open && img && <img className="nv-lightbox__img" src={img.src} srcSet={img.srcSet} sizes="100vw" alt={img.alt ?? ''} width={img.width} height={img.height} />}
+        {count > 1 && (
+          <div className="nv-lightbox__nav">
+            <IconButton variant="on-media" icon="chevron-left" label={strings.previous} onClick={() => go(-1)} />
+            <IconButton variant="on-media" icon="chevron-right" label={strings.next} onClick={() => go(1)} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/nova/src/components/overlays/PromoPopup.css

@@ -0,0 +1,32 @@
+/* Nova 13 · 9 promotion popup — centre dialog (image ½ for newsletter), side card, sheet ≤ 70% at 390. */
+.nv-popup-layer { z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-5); }
+.nv-popup { position: relative; display: flex; width: min(400px, 100%); border: var(--overlay-hairline); border-radius: var(--overlay-radius-dialog); background: var(--color-bg-elevated); color: var(--color-fg); box-shadow: var(--overlay-shadow); overflow: hidden; outline: none; opacity: 0; transform: translateY(8px); transition: opacity var(--overlay-dialog-in) var(--ease-standard), transform var(--overlay-dialog-in) var(--ease-standard); }
+.nv-overlay[data-open] .nv-popup, .nv-popup-side[data-open] .nv-popup { opacity: 1; transform: none; }
+.nv-popup[data-image] { width: min(640px, 100%); }
+.nv-popup[data-scheme='primary'] { background: var(--color-bg-inverse); color: var(--color-fg-inverse); border-color: transparent; }
+.nv-popup__grabber { display: none; }
+.nv-popup__media { flex: 0 0 52%; min-height: 300px; background: var(--color-media-bg); }
+.nv-popup__media img { width: 100%; height: 100%; object-fit: cover; }
+.nv-popup__content { position: relative; flex: 1; display: grid; gap: var(--space-3); align-content: center; padding: var(--space-6); padding-inline-end: var(--space-7); }
+.nv-popup__close { position: absolute; inset-block-start: var(--space-1); inset-inline-end: var(--space-1); width: 44px; height: 44px; color: inherit; }
+.nv-popup__title { font-size: 1.375rem; line-height: 1.2; font-weight: var(--weight-heading); padding-inline-end: var(--space-5); }
+.nv-popup__title:focus { outline: none; }
+.nv-popup__body { color: var(--color-fg-muted); font-size: 0.875rem; }
+.nv-popup__action .nv-newsletter-form { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-width: none; }
+.nv-popup__action .nv-newsletter-form > * { flex: 0 0 auto; }
+.nv-popup__dismiss { justify-self: center; min-height: var(--touch-target); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+/* Side card (desktop): a quiet, non-modal card at the bottom start. */
+.nv-popup-side { position: fixed; inset-block-end: var(--space-6); inset-inline-start: var(--space-6); z-index: var(--z-overlay); visibility: hidden; }
+.nv-popup-side[data-open] { visibility: visible; }
+.nv-popup[data-placement='side'] { width: 300px; box-shadow: var(--overlay-toast-shadow); }
+.nv-popup[data-placement='side'] .nv-popup__content { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); gap: var(--space-2); }
+.nv-popup[data-placement='side'] .nv-popup__title { font-size: 1rem; }
+.nv-popup[data-placement='side'] .nv-popup__action { justify-self: start; margin-block-start: var(--space-1); }
+@media (max-width: 639.98px) {
+  .nv-popup-layer { place-items: end stretch; padding: 0; }
+  .nv-popup, .nv-popup[data-image] { flex-direction: column; width: 100%; max-height: 70svh; border-radius: var(--overlay-radius-sheet) var(--overlay-radius-sheet) 0 0; transform: translateY(100%); transition-duration: var(--overlay-slide-in); }
+  .nv-popup__grabber { display: block; width: 36px; height: 4px; margin: var(--space-2) auto 0; border-radius: var(--radius-pill); background: var(--color-border); }
+  .nv-popup__content { overflow-y: auto; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
+  .nv-popup__close { inset-block-start: var(--space-2); }
+}
+@media (prefers-reduced-motion: reduce) { .nv-popup, .nv-popup[data-image] { transform: none !important; transition: opacity var(--overlay-dialog-in) linear; } }