@stacksjs/defaults 0.70.54

package/resources/components/Storefront/Footer.stx

@@ -0,0 +1,81 @@
+<script>
+interface FooterColumn {
+  title: string
+  links: { href: string, label: string }[]
+}
+
+interface FooterProps {
+  brandName?: string
+  brandMark?: string
+  tagline?: string
+  columns?: FooterColumn[]
+  byline?: string
+  techByline?: string
+}
+
+const {
+  brandName = 'Stacks Store',
+  brandMark = 's.',
+  tagline = 'One ingredient. Nothing else. Real food for real animals.',
+  columns = [
+    {
+      title: 'Shop',
+      links: [
+        { href: '/products', label: 'All treats' },
+        { href: '/cart', label: 'Cart' },
+      ],
+    },
+    {
+      title: 'Brand',
+      links: [
+        { href: '/about', label: 'Our standard' },
+        { href: '/about#sourcing', label: 'Sourcing' },
+        { href: '/about#testing', label: 'Testing' },
+      ],
+    },
+    {
+      title: 'Help',
+      links: [
+        { href: '/contact', label: 'Contact' },
+        { href: '/faq', label: 'FAQ' },
+        { href: '/shipping', label: 'Shipping & returns' },
+      ],
+    },
+  ],
+  byline = `© ${new Date().getFullYear()} Stacks Store. All rights reserved.`,
+  techByline = 'Built on Stacks · Bun · TypeScript · STX',
+} = defineProps<FooterProps>()
+</script>
+
+<footer class="mt-24 bg-stone-100 border-stone-200 border-t">
+  <div class="grid gap-8 grid-cols-2 md:gap-12 md:grid-cols-4 mx-auto px-6 py-14 max-w-6xl text-sm">
+    <div class="col-span-2 md:col-span-1">
+      <a href="/" class="inline-flex gap-2 items-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-100 focus-visible:ring-stone-900 group">
+        <span class="inline-flex items-center justify-center h-9 w-9 font-bold text-sm text-stone-50 bg-stone-900 rounded-full transition-transform group-hover:scale-105">{{ brandMark }}</span>
+        <span class="font-bold text-base text-stone-900 tracking-tight">{{ brandName }}</span>
+      </a>
+      <p class="mt-4 leading-relaxed text-stone-600">{{ tagline }}</p>
+    </div>
+    @foreach (columns as col)
+      <div>
+        <p class="mb-3 font-semibold text-stone-900 text-xs tracking-wider uppercase">{{ col.title }}</p>
+        <ul class="space-y-2.5 text-stone-600">
+          @foreach (col.links as link)
+            <li>
+              <a
+                href="{{ link.href }}"
+                class="underline-offset-4 focus-visible:text-stone-900 focus-visible:underline hover:text-stone-900 rounded-sm focus-visible:outline-none transition-colors"
+              >{{ link.label }}</a>
+            </li>
+          @endforeach
+        </ul>
+      </div>
+    @endforeach
+  </div>
+  <div class="border-stone-200 border-t">
+    <div class="flex flex-col gap-2 items-center justify-between md:flex-row mx-auto px-6 py-6 max-w-6xl text-stone-500 text-xs">
+      <p>{{ byline }}</p>
+      <p>{{ techByline }}</p>
+    </div>
+  </div>
+</footer>

package/resources/components/Storefront/Header.stx

@@ -0,0 +1,66 @@
+<script>
+interface NavLink {
+  href: string
+  label: string
+}
+
+interface HeaderProps {
+  brandName?: string
+  brandMark?: string
+  links?: NavLink[]
+  cartCount?: number
+}
+
+const {
+  brandName = 'Stacks Store',
+  brandMark = 's.',
+  links = [
+    { href: '/products', label: 'Shop' },
+    { href: '/about', label: 'Our Standard' },
+  ],
+  cartCount = 0,
+} = defineProps<HeaderProps>()
+</script>
+
+<header class="sticky top-0 z-30 bg-stone-50/95 border-b border-stone-200 backdrop-blur">
+  <div class="flex gap-6 items-center justify-between mx-auto px-6 py-5 max-w-6xl">
+    <a
+      href="/"
+      data-stx-link
+      data-stx-exact-active-class="!text-stone-900"
+      class="flex gap-2 items-center 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 group"
+      aria-label="{{ brandName }} — home"
+    >
+      <span class="inline-flex items-center justify-center h-9 w-9 font-bold text-sm text-stone-50 bg-stone-900 rounded-full transition-transform group-hover:scale-105">{{ brandMark }}</span>
+      <span class="font-bold text-xl tracking-tight">{{ brandName }}</span>
+    </a>
+
+    <nav class="hidden md:flex gap-8 items-center font-medium text-sm text-stone-600" data-stx-nav>
+      @foreach (links as link)
+        <a
+          href="{{ link.href }}"
+          data-stx-link
+          data-stx-active-class="text-stone-900"
+          class="relative focus-visible:text-stone-900 hover:text-stone-900 focus-visible:outline-none transition-colors [&.text-stone-900]:after:-bottom-2 [&.text-stone-900]:after:absolute [&.text-stone-900]:after:bg-stone-900 [&.text-stone-900]:after:content-[''] [&.text-stone-900]:after:h-0.5 [&.text-stone-900]:after:left-0 [&.text-stone-900]:after:right-0 [&.text-stone-900]:after:rounded-full"
+        >{{ link.label }}</a>
+      @endforeach
+    </nav>
+
+    <div class="flex gap-3 items-center">
+      <a
+        href="/cart"
+        data-stx-link
+        data-stx-active-class="text-stone-900 border-stone-900"
+        class="inline-flex relative gap-2 items-center px-4 py-2 font-medium text-sm text-stone-700 hover:text-stone-900 border border-stone-300 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 hover:border-stone-900 transition-colors"
+        aria-label="View cart"
+      >
+        <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" aria-hidden="true"><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>
+        <span>Cart</span>
+        <span
+          data-stx-cart-count
+          class="inline-flex items-center justify-center h-5 min-w-[20px] px-1.5 rounded-full bg-stone-900 text-[10px] font-bold text-stone-50 {{ cartCount > 0 ? '' : 'hidden' }}"
+        >{{ cartCount }}</span>
+      </a>
+    </div>
+  </div>
+</header>

package/resources/components/Storefront/OrderSummary.stx

@@ -0,0 +1,79 @@
+<script>
+interface OrderSummaryItem {
+  name: string
+  qty: number
+  /** Pre-formatted line total label, e.g. "$22.00". Format at the call site. */
+  lineTotalLabel: string
+}
+
+interface OrderSummaryProps {
+  items?: OrderSummaryItem[]
+  /** Pre-formatted price labels — STX defineProps numerics aren't in scope
+   *  for SSR template evaluation, so .toFixed() etc. has to happen at the
+   *  caller's <script server> block. */
+  subtotalLabel: string
+  shippingLabel: string
+  totalLabel: string
+  /** Optional, pre-formatted "Add $X.XX more for free shipping." nudge.
+   *  When empty/omitted the nudge is hidden — let the caller decide. */
+  freeShippingNote?: string
+  showItems?: boolean
+  ctaHref?: string
+  ctaLabel?: string
+  secondaryHref?: string
+  secondaryLabel?: string
+  sticky?: boolean
+}
+
+const {
+  items = [],
+  subtotalLabel,
+  shippingLabel,
+  totalLabel,
+  freeShippingNote = '',
+  showItems = false,
+  ctaHref = '',
+  ctaLabel = '',
+  secondaryHref = '',
+  secondaryLabel = '',
+  sticky = false,
+} = defineProps<OrderSummaryProps>()
+</script>
+
+<aside class="rounded-2xl border border-stone-200 p-6 {{ sticky ? 'lg:sticky lg:top-28' : '' }}">
+  <p class="font-semibold text-stone-500 text-xs tracking-wider uppercase">Order summary</p>
+
+  @if (showItems && items.length > 0)
+    <ul class="mt-4 space-y-2 text-sm">
+      @foreach (items as item)
+        <li class="flex gap-3 justify-between">
+          <span class="text-stone-700">{{ item.qty }}× {{ item.name }}</span>
+          <span class="font-medium text-stone-900">{{ item.lineTotalLabel }}</span>
+        </li>
+      @endforeach
+    </ul>
+    <hr class="my-4 border-stone-200">
+  @endif
+
+  <dl class="space-y-3 text-sm {{ showItems ? '' : 'mt-4' }}">
+    <div class="flex justify-between"><dt class="text-stone-600">Subtotal</dt><dd class="font-semibold text-stone-900">{{ subtotalLabel }}</dd></div>
+    <div class="flex justify-between"><dt class="text-stone-600">Shipping</dt><dd class="font-semibold text-stone-900">{{ shippingLabel }}</dd></div>
+    @if (freeShippingNote)
+      <p class="px-3 py-2 text-emerald-700 text-xs bg-emerald-50 rounded-lg">{{ freeShippingNote }}</p>
+    @endif
+  </dl>
+
+  <hr class="my-4 border-stone-200">
+
+  <div class="flex justify-between text-base">
+    <p class="font-semibold text-stone-900">Total</p>
+    <p class="font-bold text-stone-900">{{ totalLabel }}</p>
+  </div>
+
+  @if (ctaHref && ctaLabel)
+    <a href="{{ ctaHref }}" class="block mt-6 px-6 py-3 w-full font-semibold text-center 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">{{ ctaLabel }}</a>
+  @endif
+  @if (secondaryHref && secondaryLabel)
+    <a href="{{ secondaryHref }}" class="block mt-3 px-6 py-3 w-full font-semibold text-center text-sm text-stone-900 border border-stone-300 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 hover:border-stone-900 transition-colors">{{ secondaryLabel }}</a>
+  @endif
+</aside>

package/resources/components/Storefront/ProductCard.stx

@@ -0,0 +1,63 @@
+<script>
+interface ProductCardProps {
+  slug: string
+  name: string
+  /** Pre-formatted price label, e.g. "$22.00". Format at the call site
+   *  — STX defineProps values aren't in scope for SSR template evaluation. */
+  priceLabel: string
+  image: string
+  ingredient?: string
+  weight?: string
+  badge?: string
+  speciesLabel?: string
+}
+
+const {
+  slug,
+  name,
+  priceLabel,
+  image,
+  ingredient = '',
+  weight = '',
+  badge = '',
+  speciesLabel = '',
+} = defineProps<ProductCardProps>()
+</script>
+
+<a href="/products/{{ slug }}" class="block overflow-hidden bg-stone-50 border border-stone-200 rounded-2xl hover:border-stone-900 transition-colors group">
+  <div class="aspect-square overflow-hidden relative bg-stone-200">
+    {{-- decoding=async + loading=lazy so a long catalog grid below the fold
+        doesn't block first paint, and explicit width/height (matched to a
+        square aspect-ratio container above) keep CLS at 0 while images
+        resolve. The card is below the fold on every page that uses it
+        (home featured, /products grid) so lazy is always safe. --}}
+    <img
+      src="{{ image }}"
+      alt="{{ name }}"
+      width="600"
+      height="600"
+      loading="lazy"
+      decoding="async"
+      class="object-cover h-full w-full duration-500 transition-transform group-hover:scale-105"
+    >
+    @if (badge)
+      <span class="absolute left-3 top-3 px-2 py-0.5 font-semibold text-[10px] text-stone-900 tracking-wider uppercase bg-stone-50 rounded-full">{{ badge }}</span>
+    @endif
+  </div>
+  <div class="p-4">
+    <div class="flex items-center justify-between">
+      <span class="font-semibold text-[10px] text-stone-500 tracking-wider uppercase">{{ speciesLabel }}</span>
+      @if (weight)
+        <span class="text-stone-500 text-xs">{{ weight }}</span>
+      @endif
+    </div>
+    <h3 class="mt-2 font-semibold leading-snug text-stone-900">{{ name }}</h3>
+    @if (ingredient)
+      <p class="mt-1 text-stone-500 text-xs">{{ ingredient }}</p>
+    @endif
+    <div class="flex items-center justify-between mt-3">
+      <p class="font-bold text-stone-900">{{ priceLabel }}</p>
+      <span class="font-medium text-stone-500 text-xs group-hover:text-stone-900">View →</span>
+    </div>
+  </div>
+</a>

package/resources/components/Storefront/ProductGallery.stx

@@ -0,0 +1,88 @@
+<script>
+interface ProductGalleryProps {
+  /** Pre-resolved URL for the hero image. STX SSR doesn't reliably
+   *  evaluate `images[0]` against a `defineProps` array at template-
+   *  render time, which left the rendered <img src=""> empty when we
+   *  tried to derive `mainImage = images[0]` inside the component.
+   *  Format at the call site, the way ProductCard takes priceLabel. */
+  image: string
+  /** Optional secondary images for thumbnails. The first thumb mirrors
+   *  the hero so we don't show the same picture twice. */
+  thumbs?: string[]
+  alt?: string
+}
+
+const {
+  image = '',
+  thumbs = [],
+  alt = '',
+} = defineProps<ProductGalleryProps>()
+</script>
+
+<div class="space-y-4" data-stx-gallery>
+  <!-- Hero image — above the fold on every product detail page, so we
+      set fetchpriority=high and skip lazy. width/height locks the
+      aspect-square box so layout doesn't shift while it decodes. -->
+  <div class="aspect-square overflow-hidden bg-stone-100 rounded-3xl">
+    <img
+      src="{{ image }}"
+      alt="{{ alt }}"
+      data-stx-gallery-main
+      width="900"
+      height="900"
+      fetchpriority="high"
+      decoding="async"
+      class="object-cover h-full w-full"
+    >
+  </div>
+
+  @if (thumbs.length > 0)
+    <!-- Thumbnails. Clicking swaps the hero src — vanilla DOM is fine
+        here because this is a self-contained image switcher with no
+        server round-trip. -->
+    <div class="grid gap-3 grid-cols-4">
+      @foreach (thumbs as thumb, i)
+        <button
+          type="button"
+          data-stx-gallery-thumb="{{ thumb }}"
+          class="aspect-square rounded-xl overflow-hidden bg-stone-100 border-2 {{ i === 0 ? 'border-stone-900' : 'border-transparent' }} hover:border-stone-900 transition-colors"
+          aria-label="View image {{ i + 1 }}"
+        >
+          <img src="{{ thumb }}" alt="" class="object-cover h-full w-full">
+        </button>
+      @endforeach
+    </div>
+  @endif
+</div>
+
+<script data-stx-scoped>
+;(() => {
+  // Document-delegated listener: scoping per-thumb scope to its own
+  // [data-stx-gallery] container fixes two prior issues —
+  //   1. Multiple galleries on a page (e.g. recommended-products carousel)
+  //      previously all targeted the first <img data-stx-gallery-main>,
+  //      so clicking a thumb in gallery B updated gallery A's hero.
+  //   2. SPA fragment swaps re-injected the scoped script and stacked
+  //      a duplicate listener on every existing thumb.
+  if (window.__stxGalleryWired) return
+  window.__stxGalleryWired = true
+
+  document.addEventListener('click', (e) => {
+    const target = e.target instanceof Element ? e.target : null
+    if (!target) return
+    const thumb = target.closest('[data-stx-gallery-thumb]')
+    if (!thumb) return
+    const gallery = thumb.closest('[data-stx-gallery]')
+    if (!gallery) return
+    const main = gallery.querySelector('[data-stx-gallery-main]')
+    const src = thumb.getAttribute('data-stx-gallery-thumb')
+    if (src && main) main.setAttribute('src', src)
+    gallery.querySelectorAll('[data-stx-gallery-thumb]').forEach((t) => {
+      t.classList.remove('border-stone-900')
+      t.classList.add('border-transparent')
+    })
+    thumb.classList.remove('border-transparent')
+    thumb.classList.add('border-stone-900')
+  })
+})()
+</script>

package/resources/components/Storefront/QuantitySelector.stx

@@ -0,0 +1,97 @@
+<script>
+interface QuantitySelectorProps {
+  name?: string
+  value?: number
+  min?: number
+  max?: number
+  className?: string
+}
+
+const {
+  name = 'quantity',
+  value = 1,
+  min = 1,
+  max = 99,
+  className = '',
+} = defineProps<QuantitySelectorProps>()
+</script>
+
+<div
+  class="flex items-center rounded-full border border-stone-300 overflow-hidden {{ className }}"
+  data-stx-qty
+  data-min="{{ min }}"
+  data-max="{{ max }}"
+>
+  <button type="button" class="px-4 py-3 text-stone-500 hover:text-stone-900 focus-visible:bg-stone-100 focus-visible:outline-none transition-colors" data-stx-qty-dec aria-label="Decrease quantity">−</button>
+  <input
+    name="{{ name }}"
+    value="{{ value }}"
+    type="number"
+    min="{{ min }}"
+    max="{{ max }}"
+    class="w-12 text-center bg-transparent focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [appearance:textfield]"
+  >
+  <button type="button" class="px-4 py-3 text-stone-500 hover:text-stone-900 focus-visible:bg-stone-100 focus-visible:outline-none transition-colors" data-stx-qty-inc aria-label="Increase quantity">+</button>
+</div>
+
+<script data-stx-scoped>
+;(() => {
+  // Delegate one document-level click handler so:
+  //   1. Repeated SSR'd <script data-stx-scoped> blocks (one per
+  //      QuantitySelector instance) don't stack listeners on the same
+  //      buttons. Without delegation, two QuantitySelectors on a page
+  //      = two listeners per button = doubled increments per click.
+  //   2. SPA fragment swaps that re-inject our scoped script don't
+  //      keep multiplying handlers; the guard below early-returns.
+  if (window.__stxQtyWired) return
+  window.__stxQtyWired = true
+
+  // Default min/max chosen to match the component's defineProps fallbacks.
+  // STX SSR doesn't reliably propagate defineProps default values into
+  // template attribute interpolation, so the rendered HTML can carry
+  // empty `min=""` / `max=""` attributes. Number("") is 0, so without
+  // these fallbacks Math.min(0, qty+1) capped every increment at 0 and
+  // the +/- buttons appeared dead. Read either the data-* on the wrapper
+  // or the input attribute, whichever is non-empty.
+  function bound(wrap, kind, fallback) {
+    const fromData = wrap.getAttribute('data-' + kind)
+    if (fromData && fromData.trim() !== '') {
+      const n = Number(fromData)
+      if (Number.isFinite(n)) return n
+    }
+    const input = wrap.querySelector('input[type="number"]')
+    const fromAttr = input && input.getAttribute(kind)
+    if (fromAttr && fromAttr.trim() !== '') {
+      const n = Number(fromAttr)
+      if (Number.isFinite(n)) return n
+    }
+    return fallback
+  }
+
+  function step(wrap, delta) {
+    const input = wrap.querySelector('input[type="number"]')
+    if (!input) return
+    const min = bound(wrap, 'min', 1)
+    const max = bound(wrap, 'max', 99)
+    const current = Number(input.value)
+    const seed = Number.isFinite(current) ? current : min
+    const next = Math.max(min, Math.min(max, seed + delta))
+    if (next === seed) return
+    input.value = String(next)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+
+  document.addEventListener('click', (e) => {
+    const target = e.target instanceof Element ? e.target : null
+    if (!target) return
+    const dec = target.closest('[data-stx-qty-dec]')
+    const inc = target.closest('[data-stx-qty-inc]')
+    if (!dec && !inc) return
+    const wrap = (dec || inc).closest('[data-stx-qty]')
+    if (!wrap) return
+    e.preventDefault()
+    step(wrap, dec ? -1 : 1)
+  })
+})()
+</script>

package/resources/components/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Stacks Dashboard Component Library
+ * ===================================
+ * Complete dashboard components for building modern admin interfaces.
+ */
+
+// Layout Components
+export { default as DashboardLayout } from './DashboardLayout.vue'
+export { default as SidebarModern } from './SidebarModern.vue'
+export { default as NavbarModern } from './NavbarModern.vue'
+
+// UI Components (re-export from UI folder)
+export * from './UI'

package/resources/emails/email-verification.stx

@@ -0,0 +1,46 @@
+<script server>
+// Email-verification message — sent after sign-up so the user
+// confirms ownership of the address. Uses bundled
+// <EmailLayout>/<EmailButton>/<EmailDivider>/<EmailLink>
+// components (stacksjs/stacks#1901).
+const appName = props.appName || 'Stacks'
+const verificationUrl = props.verificationUrl || '#'
+const expiryMinutes = props.expiryMinutes || 60
+const userName = props.userName || 'there'
+const primaryColor = props.primaryColor || '#3451b2'
+const subject = props.subject || `Verify your email for ${appName}`
+const year = props.year || new Date().getFullYear()
+</script>
+
+<EmailLayout title="{{ subject }}">
+  <template #header>
+    <tr>
+      <td style="background-color:{{ primaryColor }};padding:30px 40px;text-align:center;">
+        <h1 style="margin:0;color:#ffffff;font-size:24px;font-weight:600;">{{ appName }}</h1>
+      </td>
+    </tr>
+  </template>
+
+  <EmailText size="heading">Verify your email address</EmailText>
+  <EmailText>Hi {{ userName }}, please verify your email address to complete your <strong>{{ appName }}</strong> account setup. Click the button below to verify.</EmailText>
+
+  <EmailButton href="{{ verificationUrl }}" bg="{{ primaryColor }}">Verify Email Address</EmailButton>
+
+  <EmailText size="sm" color="#6b7280">This verification link will expire in <strong>{{ expiryMinutes }} minutes</strong>.</EmailText>
+  <EmailText size="sm" color="#6b7280">If you did not create an account, please ignore this email.</EmailText>
+
+  <EmailDivider />
+  <EmailText size="sm" color="#9ca3af" spacing="8px">If the button above doesn't work, copy and paste the following URL into your browser:</EmailText>
+  <p style="margin:0;word-break:break-all;">
+    <EmailLink href="{{ verificationUrl }}" color="{{ primaryColor }}">{{ verificationUrl }}</EmailLink>
+  </p>
+
+  <template #footer>
+    <tr>
+      <td style="padding:20px 40px;background-color:#f9fafb;border-top:1px solid #e5e7eb;">
+        <p style="margin:0;color:#6b7280;font-size:12px;text-align:center;">This is an automated message from {{ appName }}. Please do not reply to this email.</p>
+        <p style="margin:10px 0 0 0;color:#9ca3af;font-size:11px;text-align:center;">&copy; {{ year }} {{ appName }}. All rights reserved.</p>
+      </td>
+    </tr>
+  </template>
+</EmailLayout>

package/resources/emails/layouts/base.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>{{ subject }}</title>
+  <!--[if mso]>
+  <noscript>
+    <xml>
+      <o:OfficeDocumentSettings>
+        <o:PixelsPerInch>96</o:PixelsPerInch>
+      </o:OfficeDocumentSettings>
+    </xml>
+  </noscript>
+  <![endif]-->
+  <style>
+    /* Reset styles */
+    body, table, td, p, a, li, blockquote {
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+    table, td {
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }
+    img {
+      -ms-interpolation-mode: bicubic;
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+    }
+    body {
+      height: 100% !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      width: 100% !important;
+    }
+    a[x-apple-data-detectors] {
+      color: inherit !important;
+      text-decoration: none !important;
+      font-size: inherit !important;
+      font-family: inherit !important;
+      font-weight: inherit !important;
+      line-height: inherit !important;
+    }
+    /* Button styles */
+    .button {
+      display: inline-block;
+      padding: 14px 32px;
+      background-color: {{ primaryColor }};
+      color: #ffffff !important;
+      text-decoration: none;
+      border-radius: 6px;
+      font-weight: 600;
+      font-size: 16px;
+      text-align: center;
+    }
+    .button:hover {
+      background-color: {{ primaryColorDark }};
+    }
+    /* Responsive styles */
+    @media only screen and (max-width: 600px) {
+      .container {
+        width: 100% !important;
+        padding: 20px !important;
+      }
+      .content {
+        padding: 24px !important;
+      }
+      .button {
+        display: block !important;
+        width: 100% !important;
+      }
+    }
+  </style>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f4f4f5; line-height: 1.6;">
+  <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse;">
+    <tr>
+      <td style="padding: 40px 20px;">
+        <table role="presentation" cellpadding="0" cellspacing="0" class="container" style="max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+          <!-- Header -->
+          <tr>
+            <td style="background-color: {{ primaryColor }}; padding: 30px 40px; text-align: center;">
+              <h1 style="margin: 0; color: #ffffff; font-size: 24px; font-weight: 600;">{{ appName }}</h1>
+            </td>
+          </tr>
+          <!-- Content -->
+          <tr>
+            <td class="content" style="padding: 40px;">
+              {{ content }}
+            </td>
+          </tr>
+          <!-- Footer -->
+          <tr>
+            <td style="padding: 20px 40px; background-color: #f9fafb; border-top: 1px solid #e5e7eb;">
+              <p style="margin: 0; color: #6b7280; font-size: 12px; text-align: center;">
+                This is an automated message from {{ appName }}. Please do not reply to this email.
+              </p>
+              <p style="margin: 10px 0 0; color: #9ca3af; font-size: 11px; text-align: center;">
+                &copy; {{ year }} {{ appName }}. All rights reserved.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>