create-nymbal-app 0.4.0 → 0.5.0

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

@@ -1,108 +1,44 @@
 ---
-import '../styles/pages/checkout.css'
+import NymbalElement from '@nymbalhq/web-components/astro'
 import BaseLayout from '../layouts/BaseLayout.astro'
-import CheckoutSteps from '../components/CheckoutSteps.astro'
-import AddressForm from '../components/AddressForm.astro'
-import { fetchCapabilities } from '../lib/api'
+import { fetchCapabilities, fetchCart } from '../lib/api'
 
-const capabilities = await fetchCapabilities()
+const [capabilities, cart] = await Promise.all([
+  fetchCapabilities(),
+  fetchCart(Astro.request.headers.get('cookie')),
+])
 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
+const escapeAttribute = (value: string): string =>
+  value.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;')
+// The payments adapter's client half, the checkout's light-DOM child in its payment slot; a driver the project
+// registers in src/lib/client.ts renders it. HTML, not markup: Astro would take `slot="payment"` on a component's
+// child as a slot of NymbalElement's own.
+const paymentElement = `<nymbal-payment-element slot="payment" data-testid="payment-element" client="${escapeAttribute(
+  JSON.stringify(capabilities.payments.client),
+)}"></nymbal-payment-element>`
 ---
 
-<BaseLayout title="Checkout | Nymbal" description="Complete your purchase.">
+<BaseLayout title="Checkout | Nymbal" description="Complete your purchase." cart={cart}>
   <div class="container section">
-    <h1 style="font-size: 1.75rem; font-weight: var(--nymbal-font-weight-bold, 700); margin-bottom: var(--nymbal-spacing-md, 1rem);">Checkout</h1>
-
-    <div id="checkout-steps-container">
-      <CheckoutSteps currentStep="contact" />
-    </div>
-
-    <div class="checkout-error" id="checkout-error" style="display:none;" data-testid="checkout-error" role="alert"></div>
-
-    <div class="checkout-layout">
-      <div class="checkout-form">
-        <!-- Contact Section -->
-        <section class="checkout-section" id="checkout-contact" data-testid="checkout-contact">
-          <h2 class="checkout-section-title">Contact Information</h2>
-          <form id="contact-form">
-            <div class="form-group">
-              <label for="contact-email">Email Address</label>
-              <input
-                type="email"
-                id="contact-email"
-                name="email"
-                required
-                autocomplete="email"
-                placeholder="you@example.com"
-                data-testid="contact-email"
-              />
-            </div>
-            <button type="submit" class="btn btn-primary" data-testid="contact-continue">
-              Continue to Shipping
-            </button>
-          </form>
-        </section>
-
-        <!-- Shipping Section -->
-        <section class="checkout-section" id="checkout-shipping" style="display:none;" data-testid="checkout-shipping">
-          <h2 class="checkout-section-title">Shipping Address</h2>
-          <form id="shipping-form">
-            <AddressForm id="shipping" />
-            <button type="submit" class="btn btn-primary" style="margin-top: var(--nymbal-spacing-md, 1rem);" data-testid="shipping-continue">
-              Continue to Payment
-            </button>
-          </form>
-        </section>
-
-        <!-- Payment Section -->
-        <section class="checkout-section" id="checkout-payment" style="display:none;" data-testid="checkout-payment">
-          <h2 class="checkout-section-title">Payment</h2>
-          <form id="payment-form" novalidate>
-            <div class="form-group">
-              <label>
-                <input type="checkbox" id="billing-same" checked />
-                Billing address same as shipping
-              </label>
-            </div>
-
-            <div id="billing-fields" style="display:none;">
-              <h3 class="checkout-section-title" style="font-size: 1rem; margin-top: var(--nymbal-spacing-md, 1rem);">Billing Address</h3>
-              <div id="billing-form">
-                <AddressForm id="billing" />
-              </div>
-            </div>
-
-            <div class="payment-section" style="margin-top: var(--nymbal-spacing-md, 1rem);">
-              {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">
-              <button type="submit" class="btn btn-primary" data-testid="place-order">
-                Place Order
-              </button>
-              <p class="checkout-terms">
-                By placing your order, you agree to our terms and conditions.
-              </p>
-            </div>
-          </form>
-        </section>
-      </div>
-
-      <aside class="checkout-summary" id="checkout-summary" data-testid="checkout-summary">
-        <h2 class="checkout-summary-title">Order Summary</h2>
-        <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a);">Loading cart...</p>
-      </aside>
-    </div>
+    <NymbalElement tag="nymbal-checkout" attributes={cart === null ? {} : { cart: JSON.stringify(cart) }}>
+      <Fragment set:html={paymentElement} />
+    </NymbalElement>
   </div>
 </BaseLayout>
 
 <script>
-  import '../scripts/checkout.js'
+  import { NymbalCheckout } from '@nymbalhq/web-components/elements/nymbal-checkout'
+  import { NymbalPaymentElement } from '@nymbalhq/web-components/elements/nymbal-payment-element'
+
+  // The page's own elements; the layout defines the rest.
+  NymbalPaymentElement.define()
+  NymbalCheckout.define()
+
+  // The element places the order; the page only goes to it.
+  document.addEventListener('nymbal:checkout:placed', (event) => {
+    const { orderNumber } = (event as CustomEvent<{ orderNumber: string }>).detail
+    window.location.href = `/order/${encodeURIComponent(orderNumber)}`
+  })
 </script>

package/scaffold/templates/astro/src/pages/fragments/footer.astro

@@ -1,5 +1,8 @@
 ---
-import Footer from '../../components/Footer.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { FOOTER } from '../../lib/chrome'
 Astro.response.headers.set('Cache-Control', 'public, s-maxage=86400, stale-while-revalidate=300')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<Footer />
+<NymbalElement tag="nymbal-site-footer" attributes={FOOTER} />

package/scaffold/templates/astro/src/pages/fragments/header.astro

@@ -1,5 +1,15 @@
 ---
-import Header from '../../components/Header.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { HEADER, headerSlots } from '../../lib/chrome'
+import { headerFragment } from '../../lib/fragments'
+
+const header = await headerFragment()
+if (header instanceof Response) return header
+
 Astro.response.headers.set('Cache-Control', 'public, s-maxage=3600, stale-while-revalidate=300')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<Header />
+<NymbalElement tag="nymbal-site-header" attributes={HEADER}>
+  <Fragment set:html={headerSlots(header.canSearch)} />
+</NymbalElement>

package/scaffold/templates/astro/src/pages/fragments/nav.astro

@@ -1,9 +1,12 @@
 ---
-import CategoryNav from '../../components/CategoryNav.astro'
-import { fetchCategories } from '../../lib/api'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { navFragment } from '../../lib/fragments'
 
-Astro.response.headers.set('Cache-Control', 'public, s-maxage=21600, stale-while-revalidate=300')
+const nav = await navFragment()
+if (nav instanceof Response) return nav
 
-const categories = await fetchCategories()
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=21600, stale-while-revalidate=300')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<CategoryNav categories={categories} />
+<NymbalElement tag="nymbal-category-nav" attributes={{ categories: JSON.stringify(nav.categories) }} />

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

@@ -1,14 +1,13 @@
 ---
-import ProductCard from '../../../components/ProductCard.astro'
-import { fetchProduct } from '../../../lib/api'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { cardProductOf } from '@nymbalhq/web-components/ssr'
+import { productFragment } from '../../../lib/fragments'
 
-Astro.response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=60')
-
-const { slug } = Astro.params
-const product = await fetchProduct(slug!)
+const card = await productFragment(Astro.params.slug!)
+if (card instanceof Response) return card
 
-if (!product) {
-  return new Response('Not found', { status: 404 })
-}
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=60')
+// A fragment has no <meta charset>, so the charset is in the header.
+Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8')
 ---
-<ProductCard product={product} />
+<NymbalElement tag="nymbal-product-card" attributes={{ product: JSON.stringify(cardProductOf(card.product)) }} />

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

@@ -1,9 +1,9 @@
 ---
 import '../styles/pages/home.css'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { cardImageOf, cardProductOf } from '@nymbalhq/web-components/ssr'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import HeroSection from '../components/HeroSection.astro'
-import CategoryNav from '../components/CategoryNav.astro'
-import ProductCard from '../components/ProductCard.astro'
 import NewsletterSignup from '../components/NewsletterSignup.astro'
 import { fetchProducts, fetchCategories } from '../lib/api'
 import { organizationJsonLd } from '../lib/seo'
@@ -12,17 +12,21 @@ const [productResult, categories] = await Promise.all([
   fetchProducts({ limit: 8 }),
   fetchCategories(),
 ])
+const products = productResult.items.map(cardProductOf)
+// The first card's image is the page's likely LCP, and the preload scanner never reaches it inside the grid's shadow
+// root: the head starts it.
+const firstImage = products[0] === undefined ? null : cardImageOf(products[0]).url
 
-const products = productResult.items
 const jsonLd = organizationJsonLd('Nymbal', Astro.url.origin)
 ---
 
 <BaseLayout title="Nymbal — Modern Storefront" jsonLd={jsonLd}>
+  {firstImage && <link slot="head" rel="preload" as="image" href={firstImage} fetchpriority="high" />}
   <HeroSection />
 
   <section class="section container">
     <h2 class="section-title">Shop by Category</h2>
-    <CategoryNav categories={categories} />
+    <NymbalElement tag="nymbal-category-nav" attributes={{ categories: JSON.stringify(categories) }} />
   </section>
 
   <section class="featured-section section">
@@ -31,19 +35,18 @@ const jsonLd = organizationJsonLd('Nymbal', Astro.url.origin)
         <h2 class="section-title" style="margin-bottom: 0;">Featured Products</h2>
         <a href="/products" class="featured-link">View all</a>
       </div>
-      {products.length > 0 ? (
-        <div class="product-grid">
-          {products.map((product) => (
-            <ProductCard product={product} />
-          ))}
-        </div>
-      ) : (
-        <p style="text-align: center; color: var(--nymbal-color-text-muted, #71717a);">
-          Products coming soon.
-        </p>
-      )}
+      <NymbalElement tag="nymbal-product-grid" attributes={{ products: JSON.stringify(products) }} />
     </div>
   </section>
 
   <NewsletterSignup />
 </BaseLayout>
+
+<script>
+  import '../lib/client.js'
+  import { NymbalCategoryNav } from '@nymbalhq/web-components/elements/nymbal-category-nav'
+  import { NymbalProductGrid } from '@nymbalhq/web-components/elements/nymbal-product-grid'
+
+  NymbalCategoryNav.define()
+  NymbalProductGrid.define()
+</script>

package/scaffold/templates/astro/src/pages/order/[orderNumber].astro

@@ -1,9 +1,8 @@
 ---
 import '../../styles/pages/confirmation.css'
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import OrderSummary from '../../components/OrderSummary.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
 import { fetchOrder } from '../../lib/api'
-import { formatPrice } from '../../lib/format'
 import { isPaid, orderHeading } from '../../lib/order-status'
 
 const { orderNumber } = Astro.params
@@ -11,11 +10,22 @@ const order = await fetchOrder(orderNumber!)
 
 if (!order) return Astro.redirect('/404')
 
-const lineItems = (order.lineItems ?? []).map((item) => ({
-  name: `${item.productName}${item.variantName ? ` - ${item.variantName}` : ''}`,
-  qty: item.qty,
-  priceMinor: item.unitPriceMinor,
-}))
+const summary = {
+  items: JSON.stringify(
+    (order.lineItems ?? []).map((item) => ({
+      name: `${item.productName}${item.variantName ? ` - ${item.variantName}` : ''}`,
+      qty: item.qty,
+      unitPriceMinor: item.unitPriceMinor,
+      lineTotalMinor: item.lineTotalMinor,
+    })),
+  ),
+  'subtotal-minor': String(order.subtotalMinor),
+  'discount-minor': String(order.discountTotalMinor ?? 0),
+  'shipping-minor': String(order.shippingTotalMinor ?? 0),
+  'tax-minor': String(order.taxTotalMinor ?? 0),
+  'total-minor': String(order.totalMinor),
+  currency: order.currency,
+}
 
 const shippingAddress = order.shippingAddress
 const heading = orderHeading(order.status)
@@ -63,45 +73,10 @@ const paid = isPaid(order.status)
             <dd style="text-transform: capitalize;" data-testid="order-status">{order.status}</dd>
           </div>
         </dl>
-
-        <div class="confirmation-items">
-          {lineItems.map((item) => (
-            <div class="confirmation-item">
-              <span>
-                <span class="confirmation-item-name">{item.name}</span>
-                <span class="confirmation-item-qty"> x{item.qty}</span>
-              </span>
-              <span class="confirmation-item-price">
-                {formatPrice(item.priceMinor * item.qty, order.currency)}
-              </span>
-            </div>
-          ))}
-        </div>
-
-        <div class="confirmation-totals">
-          <div class="confirmation-total-row">
-            <span>Subtotal</span>
-            <span>{formatPrice(order.subtotalMinor, order.currency)}</span>
-          </div>
-          {order.shippingTotalMinor != null && (
-            <div class="confirmation-total-row">
-              <span>Shipping</span>
-              <span>{order.shippingTotalMinor === 0 ? 'Free' : formatPrice(order.shippingTotalMinor, order.currency)}</span>
-            </div>
-          )}
-          {order.taxTotalMinor != null && (
-            <div class="confirmation-total-row">
-              <span>Tax</span>
-              <span>{formatPrice(order.taxTotalMinor, order.currency)}</span>
-            </div>
-          )}
-          <div class="confirmation-total-row grand-total">
-            <span>Total</span>
-            <span>{formatPrice(order.totalMinor, order.currency)}</span>
-          </div>
-        </div>
       </div>
 
+      <NymbalElement tag="nymbal-order-summary" attributes={{ class: 'confirmation-summary', ...summary }} />
+
       {shippingAddress && (
         <div class="confirmation-card">
           <h2 class="confirmation-card-title">Shipping Address</h2>
@@ -124,4 +99,7 @@ const paid = isPaid(order.status)
 
 <script>
   import '../../scripts/order-status.js'
+  import { NymbalOrderSummary } from '@nymbalhq/web-components/elements/nymbal-order-summary'
+
+  NymbalOrderSummary.define()
 </script>

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

@@ -1,13 +1,8 @@
 ---
 import '../../styles/pages/pdp.css'
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import Breadcrumb from '../../components/Breadcrumb.astro'
-import ImageGallery from '../../components/ImageGallery.astro'
-import PriceDisplay from '../../components/PriceDisplay.astro'
-import StockBadge from '../../components/StockBadge.astro'
-import ReviewList from '../../components/ReviewList.astro'
-import ReviewForm from '../../components/ReviewForm.astro'
-import RelatedProducts from '../../components/RelatedProducts.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { cardProductOf } from '@nymbalhq/web-components/ssr'
 import { fetchProduct, fetchReviews, fetchProducts } from '../../lib/api'
 import { productJsonLd, breadcrumbJsonLd } from '../../lib/seo'
 
@@ -20,7 +15,7 @@ const [reviewsResult, relatedResult] = await Promise.all([
   fetchReviews(product.id),
   fetchProducts({
     limit: 4,
-    category: product.categoryIds?.[0] ?? undefined,
+    category: product.categories?.[0]?.slug,
   }),
 ])
 
@@ -50,40 +45,51 @@ const hasVariantChoice = (product.variants?.length ?? 0) > 1
 ---
 
 <BaseLayout title={`${product.name} | Nymbal`} description={product.shortDescription ?? product.description ?? ''} jsonLd={jsonLd}>
+  <!-- The gallery's main image is the page's LCP: the browser starts it before it parses the body. -->
+  <link slot="head" rel="preload" as="image" href={images[0]!.url} fetchpriority="high" />
   <div class="container section" data-product-slug={product.slug}>
-    <Breadcrumb
-      items={[
-        { label: 'Home', href: '/' },
-        { label: 'Products', href: '/products' },
-        { label: product.name },
-      ]}
+    <NymbalElement
+      tag="nymbal-breadcrumb"
+      attributes={{
+        items: JSON.stringify([
+          { label: 'Home', href: '/' },
+          { label: 'Products', href: '/products' },
+          { label: product.name },
+        ]),
+      }}
     />
 
     <div class="pdp-layout">
-      <ImageGallery images={images} />
+      <NymbalElement tag="nymbal-image-gallery" attributes={{ class: 'pdp-gallery', images: JSON.stringify(images) }} />
 
       <div class="pdp-info">
         <h1 class="pdp-title" data-testid="product-title">{product.name}</h1>
 
-        <PriceDisplay
-          priceMinor={defaultVariant?.priceMinor ?? product.priceMinor}
-          currency={product.currency ?? 'GBP'}
+        <NymbalElement
+          tag="nymbal-product-price"
+          attributes={{
+            'product-id': product.id,
+            'price-minor': String(defaultVariant?.priceMinor ?? product.priceMinor ?? 0),
+            currency: product.currency ?? 'GBP',
+          }}
         />
-
-        <StockBadge stock={stock} />
+        <NymbalElement tag="nymbal-stock-badge" attributes={{ 'product-id': product.id, stock: String(stock) }} />
 
         <div class="pdp-actions">
           {hasVariantChoice && (
-            <nymbal-variant-selector></nymbal-variant-selector>
+            <NymbalElement tag="nymbal-variant-selector" attributes={{ product: JSON.stringify(product) }} />
           )}
 
           <div class="pdp-add-row">
-            <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>
+            <NymbalElement tag="nymbal-quantity-selector" attributes={{ value: '1', min: '1', max: '99' }} />
+            <NymbalElement
+              tag="nymbal-add-to-cart"
+              attributes={{
+                'variant-id': defaultVariant?.id ?? product.id,
+                qty: '1',
+                ...(stock <= 0 && { disabled: '' }),
+              }}
+            />
           </div>
         </div>
 
@@ -97,11 +103,19 @@ const hasVariantChoice = (product.variants?.length ?? 0) > 1
 
     <section class="pdp-reviews">
       <h2 class="pdp-reviews-title">Customer Reviews</h2>
-      <ReviewList reviews={reviews} />
-      <ReviewForm productId={product.id} />
+      <NymbalElement tag="nymbal-review-list" attributes={{ reviews: JSON.stringify(reviews) }} />
+      <NymbalElement tag="nymbal-review-form" attributes={{ class: 'pdp-review-form', 'product-id': product.id }} />
     </section>
 
-    <RelatedProducts products={relatedProducts} />
+    {relatedProducts.length > 0 && (
+      <section class="section">
+        <h2 class="section-title">You may also like</h2>
+        <NymbalElement
+          tag="nymbal-product-grid"
+          attributes={{ products: JSON.stringify(relatedProducts.map(cardProductOf)), lazy: '' }}
+        />
+      </section>
+    )}
   </div>
 </BaseLayout>
 

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

@@ -1,10 +1,8 @@
 ---
 import '../../styles/pages/plp.css'
-import '../../styles/pages/home.css'
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import Breadcrumb from '../../components/Breadcrumb.astro'
-import ProductCard from '../../components/ProductCard.astro'
-import Pagination from '../../components/Pagination.astro'
+import NymbalElement from '@nymbalhq/web-components/astro'
+import { cardImageOf, cardProductOf } from '@nymbalhq/web-components/ssr'
 import { PRODUCT_SORT_LABELS } from '@nymbalhq/types'
 import { fetchProducts, fetchCategories, fetchCapabilities, sortFromUrl } from '../../lib/api'
 
@@ -17,17 +15,20 @@ const [productResult, categories] = await Promise.all([
   fetchCategories(),
 ])
 
-const products = productResult.items
+const products = productResult.items.map(cardProductOf)
+// The first card's image is the page's LCP, and the preload scanner never reaches it inside the grid's shadow root:
+// the head starts it.
+const firstImage = products[0] === undefined ? null : cardImageOf(products[0]).url
 const facets = productResult.facets ?? []
 ---
 
 <BaseLayout title="All Products | Nymbal" description="Browse our full product collection.">
+  {firstImage && <link slot="head" rel="preload" as="image" href={firstImage} fetchpriority="high" />}
   <div class="container section">
-    <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Products' }]} />
+    <NymbalElement tag="nymbal-breadcrumb" attributes={{ items: JSON.stringify([{ label: 'Home', href: '/' }, { label: 'Products' }]) }} />
 
     <div class="plp-header">
       <h1 class="plp-title">All Products</h1>
-      <p class="plp-count" id="product-count">{products.length} products</p>
     </div>
 
     <div class="plp-layout">
@@ -57,20 +58,14 @@ const facets = productResult.facets ?? []
           </div>
         )}
 
-        <div class="product-grid" id="product-grid">
-          {products.map((product) => (
-            <ProductCard product={product} />
-          ))}
-        </div>
-
-        {products.length === 0 && (
-          <div class="plp-empty">
-            <h2 class="plp-empty-title">No products found</h2>
-            <p class="plp-empty-text">Try adjusting your filters.</p>
-          </div>
-        )}
-
-        <Pagination />
+        <NymbalElement
+          tag="nymbal-product-grid"
+          attributes={{
+            products: JSON.stringify(products),
+            source: 'product-list',
+            ...(productResult.nextCursor !== null && { 'has-more': '' }),
+          }}
+        />
       </div>
     </div>
   </div>

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

@@ -1,8 +1,14 @@
 ---
 import '../styles/pages/search.css'
-import '../styles/pages/home.css'
-import '../styles/pages/plp.css'
+import NymbalElement from '@nymbalhq/web-components/astro'
 import BaseLayout from '../layouts/BaseLayout.astro'
+import { fetchSearch } from '../lib/api'
+
+const q = Astro.url.searchParams.get('q')?.trim() ?? ''
+const search = q === '' ? null : await fetchSearch(q, Astro.url.searchParams.get('category'))
+// The results the page's search would show, so they are in the HTML; the search store takes over once it answers.
+const results: Record<string, string> =
+  search === null ? {} : { results: JSON.stringify(search.items), query: q }
 ---
 
 <BaseLayout title="Search | Nymbal" description="Search our product catalogue.">
@@ -22,18 +28,11 @@ import BaseLayout from '../layouts/BaseLayout.astro'
   </div>
 
   <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 class="search-layout">
       <aside class="search-sidebar">
-        <nymbal-product-filter source="search"></nymbal-product-filter>
+        <nymbal-product-filter source="search" empty></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>
+      <NymbalElement tag="nymbal-search-results" attributes={{ 'data-testid': 'search-results', ...results }} />
     </div>
   </div>
 </BaseLayout>

package/scaffold/templates/astro/src/scripts/init-client.ts

@@ -1,4 +1,18 @@
 import '../lib/client.js'
+import { NymbalCartDrawer } from '@nymbalhq/web-components/elements/nymbal-cart-drawer'
+import { NymbalMiniCart } from '@nymbalhq/web-components/elements/nymbal-mini-cart'
+import { NymbalSearchBar } from '@nymbalhq/web-components/elements/nymbal-search-bar'
+import { NymbalSiteFooter } from '@nymbalhq/web-components/elements/nymbal-site-footer'
+import { NymbalSiteHeader } from '@nymbalhq/web-components/elements/nymbal-site-header'
+import { NymbalToast } from '@nymbalhq/web-components/elements/nymbal-toast'
+
+// The layout's elements; each page script defines the ones its page renders.
+NymbalSiteHeader.define()
+NymbalSiteFooter.define()
+NymbalSearchBar.define()
+NymbalMiniCart.define()
+NymbalCartDrawer.define()
+NymbalToast.define()
 
 // Navigate to checkout when the cart drawer checkout button is clicked
 document.addEventListener('nymbal:cart:checkout-clicked', () => {