@stacksjs/defaults 0.70.54

package/resources/views/checkout/payment.stx

@@ -0,0 +1,114 @@
+@extends('layouts/storefront')
+
+@section('title', 'Checkout — Payment')
+
+<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)}`,
+      }
+    })
+  }
+}
+
+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 ready = !!cart?.email && !!cart?.shipping_name && !!cart?.shipping_address
+</script>
+
+@section('content')
+  <div class="mx-auto px-6 py-12 max-w-5xl">
+    <CheckoutSteps current="payment" />
+
+    @if (items.length === 0 || !ready)
+      <div class="p-12 text-center border border-dashed border-stone-300 rounded-3xl">
+        <p class="text-stone-500">Finish the earlier steps first.</p>
+        <a href="/checkout/contact" 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">Go to contact</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">Payment</h1>
+          <p class="mt-2 text-stone-600">No card is charged — this is a demo store. Swap in Stripe at <code class="px-1.5 py-0.5 text-xs bg-stone-100 rounded">Actions/Storefront/PlaceOrderAction.ts</code>.</p>
+
+          <!-- Mock card form. The fields aren't actually submitted —
+              the real submit goes to /api/checkout/place which uses
+              the cart row state set in earlier steps. We render the
+              fields anyway so the experience matches a real store. -->
+          <form action="/api/checkout/place" method="POST" class="mt-8 space-y-5">
+            <div>
+              <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">Card number</label>
+              <input type="text" inputmode="numeric" placeholder="4242 4242 4242 4242" autocomplete="cc-number" 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="grid gap-4 grid-cols-2">
+              <div>
+                <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">Expiry</label>
+                <input type="text" inputmode="numeric" placeholder="MM / YY" autocomplete="cc-exp" 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>
+                <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">CVC</label>
+                <input type="text" inputmode="numeric" placeholder="123" autocomplete="cc-csc" 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>
+
+            <div class="p-4 text-sm bg-stone-50 border border-stone-200 rounded-xl">
+              <p class="font-semibold text-stone-500 text-xs tracking-wider uppercase">Ship to</p>
+              <p class="mt-1 text-stone-900">{{ cart.shipping_name }}</p>
+              <p class="text-stone-700 whitespace-pre-line">{{ cart.shipping_address }}, {{ cart.shipping_city }}, {{ cart.shipping_state }} {{ cart.shipping_zip }}</p>
+              <p class="mt-2 text-stone-500 text-xs">{{ cart.email }}</p>
+            </div>
+
+            <div class="flex gap-4 items-center justify-between pt-2">
+              <a href="/checkout/shipping" class="text-sm text-stone-500 hover:text-stone-900">← Back</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">
+                Place order — {{ totalLabel }}
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <OrderSummary
+          :items="items"
+          subtotalLabel="{{ subtotalLabel }}"
+          shippingLabel="{{ shippingLabel }}"
+          totalLabel="{{ totalLabel }}"
+          freeShippingNote="{{ freeShippingNote }}"
+          :showItems="true"
+        />
+      </div>
+    @endif
+  </div>
+@endsection

package/resources/views/checkout/shipping.stx

@@ -0,0 +1,120 @@
+@extends('layouts/storefront')
+
+@section('title', 'Checkout — Shipping')
+
+<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)}`,
+      }
+    })
+  }
+}
+
+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 ship = {
+  name: cart?.shipping_name || '',
+  address: cart?.shipping_address || '',
+  city: cart?.shipping_city || '',
+  state: cart?.shipping_state || '',
+  zip: cart?.shipping_zip || '',
+}
+</script>
+
+@section('content')
+  <div class="mx-auto px-6 py-12 max-w-5xl">
+    <CheckoutSteps current="shipping" />
+
+    @if (items.length === 0 || !cart?.email)
+      <div class="p-12 text-center border border-dashed border-stone-300 rounded-3xl">
+        <p class="text-stone-500">Start at the contact step.</p>
+        <a href="/checkout/contact" 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">Go to contact</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">Shipping address</h1>
+          <p class="mt-2 text-stone-600">Where should we send the bowl?</p>
+
+          <form action="/api/checkout/shipping" method="POST" class="mt-8 space-y-5">
+            <div>
+              <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">Full name</label>
+              <input type="text" name="shipping_name" required autocomplete="name" value="{{ ship.name }}" 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>
+              <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">Street address</label>
+              <input type="text" name="shipping_address" required autocomplete="street-address" value="{{ ship.address }}" 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="grid gap-4 grid-cols-2">
+              <div>
+                <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">City</label>
+                <input type="text" name="shipping_city" required autocomplete="address-level2" value="{{ ship.city }}" 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>
+                <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">State</label>
+                <input type="text" name="shipping_state" required autocomplete="address-level1" value="{{ ship.state }}" 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>
+
+            <div class="max-w-[200px]">
+              <label class="font-semibold text-stone-500 text-xs tracking-wider uppercase">ZIP / Postal</label>
+              <input type="text" name="shipping_zip" required autocomplete="postal-code" value="{{ ship.zip }}" 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 pt-2">
+              <a href="/checkout/contact" class="text-sm text-stone-500 hover:text-stone-900">← Back</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 payment
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <OrderSummary
+          :items="items"
+          subtotalLabel="{{ subtotalLabel }}"
+          shippingLabel="{{ shippingLabel }}"
+          totalLabel="{{ totalLabel }}"
+          freeShippingNote="{{ freeShippingNote }}"
+          :showItems="true"
+        />
+      </div>
+    @endif
+  </div>
+@endsection

package/resources/views/coming-soon.stx

@@ -0,0 +1,9 @@
+<script>
+defineOptions({
+  name: 'ComingSoonPage',
+})
+</script>
+
+<main>
+  <ComingSoon />
+</main>

package/resources/views/dashboard/custom-page.stx

@@ -0,0 +1,45 @@
+<!--
+  Example Custom Dashboard Page
+
+  Create your own dashboard pages by adding .stx files here.
+  They will automatically be available at /dashboard/[filename]
+-->
+
+<script server>
+const pageTitle = 'Custom Page'
+const pageDescription = 'This is a custom dashboard page'
+
+// Add your custom data fetching here
+const customStats = [
+  { label: 'Custom Metric 1', value: '123' },
+  { label: 'Custom Metric 2', value: '456' },
+]
+</script>
+<div class="page-container">
+    <div class="page-header">
+      <div class="page-header-content">
+        <h1>{{ pageTitle }}</h1>
+        <p>{{ pageDescription }}</p>
+      </div>
+    </div>
+
+    <div class="page-content">
+      <div class="grid grid-2">
+        @foreach (customStats as stat)
+          <div class="stat-card">
+            <div class="stat-card-value">{{ stat }}</div>
+            <div class="stat-card-label">{{ stat.label }}</div>
+          </div>
+        @endforeach
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <span class="card-title">Your Custom Content</span>
+        </div>
+        <div class="p-4">
+          <p>Add your custom dashboard content here.</p>
+        </div>
+      </div>
+    </div>
+  </div>

package/resources/views/dashboard/index.stx

@@ -0,0 +1,24 @@
+<!--
+  Dashboard View Extensions
+
+  This file allows you to customize the Stacks dashboard.
+  Add your custom dashboard views here to extend the default dashboard.
+
+  Example usage:
+  - Override default pages by matching the path
+  - Add new custom pages
+  - Include custom widgets and components
+-->
+
+<script server>
+// Add your custom server-side data here
+const customData = {
+  // Your custom dashboard data
+}
+</script>
+<!--
+    Custom Dashboard Content
+
+    This template will be merged with the default dashboard.
+    You can add custom sections, widgets, or entirely new views.
+  -->

package/resources/views/errors/tester.stx

@@ -0,0 +1,26 @@
+<div class="mx-auto px-6 py-12 max-w-3xl">
+  <h1 class="mb-2 font-semibold text-3xl text-neutral-950 dark:text-white">Error Page Tester</h1>
+  <p class="mb-8 text-neutral-500 text-sm dark:text-neutral-400">
+    Laravel-style debug pages in development. Click a scenario to throw that exception and see the full trace.
+  </p>
+
+  <div class="grid gap-3">
+    @foreach(scenarios as scenario)
+    <a
+      href="{{ scenario.href }}"
+      class="block p-4 bg-white dark:bg-white/[2%] border border-neutral-200 rounded-lg dark:border-white/10 hover:border-rose-500 transition-colors"
+    >
+      <div class="flex gap-4 items-center justify-between mb-1">
+        <span class="font-semibold text-neutral-900 text-sm dark:text-white">{{ scenario.title }}</span>
+        <span class="px-2 py-0.5 font-semibold text-[11px] text-rose-900 tracking-wide uppercase dark:text-rose-100 bg-rose-200 dark:bg-rose-950 rounded">{{ scenario.status }}</span>
+      </div>
+      <p class="mb-2 text-neutral-600 text-xs dark:text-neutral-400">{{ scenario.description }}</p>
+      <code class="font-mono text-[11px] text-neutral-500">{{ scenario.href }}</code>
+    </a>
+    @endforeach
+  </div>
+
+  <div class="mt-8 p-4 text-neutral-500 text-xs dark:text-neutral-400 border border-dashed border-neutral-300 rounded-lg dark:border-white/15">
+    Requires <code class="font-mono">APP_ENV=development</code>. API clients with <code class="font-mono">Accept: application/json</code> receive JSON instead of HTML.
+  </div>
+</div>