create-tanqory-theme 0.0.0-stage → 0.2.3

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

@@ -0,0 +1,270 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+import { sx, useReferrals, useRewards } from '@tanqory/theme-kit'
+import type { RewardsReward, RewardsState, RewardsWay } from '@tanqory/theme-kit'
+import { Button } from '../base/Button'
+import { Tabs, type TabItem } from '../base/Tabs'
+import { formatMoney } from '../commerce/money'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt, type NovaStrings } from '../../styles/strings'
+import { Drawer } from './Drawer'
+import { ReferralPanel } from './ReferralPanel'
+import './RewardsLauncher.css'
+
+/**
+ * The rewards launcher (army #7749): a floating "Rewards" button that opens the program in a
+ * drawer (full screen at 390, focus trapped, Escape closes and focus returns to the button).
+ *
+ *   guest      the program, ways to earn, Join now / Sign in
+ *   signed in  Join now when not a member yet
+ *   member     balance, pending, tier and progress, rewards with Get a code, unused codes with
+ *              Copy and Apply to cart, ways to earn (done ones marked), View my rewards
+ *
+ * Renders nothing until the loyalty or referral state is known (browser only) and with both off; the
+ * Referral tab (army #7751) is the whole panel with loyalty off. `extraTabs` adds more tabs.
+ */
+export interface RewardsLauncherProps {
+  extraTabs?: readonly TabItem[]
+}
+
+export function RewardsLauncher({ extraTabs = [] }: RewardsLauncherProps): JSX.Element | null {
+  const { state } = useRewards()
+  const referral = useReferrals().state
+  const { strings } = useNova()
+  const [open, setOpen] = useState(false)
+  if (!state && !referral) return null
+  const tabs: TabItem[] = [
+    ...(state ? [{ id: 'rewards', label: strings.rewards, content: <RewardsPanel state={state} /> }] : []),
+    ...(referral ? [{ id: 'referral', label: strings.referral, content: <ReferralPanel state={referral} /> }] : []),
+    ...extraTabs,
+  ]
+  const title = state ? strings.rewards : strings.referral
+  return (
+    <>
+      <button type="button" className="nv-rewards-launcher" aria-label={state ? strings.openRewards : strings.openReferral} aria-haspopup="dialog" aria-expanded={open} onClick={() => setOpen(true)}>
+        <Icon name="gift" />
+        <span aria-hidden="true">{title}</span>
+      </button>
+      <Drawer open={open} onClose={() => setOpen(false)} title={title} className="nv-rewards" initialFocus="title">
+        {tabs.length > 1 ? <Tabs variant="segmented" label={title} items={tabs} /> : tabs[0].content}
+      </Drawer>
+    </>
+  )
+}
+
+function RewardsPanel({ state }: { state: RewardsState }): JSX.Element {
+  const { strings } = useNova()
+  const member = state.signedIn && state.member
+  return (
+    <div className="nv-rewards__panel">
+      {member ? (
+        <MemberView state={state} />
+      ) : (
+        <section className="nv-rewards__card">
+          <h3 className="nv-rewards__title">{state.program.name || strings.rewards}</h3>
+          <p>{strings.rewardsGuestIntro}</p>
+          {state.signedIn ? <JoinButton /> : (
+            <div className="nv-rewards__actions">
+              <Button href="/account/register">{strings.rewardsJoin}</Button>
+              <Button href="/account/login" variant="secondary">{strings.rewardsSignIn}</Button>
+            </div>
+          )}
+        </section>
+      )}
+      <Ways state={state} />
+      {member && (
+        <a className="nv-rewards__more" href="/account/rewards">{strings.rewardsViewAll}</a>
+      )}
+    </div>
+  )
+}
+
+function JoinButton(): JSX.Element {
+  const { join } = useRewards()
+  const { strings } = useNova()
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const onJoin = async () => {
+    setBusy(true)
+    setFailed(false)
+    const ok = await join()
+    setBusy(false)
+    setFailed(!ok)
+  }
+  return (
+    <div className="nv-rewards__actions">
+      <Button onClick={() => void onJoin()} loading={busy}>{strings.rewardsJoin}</Button>
+      {failed && <p role="alert">{strings.rewardsJoinFailed}</p>}
+    </div>
+  )
+}
+
+function MemberView({ state }: { state: RewardsState }): JSX.Element {
+  const { strings, locale } = useNova()
+  const { redeem } = useRewards()
+  const n = (v: number) => new Intl.NumberFormat(locale).format(v)
+  const [busy, setBusy] = useState<string | null>(null)
+  const [message, setMessage] = useState<{ tone: 'ok' | 'error'; text: string } | null>(null)
+  const onRedeem = async (r: RewardsReward) => {
+    setBusy(r.id)
+    setMessage(null)
+    const out = await redeem(r.id)
+    setBusy(null)
+    setMessage(out.ok ? { tone: 'ok', text: fmt(strings.rewardsCodeReady, { code: out.code }) } : { tone: 'error', text: out.error === 'insufficient' ? strings.rewardsRedeemInsufficient : strings.rewardsRedeemFailed })
+  }
+  const balance = state.balance ?? { available: 0, pending: 0, lifetimeEarned: 0 }
+  const rewards = state.rewards ?? []
+  const codes = state.codes ?? []
+  return (
+    <>
+      <section className="nv-rewards__card">
+        <p className="nv-rewards__big nv-tabular">{fmt(strings.rewardsPoints, { points: n(balance.available) })}</p>
+        {balance.pending > 0 && <p className="nv-rewards__meta">{fmt(strings.rewardsPending, { points: n(balance.pending) })}</p>}
+        <TierProgress state={state} />
+      </section>
+      <p className="nv-rewards__status" role="status">{message?.tone === 'ok' ? message.text : ''}</p>
+      {message?.tone === 'error' && <p className="nv-rewards__error" role="alert">{message.text}</p>}
+      {rewards.length > 0 && (
+        <Group title={strings.rewardsRedeemHeading}>
+          {rewards.map((r) => (
+            <li key={r.id} className="nv-rewards__row">
+              <span>
+                <strong>{r.name}</strong>
+                <span className="nv-rewards__meta">{fmt(strings.rewardsPoints, { points: n(r.pointsCost) })}</span>
+              </span>
+              {r.affordable ? (
+                <Button size="sm" variant="secondary" loading={busy === r.id} disabled={busy !== null && busy !== r.id} onClick={() => void onRedeem(r)}>
+                  {strings.rewardsGetCode}
+                </Button>
+              ) : (
+                <span className="nv-rewards__meta">{r.tierLocked ? strings.rewardsTierLocked : r.limitReached ? strings.rewardsLimitReached : fmt(strings.rewardsPointsNeeded, { points: n(r.pointsNeeded) })}</span>
+              )}
+            </li>
+          ))}
+        </Group>
+      )}
+      {codes.length > 0 && (
+        <Group title={strings.rewardsYourCodes}>
+          {codes.map((c) => (
+            <li key={c.code} className="nv-rewards__row nv-rewards__code">
+              <span>
+                <strong>{c.rewardName}</strong>
+                <code>{c.code}</code>
+              </span>
+              <span className="nv-rewards__actions">
+                <CopyButton code={c.code} />
+                <Button size="sm" href={`/discount/${encodeURIComponent(c.code)}?redirect=%2Fcart`}>{strings.rewardsApply}</Button>
+              </span>
+            </li>
+          ))}
+        </Group>
+      )}
+    </>
+  )
+}
+
+function TierProgress({ state }: { state: RewardsState }): JSX.Element | null {
+  const { strings, locale } = useNova()
+  const id = useId()
+  const tier = state.tier
+  if (!tier || (!tier.current && !tier.next)) return null
+  const { next, progress } = tier
+  const spend = tier.basis === 'SPEND' && tier.currency
+  const remaining = progress?.remaining
+  return (
+    <div className="nv-rewards__tier">
+      {tier.current && (
+        <p>
+          <span className="nv-rewards__meta">{strings.rewardsTier} </span>
+          <strong>{tier.current.name}</strong>
+        </p>
+      )}
+      {next && progress && remaining != null && (
+        <>
+          <div className="nv-rewards__bar" role="progressbar" aria-valuemin={0} aria-valuemax={next.threshold} aria-valuenow={progress.qualifying} aria-labelledby={id}>
+            <span className={sx({ width: `${Math.min(100, Math.round((progress.qualifying / Math.max(next.threshold, 1)) * 100))}%` })} />
+          </div>
+          <p className="nv-rewards__meta" id={id}>
+            {fmt(spend ? strings.rewardsNextTierSpend : strings.rewardsNextTier, {
+              remaining: spend ? formatMoney({ amount: remaining, currencyCode: tier.currency! }, locale) : new Intl.NumberFormat(locale).format(remaining),
+              tier: next.name,
+            })}
+          </p>
+        </>
+      )}
+    </div>
+  )
+}
+
+function Ways({ state }: { state: RewardsState }): JSX.Element | null {
+  const { strings, locale } = useNova()
+  if (!state.ways.length) return null
+  return (
+    <Group title={strings.rewardsWaysToEarn}>
+      {state.ways.map((w) => (
+        <li key={w.id} className="nv-rewards__row" data-done={w.completed ? '' : undefined}>
+          <span>
+            <strong>{w.name}</strong>
+            <span className="nv-rewards__meta">{wayPoints(w, state, strings, locale)}</span>
+          </span>
+          {w.completed && (
+            <span className="nv-rewards__done">
+              <Icon name="check" size="sm" />
+              {strings.rewardsDone}
+            </span>
+          )}
+        </li>
+      ))}
+    </Group>
+  )
+}
+
+/** "50 points", or for an order "10 points for every ฿100 spent" (the smallest round amount earning 10). */
+export function wayPoints(w: RewardsWay, state: RewardsState, strings: NovaStrings, locale: string): string {
+  const n = (v: number) => new Intl.NumberFormat(locale).format(v)
+  if (w.points !== null) return fmt(strings.rewardsPoints, { points: n(w.points) })
+  const [currency, rate] = Object.entries(state.program.earnRates)[0] ?? []
+  if (w.kind !== 'PLACE_ORDER' || !currency || !(Number(rate) > 0)) return ''
+  let amount = 1
+  while (Number(rate) * amount < 10 && amount < 1e6) amount *= 10
+  return fmt(strings.rewardsOrderRate, { points: n(Math.floor(Number(rate) * amount)), amount: formatMoney({ amount, currencyCode: currency }, locale) })
+}
+
+function Group({ title, children }: { title: string; children: ReactNode }): JSX.Element {
+  const id = useId()
+  return (
+    <section className="nv-rewards__group" aria-labelledby={id}>
+      <h3 className="nv-rewards__heading" id={id}>{title}</h3>
+      <ul className="nv-rewards__list" aria-labelledby={id}>
+        {children}
+      </ul>
+    </section>
+  )
+}
+
+function CopyButton({ code }: { code: string }): JSX.Element {
+  const { strings } = useNova()
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current)
+  }, [])
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      if (timer.current) clearTimeout(timer.current)
+      timer.current = setTimeout(() => setCopied(false), 2000)
+    } catch {
+      setCopied(false)
+    }
+  }
+  return (
+    <>
+      <Button size="sm" variant="ghost" aria-label={fmt(strings.rewardsCopyNamed, { code })} onClick={() => void onCopy()}>
+        {copied ? strings.rewardsCopied : strings.rewardsCopy}
+      </Button>
+      <span className="nv-visually-hidden" aria-live="polite">{copied ? strings.rewardsCopied : ''}</span>
+    </>
+  )
+}

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

@@ -0,0 +1,48 @@
+/* Nova 13 · 4 search — a top dialog 840 wide; full screen at 390. */
+.nv-search-modal-layer { z-index: var(--z-overlay); }
+.nv-search-modal { position: absolute; inset-block-start: var(--space-5); inset-inline: 0; margin-inline: auto; display: flex; flex-direction: column; width: min(840px, calc(100% - 2 * var(--space-5))); 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-overlay[data-open] .nv-search-modal { opacity: 1; transform: none; }
+.nv-search-modal__bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); }
+.nv-search-modal__field { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding-inline: var(--space-4); border: 1.5px solid var(--color-focus); border-radius: var(--input-radius); }
+.nv-search-modal__field input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 1rem; }
+.nv-search-modal__field input:focus { outline: none; }
+.nv-search-modal__field input::-webkit-search-cancel-button { display: none; }
+.nv-search-modal__text-btn { min-height: 32px; padding: 0 var(--space-1); border: 0; background: none; color: var(--color-fg-muted); font: inherit; font-size: var(--type-caption); cursor: pointer; }
+.nv-search-modal__cancel { min-height: var(--touch-target); padding: 0; border: 0; background: none; color: var(--color-fg); font: inherit; font-size: 0.875rem; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+.nv-search-modal__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-4); }
+.nv-search-modal__label { margin-block: var(--space-2); color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-search-modal__label-row { display: flex; align-items: center; justify-content: space-between; }
+.nv-search-modal__results { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 var(--space-6); }
+.nv-search-modal__results[data-stale] { opacity: 0.6; }
+.nv-search-modal__group[data-group='products'] { grid-row: span 2; }
+.nv-search-modal__row { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); color: var(--color-fg); font-size: 0.875rem; text-decoration: none; outline: 1.5px solid transparent; }
+.nv-search-modal__row[aria-selected='true'] { background: var(--color-bg-muted); outline-color: var(--color-focus); }
+.nv-search-modal__row--text { min-height: 40px; }
+.nv-search-modal__thumb { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-media-bg); }
+.nv-search-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
+.nv-search-modal__title { flex: 1; min-width: 0; }
+.nv-search-modal__title b { font-weight: var(--weight-strong, 600); }
+.nv-search-modal__price { flex: none; }
+.nv-search-modal__price[data-sale] { color: var(--color-sale); }
+.nv-search-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-block-start: var(--overlay-hairline); font-size: var(--type-caption); }
+.nv-search-modal__keys { color: var(--color-fg-muted); }
+.nv-search-modal__foot a { color: var(--color-fg); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-search-modal__start { display: grid; gap: var(--space-5); }
+.nv-search-modal__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
+.nv-search-modal__chips li { display: inline-flex; align-items: center; border: 1px solid var(--color-border-input); border-radius: var(--radius-pill); }
+.nv-search-modal__chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding-inline: var(--space-3) var(--space-1); border: 0; background: none; color: var(--color-fg); font: inherit; font-size: 0.875rem; cursor: pointer; }
+.nv-search-modal__chip-x { display: grid; place-items: center; width: 28px; height: 28px; margin-inline-end: 4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-fg-muted); cursor: pointer; }
+.nv-search-modal__browse { list-style: none; margin: 0; padding: 0; }
+.nv-search-modal__browse a { display: flex; align-items: center; min-height: 52px; border-block-end: 1px solid var(--color-border); color: var(--color-fg); font-size: 1rem; text-decoration: none; }
+.nv-search-modal__skeleton { display: grid; gap: var(--space-3); list-style: none; margin: var(--space-3) 0; padding: 0; }
+.nv-search-modal__skeleton li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
+.nv-search-modal__skeleton span { height: 44px; border-radius: var(--radius-sm); background: var(--color-bg-muted); }
+.nv-search-modal__skeleton span + span { height: 12px; width: 60%; }
+.nv-search-modal__none { display: grid; gap: var(--space-2); padding-block: var(--space-4); color: var(--color-fg-muted); font-size: 0.875rem; }
+.nv-search-modal__none-title { color: var(--color-fg); font-size: 1rem; font-weight: var(--weight-medium); }
+@media (max-width: 639.98px) {
+  .nv-search-modal { inset: 0; width: auto; max-height: none; border: 0; border-radius: 0; transform: none; }
+  .nv-search-modal__results { grid-template-columns: minmax(0, 1fr); }
+  .nv-search-modal__foot { display: none; }
+}
+@media (prefers-reduced-motion: reduce) { .nv-search-modal { transform: none !important; } }

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

@@ -0,0 +1,302 @@
+import { Fragment, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import type { NovaLink, Product } from '@tanqory/theme-kit'
+import { formatMoney, hasPriceRange } from '../commerce/money'
+import { RecoveryLinks } from '../navigation/RecoveryLinks'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { inertWhen, useDialog } from './use-dialog'
+import './SearchModal.css'
+
+export interface SearchSuggestions {
+  products: Product[]
+  collections: NovaLink[]
+  articles: NovaLink[]
+  /** All matches (the results page count). */
+  total: number
+}
+
+export interface SearchModalProps {
+  open: boolean
+  onClose: () => void
+  /** Called 150ms after typing pauses; the host fetches and passes results back. */
+  onQuery?: (query: string) => void
+  results?: SearchSuggestions | null
+  loading?: boolean
+  /** The results page (12G); Enter with no row, and "See all", go there. */
+  searchUrl?: string
+  /** The Browse menu shown before typing. */
+  browse?: readonly NovaLink[]
+  /** Merchant-chosen collections for no results. */
+  noResultsLinks?: readonly NovaLink[]
+  initialQuery?: string
+}
+
+const RECENT_KEY = 'nova:recent-searches'
+const RECENT_MAX = 5
+const DEBOUNCE = 150
+
+function readRecent(): string[] {
+  try {
+    return JSON.parse(sessionStorage.getItem(RECENT_KEY) ?? '[]') as string[]
+  } catch {
+    return []
+  }
+}
+function writeRecent(list: string[]) {
+  try {
+    sessionStorage.setItem(RECENT_KEY, JSON.stringify(list))
+  } catch {
+    /* storage blocked: recent searches simply don't persist */
+  }
+}
+
+/** The matched words in bold (rows show why they matched). */
+export function highlight(text: string, query: string): ReactNode {
+  const q = query.trim()
+  if (!q) return text
+  const words = q.split(/\s+/).filter(Boolean).map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  const parts = text.split(new RegExp(`(${words.join('|')})`, 'gi'))
+  return parts.map((p, i) => (i % 2 ? <b key={i}>{p}</b> : <Fragment key={i}>{p}</Fragment>))
+}
+
+/**
+ * Nova 13 · 4 search — commerce results with images and prices, not a
+ * command palette. Desktop: a top dialog 840 wide under the header; phone:
+ * full screen. A combobox + grouped listbox: ↑ ↓ move, Enter opens (no row →
+ * the results page), Esc clears then closes. Results update after a 150ms
+ * pause; previous results stay until new ones arrive. Recent searches are
+ * this session only (max 5, removable); popular searches and typo
+ * correction need platform data and are not shown.
+ */
+export function SearchModal({ open, onClose, onQuery, results, loading, searchUrl = '/search', browse = [], noResultsLinks = [], initialQuery = '' }: SearchModalProps): JSX.Element {
+  const { strings, locale } = useNova()
+  const panel = useRef<HTMLDivElement>(null)
+  const input = useRef<HTMLInputElement>(null)
+  const listId = useId()
+  const [query, setQuery] = useState(initialQuery)
+  const [active, setActive] = useState(-1)
+  const [recent, setRecent] = useState<string[]>([])
+  useDialog(open, onClose, panel, input)
+  useEffect(() => {
+    if (open) setRecent(readRecent())
+  }, [open])
+  useEffect(() => {
+    if (!onQuery) return
+    const t = window.setTimeout(() => onQuery(query.trim()), DEBOUNCE)
+    return () => window.clearTimeout(t)
+  }, [query, onQuery])
+
+  const q = query.trim()
+  const rows = useMemo(() => {
+    if (!q || !results) return [] as { id: string; href: string; group: 'products' | 'collections' | 'articles' }[]
+    return [
+      ...results.products.slice(0, 6).map((p) => ({ id: `${listId}-p-${p.id}`, href: p.url, group: 'products' as const })),
+      ...results.collections.slice(0, 4).map((c) => ({ id: `${listId}-c-${c.url}`, href: c.url, group: 'collections' as const })),
+      ...results.articles.slice(0, 4).map((a) => ({ id: `${listId}-a-${a.url}`, href: a.url, group: 'articles' as const })),
+    ]
+  }, [q, results, listId])
+  useEffect(() => setActive(-1), [results, q])
+
+  const resultsUrl = `${searchUrl}?q=${encodeURIComponent(q)}`
+  const remember = (term: string) => {
+    const next = [term, ...readRecent().filter((r) => r !== term)].slice(0, RECENT_MAX)
+    writeRecent(next)
+    setRecent(next)
+  }
+  const go = (href: string) => {
+    if (q) remember(q)
+    window.location.assign(href)
+  }
+  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown' && rows.length) {
+      e.preventDefault()
+      setActive((a) => (a + 1) % rows.length)
+    } else if (e.key === 'ArrowUp' && rows.length) {
+      e.preventDefault()
+      setActive((a) => (a <= 0 ? rows.length - 1 : a - 1))
+    } else if (e.key === 'Enter' && q) {
+      e.preventDefault()
+      go(active >= 0 ? rows[active].href : resultsUrl)
+    } else if (e.key === 'Escape' && query) {
+      // Esc clears first; a second Esc closes (useDialog).
+      e.stopPropagation()
+      e.nativeEvent.stopImmediatePropagation()
+      setQuery('')
+    }
+  }
+  const rowIndex = (id: string) => rows.findIndex((r) => r.id === id)
+  const option = (id: string, href: string, body: ReactNode, cls: string) => (
+    <a key={id} id={id} role="option" aria-selected={rows[active]?.id === id} href={href} tabIndex={-1} className={cls} onMouseEnter={() => setActive(rowIndex(id))} onClick={() => q && remember(q)}>
+      {body}
+    </a>
+  )
+
+  let body: ReactNode
+  if (!q) {
+    body = (
+      <div className="nv-search-modal__start">
+        {recent.length > 0 && (
+          <div className="nv-search-modal__recent">
+            <div className="nv-search-modal__label-row">
+              <p className="nv-search-modal__label">{strings.recentSearches}</p>
+              <button
+                type="button"
+                className="nv-search-modal__text-btn"
+                onClick={() => {
+                  writeRecent([])
+                  setRecent([])
+                }}
+              >
+                {strings.clear}
+              </button>
+            </div>
+            <ul className="nv-search-modal__chips">
+              {recent.map((r) => (
+                <li key={r}>
+                  <button type="button" className="nv-search-modal__chip" onClick={() => setQuery(r)}>
+                    <Icon name="clock" size="sm" />
+                    {r}
+                  </button>
+                  <button
+                    type="button"
+                    className="nv-search-modal__chip-x"
+                    aria-label={fmt(strings.removeRecent, { query: r })}
+                    onClick={() => {
+                      const next = recent.filter((x) => x !== r)
+                      writeRecent(next)
+                      setRecent(next)
+                    }}
+                  >
+                    <Icon name="close" size={12} />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        {browse.length > 0 && (
+          <nav aria-label={strings.browse}>
+            <p className="nv-search-modal__label">{strings.browse}</p>
+            <ul className="nv-search-modal__browse">
+              {browse.map((l) => (
+                <li key={l.url}>
+                  <a href={l.url}><bdi>{l.title}</bdi></a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </div>
+    )
+  } else if (!results) {
+    body = (
+      <ul className="nv-search-modal__skeleton" aria-hidden>
+        {[0, 1, 2].map((i) => (
+          <li key={i}>
+            <span />
+            <span />
+          </li>
+        ))}
+      </ul>
+    )
+  } else if (results.total === 0) {
+    body = (
+      <div className="nv-search-modal__none">
+        <p className="nv-search-modal__none-title">{fmt(strings.noResultsFor, { query: q })}</p>
+        <p>{strings.spellingTip}</p>
+        <RecoveryLinks links={noResultsLinks} label={strings.suggestedLinks} align="left" />
+      </div>
+    )
+  } else {
+    const groupLabel = { products: strings.products, collections: strings.collections, articles: strings.articles }
+    body = (
+      <div id={listId} role="listbox" aria-label={fmt(strings.searchResultsFor, { query: q })} className="nv-search-modal__results" data-stale={loading ? '' : undefined}>
+        {results.products.length > 0 && (
+          <div role="group" aria-label={groupLabel.products} className="nv-search-modal__group" data-group="products">
+            <p className="nv-search-modal__label" aria-hidden>
+              {groupLabel.products}
+            </p>
+            {results.products.slice(0, 6).map((p) => {
+              const price = formatMoney(p.priceRange.min, locale)
+              const sale = Boolean(p.compareAtPriceRange && p.compareAtPriceRange.min.amount > p.priceRange.min.amount)
+              return option(
+                `${listId}-p-${p.id}`,
+                p.url,
+                <>
+                  <span className="nv-search-modal__thumb">{p.featuredImage && <img src={p.featuredImage.src} alt="" width={p.featuredImage.width} height={p.featuredImage.height} loading="lazy" />}</span>
+                  <span className="nv-search-modal__title">{highlight(p.title, q)}</span>
+                  <span className="nv-search-modal__price nv-tabular" data-sale={sale ? '' : undefined}>
+                    {hasPriceRange(p) ? fmt(strings.priceFrom, { price }) : price}
+                  </span>
+                </>,
+                'nv-search-modal__row',
+              )
+            })}
+          </div>
+        )}
+        {(['collections', 'articles'] as const).map((g) =>
+          results[g].length ? (
+            <div key={g} role="group" aria-label={groupLabel[g]} className="nv-search-modal__group" data-group={g}>
+              <p className="nv-search-modal__label" aria-hidden>
+                {groupLabel[g]}
+              </p>
+              {results[g].slice(0, 4).map((l) => option(`${listId}-${g[0]}-${l.url}`, l.url, <span className="nv-search-modal__title">{highlight(l.title, q)}</span>, 'nv-search-modal__row nv-search-modal__row--text'))}
+            </div>
+          ) : null,
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="nv-overlay nv-search-modal-layer" data-open={open ? '' : undefined} {...inertWhen(!open)} aria-hidden={open ? undefined : true}>
+      <div className="nv-overlay__scrim" onClick={onClose} aria-hidden />
+      <div ref={panel} className="nv-search-modal" role="dialog" aria-modal="true" aria-label={strings.search} tabIndex={-1}>
+        <div className="nv-search-modal__bar">
+          <div className="nv-search-modal__field">
+            <Icon name="search" size="sm" />
+            <input
+              ref={input}
+              type="search"
+              role="combobox"
+              aria-expanded={rows.length > 0}
+              aria-controls={listId}
+              aria-autocomplete="list"
+              aria-activedescendant={active >= 0 ? rows[active]?.id : undefined}
+              aria-label={strings.search}
+              placeholder={strings.searchEverything}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={onKey}
+              autoComplete="off"
+              enterKeyHint="search"
+            />
+            {query && (
+              <button type="button" className="nv-search-modal__text-btn" onClick={() => { setQuery(''); input.current?.focus() }}>
+                {strings.clear}
+              </button>
+            )}
+          </div>
+          <button type="button" className="nv-search-modal__cancel" onClick={onClose}>
+            {strings.cancel}
+          </button>
+        </div>
+        <p className="nv-visually-hidden" aria-live="polite">
+          {q && results && !loading ? fmt(strings.resultsCount, { count: results.total }) : ''}
+        </p>
+        <div className="nv-search-modal__body">{body}</div>
+        {q && results && results.total > 0 && (
+          <div className="nv-search-modal__foot">
+            <p className="nv-search-modal__keys" aria-hidden>
+              {strings.searchKeysHint}
+            </p>
+            <a href={resultsUrl} onClick={() => remember(q)}>
+              {fmt(strings.seeAllResults, { count: results.total })}
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+.nv-sheet-layer { z-index: var(--z-modal); }
+.nv-sheet { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; max-height: 90svh; border: var(--overlay-hairline); border-block-end: 0; border-radius: var(--overlay-radius-sheet) var(--overlay-radius-sheet) 0 0; background: var(--color-bg-elevated); color: var(--color-fg); box-shadow: var(--overlay-shadow); transform: translateY(100%); transition: transform var(--duration-base) var(--ease-exit); outline: none; }
+.nv-sheet[data-max='70'] { max-height: 70svh; }
+.nv-overlay[data-open] .nv-sheet { transform: none; transition: transform var(--overlay-slide-in) var(--ease-standard); }
+.nv-sheet__grabber { width: 36px; height: 4px; margin: var(--space-2) auto 0; border-radius: var(--radius-pill); background: var(--color-border); }
+.nv-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-1) 0 var(--space-4); border-block-end: var(--overlay-hairline); }
+.nv-sheet__title:focus { outline: none; }
+.nv-sheet__title { font-size: 1.125rem; font-weight: var(--weight-medium); letter-spacing: 0; }
+.nv-sheet__close { width: 44px; height: 44px; }
+.nv-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
+.nv-sheet__foot { display: flex; flex-direction: column-reverse; gap: var(--space-2); padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); border-block-start: var(--overlay-hairline); }
+.nv-sheet__foot > * { width: 100%; }
+@media (prefers-reduced-motion: reduce) {
+  .nv-sheet, .nv-overlay[data-open] .nv-sheet { transform: none; opacity: 0; transition: opacity var(--overlay-dialog-in) linear; }
+  .nv-overlay[data-open] .nv-sheet { opacity: 1; }
+}