@stacksjs/defaults 0.72.49 → 0.72.54

package/resources/layouts/403.stx

@@ -1,4 +1,8 @@
 <script server>
+// Laravel 5.7's 403 illustration (MIT), the same scene the framework's own
+// error pages use, so an app that opts into this layout matches them. Pass
+// `backgroundImage` to swap it for anything else.
+const backgroundImage = props.backgroundImage || '/svgs/403.svg'
 const appName = props.appName || 'Your App'
 const supportEmail = props.supportEmail || 'support@example.com'
 </script>
@@ -17,30 +21,20 @@ const supportEmail = props.supportEmail || 'support@example.com'
         <h2 class="mb-4 font-bold text-6xl text-slate-900">
           Access Denied
         </h2>
-        <p class="mb-8 font-bold text-8xl bounce" style="animation-duration: 1s; animation-iteration-count: 2;">
+        <p class="mb-8 font-bold text-8xl">
           403
         </p>
         <p class="mb-8 text-slate-600 text-xl">
           Sorry, you don't have permission to access this page.
         </p>
 
-        <div class="flex gap-4 sm:flex-row">
-          <a
-            href="/"
-            class="flex items-center justify-center px-6 py-3 w-full sm:w-auto text-white bg-slate-500 hover:bg-slate-600 rounded-lg duration-200 transition-colors"
-          >
-            <i class="mr-2 h-5 w-5 i-hugeicons-home-03"></i>
-            Back to Home
-          </a>
-
-          <a
-            href="javascript:history.back()"
-            class="flex items-center justify-center px-6 py-3 w-full sm:w-auto text-slate-700 hover:bg-slate-50 border border-slate-300 rounded-lg duration-200 transition-colors"
-          >
-            <i class="mr-2 h-5 w-5 i-hugeicons-arrow-left-02"></i>
-            Go Back
-          </a>
-        </div>
+        <a
+          href="/"
+          class="inline-flex items-center justify-center px-6 py-3 text-white bg-slate-500 hover:bg-slate-600 rounded-lg duration-200 transition-colors"
+        >
+          <i class="mr-2 h-5 w-5 i-hugeicons-home-03"></i>
+          Back to Home
+        </a>
       </div>
 
       <div class="mt-16 pt-8 border-slate-200 border-t">
@@ -54,135 +48,8 @@ const supportEmail = props.supportEmail || 'support@example.com'
     </div>
   </div>
 
-  <!-- Right side SVG -->
-  <div class="flex overflow-hidden relative items-center justify-center h-[100vh] w-full lg:w-1/2">
-    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <defs>
-        <linearGradient id="a" x1="50%" x2="50%" y1="100%" y2="0%">
-          <stop offset="0" stop-color="#76c3c3"/>
-          <stop offset="1" stop-color="#183468"/>
-        </linearGradient>
-        <linearGradient id="b" x1="100%" x2="0%" y1="50%" y2="50%">
-          <stop offset="0" stop-color="#486587"/>
-          <stop offset=".3323" stop-color="#183352"/>
-          <stop offset=".6667" stop-color="#264a6e"/>
-          <stop offset="1" stop-color="#183352"/>
-        </linearGradient>
-        <linearGradient id="c" x1="49.87%" x2="48.5%" y1="3.62%" y2="100%">
-          <stop offset="0" stop-color="#e0f2fa"/>
-          <stop offset=".0898" stop-color="#89bed6"/>
-          <stop offset=".3298" stop-color="#1e3c6e"/>
-          <stop offset="1" stop-color="#1b376b"/>
-        </linearGradient>
-        <linearGradient id="d">
-          <stop offset="0" stop-color="#b0ddf1"/>
-          <stop offset="1" stop-color="#325c82"/>
-        </linearGradient>
-        <linearGradient id="e" x1="49.87%" x2="49.87%" xlink:href="#d" y1="3.62%" y2="77.75%"/>
-        <linearGradient id="f">
-          <stop offset="0" stop-color="#1d3a6d"/>
-          <stop offset="1" stop-color="#467994"/>
-        </linearGradient>
-        <linearGradient id="g" x1="91.59%" x2="66.97%" xlink:href="#f" y1="5.89%" y2="100%"/>
-        <linearGradient id="h" x1="97.27%" x2="52.53%" xlink:href="#f" y1="6.88%" y2="100%"/>
-        <linearGradient id="i" x1="82.73%" x2="41.46%" xlink:href="#f" y1="41.06%" y2="167.23%"/>
-        <linearGradient id="j" x1="49.87%" x2="49.87%" xlink:href="#d" y1="3.62%" y2="100.77%"/>
-        <linearGradient id="k" x1="100%" x2="72.45%" xlink:href="#f" y1="0%" y2="85.2%"/>
-        <linearGradient id="l" x1="100%" x2="62.1%" y1="0%" y2="68.86%">
-          <stop offset="0" stop-color="#163055"/>
-          <stop offset="1" stop-color="#2f587f"/>
-        </linearGradient>
-        <circle id="m" cx="180" cy="102" r="40"/>
-        <filter id="n" height="340%" width="340%" x="-120%" y="-120%">
-          <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
-          <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="32"/>
-          <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.696473053 0"/>
-        </filter>
-        <linearGradient id="o" x1="0%" y1="50%" y2="50%">
-          <stop offset="0" stop-color="#fff" stop-opacity="0"/>
-          <stop offset="1" stop-color="#fff"/>
-        </linearGradient>
-      </defs>
-      <g fill="none" fill-rule="evenodd">
-        <path d="m0 0h1024v1024h-1024z" fill="url(#a)"/>
-        <g transform="translate(761 481)">
-          <path d="m96 27 4-1v11h-4z" fill="#8dbcd2"/>
-          <path d="m76 23 4-1v15h-4z" fill="#8dbcd2"/>
-          <g fill="#183352">
-            <path d="m40 22 4 1v14h-4z"/>
-            <path d="m20 26 4 1v14h-4z"/>
-            <path d="m59 0h2v20h-2z" opacity=".5"/>
-          </g>
-          <path d="m61 0c3 0 3 2 6 2s3-2 6-2 3 2 6 2v8c-3 0-3-2-6-2s-3 2-6 2-3-2-6-2z" fill="url(#b)"/>
-          <path d="m50 20 10-2v110h-60l10-100 10-2v10.92l10-.98v-11.94l10-2v12.96l10-.98z" fill="#8dbcd2"/>
-          <path d="m100 26 10 2 10 100h-60v-110l10 2v13.98l10 .98v-12.96l10 2v11.94l10 .98z" fill="#183352"/>
-        </g>
-        <g transform="translate(0 565)">
-          <path d="m1024 385h-1024v-278.14c118.4 21.09 185.14 57.03 327.4 48.14 198.54-12.4 250-125 500-125 90.18 0 147.92 16.3 196.6 37.12z" fill="url(#c)"/>
-          <path d="m1024 355h-1024v-275.44c76.46-35.75 137.14-79.56 285-79.56 250 0 301.46 112.6 500 125 103.24 6.45 166.7-10.7 239-28.66z" fill="url(#e)"/>
-          <path d="m344.12 130.57c23.1 13.47-25.27 81.95-145.12 205.43h649c-344.06-141.7-512.02-210.17-503.88-205.43z" fill="url(#e)"/>
-          <path d="m0 336v-256.44c76.46-35.75 137.14-79.56 285-79.56 71.14 0 86.22 26.04 32.5 82-48 50 147.33 58.02 36 136.5-40.67 28.67 21.17 67.83 185.5 117.5z" fill="url(#g)"/>
-          <path d="m317.5 82c-48 50 147.33 58.02 36 136.5-40.67 28.67 21.17 67.83 185.5 117.5h-484z" fill="url(#h)"/>
-          <path d="m353.5 218.5c-40.67 28.67 21.17 67.83 185.5 117.5h-364z" fill="url(#i)"/>
-          <path d="m0 459v-194.46c100.25 21.2 167.18 50.29 296.67 42.19 198.57-12.43 250.04-125.15 500.07-125.15 109.75 0 171.47 24.16 227.26 51.25v226.17z" fill="url(#j)"/>
-          <path d="m1024 459h-177.84c51.95-58.9 48.86-97.16-9.28-114.78-186.64-56.58-101.76-162.64-39.97-162.64 109.64 0 171.34 24.12 227.09 51.19z" fill="url(#k)"/>
-          <path d="m1024 459h-177.81c52.01-59.01 48.94-97.34-9.22-115l187.03 53.48z" fill="url(#l)"/>
-        </g>
-        <g id="moonGroup">
-          <g transform="translate(94 23)">
-            <use fill="#000" filter="url(#n)" xlink:href="#m"/>
-            <use fill="#d2f1fe" xlink:href="#m"/>
-          </g>
-        </g>
-        <g transform="translate(94 23)">
-          <use fill="#000" filter="url(#n)" xlink:href="#m"/>
-          <g fill="#fff">
-            <circle cx="123" cy="255" fill-opacity=".4" r="3"/>
-            <circle cx="2" cy="234" r="2"/>
-            <circle cx="33" cy="65" r="3"/>
-            <circle cx="122" cy="2" r="2"/>
-            <circle cx="72" cy="144" r="2"/>
-            <circle cx="282" cy="224" r="2"/>
-            <circle cx="373" cy="65" opacity=".4" r="3"/>
-            <circle cx="433" cy="255" r="3"/>
-          </g>
-          <path d="m373.25 325.25a5 5 0 0 0 0-10h-75v10z" fill="url(#o)" opacity=".4" transform="matrix(.70710678 .70710678 -.70710678 .70710678 325.523078 -145.38023)"/>
-          <g fill="#fff">
-            <circle cx="363" cy="345" r="3"/>
-            <circle cx="513" cy="115" r="3"/>
-            <circle cx="723" cy="5" opacity=".4" r="3"/>
-            <circle cx="422" cy="134" r="2"/>
-            <circle cx="752" cy="204" r="2"/>
-            <circle cx="672" cy="114" r="2"/>
-            <circle cx="853" cy="255" opacity=".4" r="3"/>
-            <circle cx="623" cy="225" r="3"/>
-            <circle cx="823" cy="55" r="3"/>
-            <circle cx="902" cy="144" r="2"/>
-            <circle cx="552" cy="14" r="2"/>
-          </g>
-        </g>
-        <path d="m796 535a4 4 0 0 1 4 4v20h-8v-20a4 4 0 0 1 4-4z" fill="#486587"/>
-        <path d="m798 535.54a4 4 0 0 0 -2 3.46v20h-4v-20a4 4 0 0 1 6-3.46zm48-.54a4 4 0 0 1 4 4v20h-8v-20a4 4 0 0 1 4-4z" fill="#071423"/>
-        <path d="m846 559v-20a4 4 0 0 0 -2-3.46 4 4 0 0 1 6 3.46v20z" fill="#8dbcd2"/>
-        <path d="m554.67 131.48a9.46 9.46 0 0 1 13.33 0 9.46 9.46 0 0 0 13.33 0l13.33-13.24a28.39 28.39 0 0 1 40 0l10 9.93a14.2 14.2 0 0 0 20 0 14.2 14.2 0 0 1 20 0l.6.6a31.8 31.8 0 0 1 9.4 22.56h-146.66v-3.84c0-6.01 2.4-11.78 6.67-16.01zm196.33-123.23c11.07-11 28.93-11 40 0l10 9.94a14.19 14.19 0 0 0 20 0 14.19 14.19 0 0 1 20 0 16.36 16.36 0 0 0 21.3 1.5l8.7-6.47a33.47 33.47 0 0 1 40 0l4.06 3.03a39.6 39.6 0 0 1 15.94 31.75h-200c0-12.72 8.93-28.75 20-39.75zm-736.9 66.89.9-.9a21.29 21.29 0 0 1 30 0 21.29 21.29 0 0 0 30 0l10-9.93a35.48 35.48 0 0 1 50 0l15 14.9a14.2 14.2 0 0 0 20 0 14.2 14.2 0 0 1 20 0c6.4 6.35 10 15 10 24.02v5.77h-200c0-12.71 5.07-24.9 14.1-33.86z" fill="#fff" opacity=".07" transform="translate(54 301)"/>
-      </g>
-    </svg>
+  <!-- Right side illustration -->
+  <div class="overflow-hidden relative h-64 w-full sm:h-80 lg:h-auto lg:w-1/2">
+    <img class="absolute inset-0 object-cover h-full w-full" src="{{ backgroundImage }}" alt="">
   </div>
 </div>
-
-<style>
-@keyframes floatMoon {
-  0% { transform: translateX(0); }
-  50% { transform: translateX(20px); }
-  100% { transform: translateX(0); }
-}
-#moonGroup {
-  animation: floatMoon 4s ease-in-out infinite;
-}
-
-@keyframes waveTop {
-  0% { transform: translateY(0); }
-  50% { transform: translateY(-2px); }
-  100% { transform: translateY(0); }
-}
-</style>

package/resources/layouts/404.stx

@@ -1,5 +1,8 @@
 <script server>
-const backgroundImage = props.backgroundImage || '/images/background-auth.jpg'
+// Laravel 5.7's 404 illustration (MIT), the same scene the framework's own
+// error pages use, so an app that opts into this layout matches them. Pass
+// `backgroundImage` to swap it for anything else.
+const backgroundImage = props.backgroundImage || '/svgs/404.svg'
 </script>
 
 <div class="flex relative justify-center shrink-0 md:px-12 lg:px-0 min-h-full">
@@ -23,7 +26,9 @@ const backgroundImage = props.backgroundImage || '/images/background-auth.jpg'
         Sorry, we couldn't find the page you're looking for.
       </p>
 
-      <a href="/" class="inline-block mt-10 px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded">
+      <!-- Same deep rose as the illustration beside it. White on #b63e59 is
+        5.49:1 and on the #a22a50 hover 7.04:1, so both states clear AA. -->
+      <a href="/" class="inline-block mt-10 px-4 py-2 text-white bg-[#b63e59] hover:bg-[#a22a50] rounded">
         Go back home
       </a>
     </main>

package/resources/views/auth/magic/[token].stx

@@ -0,0 +1,24 @@
+<script server>
+import { config } from '@stacksjs/config'
+
+/**
+ * Where a magic sign-in link lands, at `/auth/magic/{token}`.
+ *
+ * The logic sits in the component, like every other auth page here.
+ *
+ * It used to sit in a page-level `<script client>` that read a `useRef` from
+ * inside a top-level `effect`, and that combination left the page inert: the
+ * setup registered, no directive bound, and the page rendered perfectly while
+ * its button did nothing. The cause was in stx - `useRef()` returned an object
+ * rather than a callable, so `shell()` threw out of the effect and out of the
+ * setup function, taking every binding with it. Fixed upstream in stx 0.2.217;
+ * the ref is also gone from here, because a template ref is not reactive and
+ * reading one during setup only ever answers null.
+ *
+ * `autoConsume` is passed as an attribute because it is a server decision a
+ * client script cannot read.
+ */
+const autoConsume = config.auth.magicLink?.confirmInteraction !== true
+</script>
+
+<MagicLink autoConsume="{{ autoConsume }}" />

package/resources/views/errors/404.stx

@@ -0,0 +1,42 @@
+<script server>
+// The frontend's not-found page. When no view matches a URL, stx-serve looks
+// for a route at `/404` or `/errors/404` first. Without this file it falls
+// through to its own generic page, which carries none of the app's design
+// (and, on the server `stx build` produces, to the bare string "Not Found").
+//
+// Same split as the framework's production error page in
+// @stacksjs/error-handling, so a 404 looks the same whether the router or the
+// views server answered it. The scene is Laravel 5.7's 404 illustration (MIT),
+// served from public/svgs.
+</script>
+
+@title('Page not found')
+
+<div class="flex flex-col md:flex-row min-h-screen bg-neutral-50 dark:bg-neutral-900">
+  <div class="overflow-hidden md:order-2 h-56 sm:h-72 md:h-auto md:w-1/2 bg-neutral-200 dark:bg-neutral-800">
+    <img src="/svgs/404.svg" alt="" class="object-cover h-full w-full">
+  </div>
+
+  <section class="flex md:order-1 flex-1 flex-col items-start justify-center md:flex-none px-8 py-12 md:px-16 md:w-1/2">
+    <div class="font-extrabold text-6xl text-neutral-950 tracking-tight md:text-8xl dark:text-white">404</div>
+
+    <!-- The rule takes the illustration's own deep rose rather than a
+      framework accent: it sits inches from the artwork, and a blue mark
+      against a warm dusk scene reads as a mistake in any app's brand. The
+      dark value is the same ramp's coral, from the scene's night variant. -->
+    <div class="my-6 h-1 w-14 bg-[#b63e59] dark:bg-[#ee7566] rounded-full"></div>
+
+    <h1 class="mb-2 font-semibold text-2xl text-neutral-950 dark:text-white">Page not found</h1>
+
+    <p class="mb-8 max-w-md text-neutral-500 dark:text-neutral-400">
+      The page you are looking for does not exist, or it has moved.
+    </p>
+
+    <a
+      href="/"
+      class="inline-block px-5 py-2.5 font-medium text-neutral-950 text-sm dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700"
+    >
+      Back to home
+    </a>
+  </section>
+</div>

package/resources/views/forgot-password.stx

@@ -0,0 +1,13 @@
+<script server>
+/**
+ * The site's forgot-password page, at `/forgot-password` - the address the
+ * sign-in card's "Forgot password?" link has always pointed at, and which
+ * had nothing behind it outside the dashboard.
+ *
+ * The container posts to `/password/forgot`, which answers the same neutral
+ * 202 whether or not the address has an account, so this page must never
+ * report back whether it matched.
+ */
+</script>
+
+<ForgotPasswordDashboard />

package/resources/views/login.stx

@@ -0,0 +1,68 @@
+<script server>
+/**
+ * The site's sign-in page, at `/login`.
+ *
+ * It lived at `defaults/views/auth/login.stx` and was one line mounting the
+ * presentational `Login` component, from a directory no server serves. That
+ * component only emits `submit`, so even reachable it would have rendered a
+ * form that swallowed every sign-in. The container below is what listens: it
+ * calls `useAuth().login`, surfaces the error, and honours `?redirect=`. Its
+ * name is where the auth components happen to live, not where it can run.
+ *
+ * `POST /login` reaches the API without a proxy rule of its own, because the
+ * views server forwards every mutating verb to bun-router (DEFAULT_API_METHODS
+ * in core/server/src/proxy.ts). GET `/login` is this page.
+ *
+ * The social buttons go in through the card's `social` slot rather than after
+ * it, so they sit with the credentials instead of below the sign-up line.
+ * `configuredSocialProviders()` knows each provider's own required config, so
+ * a provider missing credentials never reaches a visitor as a button that
+ * fails at the redirect. Adding credentials to `config/services.ts` is the
+ * whole of what turns one on. Icons come from hugeicons, the collection Stacks
+ * defaults to; swap the map if your app standardises on another.
+ */
+import { configuredSocialProviders } from '@stacksjs/socials'
+
+const PROVIDER_ICONS = {
+  apple: 'i-hugeicons-apple',
+  facebook: 'i-hugeicons-facebook-01',
+  github: 'i-hugeicons-github',
+  google: 'i-hugeicons-google',
+  twitter: 'i-hugeicons-new-twitter',
+}
+
+const socialSignIn = configuredSocialProviders().map(provider => ({
+  label: provider.label,
+  href: `/auth/${provider.name}/redirect`,
+  icon: PROVIDER_ICONS[provider.name] ?? 'i-hugeicons-user-circle',
+}))
+</script>
+
+<LoginDashboard>
+  <template #social>
+    @if (socialSignIn.length)
+      <div class="mt-6">
+        <div class="relative">
+          <div class="flex absolute inset-0 items-center" aria-hidden="true">
+            <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
+          </div>
+          <div class="flex relative justify-center text-sm">
+            <span class="px-4 text-neutral-500 dark:text-neutral-400 bg-white dark:bg-neutral-800">Or continue with</span>
+          </div>
+        </div>
+
+        <div class="grid gap-3 mt-6 {{ socialSignIn.length > 1 ? 'grid-cols-2' : 'grid-cols-1' }}">
+          @foreach (socialSignIn as provider)
+            <a
+              href="{{ provider.href }}"
+              class="flex gap-2 items-center justify-center px-3 py-2 font-medium text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-300 rounded-lg dark:border-neutral-600"
+            >
+              <i class="h-5 w-5 {{ provider.icon }}" aria-hidden="true"></i>
+              <span>{{ provider.label }}</span>
+            </a>
+          @endforeach
+        </div>
+      </div>
+    @endif
+  </template>
+</LoginDashboard>

package/resources/views/password/reset/[token].stx

@@ -0,0 +1,18 @@
+<script server>
+/**
+ * Where a mailed password-reset link lands, at `/password/reset/{token}`.
+ *
+ * The framework has been sending people here for as long as it has had a
+ * reset mailer - `core/auth/src/password/reset.ts` builds the link from
+ * `config.auth.passwordReset.url`, whose default is
+ * `/password/reset/{token}?email={email}` - and nothing has ever served the
+ * address. Every reset email ended at a 404, which made the whole flow
+ * (the send endpoint, the token store, the reset action, the mail template)
+ * unreachable from a browser.
+ *
+ * An app that points `config.auth.passwordReset.url` somewhere else is free
+ * to keep its own page; this is the page the default link needs.
+ */
+</script>
+
+<ResetPasswordDashboard />

package/resources/views/register.stx

@@ -0,0 +1,64 @@
+<script server>
+/**
+ * The site's sign-up page, at `/register`.
+ *
+ * It lived at `defaults/views/auth/signup.stx`, in a directory no server
+ * serves, and carried its own hand-written form whose `action="#"` posted
+ * nowhere. It also declared `id="password"` twice and named the confirmation
+ * field `password` as well, so the two inputs collided. The container below is
+ * what actually registers: it calls `useAuth().register`, surfaces the error,
+ * and honours `?redirect=`. Its name is where the auth components happen to
+ * live, not where it can run.
+ *
+ * The social block is what that page did get right, kept here and moved inside
+ * the card through its `social` slot. `configuredSocialProviders()` knows each
+ * provider's own required config (Apple has no clientSecret and is validated
+ * on its signing key instead), so what renders is exactly the set that will
+ * complete a sign-in. Adding credentials to `config/services.ts` is the whole
+ * of what turns one on.
+ */
+import { configuredSocialProviders } from '@stacksjs/socials'
+
+const PROVIDER_ICONS = {
+  apple: 'i-hugeicons-apple',
+  facebook: 'i-hugeicons-facebook-01',
+  github: 'i-hugeicons-github',
+  google: 'i-hugeicons-google',
+  twitter: 'i-hugeicons-new-twitter',
+}
+
+const socialSignUp = configuredSocialProviders().map(provider => ({
+  label: provider.label,
+  href: `/auth/${provider.name}/redirect`,
+  icon: PROVIDER_ICONS[provider.name] ?? 'i-hugeicons-user-circle',
+}))
+</script>
+
+<RegisterDashboard>
+  <template #social>
+    @if (socialSignUp.length)
+      <div class="mt-6">
+        <div class="relative">
+          <div class="flex absolute inset-0 items-center" aria-hidden="true">
+            <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
+          </div>
+          <div class="flex relative justify-center text-sm">
+            <span class="px-4 text-neutral-500 dark:text-neutral-400 bg-white dark:bg-neutral-800">Or continue with</span>
+          </div>
+        </div>
+
+        <div class="grid gap-3 mt-6 {{ socialSignUp.length > 1 ? 'grid-cols-2' : 'grid-cols-1' }}">
+          @foreach (socialSignUp as provider)
+            <a
+              href="{{ provider.href }}"
+              class="flex gap-2 items-center justify-center px-3 py-2 font-medium text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-300 rounded-lg dark:border-neutral-600"
+            >
+              <i class="h-5 w-5 {{ provider.icon }}" aria-hidden="true"></i>
+              <span>{{ provider.label }}</span>
+            </a>
+          @endforeach
+        </div>
+      </div>
+    @endif
+  </template>
+</RegisterDashboard>

package/vcs/github/workflows/ci.yml

@@ -9,6 +9,9 @@ on:
     branches:
       - main
 
+  # So a maintainer can ship without pushing an empty commit.
+  workflow_dispatch:
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
@@ -119,3 +122,87 @@ jobs:
 
       - name: Test Suite
         run: bun run test
+
+  # Push to deploy: `buddy deploy` on every green push to main.
+  #
+  # A fresh app has nothing to deploy to, and red CI on day one is worse than
+  # no deploy, so this checks for its secrets first and finishes green with a
+  # notice when they are missing. Add them under
+  # Settings > Secrets and variables > Actions to turn it on:
+  #
+  #   DOTENV_PRIVATE_KEY_PRODUCTION   decrypts .env.production for the deploy
+  #   DEPLOY_SSH_KEY                  private key for the target server
+  #
+  # Cloud tokens are optional. Without them the release still ships and DNS is
+  # still published; only the provider-specific parts are skipped.
+  deploy:
+    if: >-
+      github.event_name == 'workflow_dispatch' ||
+      (github.event_name == 'push' && github.ref == 'refs/heads/main')
+    needs: [lint, typecheck, test]
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    permissions:
+      contents: read
+      deployments: write
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Is deployment configured?
+        id: check
+        env:
+          DOTENV_PRIVATE_KEY_PRODUCTION: ${{ secrets.DOTENV_PRIVATE_KEY_PRODUCTION }}
+          DEPLOY_SSH_KEY: ${{ secrets.DEPLOY_SSH_KEY }}
+        run: |
+          if [ -n "$DOTENV_PRIVATE_KEY_PRODUCTION" ] && [ -n "$DEPLOY_SSH_KEY" ]; then
+            echo 'configured=true' >> "$GITHUB_OUTPUT"
+          else
+            echo 'configured=false' >> "$GITHUB_OUTPUT"
+            echo '::notice::Deployment is not configured, so this step did nothing. Add DOTENV_PRIVATE_KEY_PRODUCTION and DEPLOY_SSH_KEY to deploy on every push to main.'
+          fi
+
+      - name: Setup Pantry
+        if: steps.check.outputs.configured == 'true'
+        uses: pantry-pm/pantry/packages/action@c1417d98f5613290bc3b1f96d35086b834684659 # v0.10.47 + the socket-hang-up retry fix
+        with:
+          install: 'false'
+
+      - name: Use cached node_modules
+        if: steps.check.outputs.configured == 'true'
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('**/bun.lock') }}
+          restore-keys: |
+            node-modules-
+
+      - name: Install Dependencies
+        if: steps.check.outputs.configured == 'true'
+        run: bun install
+
+      - name: Prepare Deploy SSH Key
+        if: steps.check.outputs.configured == 'true'
+        env:
+          DEPLOY_SSH_KEY: ${{ secrets.DEPLOY_SSH_KEY }}
+        run: |
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
+          printf '%s\n' "$DEPLOY_SSH_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keygen -y -f ~/.ssh/id_ed25519 > ~/.ssh/id_ed25519.pub
+          chmod 644 ~/.ssh/id_ed25519.pub
+
+      - name: Deploy production
+        if: steps.check.outputs.configured == 'true'
+        run: bun buddy deploy --yes
+        env:
+          APP_ENV: production
+          DOTENV_PRIVATE_KEY_PRODUCTION: ${{ secrets.DOTENV_PRIVATE_KEY_PRODUCTION }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          # macOS resource forks in a tarball built on a developer machine make
+          # the extraction on the server noisy and occasionally fatal.
+          COPYFILE_DISABLE: '1'

package/views/[...all].stx

@@ -1,7 +0,0 @@
-<script>
-const { t } = useI18n()
-</script>
-
-<div>
-  {{ t('not-found') }}
-</div>

package/views/about.md

@@ -1,3 +0,0 @@
----
-title: About
----

package/views/auth/login.stx

@@ -1 +0,0 @@
-<Login />

package/views/auth/magic/[token].stx

@@ -1,88 +0,0 @@
-<script server>
-import { config } from '@stacksjs/config'
-
-/**
- * The magic-link interstitial. The email's GET lands here and this page
- * POSTs the token to the consume endpoint - a GET must never consume,
- * because mail-security scanners prefetch links and would burn the
- * single-use token before the person ever taps it.
- *
- * `confirmInteraction` renders a button instead of auto-submitting, for
- * environments whose scanners execute page scripts too.
- */
-const autoConsume = config.auth.magicLink?.confirmInteraction !== true
-</script>
-
-<script client>
-const route = useRoute()
-const status = state('ready') // ready | working | done | failed
-const message = state('')
-const shell = useRef('shell')
-
-async function consume() {
-  if (status() === 'working' || status() === 'done')
-    return
-
-  status.set('working')
-  try {
-    const reply = await fetch('/auth/magic-link/consume', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'same-origin',
-      body: JSON.stringify({ token: String(route.params.token || '') }),
-    })
-    const body = await reply.json().catch(() => ({}))
-
-    if (!reply.ok) {
-      status.set('failed')
-      message.set(body.message || body.error || 'That sign-in link is not valid.')
-      return
-    }
-
-    status.set('done')
-    const redirect = String(body.redirect_to || '/')
-    navigate(redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/')
-  }
-  catch {
-    status.set('failed')
-    message.set('Something went wrong. Request a new link and try again.')
-  }
-}
-
-effect(() => {
-  // Auto-consume only when the server said so - the flag rides a data
-  // attribute because client scripts cannot read server config directly.
-  if (shell() && shell().dataset.autoConsume === 'true')
-    consume()
-})
-</script>
-
-<template>
-  <main ref="shell" data-auto-consume="{{ autoConsume }}" class="min-h-[100dvh] flex items-center justify-center px-6">
-    <div class="w-full max-w-sm text-center">
-      <div :if="status() === 'failed'">
-        <div class="mx-auto h-12 w-12 rounded-full bg-red-50 flex items-center justify-center">
-          <span class="h-6 w-6 text-red-500 i-hugeicons-alert-02"></span>
-        </div>
-        <h1 class="mt-5 text-xl font-semibold tracking-tight">Sign-in link problem</h1>
-        <p class="mt-2 text-[15px] text-gray-600">{{ message() }}</p>
-        <a href="/login" class="mt-6 inline-block rounded-lg px-5 py-2.5 font-medium bg-gray-900 text-white">Back to sign in</a>
-      </div>
-      <div :else-if="status() === 'working' || status() === 'done'">
-        <div class="mx-auto h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center">
-          <span class="h-6 w-6 text-gray-500 animate-spin i-hugeicons-loading-03"></span>
-        </div>
-        <h1 class="mt-5 text-xl font-semibold tracking-tight">Signing you in</h1>
-        <p class="mt-2 text-[15px] text-gray-600">One moment.</p>
-      </div>
-      <div :else>
-        <div class="mx-auto h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center">
-          <span class="h-6 w-6 text-gray-600 i-hugeicons-mail-open-01"></span>
-        </div>
-        <h1 class="mt-5 text-xl font-semibold tracking-tight">Continue to sign in</h1>
-        <p class="mt-2 text-[15px] text-gray-600">Tap below to finish signing in with your emailed link.</p>
-        <button type="button" @click="consume" class="mt-6 rounded-lg px-6 py-3 font-medium bg-gray-900 text-white transition-transform active:scale-[0.98]">Continue</button>
-      </div>
-    </div>
-  </main>
-</template>