create-nymbal-app 0.4.0 → 0.5.0

package/scaffold/templates/nextjs/components/client/ProductInteractive.tsx

@@ -2,24 +2,37 @@
 
 import { useRef, useState } from 'react'
 import type { DenormalisedProduct } from '@nymbalhq/sdk'
-import { STOCK_LABELS, stockLevel } from '@nymbalhq/types'
-import { useProduct, VariantSelector, AddToCart, QuantitySelector } from '@nymbalhq/react'
-import { formatPrice } from '@/lib/format'
+import {
+  useProduct,
+  VariantSelector,
+  AddToCart,
+  ProductPrice,
+  QuantitySelector,
+  StockBadge,
+} from '@nymbalhq/react'
 import styles from '@/styles/pages/pdp.module.css'
 
 interface ProductInteractiveProps {
   product: DenormalisedProduct
+  /** The server's render of each element, for the product's first variant (app/product/[slug]/page.tsx). */
+  serverHtml?: {
+    price: string
+    stock: string
+    variantSelector: string
+    quantity: string
+    addToCart: string
+  }
 }
 
-export function ProductInteractive({ product }: ProductInteractiveProps) {
+export function ProductInteractive({ product, serverHtml }: ProductInteractiveProps) {
   const { selectedVariant } = useProduct(product.slug)
 
   const variant = selectedVariant ?? product.variants?.[0]
-  const price = variant?.priceMinor ?? product.priceMinor ?? 0
-  const currency = product.currency ?? 'GBP'
   // A product with no variants has nothing to sell, so it reads as out of stock.
   const stock = variant?.stock ?? 0
-  const level = stockLevel(stock)
+  // The price and the badge are the server's first variant until the store settles on this product; they follow it
+  // themselves, so a soft navigation from another product never shows that product's price here.
+  const first = product.variants?.[0]
 
   // The quantity belongs to the variant it was chosen for, so a variant change starts again at 1.
   const [chosen, setChosen] = useState<{ variantId: string | undefined; qty: number }>({
@@ -40,18 +53,18 @@ export function ProductInteractive({ product }: ProductInteractiveProps) {
         {product.name}
       </h1>
 
-      <div className={styles.price} data-testid="product-price">
-        {formatPrice(price, currency)}
-      </div>
+      <ProductPrice
+        productId={product.id}
+        priceMinor={first?.priceMinor ?? product.priceMinor ?? 0}
+        currency={product.currency ?? 'GBP'}
+        serverHtml={serverHtml?.price}
+      />
 
-      <div className={styles.stockBadge} data-testid="stock-badge" data-level={level}>
-        <span className={styles.stockDot} aria-hidden="true" />
-        {STOCK_LABELS[level]}
-      </div>
+      <StockBadge productId={product.id} stock={first?.stock ?? 0} serverHtml={serverHtml?.stock} />
 
       {hasVariantChoice && (
         <div className={styles.variantSection}>
-          <VariantSelector />
+          <VariantSelector product={product} serverHtml={serverHtml?.variantSelector} />
         </div>
       )}
 
@@ -62,6 +75,7 @@ export function ProductInteractive({ product }: ProductInteractiveProps) {
             value={1}
             min={1}
             max={99}
+            serverHtml={serverHtml?.quantity}
             onQuantityChange={(e) => {
               // A typed quantity changes on blur, and the press on Add is what blurs it: the wrapper's effect lands
               // after a fast click has already read `qty`, so the element gets it here, in the same event.
@@ -75,6 +89,7 @@ export function ProductInteractive({ product }: ProductInteractiveProps) {
           variantId={variant?.id ?? product.id}
           qty={qty}
           disabled={stock <= 0}
+          serverHtml={serverHtml?.addToCart}
         />
       </div>
     </div>

package/scaffold/templates/nextjs/components/client/elements.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+// The generated wrappers the server components render with their server HTML (`renderNymbal`): each defines its
+// element and keeps its attributes in the browser, so it is a client module.
+export {
+  Breadcrumb,
+  CategoryNav,
+  ImageGallery,
+  OrderSummary,
+  ProductGrid,
+  ReviewForm,
+  ReviewList,
+  SiteFooter,
+  SiteHeader,
+} from '@nymbalhq/react'

package/scaffold/templates/nextjs/components/server/Header.tsx

@@ -1,107 +1,38 @@
-import Link from 'next/link'
-import { SearchBarWrapper } from '@/components/client/SearchBarWrapper'
-import { MiniCartWrapper } from '@/components/client/MiniCartWrapper'
-import { fetchCapabilities } from '@/lib/api'
-import styles from './Header.module.css'
+import { headers } from 'next/headers'
+import { SiteHeader } from '@/components/client/elements'
+import { fetchCart } from '@/lib/api'
+import { HEADER } from '@/lib/chrome'
+import { canSearch, siteHeader } from '@/lib/header'
+import { renderNymbal } from '@/lib/render'
 
-const NAV_LINKS = [
-  { href: '/products', label: 'Shop' },
-  { href: '/products?category=new', label: 'New Arrivals' },
-  { href: '/products?category=sale', label: 'Sale' },
-]
-
-export async function Header() {
-  const capabilities = await fetchCapabilities()
-  const canSearch = capabilities?.search.capabilities.includes('search') ?? false
+function HeaderElement({ header }: { header: ReturnType<typeof siteHeader> }) {
+  const serverHtml = renderNymbal('nymbal-site-header', header.attributes, header.children).__html
   return (
-    <header className={styles.header} data-testid="site-header">
-      <div className={`container ${styles.inner}`}>
-        <Link href="/" className={styles.logo}>
-          Nymbal
-        </Link>
-
-        <nav className={styles.nav} aria-label="Main navigation">
-          <ul className={styles.navList}>
-            {NAV_LINKS.map((link) => (
-              <li key={link.href}>
-                <Link href={link.href} className={styles.navLink}>
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
-
-        <div className={styles.actions}>
-          {canSearch && (
-            <div className={styles.search}>
-              <SearchBarWrapper />
-            </div>
-          )}
-          <Link href="/account" className={styles.iconLink} aria-label="Account">
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-              <circle cx="12" cy="7" r="4" />
-            </svg>
-          </Link>
-          <MiniCartWrapper />
-        </div>
+    <SiteHeader
+      links={HEADER.links}
+      logo={HEADER.logo}
+      accountHref={HEADER.accountHref}
+      serverHtml={serverHtml}
+    />
+  )
+}
 
-        <input
-          type="checkbox"
-          id="mobile-menu-toggle"
-          className={styles.menuCheckbox}
-          aria-hidden="true"
-        />
-        <label
-          htmlFor="mobile-menu-toggle"
-          className={styles.menuButton}
-          aria-label="Toggle menu"
-        >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <line x1="3" y1="6" x2="21" y2="6" />
-            <line x1="3" y1="12" x2="21" y2="12" />
-            <line x1="3" y1="18" x2="21" y2="18" />
-          </svg>
-        </label>
+/**
+ * The header of a page. `shopper` reads the request's cart cookie, so the count is in the HTML with JavaScript off and
+ * the page renders per request; without it the page may be cached for every shopper, and the mini-cart fills its count
+ * in the browser.
+ */
+export async function Header({ shopper = false }: { shopper?: boolean }) {
+  const cookie = shopper ? (await headers()).get('cookie') : null
+  const [search, cart] = await Promise.all([canSearch(), shopper ? fetchCart(cookie) : null])
+  return <HeaderElement header={siteHeader(search, cart?.itemCount)} />
+}
 
-        <nav className={styles.mobileNav} aria-label="Mobile navigation">
-          <ul className={styles.mobileNavList}>
-            {NAV_LINKS.map((link) => (
-              <li key={link.href}>
-                <Link href={link.href} className={styles.mobileNavLink}>
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-            <li>
-              <Link href="/account" className={styles.mobileNavLink}>
-                Account
-              </Link>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-  )
+/**
+ * The header with no search bar and no count, for the root 404: Next renders that 404 into every page under the root
+ * layout and at build, so it can neither read the request (a cached page would fail) nor call the API (a build with
+ * the API down would fail).
+ */
+export function PlainHeader() {
+  return <HeaderElement header={siteHeader(false)} />
 }

package/scaffold/templates/nextjs/components/server/NotFoundView.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link'
+import styles from '@/styles/pages/error.module.css'
+
+/** The 404's message and its ways back, under whichever header the 404 has. */
+export function NotFoundView() {
+  return (
+    <div className={styles.page}>
+      <div className={styles.wrapper}>
+        <div className={`${styles.icon} ${styles.notFoundIcon}`}>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </div>
+        <p className={styles.statusCode}>404</p>
+        <h1 className={styles.title}>Page Not Found</h1>
+        <p className={styles.message}>
+          The page you are looking for does not exist or may have been moved.
+        </p>
+        <div className={styles.actions}>
+          <Link href="/" className={styles.homeLink}>
+            Go Home
+          </Link>
+          <Link href="/products" className={styles.retryButton}>
+            Browse Products
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/server/SkipNav.tsx

@@ -1,7 +1,11 @@
+// In a landmark of its own: the header's links are in its shadow root, where a checker cannot tell the skip link
+// comes before them, so it would count it as content outside every landmark.
 export function SkipNav() {
   return (
-    <a href="#main" className="skip-nav">
-      Skip to content
-    </a>
+    <nav aria-label="Skip link">
+      <a href="#main" className="skip-nav">
+        Skip to content
+      </a>
+    </nav>
   )
 }

package/scaffold/templates/nextjs/elements/index.ts

@@ -0,0 +1,12 @@
+// This store's own elements. Everything here runs before any Nymbal element is defined (components/client/
+// NymbalSetup.tsx imports it first), and Nymbal leaves alone any tag that is already defined, so an element defined
+// here under a Nymbal tag replaces Nymbal's. The server renders Nymbal's elements too, so a replacement is also named
+// in `serverElements`, and the server renders it under the tag (lib/render.ts). The module is evaluated on the server
+// as well, so define elements only in the browser, and import @nymbalhq/web-components/hydrate-support before lit,
+// so the element takes over what the server rendered:
+//
+//   import '@nymbalhq/web-components/hydrate-support'
+//   import { MyMiniCart } from './my-mini-cart'
+//   if (typeof window !== 'undefined') customElements.define('nymbal-mini-cart', MyMiniCart)
+//   export const serverElements = { 'nymbal-mini-cart': MyMiniCart }
+export const serverElements = {}

package/scaffold/templates/nextjs/lib/api.ts

@@ -1,10 +1,56 @@
+import { cache } from 'react'
 import { unstable_rethrow } from 'next/navigation'
-import type { DenormalisedProduct, ProductListResult, ReviewsListResult } from '@nymbalhq/sdk'
+import type {
+  DenormalisedProduct,
+  ProductListResult,
+  ProductSearchResult,
+  ReviewsListResult,
+} from '@nymbalhq/sdk'
 import { DEFAULT_PRODUCT_SORT, PRODUCT_SORT_KEYS } from '@nymbalhq/types'
-import type { Category, Order, ProductSortKey, StoreCapabilities } from '@nymbalhq/types'
+import type { Cart, Category, Order, ProductSortKey, StoreCapabilities } from '@nymbalhq/types'
 
 const API_URL = process.env.NYMBAL_API_URL ?? 'http://localhost:3001'
 
+/**
+ * Seconds a catalog read stays in Next's data cache: each is at least the TTL of the longest route that reads it, since
+ * a route's TTL is the smallest of its segment's and its fetches'. NYMBAL_CATALOG_REVALIDATE_S replaces every one.
+ */
+const CATALOG_REVALIDATE_S = {
+  capabilities: 3600,
+  categories: 21600,
+  product: 300,
+  products: 300,
+  reviews: 60,
+} as const
+
+function revalidateOf(read: keyof typeof CATALOG_REVALIDATE_S, seconds?: number): number {
+  const override = Number(process.env.NYMBAL_CATALOG_REVALIDATE_S)
+  if (Number.isInteger(override) && override > 0) return override
+  return seconds ?? CATALOG_REVALIDATE_S[read]
+}
+
+/**
+ * A catalog read through Next's data cache. It resolves a 200 or a 404 (an answer about the data, which the caller
+ * reads); a network error, a 5xx or any other refusal (a rate limit's 429) rejects, so a failed first render is an
+ * error Next does not cache and a failed regeneration keeps the last good page, where an empty value would be cached
+ * for every shopper. `next dev` caches no page but still keeps fetches, so there the read is fresh and a catalog edit
+ * shows at once.
+ */
+async function catalogFetch(
+  url: string,
+  read: keyof typeof CATALOG_REVALIDATE_S,
+  seconds?: number,
+): Promise<Response> {
+  const res = await fetch(
+    url,
+    process.env.NODE_ENV === 'development'
+      ? { cache: 'no-store' }
+      : { next: { revalidate: revalidateOf(read, seconds) } },
+  )
+  if (!res.ok && res.status !== 404) throw new Error(`[api] GET ${url} answered ${res.status}`)
+  return res
+}
+
 export async function fetchProducts(params?: {
   limit?: number
   cursor?: string
@@ -17,30 +63,18 @@ export async function fetchProducts(params?: {
   if (params?.category) url.searchParams.set('category', params.category)
   if (params?.sort) url.searchParams.set('sort', params.sort)
 
-  try {
-    const res = await fetch(url.toString(), { cache: 'no-store' })
-    if (!res.ok) return { items: [], nextCursor: null }
-    const envelope = (await res.json()) as { data: ProductListResult }
-    return envelope.data ?? { items: [], nextCursor: null }
-  } catch (err) {
-    console.error('[api] fetchProducts failed', err)
-    return { items: [], nextCursor: null }
-  }
+  const res = await catalogFetch(url.toString(), 'products')
+  if (!res.ok) return { items: [], nextCursor: null }
+  const envelope = (await res.json()) as { data: ProductListResult }
+  return envelope.data ?? { items: [], nextCursor: null }
 }
 
-/** What the store can do, which decides what the page renders; null when the API did not answer. */
+/** What the store can do, which decides what the page renders; null when the API has no capabilities to report. */
 export async function fetchCapabilities(): Promise<StoreCapabilities | null> {
-  try {
-    const res = await fetch(`${API_URL}/api/capabilities`, { cache: 'no-store' })
-    if (!res.ok) return null
-    const envelope = (await res.json()) as { data: StoreCapabilities }
-    return envelope.data ?? null
-  } catch (err) {
-    // Next signals a request-time render by throwing from fetch at build; that must reach Next, not become null.
-    unstable_rethrow(err)
-    console.error('[api] fetchCapabilities failed', err)
-    return null
-  }
+  const res = await catalogFetch(`${API_URL}/api/capabilities`, 'capabilities')
+  if (!res.ok) return null
+  const envelope = (await res.json()) as { data: StoreCapabilities }
+  return envelope.data ?? null
 }
 
 /** The sort a listing URL asks for, among the store's keys; a missing or unknown `?sort=` is the store's default. */
@@ -53,57 +87,119 @@ export function sortFromSearchParams(
   return keys.find((key) => key === sort) ?? catalog?.defaultSort ?? DEFAULT_PRODUCT_SORT
 }
 
-export async function fetchProduct(slug: string): Promise<DenormalisedProduct | null> {
+/**
+ * The product, or null when the API has none by that slug (a 404, the only answer that is null). `revalidateS` is the
+ * caller's route TTL when it is shorter than the default: callers share one data-cache entry, and Next judges its
+ * staleness by each caller's own seconds, so the PDP's 60 s regeneration reads stock no older than 60 s.
+ */
+export async function fetchProduct(
+  slug: string,
+  revalidateS?: number,
+): Promise<DenormalisedProduct | null> {
+  const url = `${API_URL}/api/products/${encodeURIComponent(slug)}`
+  const res = await catalogFetch(url, 'product', revalidateS)
+  if (res.status === 404) return null
+  const envelope = (await res.json()) as { data: DenormalisedProduct }
+  return envelope.data ?? null
+}
+
+/** The store's categories as the API lists them; never a list of its own, which a cached page would then show. */
+export async function fetchCategories(): Promise<Category[]> {
+  const url = `${API_URL}/api/categories`
+  const res = await catalogFetch(url, 'categories')
+  if (!res.ok) throw new Error(`[api] GET ${url} answered ${res.status}`)
+  const envelope = (await res.json()) as { data: Category[] }
+  return envelope.data
+}
+
+export async function fetchOrder(orderNumber: string): Promise<Order | null> {
   try {
-    const res = await fetch(`${API_URL}/api/products/${encodeURIComponent(slug)}`, { cache: 'no-store' })
+    const res = await fetch(`${API_URL}/api/orders/${encodeURIComponent(orderNumber)}`, {
+      cache: 'no-store',
+    })
     if (!res.ok) return null
-    const envelope = (await res.json()) as { data: DenormalisedProduct }
+    const envelope = (await res.json()) as { data: Order }
     return envelope.data ?? null
   } catch (err) {
-    console.error('[api] fetchProduct failed', err)
+    unstable_rethrow(err)
+    console.error('[api] fetchOrder failed', err)
     return null
   }
 }
 
-const SEED_CATEGORIES: Category[] = [
-  { id: 'cat_apparel', parentId: null, name: 'Apparel', slug: 'apparel', description: 'Clothing and accessories', position: 0, createdAt: '2024-01-01T00:00:00Z' },
-  { id: 'cat_home', parentId: null, name: 'Home', slug: 'home', description: 'Home goods and decor', position: 1, createdAt: '2024-01-01T00:00:00Z' },
-  { id: 'cat_electronics', parentId: null, name: 'Electronics', slug: 'electronics', description: 'Gadgets and devices', position: 2, createdAt: '2024-01-01T00:00:00Z' },
-  { id: 'cat_books', parentId: null, name: 'Books', slug: 'books', description: 'Books and reading', position: 3, createdAt: '2024-01-01T00:00:00Z' },
-]
+export async function fetchReviews(productId: string): Promise<ReviewsListResult> {
+  const res = await catalogFetch(
+    `${API_URL}/api/products/${encodeURIComponent(productId)}/reviews`,
+    'reviews',
+  )
+  if (!res.ok) return { items: [], nextCursor: null }
+  const envelope = (await res.json()) as { data: ReviewsListResult }
+  return envelope.data ?? { items: [], nextCursor: null }
+}
 
-export async function fetchCategories(): Promise<Category[]> {
-  try {
-    const res = await fetch(`${API_URL}/api/categories`, { cache: 'no-store' })
-    if (!res.ok) return SEED_CATEGORIES
-    const envelope = (await res.json()) as { data: Category[] }
-    return envelope.data ?? SEED_CATEGORIES
-  } catch (err) {
-    console.error('[api] fetchCategories failed', err)
-    return SEED_CATEGORIES
+/** The cart the cart elements take as their `cart` attribute: its lines and sums, never the cart token. */
+export interface CartProjection {
+  items: Cart['items']
+  subtotalMinor: number
+  currency: string
+  itemCount: number
+}
+
+const CART_COOKIE = 'nymbal.cart'
+
+/** The `nymbal.cart` value in a request's Cookie header, or null. */
+function cartToken(cookie: string | null): string | null {
+  for (const pair of (cookie ?? '').split(';')) {
+    const [name, ...value] = pair.trim().split('=')
+    if (name === CART_COOKIE && value.length > 0) return value.join('=')
   }
+  return null
 }
 
-export async function fetchOrder(orderNumber: string): Promise<Order | null> {
+/**
+ * The shopper's cart, read with the request's `nymbal.cart` cookie, as the projection the elements take; once per
+ * request, however many server components ask. Null without the cookie: `GET /api/cart` with none would make a cart
+ * the page could not keep, so the element renders its shell and the browser fills it. The cookie reaches this server
+ * when the store and the API share a host or a proxy.
+ */
+export const fetchCart = cache(async (cookie: string | null): Promise<CartProjection | null> => {
+  const token = cartToken(cookie)
+  if (token === null) return null
   try {
-    const res = await fetch(`${API_URL}/api/orders/${encodeURIComponent(orderNumber)}`, { cache: 'no-store' })
+    const res = await fetch(`${API_URL}/api/cart`, {
+      cache: 'no-store',
+      headers: { Cookie: `${CART_COOKIE}=${token}` },
+    })
     if (!res.ok) return null
-    const envelope = (await res.json()) as { data: Order }
-    return envelope.data ?? null
+    const { items, subtotalMinor, currency } = ((await res.json()) as { data: Cart }).data
+    return {
+      items,
+      subtotalMinor,
+      currency,
+      itemCount: items.reduce((n, item) => n + item.qty, 0),
+    }
   } catch (err) {
-    console.error('[api] fetchOrder failed', err)
+    unstable_rethrow(err)
+    console.error('[api] fetchCart failed', err)
     return null
   }
-}
+})
 
-export async function fetchReviews(productId: string): Promise<ReviewsListResult> {
+/** The search the search page shows for `q` (and its category), as the search store would hold it. */
+export async function fetchSearch(
+  q: string,
+  category: string | null,
+): Promise<ProductSearchResult | null> {
+  const url = new URL('/api/products/search', API_URL)
+  url.searchParams.set('q', q)
+  if (category) url.searchParams.set('category', category)
   try {
-    const res = await fetch(`${API_URL}/api/products/${encodeURIComponent(productId)}/reviews`, { cache: 'no-store' })
-    if (!res.ok) return { items: [], nextCursor: null }
-    const envelope = (await res.json()) as { data: ReviewsListResult }
-    return envelope.data ?? { items: [], nextCursor: null }
+    const res = await fetch(url.toString(), { cache: 'no-store' })
+    if (!res.ok) return null
+    return ((await res.json()) as { data: ProductSearchResult }).data ?? null
   } catch (err) {
-    console.error('[api] fetchReviews failed', err)
-    return { items: [], nextCursor: null }
+    unstable_rethrow(err)
+    console.error('[api] fetchSearch failed', err)
+    return null
   }
 }

package/scaffold/templates/nextjs/lib/chrome.ts

@@ -0,0 +1,40 @@
+// The store's header and footer, rendered by nymbal-site-header and nymbal-site-footer: edit the links here.
+
+export const HEADER = {
+  logo: 'Nymbal',
+  accountHref: '/account',
+  links: [
+    { href: '/products', label: 'Shop' },
+    { href: '/products?category=new', label: 'New Arrivals' },
+    { href: '/products?category=sale', label: 'Sale' },
+  ],
+}
+
+export const FOOTER_COLUMNS = [
+  {
+    heading: 'Shop',
+    links: [
+      { href: '/products', label: 'All Products' },
+      { href: '/products?category=new', label: 'New Arrivals' },
+      { href: '/products?category=sale', label: 'Sale' },
+    ],
+  },
+  {
+    heading: 'Account',
+    links: [
+      { href: '/account', label: 'My Account' },
+      { href: '/account/orders', label: 'Order History' },
+      { href: '/account/login', label: 'Sign In' },
+      { href: '/account/register', label: 'Create Account' },
+    ],
+  },
+  {
+    heading: 'About',
+    links: [
+      { href: '/about', label: 'About Us' },
+      { href: '/contact', label: 'Contact' },
+      { href: '/shipping', label: 'Shipping & Returns' },
+      { href: '/privacy', label: 'Privacy Policy' },
+    ],
+  },
+]

package/scaffold/templates/nextjs/lib/fragments.ts

@@ -0,0 +1,16 @@
+// The fragment routes answer one element as the server renders it, the same as the pages carry, for a CDN to cache
+// and an edge to assemble. Next sets each 200's Cache-Control from the route's TTL; a fragment reads no request, so it
+// is the same for every shopper.
+
+/** A fragment's HTML. It has no <meta charset>, so the charset is in the header. */
+export function fragment(html: string): Response {
+  return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8' } })
+}
+
+/** No fragment by that name: Next may hold it for the route's TTL, and `no-store` keeps a CDN from storing it. */
+export function noFragment(): Response {
+  return new Response('Not found', {
+    status: 404,
+    headers: { 'Content-Type': 'text/plain; charset=utf-8', 'Cache-Control': 'no-store' },
+  })
+}