npm - stellar-drive - Versions diffs - 1.0.21 → 1.1.1 - Mend

stellar-drive 1.0.21 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +9 -5
package/dist/auth/deviceVerification.d.ts.map +1 -1
package/dist/auth/deviceVerification.js +34 -8
package/dist/auth/deviceVerification.js.map +1 -1
package/dist/auth/singleUser.d.ts +4 -7
package/dist/auth/singleUser.d.ts.map +1 -1
package/dist/auth/singleUser.js +75 -11
package/dist/auth/singleUser.js.map +1 -1
package/dist/bin/install-pwa.d.ts.map +1 -1
package/dist/bin/install-pwa.js +627 -42
package/dist/bin/install-pwa.js.map +1 -1
package/dist/schema.d.ts.map +1 -1
package/dist/schema.js +9 -1
package/dist/schema.js.map +1 -1
package/dist/types.d.ts +2 -0
package/dist/types.d.ts.map +1 -1
package/package.json +1 -1

package/dist/bin/install-pwa.js CHANGED Viewed

@@ -206,7 +206,7 @@ function generatePackageJson(opts) {
         },
         dependencies: {
             postgres: '^3.4.0',
-            'stellar-drive': '^1.0.21'
+            'stellar-drive': '^1.1.1'
         },
         type: 'module'
     }, null, 2) + '\n');
@@ -1104,20 +1104,161 @@ function generateSplashSvg(label) {
 `;
 }
 // ---------------------------------------------------------------------------
-//                  EMAIL TEMPLATE PLACEHOLDER
+//                       EMAIL TEMPLATE GENERATORS
 // ---------------------------------------------------------------------------
 /**
- * Generate a placeholder HTML email template with a TODO comment.
+ * Generate the signup confirmation email HTML template.
  *
- * @param title - The email template title (e.g., `"Change Email"`).
- * @returns The HTML source for the email placeholder.
+ * Uses `{{ .Data.app_name }}` and `{{ .Data.app_domain }}` (from Supabase
+ * user_metadata) so the template works without any Supabase dashboard
+ * configuration — important for self-hosted deployments.
+ *
+ * @returns The HTML source for the signup confirmation email.
  */
-function generateEmailPlaceholder(title) {
-    return `<!-- TODO: ${title} email template -->
-<!-- See stellar-drive EMAIL_TEMPLATES.md for the full template format -->
-<!DOCTYPE html>
-<html><head><title>${title}</title></head>
-<body><p>TODO: Implement ${title} email template</p></body>
+function generateSignupEmail() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Confirm Your Email</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; background-color: #f4f4f5; color: #1a1a2e;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f5;">
+    <tr>
+      <td align="center" style="padding: 40px 20px;">
+        <table role="presentation" width="520" cellpadding="0" cellspacing="0" border="0" style="max-width: 520px; width: 100%;">
+          <tr>
+            <td align="center" style="padding-bottom: 24px; font-size: 24px; font-weight: 700; color: #1a1a2e;">
+              {{ .Data.app_name }}
+            </td>
+          </tr>
+          <tr>
+            <td style="background-color: #ffffff; border: 1px solid #e0e0e6; border-radius: 12px; padding: 40px;">
+              <h1 style="margin: 0 0 16px 0; font-size: 22px; font-weight: 600; color: #1a1a2e; text-align: center;">Confirm Your Email</h1>
+              <p style="margin: 0 0 24px 0; font-size: 15px; line-height: 1.6; color: #4a4a68; text-align: center;">Welcome to {{ .Data.app_name }}! Click the button below to verify your email address and get started.</p>
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
+                <tr>
+                  <td align="center" style="padding-bottom: 24px;">
+                    <a href="{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&type=signup" target="_blank" style="display: inline-block; padding: 14px 36px; font-size: 15px; font-weight: 600; color: #ffffff; background-color: #3b82f6; text-decoration: none; border-radius: 8px;">Verify Email Address</a>
+                  </td>
+                </tr>
+              </table>
+              <hr style="border: none; border-top: 1px solid #e0e0e6; margin: 0 0 16px 0;">
+              <p style="margin: 0 0 8px 0; font-size: 12px; color: #8888a0; text-align: center;">Or copy and paste this link into your browser:</p>
+              <p style="margin: 0; font-size: 11px; word-break: break-all; text-align: center;"><a href="{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&type=signup" style="color: #3b82f6;">{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&amp;type=signup</a></p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding-top: 24px; text-align: center;">
+              <p style="margin: 0 0 6px 0; font-size: 12px; color: #8888a0;">This link will expire in 24 hours.</p>
+              <p style="margin: 0 0 12px 0; font-size: 12px; color: #8888a0;">If you didn't create an account, you can safely ignore this email.</p>
+              <p style="margin: 0; font-size: 11px; color: #aaaabc;">&copy; {{ .Data.app_name }}</p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
+`;
+}
+function generateChangeEmail() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Confirm Your New Email</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; background-color: #f4f4f5; color: #1a1a2e;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f5;">
+    <tr>
+      <td align="center" style="padding: 40px 20px;">
+        <table role="presentation" width="520" cellpadding="0" cellspacing="0" border="0" style="max-width: 520px; width: 100%;">
+          <tr>
+            <td align="center" style="padding-bottom: 24px; font-size: 24px; font-weight: 700; color: #1a1a2e;">
+              {{ .Data.app_name }}
+            </td>
+          </tr>
+          <tr>
+            <td style="background-color: #ffffff; border: 1px solid #e0e0e6; border-radius: 12px; padding: 40px;">
+              <h1 style="margin: 0 0 16px 0; font-size: 22px; font-weight: 600; color: #1a1a2e; text-align: center;">Confirm Your New Email</h1>
+              <p style="margin: 0 0 24px 0; font-size: 15px; line-height: 1.6; color: #4a4a68; text-align: center;">You requested to change your email address. Click the button below to confirm this new email for your {{ .Data.app_name }} account.</p>
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
+                <tr>
+                  <td align="center" style="padding-bottom: 24px;">
+                    <a href="{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&type=email_change" target="_blank" style="display: inline-block; padding: 14px 36px; font-size: 15px; font-weight: 600; color: #ffffff; background-color: #3b82f6; text-decoration: none; border-radius: 8px;">Confirm New Email</a>
+                  </td>
+                </tr>
+              </table>
+              <hr style="border: none; border-top: 1px solid #e0e0e6; margin: 0 0 16px 0;">
+              <p style="margin: 0 0 8px 0; font-size: 12px; color: #8888a0; text-align: center;">Or copy and paste this link into your browser:</p>
+              <p style="margin: 0; font-size: 11px; word-break: break-all; text-align: center;"><a href="{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&type=email_change" style="color: #3b82f6;">{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&amp;type=email_change</a></p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding-top: 24px; text-align: center;">
+              <p style="margin: 0 0 6px 0; font-size: 12px; color: #8888a0;">This link will expire in 24 hours.</p>
+              <p style="margin: 0 0 12px 0; font-size: 12px; color: #8888a0;">If you didn't request this change, you can safely ignore this email.</p>
+              <p style="margin: 0; font-size: 11px; color: #aaaabc;">&copy; {{ .Data.app_name }}</p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
+`;
+}
+function generateDeviceVerificationEmail() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Verify Your Device</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; background-color: #f4f4f5; color: #1a1a2e;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f5;">
+    <tr>
+      <td align="center" style="padding: 40px 20px;">
+        <table role="presentation" width="520" cellpadding="0" cellspacing="0" border="0" style="max-width: 520px; width: 100%;">
+          <tr>
+            <td align="center" style="padding-bottom: 24px; font-size: 24px; font-weight: 700; color: #1a1a2e;">
+              {{ .Data.app_name }}
+            </td>
+          </tr>
+          <tr>
+            <td style="background-color: #ffffff; border: 1px solid #e0e0e6; border-radius: 12px; padding: 40px;">
+              <h1 style="margin: 0 0 16px 0; font-size: 22px; font-weight: 600; color: #1a1a2e; text-align: center;">Verify Your Device</h1>
+              <p style="margin: 0 0 24px 0; font-size: 15px; line-height: 1.6; color: #4a4a68; text-align: center;">A sign-in attempt was made from a new device. Click the button below to verify this device and grant it access to your {{ .Data.app_name }} account.</p>
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
+                <tr>
+                  <td align="center" style="padding-bottom: 24px;">
+                    <a href="{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&type=email" target="_blank" style="display: inline-block; padding: 14px 36px; font-size: 15px; font-weight: 600; color: #ffffff; background-color: #22c55e; text-decoration: none; border-radius: 8px;">Verify This Device</a>
+                  </td>
+                </tr>
+              </table>
+              <hr style="border: none; border-top: 1px solid #e0e0e6; margin: 0 0 16px 0;">
+              <p style="margin: 0 0 8px 0; font-size: 12px; color: #8888a0; text-align: center;">Or copy and paste this link into your browser:</p>
+              <p style="margin: 0; font-size: 11px; word-break: break-all; text-align: center;"><a href="{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&type=email" style="color: #3b82f6;">{{ .Data.app_domain }}/confirm?token_hash={{ .TokenHash }}&amp;type=email</a></p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding-top: 24px; text-align: center;">
+              <p style="margin: 0 0 6px 0; font-size: 12px; color: #8888a0;">This link will expire in 24 hours.</p>
+              <p style="margin: 0 0 12px 0; font-size: 12px; color: #8888a0;">If you didn't attempt to sign in, someone may have your code. Consider changing it immediately.</p>
+              <p style="margin: 0; font-size: 11px; color: #aaaabc;">&copy; {{ .Data.app_name }}</p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
 </html>
 `;
 }
@@ -1375,16 +1516,18 @@ export const load: LayoutLoad = async ({ url }): Promise<RootLayoutData> => {
   if (browser) {
     const result = await resolveRootLayout();
-    const isPublicRoute = PUBLIC_ROUTES.some(r => url.pathname.startsWith(r));
-    if (result.authMode === 'none' && !isPublicRoute) {
-      if (!result.serverConfigured) {
+    if (result.authMode === 'none') {
+      if (!result.serverConfigured && !url.pathname.startsWith('/setup')) {
         redirect(307, '/setup');
-      } else {
-        const returnUrl = url.pathname + url.search;
-        const loginUrl = returnUrl && returnUrl !== '/'
-          ? \`/login?redirect=\${encodeURIComponent(returnUrl)}\`
-          : '/login';
-        redirect(307, loginUrl);
+      } else if (result.serverConfigured) {
+        const isPublicRoute = PUBLIC_ROUTES.some(r => url.pathname.startsWith(r));
+        if (!isPublicRoute) {
+          const returnUrl = url.pathname + url.search;
+          const loginUrl = returnUrl && returnUrl !== '/'
+            ? \`/login?redirect=\${encodeURIComponent(returnUrl)}\`
+            : '/login';
+          redirect(307, loginUrl);
+        }
       }
     }
@@ -1833,13 +1976,13 @@ export const load: PageLoad = async () => {
 `;
 }
 /**
- * Generate the setup wizard page component with TODO stubs.
+ * Generate the setup wizard page component with a full 4-step UI.
  *
  * @returns The Svelte component source for `src/routes/setup/+page.svelte`.
  */
 function generateSetupPageSvelte(opts) {
     return `<!--
-  @fileoverview Five-step Supabase configuration wizard.
+  @fileoverview Four-step Supabase configuration wizard.
   Guides the user through entering Supabase credentials, validating them
   against the server, optionally deploying environment variables to Vercel,
@@ -1849,21 +1992,20 @@ function generateSetupPageSvelte(opts) {
   /**
    * @fileoverview Setup wizard page — first-time Supabase configuration.
    *
-   * Guides the user through a five-step process to connect their own
+   * Guides the user through a four-step process to connect their own
    * Supabase backend to ${opts.name}:
    *
    * 1. Create a Supabase project (instructions only).
-   * 2. Configure authentication (enable anonymous sign-ins).
-   * 3. Initialize the database by running the schema SQL.
-   * 4. Enter and validate Supabase credentials (URL + publishable key).
-   * 5. Persist configuration via Vercel API (set env vars + redeploy).
+   * 2. Initialize the database (automatic — informational step).
+   * 3. Enter and validate Supabase credentials (URL + publishable key).
+   * 4. Persist configuration via Vercel API (set env vars + redeploy).
    *
    * After a successful deploy the page polls for a new service-worker
    * version — once detected the user is prompted to refresh.
    *
-   * Access is controlled by the companion \`+page.ts\` load function:
-   * - Unconfigured → anyone can reach this page (\`isFirstSetup: true\`).
-   * - Configured → authenticated users only (\`isFirstSetup: false\`).
+   * Access is controlled by the companion \\\`+page.ts\\\` load function:
+   * - Unconfigured → anyone can reach this page (\\\`isFirstSetup: true\\\`).
+   * - Configured → authenticated users only (\\\`isFirstSetup: false\\\`).
    */
   import { page } from '$app/stores';
@@ -1871,6 +2013,13 @@ function generateSetupPageSvelte(opts) {
   import { isOnline } from 'stellar-drive/stores';
   import { pollForNewServiceWorker } from 'stellar-drive/kit';
+  // =============================================================================
+  //  Wizard State
+  // =============================================================================
+  /** Current step (1-4) */
+  let currentStep = $state(1);
   // =============================================================================
   //  Form State — Supabase + Vercel credentials
   // =============================================================================
@@ -1897,7 +2046,7 @@ function generateSetupPageSvelte(opts) {
   /** Error from credential validation, if any */
   let validateError = $state<string | null>(null);
-  /** \`true\` after credentials have been successfully validated */
+  /** \\\`true\\\` after credentials have been successfully validated */
   let validateSuccess = $state(false);
   /** Error from the deployment step, if any */
@@ -1924,13 +2073,16 @@ function generateSetupPageSvelte(opts) {
   let validatedKey = $state('');
   /**
-   * \`true\` when the user changes credentials after a successful
+   * \\\`true\\\` when the user changes credentials after a successful
    * validation — the "Continue" button should be re-disabled.
    */
   const credentialsChanged = $derived(
     validateSuccess && (supabaseUrl !== validatedUrl || supabasePublishableKey !== validatedKey)
   );
+  /** Whether the Continue button on step 3 should be enabled */
+  const canContinueStep3 = $derived(validateSuccess && !credentialsChanged);
   // =============================================================================
   //  Effects
   // =============================================================================
@@ -1951,9 +2103,9 @@ function generateSetupPageSvelte(opts) {
   // =============================================================================
   /**
-   * Send the entered Supabase credentials to \`/api/setup/validate\`
+   * Send the entered Supabase credentials to \\\`/api/setup/validate\\\`
    * and update UI state based on the result. On success, also
-   * cache the config locally via \`setConfig\` so the app is usable
+   * cache the config locally via \\\`setConfig\\\` so the app is usable
    * immediately after the deployment finishes.
    */
   async function handleValidate() {
@@ -1996,8 +2148,8 @@ function generateSetupPageSvelte(opts) {
   /**
    * Poll for a new service-worker version to detect when the Vercel
-   * redeployment has finished. Uses the engine's \`pollForNewServiceWorker\`
-   * helper which checks \`registration.update()\` at regular intervals.
+   * redeployment has finished. Uses the engine's \\\`pollForNewServiceWorker\\\`
+   * helper which checks \\\`registration.update()\\\` at regular intervals.
    *
    * Resolves a Promise when a new SW is detected in the waiting state.
    */
@@ -2019,7 +2171,7 @@ function generateSetupPageSvelte(opts) {
   // =============================================================================
   /**
-   * Send credentials and the Vercel token to \`/api/setup/deploy\`,
+   * Send credentials and the Vercel token to \\\`/api/setup/deploy\\\`,
    * which sets the environment variables on the Vercel project and
    * triggers a fresh deployment. Then poll until the new build is live.
    */
@@ -2040,7 +2192,7 @@ function generateSetupPageSvelte(opts) {
       if (data.success) {
         deployStage = 'deploying';
         _deploymentUrl = data.deploymentUrl || '';
-        /* Poll for the new SW version → marks \`deployStage = 'ready'\` */
+        /* Poll for the new SW version → marks \\\`deployStage = 'ready'\\\` */
         await pollForDeployment();
       } else {
         deployError = data.error || 'Deployment failed';
@@ -2059,7 +2211,436 @@ function generateSetupPageSvelte(opts) {
   <title>Setup - ${opts.name}</title>
 </svelte:head>
-<!-- TODO: Add setup wizard template (Supabase credentials form, validation, Vercel deployment) -->
+<div class="setup-page">
+  <div class="setup-container">
+    <!-- Header -->
+    <h1>Set Up ${opts.name}</h1>
+    <p class="subtitle">Configure ${opts.name} to connect to your own Supabase backend</p>
+    <!-- Step indicator -->
+    <div class="step-indicator">
+      {#each [1, 2, 3, 4] as step}
+        {#if step > 1}
+          <div class="step-line" class:completed={currentStep > step - 1}></div>
+        {/if}
+        <div
+          class="step-dot"
+          class:active={currentStep === step}
+          class:completed={currentStep > step}
+        >
+          {#if currentStep > step}
+            <span class="checkmark">&#10003;</span>
+          {:else}
+            {step}
+          {/if}
+        </div>
+      {/each}
+    </div>
+    <!-- Offline warning -->
+    {#if !$isOnline}
+      <div class="message message-error">
+        You are currently offline. An internet connection is required to complete setup.
+      </div>
+    {/if}
+    <!-- Step cards -->
+    <div class="step-card">
+      {#if currentStep === 1}
+        <h2>Step 1: Create a Supabase Project</h2>
+        <p>
+          ${opts.name} stores data in your own Supabase project.
+          Create one if you don't have one already — the free tier is more than enough.
+        </p>
+        <ol>
+          <li>Go to <a href="https://supabase.com/dashboard" target="_blank" rel="noopener noreferrer">supabase.com/dashboard</a></li>
+          <li>Click <strong>New Project</strong>, choose a name and database password, then click <strong>Create new project</strong>.</li>
+          <li>Wait for provisioning to finish (usually under a minute).</li>
+        </ol>
+        <p class="info-note">
+          <strong>Note:</strong> Supabase's built-in SMTP works for development. For production
+          you may want to configure a custom SMTP provider under Authentication &gt; Settings.
+        </p>
+      {:else if currentStep === 2}
+        <h2>Step 2: Initialize the Database</h2>
+        <p>
+          The required tables and RLS policies are created automatically during the build process.
+          When your app deploys to Vercel, the schema is pushed to your Supabase database &mdash; no
+          manual SQL is needed.
+        </p>
+      {:else if currentStep === 3}
+        <h2>Step 3: Connect Your Supabase Project</h2>
+        <p>Find these values in your Supabase dashboard under <strong>Settings &gt; API</strong>.</p>
+        <div class="form-group">
+          <label for="supabase-url">Project URL</label>
+          <input
+            id="supabase-url"
+            type="url"
+            placeholder="https://your-project.supabase.co"
+            bind:value={supabaseUrl}
+          />
+        </div>
+        <div class="form-group">
+          <label for="supabase-key">Publishable Key (anon / public)</label>
+          <input
+            id="supabase-key"
+            type="text"
+            placeholder="eyJhbGciOiJIUzI1NiIs..."
+            bind:value={supabasePublishableKey}
+          />
+          <span class="hint">This is the \`anon\` key — safe to expose in the browser.</span>
+        </div>
+        <button
+          class="btn btn-secondary"
+          onclick={handleValidate}
+          disabled={validating || !supabaseUrl || !supabasePublishableKey}
+        >
+          {#if validating}Testing...{:else}Test Connection{/if}
+        </button>
+        {#if validateError}
+          <div class="message message-error">{validateError}</div>
+        {/if}
+        {#if validateSuccess}
+          <div class="message message-success">Connection successful! Credentials are valid.</div>
+        {/if}
+      {:else if currentStep === 4}
+        <h2>Step 4: Deploy to Vercel</h2>
+        <p>
+          Provide a one-time Vercel API token so ${opts.name} can set the environment
+          variables on your project and trigger a redeployment.
+        </p>
+        <div class="form-group">
+          <label for="vercel-token">Vercel API Token</label>
+          <input
+            id="vercel-token"
+            type="password"
+            placeholder="Paste your Vercel token"
+            bind:value={vercelToken}
+          />
+        </div>
+        <button
+          class="btn btn-primary"
+          onclick={handleDeploy}
+          disabled={deploying || !vercelToken}
+        >
+          {#if deploying}Deploying...{:else}Deploy{/if}
+        </button>
+        {#if deployError}
+          <div class="message message-error">{deployError}</div>
+        {/if}
+        <!-- Deployment pipeline stages -->
+        {#if deployStage !== 'idle'}
+          <div class="deploy-stages">
+            <div class="deploy-stage" class:active={deployStage === 'setting-env'} class:done={deployStage === 'deploying' || deployStage === 'ready'}>
+              <span class="stage-icon">{#if deployStage === 'setting-env'}&#9675;{:else}&#10003;{/if}</span>
+              Setting environment variables
+            </div>
+            <div class="deploy-stage" class:active={deployStage === 'deploying'} class:done={deployStage === 'ready'}>
+              <span class="stage-icon">{#if deployStage === 'deploying'}&#9675;{:else if deployStage === 'ready'}&#10003;{:else}&#8226;{/if}</span>
+              Deploying to Vercel
+            </div>
+            <div class="deploy-stage" class:active={deployStage === 'ready'}>
+              <span class="stage-icon">{#if deployStage === 'ready'}&#10003;{:else}&#8226;{/if}</span>
+              Ready
+            </div>
+          </div>
+        {/if}
+        {#if deployStage === 'ready'}
+          <div class="message message-success">
+            Deployment complete! <a href="/">Refresh to start using ${opts.name}</a>.
+          </div>
+        {/if}
+      {/if}
+    </div>
+    <!-- Step navigation -->
+    <div class="step-nav">
+      {#if currentStep > 1}
+        <button class="btn btn-back" onclick={() => currentStep--}>Back</button>
+      {:else}
+        <div></div>
+      {/if}
+      {#if currentStep < 3}
+        <button class="btn btn-primary" onclick={() => currentStep++}>Continue</button>
+      {:else if currentStep === 3}
+        <button
+          class="btn btn-primary"
+          onclick={() => currentStep++}
+          disabled={!canContinueStep3}
+        >Continue</button>
+      {/if}
+    </div>
+    <!-- Security notice (first-time setup only) -->
+    {#if isFirstSetup}
+      <div class="security-notice">
+        <strong>Security:</strong> Your Supabase credentials are stored as environment variables
+        on Vercel and are never sent to any third-party service. The Vercel token is used once
+        and is not persisted.
+      </div>
+    {/if}
+  </div>
+</div>
+<style>
+  .setup-page {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 1rem;
+    min-height: 100vh;
+    background: var(--color-bg, #fafafa);
+  }
+  .setup-container {
+    max-width: 640px;
+    width: 100%;
+  }
+  h1 {
+    margin: 0 0 0.25rem;
+    font-size: 1.75rem;
+  }
+  .subtitle {
+    margin: 0 0 1.5rem;
+    color: var(--color-text-muted, #666);
+  }
+  /* Step indicator */
+  .step-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    margin-bottom: 2rem;
+  }
+  .step-dot {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--color-border, #ccc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-text-muted, #666);
+    background: var(--color-bg, #fff);
+    flex-shrink: 0;
+  }
+  .step-dot.active {
+    border-color: var(--color-primary, #3b82f6);
+    color: var(--color-primary, #3b82f6);
+    background: var(--color-primary-light, #eff6ff);
+  }
+  .step-dot.completed {
+    border-color: var(--color-success, #22c55e);
+    background: var(--color-success, #22c55e);
+    color: #fff;
+  }
+  .checkmark {
+    font-size: 0.875rem;
+  }
+  .step-line {
+    width: 40px;
+    height: 2px;
+    background: var(--color-border, #ccc);
+    flex-shrink: 0;
+  }
+  .step-line.completed {
+    background: var(--color-success, #22c55e);
+  }
+  /* Step card */
+  .step-card {
+    padding: 1.5rem;
+    border: 1px solid var(--color-border, #e2e2e2);
+    border-radius: 8px;
+    background: var(--color-surface, #fff);
+    margin-bottom: 1.5rem;
+  }
+  .step-card h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.25rem;
+  }
+  .step-card p {
+    margin: 0 0 1rem;
+    line-height: 1.5;
+  }
+  .step-card ol {
+    margin: 0 0 1rem;
+    padding-left: 1.25rem;
+    line-height: 1.7;
+  }
+  .info-note {
+    padding: 0.75rem 1rem;
+    background: var(--color-info-bg, #f0f9ff);
+    border-radius: 6px;
+    font-size: 0.875rem;
+  }
+  /* Form */
+  .form-group {
+    margin-bottom: 1rem;
+  }
+  .form-group label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+  }
+  .form-group input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--color-border, #ccc);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    box-sizing: border-box;
+  }
+  .hint {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: var(--color-text-muted, #888);
+  }
+  /* Buttons */
+  .btn {
+    padding: 0.5rem 1.25rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .btn-primary {
+    background: var(--color-primary, #3b82f6);
+    color: #fff;
+  }
+  .btn-secondary {
+    background: var(--color-secondary, #6b7280);
+    color: #fff;
+  }
+  .btn-back {
+    background: transparent;
+    color: var(--color-text-muted, #666);
+    border: 1px solid var(--color-border, #ccc);
+  }
+  /* Messages */
+  .message {
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    margin-top: 0.75rem;
+    font-size: 0.875rem;
+  }
+  .message-error {
+    background: var(--color-error-bg, #fef2f2);
+    color: var(--color-error, #dc2626);
+  }
+  .message-success {
+    background: var(--color-success-bg, #f0fdf4);
+    color: var(--color-success, #16a34a);
+  }
+  /* Deploy stages */
+  .deploy-stages {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+  .deploy-stage {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text-muted, #999);
+  }
+  .deploy-stage.active {
+    color: var(--color-primary, #3b82f6);
+    font-weight: 600;
+  }
+  .deploy-stage.done {
+    color: var(--color-success, #22c55e);
+  }
+  .stage-icon {
+    width: 1.25rem;
+    text-align: center;
+  }
+  /* Step navigation */
+  .step-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+  /* Security notice */
+  .security-notice {
+    padding: 0.75rem 1rem;
+    background: var(--color-info-bg, #f9fafb);
+    border: 1px solid var(--color-border, #e5e7eb);
+    border-radius: 6px;
+    font-size: 0.8rem;
+    color: var(--color-text-muted, #666);
+    line-height: 1.5;
+  }
+  /* Responsive */
+  @media (max-width: 480px) {
+    .setup-page {
+      padding: 1rem 0.5rem;
+    }
+    .step-card {
+      padding: 1rem;
+    }
+    .step-line {
+      width: 24px;
+    }
+  }
+</style>
 `;
 }
 /**
@@ -4284,6 +4865,10 @@ function generateDemoPage(opts) {
       width: 100%;
       height: 1px;
     }
+    .form-group input {
+      font-size: 16px; /* Prevents iOS zoom on focus */
+    }
   }
   @media (max-width: 380px) {
@@ -4656,9 +5241,9 @@ export async function run() {
                 ['static/icons/monochrome.svg', generateMonochromeSvg(firstLetter)],
                 ['static/icons/splash.svg', generateSplashSvg(opts.shortName)],
                 ['static/icons/apple-touch.svg', generatePlaceholderSvg('#6c5ce7', firstLetter)],
-                ['static/change-email.html', generateEmailPlaceholder('Change Email')],
-                ['static/device-verification-email.html', generateEmailPlaceholder('Device Verification')],
-                ['static/signup-email.html', generateEmailPlaceholder('Signup Email')]
+                ['static/change-email.html', generateChangeEmail()],
+                ['static/device-verification-email.html', generateDeviceVerificationEmail()],
+                ['static/signup-email.html', generateSignupEmail()]
             ]
         },
         {