create-nymbal-app 0.2.0 → 0.4.0

package/scaffold/templates/astro/src/pages/checkout.astro

@@ -3,6 +3,13 @@ import '../styles/pages/checkout.css'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import CheckoutSteps from '../components/CheckoutSteps.astro'
 import AddressForm from '../components/AddressForm.astro'
+import { fetchCapabilities } from '../lib/api'
+
+const capabilities = await fetchCapabilities()
+if (capabilities === null) {
+  throw new Error('The store did not answer GET /api/capabilities, so checkout cannot tell how to take a payment.')
+}
+const paymentClient = capabilities.payments.client
 ---
 
 <BaseLayout title="Checkout | Nymbal" description="Complete your purchase.">
@@ -69,10 +76,11 @@ import AddressForm from '../components/AddressForm.astro'
             </div>
 
             <div class="payment-section" style="margin-top: var(--nymbal-spacing-md, 1rem);">
-              <label style="margin-bottom: var(--nymbal-spacing-sm, 0.5rem);">Card Details</label>
-              <div id="stripe-card-element" style="padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem); border: 1px solid var(--nymbal-color-border, #e4e4e7); border-radius: var(--nymbal-radius-md, 0.5rem); background: var(--nymbal-color-surface, #fff); min-height: 40px;" data-testid="stripe-card-element">
-                <!-- Stripe CardElement mounts here -->
-              </div>
+              {paymentClient !== null && (
+                <p class="checkout-section-title" style="font-size: 1rem; margin-bottom: var(--nymbal-spacing-sm, 0.5rem);">Payment Details</p>
+              )}
+              <!-- The payments adapter's client half; a driver the project registers in src/lib/client.ts renders it. -->
+              <nymbal-payment-element data-testid="payment-element" client={JSON.stringify(paymentClient)}></nymbal-payment-element>
             </div>
 
             <div class="checkout-submit">

package/scaffold/templates/astro/src/pages/product/[slug].astro

@@ -35,7 +35,8 @@ const images = Array.isArray(product.media) && product.media.length > 0
   : [{ url: `https://picsum.photos/seed/${product.slug}/600/600`, alt: product.name }]
 
 const defaultVariant = product.variants?.[0]
-const stock = defaultVariant?.stock ?? (product.inStock ? 10 : 0)
+// A product with no variants has nothing to sell, so it reads as out of stock.
+const stock = defaultVariant?.stock ?? 0
 
 const jsonLd = productJsonLd(product, Astro.url.origin)
 const breadcrumb = breadcrumbJsonLd([
@@ -80,6 +81,8 @@ const hasVariantChoice = (product.variants?.length ?? 0) > 1
             <nymbal-quantity-selector value="1" min="1" max="99"></nymbal-quantity-selector>
             <nymbal-add-to-cart
               variant-id={defaultVariant?.id ?? product.id}
+              qty="1"
+              disabled={stock <= 0}
             ></nymbal-add-to-cart>
           </div>
         </div>

package/scaffold/templates/astro/src/pages/products/index.astro

@@ -4,11 +4,13 @@ import '../../styles/pages/home.css'
 import BaseLayout from '../../layouts/BaseLayout.astro'
 import Breadcrumb from '../../components/Breadcrumb.astro'
 import ProductCard from '../../components/ProductCard.astro'
-import SortDropdown from '../../components/SortDropdown.astro'
 import Pagination from '../../components/Pagination.astro'
-import { fetchProducts, fetchCategories, sortFromUrl } from '../../lib/api'
+import { PRODUCT_SORT_LABELS } from '@nymbalhq/types'
+import { fetchProducts, fetchCategories, fetchCapabilities, sortFromUrl } from '../../lib/api'
 
-const sort = sortFromUrl(Astro.url)
+const capabilities = await fetchCapabilities()
+const sortKeys = capabilities?.catalog.sortKeys ?? []
+const sort = sortFromUrl(Astro.url, capabilities?.catalog)
 
 const [productResult, categories] = await Promise.all([
   fetchProducts({ limit: 24, sort }),
@@ -30,13 +32,30 @@ const facets = productResult.facets ?? []
 
     <div class="plp-layout">
       <aside class="plp-sidebar">
-        <nymbal-product-filter
-          facets={JSON.stringify(facets)}
-        ></nymbal-product-filter>
+        {facets.length > 0 && (
+          <nymbal-product-filter
+            facets={JSON.stringify(facets)}
+          ></nymbal-product-filter>
+        )}
       </aside>
 
       <div class="plp-grid-area">
-        <SortDropdown sort={sort} />
+        {sortKeys.length > 0 && (
+          <div class="plp-sort-bar">
+            <label for="sort-select">Sort by</label>
+            <nymbal-sort-dropdown
+              sort-keys={JSON.stringify(sortKeys)}
+              value={sort}
+              default-sort={capabilities?.catalog.defaultSort}
+            >
+              <select id="sort-select" data-testid="sort-dropdown">
+                {sortKeys.map((key) => (
+                  <option value={key} selected={key === sort}>{PRODUCT_SORT_LABELS[key]}</option>
+                ))}
+              </select>
+            </nymbal-sort-dropdown>
+          </div>
+        )}
 
         <div class="product-grid" id="product-grid">
           {products.map((product) => (

package/scaffold/templates/astro/src/pages/search.astro

@@ -1,6 +1,7 @@
 ---
 import '../styles/pages/search.css'
 import '../styles/pages/home.css'
+import '../styles/pages/plp.css'
 import BaseLayout from '../layouts/BaseLayout.astro'
 ---
 
@@ -22,11 +23,16 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 
   <div class="container section">
     <p class="search-query-label" id="search-query-label" style="display:none; margin-bottom: var(--nymbal-spacing-md, 1rem);"></p>
-    <div id="search-results" data-testid="search-results">
-      <div class="search-empty">
-        <div class="search-empty-icon" aria-hidden="true">&#128269;</div>
-        <h2 class="search-empty-title">Search our store</h2>
-        <p class="search-empty-text">Type a keyword to find products.</p>
+    <div class="search-layout">
+      <aside class="search-sidebar">
+        <nymbal-product-filter source="search"></nymbal-product-filter>
+      </aside>
+      <div id="search-results" data-testid="search-results">
+        <div class="search-empty">
+          <div class="search-empty-icon" aria-hidden="true">&#128269;</div>
+          <h2 class="search-empty-title">Search our store</h2>
+          <p class="search-empty-text">Type a keyword to find products.</p>
+        </div>
       </div>
     </div>
   </div>

package/scaffold/templates/astro/src/scripts/auth-forms.ts

@@ -1,4 +1,5 @@
 import { client } from '../lib/client.js'
+import { submitOnce } from '../lib/submit-once.js'
 
 function getRedirectUrl(): string {
   const params = new URLSearchParams(window.location.search)
@@ -23,8 +24,7 @@ function hideFormError(formId: string) {
 
 // Login form handler
 const loginForm = document.getElementById('login-form') as HTMLFormElement | null
-loginForm?.addEventListener('submit', async (e) => {
-  e.preventDefault()
+submitOnce(loginForm, async () => {
   hideFormError('login')
 
   const email = (document.getElementById('login-email') as HTMLInputElement)?.value
@@ -35,28 +35,24 @@ loginForm?.addEventListener('submit', async (e) => {
     return
   }
 
-  const submitBtn = loginForm.querySelector('[data-testid="login-submit"]') as HTMLButtonElement | null
-  if (submitBtn) {
-    submitBtn.disabled = true
-    submitBtn.textContent = 'Signing in...'
-  }
+  const submitBtn = loginForm?.querySelector(
+    '[data-testid="login-submit"]',
+  ) as HTMLButtonElement | null
+  if (submitBtn) submitBtn.textContent = 'Signing in...'
 
   try {
     await client.auth.login(email, password)
     window.location.href = getRedirectUrl()
+    return 'leaving'
   } catch (err: any) {
     showFormError('login', err.message ?? 'Invalid email or password.')
-    if (submitBtn) {
-      submitBtn.disabled = false
-      submitBtn.textContent = 'Sign In'
-    }
+    if (submitBtn) submitBtn.textContent = 'Sign In'
   }
 })
 
 // Register form handler
 const registerForm = document.getElementById('register-form') as HTMLFormElement | null
-registerForm?.addEventListener('submit', async (e) => {
-  e.preventDefault()
+submitOnce(registerForm, async () => {
   hideFormError('register')
 
   const email = (document.getElementById('register-email') as HTMLInputElement)?.value
@@ -70,20 +66,17 @@ registerForm?.addEventListener('submit', async (e) => {
     return
   }
 
-  const submitBtn = registerForm.querySelector('[data-testid="register-submit"]') as HTMLButtonElement | null
-  if (submitBtn) {
-    submitBtn.disabled = true
-    submitBtn.textContent = 'Creating account...'
-  }
+  const submitBtn = registerForm?.querySelector(
+    '[data-testid="register-submit"]',
+  ) as HTMLButtonElement | null
+  if (submitBtn) submitBtn.textContent = 'Creating account...'
 
   try {
     await client.auth.register({ email, password, firstName, lastName, phone })
     window.location.href = getRedirectUrl()
+    return 'leaving'
   } catch (err: any) {
     showFormError('register', err.message ?? 'Registration failed. Please try again.')
-    if (submitBtn) {
-      submitBtn.disabled = false
-      submitBtn.textContent = 'Create Account'
-    }
+    if (submitBtn) submitBtn.textContent = 'Create Account'
   }
 })

package/scaffold/templates/astro/src/scripts/cart-page.ts

@@ -48,21 +48,12 @@ function renderCart() {
           </button>
         </div>
         <div class="cart-line-quantity">
-          <button
-            type="button"
-            class="cart-line-quantity-btn"
-            data-action="decrement"
-            data-variant-id="${item.variantId}"
-            aria-label="Decrease quantity"
-          >-</button>
-          <span class="cart-line-quantity-value">${item.qty}</span>
-          <button
-            type="button"
-            class="cart-line-quantity-btn"
-            data-action="increment"
+          <nymbal-quantity-selector
+            value="${item.qty}"
+            min="1"
+            max="99"
             data-variant-id="${item.variantId}"
-            aria-label="Increase quantity"
-          >+</button>
+          ></nymbal-quantity-selector>
         </div>
         <span class="cart-line-total">${formatPrice(item.priceMinor * item.qty, currency)}</span>
       </div>
@@ -115,27 +106,11 @@ function bindCartActions() {
     })
   })
 
-  container!.querySelectorAll('.cart-line-quantity-btn').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const el = btn as HTMLElement
-      const variantId = el.dataset.variantId
-      const action = el.dataset.action
-      if (!variantId) return
-
-      const state = client.cart.getState()
-      const item = (state.items ?? []).find((i: any) => i.variantId === variantId)
-      if (!item) return
-
-      if (action === 'increment') {
-        client.cart.updateQuantity(variantId, item.qty + 1)
-      } else if (action === 'decrement') {
-        if (item.qty <= 1) {
-          client.cart.removeItem(variantId)
-        } else {
-          client.cart.updateQuantity(variantId, item.qty - 1)
-        }
-      }
-    })
+  container!.querySelectorAll<HTMLElement>('nymbal-quantity-selector').forEach((selector) => {
+    selector.addEventListener('nymbal:quantity:changed', ((e: CustomEvent<{ value: number }>) => {
+      const variantId = selector.dataset.variantId
+      if (variantId) client.cart.updateQuantity(variantId, e.detail.value)
+    }) as EventListener)
   })
 }
 

package/scaffold/templates/astro/src/scripts/checkout.ts

@@ -1,5 +1,8 @@
+import type { PaymentConfirmContext, PaymentConfirmation } from '@nymbalhq/sdk'
+import type { NymbalPaymentElement } from '@nymbalhq/web-components'
 import { client } from '../lib/client.js'
 import { formatPrice } from '../lib/format.js'
+import { submitOnce } from '../lib/submit-once.js'
 
 const steps = ['contact', 'shipping', 'payment'] as const
 type Step = (typeof steps)[number]
@@ -151,71 +154,60 @@ shippingForm?.addEventListener('submit', (e) => {
   showStep('payment')
 })
 
-// Stripe setup. The env says only whether a Stripe client exists; the payment flow follows the server's answer.
-let stripe: any = null
-let cardElement: any = null
-
-const stripeKey = import.meta.env.PUBLIC_STRIPE_PUBLISHABLE_KEY
-const isStubPayments =
-  import.meta.env.PUBLIC_NYMBAL_PAYMENTS_PROVIDER === 'native-stub' || !stripeKey
+// The payment step is the store's: the element renders the payments adapter's client half through its driver.
+const paymentForm = document.getElementById('payment-form') as HTMLFormElement | null
+const paymentEl = paymentForm?.querySelector<NymbalPaymentElement>('nymbal-payment-element') ?? null
+const placeOrderBtn = paymentForm?.querySelector<HTMLButtonElement>('[data-testid="place-order"]')
+const paymentBlocked = () => paymentEl?.status === 'error'
 
-async function mountStripe() {
-  if (isStubPayments) {
-    const cardContainer = document.getElementById('stripe-card-element')
-    if (cardContainer) {
-      cardContainer.innerHTML =
-        '<p style="color: var(--nymbal-color-text-muted, #71717a); font-size: 0.875rem; margin: 0;">Test mode — payment skipped</p>'
-    }
-    return
-  }
-  try {
-    const { loadStripe } = await import('@stripe/stripe-js')
-    stripe = await loadStripe(stripeKey)
-    if (!stripe) return
+// While the element cannot take a payment (an unknown driver, a form that failed to load), no order is placed.
+let heldByPayment = false
+function syncPlaceOrder() {
+  if (!placeOrderBtn) return
+  const blocked = paymentBlocked()
+  if (blocked) placeOrderBtn.disabled = true
+  else if (heldByPayment) placeOrderBtn.disabled = false
+  heldByPayment = blocked
+}
+paymentEl?.addEventListener('nymbal:payment:status', syncPlaceOrder)
+syncPlaceOrder()
+paymentForm?.addEventListener(
+  'submit',
+  (e) => {
+    if (!paymentBlocked()) return
+    e.preventDefault()
+    e.stopImmediatePropagation()
+  },
+  true,
+)
 
-    const elements = stripe.elements()
-    cardElement = elements.create('card', {
-      style: {
-        base: {
-          fontSize: '14px',
-          color: '#18181b',
-          '::placeholder': { color: '#71717a' },
-        },
-      },
-    })
+// Place Order renders where Continue was, so the second click of a double-click on Continue lands on it. A click that
+// continues a multi-click is not a decision to pay: the first click of one on Place Order has already submitted.
+placeOrderBtn?.addEventListener('click', (e) => {
+  if (e.detail > 1) e.preventDefault()
+})
 
-    const cardContainer = document.getElementById('stripe-card-element')
-    if (cardContainer) cardElement.mount(cardContainer)
-  } catch {
-    // Stripe unavailable
-  }
+/** No element (a page without a payment step) has nothing to confirm, as a null client does. */
+function confirmPayment(
+  clientSecret: string,
+  context: PaymentConfirmContext,
+): Promise<PaymentConfirmation> {
+  return paymentEl?.confirm(clientSecret, context) ?? Promise.resolve({ ok: true, confirmed: false })
 }
 
-mountStripe()
-
 // Payment form
-const paymentForm = document.getElementById('payment-form') as HTMLFormElement | null
-paymentForm?.addEventListener('submit', async (e) => {
-  e.preventDefault()
+submitOnce(paymentForm, async () => {
   hideError()
 
-  const submitBtn = paymentForm.querySelector(
-    '[data-testid="place-order"]',
-  ) as HTMLButtonElement | null
-  if (submitBtn) {
-    submitBtn.disabled = true
-    submitBtn.textContent = 'Processing...'
-  }
+  if (placeOrderBtn) placeOrderBtn.textContent = 'Processing...'
   const stay = (message: string) => {
     showError(message)
-    if (submitBtn) {
-      submitBtn.disabled = false
-      submitBtn.textContent = 'Place Order'
-    }
+    if (placeOrderBtn) placeOrderBtn.textContent = 'Place Order'
   }
   const leaveFor = (orderNumber: string) => {
     client.checkout.reset()
     window.location.href = `/order/${encodeURIComponent(orderNumber)}`
+    return 'leaving' as const
   }
 
   try {
@@ -248,15 +240,17 @@ paymentForm?.addEventListener('submit', async (e) => {
     if (result.payment.status === 'failed') {
       return stay(client.checkout.getState().error ?? 'Payment failed. Please try again.')
     }
-    // Without a Stripe client (a +stub-pending order) the order page shows it awaiting payment.
-    if (result.payment.status === 'requires_action' && stripe && cardElement) {
-      const { error } = await stripe.confirmCardPayment(result.paymentIntent.clientSecret, {
-        payment_method: { card: cardElement },
+    // Confirmed only when the driver says the payment went through; otherwise the order page shows it awaiting payment.
+    if (result.payment.status === 'requires_action') {
+      const { email, billingAddress } = client.checkout.getState()
+      const confirmation = await confirmPayment(result.paymentIntent.clientSecret, {
+        email: email || undefined,
+        billing: billingAddress ?? undefined,
       })
-      if (error) return stay(error.message ?? 'Payment failed.')
-      client.checkout.markConfirmed()
+      if (!confirmation.ok) return stay(confirmation.error)
+      if (confirmation.confirmed) client.checkout.markConfirmed()
     }
-    leaveFor(result.orderNumber)
+    return leaveFor(result.orderNumber)
   } catch (err: any) {
     stay(err.message ?? 'Payment failed. Please try again.')
   }

package/scaffold/templates/astro/src/scripts/pdp.ts

@@ -1,67 +1,58 @@
+import { STOCK_LABELS, stockLevel } from '@nymbalhq/types'
 import { client } from '../lib/client.js'
 import { formatPrice } from '../lib/format.js'
 
 const slug = document.querySelector<HTMLElement>('[data-product-slug]')?.dataset.productSlug
+const addRow = document.querySelector<HTMLElement>('.pdp-add-row')
+const quantity = addRow?.querySelector('nymbal-quantity-selector')
+const addToCart = addRow?.querySelector('nymbal-add-to-cart')
+
+function setQuantity(qty: number): void {
+  quantity?.setAttribute('value', String(qty))
+  addToCart?.setAttribute('qty', String(qty))
+}
 
 if (slug) {
-  client.product.loadBySlug(slug)
+  // The server rendered variants[0]; a change from it resets the quantity.
+  let shownVariantId = addToCart?.getAttribute('variant-id') ?? null
 
-  client.product.subscribe(() => {
-    const state = client.product.getState()
-    if (!state.product) return
+  addRow?.addEventListener('nymbal:quantity:changed', ((e: CustomEvent<{ value: number }>) => {
+    addToCart?.setAttribute('qty', String(e.detail.value))
+  }) as EventListener)
 
-    const product = state.product
-    const selectedVariant = state.selectedVariant ?? product.variants?.[0]
+  client.product.subscribe(() => {
+    const { product, selectedVariant } = client.product.getState()
+    if (!product) return
+    const variant = selectedVariant ?? product.variants?.[0]
 
-    // Update price display
     const priceEl = document.querySelector('[data-testid="product-price"]')
-    if (priceEl && selectedVariant) {
+    if (priceEl) {
       const price = formatPrice(
-        selectedVariant.priceMinor ?? product.priceMinor,
+        variant?.priceMinor ?? product.priceMinor ?? 0,
         product.currency ?? 'GBP',
       )
       priceEl.innerHTML = `<span>${price}</span>`
     }
 
-    // Update stock badge
-    const stockEl = document.querySelector('[data-testid="stock-badge"]')
-    if (stockEl && selectedVariant) {
-      const stock = selectedVariant.stock ?? 0
-      let statusClass: string
-      let label: string
-
-      if (stock <= 0) {
-        statusClass = 'out-of-stock'
-        label = 'Out of Stock'
-      } else if (stock < 5) {
-        statusClass = 'low-stock'
-        label = 'Low Stock'
-      } else {
-        statusClass = 'in-stock'
-        label = 'In Stock'
-      }
+    const stock = variant?.stock ?? 0
+    const level = stockLevel(stock)
+    const badge = document.querySelector<HTMLElement>('[data-testid="stock-badge"]')
+    if (badge) {
+      badge.dataset.level = level
+      const label = badge.querySelector('[data-stock-label]')
+      if (label) label.textContent = STOCK_LABELS[level]
+    }
 
-      stockEl.className = `pdp-stock ${statusClass}`
-      stockEl.innerHTML = `<span class="pdp-stock-dot" aria-hidden="true"></span>${label}`
+    if (addToCart && variant) {
+      addToCart.setAttribute('variant-id', variant.id)
+      addToCart.toggleAttribute('disabled', stock <= 0)
     }
 
-    // Update add-to-cart variant-id
-    const addToCart = document.querySelector('nymbal-add-to-cart')
-    if (addToCart && selectedVariant) {
-      addToCart.setAttribute('variant-id', selectedVariant.id)
-      if (selectedVariant.stock <= 0) {
-        addToCart.setAttribute('disabled', '')
-      } else {
-        addToCart.removeAttribute('disabled')
-      }
+    if (variant && variant.id !== shownVariantId) {
+      shownVariantId = variant.id
+      setQuantity(1)
     }
   })
 
-  // Listen for variant selection from the web component
-  document.addEventListener('nymbal:variant:selected', ((e: CustomEvent) => {
-    const variantId = e.detail?.variantId
-    if (variantId) {
-      client.product.selectVariant(variantId)
-    }
-  }) as EventListener)
+  client.product.loadBySlug(slug)
 }

package/scaffold/templates/astro/src/scripts/plp.ts

@@ -3,15 +3,15 @@ import { client } from '../lib/client.js'
 import { escapeHtml, formatPrice } from '../lib/format.js'
 
 const gridContainer = document.getElementById('product-grid')
-const sortSelect = document.getElementById('sort-select') as HTMLSelectElement | null
+const sortDropdown = document.querySelector('nymbal-sort-dropdown')
 const loadMoreBtn = document.getElementById('load-more-btn')
 const countEl = document.getElementById('product-count')
 
 // A category page carries its category in the path, which the server render puts on the grid; /products may carry
-// one in the query. The server render also selected the URL's sort in the dropdown.
+// one in the query. The server render puts the sort it resolved from the URL on the dropdown's `value`.
 const urlParams = new URLSearchParams(window.location.search)
 const initialCategory = gridContainer?.dataset.category ?? urlParams.get('category') ?? undefined
-const initialSort = (sortSelect?.value ?? 'newest') as ProductSortKey
+const initialSort = (sortDropdown?.getAttribute('value') || 'newest') as ProductSortKey
 
 function renderProductCard(product: any): string {
   const imageUrl =
@@ -94,9 +94,10 @@ async function init() {
 
 void init()
 
+// The element's event, not its select's `change`: the select may be the element's own rather than the server's.
 // The URL carries the sort, so a reload or a shared link renders the same order server-side.
-sortSelect?.addEventListener('change', () => {
-  const sort = sortSelect.value as ProductSortKey
+sortDropdown?.addEventListener('nymbal:sort:changed', (e) => {
+  const sort = (e as CustomEvent<{ sort: ProductSortKey }>).detail.sort
   const url = new URL(window.location.href)
   url.searchParams.set('sort', sort)
   window.history.replaceState(window.history.state, '', url)

package/scaffold/templates/astro/src/scripts/profile-form.ts

@@ -0,0 +1,57 @@
+import { client } from '../lib/client.js'
+import { submitOnce } from '../lib/submit-once.js'
+
+const form = document.getElementById('profile-form') as HTMLFormElement | null
+const messageEl = document.getElementById('profile-message')
+
+function populateForm() {
+  const profile = client.auth.getState().customer
+  if (!profile) return
+
+  const firstNameEl = document.getElementById('profile-firstName') as HTMLInputElement
+  const lastNameEl = document.getElementById('profile-lastName') as HTMLInputElement
+  const emailEl = document.getElementById('profile-email') as HTMLInputElement
+  const phoneEl = document.getElementById('profile-phone') as HTMLInputElement
+
+  if (firstNameEl) firstNameEl.value = profile.firstName ?? ''
+  if (lastNameEl) lastNameEl.value = profile.lastName ?? ''
+  if (emailEl) emailEl.value = profile.email ?? ''
+  if (phoneEl) phoneEl.value = profile.phone ?? ''
+}
+
+// Load profile data
+async function init() {
+  try {
+    await client.auth.loadProfile()
+  } catch {
+    // ignore
+  }
+  populateForm()
+}
+
+client.auth.subscribe(populateForm)
+init()
+
+submitOnce(form, async () => {
+  if (!form || !messageEl) return
+
+  const firstName = (document.getElementById('profile-firstName') as HTMLInputElement)?.value
+  const lastName = (document.getElementById('profile-lastName') as HTMLInputElement)?.value
+  const phone = (document.getElementById('profile-phone') as HTMLInputElement)?.value
+
+  const submitBtn = form.querySelector('[data-testid="profile-save"]') as HTMLButtonElement | null
+  if (submitBtn) submitBtn.textContent = 'Saving...'
+
+  try {
+    await client.auth.updateProfile({ firstName, lastName, phone })
+    messageEl.textContent = 'Profile updated successfully.'
+    messageEl.style.color = 'var(--nymbal-color-success, #16a34a)'
+    messageEl.style.display = 'block'
+  } catch (err) {
+    messageEl.textContent = err instanceof Error ? err.message : 'Failed to update profile.'
+    messageEl.style.color = 'var(--nymbal-color-error, #dc2626)'
+    messageEl.style.display = 'block'
+  } finally {
+    if (submitBtn) submitBtn.textContent = 'Save Changes'
+  }
+})

package/scaffold/templates/astro/src/scripts/review-form.ts

@@ -0,0 +1,27 @@
+import { client } from '../lib/client.js'
+import { submitOnce } from '../lib/submit-once.js'
+
+const form = document.getElementById('review-form') as HTMLFormElement | null
+const messageEl = document.getElementById('review-form-message')
+
+submitOnce(form, async () => {
+  if (!form || !messageEl) return
+
+  const productId = form.dataset.productId ?? ''
+  const formData = new FormData(form)
+  const rating = Number(formData.get('rating'))
+  const title = String(formData.get('title'))
+  const body = String(formData.get('body'))
+
+  try {
+    await client.adapter.reviews.submit({ productId, rating, title, body })
+    messageEl.textContent = 'Thank you for your review!'
+    messageEl.style.display = 'block'
+    messageEl.style.color = 'var(--nymbal-color-success, #16a34a)'
+    form.reset()
+  } catch {
+    messageEl.textContent = 'Something went wrong. Please try again.'
+    messageEl.style.display = 'block'
+    messageEl.style.color = 'var(--nymbal-color-error, #dc2626)'
+  }
+})