@stacksjs/defaults 0.72.49 → 0.72.54

package/ai/skills/stacks-browse/scripts/browse.ts

@@ -8,7 +8,7 @@
  *
  * Commands:
  *   bun browse.ts navigate   <url>
- *   bun browse.ts screenshot <url> [--viewport WxH] [--full] [--element SEL] [--scale N] [--out PATH]
+ *   bun browse.ts screenshot <url> [--viewport WxH] [--full | --element SEL | --scroll-y N] [--scale N] [--out PATH]
  *   bun browse.ts responsive <url> [--out-dir DIR]
  *   bun browse.ts monitor    <url> [--ms 5000]
  *   bun browse.ts snapshot   <url>
@@ -403,7 +403,39 @@ async function title(cdp: Cdp): Promise<string> {
   return r.result?.value ?? ''
 }
 
-async function captureScreenshot(cdp: Cdp, opts: { full?: boolean, element?: string } = {}): Promise<Buffer> {
+/**
+ * Scroll the real page to `y` and let one frame settle before the caller
+ * screenshots it.
+ *
+ * `--full` captures the whole document through `captureBeyondViewport`,
+ * which paints content at its full-page layout position without ever
+ * moving `scrollY` - correct for a top-to-bottom review, but useless for
+ * checking anything that depends on an actual mid-scroll viewport: a
+ * `position: sticky` nav overlapping content beneath it, a CSS
+ * `animation-timeline: view()` reveal mid-transition, or simply "what does
+ * the fold look like 800px down". `window.scrollTo(..., { behavior:
+ * 'instant' })` forces the jump synchronously even when the page sets
+ * `scroll-behavior: smooth`, which would otherwise animate the scroll and
+ * leave a screenshot taken immediately after mid-flight. The two rAF
+ * round-trips that follow give the compositor one full frame to repaint
+ * sticky/fixed layers and any scroll-driven animation at the new offset
+ * before `Page.captureScreenshot` reads back pixels, which
+ * `Runtime.evaluate` returning does not by itself guarantee.
+ */
+async function scrollTo(cdp: Cdp, y: number): Promise<void> {
+  const r = await cdp.send('Runtime.evaluate', {
+    expression: `(() => {
+      window.scrollTo({ top: ${y}, left: 0, behavior: 'instant' })
+      return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve(window.scrollY))))
+    })()`,
+    returnByValue: true,
+    awaitPromise: true,
+  })
+  if (r.exceptionDetails)
+    throw new Error(r.exceptionDetails.exception?.description || r.exceptionDetails.text || 'scrollTo failed')
+}
+
+async function captureScreenshot(cdp: Cdp, opts: { full?: boolean, element?: string, scrollY?: number } = {}): Promise<Buffer> {
   let clip: any
   let captureBeyondViewport = false
 
@@ -423,6 +455,9 @@ async function captureScreenshot(cdp: Cdp, opts: { full?: boolean, element?: str
     clip = { x: 0, y: 0, width: Math.ceil(size.width), height: Math.ceil(size.height), scale: 1 }
     captureBeyondViewport = true
   }
+  else if (opts.scrollY != null) {
+    await scrollTo(cdp, opts.scrollY)
+  }
 
   const r = await cdp.send('Page.captureScreenshot', { format: 'png', ...(clip ? { clip, captureBeyondViewport } : {}) })
   return Buffer.from(r.data, 'base64')
@@ -523,6 +558,22 @@ function parseViewport(value: string | undefined): { w: number, h: number } {
   return { w, h }
 }
 
+/** `--scroll-y` on `screenshot`: an explicit document Y to jump to before
+ *  capturing just the viewport, for content a full-page capture cannot show
+ *  (sticky/fixed elements, scroll-linked animation) at a specific fold. */
+function parseScrollY(value: string | boolean | Array<string | boolean> | undefined): number | null {
+  if (value === undefined)
+    return null
+  if (typeof value !== 'string')
+    throw new TypeError('--scroll-y requires a value, for example --scroll-y 800.')
+
+  const y = Number(value)
+  if (!Number.isFinite(y) || y < 0)
+    throw new TypeError(`Invalid --scroll-y "${value}". Expected a non-negative number of pixels.`)
+
+  return y
+}
+
 type ScenarioAction = 'assert' | 'click' | 'evaluate' | 'fill' | 'focus' | 'press' | 'wait'
 
 interface ScenarioStep {
@@ -703,6 +754,10 @@ async function main() {
     console.log('  --cookie "name=value"   repeatable; pre-seeds cookies (e.g. coming-soon bypass)')
     console.log('  --settle 1500           ms to wait after load before acting (default 700; stretch for entrance animations)')
     console.log('  --scheme dark           emulate prefers-color-scheme (light|dark) for QA of theme-aware pages')
+    console.log('  --scroll-y 800          screenshot: jump to this document Y first, then capture just the viewport')
+    console.log('                          (--full renders beyond-viewport without ever scrolling, so it cannot show a')
+    console.log('                          position:sticky/fixed element overlapping content, or a scroll-linked')
+    console.log('                          animation mid-transition, at a specific fold - --scroll-y can)')
     process.exit(url ? 0 : 1)
   }
 
@@ -733,12 +788,16 @@ async function main() {
       const cdp = await openPage(session.port)
       const viewport = parseViewport(typeof flags.viewport === 'string' ? flags.viewport : undefined)
       const scale = flags.scale ? Number(flags.scale) : 1
+      const scrollY = parseScrollY(flags['scroll-y'])
+      const modes = [flags.full && 'full', flags.element && 'element', scrollY != null && 'scroll-y'].filter(Boolean)
+      if (modes.length > 1)
+        throw new TypeError(`--full, --element, and --scroll-y are mutually exclusive; got ${modes.join(', ')}.`)
       const out = (flags.out as string) || `storage/framework/runtime/shots/${new URL(url).pathname.replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '') || 'home'}.png`
       mkdirSync(out.split('/').slice(0, -1).join('/') || '.', { recursive: true })
       const state = await gotoAndInstrument(cdp, url, { viewport, scale, cookies, settleMs, scheme })
-      const png = await captureScreenshot(cdp, { full: !!flags.full, element: flags.element as string | undefined })
+      const png = await captureScreenshot(cdp, { full: !!flags.full, element: flags.element as string | undefined, scrollY: scrollY ?? undefined })
       await Bun.write(out, png)
-      console.log(JSON.stringify({ url, out, viewport: `${viewport.w}x${viewport.h}`, scale, full: !!flags.full, element: flags.element ?? null, bytes: png.length }, null, 2))
+      console.log(JSON.stringify({ url, out, viewport: `${viewport.w}x${viewport.h}`, scale, full: !!flags.full, element: flags.element ?? null, scrollY: scrollY ?? null, bytes: png.length }, null, 2))
       state.dispose()
       cdp.close()
     }

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.72.49",
+  "version": "0.72.54",
   "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,12 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.72.49",
+  "version": "0.72.54",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stacksjs/stacks.git",
+    "directory": "./storage/framework/core/defaults"
+  },
   "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 +51,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.72.49",
+    "@stacksjs/mobile": "^0.72.54",
     "@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>