@stacksjs/defaults 0.70.54

package/resources/plugins/preloader.ts

@@ -0,0 +1,308 @@
+/**
+ * Main Preloader
+ *
+ * This file is loaded before the main (Bun) process is started.
+ * You may use this file to preload/define plugins that will
+ * automatically be injected into the Bun process.
+ */
+
+// Skip preloader for fast CLI commands (e.g. `buddy dev`, `buddy --version`) to
+// maximize startup speed. We must NOT skip when running a server script directly
+// (e.g. `bun --watch storage/framework/core/actions/src/dev/api.ts`) — Bun
+// consumes `--watch` so `args` ends up empty in that subprocess, which used to
+// trip the `args.length === 0` short-circuit and silently disable auto-imports.
+const args = process.argv.slice(2)
+const fastCommands = [
+  'dev',
+  'build',
+  'test',
+  'lint',
+  '--version',
+  '-v',
+  'version',
+  '--help',
+  '-h',
+  'help',
+  // Database / codegen — must not pull the full auto-import graph (router,
+  // orm models, …) before bun-query-builder can diff schemas. A broken
+  // `@stacksjs/bun-router` install used to make `generate:migrations` exit 1
+  // with no output because the preloader died while loading `@stacksjs/router`.
+  'migrate',
+  'fresh',
+  'seed',
+  'generate',
+  'make',
+  'key:generate',
+  'scaffold:crud',
+]
+const isRepl = !process.argv[1]
+const skipPreloader = isRepl || (args.length > 0 && fastCommands.some(cmd => args[0] === cmd || args[0].startsWith(`${cmd}:`)))
+
+if (!skipPreloader) {
+  // Detect production/deployment commands and set environment accordingly BEFORE loading env files
+  // This ensures the correct .env.{env} file is loaded with proper encryption/decryption
+  const productionCommands = ['cloud:remove', 'cloud:rm', 'cloud:destroy', 'cloud:cleanup', 'cloud:clean-up', 'undeploy']
+  const isProductionCommand = productionCommands.includes(args[0])
+
+  // Handle deploy command which can have an optional env argument: `deploy [env]`
+  const isDeployCommand = args[0] === 'deploy'
+  if (isDeployCommand) {
+    // Check if second arg is an environment (not a flag starting with -)
+    const deployEnv = args[1] && !args[1].startsWith('-') ? args[1] : 'production'
+    process.env.APP_ENV = deployEnv
+    process.env.NODE_ENV = deployEnv
+  }
+  else if (isProductionCommand) {
+    process.env.APP_ENV = 'production'
+    process.env.NODE_ENV = 'production'
+  }
+
+  // Load .env files with encryption support using our native Bun plugin
+  const { autoLoadEnv } = await import('@stacksjs/env')
+
+  // Auto-load .env files based on environment
+  // Set quiet: true to prevent duplicate logging across multiple processes
+  //
+  // keysFile MUST be passed here: autoLoadEnv only resolves a decryption
+  // private key from a keys FILE when explicitly told which one to read —
+  // without it, an encrypted .env.production (DOTENV_PUBLIC_KEY_PRODUCTION
+  // + `encrypted:...` values) loads with every encrypted value left as raw
+  // ciphertext in process.env, silently breaking anything that reads
+  // process.env.SOME_SECRET directly (e.g. deploy-time credentials like
+  // HCLOUD_TOKEN/PORKBUN_API_KEY) with no error — it just looks like a
+  // bogus/expired credential downstream.
+  autoLoadEnv({ quiet: true, keysFile: '.env.keys' })
+}
+
+// stx template engine plugin
+// enables .stx file processing
+// NOTE: Commented out until bun-plugin-stx is properly installed
+// Uncomment after running: bun add bun-plugin-stx
+// eslint-disable-next-line antfu/no-top-level-await
+// await import('bun-plugin-stx')
+
+// Auto-import ALL Stacks framework modules into globalThis
+// This allows using Action, response, Activity, etc. without ANY imports.
+// Exported so server entrypoints (e.g. `dev/api.ts`) can opt back in
+// explicitly when needed — see #1835 root cause 3.
+export async function loadAutoImports() {
+  const { Glob } = await import('bun')
+  const path = await import('@stacksjs/path')
+
+  // CRITICAL: Never overwrite these built-in globals
+  const protectedGlobals = new Set([
+    'process', 'globalThis', 'global', 'window', 'self',
+    'console', 'require', 'module', 'exports', '__dirname', '__filename',
+    'Buffer', 'setTimeout', 'setInterval', 'clearTimeout', 'clearInterval',
+    'setImmediate', 'clearImmediate', 'queueMicrotask',
+    'fetch', 'Request', 'Response', 'Headers', 'URL', 'URLSearchParams',
+    'TextEncoder', 'TextDecoder', 'Blob', 'File', 'FormData',
+    'crypto', 'performance', 'navigator', 'location',
+    'Promise', 'Symbol', 'Proxy', 'Reflect', 'WeakMap', 'WeakSet', 'Map', 'Set',
+    'Array', 'Object', 'String', 'Number', 'Boolean', 'Date', 'RegExp', 'Error',
+    'JSON', 'Math', 'Intl', 'eval', 'isNaN', 'isFinite', 'parseInt', 'parseFloat',
+    'encodeURI', 'encodeURIComponent', 'decodeURI', 'decodeURIComponent',
+    'Bun', 'Deno', 'Node',
+  ])
+
+  // 1. Load Stacks framework packages into globalThis
+  const stacksPackages = [
+    '@stacksjs/actions',
+    '@stacksjs/router',
+    '@stacksjs/orm',
+    '@stacksjs/validation',
+    '@stacksjs/strings',
+    '@stacksjs/arrays',
+    '@stacksjs/objects',
+    '@stacksjs/collections',
+    '@stacksjs/path',
+    '@stacksjs/storage',
+    '@stacksjs/env',
+    '@stacksjs/config',
+    '@stacksjs/logging',
+    '@stacksjs/cache',
+    '@stacksjs/queue',
+    '@stacksjs/events',
+    '@stacksjs/notifications',
+    '@stacksjs/email',
+    '@stacksjs/security',
+    '@stacksjs/auth',
+    '@stacksjs/database',
+    '@stacksjs/error-handling',
+    // Signal helpers (`state`, `derived`, `effect`) and browser-side
+    // composables (`useDark`, `usePreferredDark`, `useStorage`) need to
+    // land in globalThis before step 2 imports any file under
+    // resources/functions/ — counter.ts and dark.ts call those at
+    // module top level, so missing globals throw and leave the module
+    // in TDZ, surfacing later as `Cannot access 'count' before
+    // initialization` when the auto-imports barrel re-imports them.
+    '@stacksjs/stx',
+    '@stacksjs/browser',
+  ]
+
+  for (const pkg of stacksPackages) {
+    try {
+      const module = await import(pkg)
+      for (const [name, value] of Object.entries(module)) {
+        // Skip default exports and protected globals
+        if (name === 'default' || protectedGlobals.has(name)) continue
+        if (typeof value !== 'undefined') {
+          (globalThis as any)[name] = value
+        }
+      }
+    } catch {
+      // Package might not exist or not be built yet
+    }
+  }
+
+  // 2. Load all functions from resources/functions
+  const functionsPath = path.resourcesPath('functions')
+  const glob = new Glob('**/*.ts')
+
+  for await (const file of glob.scan({
+    cwd: functionsPath,
+    absolute: true,
+    onlyFiles: true,
+  })) {
+    if (file.endsWith('.d.ts')) continue
+
+    try {
+      const module = await import(file)
+      for (const [name, value] of Object.entries(module)) {
+        // Skip default exports and protected globals
+        if (name === 'default' || protectedGlobals.has(name)) continue
+        if (typeof value !== 'undefined') {
+          (globalThis as any)[name] = value
+        }
+      }
+    } catch {
+      // Some files may have client-side dependencies, skip them
+    }
+  }
+
+  // 3. Load all defineModel()-based model instances into globalThis
+  // This enables using Post.where('title', 'test') without imports
+  // Priority: user models (app/Models) override framework defaults
+  const modelDirs = [
+    path.userModelsPath(),
+    path.storagePath('framework/defaults/app/Models'),
+  ]
+
+  const loadedModels = new Set<string>()
+
+  for (const dir of modelDirs) {
+    try {
+      for await (const file of glob.scan({
+        cwd: dir,
+        absolute: true,
+        onlyFiles: true,
+      })) {
+        if (file.endsWith('.d.ts') || file.endsWith('/index.ts')) continue
+
+        const modelName = file.split('/').pop()?.replace('.ts', '') || ''
+        if (!modelName || loadedModels.has(modelName) || protectedGlobals.has(modelName)) continue
+
+        try {
+          const module = await import(file)
+          if (module.default) {
+            (globalThis as any)[modelName] = module.default
+            loadedModels.add(modelName)
+          }
+        } catch {
+          // Model may have unresolved dependencies during bootstrap
+        }
+      }
+    } catch {
+      // Directory may not exist
+    }
+  }
+
+  // 4. Load all Job instances from app/Jobs into globalThis
+  // This enables using SendWelcomeEmail.dispatch() without imports
+  const jobsDir = path.userJobsPath()
+  const loadedJobs = new Set<string>()
+
+  try {
+    for await (const file of glob.scan({
+      cwd: jobsDir,
+      absolute: true,
+      onlyFiles: true,
+    })) {
+      if (file.endsWith('.d.ts') || file.endsWith('/index.ts')) continue
+
+      const jobName = file.split('/').pop()?.replace('.ts', '') || ''
+      if (!jobName || loadedJobs.has(jobName) || protectedGlobals.has(jobName)) continue
+
+      try {
+        const module = await import(file)
+        if (module.default) {
+          (globalThis as any)[jobName] = module.default
+          loadedJobs.add(jobName)
+        }
+      } catch {
+        // Job may have unresolved dependencies during bootstrap
+      }
+    }
+  } catch {
+    // Directory may not exist
+  }
+
+  // 5. Load all Controller classes into globalThis
+  // This enables using ComingSoonController without imports
+  // Priority: user controllers > default controllers
+  const controllerDirs = [
+    path.userControllersPath(),
+    path.storagePath('framework/defaults/app/Controllers'),
+  ]
+  const loadedControllers = new Set<string>()
+
+  for (const dir of controllerDirs) {
+    try {
+      for await (const file of glob.scan({
+        cwd: dir,
+        absolute: true,
+        onlyFiles: true,
+      })) {
+        if (file.endsWith('.d.ts') || file.endsWith('/index.ts')) continue
+
+        const controllerName = file.split('/').pop()?.replace('.ts', '') || ''
+        if (!controllerName || loadedControllers.has(controllerName) || protectedGlobals.has(controllerName)) continue
+
+        try {
+          const module = await import(file)
+          if (module.default) {
+            (globalThis as any)[controllerName] = module.default
+            loadedControllers.add(controllerName)
+          }
+        } catch {
+          // Controller may have unresolved dependencies during bootstrap
+        }
+      }
+    } catch {
+      // Directory may not exist
+    }
+  }
+}
+
+// Load auto-imports for server/API contexts (serve, any server process)
+// Skip for fast commands (dev, build, test, etc.) and CLI info commands.
+// `args[0]` may be undefined when running a script directly (e.g. dev subprocess);
+// guard so .includes() doesn't accidentally treat that as a CLI info command.
+// `./buddy dev` server subprocesses set STACKS_DEV_SERVER=1. They load only
+// what they need themselves — the API injects globals via injectGlobalAutoImports
+// and reads the cached package-discovery manifest, while the frontend/docs
+// servers never touch models — so the preloader's eager ~800ms auto-import +
+// discoverPackages pass is redundant work on the critical boot path. Skip it.
+const skipAutoImports = skipPreloader || process.env.STACKS_DEV_SERVER === '1' || (args.length > 0 && ['--version', '-v', 'version', '--help', '-h', 'help'].includes(args[0]))
+if (!skipAutoImports) {
+  await loadAutoImports()
+
+  // Run package auto-discovery after all imports are loaded
+  try {
+    const { discoverPackages } = await import('@stacksjs/actions')
+    await discoverPackages()
+  }
+  catch {
+    // Discovery may fail during early bootstrap — not critical
+  }
+}

package/resources/types/README.md

@@ -0,0 +1,3 @@
+# The Types Folder
+
+Any type you export in this namespace will automatically be available without import throughout your application.

package/resources/views/cart.stx

@@ -0,0 +1,149 @@
+@extends('layouts/storefront')
+
+@section('title', 'Your cart')
+
+<script server>
+const Database = require('bun:sqlite').Database
+const path = require('path')
+
+const dbPath = path.resolve(process.cwd(), process.env.DB_DATABASE_PATH || 'database/stacks.sqlite')
+const db = new Database(dbPath, { readonly: true })
+
+const token = (typeof requestContext !== 'undefined') ? requestContext.cookie('stacks_cart') : null
+let items = []
+let cart = null
+
+if (token) {
+  cart = db.query(`SELECT * FROM carts WHERE session_token = ?1 AND status = 'active' LIMIT 1`).get(token)
+  if (cart) {
+    items = db.query(`
+      SELECT ci.id, ci.quantity, ci.unit_price, ci.total_price, ci.product_name,
+            ci.product_image, ci.product_sku, p.weight_grams
+      FROM cart_items ci
+      LEFT JOIN products p ON p.slug = ci.product_sku
+      WHERE ci.cart_id = ?1
+      ORDER BY ci.id ASC
+    `).all(cart.id).map((row) => {
+      const qty = Number(row.quantity)
+      const price = Number(row.unit_price)
+      const lineTotal = Number(row.total_price)
+      return {
+        id: row.id,
+        slug: row.product_sku,
+        name: row.product_name,
+        weight: row.weight_grams ? `${row.weight_grams}g` : '',
+        qty,
+        priceLabel: `$${price.toFixed(2)}`,
+        lineTotal,
+        lineTotalLabel: `$${lineTotal.toFixed(2)}`,
+        image: row.product_image,
+      }
+    })
+  }
+}
+
+// Mirror the rule used by PlaceOrderAction so the price the shopper
+// sees in their cart matches the total they're actually charged. Both
+// sides read STOREFRONT_FREE_SHIPPING_THRESHOLD / STOREFRONT_FLAT_SHIPPING
+// from the environment with the same defaults — keep them in sync via
+// app/Actions/Storefront/_shipping.ts when changing.
+const FREE_SHIPPING_THRESHOLD = Number(process.env.STOREFRONT_FREE_SHIPPING_THRESHOLD ?? 40) || 40
+const FLAT_SHIPPING = Number(process.env.STOREFRONT_FLAT_SHIPPING ?? 5) || 5
+const subtotal = items.reduce((sum, i) => sum + i.lineTotal, 0)
+const shipping = subtotal <= 0 ? 0 : (subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : FLAT_SHIPPING)
+const total = subtotal + shipping
+const remainingForFree = Math.max(0, FREE_SHIPPING_THRESHOLD - subtotal)
+
+// Pre-format every numeric so the OrderSummary component template doesn't
+// have to call .toFixed() on a defineProps local — STX's SSR pass doesn't
+// reliably expose those locals, so callers do the formatting.
+const subtotalLabel = `$${subtotal.toFixed(2)}`
+const shippingLabel = shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`
+const totalLabel = `$${total.toFixed(2)}`
+const freeShippingNote = (shipping > 0 && remainingForFree > 0)
+  ? `Add $${remainingForFree.toFixed(2)} more for free shipping.`
+  : ''
+</script>
+
+@section('content')
+  <div class="mx-auto px-6 py-12 max-w-5xl">
+
+    <p class="font-medium text-stone-500 text-xs tracking-wider uppercase">Your bowl</p>
+    <h1 class="mt-2 font-bold text-4xl text-stone-900 tracking-tight">Cart</h1>
+    <p class="mt-2 text-stone-600">{{ items.length }} item{{ items.length === 1 ? '' : 's' }}{{ items.length > 0 ? ' ready to ship' : '' }}.</p>
+
+    @if (items.length === 0)
+      <div class="mt-12 p-12 md:p-16 text-center bg-stone-50 border border-dashed border-stone-300 rounded-3xl">
+        <div class="inline-flex items-center justify-center mx-auto h-14 w-14 bg-stone-100 rounded-full">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-stone-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c.51 0 .956-.343 1.087-.835l1.872-7.024A1.125 1.125 0 0019.797 5.25H5.106M7.5 14.25L5.106 5.25M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /></svg>
+        </div>
+        <p class="mt-5 font-medium text-base text-stone-700">Your cart is empty.</p>
+        <p class="mt-1 text-sm text-stone-500">Pick a treat and we'll start your bowl.</p>
+        <a href="/products" class="inline-flex gap-2 items-center mt-6 px-6 py-3 font-semibold text-sm text-stone-50 bg-stone-900 hover:bg-stone-800 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-50 focus-visible:ring-stone-900 transition-colors">
+          Browse the shop
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+        </a>
+      </div>
+    @else
+      <div class="grid gap-10 items-start lg:gap-12 lg:grid-cols-[2fr_1fr] mt-10">
+
+        <div class="space-y-4">
+          @foreach (items as item)
+            <article class="flex gap-4 p-4 bg-stone-50 border border-stone-200 rounded-2xl hover:border-stone-300 transition-colors">
+              <a
+                href="/products/{{ item.slug }}"
+                class="block overflow-hidden flex-shrink-0 h-24 w-24 bg-stone-200 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-50 focus-visible:ring-stone-900"
+                aria-label="View {{ item.name }}"
+              >
+                <img src="{{ item.image }}" alt="" class="object-cover h-full w-full">
+              </a>
+              <div class="flex flex-1 flex-col min-w-0">
+                <div class="flex gap-3 items-start justify-between">
+                  <div class="min-w-0">
+                    <a href="/products/{{ item.slug }}" class="block font-semibold text-stone-900 truncate hover:underline">{{ item.name }}</a>
+                    @if (item.weight)
+                      <p class="mt-0.5 text-stone-500 text-xs">{{ item.weight }} · {{ item.priceLabel }} each</p>
+                    @else
+                      <p class="mt-0.5 text-stone-500 text-xs">{{ item.priceLabel }} each</p>
+                    @endif
+                  </div>
+                  <p class="font-semibold text-stone-900 whitespace-nowrap">{{ item.lineTotalLabel }}</p>
+                </div>
+                <div class="flex gap-3 items-end justify-between mt-auto pt-3">
+                  <form action="/api/cart/update" method="POST" class="inline-flex overflow-hidden items-center border border-stone-300 rounded-full" data-cart-row>
+                    <input type="hidden" name="item_id" value="{{ item.id }}">
+                    <button type="submit" name="quantity" value="{{ item.qty - 1 }}" class="px-3 py-1.5 text-stone-600 hover:text-stone-900 focus-visible:bg-stone-100 hover:bg-stone-100 focus-visible:outline-none transition-colors" aria-label="Decrease quantity">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"/></svg>
+                    </button>
+                    <span class="px-2 min-w-[1.5rem] font-semibold tabular-nums text-center text-sm text-stone-900">{{ item.qty }}</span>
+                    <button type="submit" name="quantity" value="{{ item.qty + 1 }}" class="px-3 py-1.5 text-stone-600 hover:text-stone-900 focus-visible:bg-stone-100 hover:bg-stone-100 focus-visible:outline-none transition-colors" aria-label="Increase quantity">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/></svg>
+                    </button>
+                  </form>
+                  <form action="/api/cart/update" method="POST">
+                    <input type="hidden" name="item_id" value="{{ item.id }}">
+                    <input type="hidden" name="quantity" value="0">
+                    <button type="submit" class="font-medium text-stone-500 text-xs underline-offset-4 focus-visible:text-stone-900 focus-visible:underline hover:text-stone-900 hover:underline focus-visible:outline-none transition-colors" aria-label="Remove {{ item.name }}">Remove</button>
+                  </form>
+                </div>
+              </div>
+            </article>
+          @endforeach
+        </div>
+
+        <OrderSummary
+          subtotalLabel="{{ subtotalLabel }}"
+          shippingLabel="{{ shippingLabel }}"
+          totalLabel="{{ totalLabel }}"
+          freeShippingNote="{{ freeShippingNote }}"
+          ctaHref="/checkout/contact"
+          ctaLabel="Checkout"
+          secondaryHref="/products"
+          secondaryLabel="Keep shopping"
+          :sticky="true"
+        />
+
+      </div>
+    @endif
+  </div>
+@endsection

package/resources/views/checkout/contact.stx

@@ -0,0 +1,101 @@
+@extends('layouts/storefront')
+
+@section('title', 'Checkout — Contact')
+
+<script server>
+const Database = require('bun:sqlite').Database
+const path = require('path')
+
+const dbPath = path.resolve(process.cwd(), process.env.DB_DATABASE_PATH || 'database/stacks.sqlite')
+const db = new Database(dbPath, { readonly: true })
+
+const token = (typeof requestContext !== 'undefined') ? requestContext.cookie('stacks_cart') : null
+let items = []
+let cart = null
+
+if (token) {
+  cart = db.query(`SELECT * FROM carts WHERE session_token = ?1 AND status = 'active' LIMIT 1`).get(token)
+  if (cart) {
+    items = db.query(`
+      SELECT product_name, quantity, total_price
+      FROM cart_items WHERE cart_id = ?1 ORDER BY id ASC
+    `).all(cart.id).map((row) => {
+      const qty = Number(row.quantity)
+      const lineTotal = Number(row.total_price)
+      return {
+        name: row.product_name,
+        qty,
+        lineTotal,
+        lineTotalLabel: `$${lineTotal.toFixed(2)}`,
+      }
+    })
+  }
+}
+
+// Mirror the rule in PlaceOrderAction's _shipping helper so the running
+// totals on every checkout step match what gets charged.
+const FREE_SHIPPING_THRESHOLD = Number(process.env.STOREFRONT_FREE_SHIPPING_THRESHOLD ?? 40) || 40
+const FLAT_SHIPPING = Number(process.env.STOREFRONT_FLAT_SHIPPING ?? 5) || 5
+const subtotal = items.reduce((s, i) => s + i.lineTotal, 0)
+const shipping = subtotal <= 0 ? 0 : (subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : FLAT_SHIPPING)
+const total = subtotal + shipping
+const remainingForFree = Math.max(0, FREE_SHIPPING_THRESHOLD - subtotal)
+
+const subtotalLabel = `$${subtotal.toFixed(2)}`
+const shippingLabel = shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`
+const totalLabel = `$${total.toFixed(2)}`
+const freeShippingNote = (shipping > 0 && remainingForFree > 0)
+  ? `Add $${remainingForFree.toFixed(2)} more for free shipping.`
+  : ''
+
+const prefilledEmail = cart?.email || ''
+</script>
+
+@section('content')
+  <div class="mx-auto px-6 py-12 max-w-5xl">
+    <CheckoutSteps current="contact" />
+
+    @if (items.length === 0)
+      <div class="p-12 text-center border border-dashed border-stone-300 rounded-3xl">
+        <p class="text-stone-500">Your cart is empty.</p>
+        <a href="/products" class="inline-flex mt-6 px-6 py-3 font-semibold text-sm text-stone-50 bg-stone-900 hover:bg-stone-800 rounded-full">Browse the shop</a>
+      </div>
+    @else
+      <div class="grid gap-10 items-start md:grid-cols-[1fr_360px]">
+        <div>
+          <h1 class="font-bold text-3xl text-stone-900 tracking-tight">Contact</h1>
+          <p class="mt-2 text-stone-600">We'll send your receipt and tracking here.</p>
+
+          <form action="/api/checkout/contact" method="POST" class="mt-8 space-y-5">
+            <div>
+              <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">Email</label>
+              <input
+                type="email"
+                name="email"
+                required
+                autocomplete="email"
+                value="{{ prefilledEmail }}"
+                class="mt-1 px-4 py-3 w-full text-sm border border-stone-300 rounded-2xl focus:border-stone-900 focus:outline-none"
+              >
+            </div>
+            <div class="flex gap-4 items-center justify-between">
+              <a href="/cart" class="text-sm text-stone-500 hover:text-stone-900">← Back to cart</a>
+              <button type="submit" class="px-6 py-3 font-semibold text-sm text-stone-50 bg-stone-900 hover:bg-stone-800 rounded-full transition-colors">
+                Continue to shipping
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <OrderSummary
+          :items="items"
+          subtotalLabel="{{ subtotalLabel }}"
+          shippingLabel="{{ shippingLabel }}"
+          totalLabel="{{ totalLabel }}"
+          freeShippingNote="{{ freeShippingNote }}"
+          :showItems="true"
+        />
+      </div>
+    @endif
+  </div>
+@endsection