@forgecart/cli 2.202608121449.0 → 2.202608160103.0

package/templates/storefront/src/app/products/page.tsx

@@ -1,27 +1,70 @@
+import { connection } from 'next/server';
+import { Suspense } from 'react';
+
 import { ProductCard } from '../../components/ProductCard';
 import { getProducts } from '../../lib/forgecart';
 
-export const dynamic = 'force-dynamic';
+// PROGRESSIVE PRE-RENDERING: static shell; the data sections below are
+// per-request holes streamed inside their Suspense boundaries
+// (cacheComponents — see next.config.js).
+
+/**
+ * Catalog — the browse grid. The header carries the count as orientation
+ * (Blueprint listing guidance: state scope up front); cards do the visual
+ * lifting, the grid stays quiet.
+ */
+export default function ProductsPage() {
+  return (
+    <div className="space-y-8">
+      <Suspense fallback={<CatalogSkeleton />}>
+        <Catalog />
+      </Suspense>
+    </div>
+  );
+}
 
-export default async function ProductsPage() {
+async function Catalog() {
+  // Request-time hole (cacheComponents): the build keeps the fallback shell.
+  await connection();
   const { items, totalItems } = await getProducts({ take: 24 });
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-baseline justify-between">
-        <h1 className="text-2xl font-bold tracking-tight text-gray-900">Products</h1>
-        <span className="text-sm text-gray-500">{totalItems} items</span>
-      </div>
+    <>
+      <header className="flex flex-wrap items-baseline justify-between gap-3 border-b border-base-300 pb-6">
+        <h1 className="text-3xl font-bold tracking-tight">All products</h1>
+        <span className="text-sm text-base-content/60">
+          {totalItems} {totalItems === 1 ? 'item' : 'items'}
+        </span>
+      </header>
 
       {items.length === 0 ? (
-        <p className="text-gray-500">No products yet. Add some in your dashboard.</p>
+        <p className="text-base-content/60">
+          No products yet — add your first product in the dashboard and it appears here.
+        </p>
       ) : (
-        <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 lg:grid-cols-4">
           {items.map((product) => (
             <ProductCard key={product.id} product={product} />
           ))}
         </div>
       )}
+    </>
+  );
+}
+
+function CatalogSkeleton() {
+  return (
+    <div aria-busy="true">
+      <header className="flex items-baseline justify-between gap-3 border-b border-base-300 pb-6">
+        <h1 className="text-3xl font-bold tracking-tight">All products</h1>
+        <div className="skeleton h-4 w-16"></div>
+      </header>
+      <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 lg:grid-cols-4">
+        <div className="skeleton aspect-square w-full"></div>
+        <div className="skeleton aspect-square w-full"></div>
+        <div className="skeleton aspect-square w-full"></div>
+        <div className="skeleton aspect-square w-full"></div>
+      </div>
     </div>
   );
 }

package/templates/storefront/src/components/CartView.tsx

@@ -1,18 +1,16 @@
 'use client';
 
 import Link from 'next/link';
+import { useState } from 'react';
 
 import { useCart } from '../lib/cart-context';
-import {
-  formatPrice,
-  getPlanCadenceLabel,
-  getPlanSavingsLabel,
-  type SellingPlan,
-  type SellingPlanGroup,
-} from '../lib/forgecart';
+import type { SellingPlan, SellingPlanGroup } from '../lib/forgecart';
+import { formatPrice, getPlanCadenceLabel, getPlanSavingsLabel } from '../lib/format';
 
 /**
- * The interactive cart, rendered off the live order from `useCart()`.
+ * The interactive cart, rendered off the live order from `useCart()` —
+ * Blueprint `pages/checkout-flow` cart shape: line items on the left,
+ * a sticky order-summary rail (coupon, totals, checkout) on the right.
  *
  * `channelGroups` are the channel-wide subscription selling plans, fetched
  * server-side by the cart route and passed in (the shop client is server-only,
@@ -23,19 +21,45 @@ import {
  * page) get a small "Subscription" label.
  */
 export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[] }) {
-  const { cart, itemCount, subtotal, setQuantity, remove, setSellingPlan, pending } = useCart();
+  const {
+    cart,
+    itemCount,
+    subtotal,
+    hydrated,
+    setQuantity,
+    remove,
+    setSellingPlan,
+    applyCoupon,
+    removeCoupon,
+    pending,
+    error,
+    clearError,
+  } = useCart();
+  const [couponInput, setCouponInput] = useState('');
   const lines = cart?.lines ?? [];
 
+  // The cart hydrates over the shopper's websocket after mount (PPR shell) —
+  // a skeleton, never a false "empty cart" flash.
+  if (!hydrated) {
+    return (
+      <div className="space-y-8" aria-busy="true" aria-label="Loading your cart">
+        <h1 className="text-3xl font-bold tracking-tight">Your cart</h1>
+        <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
+          <div className="skeleton h-64 w-full"></div>
+          <div className="skeleton h-80 w-full"></div>
+        </div>
+      </div>
+    );
+  }
+
   if (itemCount === 0) {
     return (
-      <div className="space-y-4">
-        <h1 className="text-2xl font-bold tracking-tight text-gray-900">Your cart</h1>
-        <p className="text-gray-500">Your cart is empty.</p>
-        <Link
-          href="/products"
-          data-fc-track="cart-browse-products"
-          className="inline-block rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700"
-        >
+      <div className="mx-auto max-w-md space-y-4 py-16 text-center">
+        <h1 className="text-3xl font-bold tracking-tight">Your cart</h1>
+        <p className="text-base-content/60">
+          Your cart is empty — it starts the moment you add your first item.
+        </p>
+        <Link href="/products" data-fc-track="cart-browse-products" className="btn btn-primary">
           Browse products
         </Link>
       </div>
@@ -43,120 +67,223 @@ export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[]
   }
 
   // Channel-wide plans (enabled only), flattened across the channel groups.
-  const channelPlans: SellingPlan[] = channelGroups.flatMap((g) => g.plans).filter((p) => p.enabled);
+  const channelPlans: SellingPlan[] = channelGroups
+    .flatMap((g) => g.plans)
+    .filter((p) => p.enabled);
   const activePlanId = cart?.sellingPlanId ?? null;
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold tracking-tight text-gray-900">Your cart</h1>
-
-      <ul className="divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white">
-        {lines.map((line) => (
-          <li key={line.id} className="flex items-center gap-4 p-4">
-            <div className="h-16 w-16 shrink-0 overflow-hidden rounded bg-gray-100">
-              {line.featuredAsset?.preview ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  src={line.featuredAsset.preview}
-                  alt={line.productVariant.name}
-                  className="h-full w-full object-cover"
-                />
-              ) : null}
-            </div>
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold tracking-tight">Your cart</h1>
 
-            <div className="min-w-0 flex-1">
-              <p className="truncate font-medium text-gray-900">{line.productVariant.name}</p>
-              <p className="text-sm text-gray-500">{formatPrice(line.unitPriceWithTax)} each</p>
-              {line.sellingPlanId && (
-                <span className="mt-1 inline-block rounded bg-gray-900 px-1.5 py-0.5 text-xs font-medium text-white">
-                  Subscription
-                </span>
-              )}
+      <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
+        <div className="space-y-6">
+          <ul className="list rounded-box border border-base-300 bg-base-100">
+            {lines.map((line) => (
+              <li key={line.id} className="list-row items-center">
+                <div className="size-16 overflow-hidden rounded-box bg-base-200">
+                  {line.featuredAsset?.preview ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={line.featuredAsset.preview}
+                      alt={line.productVariant.name}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : null}
+                </div>
+
+                <div className="min-w-0">
+                  <p className="truncate font-medium">{line.productVariant.name}</p>
+                  <p className="text-sm text-base-content/60">
+                    {formatPrice(line.unitPriceWithTax)} each
+                  </p>
+                  {line.sellingPlanId && (
+                    <span className="badge badge-secondary badge-sm mt-1 font-medium">
+                      Subscription
+                    </span>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <label className="sr-only" htmlFor={`qty-${line.id}`}>
+                    Quantity
+                  </label>
+                  <input
+                    id={`qty-${line.id}`}
+                    type="number"
+                    min={0}
+                    value={line.quantity}
+                    disabled={pending}
+                    onChange={(e) => {
+                      // 0 is a real value — updateLine removes the line for it.
+                      const parsed = Number.parseInt(e.target.value, 10);
+                      setQuantity(line.id, Number.isNaN(parsed) ? line.quantity : parsed);
+                    }}
+                    className="input input-sm w-16 disabled:opacity-50"
+                  />
+                  <div className="w-20 text-right font-medium tabular-nums">
+                    {formatPrice(line.linePriceWithTax)}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => remove(line.id)}
+                    disabled={pending}
+                    className="btn btn-ghost btn-xs text-base-content/50 hover:text-error"
+                    aria-label={`Remove ${line.productVariant.name}`}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+
+          {channelPlans.length > 0 && (
+            <div className="card card-border bg-base-100">
+              <div className="card-body gap-3 p-5">
+                <h2 className="card-title text-base">Subscribe to your whole order</h2>
+                <div className="flex flex-col gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setSellingPlan(null)}
+                    disabled={pending}
+                    aria-pressed={activePlanId === null}
+                    className={`rounded-field border px-3 py-2 text-left text-sm transition-colors disabled:opacity-50 ${
+                      activePlanId === null
+                        ? 'border-primary ring-1 ring-primary'
+                        : 'border-base-300 hover:border-primary'
+                    }`}
+                  >
+                    <span className="font-medium">No, one-time</span>
+                  </button>
+                  {channelPlans.map((plan) => {
+                    const savings = getPlanSavingsLabel(plan);
+                    const hint = [
+                      savings,
+                      plan.trialDays > 0 ? `${plan.trialDays}-day free trial` : null,
+                    ]
+                      .filter(Boolean)
+                      .join(' · ');
+                    const active = activePlanId === plan.id;
+                    return (
+                      <button
+                        key={plan.id}
+                        type="button"
+                        onClick={() => setSellingPlan(plan.id)}
+                        disabled={pending}
+                        data-fc-track="cart-subscribe-order"
+                        aria-pressed={active}
+                        className={`rounded-field border px-3 py-2 text-left text-sm transition-colors disabled:opacity-50 ${
+                          active
+                            ? 'border-primary ring-1 ring-primary'
+                            : 'border-base-300 hover:border-primary'
+                        }`}
+                      >
+                        <span className="block font-medium">
+                          Subscribe — {getPlanCadenceLabel(plan)}
+                        </span>
+                        {hint && <span className="block text-xs text-base-content/60">{hint}</span>}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
             </div>
+          )}
+        </div>
+
+        <aside
+          className="card card-border bg-base-100 lg:sticky lg:top-24"
+          aria-label="Order summary"
+        >
+          <div className="card-body gap-4 p-5">
+            <h2 className="card-title text-base">Order summary</h2>
 
-            <div className="flex items-center gap-2">
-              <label className="sr-only" htmlFor={`qty-${line.id}`}>
-                Quantity
+            <form
+              className="flex gap-2"
+              onSubmit={(e) => {
+                e.preventDefault();
+                const code = couponInput.trim();
+                if (!code) return;
+                applyCoupon(code);
+                setCouponInput('');
+              }}
+            >
+              <label className="sr-only" htmlFor="coupon-code">
+                Coupon code
               </label>
               <input
-                id={`qty-${line.id}`}
-                type="number"
-                min={1}
-                value={line.quantity}
+                id="coupon-code"
+                type="text"
+                value={couponInput}
+                placeholder="Coupon code"
                 disabled={pending}
-                onChange={(e) => setQuantity(line.id, Number.parseInt(e.target.value, 10) || 1)}
-                className="w-16 rounded border border-gray-300 px-2 py-1 text-sm disabled:opacity-50"
+                onChange={(e) => setCouponInput(e.target.value)}
+                className="input input-sm flex-1"
               />
-            </div>
-
-            <div className="w-24 text-right font-medium text-gray-900">
-              {formatPrice(line.linePriceWithTax)}
-            </div>
+              <button
+                type="submit"
+                className="btn btn-sm"
+                disabled={pending}
+                data-fc-track="cart-apply-coupon"
+              >
+                Apply
+              </button>
+            </form>
 
-            <button
-              type="button"
-              onClick={() => remove(line.id)}
-              disabled={pending}
-              className="text-sm text-gray-400 hover:text-red-600 disabled:opacity-50"
-              aria-label={`Remove ${line.productVariant.name}`}
-            >
-              Remove
-            </button>
-          </li>
-        ))}
-      </ul>
-
-      {channelPlans.length > 0 && (
-        <div className="space-y-2 rounded-lg border border-gray-200 bg-white p-4">
-          <h2 className="text-sm font-medium text-gray-700">Subscribe to your whole order</h2>
-          <div className="flex flex-col gap-2">
-            <button
-              type="button"
-              onClick={() => setSellingPlan(null)}
-              disabled={pending}
-              aria-pressed={activePlanId === null}
-              className={`rounded-md border px-3 py-2 text-left text-sm transition disabled:opacity-50 ${
-                activePlanId === null
-                  ? 'border-gray-900 ring-1 ring-gray-900'
-                  : 'border-gray-300 hover:border-gray-900'
-              }`}
-            >
-              <span className="font-medium text-gray-900">No, one-time</span>
-            </button>
-            {channelPlans.map((plan) => {
-              const savings = getPlanSavingsLabel(plan);
-              const hint = [savings, plan.trialDays > 0 ? `${plan.trialDays}-day free trial` : null]
-                .filter(Boolean)
-                .join(' · ');
-              const active = activePlanId === plan.id;
-              return (
-                <button
-                  key={plan.id}
-                  type="button"
-                  onClick={() => setSellingPlan(plan.id)}
-                  disabled={pending}
-                  data-fc-track="cart-subscribe-order"
-                  aria-pressed={active}
-                  className={`rounded-md border px-3 py-2 text-left text-sm transition disabled:opacity-50 ${
-                    active
-                      ? 'border-gray-900 ring-1 ring-gray-900'
-                      : 'border-gray-300 hover:border-gray-900'
-                  }`}
-                >
-                  <span className="block font-medium text-gray-900">
-                    Subscribe — {getPlanCadenceLabel(plan)}
+            {(cart?.couponCodes.length ?? 0) > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {cart!.couponCodes.map((code) => (
+                  <span key={code} className="badge badge-secondary gap-1">
+                    {code}
+                    <button
+                      type="button"
+                      onClick={() => removeCoupon(code)}
+                      disabled={pending}
+                      aria-label={`Remove coupon ${code}`}
+                    >
+                      ✕
+                    </button>
                   </span>
-                  {hint && <span className="block text-xs text-gray-500">{hint}</span>}
+                ))}
+              </div>
+            )}
+
+            {error && (
+              <div role="alert" className="alert alert-error text-sm">
+                <span>{error.message ?? error.code}</span>
+                <button type="button" className="btn btn-ghost btn-xs" onClick={clearError}>
+                  Dismiss
                 </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
+              </div>
+            )}
 
-      <div className="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4">
-        <span className="text-sm text-gray-600">Subtotal ({itemCount} items)</span>
-        <span className="text-lg font-semibold text-gray-900">{formatPrice(subtotal)}</span>
+            <div className="space-y-1 border-t border-base-300 pt-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-base-content/60">Subtotal ({itemCount} items)</span>
+                <span className="font-medium tabular-nums">{formatPrice(subtotal)}</span>
+              </div>
+              {(cart?.discounts ?? []).map((discount) => (
+                <div key={discount.description} className="flex items-center justify-between">
+                  <span className="text-sm text-base-content/60">{discount.description}</span>
+                  <span className="text-sm tabular-nums">
+                    −{formatPrice(Math.abs(discount.amountWithTax))}
+                  </span>
+                </div>
+              ))}
+              <div className="flex items-center justify-between pt-1">
+                <span className="text-sm text-base-content/60">Total</span>
+                <span className="text-lg font-semibold tabular-nums">
+                  {formatPrice(cart?.totalWithTax ?? subtotal)}
+                </span>
+              </div>
+            </div>
+
+            <Link href="/checkout" data-fc-track="cart-checkout" className="btn btn-primary w-full">
+              Checkout
+            </Link>
+          </div>
+        </aside>
       </div>
     </div>
   );

package/templates/storefront/src/components/ForgeTracker.tsx

@@ -3,6 +3,8 @@
 import { usePathname } from 'next/navigation';
 import { useEffect } from 'react';
 
+import { mintUuid } from '../lib/uuid';
+
 /**
  * Storefront event tracker (design doc S7). Renders nothing.
  *
@@ -28,12 +30,14 @@ import { useEffect } from 'react';
  *     one on refocus) — liveness plumbing only, excluded from aggregates.
  *
  * Delivery: events buffer and flush as one batch at {@link FLUSH_MAX_EVENTS}
- * events or after {@link FLUSH_INTERVAL_MS} via `fetch(keepalive)`;
- * `sendBeacon` is used ONLY for the `pagehide` flush (its unload-time queueing
- * guarantee is the one thing keepalive fetch lacks). Every event carries a
- * client-minted `eventId` (`crypto.randomUUID`) — the server dedupes on it, so
- * an accidental double-send is harmless. Delivery is fire-and-forget: failures
- * are swallowed and never retried; analytics must never break the storefront.
+ * events or after an age timer via `fetch(keepalive)` — the FIRST batch waits
+ * {@link ESTABLISHMENT_GRACE_MS}, every later batch {@link FLUSH_INTERVAL_MS}
+ * (see the grace rationale on the constant); `sendBeacon` is used ONLY for the
+ * `pagehide` flush (its unload-time queueing guarantee is the one thing
+ * keepalive fetch lacks). Every event carries a client-minted `eventId`
+ * (`crypto.randomUUID`) — the server dedupes on it, so an accidental
+ * double-send is harmless. Delivery is fire-and-forget: failures are
+ * swallowed and never retried; analytics must never break the storefront.
  *
  * Deliberately NO 30-second same-path dedup (the old `ForgeAnalytics`
  * behavior): it was live-map-correct but funnel-lossy — A→B→A inside 30s
@@ -54,6 +58,19 @@ const HEARTBEAT_MIN_SPACING_MS = 30_000;
 /** Batch flush thresholds: whichever of size / age is hit first sends. */
 const FLUSH_MAX_EVENTS = 10;
 const FLUSH_INTERVAL_MS = 500;
+/**
+ * Age timer for the FIRST batch only. On a cookie-less first touch the relay
+ * and the first cart Server Action race to mint the shopper session, and the
+ * browser keeps whichever `Set-Cookie` lands last — if the tracker's ~500ms
+ * page_view batch wins that race against a fast add-to-cart, the cookie flips
+ * away from the session holding the just-created cart. Holding the initial
+ * flush for this grace lets the cart's cookie land first, so the relay batch
+ * then CARRIES it and rides the cart's session instead of minting a rival
+ * (design doc S7: the first tracked interaction establishes the identity the
+ * cart later reuses — establishment still happens, just not mid-race).
+ * Events are timestamped at enqueue (`occurredAt`), so deferral loses nothing.
+ */
+const ESTABLISHMENT_GRACE_MS = 2_000;
 /** Same-signal suppression window (per click slug; per page_view path). */
 const SUPPRESS_MS = 300;
 const TRACK_ENDPOINT = '/__fc/track';
@@ -71,6 +88,8 @@ interface TrackedEvent {
 // exactly one tracker per page.
 let buffer: TrackedEvent[] = [];
 let flushTimer: number | null = null;
+/** True once any batch has gone out — ends the establishment grace. */
+let firstBatchSent = false;
 const lastClickAtBySlug = new Map<string, number>();
 let lastPageView: { path: string; at: number } | null = null;
 let previousPathname: string | null = null;
@@ -87,19 +106,12 @@ function hasTrackingConsent(): boolean {
 }
 
 /**
- * Client-side idempotency key: `crypto.randomUUID` where available; on the one
- * environment it isn't (insecure-context LAN-IP dev hosts — the API is
- * secure-context gated, `getRandomValues` is not) mint the same v4 shape by
- * hand, because a thrown TypeError inside a click listener would violate the
- * "analytics never breaks the storefront" invariant.
+ * Client-side idempotency key via the shared insecure-context-safe minter
+ * (lib/uuid.ts) — a thrown TypeError inside a click listener would violate
+ * the "analytics never breaks the storefront" invariant.
  */
 function mintEventId(): string {
-  if (typeof crypto.randomUUID === 'function') return crypto.randomUUID();
-  const bytes = crypto.getRandomValues(new Uint8Array(16));
-  bytes[6] = (bytes[6] & 0x0f) | 0x40;
-  bytes[8] = (bytes[8] & 0x3f) | 0x80;
-  const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('');
-  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+  return mintUuid();
 }
 
 /** Stamp and buffer one event; flush on size, else arm the age timer. */
@@ -118,7 +130,8 @@ function enqueue(eventType: string, properties?: Record<string, unknown>): void
     return;
   }
   if (flushTimer === null) {
-    flushTimer = window.setTimeout(flush, FLUSH_INTERVAL_MS);
+    const delay = firstBatchSent ? FLUSH_INTERVAL_MS : ESTABLISHMENT_GRACE_MS;
+    flushTimer = window.setTimeout(flush, delay);
   }
 }
 
@@ -130,6 +143,9 @@ function drain(): TrackedEvent[] {
   }
   const events = buffer;
   buffer = [];
+  // The grace ends once a batch actually goes out — from then on the age
+  // timer runs at the normal cadence.
+  if (events.length > 0) firstBatchSent = true;
   return events;
 }
 
@@ -166,15 +182,13 @@ function flushOnPagehide(): void {
   }).catch(() => undefined);
 }
 
-export function ForgeTracker({
-  shopApiUrl,
-  channelToken,
-}: {
-  shopApiUrl: string;
-  channelToken: string;
-}) {
+/**
+ * `enabled` is computed SERVER-side (env presence) and passed as a boolean —
+ * the tracker only needs to know whether the relay is configured; the channel
+ * token itself must never serialize into the RSC payload.
+ */
+export function ForgeTracker({ enabled }: { enabled: boolean }) {
   const pathname = usePathname();
-  const enabled = Boolean(shopApiUrl && channelToken);
 
   // page_view — initial load + every route change.
   useEffect(() => {

package/templates/storefront/src/components/Header.tsx

@@ -20,24 +20,22 @@ export function Header() {
   }, []);
 
   return (
-    <header className="border-b border-gray-200 bg-white">
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
-        <Link href="/" className="text-lg font-bold tracking-tight text-gray-900">
+    <header className="sticky top-0 z-30 border-b border-base-300 bg-base-100">
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
+        <Link href="/" className="text-lg font-bold tracking-tight">
           Storefront
         </Link>
-        <nav className="flex items-center gap-6 text-sm font-medium text-gray-600">
-          <Link href="/" className="hover:text-gray-900">
+        <nav aria-label="Store" className="flex items-center gap-1 text-sm font-medium">
+          <Link href="/" className="btn btn-ghost btn-sm">
             Home
           </Link>
-          <Link href="/products" className="hover:text-gray-900">
+          <Link href="/products" className="btn btn-ghost btn-sm">
             Products
           </Link>
-          <Link href="/cart" data-fc-track="header-cart" className="relative hover:text-gray-900">
+          <Link href="/cart" data-fc-track="header-cart" className="btn btn-ghost btn-sm">
             Cart
             {mounted && itemCount > 0 && (
-              <span className="ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gray-900 px-1.5 text-xs font-semibold text-white">
-                {itemCount}
-              </span>
+              <span className="badge badge-primary badge-sm font-semibold">{itemCount}</span>
             )}
           </Link>
         </nav>