@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Auth/Register.stx

@@ -1,117 +1,101 @@
 @import('../UI/Input', '../UI/Button')
 
-<script server>
-interface RegisterProps {
-  title?: string
-  subtitle?: string
-  name?: string
-  email?: string
-  password?: string
-  passwordConfirmation?: string
-  agreeToTerms?: boolean
-  isLoading?: boolean
-  error?: string
-  errors?: Record<string, any>
-  showLogin?: boolean
-}
-
-const { title = 'Create an account', subtitle = 'Get started with your free account', name = '', email = '', password = '', passwordConfirmation = '', agreeToTerms = false, isLoading = false, error = '', errors = {}, showLogin = true } = defineProps<RegisterProps>()
-
-/**
- * Register Component
- * A clean, modern registration form for the Stacks Dashboard.
- */
-
-// Form state
-// Password strength calculation
-let passwordStrength = 0
-let passwordStrengthLabel = ''
-
-function computePasswordStrength(pw) {
+<script client>
+const emit = defineEmits()
+const title = useReactiveProp<string>('title', 'Create an account')
+const subtitle = useReactiveProp<string>('subtitle', 'Get started with your free account')
+const isLoading = useReactiveProp<boolean>('isLoading', false)
+const error = useReactiveProp<string>('error', '')
+const showLogin = useReactiveProp<boolean>('showLogin', true)
+const name = state('')
+const email = state('')
+const password = state('')
+const passwordConfirmation = state('')
+const agreeToTerms = state(false)
+const errors = state<Record<string, string>>({})
+
+function computePasswordStrength(pw: string): number {
   let score = 0
   if (pw.length >= 8) score++
   if (pw.length >= 12) score++
   if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) score++
   if (/\d/.test(pw)) score++
   if (/[^A-Za-z0-9]/.test(pw)) score++
+  return Math.min(4, score)
+}
 
-  // Map 0-5 score to 0-4 strength
-  passwordStrength = Math.min(4, score)
+const passwordStrength = derived(() => computePasswordStrength(password()))
+const passwordStrengthLabel = derived(() => {
   const labels = ['', 'Weak', 'Fair', 'Good', 'Strong']
-  passwordStrengthLabel = pw.length > 0 ? labels[passwordStrength] : ''
+  return password() ? labels[passwordStrength()] || '' : ''
+})
+
+function setFieldError(field: string, message: string): void {
+  errors.set({ ...errors(), [field]: message })
+}
+
+function fieldError(field: string): string {
+  return errors()[field] || ''
 }
 
-// Validation - validates individual fields on blur, full form on submit
-function validateEmail() {
-  if (!email.trim()) {
-    errors.email = 'Email is required'
-  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-    errors.email = 'Please enter a valid email'
-  } else {
-    errors.email = ''
-  }
+function validateEmail(): void {
+  if (!email().trim())
+    setFieldError('email', 'Email is required')
+  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email()))
+    setFieldError('email', 'Please enter a valid email')
+  else
+    setFieldError('email', '')
 }
 
-function validatePassword() {
-  if (!password) {
-    errors.password = 'Password is required'
-  } else if (password.length < 8) {
-    errors.password = 'Password must be at least 8 characters'
-  } else {
-    errors.password = ''
-  }
-  computePasswordStrength(password)
+function validatePassword(): void {
+  if (!password())
+    setFieldError('password', 'Password is required')
+  else if (password().length < 8)
+    setFieldError('password', 'Password must be at least 8 characters')
+  else
+    setFieldError('password', '')
 }
 
-function validateConfirmation() {
-  if (passwordConfirmation && password !== passwordConfirmation) {
-    errors.passwordConfirmation = 'Passwords do not match'
-  } else {
-    errors.passwordConfirmation = ''
-  }
+function validateConfirmation(): void {
+  setFieldError('passwordConfirmation', passwordConfirmation() && password() !== passwordConfirmation() ? 'Passwords do not match' : '')
 }
 
-function validateForm() {
-  const newErrors = {}
+function validateForm(): boolean {
+  const newErrors: Record<string, string> = {}
 
-  if (!name.trim()) {
+  if (!name().trim())
     newErrors.name = 'Name is required'
-  }
 
-  if (!email.trim()) {
+  if (!email().trim())
     newErrors.email = 'Email is required'
-  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email()))
     newErrors.email = 'Please enter a valid email'
-  }
 
-  if (!password) {
+  if (!password())
     newErrors.password = 'Password is required'
-  } else if (password.length < 8) {
+  else if (password().length < 8)
     newErrors.password = 'Password must be at least 8 characters'
-  }
 
-  if (password !== passwordConfirmation) {
+  if (password() !== passwordConfirmation())
     newErrors.passwordConfirmation = 'Passwords do not match'
-  }
 
-  if (!agreeToTerms) {
+  if (!agreeToTerms())
     newErrors.terms = 'You must agree to the terms'
-  }
 
-  errors = newErrors
+  errors.set(newErrors)
   return Object.keys(newErrors).length === 0
 }
 
-// Emit submit event with credentials
-function handleSubmit(event) {
-  event.preventDefault()
-
-  if (!validateForm()) {
+function handleSubmit(): void {
+  if (!validateForm())
     return
-  }
 
-  // Emit the submit event - parent component handles the actual registration
-  $emit('submit', { name, email, password, password_confirmation: passwordConfirmation })
+  emit('submit', {
+    name: name(),
+    email: email(),
+    password: password(),
+    password_confirmation: passwordConfirmation(),
+  })
 }
 </script>
 <div class="flex items-center justify-center px-4 py-12 min-h-screen">
@@ -119,42 +103,37 @@ function handleSubmit(event) {
     <!-- Logo/Brand -->
     <div class="mb-8 text-center">
       <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
-        <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-        </svg>
+        <span class="h-7 w-7 text-white i-hugeicons-cube"></span>
       </div>
       <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
-        {{ title }}
+        {{ title() }}
       </h1>
       <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
-        {{ subtitle }}
+        {{ subtitle() }}
       </p>
     </div>
 
     <!-- Register Form -->
     <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
       <!-- Error Message -->
-      @if(error)
-        <div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+        <div :if="error()" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
           <div class="flex gap-2 items-center">
             <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
-            <p class="text-red-600 text-sm dark:text-red-400">{{ error }}</p>
+            <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
           </div>
         </div>
-      @endif
 
-      <form @submit="handleSubmit">
+      <form @submit.prevent="handleSubmit">
         <!-- Name Field -->
         <div class="mb-4">
           <Input
             type="text"
             label="Full name"
             placeholder="John Doe"
-            :value="name"
-            @input="name = $event.target.value"
-            :error="errors.name"
+            v-model:value="name"
+            :error="fieldError('name')"
             required
-            :disabled="isLoading"
+            :disabled="isLoading()"
           />
         </div>
 
@@ -164,12 +143,11 @@ function handleSubmit(event) {
             type="email"
             label="Email address"
             placeholder="you@example.com"
-            :value="email"
-            @input="email = $event.target.value"
+            v-model:value="email"
             @blur="validateEmail"
-            :error="errors.email"
+            :error="fieldError('email')"
             required
-            :disabled="isLoading"
+            :disabled="isLoading()"
           />
         </div>
 
@@ -179,27 +157,25 @@ function handleSubmit(event) {
             type="password"
             label="Password"
             placeholder="At least 8 characters"
-            :value="password"
-            @input="password = $event.target.value; validatePassword()"
+            v-model:value="password"
+            @input="validatePassword"
             @blur="validatePassword"
-            :error="errors.password"
+            :error="fieldError('password')"
             required
-            :disabled="isLoading"
+            :disabled="isLoading()"
           />
           <!-- Password Strength Indicator -->
-          @if(password.length > 0)
-            <div class="mt-2">
+            <div :if="password().length > 0" class="mt-2">
               <div class="flex gap-1">
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 1 ? (passwordStrength <= 1 ? 'bg-red-500' : passwordStrength === 2 ? 'bg-orange-500' : passwordStrength === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 2 ? (passwordStrength === 2 ? 'bg-orange-500' : passwordStrength === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 3 ? (passwordStrength === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
-                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 4 ? 'bg-green-500' : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 1 ? (passwordStrength() <= 1 ? 'bg-red-500' : passwordStrength() === 2 ? 'bg-orange-500' : passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 2 ? (passwordStrength() === 2 ? 'bg-orange-500' : passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 3 ? (passwordStrength() === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength() >= 4 ? 'bg-green-500' : 'bg-neutral-200 dark:bg-neutral-700'"></div>
               </div>
-              <p class="mt-1 text-xs" :class="passwordStrength <= 1 ? 'text-red-500' : passwordStrength === 2 ? 'text-orange-500' : passwordStrength === 3 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-500'">
-                {{ passwordStrengthLabel }}
+              <p class="mt-1 text-xs" :class="passwordStrength() <= 1 ? 'text-red-500' : passwordStrength() === 2 ? 'text-orange-500' : passwordStrength() === 3 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-500'">
+                {{ passwordStrengthLabel() }}
               </p>
             </div>
-          @endif
         </div>
 
         <!-- Confirm Password Field -->
@@ -208,11 +184,11 @@ function handleSubmit(event) {
             type="password"
             label="Confirm password"
             placeholder="Confirm your password"
-            :value="passwordConfirmation"
-            @input="passwordConfirmation = $event.target.value; validateConfirmation()"
-            :error="errors.passwordConfirmation"
+            v-model:value="passwordConfirmation"
+            @input="validateConfirmation"
+            :error="fieldError('passwordConfirmation')"
             required
-            :disabled="isLoading"
+            :disabled="isLoading()"
           />
         </div>
 
@@ -222,9 +198,8 @@ function handleSubmit(event) {
             <input
               type="checkbox"
               class="mt-0.5 h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
-              :checked="agreeToTerms"
-              @change="agreeToTerms = $event.target.checked"
-              :disabled="isLoading"
+              x-model="agreeToTerms"
+              :disabled="isLoading()"
             />
             <span class="text-neutral-600 text-sm dark:text-neutral-400">
               I agree to the
@@ -233,9 +208,7 @@ function handleSubmit(event) {
               <a href="/privacy" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Privacy Policy</a>
             </span>
           </label>
-          @if(errors.terms)
-            <p class="mt-1 text-red-600 text-sm dark:text-red-400">{{ errors.terms }}</p>
-          @endif
+            <p :if="fieldError('terms')" class="mt-1 text-red-600 text-sm dark:text-red-400">{{ fieldError('terms') }}</p>
         </div>
 
         <!-- Submit Button -->
@@ -244,63 +217,22 @@ function handleSubmit(event) {
           variant="primary"
           size="lg"
           fullWidth
-          :loading="isLoading"
-          :disabled="isLoading"
+          :loading="isLoading()"
+          :disabled="isLoading()"
         >
-          @if(isLoading)
-            Creating account...
-          @else
-            Create account
-          @endif
+          <span :if="isLoading()">Creating account...</span>
+          <span :if="!isLoading()">Create account</span>
         </Button>
       </form>
 
-      <!-- Divider -->
-      <div class="relative my-6">
-        <div class="flex absolute inset-0 items-center">
-          <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
-        </div>
-        <div class="flex relative justify-center text-xs">
-          <span class="px-2 text-neutral-400 bg-white dark:bg-neutral-900">or continue with</span>
-        </div>
-      </div>
-
-      <!-- Social Login -->
-      <div class="grid gap-3 grid-cols-2">
-        <button
-          type="button"
-          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
-          :disabled="isLoading"
-        >
-          <svg class="h-4 w-4" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-            <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-            <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-            <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-          </svg>
-          Google
-        </button>
-        <button
-          type="button"
-          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
-          :disabled="isLoading"
-        >
-          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-          </svg>
-          GitHub
-        </button>
-      </div>
     </div>
 
     <!-- Login Link -->
-    @if(showLogin)
-      <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+      <p :if="showLogin()" class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
         Already have an account?
         <a href="/login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
           Sign in
         </a>
       </p>
-    @endif
   </div>
 </div>

package/resources/components/Dashboard/Auth/RegisterDashboard.stx

@@ -0,0 +1,47 @@
+<script client>
+import { describeAuthError, useAuth } from '../../../../functions/auth'
+
+const { register } = useAuth()
+const route = useRoute()
+
+const isLoading = state(false)
+const error = state('')
+
+function safeRedirect(): string {
+  const redirect = String(route.query.redirect || '')
+  return redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/'
+}
+
+async function handleRegister(credentials) {
+  isLoading.set(true)
+  error.set('')
+
+  try {
+    const result = await register(credentials)
+
+    if (!result || !('token' in result)) {
+      error.set(describeAuthError(result, 'Registration failed'))
+      return
+    }
+
+    navigate(safeRedirect())
+  }
+  catch (err) {
+    error.set(err.message || 'An error occurred during registration')
+    // eslint-disable-next-line no-console
+    console.error(err)
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+</script>
+
+<template>
+  <Register
+    @submit="handleRegister"
+    :isLoading="isLoading()"
+    :error="error()"
+    :data-auth-status="isLoading() ? 'loading' : 'ready'"
+  />
+</template>

package/resources/components/Dashboard/Auth/TermsDashboard.stx

@@ -0,0 +1,38 @@
+@import('./LegalDocument')
+
+<!-- Terms content rendered inside the shared dashboard legal shell. -->
+<template>
+  <LegalDocument
+    eyebrow="Legal"
+    title="Terms of Service"
+    summary="These terms govern access to the Stacks dashboard and its administrative tools."
+  >
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Authorized access</h2>
+      <p class="mt-2 leading-7">
+        Use the dashboard only for an application you own or are authorized to administer. You are responsible for activity performed through your account and for keeping authentication credentials secure.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Acceptable use</h2>
+      <p class="mt-2 leading-7">
+        Do not use the dashboard to violate applicable law, interfere with another service, bypass access controls, distribute malicious code, or access data without permission.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Application data</h2>
+      <p class="mt-2 leading-7">
+        You remain responsible for the records, files, provider configuration, and other project data managed through the dashboard. Review changes before applying them and maintain backups appropriate for your application.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Service changes</h2>
+      <p class="mt-2 leading-7">
+        Dashboard capabilities may change as the framework evolves. Access can be limited or revoked when needed to protect the application, its users, or connected infrastructure.
+      </p>
+    </section>
+  </LegalDocument>
+</template>

package/resources/components/Dashboard/Billing/BillingPaymentMethodsPanel.stx

@@ -0,0 +1,48 @@
+<script client>
+import type { BillingPaymentMethod } from '../../../../functions/billing/dashboard'
+
+const methods = useReactiveProp('methods', [] as BillingPaymentMethod[])
+
+function brand(value: string): string {
+  if (!value)
+    return 'Payment method'
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
+function expiry(method: BillingPaymentMethod): string {
+  if (!method.expMonth || !method.expYear)
+    return 'Expiry not reported'
+  return `Expires ${String(method.expMonth).padStart(2, '0')}/${method.expYear}`
+}
+</script>
+
+<section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <header class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-700">
+    <div>
+      <h2 class="font-semibold text-base text-gray-900 dark:text-white">Payment methods</h2>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Methods returned by the configured payment provider.</p>
+    </div>
+    <span class="h-5 w-5 text-gray-400 i-hugeicons-credit-card"></span>
+  </header>
+
+  <div :if="methods().length === 0" class="px-6 py-14 text-center">
+    <span class="inline-block h-7 w-7 text-gray-400 i-hugeicons-credit-card-not-found"></span>
+    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No payment methods</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">No provider-backed payment method is attached to this user.</p>
+  </div>
+
+  <ul :else role="list" class="divide-gray-200 divide-y dark:divide-neutral-700">
+    <template :for="method in methods()" :key="method.id">
+      <li class="flex gap-4 items-center px-5 py-4">
+        <span class="flex flex-none items-center justify-center h-10 w-10 text-gray-500 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-lg"><span class="h-5 w-5 i-hugeicons-credit-card"></span></span>
+        <div class="flex-1 min-w-0">
+          <div class="flex gap-2 items-center">
+            <p class="font-medium text-gray-900 text-sm dark:text-white">{{ brand(method.brand) }} {{ method.lastFour ? 'ending in ' + method.lastFour : '' }}</p>
+            <span :if="method.isDefault" class="inline-flex px-2 py-0.5 font-medium text-[11px] text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">Default</span>
+          </div>
+          <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ expiry(method) }}</p>
+        </div>
+      </li>
+    </template>
+  </ul>
+</section>

package/resources/components/Dashboard/Billing/BillingPlanSummary.stx

@@ -0,0 +1,62 @@
+<script client>
+import type { BillingSubscription } from '../../../../functions/billing/dashboard'
+
+const subscription = useReactiveProp<BillingSubscription | null>('subscription', null)
+
+function title(value: string): string {
+  if (!value)
+    return 'Active subscription'
+  return value.split(/[-_\s]+/).filter(Boolean).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
+function amount(): string {
+  const value = subscription()?.amount
+  const currency = subscription()?.currency
+  if (value === null || value === undefined)
+    return 'Not reported'
+  if (!currency)
+    return `${new Intl.NumberFormat().format(value)} minor units`
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency.toUpperCase() }).format(value / 100)
+}
+
+function date(value: string): string {
+  if (!value)
+    return 'Not reported'
+  const parsed = new Date(value)
+  return Number.isNaN(parsed.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(parsed)
+}
+</script>
+
+<section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <header class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-700">
+    <div>
+      <h2 class="font-semibold text-base text-gray-900 dark:text-white">Subscription</h2>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">The active local subscription joined with its payment provider state.</p>
+    </div>
+    <span class="h-5 w-5 text-gray-400 i-hugeicons-invoice-03"></span>
+  </header>
+
+  <div :if="!subscription()" class="px-6 py-14 text-center">
+    <span class="inline-block h-7 w-7 text-gray-400 i-hugeicons-calendar-remove-02"></span>
+    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No active subscription</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">An active persisted subscription will appear here after the payment provider confirms it.</p>
+  </div>
+
+  <div :else class="p-5">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        <p class="font-semibold text-gray-900 text-xl dark:text-white">{{ title(subscription()?.plan || subscription()?.type || '') }}</p>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Subscription {{ subscription()?.id || 'without a local identifier' }}</p>
+      </div>
+      <span class="inline-flex self-start px-2 py-1 capitalize font-medium text-emerald-700 text-xs dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40 rounded-full">{{ subscription()?.status || 'active' }}</span>
+    </div>
+
+    <dl class="grid gap-3 sm:grid-cols-3 mt-6">
+      <div class="p-3 bg-gray-50 dark:bg-neutral-900/60 rounded-md"><dt class="text-gray-500 text-xs dark:text-neutral-400">Amount</dt><dd class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">{{ amount() }}</dd></div>
+      <div class="p-3 bg-gray-50 dark:bg-neutral-900/60 rounded-md"><dt class="text-gray-500 text-xs dark:text-neutral-400">Current period ends</dt><dd class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">{{ date(subscription()?.periodEnd || '') }}</dd></div>
+      <div class="p-3 bg-gray-50 dark:bg-neutral-900/60 rounded-md"><dt class="text-gray-500 text-xs dark:text-neutral-400">Renewal</dt><dd class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">{{ subscription()?.cancelAtPeriodEnd ? 'Cancellation scheduled' : 'Provider managed' }}</dd></div>
+    </dl>
+  </div>
+</section>