@stacksjs/defaults 0.72.49 → 0.72.50

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.72.49",
+  "version": "0.72.50",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/lang/de.yml

@@ -11,4 +11,3 @@ intro:
   hi: Hi, {name}!
   aka: Auch bekannt als
   whats-your-name: Wie heißt du?
-not-found: Nicht gefunden

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.72.49",
+  "version": "0.72.50",
   "description": "The complete managed Stacks application scaffold, including runtime defaults, AI guidance, editor metadata, and npm-backed project support files.",
   "author": "Chris Breuer",
   "license": "MIT",
@@ -46,7 +46,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.72.49",
+    "@stacksjs/mobile": "^0.72.50",
     "@stacksjs/sanitizer": "^0.2.113"
   },
   "scripts": {

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

@@ -1,4 +1,12 @@
 <script client>
+// Imported rather than taken as a global, the way LoginDashboard and
+// RegisterDashboard already import useAuth. The bare name only resolves on the
+// dashboard server, so mounting this container anywhere else - such as the
+// site's /forgot-password page - reached the submit handler and threw
+// "dashboardApi is not defined", which the catch below then showed to the
+// visitor as the reason their reset link could not be sent.
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
 const isLoading = state(false)
 const error = state('')
 const success = state(false)

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

@@ -129,6 +129,14 @@ function handleSubmit(): void {
           <span :if="!isLoading()">Sign in</span>
         </Button>
       </form>
+
+      {{--
+        Anything that belongs with the credentials, inside the same card:
+        the social sign-in buttons the /login page fills this with. It is a
+        slot because the provider list has to be computed server-side by
+        `configuredSocialProviders()`, and this component is client-only.
+      --}}
+      <slot name="social" />
     </div>
 
     <p :if="showSignUp()" class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">

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

@@ -41,5 +41,9 @@ async function handleLogin(credentials) {
     :isLoading="isLoading()"
     :error="error()"
     :data-auth-status="isLoading() ? 'loading' : 'ready'"
-  />
+  >
+    <!-- Forwarded so the page mounting this container can put social
+         sign-in inside the card. -->
+    <template #social><slot name="social" /></template>
+  </Login>
 </template>

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

@@ -0,0 +1,94 @@
+<script client>
+/**
+ * The magic-link interstitial.
+ *
+ * The email's GET lands on the page that mounts this, and this 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. When `autoConsume` is off it waits for a tap instead,
+ * for environments whose scanners execute page scripts too.
+ *
+ * `autoConsume` arrives as a string because it is decided server-side, from
+ * `config.auth.magicLink.confirmInteraction`, and a client script cannot read
+ * config directly.
+ */
+const autoConsume = useReactiveProp<string>('autoConsume', 'true')
+const route = useRoute()
+const status = state('ready') // ready | working | done | failed
+const message = state('')
+
+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.')
+  }
+}
+
+// `consume` reads `status()`, so calling it from inside the effect makes the
+// effect depend on `status` - and every set inside `consume` schedules another
+// run. Its own early return covers 'working' and 'done', but not 'failed', so a
+// link that fails to consume would be retried forever. A plain flag, which is
+// not a signal and so not a dependency, is what makes this fire once.
+let autoStarted = false
+
+effect(() => {
+  if (autoStarted || autoConsume() !== 'true')
+    return
+
+  autoStarted = true
+  consume()
+})
+</script>
+
+<template>
+  <main class="flex items-center justify-center px-6 min-h-[100dvh]">
+    <div class="max-w-sm w-full text-center">
+      <div :if="status() === 'failed'">
+        <div class="flex items-center justify-center mx-auto h-12 w-12 bg-red-50 rounded-full">
+          <span class="h-6 w-6 text-red-500 i-hugeicons-alert-02"></span>
+        </div>
+        <h1 class="mt-5 font-semibold text-xl tracking-tight">Sign-in link problem</h1>
+        <p class="mt-2 text-[15px] text-gray-600">{{ message() }}</p>
+        <a href="/login" class="inline-block mt-6 px-5 py-2.5 font-medium text-white bg-gray-900 rounded-lg">Back to sign in</a>
+      </div>
+      <div :else-if="status() === 'working' || status() === 'done'">
+        <div class="flex items-center justify-center mx-auto h-12 w-12 bg-gray-100 rounded-full">
+          <span class="h-6 w-6 text-gray-500 animate-spin i-hugeicons-loading-03"></span>
+        </div>
+        <h1 class="mt-5 font-semibold text-xl tracking-tight">Signing you in</h1>
+        <p class="mt-2 text-[15px] text-gray-600">One moment.</p>
+      </div>
+      <div :else>
+        <div class="flex items-center justify-center mx-auto h-12 w-12 bg-gray-100 rounded-full">
+          <span class="h-6 w-6 text-gray-600 i-hugeicons-mail-open-01"></span>
+        </div>
+        <h1 class="mt-5 font-semibold text-xl 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 px-6 py-3 font-medium text-white bg-gray-900 rounded-lg transition-transform active:scale-[0.98]">Continue</button>
+      </div>
+    </div>
+  </main>
+</template>

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

@@ -225,6 +225,13 @@ function handleSubmit(): void {
         </Button>
       </form>
 
+      {{--
+        Anything that belongs with the credentials, inside the same card:
+        the social sign-in buttons the /register page fills this with. It is
+        a slot because the provider list has to be computed server-side by
+        `configuredSocialProviders()`, and this component is client-only.
+      --}}
+      <slot name="social" />
     </div>
 
     <!-- Login Link -->

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

@@ -41,5 +41,9 @@ async function handleRegister(credentials) {
     :isLoading="isLoading()"
     :error="error()"
     :data-auth-status="isLoading() ? 'loading' : 'ready'"
-  />
+  >
+    <!-- Forwarded so the page mounting this container can put social
+         sign-in inside the card. -->
+    <template #social><slot name="social" /></template>
+  </Register>
 </template>

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

@@ -0,0 +1,163 @@
+@import('../UI/Input', '../UI/Button')
+
+{{--
+  The page a mailed reset link lands on. Presentational only: it renders the
+  four states the flow has and emits `submit`; ResetPasswordDashboard decides
+  which state applies and talks to the API.
+
+  States, in the order a visitor meets them:
+    checking  - the token is being verified, before any field is shown
+    invalid   - the token is expired, already used, or was never real
+    success   - the password is changed
+    (default) - the form
+--}}
+
+<script client>
+const emit = defineEmits()
+const title = useReactiveProp<string>('title', 'Choose a new password')
+const subtitle = useReactiveProp<string>('subtitle', 'Set the password you will use to sign in')
+const isLoading = useReactiveProp<boolean>('isLoading', false)
+const error = useReactiveProp<string>('error', '')
+const success = useReactiveProp<boolean>('success', false)
+const checking = useReactiveProp<boolean>('checking', false)
+const invalid = useReactiveProp<boolean>('invalid', false)
+const password = state('')
+const confirmation = state('')
+
+function mismatch(): boolean {
+  return confirmation().length > 0 && password() !== confirmation()
+}
+
+function canSubmit(): boolean {
+  return !isLoading() && password().length > 0 && confirmation().length > 0 && !mismatch()
+}
+
+function handleSubmit(): void {
+  if (!canSubmit())
+    return
+
+  emit('submit', {
+    password: password(),
+    password_confirmation: confirmation(),
+  })
+}
+</script>
+
+<div class="flex items-center justify-center px-4 py-12 min-h-screen">
+  <div class="max-w-sm w-full">
+    <!-- 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">
+        <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() }}
+      </h1>
+      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
+        {{ subtitle() }}
+      </p>
+    </div>
+
+    <!-- Form Card -->
+    <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">
+      <div :if="checking()">
+        <div class="py-4 text-center">
+          <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+            <div class="h-6 w-6 text-neutral-500 animate-spin i-hugeicons-loading-03"></div>
+          </div>
+          <p class="text-neutral-500 text-sm dark:text-neutral-400">Checking your link</p>
+        </div>
+      </div>
+
+      <div :else-if="invalid()">
+        <div class="py-4 text-center">
+          <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-red-100 dark:bg-red-900/30 rounded-full">
+            <div class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
+          </div>
+          <h2 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
+            This link no longer works
+          </h2>
+          <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
+            Reset links expire, and each one can be used only once. Ask for a fresh link and it will arrive in a moment.
+          </p>
+          <Button href="/forgot-password">
+            Send a new link
+          </Button>
+        </div>
+      </div>
+
+      <div :else-if="success()">
+        <div class="py-4 text-center">
+          <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-green-100 dark:bg-green-900/30 rounded-full">
+            <div class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-checkmark-circle-02"></div>
+          </div>
+          <h2 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
+            Password changed
+          </h2>
+          <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
+            You can sign in with your new password now.
+          </p>
+          <Button href="/login">
+            Go to sign in
+          </Button>
+        </div>
+      </div>
+
+      <div :else>
+        <div :if="error()" role="alert" 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>
+          </div>
+        </div>
+
+        <form @submit.prevent="handleSubmit">
+          <div class="mb-4">
+            <Input
+              type="password"
+              label="New password"
+              placeholder="At least 8 characters"
+              autocomplete="new-password"
+              v-model:value="password"
+              required
+              :disabled="isLoading()"
+            />
+          </div>
+
+          <div class="mb-6">
+            <Input
+              type="password"
+              label="Confirm new password"
+              placeholder="Repeat your new password"
+              autocomplete="new-password"
+              v-model:value="confirmation"
+              :error="mismatch() ? 'Both passwords must match' : ''"
+              required
+              :disabled="isLoading()"
+            />
+          </div>
+
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            fullWidth
+            :loading="isLoading()"
+            :disabled="!canSubmit()"
+          >
+            <span :if="isLoading()">Saving...</span>
+            <span :if="!isLoading()">Change password</span>
+          </Button>
+        </form>
+      </div>
+    </div>
+
+    <!-- Back to Login -->
+    <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+      <a href="/login" class="inline-flex gap-1 items-center font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+        <div class="h-4 w-4 i-hugeicons-arrow-left-01"></div>
+        Back to sign in
+      </a>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,95 @@
+<script client>
+/**
+ * Container for the mailed reset link.
+ *
+ * The link the framework sends is `/password/reset/{token}?email={email}`
+ * (core/auth/src/password/reset.ts, overridable via
+ * `config.auth.passwordReset.url`), so both halves of the credential come off
+ * the URL: the token from the route, the address from the query string.
+ *
+ * The token is verified before any field is shown. `/password/verify-token`
+ * exists for exactly this, and it means an expired link says so immediately
+ * instead of after someone has chosen and typed a new password twice.
+ */
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+const route = useRoute()
+
+const checking = state(true)
+const invalid = state(false)
+const isLoading = state(false)
+const error = state('')
+const success = state(false)
+
+function token(): string {
+  return String(route.params.token || '')
+}
+
+function email(): string {
+  return String(route.query.email || '')
+}
+
+async function verify(): Promise<void> {
+  if (!token() || !email()) {
+    checking.set(false)
+    invalid.set(true)
+    return
+  }
+
+  try {
+    await dashboardApi('/password/verify-token', {
+      method: 'POST',
+      auth: false,
+      body: { token: token(), email: email() },
+    })
+  }
+  catch {
+    // Any failure here is the link, not the network: a token that verifies
+    // is the only thing that lets the form be worth showing.
+    invalid.set(true)
+  }
+  finally {
+    checking.set(false)
+  }
+}
+
+async function handleReset(data): Promise<void> {
+  isLoading.set(true)
+  error.set('')
+
+  try {
+    await dashboardApi('/password/reset', {
+      method: 'POST',
+      auth: false,
+      body: {
+        token: token(),
+        email: email(),
+        password: data.password,
+        password_confirmation: data.password_confirmation,
+      },
+    })
+    success.set(true)
+  }
+  catch (err) {
+    error.set(err instanceof Error ? err.message : 'Could not change your password')
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+effect(() => {
+  verify()
+})
+</script>
+
+<template>
+  <ResetPassword
+    @submit="handleReset"
+    :checking="checking()"
+    :invalid="invalid()"
+    :isLoading="isLoading()"
+    :error="error()"
+    :success="success()"
+  />
+</template>

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">