npm - @forgecart/cli - Versions diffs - 2.202608110054.0 → 2.202608160103.0 - Mend

@forgecart/cli 2.202608110054.0 → 2.202608160103.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/templates/storefront/src/app/global-error.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+'use client';
+/**
+ * Root backstop: replaces the whole document when the root layout itself
+ * fails to render. Must own its own <html>/<body> — the layout that normally
+ * provides them is the thing that crashed. Styled inline (no globals.css —
+ * that import lives in the crashed layout).
+ */
+export default function GlobalError({ reset }: { error: Error; reset: () => void }) {
+  return (
+    <html lang="en">
+      <body
+        style={{ fontFamily: 'system-ui, sans-serif', padding: '4rem 1rem', textAlign: 'center' }}
+      >
+        <h1>Something went wrong</h1>
+        <p>The store is temporarily unavailable. Please try again in a moment.</p>
+        <button type="button" onClick={() => reset()} style={{ padding: '0.5rem 1.25rem' }}>
+          Try again
+        </button>
+      </body>
+    </html>
+  );
+}

package/templates/storefront/src/app/globals.css CHANGED Viewed

@@ -1,13 +1,110 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
-:root {
-  --background: #ffffff;
-  --foreground: #111827;
+@plugin "daisyui" {
+  themes: false;
 }
+/*
+ * ═══════════════════════════════════════════════════════════════════════════
+ * STOREFRONT THEME — the single brand mutation point (design-system contract)
+ * ═══════════════════════════════════════════════════════════════════════════
+ *
+ * Every component in this template speaks SEMANTIC daisyUI classes
+ * (bg-base-100, btn-primary, badge-secondary, alert, steps, …), so the block
+ * below is the ONE place a brand lives. Restyling the storefront = editing
+ * these tokens — nothing else. Never scatter raw palette utilities
+ * (bg-gray-900, text-white, #hex) through components; if a component needs a
+ * color, it needs a TOKEN.
+ *
+ * Token groups and what they drive:
+ *   --color-base-*        page substrate (200), raised surfaces (100), borders
+ *                         (300) and default text (base-content)
+ *   --color-primary       the brand action color: CTAs (btn-primary), active
+ *                         selections, the cart count badge
+ *   --color-secondary     supporting emphasis (subscription badges, secondary
+ *                         chips)
+ *   --color-accent        reserved highlight — used sparingly by new
+ *                         components; keep it distinct from primary
+ *   --color-neutral       high-contrast neutral fills (rarely needed directly)
+ *   info/success/warning/ status semantics (alerts, validators, error text) —
+ *   error                 conventional hues, usually NOT part of a rebrand
+ *   --radius-*            selector = small controls (checkbox/tabs), field =
+ *                         inputs/buttons, box = cards/modals
+ *   --size-*, --border    control density and border weight
+ *   --depth, --noise      daisyUI effect toggles (flat baseline: 0)
+ *
+ * The checkout surfaces consume the same set (steps, fieldset/validator
+ * inputs, radio-card selection rings, alert) — the block enumerates every
+ * variable daisyUI components resolve, so no class ever falls back outside
+ * the contract.
+ *
+ * This baseline is deliberately UNBRANDED (near-black monochrome on soft
+ * gray): it is the neutral canvas an agent rebrands per store. Extension
+ * points this contract keeps open: additional themes are further
+ * `@plugin "daisyui/theme"` blocks (a dark theme adds `prefersdark: true`),
+ * and the visual editor writes these same tokens ("theme main colors" =
+ * primary / secondary / accent here).
+ *
+ * A brand font goes in the `@theme` block after the theme: swap the
+ * `--font-sans` stack (and add the font's `@font-face`/import above it).
+ */
+@plugin "daisyui/theme" {
+  name: "storefront";
+  default: true;
+  color-scheme: light;
+  /* Base — white surfaces over a soft-gray substrate, near-black text. */
+  --color-base-100: #ffffff;
+  --color-base-200: #f9fafb;
+  --color-base-300: #e5e7eb;
+  --color-base-content: #111827;
+  /* Actions — unbranded monochrome. */
+  --color-primary: #111827;
+  --color-primary-content: #ffffff;
+  --color-secondary: #374151;
+  --color-secondary-content: #ffffff;
+  --color-accent: #1f2937;
+  --color-accent-content: #ffffff;
+  --color-neutral: #111827;
+  --color-neutral-content: #f9fafb;
+  /* Status — conventional semantics, not brand. */
+  --color-info: #2563eb;
+  --color-info-content: #ffffff;
+  --color-success: #16a34a;
+  --color-success-content: #ffffff;
+  --color-warning: #d97706;
+  --color-warning-content: #ffffff;
+  --color-error: #dc2626;
+  --color-error-content: #ffffff;
+  /* Shape — matches the template's previous rounded-md/lg scale. */
+  --radius-selector: 0.375rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+/* Brand typography mutation point — swap the stack to give the store a font. */
+@theme {
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+}
+/*
+ * Base document behavior (structural — NOT part of the theme contract).
+ * A horizontal touchpad glide must never trigger the browser's swipe-back
+ * navigation: mid-checkout that discards the shopper's in-progress state
+ * (the refresh-resume path recovers the payment step, but preventing the
+ * accidental navigation is the real fix). The back button and keyboard
+ * navigation are untouched — only the overscroll gesture is consumed.
+ */
+html,
 body {
-  color: var(--foreground);
-  background: var(--background);
+  overscroll-behavior-x: none;
 }

package/templates/storefront/src/app/layout.tsx CHANGED Viewed

@@ -1,12 +1,13 @@
 import type { Metadata } from 'next';
-import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { Suspense, type ReactNode } from 'react';
 import { ForgeErrorBeacon } from '../components/ForgeErrorBeacon';
 import { ForgeTracker } from '../components/ForgeTracker';
 import { ForgecartDesigner } from '../components/ForgecartDesigner';
 import { Header } from '../components/Header';
-import { getCart } from '../lib/cart-actions';
 import { CartProvider } from '../lib/cart-context';
+import { getBrowserShopConfig } from '../lib/shop-config';
 import './globals.css';
@@ -15,26 +16,53 @@ export const metadata: Metadata = {
   description: 'A ForgeCart channel storefront.',
 };
-export default async function RootLayout({ children }: { children: ReactNode }) {
-  const initialCart = await getCart();
+/**
+ * The PPR-static shell: no cookie reads, no session work — the layout renders
+ * the same for every shopper. The cart hydrates CLIENT-side over the
+ * shopper's own websocket (`CartProvider` + `shop-session.ts`), armed with
+ * the channel coordinates serialized here (public storefront token — the
+ * admin secret never takes this path).
+ */
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const shopConfig = getBrowserShopConfig();
   return (
     <html lang="en">
-      <body className="min-h-screen bg-gray-50 text-gray-900 antialiased">
-        <CartProvider initialCart={initialCart}>
+      <body className="min-h-screen bg-base-200 text-base-content antialiased">
+        <CartProvider shopConfig={shopConfig}>
           <Header />
-          <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
-          <footer className="border-t border-gray-200 bg-white">
-            <div className="mx-auto max-w-6xl px-4 py-6 text-sm text-gray-500">
-              Powered by ForgeCart
-            </div>
+          <main className="mx-auto max-w-6xl px-4 py-10">{children}</main>
+          <footer className="footer footer-horizontal mt-8 items-center border-t border-base-300 bg-base-100 px-6 py-8 text-sm text-base-content/60 sm:px-10">
+            <aside>
+              <p className="font-medium text-base-content">Storefront</p>
+              <p>Powered by ForgeCart</p>
+            </aside>
+            <nav aria-label="Footer" className="sm:justify-self-end">
+              <div className="grid grid-flow-col gap-4">
+                <Link href="/" className="link link-hover">
+                  Home
+                </Link>
+                <Link href="/products" className="link link-hover">
+                  Products
+                </Link>
+                <Link href="/cart" className="link link-hover">
+                  Cart
+                </Link>
+              </div>
+            </nav>
           </footer>
         </CartProvider>
-        <ForgecartDesigner />
-        <ForgeErrorBeacon />
-        <ForgeTracker
-          shopApiUrl={process.env.FORGECART_SHOP_API_URL ?? ''}
-          channelToken={process.env.FORGECART_CHANNEL_TOKEN ?? ''}
-        />
+        {/* Invisible client plumbing. The tracker reads usePathname(), which
+            cacheComponents only allows under a Suspense boundary — null
+            fallback, these render nothing. */}
+        <Suspense fallback={null}>
+          <ForgecartDesigner />
+          <ForgeErrorBeacon />
+          <ForgeTracker
+            enabled={Boolean(
+              process.env.FORGECART_SHOP_API_URL && process.env.FORGECART_CHANNEL_TOKEN,
+            )}
+          />
+        </Suspense>
       </body>
     </html>
   );

package/templates/storefront/src/app/page.tsx CHANGED Viewed

@@ -1,61 +1,171 @@
 import Link from 'next/link';
+import { connection } from 'next/server';
+import { Suspense } from 'react';
+import { cache } from 'react';
 import { ProductCard } from '../components/ProductCard';
 import { getVariant } from '../lib/experiments';
 import { getFeaturedProducts } from '../lib/forgecart';
-// Product data changes in the dashboard, so render on each request.
-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).
-export default async function HomePage() {
-  const products = await getFeaturedProducts(4);
-  // A/B example (design doc F-B): variants are code branches keyed on
-  // `variantKey`. `hero-headline` is the template's reference experiment —
-  // create one with that key (variants `control` + `b`) in the dashboard and
-  // this hero starts splitting; until then `variantKey` is null and the
-  // default copy renders. `data-fc-variant` mirrors the assignment for
-  // debugging/verification; exposure tracking happens server-side.
-  const hero = await getVariant('hero-headline');
+/** One featured read per request, shared by both holes (React request cache). */
+const featured = cache(async () => getFeaturedProducts(4));
+/**
+ * Home — the store's landing surface (Blueprint `pages/product-landing-page`):
+ * a product-led hero with ONE dominant conversion action, an editorial
+ * featured grid (first product large — asymmetry, not a uniform tile wall),
+ * and a closing conversion band. Every color is a semantic token; the brand
+ * lives in the globals.css theme block alone.
+ */
+export default function HomePage() {
   return (
-    <div className="space-y-12">
-      <section
-        data-fc-variant={hero.variantKey ?? 'default'}
-        className="rounded-2xl bg-white p-10 shadow-sm"
-      >
-        <h1 className="text-3xl font-bold tracking-tight text-gray-900">
-          Welcome to the shop
-        </h1>
-        <p className="mt-3 max-w-2xl text-gray-600">
-          {hero.variantKey === 'b'
-            ? 'Fresh picks, fair prices — see what everyone is adding to their carts.'
-            : 'This storefront is served by a ForgeCart channel. Browse the catalog and add products to your cart.'}
-        </p>
-        <Link
-          href="/products"
-          className="mt-6 inline-block rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700"
-        >
-          Shop all products
-        </Link>
-      </section>
+    <div className="space-y-16">
+      <Suspense fallback={<HeroSkeleton />}>
+        <Hero />
+      </Suspense>
-      <section>
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-xl font-semibold text-gray-900">Featured</h2>
-          <Link href="/products" className="text-sm text-gray-600 hover:text-gray-900">
-            View all
+      <section aria-labelledby="featured-heading">
+        <div className="mb-6 flex items-baseline justify-between gap-4">
+          <h2 id="featured-heading" className="text-2xl font-semibold tracking-tight">
+            Featured
+          </h2>
+          <Link href="/products" className="link link-hover text-sm text-base-content/60">
+            View all products
           </Link>
         </div>
-        {products.length === 0 ? (
-          <p className="text-gray-500">No products yet. Add some in your dashboard.</p>
-        ) : (
-          <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
-            {products.map((product) => (
-              <ProductCard key={product.id} product={product} />
-            ))}
+        <Suspense fallback={<GridSkeleton />}>
+          <FeaturedGrid />
+        </Suspense>
+      </section>
+    </div>
+  );
+}
+/**
+ * The experiment-split hero (design doc F-B): variants are code branches
+ * keyed on `variantKey`. `hero-headline` is the template's reference
+ * experiment — create one with that key (variants `control` + `b`) in the
+ * dashboard and this hero starts splitting; until then `variantKey` is null
+ * and the default copy renders. `data-fc-variant` mirrors the assignment for
+ * debugging/verification; exposure tracking happens server-side.
+ */
+async function Hero() {
+  // Request-time hole (cacheComponents): the build keeps the fallback shell.
+  await connection();
+  const [products, hero] = await Promise.all([featured(), getVariant('hero-headline')]);
+  const heroProduct = products.find((product) => product.featuredAsset) ?? null;
+  return (
+    <section
+      data-fc-variant={hero.variantKey ?? 'default'}
+      className="hero overflow-hidden rounded-box border border-base-300 bg-base-100"
+    >
+      <div className="hero-content w-full max-w-none flex-col gap-10 p-8 lg:flex-row lg:items-center lg:p-12">
+        <div className="max-w-xl lg:flex-1">
+          <h1 className="text-4xl font-bold tracking-tight text-balance sm:text-5xl">
+            Welcome to the shop
+          </h1>
+          <p className="mt-4 text-base-content/60 text-pretty">
+            {hero.variantKey === 'b'
+              ? 'Fresh picks, fair prices — see what everyone is adding to their carts.'
+              : 'This storefront is served by a ForgeCart channel. Browse the catalog and add products to your cart.'}
+          </p>
+          <div className="mt-8">
+            <Link href="/products" className="btn btn-primary btn-lg">
+              Shop all products
+            </Link>
           </div>
+        </div>
+        {heroProduct?.featuredAsset && (
+          <Link
+            href={`/products/${heroProduct.slug}`}
+            className="w-full max-w-md lg:flex-1"
+            aria-label={`View ${heroProduct.name}`}
+          >
+            <figure className="aspect-square overflow-hidden rounded-box bg-base-200">
+              {/* Plain <img> keeps the template dependency-free of next/image config. */}
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={heroProduct.featuredAsset.preview}
+                alt={heroProduct.name}
+                className="h-full w-full object-cover"
+              />
+            </figure>
+          </Link>
         )}
+      </div>
+    </section>
+  );
+}
+async function FeaturedGrid() {
+  await connection();
+  const products = await featured();
+  if (products.length === 0) {
+    return (
+      <p className="text-base-content/60">
+        No products yet — add your first product in the dashboard and it appears here.
+      </p>
+    );
+  }
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-4">
+        {products.map((product, index) => (
+          <div key={product.id} className={index === 0 ? 'col-span-2 row-span-2' : undefined}>
+            <ProductCard product={product} emphasis={index === 0} />
+          </div>
+        ))}
+      </div>
+      <section className="hero mt-16 rounded-box bg-neutral text-neutral-content">
+        <div className="hero-content flex-col gap-6 py-14 text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-balance">
+            Find something you like?
+          </h2>
+          <p className="max-w-md text-neutral-content/70 text-pretty">
+            The whole catalog ships from this store — browse everything in one place.
+          </p>
+          <Link href="/products" className="btn btn-primary btn-wide">
+            Browse the catalog
+          </Link>
+        </div>
       </section>
+    </>
+  );
+}
+function HeroSkeleton() {
+  return (
+    <div className="hero rounded-box border border-base-300 bg-base-100" aria-busy="true">
+      <div className="hero-content w-full max-w-none flex-col gap-10 p-8 lg:flex-row lg:p-12">
+        <div className="w-full max-w-xl space-y-4 lg:flex-1">
+          <div className="skeleton h-12 w-3/4"></div>
+          <div className="skeleton h-4 w-full"></div>
+          <div className="skeleton h-4 w-2/3"></div>
+          <div className="skeleton mt-4 h-12 w-48"></div>
+        </div>
+        <div className="skeleton aspect-square w-full max-w-md lg:flex-1"></div>
+      </div>
+    </div>
+  );
+}
+function GridSkeleton() {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-4" aria-busy="true">
+      <div className="col-span-2 row-span-2">
+        <div className="skeleton h-full min-h-72 w-full"></div>
+      </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>
   );
 }

package/templates/storefront/src/app/ping/route.ts CHANGED Viewed

@@ -9,10 +9,9 @@
  * route handler renders nothing and touches no session, so readiness polling stays
  * side-effect-free.
  *
- * `force-dynamic` keeps it out of the static prerender so a production build serves
+ * Request access keeps it out of the static prerender (cacheComponents) so a production build serves
  * it on demand exactly like `next dev` does — the probe always gets a fresh 200.
  */
-export const dynamic = 'force-dynamic';
 export function GET(): Response {
   return new Response('ok', {

package/templates/storefront/src/app/products/[slug]/not-found.tsx CHANGED Viewed

@@ -3,16 +3,11 @@ import Link from 'next/link';
 export default function ProductNotFound() {
   return (
     <div className="space-y-4">
-      <h1 className="text-2xl font-bold tracking-tight text-gray-900">
-        Product not found
-      </h1>
-      <p className="text-gray-500">
+      <h1 className="text-2xl font-bold tracking-tight text-base-content">Product not found</h1>
+      <p className="text-base-content/60">
         We couldn&apos;t find that product. It may have been removed.
       </p>
-      <Link
-        href="/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"
-      >
+      <Link href="/products" className="btn btn-primary">
         Back to products
       </Link>
     </div>

package/templates/storefront/src/app/products/[slug]/page.tsx CHANGED Viewed

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import { connection } from 'next/server';
+import { Suspense } from 'react';
 import { ProductPurchase } from '../../../components/ProductPurchase';
 import {
@@ -8,14 +10,30 @@ import {
   type SellingPlanGroup,
 } 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).
+/**
+ * Product detail (Blueprint `pages/product-detail`): identity block ordering —
+ * media, then title, then price/variants/CTA (ProductPurchase owns those),
+ * then the long-form description. Breadcrumbs replace the bare back-link so
+ * shoppers keep their place in the catalog.
+ */
 // Next.js 15: route params are delivered as a Promise.
-export default async function ProductDetailPage({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+export default function ProductDetailPage({ params }: { params: Promise<{ slug: string }> }) {
+  return (
+    <div className="space-y-8">
+      <Suspense fallback={<DetailSkeleton />}>
+        <ProductDetail params={params} />
+      </Suspense>
+    </div>
+  );
+}
+async function ProductDetail({ params }: { params: Promise<{ slug: string }> }) {
+  // Request-time hole (cacheComponents): the build keeps the fallback shell.
+  await connection();
   const { slug } = await params;
   const product = await getProductBySlug(slug);
@@ -39,13 +57,23 @@ export default async function ProductDetailPage({
   );
   return (
-    <div className="space-y-6">
-      <Link href="/products" className="text-sm text-gray-600 hover:text-gray-900">
-        &larr; Back to products
-      </Link>
+    <>
+      <div className="breadcrumbs text-sm text-base-content/60">
+        <ul>
+          <li>
+            <Link href="/">Home</Link>
+          </li>
+          <li>
+            <Link href="/products">Products</Link>
+          </li>
+          <li>
+            <span aria-current="page">{product.name}</span>
+          </li>
+        </ul>
+      </div>
-      <div className="grid gap-8 md:grid-cols-2">
-        <div className="aspect-square overflow-hidden rounded-lg border border-gray-200 bg-gray-100">
+      <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
+        <figure className="aspect-square overflow-hidden rounded-box border border-base-300 bg-base-200 lg:sticky lg:top-24 lg:self-start">
           {product.featuredAsset ? (
             // eslint-disable-next-line @next/next/no-img-element
             <img
@@ -54,25 +82,43 @@ export default async function ProductDetailPage({
               className="h-full w-full object-cover"
             />
           ) : (
-            <div className="flex h-full w-full items-center justify-center text-sm text-gray-400">
+            <div className="flex h-full w-full items-center justify-center text-sm text-base-content/40">
               No image
             </div>
           )}
-        </div>
+        </figure>
-        <div className="space-y-4">
-          <h1 className="text-2xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+        <div className="space-y-6">
+          <h1 className="text-3xl font-bold tracking-tight text-balance">{product.name}</h1>
+          {/* Pick a variant (Size/Color) -> price + purchase options + add-to-cart. */}
+          <ProductPurchase product={product} planGroupsByVariant={planGroupsByVariant} />
           {product.description && (
-            <div
-              className="prose prose-sm max-w-none text-gray-600"
-              // Product descriptions may contain rich text from the dashboard.
-              dangerouslySetInnerHTML={{ __html: product.description }}
-            />
+            <section aria-label="Product description" className="border-t border-base-300 pt-6">
+              <div
+                className="max-w-none text-sm leading-relaxed text-base-content/70"
+                // Product descriptions may contain rich text from the dashboard.
+                dangerouslySetInnerHTML={{ __html: product.description }}
+              />
+            </section>
           )}
+        </div>
+      </div>
+    </>
+  );
+}
-          {/* Pick a variant (Size/Color) -> price + purchase options + add-to-cart. */}
-          <ProductPurchase product={product} planGroupsByVariant={planGroupsByVariant} />
+function DetailSkeleton() {
+  return (
+    <div aria-busy="true">
+      <div className="skeleton h-4 w-56"></div>
+      <div className="mt-8 grid gap-8 lg:grid-cols-2 lg:gap-12">
+        <div className="skeleton aspect-square w-full"></div>
+        <div className="space-y-4">
+          <div className="skeleton h-9 w-3/4"></div>
+          <div className="skeleton h-24 w-full"></div>
+          <div className="skeleton h-12 w-full"></div>
         </div>
       </div>
     </div>